Update static/index.html

static/index.html

@@ -17,13 +17,9 @@
       <select id="model" class="mt-1 block w-full p-2 border border-gray-300 rounded-md" required>
         <option value="nousresearch/hermes-3-llama-3.1-70b">Hermes 3 Llama 3.1 70B (Uncensored, Explicit)</option>
         <option value="deepseek/deepseek-chat-v3-0324:free">DeepSeek Chat (Free)</option>
-        <option value="deepseek/deepseek-chat-v3-0324">DeepSeek Chat (Paid)</option> 
-         <option value="deepseek/deepseek-chat-v3.1">DeepSeek Chat v3.1(Paid)</option>
         <option value="deepseek/deepseek-r1-0528:free">DeepSeek R1 (Free)</option>
-        <option value="deepseek/deepseek-r1-0528">DeepSeek R1 (Paid)</option>
         <option value="tngtech/deepseek-r1t2-chimera:free">DeepSeek TNG (Free)</option>
         <option value="x-ai/grok-4">Grok 4</option>
-        <option value="x-ai/grok-4-fast">Grok 4</option>
         <option value="x-ai/grok-3">Grok 3</option>
         <option value="anthropic/claude-3.7-sonnet">Claude Sonnet 3.7</option>
         <option value="anthropic/claude-3.5-sonnet">Claude 3.5 Sonnet</option>
@@ -51,17 +47,9 @@
     <div id="outputs" class="space-y-4 hidden">
       <div>
         <label class="block text-sm font-medium text-gray-700">Outline (10 Chapters for 90k Words)</label>
-        <textarea id="outline" class="mt-1 block w-full p-2 border border-gray-300 rounded-md" rows="6" readonly></textarea>
+        <textarea id="outline" class="mt-1 block w-full p-2 border border-gray-300 rounded-md" rows="20" readonly placeholder="Streaming generation..."></textarea>
       </div>
-      <div>
-        <label class="block text-sm font-medium text-gray-700">Locations</label>
-        <textarea id="locations" class="mt-1 block w-full p-2 border border-gray-300 rounded-md" rows="3" readonly></textarea>
-      </div>
-      <div>
-        <label class="block text-sm font-medium text-gray-700">Objects</label>
-        <textarea id="objects" class="mt-1 block w-full p-2 border border-gray-300 rounded-md" rows="3" readonly></textarea>
-      </div>
-      <button id="copy_all" class="mt-2 bg-green-600 text-white p-2 rounded-md hover:bg-green-700">Copy All for NovelCrafter</button>
+      <button id="copy_all" class="mt-2 bg-green-600 text-white p-2 rounded-md hover:bg-green-700">Copy Outline for NovelCrafter</button>
     </div>
   </div>
 
@@ -71,20 +59,7 @@
     const countDisplay = document.getElementById("transcript_count");
     const generateButton = document.getElementById("generate_novel");
     const outputsDiv = document.getElementById("outputs");
-
-    // Helper to safely stringify for textarea
-    function safeStringify(value) {
-      if (value === null || value === undefined) return "";
-      if (typeof value === 'string') return value;
-      if (typeof value === 'object') {
-        try {
-          return JSON.stringify(value, null, 2);
-        } catch (e) {
-          return JSON.stringify(value);
-        }
-      }
-      return String(value);
-    }
+    const outlineTextarea = document.getElementById("outline");
 
     // Handle file upload: read and populate textarea
     fileInput.addEventListener("change", (event) => {
@@ -123,8 +98,9 @@
         alert("Please enter a transcript or select a file.");
         return;
       }
+      outlineTextarea.value = "";  // Clear previous
       const statusDiv = document.createElement("div");
-      statusDiv.textContent = "Analyzing explicit content & generating dark romance structure... (This may take a few minutes)";
+      statusDiv.textContent = "Streaming: Summarizing transcript & generating outline...";
       statusDiv.className = "text-center text-blue-600 mb-4";
       outputsDiv.insertBefore(statusDiv, outputsDiv.firstChild);
       outputsDiv.classList.remove("hidden");
@@ -142,25 +118,25 @@
           body: formData
         });
         if (!response.ok) {
-          const errorData = await response.json();
-          throw new Error(errorData.detail || `HTTP error! status: ${response.status}`);
+          throw new Error(`HTTP error! status: ${response.status}`);
         }
-        const result = await response.json();
-        statusDiv.remove();
-        if (result.error) {
-          document.getElementById("outline").value = `Error: ${result.error}`;
-        } else {
-          // Structured fields with safe stringify
-          document.getElementById("outline").value = safeStringify(result.outline);
-          document.getElementById("locations").value = safeStringify(result.locations);
-          document.getElementById("objects").value = safeStringify(result.objects);
-
-          // Fallback if no structured data
-          if (!result.outline && result.raw_response) {
-            document.getElementById("outline").value = safeStringify(result.raw_response).substring(0, 2000) + "...";
-            alert("AI output wasn't strict JSON—showing raw response as fallback in Outline. Check server logs for details.");
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+        let done = false;
+        while (!done) {
+          const { value, done: readerDone } = await reader.read();
+          done = readerDone;
+          if (value) {
+            const chunk = decoder.decode(value, { stream: true });
+            outlineTextarea.value += chunk;  // Append in real-time
+            outlineTextarea.scrollTop = outlineTextarea.scrollHeight;  // Auto-scroll
           }
         }
+        statusDiv.remove();
+        if (outlineTextarea.value.includes("Error:")) {
+          statusDiv.textContent = outlineTextarea.value;
+          statusDiv.className = "text-center text-red-600 mb-4";
+        }
       } catch (error) {
         statusDiv.textContent = `Error: ${error.message}`;
         statusDiv.className = "text-center text-red-600 mb-4";
@@ -168,13 +144,9 @@
     });
 
     document.getElementById("copy_all").addEventListener("click", () => {
-      const outputs = [
-        document.getElementById("outline").value,
-        document.getElementById("locations").value,
-        document.getElementById("objects").value
-      ].join("\n\n---\n\n");
-      navigator.clipboard.writeText(outputs)
-        .then(() => alert("All outputs copied to clipboard! Paste into NovelCrafter for full 90k manuscript."))
+      const outline = document.getElementById("outline").value;
+      navigator.clipboard.writeText(outline)
+        .then(() => alert("Outline copied to clipboard! Paste into NovelCrafter for full 90k manuscript."))
         .catch(err => console.error('Failed to copy: ', err));
     });
   </script>