bigcode/bigcode-editor
54
1<!DOCTYPE html>2<html>3<head>4 <meta charset="utf-8"/>5 <meta name="viewport" contents="width=device-width, initial-scale=1.0" />6 <title>StarCoder Editor</title>7 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>8 <script src="https://cdn.jsdelivr.net/npm/js-base64@3.7.2/base64.min.js"></script>9 10 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/ace.min.js"></script>11 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/mode-plain_text.min.js"></script>12 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/mode-c_cpp.min.js"></script>13 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/mode-csharp.min.js"></script>14 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/mode-clojure.min.js"></script>15 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/mode-coffee.min.js"></script>16 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/mode-golang.min.js"></script>17 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/mode-haskell.min.js"></script>18 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/mode-python.min.js"></script>19 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/mode-java.min.js"></script>20 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/mode-javascript.min.js"></script>21 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/mode-lua.min.js"></script>22 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/mode-objectivec.min.js"></script>23 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/mode-perl.min.js"></script>24 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/mode-php.min.js"></script>25 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/mode-python.min.js"></script>26 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/mode-ruby.min.js"></script>27 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/mode-rust.min.js"></script>28 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/mode-scala.min.js"></script>29 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/mode-sh.min.js"></script>30 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/mode-swift.min.js"></script>31 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/mode-typescript.min.js"></script>32 <link rel="stylesheet" href="static/style.css">33</head>34<style type="text/css">35/* body {36 font-family: sans-serif;37} */38/* .leftside {39} */40main {41 max-width: 80rem;42}43.rightside {44 width: 30em;45}46.submit-holder {47 margin-top: 2em;48}49.submit input {50 font-size: 16pt;51}52.slider {53 width: 20em;54}55#faq {56 max-width: 60em;57}58#result {59 font-family: monospace;60 white-space: pre-wrap;61 word-wrap: break-word;62 font-size: 12pt;63 clear: both;64 margin-top: 1em;65 border: 1px solid black;66 padding: 1em;67 width: 60em;68 min-height: 12em;69}70#prompt {71 font-weight: bold;72}73.loader {74 border: 4px solid #f3f3f3;75 border-radius: 50%;76 border-top: 4px solid #3498db;77 width: 30px;78 height: 30px;79 animation: spin 2s linear infinite;80 margin-right: 1em;81}82@keyframes spin {83 0% { transform: rotate(0deg); }84 100% { transform: rotate(360deg); }85}86#loader_holder {87 visibility: hidden;88 display: flex;89 align-items: center;90}91 92label {93 margin-top: 1em;94 display: inline-elock;95 width: 10em;96 text-align: right;97 font-size: 80%;98}99#loader_holder_super {100}101#error {102 color: red;103 width: 100%;104}105#warning {106 color: darkorange;107 width: 100%;108}109#examples span {110 margin-right: 1em;111}112#editor {113 position: relative;114 width: 100%;115 height: 400px;116}117#editor-holder {118 position: relative;119 width: 100%;120 height: 400px;121}122.ace_infill {123 color: red;124}125</style>126<body>127 <main>128 <div class="card" id="about">129 <div class="header"> <h1>StarCoder Editor</h1> </div>130 <p>This is a demo to interactively generate code with <a href=https://huggingface.co/bigcode/starcoderbase target="_blank" rel="noopener noreferrer">StarCoderBase</a>, a 15B parameter model for code generation in 86 programming languages.</p>131 <p>Select one of the examples below, or input your own code into the editor. You can type <infill> to mark a location you want the model to insert code at.</p>132 <p>Click "Extend" to append text at the end of the editor. Click "Infill" to replace all <infill> masks. (Click "Add <infill> mask" to add a mask at the cursor or replace the current selection.) </p>133 </div>134 <div class="card" id="examples">135 <div id="examples-extend">136 <span class="softspan">Extend Examples:</span>137 <br>138 <span class="softspan"><a href='javascript:select_example("logistic-regression");'>Logistic Regression (Python)</a></span>139 <span class="softspan"><a href='javascript:select_example("array");'>Arrays (JS)</a></span>140 <span class="softspan"><a href='javascript:select_example("metadata");'>Metadata-Conditioning (JS)</a></span>141 </div>142 <div id="examples-infill">143 <span class="softspan">Infill Examples:</span>144 <br>145 <span class="softspan"><a href='javascript:select_example("type-pred");'>Type Prediction</a></span>146 <span class="softspan"><a href='javascript:select_example("docstring");'>Docstring Generation</a></span>147 </div>148 </div>149 <div class="card" id="controls">150 <div>151 <label>Num Tokens:</label>152 <input type="range" value="64" min="16" max="256" step="16" class="slider"153 oninput="this.nextElementSibling.value = this.value" name="length" id='length_slider'>154 <output class='a' id="length_slider_output">64</output>155 </div>156 <div>157 <label>Temperature:</label>158 <input type="range" value="0.6" min="0.1" max="1.0" step="0.10" class="slider"159 oninput="this.nextElementSibling.value = this.value" name="temp" id='temp_slider'>160 <output class='a' id="temp_slider_output">0.6</output>161 </div>162 <div id="buttons">163 <br>164 <input type="button" value="Extend" id="extend-form-button" />165 <input type="button" value="Infill" id="infill-form-button" />166 <br>167 <br>168 <input type="button" value="Add <infill> mask" id="insert-mask-button" title="add the infill marker at cursor or selection" />169 </div>170 </div>171 <div id="edit-container" class="card">172 <div id="syntax">173 <span class="softspan">Syntax:</span>174 <select name="mode" id="mode">175 <option value="text">Text</option>176 <option value="c_cpp">C/C++</option>177 <option value="csharp">C#</option>178 <option value="clojure">Clojure</option>179 <option value="coffee">CoffeeScript</option>180 <option value="golang">Go</option>181 <option value="haskell">Haskell</option>182 <option value="java">Java</option>183 <option value="javascript">JavaScript</option>184 <option value="lua">Lua</option>185 <option value="objectivec">Objective C</option>186 <option value="perl">Perl</option>187 <option value="php">PHP</option>188 <option value="python">Python</option>189 <option value="ruby">Ruby</option>190 <option value="rust">Rust</option>191 <option value="scala">Scala</option>192 <option value="sh">Shell</option>193 <option value="swift">Swift</option>194 <option value="typescript">Typescript</option>195 </select>196 </div>197 <div id="editor"></div>198 </div>199 <div id="loader_holder_super" class="card">200 <h1>Messages</h1>201 <div id="error"></div>202 <div id="warning"></div>203 <div id="loader_holder">204 <div class="loader"></div>205 <div>206 Generation queued, please wait...207 </div>208 </div>209 </div>210 <div id="info" class="card">211 <h1 id="debug-info">More Info</h1>212 <p>See our <a href="https://huggingface.co/bigcode" target="_blank" rel="noopener noreferrer">organization card</a> for links to the technical report, models, VSCode extension, training dataset, and more.</p>213 <p>Credits: BigCode team. This demo is based upon the <a href="https://huggingface.co/spaces/facebook/incoder-demo" target="_blank" rel="noopener noreferrer">InCoder demo<a> by Facebook AI Research.</p>214 </div>215 </main>216<script type="text/javascript">217// these constants are only used for providing user expectations.218var OVERHEAD = 3;219var PER_TOKEN = 0.12;220var SPLIT_TOKEN = "<infill>"221 222var Range = require("ace/range").Range;223 224// examples for the user225var EXAMPLES = {226 "type-pred": {227 "prompt": `def count_words(filename: str) -> <infill>228 """Count the number of occurrences of each word in the file."""229 with open(filename, 'r') as f:230 word_counts = {}231 for line in f:232 for word in line.split():233 if word in word_counts:234 word_counts[word] = 1235 else:236 word_counts[word] = 1237 return word_counts238`,239 "length": 4,240 "temperature": 0.2,241 "mode": "python"242 },243 "docstring": {244 "prompt": `def _minimize_in_graph(build_loss_fn, num_steps=200, optimizer=None):245 """246 <infill>247 """248 optimizer = tf.compat.v1.train.AdamOptimizer(249 0.1) if optimizer is None else optimizer250 251 def train_loop_body(step):252 train_op = optimizer.minimize(253 build_loss_fn if tf.executing_eagerly() else build_loss_fn())254 return tf.tuple(tensors=[tf.add(step, 1)], control_inputs=[train_op])255 256 minimize_op = tf.compat.v1.while_loop(257 cond=lambda step: step < num_steps,258 body=train_loop_body,259 loop_vars=[tf.constant(0)],260 return_same_structure=True)[0] 261 return minimize_op`,262 "length": 128,263 "temperature": 0.2,264 "mode": "python",265 },266 // extend examples267 "logistic-regression": {268 "prompt": `X_train, y_train, X_test, y_test = train_test_split(X, y, test_size=0.1)269 270# Train a logistic regression model, predict the labels on the test set and compute the accuracy score`,271 "length": 64,272 "temperature": 0.6,273 "mode": "python"274 },275 "array": {276 "prompt": 277`// Returns every other value in the array as a new array.278function everyOther(arr) {`,279 "temperature": 0.6,280 "length": 64,281 "mode": "javascript"282 },283 "metadata": {284 "prompt": `<filename>start_server.js<gh_stars>100-1000285`,286 "temperature": 0.6,287 "length": 128,288 "mode": "javascript"289 },290};291 292var editor = ace.edit("editor");293editor.setOption("wrap", true);294//var editor = null;295 296function set_editor_mode(mode) {297 session = editor.session298 session.setMode("ace/mode/" + mode, function() {299 var rules = session.$mode.$highlightRules.getRules();300 for (var stateName in rules) {301 if (Object.prototype.hasOwnProperty.call(rules, stateName)) {302 rules[stateName].unshift({303 token: 'infill',304 regex: SPLIT_TOKEN 305 });306 }307 }308 // force recreation of tokenizer309 session.$mode.$tokenizer = null;310 session.bgTokenizer.setTokenizer(session.$mode.getTokenizer());311 // force re-highlight whole document312 session.bgTokenizer.start(0);313 });314}315 316/*317var textarea = $('textarea[name="prompt"]').hide();318var prefix_textarea = $('textarea[name="prefix"]').hide();319var suffix_textarea = $('textarea[name="suffix"]').hide();320editor.getSession().on('change', function () {321 textarea.val(editor.getSession().getValue());322});323*/324 325function set_text(text) {326 editor.getSession().setValue(text);327 // textarea.val(text);328}329 330function set_selection(data) {331 var lines = editor.getSession().doc.$lines;332 var lines_flat = join_lines(lines);333 if (data['type'] == 'generate') {334 doc_length = lines_flat.length;335 var start = convert_string_index_to_location(data['prompt'].length, lines);336 var end = convert_string_index_to_location(doc_length, lines);337 // reverse this so that we can shift select to shorten and delete extra stuff338 editor.selection.setRange(new Range(end.row, end.column, start.row, start.column));339 } else if (data['type'] == 'infill') {340 var length_so_far = 0;341 for (var i = 0; i < data['infills'].length; i++) {342 var prefix = data['parts'][i];343 var suffix = data['parts'][i+1];344 var infilled = data['infills'][i];345 var start = convert_string_index_to_location(length_so_far + prefix.length, lines);346 var end = convert_string_index_to_location(length_so_far + (prefix + infilled).length, lines);347 var range = null;348 if (data['infills'].length == 1) {349 range = new Range(end.row, end.column, start.row, start.column)350 } else {351 range = new Range(start.row, start.column, end.row, end.column)352 }353 if (i == 0) {354 editor.selection.setRange(range);355 } else {356 editor.selection.addRange(range);357 }358 length_so_far += (prefix + infilled).length;359 }360 }361 editor.focus();362}363 364function select_example(name) {365 $("#length_slider").val(EXAMPLES[name]["length"]);366 $("#length_slider_output").text(EXAMPLES[name]["length"]);367 $("#temp_slider").val(EXAMPLES[name]["temperature"]);368 $("#temp_slider_output").text(EXAMPLES[name]["temperature"]);369 set_text(EXAMPLES[name]["prompt"])370 var mode = EXAMPLES[name]["mode"];371 372 set_editor_mode(mode);373 $("#mode").val(mode).change();374}375 376function newline_character() {377 return editor.getSession().doc.getNewLineCharacter();378}379 380function join_lines(lines) {381 return lines.join(newline_character());382}383 384function get_prefix(location, lines) {385 if (!(location.hasOwnProperty('row') && location.hasOwnProperty('column'))) { 386 console.error("invalid location " + location);387 }388 if (location.row == 0) {389 return lines[location.row].substring(0, location.column);390 } else {391 return join_lines(lines.slice(0, location.row)) + newline_character() + lines[location.row].substring(0, location.column);392 }393}394 395function convert_location_to_string_index(location, lines) {396 return get_prefix(location, lines).length;397}398 399function convert_string_index_to_location(string_index, lines) {400 var column = 0;401 var row = 0;402 var char_count = 0;403 var line_sep_length = editor.getSession().doc.getNewLineCharacter().length;404 for (var i = 0; i < lines.length; i++) {405 var line = lines[i];406 var new_char_count = char_count + line.length + line_sep_length;407 if (string_index < new_char_count) {408 return {409 'row': i,410 'column': string_index - char_count,411 }412 }413 char_count = new_char_count;414 }415 console.error("did not find index " + string_index + " in lines " + lines);416 return null;417}418 419function get_infill_parts(warn_on_single) {420 var lines = editor.getSession().doc.$lines;421 var lines_flat = join_lines(lines);422 parts = lines_flat.split(SPLIT_TOKEN)423 if (warn_on_single && parts.length == 1) {424 window.alert('There are no infill masks, add some <infill> masks before requesting an infill')425 }426 return parts427}428 429function insert_mask() {430 if (editor.selection.ranges.length > 1) {431 for (var i = 0; i < editor.selection.ranges.length; i++) {432 console.log('range is', editor.selection.ranges[i])433 editor.session.replace(editor.selection.ranges[i], SPLIT_TOKEN)434 }435 } else {436 editor.session.replace(editor.selection.getRange(), SPLIT_TOKEN)437 }438}439 440 441function make_generate_listener(url) {442 return async function(event) {443 var length = $("#length_slider").val();444 var eta = PER_TOKEN * length + OVERHEAD;445 // $("#eta").text(eta);446 // $("#infill-form-button").click(function (event) { console.log(editor.selection.getCursor()); });447 448 // get temperature and response length parameters449 var send_data = {450 length: $("#length_slider").val(),451 temperature: $("#temp_slider").val(),452 extra_sentinel: $('#extra_sentinel_checkbox').is(":checked"),453 max_retries: $('#max_retries_slider').val(),454 parts: get_infill_parts(url == "infill"),455 prompt: editor.getSession().getValue(),456 }457 console.log("send_data:");458 console.log(send_data);459 460 $("#loader_holder").css("visibility", "visible");461 $("#extend-form-button").prop("disabled", true);462 $("#infill-form-button").prop("disabled", true);463 $("#error").text("");464 465 function complete() {466 $("#loader_holder").css("visibility", "hidden");467 $("#extend-form-button").prop("disabled", false);468 $("#infill-form-button").prop("disabled", false);469 }470 471 function success(receive_data) {472 console.log("Response:");473 console.log(receive_data);474 if (receive_data["result"] == "success") {475 console.log("success");476 // $("#prompt").text(data["prompt"]);477 // $("#response").text(data["text"]);478 set_text(receive_data["text"]);479 set_selection(receive_data);480 $("#error").text("");481 if (receive_data["message"] != "") {482 $("#warning").text(receive_data["message"]);483 } else {484 $("#warning").text("");485 }486 } else {487 console.log("error");488 console.log("data:");489 console.log(receive_data);490 set_text(receive_data["text"])491 $("#error").text(receive_data["message"]);492 }493 }494 495 function error(err) {496 console.log(err);497 $("#error").text(err);498 }499 500 try {501 var stringified = JSON.stringify(send_data);502 // var encoded_data = encodeURIComponent(btoa(stringified));503 var encoded_data = Base64.encodeURI(stringified);504 505 const response = await fetch(`${url}?info=${encoded_data}`);506 // const response = await fetch(`${url}` {507 // method: 'GET',508 // body: encoded_data,509 // });510 if (response.status >= 400) {511 error(response.statusText);512 console.log("here");513 console.log(response.status);514 } else {515 response.json().then(success).catch(error).finally(complete);516 }517 } catch (e) {518 error(e);519 } finally {520 complete();521 }522 }523}524 525// actual logic526$(document).ready(function() {527 $("#insert-mask-button").click(insert_mask);528 $("#extend-form-button").click(make_generate_listener("generate"));529 $("#infill-form-button").click(make_generate_listener("infill"));530 $("#mode").change(function (e) {531 var mode = $("#mode").val();532 set_editor_mode(mode);533 });534 select_example("python")535 // set_editor_mode("python");536});537</script>538 <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.contentWindow.min.js"></script>539</body>540</html>541 