Update app.py

app.py

@@ -1,18 +1,7 @@
 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 ---
+# --- Initialize Client (Lazy) ---
 translator = None
 
 def load_translator():
@@ -27,303 +16,225 @@ LANGUAGES = [
     "Portuguese", "Spanish", "Arabic", "Bengali", "Gujarati", "Italian"
 ]
 
-# --- Custom CSS for Premium Design ---
+# --- Minimal CSS (Gemini Dictation Inspired) ---
 CUSTOM_CSS = """
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
 
-* {
-    font-family: 'Inter', sans-serif !important;
-}
+* { font-family: 'Inter', sans-serif !important; }
 
 .gradio-container {
-    max-width: 1200px !important;
+    max-width: 900px !important;
     margin: auto !important;
-    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
+    background: #f8fafc !important;
+    min-height: 100vh !important;
 }
 
-.main-header {
-    text-align: center;
-    padding: 40px 20px;
+/* --- Header --- */
+.app-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 24px;
+    border-bottom: 1px solid #e2e8f0;
     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;
+.app-title {
+    font-size: 1.25rem;
     font-weight: 700;
-    background: linear-gradient(135deg, #4F46E5 0%, #06B6D4 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    margin-bottom: 10px;
+    color: #1e293b;
 }
-
-.main-header p {
-    color: #64748b;
-    font-size: 1.1rem;
+.lang-pills {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}
+.lang-pill {
+    background: #e0e7ff;
+    color: #4338ca;
+    padding: 6px 14px;
+    border-radius: 20px;
+    font-size: 0.85rem;
+    font-weight: 500;
 }
+.lang-arrow { color: #94a3b8; font-size: 1.2rem; }
 
-.feature-card {
+/* --- Document Area --- */
+.document-area {
     background: white;
     border-radius: 16px;
-    padding: 24px;
-    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
+    margin: 24px;
+    padding: 32px;
+    min-height: 400px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
     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;
+.output-text {
+    font-size: 1.75rem !important;
+    line-height: 1.6 !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;
+    min-height: 200px !important;
+    text-align: center;
+    padding: 40px 20px;
+}
+.placeholder-text {
+    color: #94a3b8;
+    font-style: italic;
 }
 
-.primary-btn {
-    background: linear-gradient(135deg, #4F46E5 0%, #6366f1 100%) !important;
+/* --- Floating Controls --- */
+.floating-bar {
+    position: fixed;
+    bottom: 24px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    background: white;
+    padding: 12px 24px;
+    border-radius: 40px;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
+    z-index: 100;
+}
+.fab-btn {
+    width: 56px !important;
+    height: 56px !important;
+    border-radius: 50% !important;
+    font-size: 1.5rem !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !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;
+    cursor: pointer !important;
+    transition: transform 0.2s, box-shadow 0.2s !important;
 }
-
-.primary-btn:hover {
-    transform: scale(1.02) !important;
-    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.4) !important;
+.fab-btn:hover {
+    transform: scale(1.1) !important;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
 }
-
-.language-selector {
-    background: white !important;
-    border-radius: 12px !important;
-    border: 2px solid #e2e8f0 !important;
+.fab-primary {
+    background: linear-gradient(135deg, #4F46E5, #6366f1) !important;
+    color: white !important;
+    width: 72px !important;
+    height: 72px !important;
 }
-
-.tab-nav button {
-    font-weight: 600 !important;
-    padding: 12px 24px !important;
+.fab-secondary {
+    background: #f1f5f9 !important;
+    color: #475569 !important;
 }
 
-.tab-nav button.selected {
-    background: linear-gradient(135deg, #4F46E5 0%, #6366f1 100%) !important;
-    color: white !important;
-}
+/* Hide Gradio footer */
+footer { display: none !important; }
 
-footer {
-    display: none !important;
+/* Input modals */
+.input-modal {
+    background: white;
+    border-radius: 16px;
+    padding: 24px;
+    margin: 0 24px 100px 24px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+    border: 1px solid #e2e8f0;
 }
 """
 
-# --- UI Functions ---
-def translate_message(text, source_lang, target_lang):
+# --- Translation Functions ---
+def translate_text(text, source_lang, target_lang):
     if not text:
-        return "", "", 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)
-    large_display = f"<div class='patient-display'>{result}</div>"
-    yield result, large_display, tts_file
+        return "Enter text above to translate..."
+    yield "⏳ Translating..."
+    t = load_translator()
+    result = t.translate_text(text, source_lang, target_lang)
+    yield result
 
 def translate_speech(audio, source_lang, target_lang):
     if audio is None:
