update

Dockerfile

@@ -9,8 +9,11 @@ COPY requirements.txt .
 RUN pip install --no-cache-dir -r requirements.txt
 
 # Pre-download models to cache them in the Docker image
-RUN python -c "from transformers import pipeline; pipeline('summarization', model='sshleifer/distilbart-cnn-6-6')"
-RUN python -c "from transformers import pipeline; pipeline('translation', model='facebook/m2m100_418M')"
+RUN python -c "from transformers import pipeline; pipeline('summarization', model='facebook/bart-large-cnn')"
+RUN python -c "from transformers import pipeline; pipeline('translation', model='Helsinki-NLP/opus-mt-en-fr')"
+RUN python -c "from transformers import pipeline; pipeline('translation', model='Helsinki-NLP/opus-mt-en-de')"
+RUN python -c "from transformers import pipeline; pipeline('translation', model='Helsinki-NLP/opus-mt-en-es')"
+RUN python -c "from transformers import pipeline; pipeline('translation', model='Helsinki-NLP/opus-mt-en-ar')"
 
 # Copy the rest of the application
 COPY . .

app.py

@@ -27,10 +27,13 @@ async def serve_html():
 
 # Load pre-trained models from Hugging Face Hub
 try:
-    # Use a lighter summarization model
-    summarizer = pipeline("summarization", model="sshleifer/distilbart-cnn-6-6")
-    # Use a single multilingual translation model
-    translator = pipeline("translation", model="facebook/m2m100_418M")
+    summarizer = pipeline("summarization", model="facebook/bart-large-cnn")
+    translators = {
+        "fr": pipeline("translation", model="Helsinki-NLP/opus-mt-en-fr"),
+        "de": pipeline("translation", model="Helsinki-NLP/opus-mt-en-de"),
+        "es": pipeline("translation", model="Helsinki-NLP/opus-mt-en-es"),
+        "ar": pipeline("translation", model="Helsinki-NLP/opus-mt-en-ar")
+    }
 except Exception as e:
     print(f"Error loading models: {str(e)}")
     raise e
@@ -57,26 +60,19 @@ async def translate(request: Request):
         data = await request.json()
         text = data["text"]
         lang = data["lang"]
-        # Map language codes to M2M100 language codes
-        lang_map = {
-            "fr": "fr",
-            "de": "de",
-            "es": "es",
-            "ar": "ar"
-        }
-        if lang not in lang_map:
+        if lang not in translators:
             return {"error": "Language not supported"}
         
-        # Perform translation using M2M100
-        result = translator(text, src_lang="en", tgt_lang=lang_map[lang])
+        # Perform translation
+        result = translators[lang](text)
         print(f"Translation result for {lang}: {result}")  # Debugging
         
         # 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
-        translation = result[0]["translation_text"]
+        # 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

