Frontend changes

frontend/script.js

@@ -0,0 +1,35 @@
+// Listen for form submission
+document.getElementById('textForm').addEventListener('submit', async (e) => {
+    e.preventDefault(); // Prevent page refresh
+    const inputText = document.getElementById('inputText').value;
+  
+    try {
+      // Send a POST request to the /process endpoint
+      const response = await fetch('/process', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ text: inputText })
+      });
+  
+      if (!response.ok) {
+        throw new Error('Network response was not ok');
+      }
+      const data = await response.json();
+      displayOutput(data);
+    } catch (error) {
+      console.error('Error:', error);
+      document.getElementById('output').innerText = 'Error processing text.';
+    }
+  });
+  
+  // Function to display the tokens and attention values
+  function displayOutput(data) {
+    const outputDiv = document.getElementById('output');
+    outputDiv.innerHTML = `
+      <h2>Tokens</h2>
+      <pre>${JSON.stringify(data.tokens, null, 2)}</pre>
+      <h2>Attention</h2>
+      <pre>${JSON.stringify(data.attention, null, 2)}</pre>
+    `;
+  }
+  

frontend/styles.css

@@ -0,0 +1,24 @@
+body {
+    font-family: Arial, sans-serif;
+    margin: 20px;
+    background-color: #f4f4f4;
+  }
+  
+  h1 {
+    color: #333;
+  }
+  
+  textarea {
+    width: 100%;
+    max-width: 600px;
+  }
+  
+  #output {
+    margin-top: 20px;
+    padding: 10px;
+    background-color: #fff;
+    border: 1px solid #ddd;
+    max-width: 600px;
+    overflow-x: auto;
+  }
+