<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" contents="width=device-width, initial-scale=1.0" />
<title>StarCoder Editor</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-base64@3.7.2/base64.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>
<link rel="stylesheet" href="static/style.css">
</head>
<style type="text/css">
/* body {
font-family: sans-serif;
} */
/* .leftside {
} */
main {
max-width: 80rem;
}
.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-elock;
width: 10em;
text-align: right;
font-size: 80%;
}
#loader_holder_super {
}
#error {
color: red;
width: 100%;
}
#warning {
color: darkorange;
width: 100%;
}
#examples span {
margin-right: 1em;
}
#editor {
position: relative;
width: 100%;
height: 400px;
}
#editor-holder {
position: relative;
width: 100%;
height: 400px;
}
.ace_infill {
color: red;
}
</style>
<body>
<main>
<div class="card" id="about">
<div class="header"> <h1>StarCoder Editor</h1> </div>
<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>
<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>
<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>
</div>
<div class="card" id="examples">
<div id="examples-extend">
<span class="softspan">Extend Examples:</span>
<br>
<span class="softspan"><a href='javascript:select_example("logistic-regression");'>Logistic Regression (Python)</a></span>
<span class="softspan"><a href='javascript:select_example("array");'>Arrays (JS)</a></span>
<span class="softspan"><a href='javascript:select_example("metadata");'>Metadata-Conditioning (JS)</a></span>
</div>
<div id="examples-infill">
<span class="softspan">Infill Examples:</span>
<br>
<span class="softspan"><a href='javascript:select_example("type-pred");'>Type Prediction</a></span>
<span class="softspan"><a href='javascript:select_example("docstring");'>Docstring Generation</a></span>
</div>
</div>
<div class="card" id="controls">
<div>
<label>Num Tokens:</label>
<input type="range" value="64" min="16" max="256" 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>
<div>
<label>Temperature:</label>
<input type="range" value="0.6" min="0.1" max="1.0" step="0.10" class="slider"
oninput="this.nextElementSibling.value = this.value" name="temp" id='temp_slider'>
<output class='a' id="temp_slider_output">0.6</output>
</div>
<div id="buttons">
<br>
<input type="button" value="Extend" id="extend-form-button" />
<input type="button" value="Infill" id="infill-form-button" />
<br>
<br>
<input type="button" value="Add <infill> mask" id="insert-mask-button" title="add the infill marker at cursor or selection" />
</div>
</div>
<div id="edit-container" class="card">
<div id="syntax">
<span class="softspan">Syntax:</span>
<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>
<div id="editor"></div>
</div>
<div id="loader_holder_super" class="card">
<h1>Messages</h1>
<div id="error"></div>
<div id="warning"></div>
<div id="loader_holder">
<div class="loader"></div>
<div>
Generation queued, please wait...
</div>
</div>
</div>
<div id="info" class="card">
<h1 id="debug-info">More Info</h1>
<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>
<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>
</div>
</main>
<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 = {
"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,
"temperature": 0.2,
"mode": "python"
},
"docstring": {
"prompt": `def _minimize_in_graph(build_loss_fn, num_steps=200, optimizer=None):
"""
<infill>
"""
optimizer = tf.compat.v1.train.AdamOptimizer(
0.1) if optimizer is None else optimizer
def train_loop_body(step):
train_op = optimizer.minimize(
build_loss_fn if tf.executing_eagerly() else build_loss_fn())
return tf.tuple(tensors=[tf.add(step, 1)], control_inputs=[train_op])
minimize_op = tf.compat.v1.while_loop(
cond=lambda step: step < num_steps,
body=train_loop_body,
loop_vars=[tf.constant(0)],
return_same_structure=True)[0]
return minimize_op`,
"length": 128,
"temperature": 0.2,
"mode": "python",
},
// extend examples
"logistic-regression": {
"prompt": `X_train, y_train, X_test, y_test = train_test_split(X, y, test_size=0.1)
# Train a logistic regression model, predict the labels on the test set and compute the accuracy score`,
"length": 64,
"temperature": 0.2,
"mode": "python"
},
"array": {
"prompt":
`// Returns every other value in the array as a new array.
function everyOther(arr) {`,
"temperature": 0.2,
"length": 64,
"mode": "javascript"
},
"metadata": {
"prompt": `<filename>start_server.js<gh_stars>100-1000
`,
"temperature": 0.6,
"length": 128,
"mode": "javascript"
},
};
var editor = ace.edit("editor");
editor.setOption("wrap", true);
//var editor = null;
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"]);
$("#temp_slider").val(EXAMPLES[name]["temperature"]);
$("#temp_slider_output").text(EXAMPLES[name]["temperature"]);
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(warn_on_single) {
var lines = editor.getSession().doc.$lines;
var lines_flat = join_lines(lines);
parts = lines_flat.split(SPLIT_TOKEN)
if (warn_on_single && 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(url == "infill"),
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") {
console.log("success");
// $("#prompt").text(data["prompt"]);
// $("#response").text(data["text"]);
set_text(receive_data["text"]);
set_selection(receive_data);
$("#error").text("");
if (receive_data["message"] != "") {
$("#warning").text(receive_data["message"]);
} else {
$("#warning").text("");
}
} else {
console.log("error");
console.log("data:");
console.log(receive_data);
set_text(receive_data["text"])
$("#error").text(receive_data["message"]);
}
}
function error(err) {
console.log(err);
$("#error").text(err);
}
try {
var stringified = JSON.stringify(send_data);
// var encoded_data = encodeURIComponent(btoa(stringified));
var encoded_data = Base64.encodeURI(stringified);
const response = await fetch(`${url}?info=${encoded_data}`);
// const response = await fetch(`${url}` {
// method: 'GET',
// body: encoded_data,
// });
if (response.status >= 400) {
error(response.statusText);
console.log("here");
console.log(response.status);
} else {
response.json().then(success).catch(error).finally(complete);
}
} catch (e) {
error(e);
} finally {
complete();
}
}
}
// 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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.contentWindow.min.js"></script>
</body>
</html>