sidaw commited on
Commit
5900055
1 Parent(s): 003db9a

infill mask and more infill examples

Browse files
Files changed (1) hide show
  1. static/index.html +92 -32
static/index.html CHANGED
@@ -101,16 +101,22 @@ label {
101
  width: 100%;
102
  height: 400px;
103
  }
 
 
 
104
  </style>
105
  <body>
106
  <div class="header">
107
  <h1>InCoder</h1>
108
  </div
109
  <div id="about">
110
- <p>"Extend" will insert text at the end. "Infill" will replace all highlighted regions / insert text at the cursor positions. (Use Ctrl / Command to highlight multiple regions, or place multiple cursors.) </p>
111
  <p id="examples">
112
  <span style="font-weight: bold">Examples:</span>
113
  <span><a href='javascript:select_example("python");'>Python</a></span>
 
 
 
114
  <span><a href='javascript:select_example("javascript");'>JavaScript</a></span>
115
  <span><a href='javascript:select_example("jupyter");'>Jupyter</a></span>
116
  <span><a href='javascript:select_example("stackoverflow");'>StackOverflow</a></span>
@@ -179,7 +185,10 @@ Syntax:
179
  <div class="submit-holder">
180
  <!-- <input type="submit" value="Extend" id="extend-form-button"/> -->
181
  <input type="button" value="Extend" id="extend-form-button"/>
 
 
182
  <input type="button" value="Infill" id="infill-form-button"/>
 
183
  <!--
184
  <div>
185
  <label for="extra_sentinel_checkbox">Infill: Extra sentinel</label>
@@ -208,24 +217,71 @@ Syntax:
208
  </div>
209
  </div>
210
 
211
- <h3>Debug info</h3>
212
  <p>
213
  <script type="text/javascript">
214
  // these constants are only used for providing user expectations.
215
  var OVERHEAD = 3;
216
  var PER_TOKEN = 0.12;
 
217
 
218
  var Range = require("ace/range").Range;
219
 
220
  // examples for the user
