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 = "";