Update static/asic-design-code-generator.html

static/asic-design-code-generator.html

@@ -196,29 +196,33 @@
     </div>
 
     <div class="row">
-      <div class="col">
-        <div class="card">
-          <div class="card-header">
-            <i class='bx bx-wrench'></i>
-            Optimization &amp; Linting
-          </div>
-          <div class="card-body">
-            <p>No optimization or linting suggestions at this time.</p>
-          </div>
-        </div>
-      </div>
+<div class="col">
+  <div class="card">
+    <div class="card-header">
+      <i class='bx bx-wrench'></i> Optimization & Linting
+    </div>
+    <div class="card-body">
+      <p id="optimization-output">Optimization suggestions will appear here.</p>
+      <button class="btn btn-optimize">
+        <i class='bx bx-cog'></i> Get Optimization
+      </button>
+    </div>
+  </div>
+</div>
 
-      <div class="col">
-        <div class="card">
-          <div class="card-header">
-            <i class='bx bx-bug'></i>
-            Failure Modes &amp; Test Benches
-          </div>
-          <div class="card-body">
-            <p>Test bench suggestions will appear here.</p>
-          </div>
-        </div>
-      </div>
+<div class="col">
+  <div class="card">
+    <div class="card-header">
+      <i class='bx bx-bug'></i> Failure Modes & Test Benches
+    </div>
+    <div class="card-body">
+      <p id="test-bench-output">Test bench suggestions will appear here.</p>
+      <button class="btn btn-test-bench">
+        <i class='bx bx-test-tube'></i> Generate Test Bench
+      </button>
+    </div>
+  </div>
+</div>
     </div>
   </div>
 </body>
@@ -231,6 +235,10 @@ document.addEventListener("DOMContentLoaded", () => {
   const generateButton = document.querySelector(".btn-primary");
   const refineButton = document.querySelector(".btn-success");
   const generatedCodeOutput = document.getElementById("divGenerated");
+   const optimizeButton = document.querySelector(".btn-optimize"); 
+  const testBenchButton = document.querySelector(".btn-test-bench");
+   const optimizationOutput = document.querySelector("#optimization-output");
+  const testBenchOutput = document.querySelector("#test-bench-output");
 
   let websocket;
 
@@ -245,8 +253,21 @@ document.addEventListener("DOMContentLoaded", () => {
     };
   }
 
+  function connectWebSocket(endpoint, onMessageCallback) {
+    const protocol = window.location.protocol === "https:" ? "wss://" : "ws://";
+    websocket = new WebSocket(`${protocol}${window.location.host}${endpoint}`);
+    websocket.onmessage = (event) => {
+      onMessageCallback(event.data);
+    };
+    websocket.onclose = () => {
+      console.log("WebSocket connection closed");
+    };
+  }
+
   generateButton.addEventListener("click", () => {
-    connectWebSocket("/ws/generate_code");
+    connectWebSocket("/ws/generate_code",(data) => {
+      generatedCodeOutput.innerHTML = marked.parse( data);
+    });
     const description = descriptionInput.value;
     const language = languageSelect.value;
     websocket.onopen = () => {
@@ -255,13 +276,37 @@ document.addEventListener("DOMContentLoaded", () => {
   });
 
   refineButton.addEventListener("click", () => {
-    connectWebSocket("/ws/refine_code");
+    connectWebSocket("/ws/refine_code",(data) => {
+      generatedCodeOutput.innerHTML = marked.parse( data);
+    });
     const existing_code = generatedCodeOutput.textContent;
     const language = languageSelect.value;
     websocket.onopen = () => {
       websocket.send(JSON.stringify({ existing_code, language }));
     };
   });
+
+   optimizeButton.addEventListener("click", () => {
+    connectWebSocket("/ws/optimize_code", (data) => {
+      optimizationOutput.innerHTML = marked.parse( data);
+    });
+    const code = generatedCodeOutput.textContent;
+    const language = languageSelect.value;
+    websocket.onopen = () => {
+      websocket.send(JSON.stringify({ code, language }));
+    };
+  });
+
+  testBenchButton.addEventListener("click", () => {
+    connectWebSocket("/ws/generate_test_bench", (data) => {
+      testBenchOutput.innerHTML = marked.parse( data);
+    });
+    const code = generatedCodeOutput.textContent;
+    const language = languageSelect.value;
+    websocket.onopen = () => {
+      websocket.send(JSON.stringify({ code, language }));
+    };
+  });
 });