Fix mobile responsiveness

app.py

@@ -16,7 +16,7 @@ app.add_middleware(
     allow_headers=["*"],
 )
 
-# Serve static files (like Moon.PNG) under /assets
+
 app.mount("/assets", StaticFiles(directory="."), name="static")
 
 # Serve the HTML page at the root
@@ -44,17 +44,11 @@ async def summarize(request: Request):
     try:
         data = await request.json()
         text = data["text"]
-        # Dynamic length based on input length
         input_length = len(summarizer.tokenizer(text)["input_ids"])
-        # Set dynamic max_length (e.g., 50% of input with a cap at 150)
-        max_length = min(150, max(50, int(input_length * 0.5)))
-        # Set dynamic min_length (e.g., 20% of input with a floor at 20)
-        min_length = max(20, int(input_length * 0.2))
-        # Generate summary without fixed lengths if input is short
-        if input_length < 50:
-            summary = summarizer(text, do_sample=False)
-        else:
-            summary = summarizer(text, max_length=max_length, min_length=min_length, do_sample=False)
+        max_length = min(200, max(70, int(input_length * 0.7)))  
+        min_length = max(30, int(input_length * 0.3))
+        # Generate summary
+        summary = summarizer(text, max_length=max_length, min_length=min_length, do_sample=False)
         return {"summary": summary[0]["summary_text"]}
     except Exception as e:
         print(f"Error in summarize: {str(e)}")
@@ -73,13 +67,12 @@ async def translate(request: Request):
         
         # Perform translation
         result = translators[lang](text)
-        print(f"Translation result for {lang}: {result}")  # Debugging
+        print(f"Translation result for {lang}: {result}")  
         
         # Check if result is a list and has at least one item
         if not isinstance(result, list) or len(result) == 0:
             return {"error": "Translation failed: empty or invalid result"}
         
-        # Extract the translated text (correct key is "translation_text")
         translation = result[0].get("translation_text")
         if translation is None:
             return {"error": "Translation failed: 'translation_text' not found in result"}

index.html

@@ -8,45 +8,54 @@
     <style>
         * {
             box-sizing: border-box;
+            margin: 0;
+            padding: 0;
         }