@@ -11,127 +11,129 @@
         }
         body {
             font-family: Arial, sans-serif;
-            background-color: #000000; 
+            background-color: #000000;
             color: #e0e0e0;
             margin: 0;
-            padding: 20px;
+            padding: 10px;
             min-height: 100vh;
             display: flex;
             justify-content: center;
-            align-items: center;
+            align-items: flex-start; 
         }
         .container {
             max-width: 1000px;
             width: 100%;
             margin: 0 auto;
+            padding: 0 10px; 
         }
         .header {
             display: flex;
             align-items: center;
             justify-content: center;
-            margin-bottom: 4px; 
+            margin-bottom: 10px;
         }
         .header img {
-            width: 60px;
+            width: 50px; 
             height: auto;
-            margin-right: 15px;
+            margin-right: 10px;
         }
         .header h1 {
-            font-family: 'Papyrus', sans-serif; 
-            font-size: 32px;
+            font-family: 'Papyrus', sans-serif;
+            font-size: 24px; 
             margin: 0;
             color: #ffffff;
-            text-shadow: 2px 2px 5px rgba(107, 72, 255, 0.5); 
+            text-shadow: 2px 2px 5px rgba(107, 72, 255, 0.5);
         }
         .tagline {
-            font-family: 'Orbitron', sans-serif; 
-            font-size: 16px;
-            font-weight: 700; 
+            font-family: 'Orbitron', sans-serif;
+            font-size: 14px; 
+            font-weight: 700;
             color: #b0b0b0;
             text-align: center;
-            margin-bottom: 30px;
-            letter-spacing: 1px; 
+            margin-bottom: 20px;
+            letter-spacing: 1px;
         }
         /* Summarization Section */
         .summarize-section {
             display: flex;
             flex-wrap: wrap;
-            gap: 20px;
-            margin-bottom: 40px;
+            gap: 10px;
+            margin-bottom: 20px;
         }
         .summarize-section div {
             flex: 1;
-            min-width: 300px;
+            min-width: 100%; 
         }
         .summarize-section label {
             display: block;
-            font-size: 18px;
+            font-size: 16px; 
             color: #ffffff;
-            margin-bottom: 10px;
+            margin-bottom: 5px;
         }
         textarea, .output {
             width: 100%;
-            padding: 15px;
-            border-radius: 10px;
+            padding: 10px;
+            border-radius: 5px;
             border: 2px solid #6b48ff;
-            font-size: 16px;
+            font-size: 14px; /* Reduced for mobile */
             background-color: #1a1a1a;
             color: #ffffff;
-            box-shadow: 0 0 10px rgba(107, 72, 255, 0.3);
+            box-shadow: 0 0 5px rgba(107, 72, 255, 0.3);
         }
         textarea {
-            height: 200px;
-            resize: both;
+            height: 150px; 
+            resize: vertical;
         }
         .output {
-            height: 200px;
+            height: 150px; 
         }
         .translation-output {
-            height: 120px; 
+            height: 100px;
         }
         .button-container {
             width: 100%;
             text-align: left;
-            margin-top: 10px;
+            margin-top: 5px;
         }
         button {
             background: linear-gradient(90deg, #6b48ff, #a73aff);
             color: white;
-            padding: 12px 30px;
+            padding: 10px 20px; 
             border: none;
-            border-radius: 25px;
+            border-radius: 20px; 
             cursor: pointer;
-            font-size: 16px;
+            font-size: 14px; 
             transition: transform 0.2s, box-shadow 0.3s;
-            box-shadow: 0 4px 15px rgba(107, 72, 255, 0.4);
+            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 20px rgba(107, 72, 255, 0.6);
+            box-shadow: 0 6px 15px rgba(107, 72, 255, 0.6);
         }
         /* Translation Section */
         .translate-section {
-            margin-top: 40px;
+            margin-top: 20px;
             display: flex;
             flex-wrap: wrap;
-            gap: 15px;
+            gap: 10px;
             align-items: center;
-            margin-bottom: 20px;
+            margin-bottom: 10px;
         }
         .translate-section label {
-            font-size: 18px;
+            font-size: 16px; 
             color: #ffffff;
         }
         select {
-            padding: 10px;
+            padding: 8px;
             border-radius: 5px;
             border: 2px solid #a73aff;
-            font-size: 16px;
+            font-size: 14px; 
             background-color: #1a1a1a;
             color: #ffffff;
             cursor: pointer;
-            width: 200px;
+            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;
@@ -160,6 +162,24 @@
                 width: 100%;
             }
         }
+        @media (max-width: 480px) {
+            .header h1 {
+                font-size: 20px;
+            }
+            .tagline {
+                font-size: 12px;
+            }
+            textarea, .output {
+                height: 120px;
+            }
+            .translation-output {
+                height: 80px;
+            }
+            button {
+                padding: 8px 15px;
+                font-size: 12px;
+            }
+        }
     </style>
 </head>
 <body>
@@ -205,28 +225,32 @@
 
     <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 })
+                    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 = "No summary returned: " + (data.error || "Unknown error");
+                    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;
             }
         }
-
+    
         async function doTranslate() {
             const summary = document.getElementById("summary").innerText;
             const lang = document.getElementById("language").value;
@@ -236,17 +260,21 @@
             }
             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 })
+                    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 || "Unknown error");
+                    document.getElementById("translation").innerText = "Error: " + (data.error || "No translation returned");
                 }
             } catch (error) {
                 console.error("Translate error:", error);