Spaces:

facebook
/

incoder-demo

Sleeping

App Files Files Community

sidaw commited on Apr 12, 2022

Commit

5900055

1 Parent(s): 003db9a

infill mask and more infill examples

Browse files

Files changed (1) hide show

static/index.html +92 -32

static/index.html CHANGED Viewed

@@ -101,16 +101,22 @@ label {
     width: 100%;
     height: 400px;
 }
 </style>
 <body>
 <div class="header">
     <h1>InCoder</h1>
 </div
 <div id="about">
-<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>
 <p id="examples">
     <span style="font-weight: bold">Examples:</span>
     <span><a href='javascript:select_example("python");'>Python</a></span>
     <span><a href='javascript:select_example("javascript");'>JavaScript</a></span>
     <span><a href='javascript:select_example("jupyter");'>Jupyter</a></span>
     <span><a href='javascript:select_example("stackoverflow");'>StackOverflow</a></span>
@@ -179,7 +185,10 @@ Syntax:
     <div class="submit-holder">
         <!-- <input type="submit" value="Extend" id="extend-form-button"/> -->
         <input type="button" value="Extend" id="extend-form-button"/>
         <input type="button" value="Infill" id="infill-form-button"/>
         <!--
         <div>
         <label for="extra_sentinel_checkbox">Infill: Extra sentinel</label>
@@ -208,24 +217,71 @@ Syntax:
 </div>
 </div>
