Update app.py

app.py

@@ -1,24 +1,50 @@
 import os
 import requests
 import gradio as gr
+import time
 
 # ==========================================
-# ១. ផ្នែកបច្ចេកទេស API (Gemini, Llama & SEA-LION)
+# ១. ផ្នែកបច្ចេកទេស API (ជាមួយ Logic បញ្ជូនស្ថានភាព Key)
 # ==========================================
 class AIService:
+    @staticmethod
+    def get_status_html(engine):
+        # បង្កើត UI ភ្លើងសញ្ញា Status សម្រាប់ Keys នីមួយៗ
+        if "Gemini" in engine:
+            keys = [os.environ.get(f"GEMINI_API_KEY_{i}") for i in range(1, 6)]
+            label = "Gemini Keys"
+        elif "Llama" in engine:
+            keys = [os.environ.get(f"GROQ_API_KEY_{i}") for i in range(1, 4)]
+            label = "Llama Keys"
+        else:
+            key = os.environ.get("SEA_LION_API_KEY")
+            keys = [key] if key else []
+            label = "SEA-LION Key"
+
+        html = f"<div style='display: flex; gap: 10px; align-items: center; margin-bottom: 10px;'>"
+        html += f"<b style='color: #94a3b8; font-size: 12px;'>{label}:</b>"
+        for i, k in enumerate(keys):
+            if k:
+                # ភ្លើងពណ៌បៃតងលោត (Pulse) បញ្ជាក់ថា Key មានក្នុងប្រព័ន្ធ
+                html += f"<div title='Key {i+1} Ready' style='width: 12px; height: 12px; background: #22c55e; border-radius: 50%; box-shadow: 0 0 8px #22c55e; animation: pulse 1.5s infinite;'></div>"
+            else:
+                # ភ្លើងពណ៌ក្រហម បញ្ជាក់ថាអត់មាន Key
+                html += f"<div title='Key {i+1} Empty' style='width: 12px; height: 12px; background: #ef4444; border-radius: 50%;'></div>"
+        html += "</div>"
+        return html
+
     @staticmethod
     def translate_gemini(prompt):
         keys = [os.environ.get(f"GEMINI_API_KEY_{i}") for i in range(1, 6) if os.environ.get(f"GEMINI_API_KEY_{i}")]
         for key in keys:
             try:
                 url = f"https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash-exp:generateContent?key={key}"
-                # កែសម្រួលឱ្យវាចេះរើសពាក្យបត់បែនតាមបរិបទ
-                instruction = "Return ONLY the translated text. Be natural and accurate. If the user asks again, provide the best alternative translation. Preserve format."
+                instruction = "Return ONLY direct translation. Be natural. If asked again, provide an alternative phrasing. Preserve format."
                 res = requests.post(url, json={"contents": [{"parts": [{"text": f"{instruction}\n\n{prompt}"}]}]}, timeout=15)
                 if res.status_code == 200:
                     return res.json()['candidates'][0]['content']['parts'][0]['text'].strip()
             except: continue
-        return "❌ Gemini API Error"
+        return "❌ Gemini API Error: Keys might be exhausted."
 
     @staticmethod
     def translate_llama(prompt):
@@ -29,9 +55,10 @@ class AIService:
                 payload = {
                     "model": "llama-3.3-70b-versatile",
                     "messages": [
-                        {"role": "system", "content": "Return ONLY the translation. Be accurate and natural. Provide context-appropriate synonyms if re-requested."},
+                        {"role": "system", "content": "DIRECT TRANSLATION ONLY. Be natural. Provide alternative wording on repeat requests."},
                         {"role": "user", "content": prompt}
-                    ]
+                    ],
+                    "temperature": 0.7
                 }
                 res = requests.post("https://api.groq.com/openai/v1/chat/completions", headers=headers, json=payload, timeout=15)
                 if res.status_code == 200:
@@ -41,7 +68,6 @@ class AIService:
 
     @staticmethod
     def translate_sealion(prompt):
-        # បញ្ចូល SEA-LION មកវិញតាមការបញ្ជាក់របស់មេ
         key = os.environ.get("SEA_LION_API_KEY")
         if not key: return "❌ Missing SEA_LION_API_KEY"
         try:
@@ -49,64 +75,37 @@ class AIService:
             headers = {"Authorization": f"Bearer {key}", "Content-Type": "application/json"}
             payload = {
                 "model": "aisingapore/Gemma-SEA-LION-v4-27B-IT",
-                "messages": [
-                    {"role": "system", "content": "Return ONLY direct translation. Ensure natural phrasing. No chatter."},
-                    {"role": "user", "content": prompt}
-                ],
-                "max_completion_tokens": 1024,
-                "temperature": 0.7 # បន្ថែម Temperature ដើម្បីឱ្យវាដូរពាក្យពេលចុចម្តងទៀត
+                "messages": [{"role": "user", "content": f"Translate to Khmer (Natural phrasing, return ONLY translation): {prompt}"}],
+                "temperature": 0.7
             }
             res = requests.post(url, headers=headers, json=payload, timeout=20)
             if res.status_code == 200:
                 return res.json()['choices'][0]['message']['content'].strip()
-            return f"❌ SEA-LION Error: {res.status_code}"
+            return f"❌ SEA-LION Error"
         except: return "❌ Connection Error"
 
 def translator_hub(text, target_lang, engine):
     if not text.strip(): return ""
     lang_name = target_lang.split(" ")[-1]
