Update static/main.js

static/main.js

@@ -1,38 +1,85 @@
+// Get the generate button and add an event listener for the click event
 const generateButton = document.getElementById('generate');
-// console.log("Hello, world!");
 generateButton.addEventListener('click', async () => {
+
+  // Get the account select element and the input text
   const accountSelect = document.getElementById('account');
   const account = accountSelect.options[accountSelect.selectedIndex].value;
   const inputText = document.getElementById('input').value;
 
+  // Set the output textarea to "Loading..."
   const outputTextArea = document.getElementById('output');
   outputTextArea.value = 'Loading...';
 
+  // Make a POST request to the /api/generate endpoint
   try {
     const response = await fetch('/api/generate', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ account: account, text: inputText })
     });
-    
-    if (response.ok){
+
+    // Check the response status code
+    if (response.ok) {
+      // The request was successful
       outputTextArea.value = 'Generating a reply...';
+    } else {
+      // The request failed
+      throw new Error(`Network response was not ok. Status: ${response.status} - ${response.statusText}`);
     }
+
+    // Wait 1 second
     await new Promise(resolve => setTimeout(resolve, 1000));
+
+    // Check the response status code again
     if (!response.ok) {
+      // The request still failed
       throw new Error(`Network response was not ok. Status: ${response.status} - ${response.statusText}`);
     }
-    
-    // First step update: POST request successful
-    outputTextArea.value = 'Model is running...';
 
+    // The request was successful, so get the data
     const data = await response.json();
     const outputText = data.generated_text;
-    console.log("Generated text",outputText.toString());
-    // Second step update: Model completed running
+
+    // Log the generated text
+    console.log("Generated text", outputText.toString());
+
+    // Set the output textarea to the generated text
     outputTextArea.value = outputText;
   } catch (error) {
+    // The request failed, so log the error
     console.error('Error:', error);
     outputTextArea.value = `Failed to fetch data. Reason: ${error.message}`;
   }
-});
+});
+
+document.getElementById("generate-summary").addEventListener("click", async () => {
+  try {
+    const response = await fetch("/api/generate_summary", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ text: ["text1", "text2", "text3"] }),
+    });
+
+    if (!response.ok) {
+      throw new Error(
+        `Network response was not ok. Status: ${response.status} - ${response.statusText}`
+      );
+    }
+
+    const data = await response.json();
+    console.log(data)
+    const summary = data.summary;
+
+    const outputSummaryArea = document.getElementById("output-summary");
+    
+    // Set the output summary area to the generated summary
+    outputSummaryArea.value = summary;
+
+    // Log the output summary area value
+    console.log(outputSummaryArea.value);
+  } catch (error) {
+    console.error("Error:", error);
+  }
+});
+