-        return "", "", 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)
-    large_display = f"<div class='patient-display'>{result}</div>"
-    yield result, large_display, tts_file
+        return "Record audio using the microphone..."
+    yield "🎧 Processing speech..."
+    t = load_translator()
+    result = t.translate_audio(audio, source_lang, target_lang)
+    yield result
 
-def translate_leaflet(image, source_lang, target_lang):
+def translate_document(image, source_lang, target_lang):
     if image is None:
-        return "", "", 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)
-    large_display = f"<div class='patient-display'>{result}</div>"
-    yield result, large_display, tts_file
-
-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
+        return "Upload a document image..."
+    yield "📄 Scanning document..."
+    t = load_translator()
+    result = t.translate_image(image, source_lang, target_lang)
+    yield result
+
+def get_tts(text, lang):
+    if not text or text.startswith("⏳") or text.startswith("🎧") or text.startswith("📄"):
+        return None
+    t = load_translator()
+    return t.speak_text(text, lang)
 
 # --- 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():
-        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(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, 
-                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(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(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>
-    """)
+    # State for current mode
+    mode = gr.State("text")
+
+    # --- Header ---
+    with gr.Row(elem_classes="app-header"):
+        gr.HTML("<span class='app-title'>🌐 SIMBOTI</span>")
+        with gr.Row(elem_classes="lang-pills"):
+            source_lang = gr.Dropdown(LANGUAGES, value="English", show_label=False, container=False, scale=0, min_width=120)
+            gr.HTML("<span class='lang-arrow'>→</span>")
+            target_lang = gr.Dropdown(LANGUAGES, value="Polish", show_label=False, container=False, scale=0, min_width=120)
+
+    # --- Document Output Area ---
+    with gr.Column(elem_classes="document-area"):
+        output_display = gr.Textbox(
+            value="Your translation will appear here...",
+            show_label=False,
+            interactive=False,
+            lines=8,
+            elem_classes="output-text"
+        )
+        audio_output = gr.Audio(label="Listen", autoplay=True, visible=True)
+
+    # --- Input Section (Toggleable) ---
+    with gr.Column(elem_classes="input-modal", visible=True) as text_input_section:
+        text_input = gr.Textbox(label="Type your message", placeholder="e.g., Where does it hurt?", lines=2)
+        text_submit = gr.Button("Translate", variant="primary")
+
+    with gr.Column(elem_classes="input-modal", visible=False) as audio_input_section:
+        audio_input = gr.Audio(sources=["microphone"], type="filepath", label="🎤 Record")
+        audio_submit = gr.Button("Translate Speech", variant="primary")
+
+    with gr.Column(elem_classes="input-modal", visible=False) as doc_input_section:
+        doc_input = gr.Image(type="pil", label="📷 Upload Document")
+        doc_submit = gr.Button("Scan & Translate", variant="primary")
+
+    # --- Mode Switchers ---
+    with gr.Row(elem_classes="floating-bar"):
+        text_mode_btn = gr.Button("⌨️", elem_classes="fab-btn fab-secondary")
+        mic_mode_btn = gr.Button("🎤", elem_classes="fab-btn fab-primary")
+        doc_mode_btn = gr.Button("📎", elem_classes="fab-btn fab-secondary")
+
+    # --- Mode Toggle Logic ---
+    def show_text_mode():
+        return gr.update(visible=True), gr.update(visible=False), gr.update(visible=False)
+    def show_audio_mode():
+        return gr.update(visible=False), gr.update(visible=True), gr.update(visible=False)
+    def show_doc_mode():
+        return gr.update(visible=False), gr.update(visible=False), gr.update(visible=True)
+
+    text_mode_btn.click(show_text_mode, outputs=[text_input_section, audio_input_section, doc_input_section])
+    mic_mode_btn.click(show_audio_mode, outputs=[text_input_section, audio_input_section, doc_input_section])
+    doc_mode_btn.click(show_doc_mode, outputs=[text_input_section, audio_input_section, doc_input_section])
+
+    # --- Translation Triggers ---
+    text_submit.click(translate_text, inputs=[text_input, source_lang, target_lang], outputs=[output_display]).then(
+        get_tts, inputs=[output_display, target_lang], outputs=[audio_output]
+    )
+    audio_submit.click(translate_speech, inputs=[audio_input, source_lang, target_lang], outputs=[output_display]).then(
+        get_tts, inputs=[output_display, target_lang], outputs=[audio_output]
+    )
+    doc_submit.click(translate_document, inputs=[doc_input, source_lang, target_lang], outputs=[output_display]).then(
+        get_tts, inputs=[output_display, target_lang], outputs=[audio_output]
+    )
 
 # Launch
 if __name__ == "__main__":
-    app.launch(ssr_mode=False)
+    app.launch(ssr_mode=False)