Hide schema if custom grammar is selected

index.html

@@ -58,7 +58,7 @@
             </label>
           </form>
         </div>
-        <div class="card">
+        <div id="schema-container" class="card">
           <form>
             <label class="container"
               ><span><b>Schema</b></span>
@@ -70,7 +70,7 @@
                   target="_blank"
                   >TypeBox</a
                 >
-                for schema type syntax and documentation.</span
+                for JSON schema type syntax and documentation.</span
               >
               <div id="schema"></div>
             </label>

src/index.js

@@ -12,23 +12,12 @@ const { Type } = require("@sinclair/typebox");
 
 let engine = null;
 let useCustomGrammar = false;
-let customGrammar = 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]*`;
 
 document.addEventListener("DOMContentLoaded", () => {
   // Ensure elements are loaded before using them
   const grammarSelection = document.getElementById("grammar-selection");
   const ebnfContainer = document.getElementById("ebnf-grammar-container");
+  const schemaContainer = document.getElementById("schema-container");
   const modelSelection = document.getElementById("model-selection");
   const ebnfTextarea = document.getElementById("ebnf-grammar");
   const promptTextarea = document.getElementById("prompt");
@@ -36,22 +25,29 @@ document.addEventListener("DOMContentLoaded", () => {
   const statsParagraph = document.getElementById("stats");
 
   // Initialize the custom grammar textarea
-  ebnfTextarea.value = customGrammar;
-
-  // Update grammar value on change
-  ebnfTextarea.onchange = (ev) => {
-    customGrammar = ev.target.value;
-    console.log("Grammar updated: ", customGrammar);
-  };
+  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);
     if (ev.target.value === "json") {
       ebnfContainer.classList.add("hidden");
+      schemaContainer.classList.remove("hidden");
       useCustomGrammar = false;
     } else {
       ebnfContainer.classList.remove("hidden");
+      schemaContainer.classList.add("hidden");
       useCustomGrammar = true;
     }
   };
@@ -156,7 +152,7 @@ Patronus is a string.
       messages: [{ role: "user", content: promptTextarea.value }],
       max_tokens: 128,
       response_format: useCustomGrammar
-        ? { type: "grammar", grammar: customGrammar }
+        ? { type: "grammar", grammar: ebnfTextarea.value }
         : { type: "json_object", schema: schema },
     };