Daniel Fried commited on
Commit
bac999f
1 Parent(s): 6b8852d

add in incoder demo frontend

Browse files
.gitignore CHANGED
@@ -157,4 +157,4 @@ cython_debug/
157
  # be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
158
  # and can be added to the global gitignore or merged into this file. For a more nuclear
159
  # option (not recommended) you can uncomment the following to ignore the entire idea folder.
160
- #.idea/
 
157
  # be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
158
  # and can be added to the global gitignore or merged into this file. For a more nuclear
159
  # option (not recommended) you can uncomment the following to ignore the entire idea folder.
160
+ #.idea/start.sh
app.py CHANGED
@@ -19,6 +19,8 @@ FIM_PREFIX = "<fim_prefix>"
19
  FIM_MIDDLE = "<fim_middle>"
20
  FIM_SUFFIX = "<fim_suffix>"
21
 
 
 
22
  FIM_INDICATOR = "<FILL_HERE>"
23
 
24
  FORMATS = """## Model formats
@@ -70,7 +72,7 @@ theme = gr.themes.Monochrome(
70
  )
71
 
72
  client = Client(
73
- API_URL, #headers={"Authorization": f"Bearer {HF_TOKEN}"},
74
  )
75
 
76
  def generate(prompt, temperature=0.9, max_new_tokens=256, top_p=0.95, repetition_penalty=1.0, chat_mode=False):
@@ -103,9 +105,16 @@ def generate(prompt, temperature=0.9, max_new_tokens=256, top_p=0.95, repetition
103
  fim_mode = True
104
  try:
105
  prefix, suffix = prompt.split(FIM_INDICATOR)
 
 
 
 
106
  except:
107
  raise ValueError(f"Only one {FIM_INDICATOR} allowed in prompt!")
 
108
  prompt = f"{FIM_PREFIX}{prefix}{FIM_SUFFIX}{suffix}{FIM_MIDDLE}"
 
 
109
 
110
  stream = client.generate_stream(prompt, **generate_kwargs)
111
 
@@ -116,23 +125,32 @@ def generate(prompt, temperature=0.9, max_new_tokens=256, top_p=0.95, repetition
116
  else:
117
  output = prompt
118
 
 
119
  previous_token = ""
120
  for response in stream:
121
- if fim_mode and response.token.text =="<|endoftext|>":
122
- output += (suffix + "\n" + response.token.text)
123
- elif chat_mode and response.token.text in ["Human", "-----"] and previous_token=="\n":
124
- return output
 
 
125
  else:
126
- output += response.token.text
127
- previous_token = response.token.text
128
- yield output
 
 
 
 
 
 
129
  return output
130
 
131
 
132
  examples = [
133
  "def print_hello_world():",
134
- "def fibonacci(n):",
135
- "class TransformerDecoder(nn.Module):",
136
  "class ComplexNumbers:"
137
  ]
138
 
@@ -158,7 +176,8 @@ _Note:_ this is an internal playground - please do not share. The deployment can
158
  with gr.Column(scale=3):
159
  instruction = gr.Textbox(placeholder="Enter your prompt here", label="Prompt", elem_id="q-input")
160
  submit = gr.Button("Generate", variant="primary")
161
- output = gr.Code(elem_id="q-output")
 
162
 
163
  with gr.Group(elem_id="share-btn-container"):
164
  community_icon = gr.HTML(community_icon_html, visible=True)
@@ -218,6 +237,7 @@ _Note:_ this is an internal playground - please do not share. The deployment can
218
  )
219
 
220
  submit.click(generate, inputs=[instruction, temperature, max_new_tokens, top_p, repetition_penalty, chat_mode], outputs=[output])
 
221
  # instruction.submit(generate, inputs=[instruction, temperature, max_new_tokens, top_p, repetition_penalty, chat_mode], outputs=[output])
222
  share_button.click(None, [], [], _js=share_js)
223
- demo.queue(concurrency_count=16).launch(debug=True)
 
19
  FIM_MIDDLE = "<fim_middle>"
20
  FIM_SUFFIX = "<fim_suffix>"
21
 
22
+ END_OF_TEXT = "<|endoftext|>"
23
+
24
  FIM_INDICATOR = "<FILL_HERE>"
25
 
26
  FORMATS = """## Model formats
 
72
  )
73
 
74
  client = Client(
75
+ API_URL, headers={"Authorization": f"Bearer {HF_TOKEN}"},
76
  )
77
 
78
  def generate(prompt, temperature=0.9, max_new_tokens=256, top_p=0.95, repetition_penalty=1.0, chat_mode=False):
 
105
  fim_mode = True
106
  try:
107
  prefix, suffix = prompt.split(FIM_INDICATOR)
108
+ print("----prefix----")
109
+ print(prefix)
110
+ print("----suffix----")
111
+ print(suffix)
112
  except:
113
  raise ValueError(f"Only one {FIM_INDICATOR} allowed in prompt!")
114
+ # prompt = f"{FIM_PREFIX}{prefix}{FIM_SUFFIX}{suffix}{FIM_MIDDLE}"
115
  prompt = f"{FIM_PREFIX}{prefix}{FIM_SUFFIX}{suffix}{FIM_MIDDLE}"
116
+ print("----prompt----")
117
+ print(prompt)
118
 
119
  stream = client.generate_stream(prompt, **generate_kwargs)
120
 
 
125
  else:
126
  output = prompt
127
 
128
+ print("----stream----")
129
  previous_token = ""
130
  for response in stream:
131
+ if response.token.text == END_OF_TEXT:
132
+ if fim_mode:
133
+ print(suffix)
134
+ output += suffix
135
+ yield output
136
+ break
137
  else:
138
+ if chat_mode and response.token.text in ["Human", "-----"] and previous_token=="\n":
139
+ return output
140
+ else:
141
+ print(response.token.text)
142
+ output += response.token.text
143
+ previous_token = response.token.text
144
+ yield output
145
+ print("full output:")
146
+ print(output)
147
  return output
148
 
149
 
150
  examples = [
151
  "def print_hello_world():",
152
+ 'def fibonacci(n: int) -> int:\n """ Compute the n-th Fibonacci number. """',
153
+ 'from typing import List, Tuple\n\ndef sum_and_product(numbers: List[int]) -> Tuple[int, int]:\n """ Return the sum and the product of the integers in the list as a tuple. Here is the answer of the exercise"""',
154
  "class ComplexNumbers:"
155
  ]
156
 
 
176
  with gr.Column(scale=3):
177
  instruction = gr.Textbox(placeholder="Enter your prompt here", label="Prompt", elem_id="q-input")
178
  submit = gr.Button("Generate", variant="primary")
179
+ edit = gr.Button("Edit")
180
+ output = gr.Code(elem_id="q-output", interactive=True, language="python")
181
 
182
  with gr.Group(elem_id="share-btn-container"):
183
  community_icon = gr.HTML(community_icon_html, visible=True)
 
237
  )
238
 
239
  submit.click(generate, inputs=[instruction, temperature, max_new_tokens, top_p, repetition_penalty, chat_mode], outputs=[output])