-    prompt = f"Translate to {lang_name}:\n{text}"
+    prompt = f"Target Language: {lang_name}\nText: {text}"
     
     if "Gemini" in engine: return AIService.translate_gemini(prompt)
     elif "Llama" in engine: return AIService.translate_llama(prompt)
-    elif "SEA-LION" in engine: return AIService.translate_sealion(prompt)
-    return "Unknown Model"
+    else: return AIService.translate_sealion(prompt)
 
 # ==========================================
-# ២. ស្គ្រីប PWA ពិសេស (រក្សាកូដដើមមេទាំងអស់)
+# ២. ស្គ្រីប PWA, CSS និង UI Layout ថ្មី
 # ==========================================
-pwa_ultimate_js = """
+pwa_js = """
 function initPWA() {
-    const script = document.createElement('script');
-    script.src = 'https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js';
-    document.head.appendChild(script);
-
-    const manifest = {
-        "name": "SRT SMART",
-        "short_name": "SRT SMART",
-        "start_url": window.location.href,
-        "display": "standalone",
-        "background_color": "#0d1117",
-        "theme_color": "#0d1117",
-        "icons": [{"src": "https://cdn-icons-png.flaticon.com/512/2800/2800115.png", "sizes": "512x512", "type": "image/png"}]
-    };
+    const s = document.createElement('script');
+    s.src = 'https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js';
+    document.head.appendChild(s);
     
-    const blob = new Blob([JSON.stringify(manifest)], {type: 'application/json'});
-    const manifestURL = URL.createObjectURL(blob);
-    let link = document.createElement('link');
-    link.rel = 'manifest'; link.href = manifestURL;
-    document.head.appendChild(link);
-
-    const metaTags = [
-        {name: "apple-mobile-web-app-capable", content: "yes"},
-        {name: "mobile-web-app-capable", content: "yes"},
-        {name: "apple-mobile-web-app-status-bar-style", content: "black-translucent"}
-    ];
-    metaTags.forEach(tag => {
-        let m = document.createElement('meta');
-        m.name = tag.name; m.content = tag.content;
-        document.head.appendChild(m);
-    });
+    // Pulse animation for API lights
+    const style = document.createElement('style');
+    style.innerHTML = `@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }`;
+    document.head.appendChild(style);
 
     window.addEventListener('click', (e) => {
         if (typeof confetti === 'function') {
@@ -117,16 +116,15 @@ function initPWA() {
 """
 
 css_style = """
-body { background-color: #0d1117 !important; cursor: crosshair; }
-textarea { resize: both !important; }
+body { background-color: #0d1117 !important; color: white !important; }
+.api-box { background: #161b22; border-radius: 8px; padding: 10px; border: 1px solid #30363d; margin-top: -10px; margin-bottom: 10px; }
 .center-btn { justify-content: center !important; gap: 8px !important; }
 .small-btn { max-width: 85px !important; min-width: 70px !important; font-size: 13px !important; padding: 4px !important; }
 .translate-btn { min-width: 150px !important; font-weight: bold !important; background: linear-gradient(45deg, #1e40af, #3b82f6) !important; color: white !important; }
 """
 
-with gr.Blocks(css=css_style, head=f"<script>{pwa_ultimate_js}</script>") as demo:
+with gr.Blocks(css=css_style, head=f"<script>{pwa_js}</script>") as demo:
     demo.load(None, None, None, js="() => { initPWA(); }")
-    
     gr.Markdown("<h2 style='text-align: center; color: #60a5fa;'>🎆 SRT SMART ULTIMATE 🇰🇭</h2>")
     
     with gr.Column():
@@ -137,15 +135,21 @@ with gr.Blocks(css=css_style, head=f"<script>{pwa_ultimate_js}</script>") as dem
                 value="🇰🇭 Khmer", label="បកប្រែជាភាសា"
             )
         
-        input_text = gr.Textbox(label="អត្ថបទដើម (ទាញពង្រីកបាន)", lines=5, placeholder="បិទភ្ជាប់ SRT ឬអត្ថបទ...")
+        # ប្រអប់បង្ហាញ Status API Keys
+        api_status_ui = gr.HTML(AIService.get_status_html("💎 Gemini"), elem_classes="api-box")
+        
+        input_text = gr.Textbox(label="អត្ថបទដើម", lines=5, placeholder="បិទភ្ជាប់ SRT ឬអត្ថបទ...")
         
         with gr.Row(elem_classes="center-btn"):
             clear_btn = gr.Button("🗑️ លុប", variant="secondary", elem_classes="small-btn")
             submit_btn = gr.Button("��� បកប្រែឥឡូវ", variant="primary", elem_classes="translate-btn")
             copy_btn = gr.Button("📋 ចម្លង", variant="secondary", elem_classes="small-btn")
             
-        output_text = gr.Textbox(label="លទ្ធផល (ទាញពង្រីកបាន)", lines=8, interactive=False)
+        output_text = gr.Textbox(label="លទ្ធផល", lines=8, interactive=False)
 
+    # ប្តូរ Status ភ្លើងពេលដូរម៉ូដែល
+    engine_opt.change(fn=AIService.get_status_html, inputs=engine_opt, outputs=api_status_ui)
+    
     submit_btn.click(fn=translator_hub, inputs=[input_text, lang_opt, engine_opt], outputs=output_text)
     clear_btn.click(lambda: ["", ""], None, [input_text, output_text])
     copy_btn.click(None, inputs=output_text, js="(v) => { if(v){ navigator.clipboard.writeText(v); alert('បានចម្លង! 🎆'); } }")