-<h3>Debug info</h3>
 <p>
 <script type="text/javascript">
 // these constants are only used for providing user expectations.
 var OVERHEAD = 3;
 var PER_TOKEN = 0.12;
 var Range = require("ace/range").Range;
 // examples for the user
 var EXAMPLES = {
     "python": {
-        "prompt": "<| file ext=.py |>\ndef count_words(string: str) -> Dict[str, int]:\n    \"\"\"Count the number of occurrences of each word in the string.\"\"\"",
         "length": 128,
         "mode": "python"
     },
     "javascript": {
-        "prompt": "<| file ext=.js |>\n",
         "length": 128,
         "mode": "javascript"
     },
@@ -259,7 +315,23 @@ var EXAMPLES = {
 var editor = ace.edit("editor");
 function set_editor_mode(mode) {
-    editor.session.setMode("ace/mode/" + mode);
 }
 /*
@@ -364,41 +436,27 @@ function convert_string_index_to_location(string_index, lines) {
 }
 function get_infill_parts() {
-    // todo: update this to handle multi-select
     var lines = editor.getSession().doc.$lines;
     var lines_flat = join_lines(lines);
     if (editor.selection.ranges.length > 1) {
-        var spans = [];
         for (var i = 0; i < editor.selection.ranges.length; i++) {
-            var start = convert_location_to_string_index(editor.selection.ranges[i].start, lines);
-            var end = convert_location_to_string_index(editor.selection.ranges[i].end, lines);
-            var left = Math.min(start, end);
-            var right = Math.max(start, end);
-            spans.push({left: left, right: right});
         }
-        spans.sort(function (a, b) { return a.left - b.left; });
-        var parts = [];
-        var last_right = 0;
-        for (var i = 0; i < spans.length; i++) {
-            var span = spans[i];
-            parts.push(lines_flat.substring(last_right, span.left));
-            last_right = span.right;
-        }
-        parts.push(lines_flat.substring(last_right));
-        return parts;
     } else {
-        var cursor = editor.selection.getCursor();
-        console.log(cursor);
-        var anchor = convert_location_to_string_index(editor.getSelection().anchor, lines);
-        var lead = convert_location_to_string_index(editor.getSelection().lead, lines);
-        var before = Math.min(anchor, lead);
-        var after = Math.max(anchor, lead);
-        var prefix = lines_flat.substring(0, before);
-        var suffix = lines_flat.substring(after);
-        return [prefix, suffix]
     }
 }
 function make_generate_listener(url) {
     return async function(event) {
         var length = $("#length_slider").val();
@@ -480,13 +538,15 @@ function make_generate_listener(url) {
 // actual logic
 $(document).ready(function() {
     $("#extend-form-button").click(make_generate_listener("generate"));
     $("#infill-form-button").click(make_generate_listener("infill"));
     $("#mode").change(function (e) {
         var mode = $("#mode").val();
         set_editor_mode(mode);
     });
-    set_editor_mode("python");
 });
 </script>
 </body>

     width: 100%;
     height: 400px;
 }
+.ace_infill {
+    color: red;
+}
 </style>
 <body>
 <div class="header">
     <h1>InCoder</h1>
 </div
 <div id="about">
+<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>
 <p id="examples">
     <span style="font-weight: bold">Examples:</span>
     <span><a href='javascript:select_example("python");'>Python</a></span>
+    <span><a href='javascript:select_example("python-infill2");'>Python-infill</a></span>
+    <span><a href='javascript:select_example("type-pred");'>Type-prediction</a></span>
+    <span><a href='javascript:select_example("docstring");'>Doc-string</a></span>
     <span><a href='javascript:select_example("javascript");'>JavaScript</a></span>
     <span><a href='javascript:select_example("jupyter");'>Jupyter</a></span>
     <span><a href='javascript:select_example("stackoverflow");'>StackOverflow</a></span>
     <div class="submit-holder">
         <!-- <input type="submit" value="Extend" id="extend-form-button"/> -->
         <input type="button" value="Extend" id="extend-form-button"/>
+        <span style='margin-left:1em'>
+        <input type="button" value="Add <infill> mask" id="insert-mask-button" title="add the infill marker at cursor or selection"/>
         <input type="button" value="Infill" id="infill-form-button"/>
+        </span>
         <!--
         <div>
         <label for="extra_sentinel_checkbox">Infill: Extra sentinel</label>
 </div>
 </div>
+<h3 id="debug-info">Debug info</h3>
 <p>
 <script type="text/javascript">
 // these constants are only used for providing user expectations.
 var OVERHEAD = 3;
 var PER_TOKEN = 0.12;
+var SPLIT_TOKEN = "<infill>"
 var Range = require("ace/range").Range;
 // examples for the user
 var EXAMPLES = {
     "python": {
+        "prompt": "<| file ext=.py |>\nclass Person:\n" + SPLIT_TOKEN + "\np = Person('Eren', 18, 'Male')",
+        "length": 128,
+        "mode": "python"
+    },
+    "python-infill2": {
+        "prompt":
+`from collections import Counter
+def <infill>(file_name):
+    """Count the number of occurrences of each word in the file."""
+    <infill>
+`,
+        "length": 128,
+        "mode": "python"
+    },
+    "type-pred": {
+        "prompt":
+`def count_words(filename: str) -> <infill>:
+    """Count the number of occurrences of each word in the file."""
+    with open(filename, 'r') as f:
+        word_counts = {}
+        for line in f:
+            for word in line.split():
+                if word in word_counts:
+                    word_counts[word]  = 1
+                else:
+                    word_counts[word] = 1
+    return word_counts
+`,
+        "length": 64,
+        "mode": "python"
+    },
+    "docstring": {
+        "prompt":
+`def count_words(filename: str) -> Dict[str, int]:
+    """<infill>
+    """
+    with open(filename, 'r') as f:
+        word_counts = {}
+        for line in f:
+            for word in line.split():
+                if word in word_counts:
+                    word_counts[word]  = 1
+                else:
+                    word_counts[word] = 1
+    return word_counts
+`,
         "length": 128,
         "mode": "python"
     },
     "javascript": {
+        "prompt": "<| file ext=.js |>\n // is something really happening here",
         "length": 128,
         "mode": "javascript"
     },
 var editor = ace.edit("editor");
 function set_editor_mode(mode) {
+    session = editor.session
+    session.setMode("ace/mode/" + mode, function() {
+        var rules = session.$mode.$highlightRules.getRules();
+        for (var stateName in rules) {
+            if (Object.prototype.hasOwnProperty.call(rules, stateName)) {
+                rules[stateName].unshift({
+                    token: 'infill',
+                    regex: SPLIT_TOKEN
+                });
+            }
+        }
+        // force recreation of tokenizer
+        session.$mode.$tokenizer = null;
+        session.bgTokenizer.setTokenizer(session.$mode.getTokenizer());
+        // force re-highlight whole document
+        session.bgTokenizer.start(0);
+    });
 }
 /*
 }
 function get_infill_parts() {
     var lines = editor.getSession().doc.$lines;
     var lines_flat = join_lines(lines);
+    parts = lines_flat.split(SPLIT_TOKEN)
+    if (parts.length == 1) {
+        window.alert('There are no infill masks, add some <infill> masks before requesting an infill')
+    }
+    return parts
+}
+function insert_mask() {
     if (editor.selection.ranges.length > 1) {
         for (var i = 0; i < editor.selection.ranges.length; i++) {
+            console.log('range is', editor.selection.ranges[i])
+            editor.session.replace(editor.selection.ranges[i], SPLIT_TOKEN)
         }
     } else {
+        editor.session.replace(editor.selection.getRange(), SPLIT_TOKEN)
     }
 }
 function make_generate_listener(url) {
     return async function(event) {
         var length = $("#length_slider").val();
 // actual logic
 $(document).ready(function() {
+    $("#insert-mask-button").click(insert_mask);
     $("#extend-form-button").click(make_generate_listener("generate"));
     $("#infill-form-button").click(make_generate_listener("infill"));
     $("#mode").change(function (e) {
         var mode = $("#mode").val();
         set_editor_mode(mode);
     });
+    select_example("python")
+    // set_editor_mode("python");
 });
 </script>
 </body>