221
  var EXAMPLES = {
222
  "python": {
223
- "prompt": "<| file ext=.py |>\ndef count_words(string: str) -> Dict[str, int]:\n \"\"\"Count the number of occurrences of each word in the string.\"\"\"",
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
224
  "length": 128,
225
  "mode": "python"
226
  },
227
  "javascript": {
228
- "prompt": "<| file ext=.js |>\n",
229
  "length": 128,
230
  "mode": "javascript"
231
  },
@@ -259,7 +315,23 @@ var EXAMPLES = {
259
  var editor = ace.edit("editor");
260
 
261
  function set_editor_mode(mode) {
262
- editor.session.setMode("ace/mode/" + mode);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
263
  }
264
 
265
  /*
@@ -364,41 +436,27 @@ function convert_string_index_to_location(string_index, lines) {
364
  }
365
 
366
  function get_infill_parts() {
367
- // todo: update this to handle multi-select
368
  var lines = editor.getSession().doc.$lines;
369
  var lines_flat = join_lines(lines);
 
 
 
 
 
 
 
 
370
  if (editor.selection.ranges.length > 1) {
371
- var spans = [];
372
  for (var i = 0; i < editor.selection.ranges.length; i++) {
373
- var start = convert_location_to_string_index(editor.selection.ranges[i].start, lines);
374
- var end = convert_location_to_string_index(editor.selection.ranges[i].end, lines);
375
- var left = Math.min(start, end);
376
- var right = Math.max(start, end);
377
- spans.push({left: left, right: right});
378
  }
379
- spans.sort(function (a, b) { return a.left - b.left; });
380
- var parts = [];
381
- var last_right = 0;
382
- for (var i = 0; i < spans.length; i++) {
383
- var span = spans[i];
384
- parts.push(lines_flat.substring(last_right, span.left));
385
- last_right = span.right;
386
- }
387
- parts.push(lines_flat.substring(last_right));
388
- return parts;
389
  } else {
390
- var cursor = editor.selection.getCursor();
391
- console.log(cursor);
392
- var anchor = convert_location_to_string_index(editor.getSelection().anchor, lines);
393
- var lead = convert_location_to_string_index(editor.getSelection().lead, lines);
394
- var before = Math.min(anchor, lead);
395
- var after = Math.max(anchor, lead);
396
- var prefix = lines_flat.substring(0, before);
397
- var suffix = lines_flat.substring(after);
398
- return [prefix, suffix]
399
  }
400
  }
401
 
 
402
  function make_generate_listener(url) {
403
  return async function(event) {
404
  var length = $("#length_slider").val();
@@ -480,13 +538,15 @@ function make_generate_listener(url) {
480
 
481
  // actual logic
482
  $(document).ready(function() {
 
483
  $("#extend-form-button").click(make_generate_listener("generate"));
484
  $("#infill-form-button").click(make_generate_listener("infill"));
485
  $("#mode").change(function (e) {
486
  var mode = $("#mode").val();
487
  set_editor_mode(mode);
488
  });
489
- set_editor_mode("python");
 
490
  });
491
  </script>
492
  </body>
 
101
  width: 100%;
102
  height: 400px;
103
  }
104
+ .ace_infill {
105
+ color: red;
106
+ }
107
  </style>
108
  <body>
109
  <div class="header">
110
  <h1>InCoder</h1>
111
  </div
112
  <div id="about">
113
+ <p>Refresh "Extend" will insert text at the end. "Infill" will replace all <infill> masks. (click add <infill> mask to add infill mask at the cursors or selections ) </p>
114
  <p id="examples">
115
  <span style="font-weight: bold">Examples:</span>
116
  <span><a href='javascript:select_example("python");'>Python</a></span>
117
+ <span><a href='javascript:select_example("python-infill2");'>Python-infill</a></span>
118
+ <span><a href='javascript:select_example("type-pred");'>Type-prediction</a></span>
119
+ <span><a href='javascript:select_example("docstring");'>Doc-string</a></span>
120
  <span><a href='javascript:select_example("javascript");'>JavaScript</a></span>
121
  <span><a href='javascript:select_example("jupyter");'>Jupyter</a></span>
122
  <span><a href='javascript:select_example("stackoverflow");'>StackOverflow</a></span>
 
185
  <div class="submit-holder">
186
  <!-- <input type="submit" value="Extend" id="extend-form-button"/> -->
187
  <input type="button" value="Extend" id="extend-form-button"/>
188
+ <span style='margin-left:1em'>
189
+ <input type="button" value="Add <infill> mask" id="insert-mask-button" title="add the infill marker at cursor or selection"/>
190
  <input type="button" value="Infill" id="infill-form-button"/>
191
+ </span>
192
  <!--
193
  <div>
194
  <label for="extra_sentinel_checkbox">Infill: Extra sentinel</label>
 
217
  </div>
218
  </div>
219
 
220
+ <h3 id="debug-info">Debug info</h3>
221
  <p>
222
  <script type="text/javascript">
223
  // these constants are only used for providing user expectations.
224
  var OVERHEAD = 3;
225
  var PER_TOKEN = 0.12;
226
+ var SPLIT_TOKEN = "<infill>"
227
 
228
  var Range = require("ace/range").Range;
229
 
230
  // examples for the user
231
  var EXAMPLES = {
232
  "python": {
233
+ "prompt": "<| file ext=.py |>\nclass Person:\n" + SPLIT_TOKEN + "\np = Person('Eren', 18, 'Male')",
234
+ "length": 128,
235
+ "mode": "python"
236
+ },
237
+ "python-infill2": {
238
+ "prompt":
239
+ `from collections import Counter
240
+ def <infill>(file_name):
241
+ """Count the number of occurrences of each word in the file."""
242
+ <infill>
243
+ `,
244
+ "length": 128,
245
+ "mode": "python"
246
+ },
247
+
248
+ "type-pred": {
249
+ "prompt":
250
+ `def count_words(filename: str) -> <infill>:
251
+ """Count the number of occurrences of each word in the file."""
252
+ with open(filename, 'r') as f:
253
+ word_counts = {}
254
+ for line in f:
255
+ for word in line.split():
256
+ if word in word_counts:
257
+ word_counts[word] = 1
258
+ else:
259
+ word_counts[word] = 1
260
+ return word_counts
261
+ `,
262
+ "length": 64,
263
+ "mode": "python"
264
+ },
265
+ "docstring": {
266
+ "prompt":
267
+ `def count_words(filename: str) -> Dict[str, int]:
268
+ """<infill>
269
+ """
270
+ with open(filename, 'r') as f:
271
+ word_counts = {}
272
+ for line in f:
273
+ for word in line.split():
274
+ if word in word_counts:
275
+ word_counts[word] = 1
276
+ else:
277
+ word_counts[word] = 1
278
+ return word_counts
279
+ `,
280
  "length": 128,
281
  "mode": "python"
282
  },
283
  "javascript": {
284
+ "prompt": "<| file ext=.js |>\n // is something really happening here",
285
  "length": 128,
286
  "mode": "javascript"
287
  },
 
315
  var editor = ace.edit("editor");
316
 
317
  function set_editor_mode(mode) {
318
+ session = editor.session
319
+ session.setMode("ace/mode/" + mode, function() {
320
+ var rules = session.$mode.$highlightRules.getRules();
321
+ for (var stateName in rules) {
322
+ if (Object.prototype.hasOwnProperty.call(rules, stateName)) {
323
+ rules[stateName].unshift({
324
+ token: 'infill',
325
+ regex: SPLIT_TOKEN
326
+ });
327
+ }
328
+ }
329
+ // force recreation of tokenizer
330
+ session.$mode.$tokenizer = null;
331
+ session.bgTokenizer.setTokenizer(session.$mode.getTokenizer());
332
+ // force re-highlight whole document
333
+ session.bgTokenizer.start(0);
334
+ });
335
  }
336
 
337
  /*
 
436
  }
437
 
438
  function get_infill_parts() {
 
439
  var lines = editor.getSession().doc.$lines;
440
  var lines_flat = join_lines(lines);
441
+ parts = lines_flat.split(SPLIT_TOKEN)
442
+ if (parts.length == 1) {
443
+ window.alert('There are no infill masks, add some <infill> masks before requesting an infill')
444
+ }
445
+ return parts
446
+ }
447
+
448
+ function insert_mask() {
449
  if (editor.selection.ranges.length > 1) {
 
450
  for (var i = 0; i < editor.selection.ranges.length; i++) {
451
+ console.log('range is', editor.selection.ranges[i])
452
+ editor.session.replace(editor.selection.ranges[i], SPLIT_TOKEN)
 
 
 
453
  }
 
 
 
 
 
 
 
 
 
 
454
  } else {
455
+ editor.session.replace(editor.selection.getRange(), SPLIT_TOKEN)
 
 
 
 
 
 
 
 
456
  }
457
  }
458
 
459
+
460
  function make_generate_listener(url) {
461
  return async function(event) {
462
  var length = $("#length_slider").val();
 
538
 
539
  // actual logic
540
  $(document).ready(function() {
541
+ $("#insert-mask-button").click(insert_mask);
542
  $("#extend-form-button").click(make_generate_listener("generate"));
543
  $("#infill-form-button").click(make_generate_listener("infill"));
544
  $("#mode").change(function (e) {
545
  var mode = $("#mode").val();
546
  set_editor_mode(mode);
547
  });
548
+ select_example("python")
549
+ // set_editor_mode("python");
550
  });
551
  </script>
552
  </body>