Update app.py

app.py

@@ -1,6 +1,18 @@
 import gradio as gr
+import os
 from carebridge_client import CareBridgeTranslator
 
+# --- Asset Management ---
+if not os.path.exists("simboti_logo.jpg"):
+    try:
+        from assets import LOGO_BASE64
+        import base64
+        with open("simboti_logo.jpg", "wb") as f:
+            f.write(base64.b64decode(LOGO_BASE64))
+    except ImportError:
+        pass # Ignore if assets.py not found
+
+# --- Initialize Client ---
 translator = None
 
 def load_translator():
@@ -9,83 +21,309 @@ def load_translator():
         translator = CareBridgeTranslator()
     return translator
 
-LANGUAGES = ["English", "Polish", "Romanian", "Punjabi", "Urdu", "Portuguese", "Spanish", "Arabic", "Bengali", "Gujarati", "Italian"]
+# --- Languages ---
+LANGUAGES = [
+    "English", "Polish", "Romanian", "Punjabi", "Urdu", 
+    "Portuguese", "Spanish", "Arabic", "Bengali", "Gujarati", "Italian"
+]
+
+# --- Custom CSS for Premium Design ---
+CUSTOM_CSS = """
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+* {
+    font-family: 'Inter', sans-serif !important;
+}
+
+.gradio-container {
+    max-width: 1200px !important;
+    margin: auto !important;
+    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
+}
+
+.main-header {
+    text-align: center;
+    padding: 40px 20px;
+    background: white;
+    border-radius: 20px;
+    margin-bottom: 30px;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
+}
+
+.main-header h1 {
+    font-size: 2.5rem;
+    font-weight: 700;
+    background: linear-gradient(135deg, #4F46E5 0%, #06B6D4 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    margin-bottom: 10px;
+}
+
+.main-header p {
+    color: #64748b;
+    font-size: 1.1rem;
+}
+
+.feature-card {
+    background: white;
+    border-radius: 16px;
+    padding: 24px;
+    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
+    border: 1px solid #e2e8f0;
+    transition: all 0.3s ease;
+}
+
+.feature-card:hover {
+    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
+    transform: translateY(-2px);
+}
+
+.card-title {
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: #1e293b;
+    margin-bottom: 8px;
+}
+
+.card-subtitle {
+    color: #64748b;
+    font-size: 0.9rem;
+}
+
+.highlight {
+    background: linear-gradient(120deg, #fef3c7 0%, #fef3c7 100%);
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-weight: 600;
+}
 
+.patient-display {
+    font-size: 2.5rem !important;
+    color: #1e293b !important;
+    font-weight: 600 !important;
+    text-align: center !important;
+    padding: 40px !important;
+    background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%) !important;
+    border-radius: 16px !important;
+    border: 2px solid #6366f1 !important;
+    min-height: 120px !important;
+}
+
+.primary-btn {
+    background: linear-gradient(135deg, #4F46E5 0%, #6366f1 100%) !important;
+    border: none !important;
+    color: white !important;
+    padding: 14px 28px !important;
+    font-weight: 600 !important;
+    border-radius: 12px !important;
+    font-size: 1rem !important;
+    transition: all 0.3s ease !important;
+}
+
+.primary-btn:hover {
+    transform: scale(1.02) !important;
+    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.4) !important;
+}
+
+.language-selector {
+    background: white !important;
+    border-radius: 12px !important;
+    border: 2px solid #e2e8f0 !important;
+}
+
+.tab-nav button {
+    font-weight: 600 !important;
+    padding: 12px 24px !important;
+}
+
+.tab-nav button.selected {
+    background: linear-gradient(135deg, #4F46E5 0%, #6366f1 100%) !important;
+    color: white !important;
+}
+
+footer {
+    display: none !important;
+}
+"""
+
+# --- UI Functions ---
 def translate_message(text, source_lang, target_lang):
     if not text:
         return "", "", None
-    yield "Translating...", "<div style='font-size:2rem;text-align:center;padding:40px;background:#dbeafe;border-radius:16px;'>Translating...</div>", None
+    
+    yield "Translating...", "<div class='patient-display'>⏳ Translating...</div>", None
     app_translator = load_translator()
     result = app_translator.translate_text(text, source_lang, target_lang)
     tts_file = app_translator.speak_text(result, target_lang)
