neetnestor commited on
Commit
48dfd32
·
1 Parent(s): 989d9c0

Fix typo and add line breaks to output

Browse files
Files changed (3) hide show
  1. dist/index.js +1 -1
  2. src/index.js +2 -2
  3. style/style.css +1 -0
dist/index.js CHANGED
@@ -10,4 +10,4 @@ basic_boolean ::= "true" | "false"
10
  basic_null ::= "null"
11
  basic_array ::= "[" ("" | ws basic_any (ws "," ws basic_any)*) ws "]"
12
  basic_object ::= "{" ("" | ws basic_string ws ":" ws basic_any ( ws "," ws basic_string ws ":" ws basic_any)*) ws "}"
13
- ws ::= [\n\t]*`,grammarSelection.onchange=A=>{console.log("Grammar selection changed:",A.target.value),"json"===A.target.value?(ebnfContainer.classList.add("hidden"),schemaContainer.classList.remove("hidden"),useCustomGrammar=!1):(ebnfContainer.classList.remove("hidden"),schemaContainer.classList.add("hidden"),useCustomGrammar=!0)};const availableModels=_charliefruan_web_llm__WEBPACK_IMPORTED_MODULE_0__.xn.model_list.filter((A=>A.model_id.startsWith("Llama-3")||A.model_id.startsWith("Hermes-2")||A.model_id.startsWith("Hermes-3")||A.model_id.startsWith("Phi-3"))).map((A=>A.model_id));let selectedModel=availableModels[0];availableModels.forEach((A=>{const g=document.createElement("option");g.value=A,g.textContent=A,modelSelection.appendChild(g)})),modelSelection.value=selectedModel,modelSelection.onchange=A=>{selectedModel=A.target.value,engine=null};const editor=ace_builds__WEBPACK_IMPORTED_MODULE_1___default().edit("schema",{mode:"ace/mode/javascript",theme:"ace/theme/github",wrap:!0});editor.setTheme("ace/theme/github"),editor.setValue('Type.Object({\n "name": Type.String(),\n "house": Type.Enum({\n "Gryffindor": "Gryffindor",\n "Hufflepuff": "Hufflepuff",\n "Ravenclaw": "Ravenclaw",\n "Slytherin": "Slytherin",\n }),\n "blood_status": Type.Enum({\n "Pure-blood": "Pure-blood",\n "Half-blood": "Half-blood",\n "Muggle-born": "Muggle-born",\n }),\n "occupation": Type.Enum({\n "Student": "Student",\n "Professor": "Professor",\n "Ministry of Magic": "Ministry of Magic",\n "Other": "Other",\n }),\n "wand": Type.Object({\n "wood": Type.String(),\n "core": Type.String(),\n "length": Type.Number(),\n }),\n "alive": Type.Boolean(),\n "patronus": Type.String(),\n })'),promptTextarea.value="Hermione Granger is a character in Harry Potter. Please fill in the following information about this character in JSON format.\nName is a string of character name.\nHouse is one of Gryffindor, Hufflepuff, Ravenclaw, Slytherin.\nBlood status is one of Pure-blood, Half-blood, Muggle-born.\nOccupation is one of Student, Professor, Ministry of Magic, Other.\nWand is an object with wood, core, and length.\nAlive is a boolean.\nPatronus is a string.\n",document.getElementById("generate").onclick=async()=>{const schemaInput=editor.getValue();let T;try{T=eval(schemaInput)}catch(A){return void console.error("Invalid schema",A)}const schema=JSON.stringify(T);engine||(engine=await(0,_charliefruan_web_llm__WEBPACK_IMPORTED_MODULE_0__.L6)(selectedModel,{initProgressCallback:A=>{console.log(A),outputDiv.textContent=A.text}}));const request={stream:!0,stream_options:{include_usage:!0},messages:[{role:"user",content:promptTextarea.value}],max_tokens:512,response_format:useCustomGrammar?{type:"grammar",grammar:ebnfTextarea.value}:{type:"json_object",schema}};let curMessage="",usage=null;const generator=await engine.chatCompletion(request);for await(const A of generator){const g=A.choices[0]?.delta.content;g&&(curMessage+=g),A.usage&&(usage=A.usage),outputDiv.textContent=curMessage}const finalMessage=await engine.getMessage();if(outputDiv.innerHTML=highlight_js__WEBPACK_IMPORTED_MODULE_2__.A.highlight(finalMessage,{language:"json"}).value,usage){const A=[];console.log(usage),usage.extra.prefill_tokens_per_s&&A.push(`Prefill Speed: ${usage.extra.prefill_tokens_per_s.toFixed(1)} tok/s`),usage.extra.decode_tokens_per_s&&A.push(`Decode Speed: ${usage.extra.decode_tokens_per_s.toFixed(1)} tok/s`),usage.extra.time_per_output_token_s&&A.push(`Time to First Token: ${(1e3*usage.extra.time_per_output_token_s).toFixed(0)} ms`),usage.extra.time_to_first_token_s&&A.push(`Time Per Output Token: ${(1e3*usage.extra.time_to_first_token_s).toFixed(0)} ms`),usage.extra.grammar_init_s&&A.push(`Grammar Init Overhead: ${(1e3*usage.extra.grammar_init_s).toFixed(0)} ms`),usage.extra.grammar_per_token_s&&A.push(`Grammar Per-token Overhead: ${(1e3*usage.extra.grammar_per_token_s).toFixed(2)} ms`),statsParagraph.textContent=A.join(", "),statsParagraph.classList.remove("hidden")}}}))})()})();
 
10
  basic_null ::= "null"
11
  basic_array ::= "[" ("" | ws basic_any (ws "," ws basic_any)*) ws "]"
12
  basic_object ::= "{" ("" | ws basic_string ws ":" ws basic_any ( ws "," ws basic_string ws ":" ws basic_any)*) ws "}"
13
+ ws ::= [\n\t]*`,grammarSelection.onchange=A=>{console.log("Grammar selection changed:",A.target.value),"json"===A.target.value?(ebnfContainer.classList.add("hidden"),schemaContainer.classList.remove("hidden"),useCustomGrammar=!1):(ebnfContainer.classList.remove("hidden"),schemaContainer.classList.add("hidden"),useCustomGrammar=!0)};const availableModels=_charliefruan_web_llm__WEBPACK_IMPORTED_MODULE_0__.xn.model_list.filter((A=>A.model_id.startsWith("Llama-3")||A.model_id.startsWith("Hermes-2")||A.model_id.startsWith("Hermes-3")||A.model_id.startsWith("Phi-3"))).map((A=>A.model_id));let selectedModel=availableModels[0];availableModels.forEach((A=>{const g=document.createElement("option");g.value=A,g.textContent=A,modelSelection.appendChild(g)})),modelSelection.value=selectedModel,modelSelection.onchange=A=>{selectedModel=A.target.value,engine=null};const editor=ace_builds__WEBPACK_IMPORTED_MODULE_1___default().edit("schema",{mode:"ace/mode/javascript",theme:"ace/theme/github",wrap:!0});editor.setTheme("ace/theme/github"),editor.setValue('Type.Object({\n "name": Type.String(),\n "house": Type.Enum({\n "Gryffindor": "Gryffindor",\n "Hufflepuff": "Hufflepuff",\n "Ravenclaw": "Ravenclaw",\n "Slytherin": "Slytherin",\n }),\n "blood_status": Type.Enum({\n "Pure-blood": "Pure-blood",\n "Half-blood": "Half-blood",\n "Muggle-born": "Muggle-born",\n }),\n "occupation": Type.Enum({\n "Student": "Student",\n "Professor": "Professor",\n "Ministry of Magic": "Ministry of Magic",\n "Other": "Other",\n }),\n "wand": Type.Object({\n "wood": Type.String(),\n "core": Type.String(),\n "length": Type.Number(),\n }),\n "alive": Type.Boolean(),\n "patronus": Type.String(),\n })'),promptTextarea.value="Hermione Granger is a character in Harry Potter. Please fill in the following information about this character in JSON format.\nName is a string of character name.\nHouse is one of Gryffindor, Hufflepuff, Ravenclaw, Slytherin.\nBlood status is one of Pure-blood, Half-blood, Muggle-born.\nOccupation is one of Student, Professor, Ministry of Magic, Other.\nWand is an object with wood, core, and length.\nAlive is a boolean.\nPatronus is a string.\n",document.getElementById("generate").onclick=async()=>{const schemaInput=editor.getValue();let T;try{T=eval(schemaInput)}catch(A){return void console.error("Invalid schema",A)}const schema=JSON.stringify(T);engine||(engine=await(0,_charliefruan_web_llm__WEBPACK_IMPORTED_MODULE_0__.L6)(selectedModel,{initProgressCallback:A=>{console.log(A),outputDiv.textContent=A.text}}));const request={stream:!0,stream_options:{include_usage:!0},messages:[{role:"user",content:promptTextarea.value}],max_tokens:512,response_format:useCustomGrammar?{type:"grammar",grammar:ebnfTextarea.value}:{type:"json_object",schema}};let curMessage="",usage=null;const generator=await engine.chatCompletion(request);for await(const A of generator){const g=A.choices[0]?.delta.content;g&&(curMessage+=g),A.usage&&(usage=A.usage),outputDiv.textContent=curMessage}const finalMessage=await engine.getMessage();if(outputDiv.innerHTML=highlight_js__WEBPACK_IMPORTED_MODULE_2__.A.highlight(finalMessage,{language:"json"}).value,usage){const A=[];console.log(usage),usage.extra.prefill_tokens_per_s&&A.push(`Prefill Speed: ${usage.extra.prefill_tokens_per_s.toFixed(1)} tok/s`),usage.extra.decode_tokens_per_s&&A.push(`Decode Speed: ${usage.extra.decode_tokens_per_s.toFixed(1)} tok/s`),usage.extra.time_per_output_token_s&&A.push(`Time Per Output Token: ${(1e3*usage.extra.time_per_output_token_s).toFixed(0)} ms`),usage.extra.time_to_first_token_s&&A.push(`Time to First Token: ${(1e3*usage.extra.time_to_first_token_s).toFixed(0)} ms`),usage.extra.grammar_init_s&&A.push(`Grammar Init Overhead: ${(1e3*usage.extra.grammar_init_s).toFixed(0)} ms`),usage.extra.grammar_per_token_s&&A.push(`Grammar Per-token Overhead: ${(1e3*usage.extra.grammar_per_token_s).toFixed(2)} ms`),statsParagraph.textContent=A.join(", "),statsParagraph.classList.remove("hidden")}}}))})()})();
src/index.js CHANGED
@@ -186,12 +186,12 @@ Patronus is a string.
186
  )} tok/s`);
187
  }
188
  if (usage.extra.time_per_output_token_s) {
189
- statsTextParts.push(`Time to First Token: ${(1000 * usage.extra.time_per_output_token_s).toFixed(
190
  0
191
  )} ms`);
192
  }
193
  if (usage.extra.time_to_first_token_s) {
194
- statsTextParts.push(`Time Per Output Token: ${(1000 * usage.extra.time_to_first_token_s).toFixed(
195
  0
196
  )} ms`);
197
  }
 
186
  )} tok/s`);
187
  }
188
  if (usage.extra.time_per_output_token_s) {
189
+ statsTextParts.push(`Time Per Output Token: ${(1000 * usage.extra.time_per_output_token_s).toFixed(
190
  0
191
  )} ms`);
192
  }
193
  if (usage.extra.time_to_first_token_s) {
194
+ statsTextParts.push(`Time to First Token: ${(1000 * usage.extra.time_to_first_token_s).toFixed(
195
  0
196
  )} ms`);
197
  }
style/style.css CHANGED
@@ -170,6 +170,7 @@ textarea {
170
  font-weight: 400;
171
  font-size: 14px;
172
  line-height: 1.4;
 
173
  }
174
 
175
  button {
 
170
  font-weight: 400;
171
  font-size: 14px;
172
  line-height: 1.4;
173
+ white-space: pre-wrap;
174
  }
175
 
176
  button {