Update static/main.js

static/main.js

@@ -1,28 +1,36 @@
-
 const generateButton = document.getElementById('generate');
-//console.log("Hello, world!");
+// console.log("Hello, world!");
 generateButton.addEventListener('click', async () => {
   const accountSelect = document.getElementById('account');
   const account = accountSelect.options[accountSelect.selectedIndex].value;
   const inputText = document.getElementById('input').value;
 
   const outputTextArea = document.getElementById('output');
-  outputTextArea.value = 'Loading and running model...';
-
+  outputTextArea.value = 'Loading...';
 
   try {
     const response = await fetch('/api/generate', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ account: account, text: inputText })
-      });
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ account: account, text: inputText })
+    });
+    
+    if (response.ok){
+      outputTextArea.value = 'Generating a reply...';
+    }
+    await new Promise(resolve => setTimeout(resolve, 1000));
     if (!response.ok) {
       throw new Error(`Network response was not ok. Status: ${response.status} - ${response.statusText}`);
     }
-    const data = await response.json();
+    
+    // First step update: POST request successful
+    outputTextArea.value = 'Model is running...';
 
+    const data = await response.json();
     const outputText = data.generated_text;
-    document.getElementById('output').value = outputText;
+    
+    // Second step update: Model completed running
+    outputTextArea.value = outputText;
   } catch (error) {
     console.error('Error:', error);
     outputTextArea.value = `Failed to fetch data. Reason: ${error.message}`;