Team Ai
Apppublic

bigcode/bigcode-editor

sourceHugging Faceupdated 3y agoView on Hugging Face
54likes
index.html541 linesDownload Raw Back to static
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 &lt;infill&gt; 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 &lt;infill&gt; masks. (Click "Add &lt;infill&gt; 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