Spaces:

facebook
/

incoder-demo

Runtime error

App Files Files Community

Daniel Fried commited on Apr 13, 2022

Commit

b72509b

•

1 Parent(s): bcb63b8

style

Browse files

Files changed (4) hide show

modules/app.py +4 -2
static/frame.html +1 -0
static/index.html +107 -115
static/style.css +39 -0

modules/app.py CHANGED Viewed

@@ -9,8 +9,10 @@ if os.path.exists('use_normal_tokenizers'):
     CUDA = False
 else:
     import tokenizers_patch
-    BIG_MODEL = True
-    CUDA = True
 from transformers import AutoModelForCausalLM, AutoTokenizer
 import json

     CUDA = False
 else:
     import tokenizers_patch
+    # BIG_MODEL = True
+    # CUDA = True
+    BIG_MODEL = False
+    CUDA = False
 from transformers import AutoModelForCausalLM, AutoTokenizer
 import json

static/frame.html ADDED Viewed

	@@ -0,0 +1 @@


1	+ <iframe src="index.html"></iframe>

static/index.html CHANGED Viewed

@@ -1,6 +1,9 @@
 <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>
@@ -24,13 +27,14 @@
     <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;
 }
@@ -85,7 +89,7 @@ label {
     display: inline-block;
     width: 10em;
     text-align: right;
-    font-size: 60%;
 }
 #loader_holder_super {
 }
@@ -115,123 +119,111 @@ label {
 }
 </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">Infill Examples:</span>
-    <span><a href='javascript:select_example("class");'>Class generation</a></span>
-    <span><a href='javascript:select_example("type-pred");'>Type prediction</a></span>
-    <span><a href='javascript:select_example("docstring");'>Function to docstring</a></span>
-    <span><a href='javascript:select_example("python-infill2");'>Docstring to function</a></span>
-    <br>
-    <span style="font-weight: bold">Extend Examples:</span>
-    <span><a href='javascript:select_example("javascript");'>JavaScript</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="leftside">
-    <div>
-    <label>Response Length:</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>
-    <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>
-        <!-- <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>
-    <div class="rightside">
     </div>
     </div>
-</form>
-</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>
-  <div id="editor"></div>
-</div>
-<div id="loader_holder_super">
-<div id="loader_holder">
-    <div class="loader"></div>
-    <div>
-      Generation queued, please wait...
     </div>
-</div>
-</div>
-  <div id="error"></div>
-  <div id="warning"></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;

+<!DOCTYPE html>
 <html>
 <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" contents="width=device-width" />
+    <title>InCoder</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-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 {
+} */
 .rightside {
     width: 30em;
 }
     display: inline-block;
     width: 10em;
     text-align: right;
+    font-size: 80%;
 }
 #loader_holder_super {
 }
 }
 </style>
 <body>
+    <div class="card" id="about">
+        <div class="header"> <h1>InCoder: A Generative Model for Code Infilling and Synthesis</h1> </div>
+        <p>Demo of the 6.7B parameter version of InCoder: a decoder-only Transformer model that can both extend and insert/infill code.</p>
+        <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>
+        <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>
     </div>
+    <div class="card" id="examples">
+        <div id="examples-infill">
+            <span class="softspan">Infill Examples:</span>
+            <br>
+            <span class="softspan"><a href='javascript:select_example("class");'>Class generation</a></span>
+            <span class="softspan"><a href='javascript:select_example("type-pred");'>Type prediction</a></span>
+            <span class="softspan"><a href='javascript:select_example("docstring");'>Function to docstring</a></span>
+            <span class="softspan"><a href='javascript:select_example("python-infill2");'>Docstring to function</a></span>
+        </div>
+        <div id="examples-extend">
+            <span class="softspan">Extend Examples:</span>
+            <br>
+            <span class="softspan"><a href='javascript:select_example("python");'>Python</a></span>
+            <span class="softspan"><a href='javascript:select_example("javascript");'>JavaScript</a></span>
+            <span class="softspan"><a href='javascript:select_example("jupyter");'>Jupyter</a></span>
+            <span class="softspan"><a href='javascript:select_example("stackoverflow");'>StackOverflow</a></span>
+            <span class="softspan"><a href='javascript:select_example("metadata-conditioning");'>Metadata Conditioning</a></span>
+            <span class="softspan"><a href='javascript:select_example("metadata-prediction");'>Metadata Prediction</a></span>
         </div>
+    </div>
+    <div class="card" id="controls">
         <div>
+            <label>Response Length:</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">
+            <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>
     </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="loader_holder">
+            <div class="loader"></div>
+            <div>
+                Generation queued, please wait...
+            </div>
+        </div>
+        <div id="error"></div>
+        <div id="warning"></div>
     </div>
+    <div id="info" class="card">
+        <h1 id="debug-info">More Info</h3>
+        <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 (via HuggingFace transformers), see <a
+                href="https://github.com/dpfried/incoder/blob/main/README.md">our readme</a>.
+        </p>
+        <h1 id="debug-info">Credits</h3>
+        <p>Model developed at Facebook AI Research by 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>
     </div>
 <script type="text/javascript">
 // these constants are only used for providing user expectations.
 var OVERHEAD = 3;

static/style.css ADDED Viewed

	@@ -0,0 +1,39 @@

+body {
+	padding: 2rem;
+	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+}
+h1 {
+	font-size: 16px;
+	margin-top: 0;
+}
+p {
+	color: rgb(107, 114, 128);
+	font-size: 15px;
+	margin-bottom: 10px;
+	margin-top: 5px;
+}
+button {
+	font-size: 15px;
+}
+.softspan {
+	color: rgb(127, 134, 148);
+	font-size: 15px;
+	margin-bottom: 10px;
+	margin-top: 5px;
+}
+.card {
+	max-width: 800px;
+	margin: 0 auto;
+	padding: 16px;
+	border: 1px solid lightgray;
+	border-radius: 16px;
+}
+.card p:last-child {
+	margin-bottom: 0;
+}