240
+ edit.click(generate, inputs=[output, temperature, max_new_tokens, top_p, repetition_penalty, chat_mode], outputs=[output])
241
  # instruction.submit(generate, inputs=[instruction, temperature, max_new_tokens, top_p, repetition_penalty, chat_mode], outputs=[output])
242
  share_button.click(None, [], [], _js=share_js)
243
+ demo.queue(concurrency_count=16).launch(debug=True)
cloud_logging.py ADDED
@@ -0,0 +1,21 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import os
2
+ def make_logging_client():
3
+ cred_filename = os.environ.get('GOOGLE_APPLICATION_CREDENTIALS')
4
+ if not cred_filename:
5
+ return None
6
+ print("cred filename:", cred_filename)
7
+ cred_string = os.environ.get('GOOGLE_APPLICATION_CREDENTIALS_STRING')
8
+ print("cred string:", bool(cred_string))
9
+ if not os.path.exists(cred_filename):
10
+ if cred_string:
11
+ print(f"writing cred string to {cred_filename}")
12
+ with open(cred_filename, 'w') as f:
13
+ f.write(cred_string)
14
+ else:
15
+ return None
16
+ from google.cloud import logging
17
+ logging_client = logging.Client()
18
+ logging_client.setup_logging()
19
+ return logging_client
20
+
21
+ logging_client = make_logging_client()
index.html ADDED
@@ -0,0 +1 @@
 
 
1
+ demo is loading
modules/app.py ADDED
@@ -0,0 +1,174 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import sys
2
+ from typing import List
3
+ import traceback
4
+ import os
5
+ import base64
6
+ import json
7
+ import pprint
8
+
9
+ from huggingface_hub import Repository
10
+ from text_generation import Client
11
+
12
+ import logging
13
+ logging.basicConfig(level=logging.INFO)
14
+ import modules.cloud_logging
15
+
16
+ # from flask import Flask, request, render_template
17
+ # from flask_cors import CORS
18
+ # app = Flask(__name__, static_folder='static')
19
+ # app.config['TEMPLATES_AUTO_RELOAD'] = Tru
20
+ # CORS(app, resources= {
21
+ # r"/generate": {"origins": origins},
22
+ # r"/infill": {"origins": origins},
23
+ # })
24
+ # origins=[f"http://localhost:{PORT}", "https://huggingface.co", "https://hf.space"]
25
+
26
+ PORT = 7860
27
+ VERBOSE = False
28
+
29
+ if os.path.exists('unlock'):
30
+ MAX_LENGTH = 8192
31
+ else:
32
+ MAX_LENGTH = 8192
33
+ TRUNCATION_MESSAGE = f'warning: This demo is limited to {MAX_LENGTH} tokens in the document for efficiency.'
34
+
35
+ from fastapi import FastAPI, Request
36
+ from fastapi.staticfiles import StaticFiles
37
+ from fastapi.responses import FileResponse, StreamingResponse
38
+ app = FastAPI(docs_url=None, redoc_url=None)
39
+ app.mount("/static", StaticFiles(directory="static"), name="static")
40
+
41
+ HF_TOKEN = os.environ.get("HF_TOKEN", None)
42
+ API_URL = os.environ.get("API_URL")
43
+
44
+ with open("./HHH_prompt.txt", "r") as f:
45
+ HHH_PROMPT = f.read() + "\n\n"
46
+
47
+ FIM_PREFIX = "<fim_prefix>"
48
+ FIM_MIDDLE = "<fim_middle>"
49
+ FIM_SUFFIX = "<fim_suffix>"
50
+
51
+ END_OF_TEXT = "<|endoftext|>"
52
+
53
+ FIM_INDICATOR = "<infill>"
54
+
55
+ client = Client(
56
+ API_URL, headers={"Authorization": f"Bearer {HF_TOKEN}"},
57
+ )
58
+
59
+ @app.head("/")
60
+ @app.get("/")
61
+ def index() -> FileResponse:
62
+ return FileResponse(path="static/index.html", media_type="text/html")
63
+
64
+ def generate(prefix, suffix=None, temperature=0.9, max_new_tokens=256, top_p=0.95, repetition_penalty=1.0):
65
+ temperature = float(temperature)
66
+ if temperature < 1e-2:
67
+ temperature = 1e-2
68
+ top_p = float(top_p)
69
+
70
+ generate_kwargs = dict(
71
+ temperature=temperature,
72
+ max_new_tokens=max_new_tokens,
73
+ top_p=top_p,
74
+ repetition_penalty=repetition_penalty,
75
+ do_sample=True,
76
+ seed=42,
77
+ )
78
+
79
+ fim_mode = suffix is not None
80
+
81
+ if suffix is not None:
82
+ prompt = f"{FIM_PREFIX}{prefix}{FIM_SUFFIX}{suffix}{FIM_MIDDLE}"
83
+ print("----prompt----")
84
+ print(prompt)
85
+ else:
86
+ prompt = prefix
87
+ output = client.generate(prompt, **generate_kwargs)
88
+ # TODO
89
+ generated_text = output.generated_text
90
+ truncated = False
91
+ while generated_text.endswith(END_OF_TEXT):
92
+ generated_text = generated_text[:-len(END_OF_TEXT)]
93
+ generation = {
94
+ 'truncated': truncated,
95
+ }
96
+ if fim_mode:
97
+ generation['text'] = prefix + generated_text + suffix
98
+ generation['parts'] = [prefix, suffix]
99
+ generation['infills'] = [generated_text]
100
+ generation['type'] = 'infill'
101
+ else:
102
+ generation['text'] = prompt + generated_text
103
+ generation['parts'] = [prompt]
104
+ generation['type'] = 'generate'
105
+ return generation
106
+
107
+ @app.get('/generate')
108
+ # async def generate_maybe(request: Request):
109
+ async def generate_maybe(info: str):
110
+ # form = await info.json()
111
+ # form = await request.json()
112
+ # info is a base64-encoded, url-escaped json string (since GET doesn't support a body, and POST leads to CORS issues)
113
+ # fix padding, following https://stackoverflow.com/a/9956217/1319683
114
+ info = base64.urlsafe_b64decode(info + '=' * (4 - len(info) % 4)).decode('utf-8')
115
+ form = json.loads(info)
116
+ # print(form)
117
+ prompt = form['prompt']
118
+ length_limit = int(form['length'])
119
+ temperature = float(form['temperature'])
120
+ logging.info(json.dumps({
121
+ 'length': length_limit,
122
+ 'temperature': temperature,
123
+ 'prompt': prompt,
124
+ }))
125
+ try:
126
+ generation = generate(prompt, temperature=temperature, max_new_tokens=length_limit, top_p=0.95, repetition_penalty=1.0)
127
+ if generation['truncated']:
128
+ message = TRUNCATION_MESSAGE
129
+ else:
130
+ message = ''
131
+ return {'result': 'success', 'type': 'generate', 'prompt': prompt, 'text': generation['text'], 'message': message}
132
+ except Exception as e:
133
+ traceback.print_exception(*sys.exc_info())
134
+ logging.error(e)
135
+ return {'result': 'error', 'type': 'generate', 'prompt': prompt, 'message': f'Error: {e}.'}
136
+
137
+ @app.get('/infill')
138
+ # async def infill_maybe(request: Request):
139
+ async def infill_maybe(info: str):
140
+ # form = await info.json()
141
+ # form = await request.json()
142
+ # info is a base64-encoded, url-escaped json string (since GET doesn't support a body, and POST leads to CORS issues)
143
+ # fix padding, following https://stackoverflow.com/a/9956217/1319683
144
+ info = base64.urlsafe_b64decode(info + '=' * (4 - len(info) % 4)).decode('utf-8')
145
+ form = json.loads(info)
146
+ length_limit = int(form['length'])
147
+ temperature = float(form['temperature'])
148
+ max_retries = 1
149
+ extra_sentinel = True
150
+ logging.info(json.dumps({
151
+ 'length': length_limit,
152
+ 'temperature': temperature,
153
+ 'parts_joined': '<infill>'.join(form['parts']),
154
+ }))
155
+ try:
156
+ if len(form['parts']) > 2:
157
+ return {'result': 'error', 'text': ''.join(form['parts']), 'type': 'infill', 'message': f"error: Only a single infill is supported!"}
158
+ prefix, suffix = form['parts']
159
+ generation = generate(prefix, suffix=suffix, temperature=temperature, max_new_tokens=length_limit, top_p=0.95, repetition_penalty=1.0)
160
+ generation['result'] = 'success'
161
+ if generation['truncated']:
162
+ generation['message'] = TRUNCATION_MESSAGE
163
+ else:
164
+ generation['message'] = ''
165
+ return generation
166
+ # return {'result': 'success', 'prefix': prefix, 'suffix': suffix, 'text': generation['text']}
167
+ except Exception as e:
168
+ traceback.print_exception(*sys.exc_info())
169
+ logging.error(e)
170
+ return {'result': 'error', 'type': 'infill', 'message': f'Error: {e}.'}
171
+
172
+
173
+ if __name__ == "__main__":
174
+ app.run(host='0.0.0.0', port=PORT, threaded=False)
modules/cloud_logging.py ADDED
@@ -0,0 +1,21 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import os
2
+ def make_logging_client():
3
+ cred_filename = os.environ.get('GOOGLE_APPLICATION_CREDENTIALS')
4
+ if not cred_filename:
5
+ return None
6
+ print("cred filename:", cred_filename)
7
+ cred_string = os.environ.get('GOOGLE_APPLICATION_CREDENTIALS_STRING')
8
+ print("cred string:", bool(cred_string))
9
+ if not os.path.exists(cred_filename):
10
+ if cred_string:
11
+ print(f"writing cred string to {cred_filename}")
12
+ with open(cred_filename, 'w') as f:
13
+ f.write(cred_string)
14
+ else:
15
+ return None
16
+ from google.cloud import logging
17
+ logging_client = logging.Client()
18
+ logging_client.setup_logging()
19
+ return logging_client
20
+
21
+ logging_client = make_logging_client()
requirements.txt CHANGED
@@ -1,8 +1,6 @@
1
  huggingface_hub
