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 },
  };