Spaces:
Sleeping
Sleeping
Daniel Fried
commited on
Commit
•
05164e0
1
Parent(s):
b03bf8f
initial commit
Browse files- README.md +9 -5
- index.html +1 -24
- modules/app.py +165 -0
- requirements.txt +6 -0
- start.py +3 -0
- static/index.html +493 -0
- templates/index.html +1 -0
README.md
CHANGED
@@ -1,9 +1,13 @@
|
|
1 |
---
|
2 |
-
title: Incoder Demo
|
3 |
-
emoji:
|
4 |
-
colorFrom:
|
5 |
-
colorTo:
|
6 |
-
sdk:
|
|
|
|
|
|
|
|
|
7 |
pinned: false
|
8 |
---
|
9 |
|
|
|
1 |
---
|
2 |
+
title: Incoder Demo Sandbox
|
3 |
+
emoji: 💻
|
4 |
+
colorFrom: red
|
5 |
+
colorTo: purple
|
6 |
+
sdk: gradio
|
7 |
+
sdk_version: 2.9.1
|
8 |
+
python_version: 3.8.13
|
9 |
+
app_file: start.py
|
10 |
+
license: cc-by-nc-4.0
|
11 |
pinned: false
|
12 |
---
|
13 |
|
index.html
CHANGED
@@ -1,24 +1 @@
|
|
1 |
-
|
2 |
-
<html>
|
3 |
-
<head>
|
4 |
-
<meta charset="utf-8" />
|
5 |
-
<meta name="viewport" content="width=device-width" />
|
6 |
-
<title>My static Space</title>
|
7 |
-
<link rel="stylesheet" href="style.css" />
|
8 |
-
</head>
|
9 |
-
<body>
|
10 |
-
<div class="card">
|
11 |
-
<h1>Welcome to your static Space!</h1>
|
12 |
-
<p>
|
13 |
-
You can modify this app directly by editing <i>index.html</i> in the
|
14 |
-
Files and versions tab.
|
15 |
-
</p>
|
16 |
-
<p>
|
17 |
-
Also don't forget to check the
|
18 |
-
<a href="https://huggingface.co/docs/hub/spaces" target="_blank"
|
19 |
-
>Spaces documentation</a
|
20 |
-
>.
|
21 |
-
</p>
|
22 |
-
</div>
|
23 |
-
</body>
|
24 |
-
</html>
|
|
|
1 |
+
demo is loading
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
modules/app.py
ADDED
@@ -0,0 +1,165 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
import sys
|
2 |
+
from typing import List
|
3 |
+
import traceback
|
4 |
+
from transformers import AutoModelForCausalLM, AutoTokenizer
|
5 |
+
import json
|
6 |
+
|
7 |
+
|
8 |
+
# from flask import Flask, request, render_template
|
9 |
+
# from flask_cors import CORS
|
10 |
+
# app = Flask(__name__, static_folder='static')
|
11 |
+
# app.config['TEMPLATES_AUTO_RELOAD'] = True
|
12 |
+
# CORS(app, resources= {
|
13 |
+
# r"/generate": {"origins": origins},
|
14 |
+
# r"/infill": {"origins": origins},
|
15 |
+
# })
|
16 |
+
# origins=[f"http://localhost:{PORT}", "https://huggingface.co", "https://hf.space"]
|
17 |
+
|
18 |
+
CUDA = True
|
19 |
+
PORT = 7860
|
20 |
+
VERBOSE = False
|
21 |
+
|
22 |
+
from fastapi import FastAPI, Request
|
23 |
+
from fastapi.staticfiles import StaticFiles
|
24 |
+
from fastapi.responses import FileResponse, StreamingResponse
|
25 |
+
app = FastAPI(docs_url=None, redoc_url=None)
|
26 |
+
app.mount("/static", StaticFiles(directory="static"), name="static")
|
27 |
+
|
28 |
+
|
29 |
+
print("loading model")
|
30 |
+
model = AutoModelForCausalLM.from_pretrained("facebook/incoder-6B")
|
31 |
+
print("loading tokenizer")
|
32 |
+
tokenizer = AutoTokenizer.from_pretrained("facebook/incoder-6B")
|
33 |
+
print("loading complete")
|
34 |
+
|
35 |
+
if CUDA:
|
36 |
+
model = model.half().cuda()
|
37 |
+
|
38 |
+
BOS = "<|endoftext|>"
|
39 |
+
EOM = "<|endofmask|>"
|
40 |
+
|
41 |
+
def make_sentinel(i):
|
42 |
+
return f"<|mask:{i}|>"
|
43 |
+
|
44 |
+
SPECIAL_TOKENS = [make_sentinel(i) for i in range(256)] + [EOM]
|
45 |
+
|
46 |
+
def generate(input, length_limit=None, temperature=None):
|
47 |
+
input_ids = tokenizer(input, return_tensors="pt").input_ids
|
48 |
+
if CUDA:
|
49 |
+
input_ids = input_ids.cuda()
|
50 |
+
output = model.generate(input_ids=input_ids, do_sample=True, top_p=0.95, temperature=temperature, max_length=length_limit)
|
51 |
+
detok_hypo_str = tokenizer.decode(output.flatten())
|
52 |
+
if detok_hypo_str.startswith(BOS):
|
53 |
+
detok_hypo_str = detok_hypo_str[len(BOS):]
|
54 |
+
return detok_hypo_str
|
55 |
+
|
56 |
+
def infill(parts: List[str], length_limit=None, temperature=None, extra_sentinel=False, max_retries=1):
|
57 |
+
assert isinstance(parts, list)
|
58 |
+
retries_attempted = 0
|
59 |
+
done = False
|
60 |
+
|
61 |
+
while (not done) and (retries_attempted < max_retries):
|
62 |
+
retries_attempted += 1
|
63 |
+
if VERBOSE:
|
64 |
+
print(f"retry {retries_attempted}")
|
65 |
+
if len(parts) == 1:
|
66 |
+
prompt = parts[0]
|
67 |
+
else:
|
68 |
+
prompt = ""
|
69 |
+
# encode parts separated by sentinel
|
70 |
+
for sentinel_ix, part in enumerate(parts):
|
71 |
+
prompt += part
|
72 |
+
if extra_sentinel or (sentinel_ix < len(parts) - 1):
|
73 |
+
prompt += make_sentinel(sentinel_ix)
|
74 |
+
|
75 |
+
# prompt += TokenizerWrapper.make_sentinel(0)
|
76 |
+
|
77 |
+
infills = []
|
78 |
+
complete = []
|
79 |
+
|
80 |
+
done = True
|
81 |
+
|
82 |
+
for sentinel_ix, part in enumerate(parts[:-1]):
|
83 |
+
complete.append(part)
|
84 |
+
prompt += make_sentinel(sentinel_ix)
|
85 |
+
completion = generate(prompt, length_limit, temperature)
|
86 |
+
completion = completion[len(prompt):]
|
87 |
+
if EOM not in completion:
|
88 |
+
if VERBOSE:
|
89 |
+
print(f"warning: {EOM} not found")
|
90 |
+
completion += EOM
|
91 |
+
# TODO: break inner loop here
|
92 |
+
done = False
|
93 |
+
completion = completion[:completion.index(EOM) + len(EOM)]
|
94 |
+
infilled = completion[:-len(EOM)]
|
95 |
+
infills.append(infilled)
|
96 |
+
complete.append(infilled)
|
97 |
+
prompt += completion
|
98 |
+
complete.append(parts[-1])
|
99 |
+
text = ''.join(complete)
|
100 |
+
|
101 |
+
if VERBOSE:
|
102 |
+
print("generated text:")
|
103 |
+
print(prompt)
|
104 |
+
print()
|
105 |
+
print("parts:")
|
106 |
+
print(parts)
|
107 |
+
print()
|
108 |
+
print("infills:")
|
109 |
+
print(infills)
|
110 |
+
print()
|
111 |
+
print("restitched text:")
|
112 |
+
print(text)
|
113 |
+
print()
|
114 |
+
|
115 |
+
return {
|
116 |
+
'text': text,
|
117 |
+
'parts': parts,
|
118 |
+
'infills': infills,
|
119 |
+
'retries_attempted': retries_attempted,
|
120 |
+
}
|
121 |
+
|
122 |
+
|
123 |
+
@app.head("/")
|
124 |
+
@app.get("/")
|
125 |
+
def index() -> FileResponse:
|
126 |
+
return FileResponse(path="static/index.html", media_type="text/html")
|
127 |
+
|
128 |
+
@app.get('/generate')
|
129 |
+
async def generate_maybe(info: str):
|
130 |
+
# form = await info.json()
|
131 |
+
form = json.loads(info)
|
132 |
+
prompt = form['prompt']
|
133 |
+
length_limit = int(form['length'])
|
134 |
+
temperature = float(form['temperature'])
|
135 |
+
if VERBOSE:
|
136 |
+
print(prompt)
|
137 |
+
try:
|
138 |
+
generation = generate(prompt, length_limit, temperature)
|
139 |
+
return {'result': 'success', 'type': 'generate', 'prompt': prompt, 'text': generation}
|
140 |
+
except Exception as e:
|
141 |
+
traceback.print_exception(*sys.exc_info())
|
142 |
+
return {'result': 'error', 'type': 'generate', 'prompt': prompt, 'text': f'There was an error: {e}. Tell Daniel.'}
|
143 |
+
|
144 |
+
@app.get('/infill')
|
145 |
+
async def infill_maybe(info: str):
|
146 |
+
# form = await info.json()
|
147 |
+
form = json.loads(info)
|
148 |
+
length_limit = int(form['length'])
|
149 |
+
temperature = float(form['temperature'])
|
150 |
+
max_retries = 1
|
151 |
+
extra_sentinel = True
|
152 |
+
try:
|
153 |
+
generation = infill(form['parts'], length_limit, temperature, extra_sentinel=extra_sentinel, max_retries=max_retries)
|
154 |
+
generation['result'] = 'success'
|
155 |
+
generation['type'] = 'infill'
|
156 |
+
return generation
|
157 |
+
# return {'result': 'success', 'prefix': prefix, 'suffix': suffix, 'text': generation['text']}
|
158 |
+
except Exception as e:
|
159 |
+
traceback.print_exception(*sys.exc_info())
|
160 |
+
print(e)
|
161 |
+
return {'result': 'error', 'type': 'infill', 'text': f'There was an error: {e}.'}
|
162 |
+
|
163 |
+
|
164 |
+
if __name__ == "__main__":
|
165 |
+
app.run(host='0.0.0.0', port=PORT, threaded=False)
|
requirements.txt
ADDED
@@ -0,0 +1,6 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
fastapi==0.74.*
|
2 |
+
requests==2.27.*
|
3 |
+
torch==1.11.*
|
4 |
+
uvicorn[standard]==0.17.*
|
5 |
+
https://dl.fbaipublicfiles.com/codemodels/tokenizers-0.11.6-cp38-cp38-linux_x86_64.whl
|
6 |
+
git+https://github.com/huggingface/transformers.git@b18dfd95e1f60ae65a959a7b255fc06522170d1b
|
start.py
ADDED
@@ -0,0 +1,3 @@
|
|
|
|
|
|
|
|
|
1 |
+
import subprocess
|
2 |
+
|
3 |
+
subprocess.run("uvicorn modules.app:app --timeout-keep-alive 300 --host 0.0.0.0 --port 7860", shell=True)
|
static/index.html
ADDED
@@ -0,0 +1,493 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<html>
|
2 |
+
<head>
|
3 |
+
<title>code models</title>
|
4 |
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
|
5 |
+
<script src="https://pagecdn.io/lib/ace/1.4.14/ace.min.js"></script>
|
6 |
+
<script src="https://pagecdn.io/lib/ace/1.4.14/mode-plain_text.min.js"></script>
|
7 |
+
<script src="https://pagecdn.io/lib/ace/1.4.14/mode-c_cpp.min.js"></script>
|
8 |
+
<script src="https://pagecdn.io/lib/ace/1.4.14/mode-csharp.min.js"></script>
|
9 |
+
<script src="https://pagecdn.io/lib/ace/1.4.14/mode-clojure.min.js"></script>
|
10 |
+
<script src="https://pagecdn.io/lib/ace/1.4.14/mode-coffee.min.js"></script>
|
11 |
+
<script src="https://pagecdn.io/lib/ace/1.4.14/mode-golang.min.js"></script>
|
12 |
+
<script src="https://pagecdn.io/lib/ace/1.4.14/mode-haskell.min.js"></script>
|
13 |
+
<script src="https://pagecdn.io/lib/ace/1.4.14/mode-python.min.js"></script>
|
14 |
+
<script src="https://pagecdn.io/lib/ace/1.4.14/mode-java.min.js"></script>
|
15 |
+
<script src="https://pagecdn.io/lib/ace/1.4.14/mode-javascript.min.js"></script>
|
16 |
+
<script src="https://pagecdn.io/lib/ace/1.4.14/mode-lua.min.js"></script>
|
17 |
+
<script src="https://pagecdn.io/lib/ace/1.4.14/mode-objectivec.min.js"></script>
|
18 |
+
<script src="https://pagecdn.io/lib/ace/1.4.14/mode-perl.min.js"></script>
|
19 |
+
<script src="https://pagecdn.io/lib/ace/1.4.14/mode-php.min.js"></script>
|
20 |
+
<script src="https://pagecdn.io/lib/ace/1.4.14/mode-python.min.js"></script>
|
21 |
+
<script src="https://pagecdn.io/lib/ace/1.4.14/mode-ruby.min.js"></script>
|
22 |
+
<script src="https://pagecdn.io/lib/ace/1.4.14/mode-rust.min.js"></script>
|
23 |
+
<script src="https://pagecdn.io/lib/ace/1.4.14/mode-scala.min.js"></script>
|
24 |
+
<script src="https://pagecdn.io/lib/ace/1.4.14/mode-sh.min.js"></script>
|
25 |
+
<script src="https://pagecdn.io/lib/ace/1.4.14/mode-swift.min.js"></script>
|
26 |
+
<script src="https://pagecdn.io/lib/ace/1.4.14/mode-typescript.min.js"></script>
|
27 |
+
</head>
|
28 |
+
<style type="text/css">
|
29 |
+
body {
|
30 |
+
font-family: sans-serif;
|
31 |
+
}
|
32 |
+
.leftside {
|
33 |
+
}
|
34 |
+
.rightside {
|
35 |
+
width: 30em;
|
36 |
+
}
|
37 |
+
.submit-holder {
|
38 |
+
margin-top: 2em;
|
39 |
+
}
|
40 |
+
.submit input {
|
41 |
+
font-size: 16pt;
|
42 |
+
}
|
43 |
+
.slider {
|
44 |
+
width: 20em;
|
45 |
+
}
|
46 |
+
#faq {
|
47 |
+
max-width: 60em;
|
48 |
+
}
|
49 |
+
#result {
|
50 |
+
font-family: monospace;
|
51 |
+
white-space: pre-wrap;
|
52 |
+
word-wrap: break-word;
|
53 |
+
font-size: 12pt;
|
54 |
+
clear: both;
|
55 |
+
margin-top: 1em;
|
56 |
+
border: 1px solid black;
|
57 |
+
padding: 1em;
|
58 |
+
width: 60em;
|
59 |
+
min-height: 12em;
|
60 |
+
}
|
61 |
+
#prompt {
|
62 |
+
font-weight: bold;
|
63 |
+
}
|
64 |
+
.loader {
|
65 |
+
border: 4px solid #f3f3f3;
|
66 |
+
border-radius: 50%;
|
67 |
+
border-top: 4px solid #3498db;
|
68 |
+
width: 30px;
|
69 |
+
height: 30px;
|
70 |
+
animation: spin 2s linear infinite;
|
71 |
+
margin-right: 1em;
|
72 |
+
}
|
73 |
+
@keyframes spin {
|
74 |
+
0% { transform: rotate(0deg); }
|
75 |
+
100% { transform: rotate(360deg); }
|
76 |
+
}
|
77 |
+
#loader_holder {
|
78 |
+
visibility: hidden;
|
79 |
+
display: flex;
|
80 |
+
align-items: center;
|
81 |
+
}
|
82 |
+
|
83 |
+
label {
|
84 |
+
margin-top: 1em;
|
85 |
+
display: inline-block;
|
86 |
+
width: 10em;
|
87 |
+
text-align: right;
|
88 |
+
font-size: 60%;
|
89 |
+
}
|
90 |
+
#loader_holder_super {
|
91 |
+
}
|
92 |
+
#error {
|
93 |
+
color: red;
|
94 |
+
width: 100%;
|
95 |
+
}
|
96 |
+
#examples span {
|
97 |
+
margin-right: 1em;
|
98 |
+
}
|
99 |
+
#editor {
|
100 |
+
position: relative;
|
101 |
+
width: 100%;
|
102 |
+
height: 400px;
|
103 |
+
}
|
104 |
+
</style>
|
105 |
+
<body>
|
106 |
+
<div class="header">
|
107 |
+
<h1>InCoder</h1>
|
108 |
+
</div
|
109 |
+
<div id="about">
|
110 |
+
<p>"Extend" will insert text at the end. "Infill" will replace all highlighted regions / insert text at the cursor positions. (Use Ctrl / Command to highlight multiple regions, or place multiple cursors.) </p>
|
111 |
+
<p id="examples">
|
112 |
+
<span style="font-weight: bold">Examples:</span>
|
113 |
+
<span><a href='javascript:select_example("python");'>Python</a></span>
|
114 |
+
<span><a href='javascript:select_example("javascript");'>JavaScript</a></span>
|
115 |
+
<span><a href='javascript:select_example("jupyter");'>Jupyter</a></span>
|
116 |
+
<span><a href='javascript:select_example("stackoverflow");'>StackOverflow</a></span>
|
117 |
+
<span><a href='javascript:select_example("metadata-conditioning");'>Metadata Conditioning</a></span>
|
118 |
+
<span><a href='javascript:select_example("metadata-prediction");'>Metadata Prediction</a></span>
|
119 |
+
<span><a href='javascript:select_example("humaneval");'>Docstring->Code</a></span>
|
120 |
+
</div>
|
121 |
+
<div>
|
122 |
+
Syntax:
|
123 |
+
<select name="mode" id="mode">
|
124 |
+
<option value="text">Text</option>
|
125 |
+
<option value="c_cpp">C/C++</option>
|
126 |
+
<option value="csharp">C#</option>
|
127 |
+
<option value="clojure">Clojure</option>
|
128 |
+
<option value="coffee">CoffeeScript</option>
|
129 |
+
<option value="golang">Go</option>
|
130 |
+
<option value="haskell">Haskell</option>
|
131 |
+
<option value="java">Java</option>
|
132 |
+
<option value="javascript">JavaScript</option>
|
133 |
+
<option value="lua">Lua</option>
|
134 |
+
<option value="objectivec">Objective C</option>
|
135 |
+
<option value="perl">Perl</option>
|
136 |
+
<option value="php">PHP</option>
|
137 |
+
<option value="python">Python</option>
|
138 |
+
<option value="ruby">Ruby</option>
|
139 |
+
<option value="rust">Rust</option>
|
140 |
+
<option value="scala">Scala</option>
|
141 |
+
<option value="sh">Shell</option>
|
142 |
+
<option value="swift">Swift</option>
|
143 |
+
<option value="typescript">Typescript</option>
|
144 |
+
</select>
|
145 |
+
</div>
|
146 |
+
<div class="request">
|
147 |
+
<form id="generate-form">
|
148 |
+
<div class="leftside">
|
149 |
+
<!--
|
150 |
+
<textarea name="prompt" rows="12" cols="100" id="textbox"></textarea>
|
151 |
+
<textarea name="prefix" rows="12" cols="100" id="textbox"></textarea>
|
152 |
+
<textarea name="suffix" rows="12" cols="100" id="textbox"></textarea>
|
153 |
+
-->
|
154 |
+
<div id="editor"></div>
|
155 |
+
</div>
|
156 |
+
<div class="rightside">
|
157 |
+
<div>
|
158 |
+
<label>Response Length:</label>
|
159 |
+
<input type="range" value="64" min="16" max="512" step="16" class="slider"
|
160 |
+
oninput="this.nextElementSibling.value = this.value" name="length"
|
161 |
+
id='length_slider'>
|
162 |
+
<output class='a' id="length_slider_output">64</output>
|
163 |
+
<div>
|
164 |
+
<label>Temperature:</label>
|
165 |
+
<input type="range" value="0.6" min="0.2" max="1.0" step="0.10" class="slider"
|
166 |
+
oninput="this.nextElementSibling.value = this.value" name="temp"
|
167 |
+
id='temp_slider'
|
168 |
+
>
|
169 |
+
<output>0.6</output>
|
170 |
+
</div>
|
171 |
+
<!--
|
172 |
+
<div>
|
173 |
+
<label>Top-k:</label>
|
174 |
+
<input type="range" value="2" min="1" max="8" step="1" class="slider"
|
175 |
+
oninput="this.nextElementSibling.value = this.value" name="topk">
|
176 |
+
<output>2</output>
|
177 |
+
</div>
|
178 |
+
-->
|
179 |
+
<div class="submit-holder">
|
180 |
+
<!-- <input type="submit" value="Extend" id="extend-form-button"/> -->
|
181 |
+
<input type="button" value="Extend" id="extend-form-button"/>
|
182 |
+
<input type="button" value="Infill" id="infill-form-button"/>
|
183 |
+
<!--
|
184 |
+
<div>
|
185 |
+
<label for="extra_sentinel_checkbox">Infill: Extra sentinel</label>
|
186 |
+
<input type="checkbox" value="extra_sentinel" id="extra_sentinel_checkbox" checked/>
|
187 |
+
</div>
|
188 |
+
<div>
|
189 |
+
<label>Infill: Max retries</label>
|
190 |
+
<input type="range" value="1" min="1" max="5" step="1" class="slider"
|
191 |
+
oninput="this.nextElementSibling.value = this.value" name="max_retries"
|
192 |
+
id='max_retries_slider'>
|
193 |
+
<output class='a' id="max_retries_slider_output">1</output>
|
194 |
+
<div>
|
195 |
+
-->
|
196 |
+
</div>
|
197 |
+
<div id="error"></div>
|
198 |
+
</div>
|
199 |
+
</div>
|
200 |
+
</form>
|
201 |
+
</div>
|
202 |
+
<div id="loader_holder_super">
|
203 |
+
<div id="loader_holder">
|
204 |
+
<div class="loader"></div>
|
205 |
+
<div>
|
206 |
+
Please be patient. Your generation may take <span id="eta">X</span> seconds.
|
207 |
+
</div>
|
208 |
+
</div>
|
209 |
+
</div>
|
210 |
+
|
211 |
+
<h3>Debug info</h3>
|
212 |
+
<p>
|
213 |
+
<script type="text/javascript">
|
214 |
+
// these constants are only used for providing user expectations.
|
215 |
+
var OVERHEAD = 3;
|
216 |
+
var PER_TOKEN = 0.12;
|
217 |
+
|
218 |
+
var Range = require("ace/range").Range;
|
219 |
+
|
220 |
+
// examples for the user
|
221 |
+
var EXAMPLES = {
|
222 |
+
"python": {
|
223 |
+
"prompt": "<| file ext=.py |>\ndef count_words(string: str) -> Dict[str, int]:\n \"\"\"Count the number of occurrences of each word in the string.\"\"\"",
|
224 |
+
"length": 128,
|
225 |
+
"mode": "python"
|
226 |
+
},
|
227 |
+
"javascript": {
|
228 |
+
"prompt": "<| file ext=.js |>\n",
|
229 |
+
"length": 128,
|
230 |
+
"mode": "javascript"
|
231 |
+
},
|
232 |
+
"jupyter": {
|
233 |
+
"prompt": "<| file ext=.ipynb:python |>\n<text>\nThis notebook demonstrates using scikit-learn to perform PCA.\n</text>\n<cell>",
|
234 |
+
"length": 128,
|
235 |
+
"mode": "python"
|
236 |
+
},
|
237 |
+
"stackoverflow": {
|
238 |
+
"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 |>",
|
239 |
+
"length": 128,
|
240 |
+
"mode": "text"
|
241 |
+
},
|
242 |
+
"metadata-conditioning": {
|
243 |
+
"prompt": "<| file ext=.py filename=train_model.py source=github dstars=4 |>\n",
|
244 |
+
"length": 256,
|
245 |
+
"mode": "python"
|
246 |
+
},
|
247 |
+
"metadata-prediction": {
|
248 |
+
"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=",
|
249 |
+
"length": 1,
|
250 |
+
"mode": "python"
|
251 |
+
},
|
252 |
+
"humaneval": {
|
253 |
+
"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",
|
254 |
+
"length": 64,
|
255 |
+
"mode": "python"
|
256 |
+
},
|
257 |
+
};
|
258 |
+
|
259 |
+
var editor = ace.edit("editor");
|
260 |
+
|
261 |
+
function set_editor_mode(mode) {
|
262 |
+
editor.session.setMode("ace/mode/" + mode);
|
263 |
+
}
|
264 |
+
|
265 |
+
/*
|
266 |
+
var textarea = $('textarea[name="prompt"]').hide();
|
267 |
+
var prefix_textarea = $('textarea[name="prefix"]').hide();
|
268 |
+
var suffix_textarea = $('textarea[name="suffix"]').hide();
|
269 |
+
editor.getSession().on('change', function () {
|
270 |
+
textarea.val(editor.getSession().getValue());
|
271 |
+
});
|
272 |
+
*/
|
273 |
+
|
274 |
+
function set_text(text) {
|
275 |
+
editor.getSession().setValue(text);
|
276 |
+
// textarea.val(text);
|
277 |
+
}
|
278 |
+
|
279 |
+
function set_selection(data) {
|
280 |
+
var lines = editor.getSession().doc.$lines;
|
281 |
+
var lines_flat = join_lines(lines);
|
282 |
+
if (data['type'] == 'generate') {
|
283 |
+
doc_length = lines_flat.length;
|
284 |
+
var start = convert_string_index_to_location(data['prompt'].length, lines);
|
285 |
+
var end = convert_string_index_to_location(doc_length, lines);
|
286 |
+
// reverse this so that we can shift select to shorten and delete extra stuff
|
287 |
+
editor.selection.setRange(new Range(end.row, end.column, start.row, start.column));
|
288 |
+
} else if (data['type'] == 'infill') {
|
289 |
+
var length_so_far = 0;
|
290 |
+
for (var i = 0; i < data['infills'].length; i++) {
|
291 |
+
var prefix = data['parts'][i];
|
292 |
+
var suffix = data['parts'][i+1];
|
293 |
+
var infilled = data['infills'][i];
|
294 |
+
var start = convert_string_index_to_location(length_so_far + prefix.length, lines);
|
295 |
+
var end = convert_string_index_to_location(length_so_far + (prefix + infilled).length, lines);
|
296 |
+
var range = null;
|
297 |
+
if (data['infills'].length == 1) {
|
298 |
+
range = new Range(end.row, end.column, start.row, start.column)
|
299 |
+
} else {
|
300 |
+
range = new Range(start.row, start.column, end.row, end.column)
|
301 |
+
}
|
302 |
+
if (i == 0) {
|
303 |
+
editor.selection.setRange(range);
|
304 |
+
} else {
|
305 |
+
editor.selection.addRange(range);
|
306 |
+
}
|
307 |
+
length_so_far += (prefix + infilled).length;
|
308 |
+
}
|
309 |
+
}
|
310 |
+
editor.focus();
|
311 |
+
}
|
312 |
+
|
313 |
+
function select_example(name) {
|
314 |
+
$("#length_slider").val(EXAMPLES[name]["length"]);
|
315 |
+
$("#length_slider_output").text(EXAMPLES[name]["length"]);
|
316 |
+
set_text(EXAMPLES[name]["prompt"])
|
317 |
+
var mode = EXAMPLES[name]["mode"];
|
318 |
+
|
319 |
+
set_editor_mode(mode);
|
320 |
+
$("#mode").val(mode).change();
|
321 |
+
}
|
322 |
+
|
323 |
+
function newline_character() {
|
324 |
+
return editor.getSession().doc.getNewLineCharacter();
|
325 |
+
}
|
326 |
+
|
327 |
+
function join_lines(lines) {
|
328 |
+
return lines.join(newline_character());
|
329 |
+
}
|
330 |
+
|
331 |
+
function get_prefix(location, lines) {
|
332 |
+
if (!(location.hasOwnProperty('row') && location.hasOwnProperty('column'))) {
|
333 |
+
console.error("invalid location " + location);
|
334 |
+
}
|
335 |
+
if (location.row == 0) {
|
336 |
+
return lines[location.row].substring(0, location.column);
|
337 |
+
} else {
|
338 |
+
return join_lines(lines.slice(0, location.row)) + newline_character() + lines[location.row].substring(0, location.column);
|
339 |
+
}
|
340 |
+
}
|
341 |
+
|
342 |
+
function convert_location_to_string_index(location, lines) {
|
343 |
+
return get_prefix(location, lines).length;
|
344 |
+
}
|
345 |
+
|
346 |
+
function convert_string_index_to_location(string_index, lines) {
|
347 |
+
var column = 0;
|
348 |
+
var row = 0;
|
349 |
+
var char_count = 0;
|
350 |
+
var line_sep_length = editor.getSession().doc.getNewLineCharacter().length;
|
351 |
+
for (var i = 0; i < lines.length; i++) {
|
352 |
+
var line = lines[i];
|
353 |
+
var new_char_count = char_count + line.length + line_sep_length;
|
354 |
+
if (string_index < new_char_count) {
|
355 |
+
return {
|
356 |
+
'row': i,
|
357 |
+
'column': string_index - char_count,
|
358 |
+
}
|
359 |
+
}
|
360 |
+
char_count = new_char_count;
|
361 |
+
}
|
362 |
+
console.error("did not find index " + string_index + " in lines " + lines);
|
363 |
+
return null;
|
364 |
+
}
|
365 |
+
|
366 |
+
function get_infill_parts() {
|
367 |
+
// todo: update this to handle multi-select
|
368 |
+
var lines = editor.getSession().doc.$lines;
|
369 |
+
var lines_flat = join_lines(lines);
|
370 |
+
if (editor.selection.ranges.length > 1) {
|
371 |
+
var spans = [];
|
372 |
+
for (var i = 0; i < editor.selection.ranges.length; i++) {
|
373 |
+
var start = convert_location_to_string_index(editor.selection.ranges[i].start, lines);
|
374 |
+
var end = convert_location_to_string_index(editor.selection.ranges[i].end, lines);
|
375 |
+
var left = Math.min(start, end);
|
376 |
+
var right = Math.max(start, end);
|
377 |
+
spans.push({left: left, right: right});
|
378 |
+
}
|
379 |
+
spans.sort(function (a, b) { return a.left - b.left; });
|
380 |
+
var parts = [];
|
381 |
+
var last_right = 0;
|
382 |
+
for (var i = 0; i < spans.length; i++) {
|
383 |
+
var span = spans[i];
|
384 |
+
parts.push(lines_flat.substring(last_right, span.left));
|
385 |
+
last_right = span.right;
|
386 |
+
}
|
387 |
+
parts.push(lines_flat.substring(last_right));
|
388 |
+
return parts;
|
389 |
+
} else {
|
390 |
+
var cursor = editor.selection.getCursor();
|
391 |
+
console.log(cursor);
|
392 |
+
var anchor = convert_location_to_string_index(editor.getSelection().anchor, lines);
|
393 |
+
var lead = convert_location_to_string_index(editor.getSelection().lead, lines);
|
394 |
+
var before = Math.min(anchor, lead);
|
395 |
+
var after = Math.max(anchor, lead);
|
396 |
+
var prefix = lines_flat.substring(0, before);
|
397 |
+
var suffix = lines_flat.substring(after);
|
398 |
+
return [prefix, suffix]
|
399 |
+
}
|
400 |
+
}
|
401 |
+
|
402 |
+
function make_generate_listener(url) {
|
403 |
+
return async function(event) {
|
404 |
+
var length = $("#length_slider").val();
|
405 |
+
var eta = PER_TOKEN * length + OVERHEAD;
|
406 |
+
// $("#eta").text(eta);
|
407 |
+
// $("#infill-form-button").click(function (event) { console.log(editor.selection.getCursor()); });
|
408 |
+
|
409 |
+
// get temperature and response length parameters
|
410 |
+
var send_data = {
|
411 |
+
length: $("#length_slider").val(),
|
412 |
+
temperature: $("#temp_slider").val(),
|
413 |
+
extra_sentinel: $('#extra_sentinel_checkbox').is(":checked"),
|
414 |
+
max_retries: $('#max_retries_slider').val(),
|
415 |
+
parts: get_infill_parts(),
|
416 |
+
prompt: editor.getSession().getValue(),
|
417 |
+
}
|
418 |
+
console.log("send_data:");
|
419 |
+
console.log(send_data);
|
420 |
+
|
421 |
+
$("#loader_holder").css("visibility", "visible");
|
422 |
+
$("#extend-form-button").prop("disabled", true);
|
423 |
+
$("#infill-form-button").prop("disabled", true);
|
424 |
+
$("#error").text("");
|
425 |
+
|
426 |
+
function complete() {
|
427 |
+
$("#loader_holder").css("visibility", "hidden");
|
428 |
+
$("#extend-form-button").prop("disabled", false);
|
429 |
+
$("#infill-form-button").prop("disabled", false);
|
430 |
+
}
|
431 |
+
|
432 |
+
function success(receive_data) {
|
433 |
+
console.log("Response:");
|
434 |
+
console.log(receive_data);
|
435 |
+
if (receive_data["result"] == "success") {
|
436 |
+
// $("#prompt").text(data["prompt"]);
|
437 |
+
// $("#response").text(data["text"]);
|
438 |
+
set_text(receive_data["text"]);
|
439 |
+
set_selection(receive_data);
|
440 |
+
$("#error").text("");
|
441 |
+
} else {
|
442 |
+
// set_text(data["prompt"])
|
443 |
+
$("#error").text(receive_data["text"]);
|
444 |
+
}
|
445 |
+
}
|
446 |
+
|
447 |
+
function error(err) {
|
448 |
+
console.log(err);
|
449 |
+
$("#editor").text("");
|
450 |
+
$("#prompt").text("");
|
451 |
+
$("#error").text(err);
|
452 |
+
}
|
453 |
+
|
454 |
+
encoded_data = JSON.stringify(send_data)
|
455 |
+
|
456 |
+
try {
|
457 |
+
const response = await fetch(`${url}?info=${encoded_data}`);
|
458 |
+
if (response.status >= 400) {
|
459 |
+
error(response.statusText);
|
460 |
+
}
|
461 |
+
response.json().then(success).catch(error).finally(complete);
|
462 |
+
} catch (e) {
|
463 |
+
error(e);
|
464 |
+
} finally {
|
465 |
+
complete();
|
466 |
+
}
|
467 |
+
|
468 |
+
/*
|
469 |
+
$.ajax({
|
470 |
+
url: url,
|
471 |
+
type: "GET",
|
472 |
+
// processData: true,
|
473 |
+
// data: send_data,
|
474 |
+
data: JSON.stringify(send_data),
|
475 |
+
contentType: 'application/json;charset=UTF-8',
|
476 |
+
});
|
477 |
+
*/
|
478 |
+
}
|
479 |
+
}
|
480 |
+
|
481 |
+
// actual logic
|
482 |
+
$(document).ready(function() {
|
483 |
+
$("#extend-form-button").click(make_generate_listener("generate"));
|
484 |
+
$("#infill-form-button").click(make_generate_listener("infill"));
|
485 |
+
$("#mode").change(function (e) {
|
486 |
+
var mode = $("#mode").val();
|
487 |
+
set_editor_mode(mode);
|
488 |
+
});
|
489 |
+
set_editor_mode("python");
|
490 |
+
});
|
491 |
+
</script>
|
492 |
+
</body>
|
493 |
+
</html>
|
templates/index.html
ADDED
@@ -0,0 +1 @@
|
|
|
|
|
1 |
+
../static/index.html
|