Use ace editor for grammar input

index.html

@@ -47,7 +47,7 @@
  <div id="ebnf-grammar-container" class="card hidden">
  <form>
  <label for="ebnf-grammar" class="container"
- ><span><b>Custom EBNF Grammar</b></span>
+ ><span><b>Custom Grammar</b></span>
  <span>
  The custom grammar is described in the
  <a
@@ -58,12 +58,7 @@
  >. Below is an example of JSON grammar in EBNF. Please follow
  this example when writing new grammars.
  </span>
- <textarea
- id="ebnf-grammar"
- dir="ltr"
- placeholder="Type your custom EBNF grammar..."
- rows="1"
- ></textarea>
+ <div id="ebnf-grammar"></div>
  </label>
  </form>
  </div>

src/index.js

@@ -24,20 +24,6 @@ document.addEventListener("DOMContentLoaded", () => {
  const outputDiv = document.getElementById("output");
  const statsParagraph = document.getElementById("stats");
 
- // Initialize the custom grammar textarea
- ebnfTextarea.value = String.raw`main ::= basic_array | basic_object
-basic_any ::= basic_number | basic_string | basic_boolean | basic_null | basic_array | basic_object
-basic_integer ::= ("0" | "-"? [1-9] [0-9]*) ".0"?
-basic_number ::= ("0" | "-"? [1-9] [0-9]*) ("." [0-9]+)? ([eE] [+-]? [0-9]+)?
-basic_string ::= (([\"] basic_string_1 [\"]))
-basic_string_1 ::= "" | [^"\\\x00-\x1F] basic_string_1 | "\\" escape basic_string_1
-escape ::= ["\\/bfnrt] | "u" [A-Fa-f0-9] [A-Fa-f0-9] [A-Fa-f0-9] [A-Fa-f0-9]
-basic_boolean ::= "true" | "false"
-basic_null ::= "null"
-basic_array ::= "[" ("" | ws basic_any (ws "," ws basic_any)*) ws "]"
-basic_object ::= "{" ("" | ws basic_string ws ":" ws basic_any ( ws "," ws basic_string ws ":" ws basic_any)*) ws "}"
-ws ::= [\n\t]*`;
-
  // Handle grammar selection changes
  grammarSelection.onchange = (ev) => {
  console.log("Grammar selection changed:", ev.target.value);
@@ -79,15 +65,14 @@ ws ::= [\n\t]*`;
  engine = null; // Reset the engine when the model changes
  };
 
- // JSON editor setup with Ace
- const editor = ace.edit("schema", {
+ // Editors setup with Ace
+ const jsonSchemaEditor = ace.edit("schema", {
  mode: "ace/mode/javascript",
  theme: "ace/theme/github",
  wrap: true,
  });
-
- editor.setTheme("ace/theme/github");
- editor.setValue(`Type.Object({
+ jsonSchemaEditor.setTheme("ace/theme/github");
+ jsonSchemaEditor.setValue(`Type.Object({
  "name": Type.String(),
  "house": Type.Enum({
  "Gryffindor": "Gryffindor",
@@ -115,6 +100,24 @@ ws ::= [\n\t]*`;
  "patronus": Type.String(),
  })`);
 
+ const grammarEditor = ace.edit("ebnf-grammar", {
+ theme: "ace/theme/github",
+ wrap: true,
+ });
+ grammarEditor.setTheme("ace/theme/github");
+ grammarEditor.setValue(String.raw`main ::= basic_array | basic_object
+basic_any ::= basic_number | basic_string | basic_boolean | basic_null | basic_array | basic_object
+basic_integer ::= ("0" | "-"? [1-9] [0-9]*) ".0"?
+basic_number ::= ("0" | "-"? [1-9] [0-9]*) ("." [0-9]+)? ([eE] [+-]? [0-9]+)?
+basic_string ::= (([\"] basic_string_1 [\"]))
+basic_string_1 ::= "" | [^"\\\x00-\x1F] basic_string_1 | "\\" escape basic_string_1
+escape ::= ["\\/bfnrt] | "u" [A-Fa-f0-9] [A-Fa-f0-9] [A-Fa-f0-9] [A-Fa-f0-9]
+basic_boolean ::= "true" | "false"
+basic_null ::= "null"
+basic_array ::= "[" ("" | ws basic_any (ws "," ws basic_any)*) ws "]"
+basic_object ::= "{" ("" | ws basic_string ws ":" ws basic_any ( ws "," ws basic_string ws ":" ws basic_any)*) ws "}"
+ws ::= [\n\t]*`);
+
  // Set initial prompt
  promptTextarea.value = `Hermione Granger is a character in Harry Potter. Please fill in the following information about this character in JSON format.
 Name is a string of character name.
@@ -127,16 +130,6 @@ Patronus is a string.
 `;
  // Generate button click handler
  document.getElementById("generate").onclick = async () => {
- const schemaInput = editor.getValue();
- let T;
- try {
- T = eval(schemaInput);
- } catch (e) {
- console.error("Invalid schema", e);
- return;
- }
- const schema = JSON.stringify(T);
-
  if (!engine) {
  engine = await CreateMLCEngine(selectedModel, {
  initProgressCallback: (progress) => {
@@ -145,15 +138,26 @@ Patronus is a string.
  },
  });
  }
-
+ let response_format = { type: "grammar", grammar: grammarEditor.getValue() };
+ if (!useCustomGrammar) {
+ const schemaInput = jsonSchemaEditor.getValue();
+ let T;
+ try {
+ T = eval(schemaInput);
+ } catch (e) {
+ console.error("Invalid schema", e);
+ return;
+ }
+ const schema = JSON.stringify(T);
+ response_format = { type: "json_object", schema }
+ }
+ console.log(response_format);
  const request = {
  stream: true,
  stream_options: { include_usage: true },
  messages: [{ role: "user", content: promptTextarea.value }],
  max_tokens: 512,
- response_format: useCustomGrammar
- ? { type: "grammar", grammar: ebnfTextarea.value }
- : { type: "json_object", schema: schema },
+ response_format,
  };
 
  let curMessage = "";