-    yield result, f"<div style='font-size:2.5rem;text-align:center;padding:40px;background:linear-gradient(135deg,#dbeafe,#e0e7ff);border-radius:16px;border:2px solid #6366f1;font-weight:600;'>{result}</div>", tts_file
+    large_display = f"<div class='patient-display'>{result}</div>"
+    yield result, large_display, tts_file
 
 def translate_speech(audio, source_lang, target_lang):
     if audio is None:
         return "", "", None
-    yield "Listening...", "<div style='font-size:2rem;text-align:center;padding:40px;background:#dbeafe;border-radius:16px;'>Processing...</div>", None
+    
+    yield "Listening...", "<div class='patient-display'>🎧 Processing audio...</div>", None
     app_translator = load_translator()
     result = app_translator.translate_audio(audio, source_lang, target_lang)
     tts_file = app_translator.speak_text(result, target_lang)
-    yield result, f"<div style='font-size:2.5rem;text-align:center;padding:40px;background:linear-gradient(135deg,#dbeafe,#e0e7ff);border-radius:16px;border:2px solid #6366f1;font-weight:600;'>{result}</div>", tts_file
+    large_display = f"<div class='patient-display'>{result}</div>"
+    yield result, large_display, tts_file
 
 def translate_leaflet(image, source_lang, target_lang):
     if image is None:
         return "", "", None
-    yield "Scanning...", "<div style='font-size:2rem;text-align:center;padding:40px;background:#dbeafe;border-radius:16px;'>Scanning...</div>", None
+    
+    yield "Scanning...", "<div class='patient-display'>📄 Scanning document...</div>", None
     app_translator = load_translator()
     result = app_translator.translate_image(image, source_lang, target_lang)
     tts_file = app_translator.speak_text(result, target_lang)
-    yield result, f"<div style='font-size:1.5rem;padding:20px;background:#f8fafc;border-radius:12px;'>{result}</div>", tts_file
+    large_display = f"<div class='patient-display'>{result}</div>"
+    yield result, large_display, tts_file
 
-css = """
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
-* { font-family: 'Inter', sans-serif !important; }
-.gradio-container { max-width: 1200px !important; margin: auto !important; }
-"""
+def translate_video(video, source_lang, target_lang):
+    if video is None:
+        return "", "", None
+    
+    yield "Processing...", "<div class='patient-display'>🎥 Analyzing video...</div>", None
+    app_translator = load_translator()
+    result = app_translator.translate_video(video, source_lang, target_lang)
+    tts_file = app_translator.speak_text(result, target_lang)
+    large_display = f"<div class='patient-display'>{result}</div>"
+    yield result, large_display, tts_file
 
-with gr.Blocks(css=css, title="SIMBOTI Live") as app:
-    gr.HTML("<div style='text-align:center;padding:40px;background:white;border-radius:20px;margin-bottom:30px;box-shadow:0 4px 20px rgba(0,0,0,0.08);'><h1 style='font-size:2.5rem;font-weight:700;background:linear-gradient(135deg,#4F46E5,#06B6D4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;'>SIMBOTI Live</h1><p style='color:#64748b;'>Speech Intelligent Multimodal Bot for Outreach Translation Implementation</p><p style='margin-top:16px;'>Built with <span style='background:#fef3c7;padding:2px 6px;border-radius:4px;font-weight:600;'>TranslateGemma 4B</span></p></div>")
+# --- App Layout ---
+with gr.Blocks(css=CUSTOM_CSS, title="SIMBOTI Live") as app:
     
+    # Header
+    gr.HTML("""
+    <div class="main-header">
+        <img src="file/simboti_logo.jpg" style="width: 100px; height: 100px; border-radius: 20px; margin-bottom: 16px;" />
+        <h1>SIMBOTI Live</h1>
+        <p><strong>S</strong>peech <strong>I</strong>ntelligent <strong>M</strong>ultimodal <strong>B</strong>ot for <strong>O</strong>utreach <strong>T</strong>ranslation <strong>I</strong>mplementation</p>
+        <p style="margin-top: 16px;">
+            Built with <span class="highlight">TranslateGemma 4B</span> • Supports 11 clinical languages • Privacy-first
+        </p>
+    </div>
+    """)
+
+    # Language Selection
     with gr.Row():
