Spaces:
Sleeping
Sleeping
| <html> | |
| <head> | |
| <title>code models</title> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/ace.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/mode-plain_text.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/mode-c_cpp.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/mode-csharp.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/mode-clojure.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/mode-coffee.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/mode-golang.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/mode-haskell.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/mode-python.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/mode-java.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/mode-javascript.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/mode-lua.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/mode-objectivec.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/mode-perl.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/mode-php.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/mode-python.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/mode-ruby.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/mode-rust.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/mode-scala.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/mode-sh.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/mode-swift.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/mode-typescript.min.js"></script> | |
| </head> | |
| <style type="text/css"> | |
| body { | |
| font-family: sans-serif; | |
| } | |
| .leftside { | |
| } | |
| .rightside { | |
| width: 30em; | |
| } | |
| .submit-holder { | |
| margin-top: 2em; | |
| } | |
| .submit input { | |
| font-size: 16pt; | |
| } | |
| .slider { | |
| width: 20em; | |
| } | |
| #faq { | |
| max-width: 60em; | |
| } | |
| #result { | |
| font-family: monospace; | |
| white-space: pre-wrap; | |
| word-wrap: break-word; | |
| font-size: 12pt; | |
| clear: both; | |
| margin-top: 1em; | |
| border: 1px solid black; | |
| padding: 1em; | |
| width: 60em; | |
| min-height: 12em; | |
| } | |
| #prompt { | |
| font-weight: bold; | |
| } | |
| .loader { | |
| border: 4px solid #f3f3f3; | |
| border-radius: 50%; | |
| border-top: 4px solid #3498db; | |
| width: 30px; | |
| height: 30px; | |
| animation: spin 2s linear infinite; | |
| margin-right: 1em; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| #loader_holder { | |
| visibility: hidden; | |
| display: flex; | |
| align-items: center; | |
| } | |
| label { | |
| margin-top: 1em; | |
| display: inline-block; | |
| width: 10em; | |
| text-align: right; | |
| font-size: 60%; | |
| } | |
| #loader_holder_super { | |
| } | |
| #error { | |
| color: red; | |
| width: 100%; | |
| } | |
| #examples span { | |
| margin-right: 1em; | |
| } | |
| #editor { | |
| position: relative; | |
| 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> | |
| <span><a href='javascript:select_example("metadata-conditioning");'>Metadata Conditioning</a></span> | |
| <span><a href='javascript:select_example("metadata-prediction");'>Metadata Prediction</a></span> | |
| <span><a href='javascript:select_example("humaneval");'>Docstring->Code</a></span> | |
| </div> | |
| </div> | |
| <div class="request"> | |
| <form id="generate-form"> | |
| <div class="rightside"> | |
| <div> | |
| <label>Response Length:</label> | |
| <input type="range" value="64" min="16" max="512" step="16" class="slider" | |
| oninput="this.nextElementSibling.value = this.value" name="length" | |
| id='length_slider'> | |
| <output class='a' id="length_slider_output">64</output> | |
| <div> | |
| <label>Temperature:</label> | |
| <input type="range" value="0.6" min="0.2" max="1.0" step="0.10" class="slider" | |
| oninput="this.nextElementSibling.value = this.value" name="temp" | |
| id='temp_slider' | |
| > | |
| <output>0.6</output> | |
| </div> | |
| <div> | |
| <!-- <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> | |
| <input type="checkbox" value="extra_sentinel" id="extra_sentinel_checkbox" checked/> | |
| </div> | |
| <div> | |
| <label>Infill: Max retries</label> | |
| <input type="range" value="1" min="1" max="5" step="1" class="slider" | |
| oninput="this.nextElementSibling.value = this.value" name="max_retries" | |
| id='max_retries_slider'> | |
| <output class='a' id="max_retries_slider_output">1</output> | |
| <div> | |
| --> | |
| </div> | |
| <br> | |
| <div class="leftside"> | |
| <!-- | |
| <textarea name="prompt" rows="12" cols="100" id="textbox"></textarea> | |
| <textarea name="prefix" rows="12" cols="100" id="textbox"></textarea> | |
| <textarea name="suffix" rows="12" cols="100" id="textbox"></textarea> | |
| --> | |
| <div> | |
| Syntax: | |
| <select name="mode" id="mode"> | |
| <option value="text">Text</option> | |
| <option value="c_cpp">C/C++</option> | |
| <option value="csharp">C#</option> | |
| <option value="clojure">Clojure</option> | |
| <option value="coffee">CoffeeScript</option> | |
| <option value="golang">Go</option> | |
| <option value="haskell">Haskell</option> | |
| <option value="java">Java</option> | |
| <option value="javascript">JavaScript</option> | |
| <option value="lua">Lua</option> | |
| <option value="objectivec">Objective C</option> | |
| <option value="perl">Perl</option> | |
| <option value="php">PHP</option> | |
| <option value="python">Python</option> | |
| <option value="ruby">Ruby</option> | |
| <option value="rust">Rust</option> | |
| <option value="scala">Scala</option> | |
| <option value="sh">Shell</option> | |
| <option value="swift">Swift</option> | |
| <option value="typescript">Typescript</option> | |
| </select> | |
| <div id="editor"></div> | |
| </div> | |
| <div id="error"></div> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| <div id="loader_holder_super"> | |
| <div id="loader_holder"> | |
| <div class="loader"></div> | |
| <div> | |
| Generation queued, please wait... | |
| </div> | |
| </div> | |
| </div> | |
| <h3 id="debug-info">More Info</h3> | |
| <p> | |
| This is a demo interface for <a href="https://github.com/dpfried/incoder/blob/main/paper/InCoder-4-12-22.pdf">InCoder: A Generative Model for Code In-Filling and Synthesis</a>. | |
| </p> | |
| <p> | |
| See <a href="https://sites.google.com/view/incoder-code-models">our project site</a> for more information on these models, including a paper and examples. | |
| </p> | |
| <p> | |
| For instructions on setting up and using the models yourself, see <a href="https://github.com/dpfried/incoder/blob/main/README.md">our readme</a>. | |
| </p> | |
| <h3 id="debug-info">Credits</h3> | |
| <p>Model development: Daniel Fried*, Armen Aghajanyan*, Jessy Lin, Sida Wang, Eric Wallace, Freda Shi, Ruiqi Zhong, Wen-tau Yih, Luke Zettlemoyer, and Mike Lewis</p> | |
| <p>Thanks to Naman Goyal and Stephen Roller for writing the code this was based on. Extensions by Daniel Fried and Sida Wang.</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": 64, | |
| "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": 64, | |
| "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": 4, | |
| "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": 32, | |
| "mode": "python" | |
| }, | |
| "javascript": { | |
| "prompt": "<| file ext=.js |>\n // is something really happening here", | |
| "length": 64, | |
| "mode": "javascript" | |
| }, | |
| "jupyter": { | |
| "prompt": "<| file ext=.ipynb:python |>\n<text>\nThis notebook demonstrates using scikit-learn to perform PCA.\n</text>\n<cell>", | |
| "length": 64, | |
| "mode": "python" | |
| }, | |
| "stackoverflow": { | |
| "prompt": "<| q tags=regex,html |>\nParsing HTML with regular expressions\nHow do I do this? Is it a good idea?\n<|/ q dscore=3 |>\n<| a dscore=4 |>", | |
| "length": 64, | |
| "mode": "text" | |
| }, | |
| "metadata-conditioning": { | |
| "prompt": "<| file ext=.py filename=train_model.py source=github dstars=4 |>\n", | |
| "length": 64, | |
| "mode": "python" | |
| }, | |
| "metadata-prediction": { | |
| "prompt": "<| file source=github ext=.py |>\nfrom setuptools import setup\nfrom setuptools_rust import Binding, RustExtension\n\nextras = {}\nextras[\"testing\"] = [\"pytest\", \"requests\", \"numpy\", \"datasets\"]\nextras[\"docs\"] = [\"sphinx\", \"sphinx_rtd_theme\", \"setuptools_rust\"]\n\nsetup(\n name=\"tokenizers\",\n version=\"0.11\",\n description=\"Fast and Customizable Tokenizers\",\n long_description=open(\"README.md\", \"r\", encoding=\"utf-8\").read(),\n)\n\n<|/ file filename=", | |
| "length": 1, | |
| "mode": "python" | |
| }, | |
| "humaneval": { | |
| "prompt": "from typing import List, Optional\n\n\ndef longest(strings: List[str]) -> Optional[str]:\n \"\"\" Out of list of strings, return the longest one. Return the first one in case of multiple\n strings of the same length. Return None in case the input list is empty.\n >>> longest([])\n\n >>> longest(['a', 'b', 'c'])\n 'a'\n >>> longest(['a', 'bb', 'ccc'])\n 'ccc'\n \"\"\"\n", | |
| "length": 64, | |
| "mode": "python" | |
| }, | |
| }; | |
| 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); | |
| }); | |
| } | |
| /* | |
| var textarea = $('textarea[name="prompt"]').hide(); | |
| var prefix_textarea = $('textarea[name="prefix"]').hide(); | |
| var suffix_textarea = $('textarea[name="suffix"]').hide(); | |
| editor.getSession().on('change', function () { | |
| textarea.val(editor.getSession().getValue()); | |
| }); | |
| */ | |
| function set_text(text) { | |
| editor.getSession().setValue(text); | |
| // textarea.val(text); | |
| } | |
| function set_selection(data) { | |
| var lines = editor.getSession().doc.$lines; | |
| var lines_flat = join_lines(lines); | |
| if (data['type'] == 'generate') { | |
| doc_length = lines_flat.length; | |
| var start = convert_string_index_to_location(data['prompt'].length, lines); | |
| var end = convert_string_index_to_location(doc_length, lines); | |
| // reverse this so that we can shift select to shorten and delete extra stuff | |
| editor.selection.setRange(new Range(end.row, end.column, start.row, start.column)); | |
| } else if (data['type'] == 'infill') { | |
| var length_so_far = 0; | |
| for (var i = 0; i < data['infills'].length; i++) { | |
| var prefix = data['parts'][i]; | |
| var suffix = data['parts'][i+1]; | |
| var infilled = data['infills'][i]; | |
| var start = convert_string_index_to_location(length_so_far + prefix.length, lines); | |
| var end = convert_string_index_to_location(length_so_far + (prefix + infilled).length, lines); | |
| var range = null; | |
| if (data['infills'].length == 1) { | |
| range = new Range(end.row, end.column, start.row, start.column) | |
| } else { | |
| range = new Range(start.row, start.column, end.row, end.column) | |
| } | |
| if (i == 0) { | |
| editor.selection.setRange(range); | |
| } else { | |
| editor.selection.addRange(range); | |
| } | |
| length_so_far += (prefix + infilled).length; | |
| } | |
| } | |
| editor.focus(); | |
| } | |
| function select_example(name) { | |
| $("#length_slider").val(EXAMPLES[name]["length"]); | |
| $("#length_slider_output").text(EXAMPLES[name]["length"]); | |
| set_text(EXAMPLES[name]["prompt"]) | |
| var mode = EXAMPLES[name]["mode"]; | |
| set_editor_mode(mode); | |
| $("#mode").val(mode).change(); | |
| } | |
| function newline_character() { | |
| return editor.getSession().doc.getNewLineCharacter(); | |
| } | |
| function join_lines(lines) { | |
| return lines.join(newline_character()); | |
| } | |
| function get_prefix(location, lines) { | |
| if (!(location.hasOwnProperty('row') && location.hasOwnProperty('column'))) { | |
| console.error("invalid location " + location); | |
| } | |
| if (location.row == 0) { | |
| return lines[location.row].substring(0, location.column); | |
| } else { | |
| return join_lines(lines.slice(0, location.row)) + newline_character() + lines[location.row].substring(0, location.column); | |
| } | |
| } | |
| function convert_location_to_string_index(location, lines) { | |
| return get_prefix(location, lines).length; | |
| } | |
| function convert_string_index_to_location(string_index, lines) { | |
| var column = 0; | |
| var row = 0; | |
| var char_count = 0; | |
| var line_sep_length = editor.getSession().doc.getNewLineCharacter().length; | |
| for (var i = 0; i < lines.length; i++) { | |
| var line = lines[i]; | |
| var new_char_count = char_count + line.length + line_sep_length; | |
| if (string_index < new_char_count) { | |
| return { | |
| 'row': i, | |
| 'column': string_index - char_count, | |
| } | |
| } | |
| char_count = new_char_count; | |
| } | |
| console.error("did not find index " + string_index + " in lines " + lines); | |
| return null; | |
| } | |
| 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(); | |
| var eta = PER_TOKEN * length + OVERHEAD; | |
| // $("#eta").text(eta); | |
| // $("#infill-form-button").click(function (event) { console.log(editor.selection.getCursor()); }); | |
| // get temperature and response length parameters | |
| var send_data = { | |
| length: $("#length_slider").val(), | |
| temperature: $("#temp_slider").val(), | |
| extra_sentinel: $('#extra_sentinel_checkbox').is(":checked"), | |
| max_retries: $('#max_retries_slider').val(), | |
| parts: get_infill_parts(), | |
| prompt: editor.getSession().getValue(), | |
| } | |
| console.log("send_data:"); | |
| console.log(send_data); | |
| $("#loader_holder").css("visibility", "visible"); | |
| $("#extend-form-button").prop("disabled", true); | |
| $("#infill-form-button").prop("disabled", true); | |
| $("#error").text(""); | |
| function complete() { | |
| $("#loader_holder").css("visibility", "hidden"); | |
| $("#extend-form-button").prop("disabled", false); | |
| $("#infill-form-button").prop("disabled", false); | |
| } | |
| function success(receive_data) { | |
| console.log("Response:"); | |
| console.log(receive_data); | |
| if (receive_data["result"] == "success") { | |
| // $("#prompt").text(data["prompt"]); | |
| // $("#response").text(data["text"]); | |
| set_text(receive_data["text"]); | |
| set_selection(receive_data); | |
| $("#error").text(""); | |
| } else { | |
| // set_text(data["prompt"]) | |
| $("#error").text(receive_data["text"]); | |
| } | |
| } | |
| function error(err) { | |
| console.log(err); | |
| $("#editor").text(""); | |
| $("#prompt").text(""); | |
| $("#error").text(err); | |
| } | |
| encoded_data = JSON.stringify(send_data) | |
| try { | |
| const response = await fetch(`${url}?info=${encoded_data}`); | |
| if (response.status >= 400) { | |
| error(response.statusText); | |
| } | |
| response.json().then(success).catch(error).finally(complete); | |
| } catch (e) { | |
| error(e); | |
| } finally { | |
| complete(); | |
| } | |
| /* | |
| $.ajax({ | |
| url: url, | |
| type: "GET", | |
| // processData: true, | |
| // data: send_data, | |
| data: JSON.stringify(send_data), | |
| contentType: 'application/json;charset=UTF-8', | |
| }); | |
| */ | |
| } | |
| } | |
| // 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> | |
| </html> | |