2
  text-generation==0.4.1
3
- # bitsandbytes
4
- # sentencepiece
5
- # git+https://github.com/huggingface/transformers.git@98268b2e76189d65f7068625cf382ebe03b98480
6
- # accelerate>=0.16.0
7
- # bitsandbytes
8
- # sentencepiece
 
1
  huggingface_hub
2
  text-generation==0.4.1
3
+ fastapi
4
+ uvicorn[standard]
5
+ requests
6
+ google-cloud-logging
 
 
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)
start.sh ADDED
@@ -0,0 +1,5 @@
 
 
 
 
 
 
1
+ #!/bin/bash
2
+ export API_URL="https://api-inference.huggingface.co/models/bigcode/starcoder"
3
+ export HF_TOKEN="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"
4
+
5
+ python start.py
static/frame.html ADDED
@@ -0,0 +1 @@
 
 
1
+ <iframe src="index.html"></iframe>
static/index.html ADDED
@@ -0,0 +1,566 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>InCoder</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
+ } */
40
+ main {
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
+
92
+ label {
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 Playground</h1> </div>
130
+ <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>
131
+ <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>
132
+ </div>
133
+ <div class="card" id="examples">
134
+ <div id="examples-extend">
135
+ <span class="softspan">Extend Examples:</span>
136
+ <br>
137
+ <span class="softspan"><a href='javascript:select_example("hello-world");'>Hello World</a></span>
138
+ <span class="softspan"><a href='javascript:select_example("fibonacci");'>Fibonacci</a></span>
139
+ <span class="softspan"><a href='javascript:select_example("typing");'>Typing</a></span>
140
+ <span class="softspan"><a href='javascript:select_example("complex-numbers");'>Complex Numbers</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-1");'>Docstring 1</a></span>
147
+ <span class="softspan"><a href='javascript:select_example("docstring-2");'>Docstring 1</a></span>
148
+ </div>
149
+ </div>
150
+ <div class="card" id="controls">
151
+ <div>
152
+ <label>Num Tokens:</label>
153
+ <input type="range" value="64" min="16" max="256" step="16" class="slider"
154
+ oninput="this.nextElementSibling.value = this.value" name="length" id='length_slider'>
155
+ <output class='a' id="length_slider_output">64</output>
156
+ </div>
157
+ <div>
158
+ <label>Temperature:</label>
159
+ <input type="range" value="0.6" min="0.1" max="1.0" step="0.10" class="slider"
160
+ oninput="this.nextElementSibling.value = this.value" name="temp" id='temp_slider'>
161
+ <output class='a' id="temp_slider_output">0.6</output>
162
+ </div>
163
+ <div id="buttons">
164
+ <br>
165
+ <input type="button" value="Extend" id="extend-form-button" />
166
+ <input type="button" value="Infill" id="infill-form-button" />
167
+ <br>
168
+ <br>
169
+ <input type="button" value="Add <infill> mask" id="insert-mask-button" title="add the infill marker at cursor or selection" />
170
+ </div>
171
+ </div>
172
+ <div id="edit-container" class="card">
173
+ <div id="syntax">
174
+ <span class="softspan">Syntax:</span>
175
+ <select name="mode" id="mode">
176
+ <option value="text">Text</option>
177
+ <option value="c_cpp">C/C++</option>
178
+ <option value="csharp">C#</option>
179
+ <option value="clojure">Clojure</option>
180
+ <option value="coffee">CoffeeScript</option>
181
+ <option value="golang">Go</option>
182
+ <option value="haskell">Haskell</option>
183
+ <option value="java">Java</option>
184
+ <option value="javascript">JavaScript</option>
185
+ <option value="lua">Lua</option>
186
+ <option value="objectivec">Objective C</option>
187
+ <option value="perl">Perl</option>
188
+ <option value="php">PHP</option>
189
+ <option value="python">Python</option>
190
+ <option value="ruby">Ruby</option>
191
+ <option value="rust">Rust</option>
192
+ <option value="scala">Scala</option>
193
+ <option value="sh">Shell</option>
194
+ <option value="swift">Swift</option>
195
+ <option value="typescript">Typescript</option>
196
+ </select>
197
+ </div>
198
+ <div id="editor"></div>
199
+ </div>
200
+ <div id="loader_holder_super" class="card">
201
+ <h1>Messages</h1>
202
+ <div id="error"></div>
203
+ <div id="warning"></div>
204
+ <div id="loader_holder">
205
+ <div class="loader"></div>
206
+ <div>
207
+ Generation queued, please wait...
208
+ </div>
209
+ </div>
210
+ </div>
211
+ <div id="info" class="card">
212
+ <h1 id="debug-info">More Info</h3>
213
+ </div>
214
+ </main>
215
+ <script type="text/javascript">
216
+ // these constants are only used for providing user expectations.
217
+ var OVERHEAD = 3;
218
+ var PER_TOKEN = 0.12;
219
+ var SPLIT_TOKEN = "<infill>"
220
+
221
+ var Range = require("ace/range").Range;
222
+
223
+ // examples for the user
224
+ var EXAMPLES = {
225
+ "type-pred": {
226
+ "prompt":
227
+ `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] = 1
235
+ else:
236
+ word_counts[word] = 1
237
+ return word_counts
238
+ `,
239
+ "length": 4,
240
+ "temperature": 0.2,
241
+ "mode": "python"
242
+ },
243
+ "docstring-1": {
244
+ "prompt":
245
+ `def _minimize_in_graph(build_loss_fn, num_steps=200, optimizer=None):
246
+ """
247
+ <infill>
248
+ """
249
+ optimizer = tf.compat.v1.train.AdamOptimizer(
250
+ 0.1) if optimizer is None else optimizer
251
+
252
+ def train_loop_body(step):
253
+ train_op = optimizer.minimize(
254
+ build_loss_fn if tf.executing_eagerly() else build_loss_fn())
255
+ return tf.tuple(tensors=[tf.add(step, 1)], control_inputs=[train_op])
256
+
257
+ minimize_op = tf.compat.v1.while_loop(
258
+ cond=lambda step: step < num_steps,
259
+ body=train_loop_body,
260
+ loop_vars=[tf.constant(0)],
261
+ return_same_structure=True)[0]
262
+ return minimize_op`,
263
+ "length": 64,
264
+ "temperature": 0.3,
265
+ "mode": "python",
266
+ },
267
+ "docstring-2": {
268
+ "prompt":
269
+ `def count_words(filename: str) -> Dict[str, int]:
270
+ """<infill>
271
+ """
272
+ with open(filename, 'r') as f:
273
+ word_counts = {}
274
+ for line in f:
275
+ for word in line.split():
276
+ if word in word_counts:
277
+ word_counts[word] = 1
278
+ else:
279
+ word_counts[word] = 1
280
+ return word_counts
281
+ `,
282
+ "length": 32,
283
+ "temperature": 0.2,
284
+ "mode": "python"
285
+ },
286
+ // extend examples
287
+ "hello-world": {
288
+ "prompt": "def print_hello_world():",
289
+ "length": 64,
290
+ "temperature": 0.2,
291
+ "mode": "python"
292
+ },
293
+ "fibonacci": {
294
+ "prompt":
295
+ `def fibonacci(n: int) -> int:
296
+ """ Compute the n-th Fibonacci number. """`,
297
+ "temperature": 0.2,
298
+ "length": 64,
299
+ "mode": "python"
300
+ },
301
+ "typing": {
302
+ "prompt":
303
+ `from typing import List, Tuple
304
+
305
+ def sum_and_product(numbers: List[int]) -> Tuple[int, int]:
306
+ """ Return the sum and the product of the integers in the list as a tuple. Here is the answer of the exercise"""`,
307
+ "temperature": 0.2,
308
+ "length": 64,
309
+ "mode": "python"
310
+ },
311
+ "complex-numbers": {
312
+ "prompt":
313
+ `class ComplexNumbers:`,
314
+ "temperature": 0.2,
315
+ "length": 128,
316
+ "mode": "python"
317
+ }
318
+ };
319
+
320
+ var editor = ace.edit("editor");
321
+ editor.setOption("wrap", true);
322
+ //var editor = null;
323
+
324
+ function set_editor_mode(mode) {
325
+ session = editor.session
326
+ session.setMode("ace/mode/" + mode, function() {
327
+ var rules = session.$mode.$highlightRules.getRules();
328
+ for (var stateName in rules) {
329
+ if (Object.prototype.hasOwnProperty.call(rules, stateName)) {
330
+ rules[stateName].unshift({
331
+ token: 'infill',
332
+ regex: SPLIT_TOKEN
333
+ });
334
+ }
335
+ }
336
+ // force recreation of tokenizer
337
+ session.$mode.$tokenizer = null;
338
+ session.bgTokenizer.setTokenizer(session.$mode.getTokenizer());
339
+ // force re-highlight whole document
340
+ session.bgTokenizer.start(0);
341
+ });
342
+ }
343
+
344
+ /*
345
+ var textarea = $('textarea[name="prompt"]').hide();
346
+ var prefix_textarea = $('textarea[name="prefix"]').hide();
347
+ var suffix_textarea = $('textarea[name="suffix"]').hide();
348
+ editor.getSession().on('change', function () {
349
+ textarea.val(editor.getSession().getValue());
350
+ });
351
+ */
352
+
353
+ function set_text(text) {
354
+ editor.getSession().setValue(text);
355
+ // textarea.val(text);
356
+ }
357
+
358
+ function set_selection(data) {
359
+ var lines = editor.getSession().doc.$lines;
360
+ var lines_flat = join_lines(lines);
361
+ if (data['type'] == 'generate') {
362
+ doc_length = lines_flat.length;
363
+ var start = convert_string_index_to_location(data['prompt'].length, lines);
364
+ var end = convert_string_index_to_location(doc_length, lines);
365
+ // reverse this so that we can shift select to shorten and delete extra stuff
366
+ editor.selection.setRange(new Range(end.row, end.column, start.row, start.column));
367
+ } else if (data['type'] == 'infill') {
368
+ var length_so_far = 0;
369
+ for (var i = 0; i < data['infills'].length; i++) {
370
+ var prefix = data['parts'][i];
371
+ var suffix = data['parts'][i+1];
372
+ var infilled = data['infills'][i];
373
+ var start = convert_string_index_to_location(length_so_far + prefix.length, lines);
374
+ var end = convert_string_index_to_location(length_so_far + (prefix + infilled).length, lines);
375
+ var range = null;
376
+ if (data['infills'].length == 1) {
377
+ range = new Range(end.row, end.column, start.row, start.column)
378
+ } else {
379
+ range = new Range(start.row, start.column, end.row, end.column)
380
+ }
381
+ if (i == 0) {
382
+ editor.selection.setRange(range);
383
+ } else {
384
+ editor.selection.addRange(range);
385
+ }
386
+ length_so_far += (prefix + infilled).length;
387
+ }
388
+ }
389
+ editor.focus();
390
+ }
391
+
392
+ function select_example(name) {
393
+ $("#length_slider").val(EXAMPLES[name]["length"]);
394
+ $("#length_slider_output").text(EXAMPLES[name]["length"]);
395
+ $("#temp_slider").val(EXAMPLES[name]["temperature"]);
396
+ $("#temp_slider_output").text(EXAMPLES[name]["temperature"]);
397
+ set_text(EXAMPLES[name]["prompt"])
398
+ var mode = EXAMPLES[name]["mode"];
399
+
400
+ set_editor_mode(mode);
401
+ $("#mode").val(mode).change();
402
+ }
403
+
404
+ function newline_character() {
405
+ return editor.getSession().doc.getNewLineCharacter();
406
+ }
407
+
408
+ function join_lines(lines) {
409
+ return lines.join(newline_character());
410
+ }
411
+
412
+ function get_prefix(location, lines) {
413
+ if (!(location.hasOwnProperty('row') && location.hasOwnProperty('column'))) {
414
+ console.error("invalid location " + location);
415
+ }
416
+ if (location.row == 0) {
417
+ return lines[location.row].substring(0, location.column);
418
+ } else {
419
+ return join_lines(lines.slice(0, location.row)) + newline_character() + lines[location.row].substring(0, location.column);
420
+ }
421
+ }
422
+
423
+ function convert_location_to_string_index(location, lines) {
424
+ return get_prefix(location, lines).length;
425
+ }
426
+
427
+ function convert_string_index_to_location(string_index, lines) {
428
+ var column = 0;
429
+ var row = 0;
430
+ var char_count = 0;
431
+ var line_sep_length = editor.getSession().doc.getNewLineCharacter().length;
432
+ for (var i = 0; i < lines.length; i++) {
433
+ var line = lines[i];
434
+ var new_char_count = char_count + line.length + line_sep_length;
435
+ if (string_index < new_char_count) {
436
+ return {
437
+ 'row': i,
438
+ 'column': string_index - char_count,
439
+ }
440
+ }
441
+ char_count = new_char_count;
442
+ }
443
+ console.error("did not find index " + string_index + " in lines " + lines);
444
+ return null;
445
+ }
446
+
447
+ function get_infill_parts(warn_on_single) {
448
+ var lines = editor.getSession().doc.$lines;
449
+ var lines_flat = join_lines(lines);
450
+ parts = lines_flat.split(SPLIT_TOKEN)
451
+ if (warn_on_single && parts.length == 1) {
452
+ window.alert('There are no infill masks, add some <infill> masks before requesting an infill')
453
+ }
454
+ return parts
455
+ }
456
+
457
+ function insert_mask() {
458
+ if (editor.selection.ranges.length > 1) {
459
+ for (var i = 0; i < editor.selection.ranges.length; i++) {
460
+ console.log('range is', editor.selection.ranges[i])
461
+ editor.session.replace(editor.selection.ranges[i], SPLIT_TOKEN)
462
+ }
463
+ } else {
464
+ editor.session.replace(editor.selection.getRange(), SPLIT_TOKEN)
465
+ }
466
+ }
467
+
468
+
469
+ function make_generate_listener(url) {
470
+ return async function(event) {
471
+ var length = $("#length_slider").val();
472
+ var eta = PER_TOKEN * length + OVERHEAD;
473
+ // $("#eta").text(eta);
474
+ // $("#infill-form-button").click(function (event) { console.log(editor.selection.getCursor()); });
475
+
476
+ // get temperature and response length parameters
477
+ var send_data = {
478
+ length: $("#length_slider").val(),
479
+ temperature: $("#temp_slider").val(),
480
+ extra_sentinel: $('#extra_sentinel_checkbox').is(":checked"),
481
+ max_retries: $('#max_retries_slider').val(),
482
+ parts: get_infill_parts(url == "infill"),
483
+ prompt: editor.getSession().getValue(),
484
+ }
485
+ console.log("send_data:");
486
+ console.log(send_data);
487
+
488
+ $("#loader_holder").css("visibility", "visible");
489
+ $("#extend-form-button").prop("disabled", true);
490
+ $("#infill-form-button").prop("disabled", true);
491
+ $("#error").text("");
492
+
493
+ function complete() {
494
+ $("#loader_holder").css("visibility", "hidden");
495
+ $("#extend-form-button").prop("disabled", false);
496
+ $("#infill-form-button").prop("disabled", false);
497
+ }
498
+
499
+ function success(receive_data) {
500
+ console.log("Response:");
501
+ console.log(receive_data);
502
+ if (receive_data["result"] == "success") {
503
+ console.log("success");
504
+ // $("#prompt").text(data["prompt"]);
505
+ // $("#response").text(data["text"]);
506
+ set_text(receive_data["text"]);
507
+ set_selection(receive_data);
508
+ $("#error").text("");
509
+ if (receive_data["message"] != "") {
510
+ $("#warning").text(receive_data["message"]);
511
+ } else {
512
+ $("#warning").text("");
513
+ }
514
+ } else {
515
+ console.log("error");
516
+ set_text(receive_data["text"])
517
+ $("#error").text(receive_data["message"]);
518
+ }
519
+ }
520
+
521
+ function error(err) {
522
+ console.log(err);
523
+ $("#error").text(err);
524
+ }
525
+
526
+ try {
527
+ var stringified = JSON.stringify(send_data);
528
+ // var encoded_data = encodeURIComponent(btoa(stringified));
529
+ var encoded_data = Base64.encodeURI(stringified);
530
+
531
+ const response = await fetch(`${url}?info=${encoded_data}`);
532
+ // const response = await fetch(`${url}` {
533
+ // method: 'GET',
534
+ // body: encoded_data,
535
+ // });
536
+ if (response.status >= 400) {
537
+ error(response.statusText);
538
+ console.log("here");
539
+ console.log(response.status);
540
+ } else {
541
+ response.json().then(success).catch(error).finally(complete);
542
+ }
543
+ } catch (e) {
544
+ error(e);
545
+ } finally {
546
+ complete();
547
+ }
548
+ }
549
+ }
550
+
551
+ // actual logic
552
+ $(document).ready(function() {
553
+ $("#insert-mask-button").click(insert_mask);
554
+ $("#extend-form-button").click(make_generate_listener("generate"));
555
+ $("#infill-form-button").click(make_generate_listener("infill"));
556
+ $("#mode").change(function (e) {
557
+ var mode = $("#mode").val();
558
+ set_editor_mode(mode);
559
+ });
560
+ select_example("python")
561
+ // set_editor_mode("python");
562
+ });
563
+ </script>
564
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.contentWindow.min.js"></script>
565
+ </body>
566
+ </html>
static/style.css ADDED
@@ -0,0 +1,39 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ body {
2
+ padding: 2rem;
3
+ font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
4
+ }
5
+
6
+ h1 {
7
+ font-size: 16px;
8
+ margin-top: 0;
9
+ }
10
+
11
+ p {
12
+ color: rgb(107, 114, 128);
13
+ font-size: 15px;
14
+ margin-bottom: 10px;
15
+ margin-top: 5px;
16
+ }
17
+
18
+ button {
19
+ font-size: 15px;
20
+ }
21
+
22
+ .softspan {
23
+ color: rgb(127, 134, 148);
24
+ font-size: 15px;
25
+ margin-bottom: 10px;
26
+ margin-top: 5px;
27
+ }
28
+
29
+ .card {
30
+ max-width: 800px;
31
+ margin: 0 auto;
32
+ padding: 16px;
33
+ border: 1px solid lightgray;
34
+ border-radius: 16px;
35
+ }
36
+
37
+ .card p:last-child {
38
+ margin-bottom: 0;
39
+ }
style.css ADDED
@@ -0,0 +1,28 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ body {
2
+ padding: 2rem;
3
+ font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
4
+ }
5
+
6
+ h1 {
7
+ font-size: 16px;
8
+ margin-top: 0;
9
+ }
10
+
11
+ p {
12
+ color: rgb(107, 114, 128);
13
+ font-size: 15px;
14
+ margin-bottom: 10px;
15
+ margin-top: 5px;
16
+ }
17
+
18
+ .card {
19
+ max-width: 620px;
20
+ margin: 0 auto;
21
+ padding: 16px;
22
+ border: 1px solid lightgray;
23
+ border-radius: 16px;
24
+ }
25
+
26
+ .card p:last-child {
27
+ margin-bottom: 0;
28
+ }
templates/index.html ADDED
@@ -0,0 +1,633 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>InCoder</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
+ } */
40
+ main {
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
+
92
+ label {
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>InCoder: A Generative Model for Code Infilling and Synthesis</h1> </div>
130
+ <p>Demo of the 6.7B parameter version of InCoder: a decoder-only Transformer model that can both extend and insert/infill code.</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-infill">
136
+ <span class="softspan">Infill Examples:</span>
137
+ <br>
138
+ <span class="softspan"><a href='javascript:select_example("type-pred");'>Type prediction</a></span>
139
+ <span class="softspan"><a href='javascript:select_example("multi-region");'>Docstring to function</a></span>
140
+ <span class="softspan"><a href='javascript:select_example("docstring-2");'>Function to docstring</a></span>
141
+ <!--
142
+ <span class="softspan"><a href='javascript:select_example("python-infill2");'>Docstring to function</a></span>
143
+ -->
144
+ <span class="softspan"><a href='javascript:select_example("class");'>Class generation</a></span>
145
+ </div>
146
+ <div id="examples-extend">
147
+ <span class="softspan">Extend Examples:</span>
148
+ <br>
149
+ <span class="softspan"><a href='javascript:select_example("python");'>Python</a></span>
150
+ <span class="softspan"><a href='javascript:select_example("javascript");'>JavaScript</a></span>
151
+ <span class="softspan"><a href='javascript:select_example("jupyter");'>Jupyter</a></span>
152
+ <span class="softspan"><a href='javascript:select_example("stackoverflow");'>StackOverflow</a></span>
153
+ <span class="softspan"><a href='javascript:select_example("metadata-conditioning");'>Metadata Conditioning</a></span>
154
+ <span class="softspan"><a href='javascript:select_example("metadata-prediction");'>Metadata Prediction</a></span>
155
+ </div>
156
+ </div>
157
+ <div class="card" id="controls">
158
+ <div>
159
+ <label>Num Tokens:</label>
160
+ <input type="range" value="64" min="16" max="256" step="16" class="slider"
161
+ oninput="this.nextElementSibling.value = this.value" name="length" id='length_slider'>
162
+ <output class='a' id="length_slider_output">64</output>
163
+ </div>
164
+ <div>
165
+ <label>Temperature:</label>
166
+ <input type="range" value="0.6" min="0.1" max="1.0" step="0.10" class="slider"
167
+ oninput="this.nextElementSibling.value = this.value" name="temp" id='temp_slider'>
168
+ <output class='a' id="temp_slider_output">0.6</output>
169
+ </div>
170
+ <div id="buttons">
171
+ <br>
172
+ <input type="button" value="Extend" id="extend-form-button" />
173
+ <input type="button" value="Infill" id="infill-form-button" />
174
+ <br>
175
+ <br>
176
+ <input type="button" value="Add <infill> mask" id="insert-mask-button" title="add the infill marker at cursor or selection" />
177
+ </div>
178
+ </div>
179
+ <div id="edit-container" class="card">
180
+ <div id="syntax">
181
+ <span class="softspan">Syntax:</span>
182
+ <select name="mode" id="mode">
183
+ <option value="text">Text</option>
184
+ <option value="c_cpp">C/C++</option>
185
+ <option value="csharp">C#</option>
186
+ <option value="clojure">Clojure</option>
187
+ <option value="coffee">CoffeeScript</option>
188
+ <option value="golang">Go</option>
189
+ <option value="haskell">Haskell</option>
190
+ <option value="java">Java</option>
191
+ <option value="javascript">JavaScript</option>
192
+ <option value="lua">Lua</option>
193
+ <option value="objectivec">Objective C</option>
194
+ <option value="perl">Perl</option>
195
+ <option value="php">PHP</option>
196
+ <option value="python">Python</option>
197
+ <option value="ruby">Ruby</option>
198
+ <option value="rust">Rust</option>
199
+ <option value="scala">Scala</option>
200
+ <option value="sh">Shell</option>
201
+ <option value="swift">Swift</option>
202
+ <option value="typescript">Typescript</option>
203
+ </select>
204
+ </div>
205
+ <div id="editor"></div>
206
+ </div>
207
+ <div id="loader_holder_super" class="card">
208
+ <h1>Messages</h1>
209
+ <div id="error"></div>
210
+ <div id="warning"></div>
211
+ <div id="loader_holder">
212
+ <div class="loader"></div>
213
+ <div>
214
+ Generation queued, please wait...
215
+ </div>
216
+ </div>
217
+ </div>
218
+ <div id="info" class="card">
219
+ <h1 id="debug-info">More Info</h3>
220
+ <p>
221
+ See <a href="https://sites.google.com/view/incoder-code-models" target="_blank" rel="noopener noreferrer">our project site</a> for more information on
222
+ these models, including a paper and examples.
223
+ </p>
224
+
225
+ <p>
226
+ For instructions on setting up and using the models (via HuggingFace transformers), see
227
+ <a href="https://github.com/dpfried/incoder/blob/main/README.md" target="_blank" rel="noopener noreferrer">our readme</a>.
228
+ </p>
229
+
230
+ <h1 id="debug-info">Credits</h3>
231
+ <p>This model was developed at Facebook AI Research by Daniel Fried*, Armen Aghajanyan*, Jessy Lin, Sida Wang, Eric Wallace, Freda Shi, Ruiqi Zhong,
232
+ Wen-tau Yih, Luke Zettlemoyer, and Mike Lewis.</p>
233
+ <p>Thanks to Naman Goyal and Stephen Roller for writing the code this demo was based on. Extensions by Daniel Fried and
234
+ Sida Wang.</p>
235
+ </div>
236
+ </main>
237
+ <script type="text/javascript">
238
+ // these constants are only used for providing user expectations.
239
+ var OVERHEAD = 3;
240
+ var PER_TOKEN = 0.12;
241
+ var SPLIT_TOKEN = "<infill>"
242
+
243
+ var Range = require("ace/range").Range;
244
+
245
+ // examples for the user
246
+ var EXAMPLES = {
247
+ "python-infill2": {
248
+ "prompt":
249
+ `<| file ext=.py |>
250
+ from collections import Counter
251
+
252
+ def <infill>
253
+ """Count the number of occurrences of each word in the file."""
254
+ <infill>
255
+ `,
256
+ "length": 64,
257
+ "temperature": 0.2,
258
+ "mode": "python"
259
+ },
260
+ "multi-region": {
261
+ "prompt":
262
+ `<| file ext=.py |>
263
+ <infill>
264
+ """ Load the given gzip jsonl file. """
265
+ <infill>
266
+ `,
267
+ "length": 64,
268
+ "temperature": 0.2,
269
+ "mode": "python"
270
+ },
271
+ "type-pred": {
272
+ "prompt":
273
+ `def count_words(filename: str) -> <infill>
274
+ """Count the number of occurrences of each word in the file."""
275
+ with open(filename, 'r') as f:
276
+ word_counts = {}
277
+ for line in f:
278
+ for word in line.split():
279
+ if word in word_counts:
280
+ word_counts[word] = 1
281
+ else:
282
+ word_counts[word] = 1
283
+ return word_counts
284
+ `,
285
+ "length": 4,
286
+ "temperature": 0.2,
287
+ "mode": "python"
288
+ },
289
+ "docstring-2": {
290
+ "prompt":
291
+ `def _minimize_in_graph(build_loss_fn, num_steps=200, optimizer=None):
292
+ """
293
+ <infill>
294
+ """
295
+ optimizer = tf.compat.v1.train.AdamOptimizer(
296
+ 0.1) if optimizer is None else optimizer
297
+
298
+ def train_loop_body(step):
299
+ train_op = optimizer.minimize(
300
+ build_loss_fn if tf.executing_eagerly() else build_loss_fn())
301
+ return tf.tuple(tensors=[tf.add(step, 1)], control_inputs=[train_op])
302
+
303
+ minimize_op = tf.compat.v1.while_loop(
304
+ cond=lambda step: step < num_steps,
305
+ body=train_loop_body,
306
+ loop_vars=[tf.constant(0)],
307
+ return_same_structure=True)[0]
308
+ return minimize_op`,
309
+ "length": 64,
310
+ "temperature": 0.3,
311
+ "mode": "python",
312
+ },
313
+ "docstring": {
314
+ "prompt":
315
+ `<| file ext=.py |>
316
+
317
+ def count_words(filename: str) -> Dict[str, int]:
318
+ """<infill>
319
+ """
320
+ with open(filename, 'r') as f:
321
+ word_counts = {}
322
+ for line in f:
323
+ for word in line.split():
324
+ if word in word_counts:
325
+ word_counts[word] = 1
326
+ else:
327
+ word_counts[word] = 1
328
+ return word_counts
329
+ `,
330
+ "length": 32,
331
+ "temperature": 0.2,
332
+ "mode": "python"
333
+ },
334
+ "python": {
335
+ "prompt":
336
+ `<| file ext=.py |>
337
+ def count_words(filename):
338
+ """Count the number of occurrences of each word in the file"""`,
339
+ "length": 64,
340
+ "temperature": 0.6,
341
+ "mode": "python"
342
+ },
343
+ "class": {
344
+ "prompt": "<| file ext=.py |>\nclass Person:\n" + SPLIT_TOKEN + "\np = Person('Eren', 18, 'Male')",
345
+ "length": 64,
346
+ "temperature": 0.2,
347
+ "mode": "python"
348
+ },
349
+ "javascript": {
350
+ "prompt": "// fetch from the given URL and load the response contents into a new div",
351
+ "length": 64,
352
+ "temperature": 0.6,
353
+ "mode": "javascript"
354
+ },
355
+ "jupyter": {
356
+ "prompt": "<| file ext=.ipynb:python |>\n<text>\nThis notebook demonstrates using scikit-learn to perform PCA.\n</text>\n<cell>",
357
+ "length": 64,
358
+ "temperature": 0.6,
359
+ "mode": "python"
360
+ },
361
+ "stackoverflow": {
362
+ "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 |>",
363
+ "length": 64,
364
+ "temperature": 0.6,
365
+ "mode": "text"
366
+ },
367
+ "metadata-conditioning": {
368
+ "prompt": "<| file ext=.py filename=train_model.py source=github dstars=4 |>\n",
369
+ "length": 64,
370
+ "temperature": 0.6,
371
+ "mode": "python"
372
+ },
373
+ "metadata-prediction": {
374
+ "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=",
375
+ "length": 1,
376
+ "temperature": 0.2,
377
+ "mode": "python"
378
+ },
379
+ "humaneval": {
380
+ "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",
381
+ "temperature": 0.6,
382
+ "length": 64,
383
+ "mode": "python"
384
+ },
385
+ };
386
+
387
+ var editor = ace.edit("editor");
388
+ editor.setOption("wrap", true);
389
+ //var editor = null;
390
+
391
+ function set_editor_mode(mode) {
392
+ session = editor.session
393
+ session.setMode("ace/mode/" + mode, function() {
394
+ var rules = session.$mode.$highlightRules.getRules();
395
+ for (var stateName in rules) {
396
+ if (Object.prototype.hasOwnProperty.call(rules, stateName)) {
397
+ rules[stateName].unshift({
398
+ token: 'infill',
399
+ regex: SPLIT_TOKEN
400
+ });
401
+ }
402
+ }
403
+ // force recreation of tokenizer
404
+ session.$mode.$tokenizer = null;
405
+ session.bgTokenizer.setTokenizer(session.$mode.getTokenizer());
406
+ // force re-highlight whole document
407
+ session.bgTokenizer.start(0);
408
+ });
409
+ }
410
+
411
+ /*
412
+ var textarea = $('textarea[name="prompt"]').hide();
413
+ var prefix_textarea = $('textarea[name="prefix"]').hide();
414
+ var suffix_textarea = $('textarea[name="suffix"]').hide();
415
+ editor.getSession().on('change', function () {
416
+ textarea.val(editor.getSession().getValue());
417
+ });
418
+ */
419
+
420
+ function set_text(text) {
421
+ editor.getSession().setValue(text);
422
+ // textarea.val(text);
423
+ }
424
+
425
+ function set_selection(data) {
426
+ var lines = editor.getSession().doc.$lines;
427
+ var lines_flat = join_lines(lines);
428
+ if (data['type'] == 'generate') {
429
+ doc_length = lines_flat.length;
430
+ var start = convert_string_index_to_location(data['prompt'].length, lines);
431
+ var end = convert_string_index_to_location(doc_length, lines);
432
+ // reverse this so that we can shift select to shorten and delete extra stuff
433
+ editor.selection.setRange(new Range(end.row, end.column, start.row, start.column));
434
+ } else if (data['type'] == 'infill') {
435
+ var length_so_far = 0;
436
+ for (var i = 0; i < data['infills'].length; i++) {
437
+ var prefix = data['parts'][i];
438
+ var suffix = data['parts'][i+1];
439
+ var infilled = data['infills'][i];
440
+ var start = convert_string_index_to_location(length_so_far + prefix.length, lines);
441
+ var end = convert_string_index_to_location(length_so_far + (prefix + infilled).length, lines);
442
+ var range = null;
443
+ if (data['infills'].length == 1) {
444
+ range = new Range(end.row, end.column, start.row, start.column)
445
+ } else {
446
+ range = new Range(start.row, start.column, end.row, end.column)
447
+ }
448
+ if (i == 0) {
449
+ editor.selection.setRange(range);
450
+ } else {
451
+ editor.selection.addRange(range);
452
+ }
453
+ length_so_far += (prefix + infilled).length;
454
+ }
455
+ }
456
+ editor.focus();
457
+ }
458
+
459
+ function select_example(name) {
460
+ $("#length_slider").val(EXAMPLES[name]["length"]);
461
+ $("#length_slider_output").text(EXAMPLES[name]["length"]);
462
+ $("#temp_slider").val(EXAMPLES[name]["temperature"]);
463
+ $("#temp_slider_output").text(EXAMPLES[name]["temperature"]);
464
+ set_text(EXAMPLES[name]["prompt"])
465
+ var mode = EXAMPLES[name]["mode"];
466
+
467
+ set_editor_mode(mode);
468
+ $("#mode").val(mode).change();
469
+ }
470
+
471
+ function newline_character() {
472
+ return editor.getSession().doc.getNewLineCharacter();
473
+ }
474
+
475
+ function join_lines(lines) {
476
+ return lines.join(newline_character());
477
+ }
478
+
479
+ function get_prefix(location, lines) {
480
+ if (!(location.hasOwnProperty('row') && location.hasOwnProperty('column'))) {
481
+ console.error("invalid location " + location);
482
+ }
483
+ if (location.row == 0) {
484
+ return lines[location.row].substring(0, location.column);
485
+ } else {
486
+ return join_lines(lines.slice(0, location.row)) + newline_character() + lines[location.row].substring(0, location.column);
487
+ }
488
+ }
489
+
490
+ function convert_location_to_string_index(location, lines) {
491
+ return get_prefix(location, lines).length;
492
+ }
493
+
494
+ function convert_string_index_to_location(string_index, lines) {
495
+ var column = 0;
496
+ var row = 0;
497
+ var char_count = 0;
498
+ var line_sep_length = editor.getSession().doc.getNewLineCharacter().length;
499
+ for (var i = 0; i < lines.length; i++) {
500
+ var line = lines[i];
501
+ var new_char_count = char_count + line.length + line_sep_length;
502
+ if (string_index < new_char_count) {
503
+ return {
504
+ 'row': i,
505
+ 'column': string_index - char_count,
506
+ }
507
+ }
508
+ char_count = new_char_count;
509
+ }
510
+ console.error("did not find index " + string_index + " in lines " + lines);
511
+ return null;
512
+ }
513
+
514
+ function get_infill_parts(warn_on_single) {
515
+ var lines = editor.getSession().doc.$lines;
516
+ var lines_flat = join_lines(lines);
517
+ parts = lines_flat.split(SPLIT_TOKEN)
518
+ if (warn_on_single && parts.length == 1) {
519
+ window.alert('There are no infill masks, add some <infill> masks before requesting an infill')
520
+ }
521
+ return parts
522
+ }
523
+
524
+ function insert_mask() {
525
+ if (editor.selection.ranges.length > 1) {
526
+ for (var i = 0; i < editor.selection.ranges.length; i++) {
527
+ console.log('range is', editor.selection.ranges[i])
528
+ editor.session.replace(editor.selection.ranges[i], SPLIT_TOKEN)
529
+ }
530
+ } else {
531
+ editor.session.replace(editor.selection.getRange(), SPLIT_TOKEN)
532
+ }
533
+ }
534
+
535
+
536
+ function make_generate_listener(url) {
537
+ return async function(event) {
538
+ var length = $("#length_slider").val();
539
+ var eta = PER_TOKEN * length + OVERHEAD;
540
+ // $("#eta").text(eta);
541
+ // $("#infill-form-button").click(function (event) { console.log(editor.selection.getCursor()); });
542
+
543
+ // get temperature and response length parameters
544
+ var send_data = {
545
+ length: $("#length_slider").val(),
546
+ temperature: $("#temp_slider").val(),
547
+ extra_sentinel: $('#extra_sentinel_checkbox').is(":checked"),
548
+ max_retries: $('#max_retries_slider').val(),
549
+ parts: get_infill_parts(url == "infill"),
550
+ prompt: editor.getSession().getValue(),
551
+ }
552
+ console.log("send_data:");
553
+ console.log(send_data);
554
+
555
+ $("#loader_holder").css("visibility", "visible");
556
+ $("#extend-form-button").prop("disabled", true);
557
+ $("#infill-form-button").prop("disabled", true);
558
+ $("#error").text("");
559
+
560
+ function complete() {
561
+ $("#loader_holder").css("visibility", "hidden");
562
+ $("#extend-form-button").prop("disabled", false);
563
+ $("#infill-form-button").prop("disabled", false);
564
+ }
565
+
566
+ function success(receive_data) {
567
+ console.log("Response:");
568
+ console.log(receive_data);
569
+ if (receive_data["result"] == "success") {
570
+ console.log("success");
571
+ // $("#prompt").text(data["prompt"]);
572
+ // $("#response").text(data["text"]);
573
+ set_text(receive_data["text"]);
574
+ set_selection(receive_data);
575
+ $("#error").text("");
576
+ if (receive_data["message"] != "") {
577
+ $("#warning").text(receive_data["message"]);
578
+ } else {
579
+ $("#warning").text("");
580
+ }
581
+ } else {
582
+ console.log("error");
583
+ set_text(receive_data["text"])
584
+ $("#error").text(receive_data["message"]);
585
+ }
586
+ }
587
+
588
+ function error(err) {
589
+ console.log(err);
590
+ $("#error").text(err);
591
+ }
592
+
593
+ try {
594
+ var stringified = JSON.stringify(send_data);
595
+ // var encoded_data = encodeURIComponent(btoa(stringified));
596
+ var encoded_data = Base64.encodeURI(stringified);
597
+
598
+ const response = await fetch(`${url}?info=${encoded_data}`);
599
+ // const response = await fetch(`${url}` {
600
+ // method: 'GET',
601
+ // body: encoded_data,
602
+ // });
603
+ if (response.status >= 400) {
604
+ error(response.statusText);
605
+ console.log("here");
606
+ console.log(response.status);
607
+ } else {
608
+ response.json().then(success).catch(error).finally(complete);
609
+ }
610
+ } catch (e) {
611
+ error(e);
612
+ } finally {
613
+ complete();
614
+ }
615
+ }
616
+ }
617
+
618
+ // actual logic
619
+ $(document).ready(function() {
620
+ $("#insert-mask-button").click(insert_mask);
621
+ $("#extend-form-button").click(make_generate_listener("generate"));
622
+ $("#infill-form-button").click(make_generate_listener("infill"));
623
+ $("#mode").change(function (e) {
624
+ var mode = $("#mode").val();
625
+ set_editor_mode(mode);
626
+ });
627
+ select_example("python")
628
+ // set_editor_mode("python");
629
+ });
630
+ </script>
631
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.contentWindow.min.js"></script>
632
+ </body>
633
+ </html>