-        source_lang = gr.Dropdown(LANGUAGES, value="English", label="From (Source)")
-        target_lang = gr.Dropdown(LANGUAGES, value="Polish", label="To (Target)")
-    
-    with gr.Tabs():
-        with gr.TabItem("💬 Text"):
+        with gr.Column(scale=1):
+            gr.HTML("<div class='feature-card'><div class='card-title'>🌍 Source Language</div><div class='card-subtitle'>What language are you speaking?</div></div>")
+            source_lang = gr.Dropdown(LANGUAGES, value="English", show_label=False, container=False)
+        with gr.Column(scale=1):
+            gr.HTML("<div class='feature-card'><div class='card-title'>🎯 Target Language</div><div class='card-subtitle'>What language does the patient speak?</div></div>")
+            target_lang = gr.Dropdown(LANGUAGES, value="Polish", show_label=False, container=False)
+
+    gr.HTML("<br>")
+
+    # Main Tabs
+    with gr.Tabs() as tabs:
+        
+        # Tab 1: Text Translation
+        with gr.TabItem("💬 Text Translation"):
+            gr.HTML("""
+            <div class="feature-card" style="margin-bottom: 20px;">
+                <div class="card-title">Quick Text Translation</div>
+                <div class="card-subtitle">Type your message and it will be translated and <span class="highlight">spoken aloud</span> for the patient.</div>
+            </div>
+            """)
             with gr.Row():
-                with gr.Column():
-                    clinician_text = gr.Textbox(label="Your Message", placeholder="e.g., Do you have any allergies?", lines=4)
-                    translate_btn = gr.Button("🚀 Translate & Speak", variant="primary")
-                with gr.Column():
-                    patient_output_html = gr.HTML()
-                    patient_audio = gr.Audio(label="Audio", autoplay=True)
+                with gr.Column(scale=1):
+                    clinician_text = gr.Textbox(
+                        label="Your Message",
+                        placeholder="e.g., Do you have any allergies?",
+                        lines=4
+                    )
+                    translate_btn = gr.Button("🚀 Translate & Speak", elem_classes=["primary-btn"])
+                with gr.Column(scale=1):
+                    patient_output_html = gr.HTML(label="Patient Display")
+                    patient_audio = gr.Audio(label="📢 Audio Output", autoplay=True)
                     patient_output_raw = gr.Textbox(visible=False)
-            translate_btn.click(translate_message, [clinician_text, source_lang, target_lang], [patient_output_raw, patient_output_html, patient_audio])
-        
-        with gr.TabItem("🎙️ Speech"):
+
+            translate_btn.click(
+                translate_message, 
+                inputs=[clinician_text, source_lang, target_lang],
+                outputs=[patient_output_raw, patient_output_html, patient_audio]
+            )
+
+        # Tab 2: Live Speech
+        with gr.TabItem("🎙️ Live Speech"):
+            gr.HTML("""
+            <div class="feature-card" style="margin-bottom: 20px;">
+                <div class="card-title">Voice-to-Voice Translation</div>
+                <div class="card-subtitle">Speak into the microphone and SIMBOTI will <span class="highlight">translate in real-time</span>.</div>
+            </div>
+            """)
             with gr.Row():