-        body {
+        html, body {
             font-family: Arial, sans-serif;
             background-color: #000000;
             color: #e0e0e0;
             margin: 0;
-            padding: 10px;
-            min-height: 100vh;
+            padding: 0;
+            width: 100%;
+            height: auto; 
+            overflow-y: auto; 
+        }
+        body {
             display: flex;
-            justify-content: center;
-            align-items: flex-start; 
+            flex-direction: column;
+            align-items: center;
+            padding: 10px;
         }
         .container {
             max-width: 1000px;
             width: 100%;
+            padding: 0 10px;
             margin: 0 auto;
-            padding: 0 10px; 
+            box-sizing: border-box;
         }
         .header {
             display: flex;
             align-items: center;
             justify-content: center;
             margin-bottom: 10px;
+            width: 100%;
         }
         .header img {
-            width: 50px; 
+            width: 50px;
             height: auto;
             margin-right: 10px;
         }
         .header h1 {
             font-family: 'Papyrus', sans-serif;
-            font-size: 24px; 
+            font-size: 24px;
             margin: 0;
             color: #ffffff;
             text-shadow: 2px 2px 5px rgba(107, 72, 255, 0.5);
         }
         .tagline {
             font-family: 'Orbitron', sans-serif;
-            font-size: 14px; 
+            font-size: 14px;
             font-weight: 700;
             color: #b0b0b0;
             text-align: center;
@@ -59,14 +68,16 @@
             flex-wrap: wrap;
             gap: 10px;
             margin-bottom: 20px;
+            width: 100%;
         }
         .summarize-section div {
             flex: 1;
-            min-width: 100%; 
+            min-width: 100%;
+            width: 100%;
         }
         .summarize-section label {
             display: block;
-            font-size: 16px; 
+            font-size: 16px;
             color: #ffffff;
             margin-bottom: 5px;
         }
@@ -75,20 +86,23 @@
             padding: 10px;
             border-radius: 5px;
             border: 2px solid #6b48ff;
-            font-size: 14px; /* Reduced for mobile */
+            font-size: 14px;
             background-color: #1a1a1a;
             color: #ffffff;
             box-shadow: 0 0 5px rgba(107, 72, 255, 0.3);
+            box-sizing: border-box;
         }
         textarea {
-            height: 150px; 
+            height: 120px;
             resize: vertical;
         }
         .output {
-            height: 150px; 
+            height: 120px;
+            overflow-y: auto; 
         }
         .translation-output {
-            height: 100px;
+            height: 80px;
+            overflow-y: auto;
         }
         .button-container {
             width: 100%;
@@ -98,14 +112,14 @@
         button {
             background: linear-gradient(90deg, #6b48ff, #a73aff);
             color: white;
-            padding: 10px 20px; 
+            padding: 10px 20px;
             border: none;
-            border-radius: 20px; 
+            border-radius: 20px;
             cursor: pointer;
-            font-size: 14px; 
+            font-size: 14px;
             transition: transform 0.2s, box-shadow 0.3s;
             box-shadow: 0 4px 10px rgba(107, 72, 255, 0.4);
-            width: 100%; 
+            width: 100%;
         }
         button:hover {
             background: linear-gradient(90deg, #5a38e7, #9632e6);
@@ -120,20 +134,21 @@
             gap: 10px;
             align-items: center;
             margin-bottom: 10px;
+            width: 100%;
         }
         .translate-section label {
-            font-size: 16px; 
+            font-size: 16px;
             color: #ffffff;
         }
         select {
             padding: 8px;
             border-radius: 5px;
             border: 2px solid #a73aff;
-            font-size: 14px; 
+            font-size: 14px;
             background-color: #1a1a1a;
             color: #ffffff;
             cursor: pointer;
-            width: 100%; 
+            width: 100%;
             appearance: none;
             background-image: url('data:image/svg+xml;utf8,<svg fill="white" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
             background-repeat: no-repeat;
@@ -170,10 +185,10 @@
                 font-size: 12px;
             }
             textarea, .output {
-                height: 120px;
+                height: 100px;
             }
             .translation-output {
-                height: 80px;
+                height: 60px;
             }
             button {
                 padding: 8px 15px;
@@ -223,64 +238,196 @@
         </div>
     </div>
 
-    <script>
-        console.log("Script loaded successfully");
-    
-        async function summarize() {
-            const text = document.getElementById("inputText").value;
-            try {
-                const controller = new AbortController();
-                const timeoutId = setTimeout(() => controller.abort(), 120000); 
-                const response = await fetch("/summarize", {
-                    method: "POST",
-                    headers: { "Content-Type": "application/json" },
-                    body: JSON.stringify({ text: text }),
-                    signal: controller.signal
-                });
-                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");
-                }
-            } catch (error) {
-                console.error("Summarize error:", error);
-                document.getElementById("summary").innerText = "Failed to summarize: " + error.message;
-            }
+<style>
+    * {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+    }
+    html, body {
+        font-family: Arial, sans-serif;
+        background-color: #000000;
+        color: #e0e0e0;
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        height: auto; /* Allow height to grow with content */
+        overflow-y: auto; /* Ensure scrolling is enabled */
+    }
+    body {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 10px;
+    }
+    .container {
+        max-width: 1000px;
+        width: 100%;
+        padding: 0 10px;
+        margin: 0 auto;
+        box-sizing: border-box;
+    }
+    .header {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 10px;
+        width: 100%;
+    }
+    .header img {
+        width: 50px;
+        height: auto;
+        margin-right: 10px;
+    }
+    .header h1 {
+        font-family: 'Papyrus', sans-serif;
+        font-size: 24px;
+        margin: 0;
+        color: #ffffff;
+        text-shadow: 2px 2px 5px rgba(107, 72, 255, 0.5);
+    }
+    .tagline {
+        font-family: 'Orbitron', sans-serif;
+        font-size: 14px;
+        font-weight: 700;
+        color: #b0b0b0;
+        text-align: center;
+        margin-bottom: 20px;
+        letter-spacing: 1px;
+    }
+    /* Summarization Section */
+    .summarize-section {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 10px;
+        margin-bottom: 20px;
+        width: 100%;
+    }
+    .summarize-section div {
+        flex: 1;
+        min-width: 100%;
+        width: 100%;
+    }
+    .summarize-section label {
+        display: block;
+        font-size: 16px;
+        color: #ffffff;
+        margin-bottom: 5px;
+    }
+    textarea, .output {
+        width: 100%;
+        padding: 10px;
+        border-radius: 5px;
+        border: 2px solid #6b48ff;
+        font-size: 14px;
+        background-color: #1a1a1a;
+        color: #ffffff;
+        box-shadow: 0 0 5px rgba(107, 72, 255, 0.3);
+        box-sizing: border-box;
+    }
+    textarea {
+        height: 120px;
+        resize: vertical;
+    }
+    .output {
+        height: 120px;
+        overflow-y: auto; /* Allow scrolling within the output */
+    }
+    .translation-output {
+        height: 80px;
+        overflow-y: auto;
+    }
+    .button-container {
+        width: 100%;
+        text-align: left;
+        margin-top: 5px;
+    }
+    button {
+        background: linear-gradient(90deg, #6b48ff, #a73aff);
+        color: white;
+        padding: 10px 20px;
+        border: none;
+        border-radius: 20px;
+        cursor: pointer;
+        font-size: 14px;
+        transition: transform 0.2s, box-shadow 0.3s;
+        box-shadow: 0 4px 10px rgba(107, 72, 255, 0.4);
+        width: 100%;
+    }
+    button:hover {
+        background: linear-gradient(90deg, #5a38e7, #9632e6);
+        transform: scale(1.05);
+        box-shadow: 0 6px 15px rgba(107, 72, 255, 0.6);
+    }
+    /* Translation Section */
+    .translate-section {
+        margin-top: 20px;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 10px;
+        align-items: center;
+        margin-bottom: 10px;
+        width: 100%;
+    }
+    .translate-section label {
+        font-size: 16px;
+        color: #ffffff;
+    }
+    select {
+        padding: 8px;
+        border-radius: 5px;
+        border: 2px solid #a73aff;
+        font-size: 14px;
+        background-color: #1a1a1a;
+        color: #ffffff;
+        cursor: pointer;
+        width: 100%;
+        appearance: none;
+        background-image: url('data:image/svg+xml;utf8,<svg fill="white" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
+        background-repeat: no-repeat;
+        background-position: right 10px center;
+    }
+    select:focus {
+        outline: none;
+        border-color: #6b48ff;
+    }
+    /* Responsive Design */
+    @media (max-width: 768px) {
+        .summarize-section {
+            flex-direction: column;
         }
-    
-        async function doTranslate() {
-            const summary = document.getElementById("summary").innerText;
-            const lang = document.getElementById("language").value;
-            if (lang === "default" || summary === "") {
-                document.getElementById("translation").innerText = "Please select a language and ensure a summary is available.";
-                return;
-            }
-            console.log("Translate called with lang:", lang, "Text:", summary);
-            try {
-                const controller = new AbortController();
-                const timeoutId = setTimeout(() => controller.abort(), 120000); 
-                const response = await fetch("/translate", {
-                    method: "POST",
-                    headers: { "Content-Type": "application/json" },
-                    body: JSON.stringify({ text: summary, lang: lang }),
-                    signal: controller.signal
-                });
-                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");
-                }
-            } catch (error) {
-                console.error("Translate error:", error);
-                document.getElementById("translation").innerText = "Failed to translate: " + error.message;
-            }
+        .summarize-section div {
+            min-width: 100%;
+        }
+        .translate-section {
+            flex-direction: column;
+            align-items: flex-start;
+        }
+        select {
+            width: 100%;
+        }
+        button {
+            width: 100%;
+        }
+    }
+    @media (max-width: 480px) {
+        .header h1 {
+            font-size: 20px;
+        }
+        .tagline {
+            font-size: 12px;
+        }
+        textarea, .output {
+            height: 100px;
+        }
+        .translation-output {
+            height: 60px;
+        }
+        button {
+            padding: 8px 15px;
+            font-size: 12px;
         }
-    </script>
+    }
+</style>
 </body>
 </html>