Update app with integrated HTML and lighter model

index.html

@@ -6,6 +6,7 @@
     <title>QuickBrief</title>
     <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Papyrus&display=swap" rel="stylesheet">
     <style>
+        /* Same styles as before */
         * {
             box-sizing: border-box;
             margin: 0;
@@ -232,11 +233,21 @@
     </div>
     <script>
         console.log("Script loaded successfully");
+
         async function summarize() {
             const text = document.getElementById("inputText").value;
+            const summaryDiv = document.getElementById("summary");
+            if (text.length > 1000) {
+                summaryDiv.innerText = "Input too long; please use less than 1000 characters.";
+                return;
+            }
+            summaryDiv.innerText = "Summarizing...";
             try {
                 const controller = new AbortController();
-                const timeoutId = setTimeout(() => controller.abort(), 120000);
+                const timeoutId = setTimeout(() => {
+                    controller.abort();
+                    console.warn("Summarize timed out after 300 seconds");
+                }, 300000); // Increased to 5 minutes
                 const response = await fetch("/summarize", {
                     method: "POST",
                     headers: { "Content-Type": "application/json" },
@@ -246,27 +257,29 @@
                 clearTimeout(timeoutId);
                 const data = await response.json();
                 console.log("Summarize response:", JSON.stringify(data, null, 2));
-                if (data.summary) {
-                    document.getElementById("summary").innerText = data.summary;
-                } else {
-                    document.getElementById("summary").innerText = "Error: " + (data.error || "No summary returned");
-                }
+                summaryDiv.innerText = data.summary || "Error: " + (data.error || "No summary returned");
             } catch (error) {
-                console.error("Summarize error:", error);
-                document.getElementById("summary").innerText = "Failed to summarize: " + error.message;
+                console.error("Summarize error:", error.name, error.message);
+                summaryDiv.innerText = `Failed to summarize: ${error.message}${error.name === "AbortError" ? " (Timeout?)" : ""}`;
             }
         }
+
         async function doTranslate() {
             const summary = document.getElementById("summary").innerText;
             const lang = document.getElementById("language").value;
+            const translationDiv = document.getElementById("translation");
             if (lang === "default" || summary === "") {
-                document.getElementById("translation").innerText = "Please select a language and ensure a summary is available.";
+                translationDiv.innerText = "Please select a language and ensure a summary is available.";
                 return;
             }
+            translationDiv.innerText = "Translating...";
             console.log("Translate called with lang:", lang, "Text:", summary);
             try {
                 const controller = new AbortController();
-                const timeoutId = setTimeout(() => controller.abort(), 120000);
+                const timeoutId = setTimeout(() => {
+                    controller.abort();
+                    console.warn("Translate timed out after 300 seconds");
+                }, 300000); // Increased to 5 minutes
                 const response = await fetch("/translate", {
                     method: "POST",
                     headers: { "Content-Type": "application/json" },
@@ -276,14 +289,10 @@
                 clearTimeout(timeoutId);
                 const data = await response.json();
                 console.log("Translate response:", JSON.stringify(data, null, 2));
-                if (data.translation) {
-                    document.getElementById("translation").innerText = data.translation;
-                } else {
-                    document.getElementById("translation").innerText = "Error: " + (data.error || "No translation returned");
-                }
+                translationDiv.innerText = data.translation || "Error: " + (data.error || "No translation returned");
             } catch (error) {
-                console.error("Translate error:", error);
-                document.getElementById("translation").innerText = "Failed to translate: " + error.message;
+                console.error("Translate error:", error.name, error.message);
+                translationDiv.innerText = `Failed to translate: ${error.message}${error.name === "AbortError" ? " (Timeout?)" : ""}`;
             }
         }
     </script>