-                with gr.Column():
-                    mic_input = gr.Audio(sources=["microphone"], type="filepath", label="Record")
-                    speech_btn = gr.Button("🚀 Translate", variant="primary")
-                with gr.Column():
-                    speech_html = gr.HTML()
-                    speech_audio = gr.Audio(label="Audio", autoplay=True)
-                    speech_raw = gr.Textbox(visible=False)
-            speech_btn.click(translate_speech, [mic_input, source_lang, target_lang], [speech_raw, speech_html, speech_audio])
-        
-        with gr.TabItem("📄 Document"):
+                with gr.Column(scale=1):
+                    mic_input = gr.Audio(sources=["microphone"], type="filepath", label="🎤 Record Your Voice")
+                    speech_translate_btn = gr.Button("🚀 Translate Speech", elem_classes=["primary-btn"])
+                with gr.Column(scale=1):
+                    speech_output_html = gr.HTML(label="Patient Display")
+                    speech_audio = gr.Audio(label="📢 Translated Audio", autoplay=True)
+                    speech_output_raw = gr.Textbox(visible=False)
+
+            speech_translate_btn.click(
+                translate_speech,
+                inputs=[mic_input, source_lang, target_lang],
+                outputs=[speech_output_raw, speech_output_html, speech_audio]
+            )
+
+        # Tab 3: Document Scan
+        with gr.TabItem("📄 Document Scan"):
+            gr.HTML("""
+            <div class="feature-card" style="margin-bottom: 20px;">
+                <div class="card-title">Document & Leaflet Translation</div>
+                <div class="card-subtitle">Upload a photo of medication instructions, consent forms, or any clinical document.</div>
+            </div>
+            """)
             with gr.Row():
-                with gr.Column():
-                    doc_image = gr.Image(type="pil", label="Upload Photo")
-                    doc_btn = gr.Button("🚀 Scan & Translate", variant="primary")
-                with gr.Column():
-                    doc_html = gr.HTML()
-                    doc_audio = gr.Audio(label="Audio")
-                    doc_raw = gr.Textbox(visible=False)
-            doc_btn.click(translate_leaflet, [doc_image, source_lang, target_lang], [doc_raw, doc_html, doc_audio])
-    
-    gr.HTML("<div style='text-align:center;padding:30px;color:#64748b;'>🔒 Privacy First: All translations run on-device via ZeroGPU</div>")
+                with gr.Column(scale=1):
+                    doc_image = gr.Image(type="pil", label="📷 Upload Document Photo")
+                    doc_translate_btn = gr.Button("🚀 Scan & Translate", elem_classes=["primary-btn"])
+                with gr.Column(scale=1):
+                    doc_result_html = gr.HTML(label="Translated Text")
+                    doc_audio = gr.Audio(label="📢 Read Aloud", autoplay=False)
+                    doc_result_raw = gr.Textbox(visible=False)
+
+            doc_translate_btn.click(
+                translate_leaflet,
+                inputs=[doc_image, source_lang, target_lang],
+                outputs=[doc_result_raw, doc_result_html, doc_audio]
+            )
+
+        # Tab 4: Video OCR
+        with gr.TabItem("🎥 Video Translation"):
+            gr.HTML("""
+            <div class="feature-card" style="margin-bottom: 20px;">
+                <div class="card-title">Video Text Extraction</div>
+                <div class="card-subtitle">Extract and translate text from videos - useful for <span class="highlight">instructional videos</span>.</div>
+            </div>
+            """)
+            with gr.Row():
+                with gr.Column(scale=1):
+                    video_input = gr.Video(label="🎬 Upload Video")
+                    video_translate_btn = gr.Button("🚀 Process Video", elem_classes=["primary-btn"])
+                with gr.Column(scale=1):
+                    video_result_html = gr.HTML(label="Translated Text")
+                    video_audio = gr.Audio(label="📢 Read Aloud", autoplay=False)
+                    video_result_raw = gr.Textbox(visible=False)
+
+            video_translate_btn.click(
+                translate_video,
+                inputs=[video_input, source_lang, target_lang],
+                outputs=[video_result_raw, video_result_html, video_audio]
+            )
+
+    # Footer
+    gr.HTML("""
+    <div style="text-align: center; padding: 30px; margin-top: 40px; color: #64748b; font-size: 0.9rem;">
+        <p>🔒 <strong>Privacy First</strong>: All translations run on-device via ZeroGPU. No data is stored.</p>
+        <p style="margin-top: 8px;">Powered by SIMBOTI • Built with TranslateGemma 4B</p>
+    </div>
+    """)
 
+# Launch
 if __name__ == "__main__":
     app.launch()