gradio commit

app.py

@@ -65,25 +65,16 @@ def validate_audio_duration(audio_file):
 def start_recording():
     """Function yang dipanggil ketika tombol record ditekan"""
     print("🎙️ Recording started...")
-    return (
-        "🎙️ Sedang merekam... Klik stop untuk menyelesaikan",
-        gr.update(elem_classes=["record-audio-section", "recording-active"])  # Add red border
-    )
+    return "🔴 Recording..."
 
 def stop_recording(audio):
     """Function yang dipanggil ketika recording selesai"""
     if audio is not None:
         print("✅ Recording completed!")
-        return (
-            "✅ Recording selesai! Audio siap diproses",
-            gr.update(elem_classes=["record-audio-section", "recording-completed"])  # Add blue border
-        )
+        return "✅ Ready to process"
     else:
         print("❌ No audio recorded")
-        return (
-            "❌ Tidak ada audio yang direkam",
-            gr.update(elem_classes=["record-audio-section"])  # Reset to default
-        )
+        return "⚪ Ready to record"
 
 def test_microphone():
     """Function untuk test microphone"""
@@ -92,10 +83,7 @@ def test_microphone():
 
 def reset_recording_status():
     """Function untuk reset status recording"""
-    return (
-        "📱 Siap untuk merekam - Klik tombol record",
-        gr.update(elem_classes=["record-audio-section"])  # Reset to default
-    )
+    return "⚪ Ready to record"
 
 def handle_audio(audio_file):
     """Handle audio processing - returns (validation_message, transcript, soap, tags)"""
@@ -160,8 +148,6 @@ def toggle_inputs_with_refresh(choice):
         gr.update(visible=(choice == "Upload Audio")),  # validasi upload
         gr.update(visible=(choice == "Realtime Recording")),  # validasi realtime
         gr.update(visible=(choice == "Input Teks")),  # validasi teks
-        gr.update(visible=(choice == "Realtime Recording")),  # recording status group
-        gr.update(visible=(choice == "Realtime Recording"), elem_classes=["record-audio-section"]),  # record audio group with reset border
         gr.update(value=""),  # transcript
         gr.update(value=""),  # soap
         gr.update(value=""),  # tags
@@ -175,11 +161,10 @@ def clear_all_data():
         gr.update(value=""),    # validation_upload
         gr.update(value=""),    # validation_realtime
         gr.update(value=""),    # validation_text
-        gr.update(value="📱 Siap untuk merekam"),  # recording_status
+        gr.update(value="⚪ Ready to record"),  # recording_status
         gr.update(value=""),    # transcript_output
         gr.update(value=""),    # soap_output
         gr.update(value=""),    # tags_output
-        gr.update(elem_classes=["record-audio-section"]),  # reset record audio group border
     )
 
 def process_data(choice, audio_upload, audio_record, text_input):
@@ -228,409 +213,54 @@ def process_data(choice, audio_upload, audio_record, text_input):
         # Default case - clear all
         return ("", "", "", "", "", "")
 
-# Custom CSS untuk tampilan modern dengan alignment yang diperbaiki dan border dinamis
-modern_css = """
-<style>
-/* Background gradient yang modern */
-.gradio-container {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    min-height: 100vh;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-}
-
-/* Header styling */
-.main-header {
-    text-align: center;
-    padding: 2rem 0;
-    color: white;
-    margin-bottom: 2rem;
-}
-
-.main-header h1 {
-    font-size: 3rem;
-    font-weight: 700;
-    margin-bottom: 0.5rem;
-    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
-}
-
-.main-header p {
-    font-size: 1.2rem;
-    opacity: 0.9;
-    font-weight: 300;
-}
-
-/* Card styling */
-.input-card {
-    background: rgba(255, 255, 255, 0.95);
-    border-radius: 20px;
-    padding: 2rem;
-    margin: 0.8rem 0;
-    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
-    backdrop-filter: blur(10px);
-    border: 1px solid rgba(255,255,255,0.2);
-}
-
-.output-card {
-    background: rgba(255, 255, 255, 0.95);
-    border-radius: 20px;
-    padding: 2rem;
-    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
-    backdrop-filter: blur(10px);
-    border: 1px solid rgba(255,255,255,0.2);
-}
-
-/* Record audio section with padding - default state */
-.record-audio-section {
-    background: rgba(255, 255, 255, 0.95);
-    border-radius: 20px;
-    padding: 2rem;
-    margin: 0.8rem 0;
-    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
-    backdrop-filter: blur(10px);
-    border: 1px solid rgba(255,255,255,0.2);
-    transition: all 0.3s ease;
-}
-
-/* Recording active state - RED border */
-.record-audio-section.recording-active {
-    border: 3px solid #ff4757 !important;
-    box-shadow: 0 8px 32px rgba(255, 71, 87, 0.3), 0 0 20px rgba(255, 71, 87, 0.2) !important;
-    background: rgba(255, 245, 245, 0.98) !important;
-}
-
-/* Recording completed state - BLUE border */
-.record-audio-section.recording-completed {
-    border: 3px solid #3742fa !important;
-    box-shadow: 0 8px 32px rgba(55, 66, 250, 0.3), 0 0 20px rgba(55, 66, 250, 0.2) !important;
-    background: rgba(245, 245, 255, 0.98) !important;
-}
-
-/* Output header styling - aligned properly */
-.output-header {
-    text-align: left;
-    margin-bottom: 1.5rem;
-    padding-left: 0;
-}
-
-.output-header h3 {
-    font-size: 1.5rem;
-    font-weight: 600;
-    color: #2d3436;
-    margin: 0;
-    display: flex;
-    align-items: center;
-}
-
-/* Spacing adjustments */
-.input-section {
-    margin-bottom: 1rem;
-}
-
-.button-section {
-    margin-top: 0.5rem;
-    margin-bottom: 1rem;
-}
-
-/* Updated output section styling with proper alignment */
-.output-section {
-    background: rgba(255, 255, 255, 0.98);
-    border-radius: 15px;
-    padding: 1.5rem;
-    margin: 1rem 0 0 0;
-    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
-}
-
-/* Ensure all output components are aligned consistently */
-.output-container {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-}
-
-/* Button styling */
-.record-btn {
-    background: linear-gradient(45deg, #ff6b6b, #ee5a24);
-    border: none;
-    border-radius: 50px;
-    padding: 1rem 2rem;
-    color: white;
-    font-weight: 600;
-    font-size: 1.1rem;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    box-shadow: 0 4px 15px rgba(238, 90, 36, 0.4);
-}
-
-.record-btn:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 6px 20px rgba(238, 90, 36, 0.6);
-}
-
-.test-btn {
-    background: linear-gradient(45deg, #74b9ff, #0984e3);
-    border: none;
-    border-radius: 50px;
-    padding: 0.8rem 1.5rem;
-    color: white;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.3s ease;
-}
-
-.test-btn:hover {
-    transform: translateY(-1px);
-    box-shadow: 0 4px 15px rgba(116, 185, 255, 0.4);
-}
-
-.reset-btn {
-    background: linear-gradient(45deg, #a29bfe, #6c5ce7);
-    border: none;
-    border-radius: 15px;
-    padding: 0.4rem 1rem;
-    font-size: 0.8rem;
-    color: white;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    height: 2rem;
-    min-width: 80px;
-}
-
-.reset-btn:hover {
-    transform: translateY(-1px);
-    box-shadow: 0 2px 10px rgba(162, 155, 254, 0.4);
-}
-
-.process-btn {
-    background: linear-gradient(45deg, #00b894, #00cec9);
-    border: none;
-    border-radius: 50px;
-    padding: 1rem 2.5rem;
-    color: white;
-    font-weight: 600;
-    font-size: 1.2rem;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    box-shadow: 0 4px 15px rgba(0, 184, 148, 0.4);
-    margin: 1rem 0;
-}
-
-.process-btn:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 6px 20px rgba(0, 184, 148, 0.6);
-}
-
-/* Status indicator */
-.status-indicator {
-    background: rgba(255, 255, 255, 0.95);
-    border: 2px solid #74b9ff;
-    color: #2d3436;
-    padding: 2rem;
-    border-radius: 15px;
-    font-weight: 500;
-    margin: 1rem 0;
-    box-shadow: 0 4px 15px rgba(116, 185, 255, 0.2);
-}
-
-/* Input styling */
-.audio-input {
-    border: 2px dashed #ddd;
-    border-radius: 15px;
-    padding: 2rem;
-    text-align: center;
-    background: rgba(255,255,255,0.5);
-    transition: all 0.3s ease;
-}
-
-.audio-input:hover {
-    border-color: #74b9ff;
-    background: rgba(116, 185, 255, 0.1);
-}
-
-/* Ensure proper text alignment in outputs */
-.output-section textarea {
-    text-align: left;
-    vertical-align: top;
-    resize: vertical;
-}
-
-/* Responsive design */
-@media (max-width: 768px) {
-    .main-header h1 {
-        font-size: 2rem;
-    }
-    
-    .input-card, .output-card, .record-audio-section {
-        padding: 2rem;
-    }
-    
-    .record-btn, .process-btn {
-        width: 100%;
-        margin: 0.5rem 0;
-    }
-    
-    .reset-btn {
-        min-width: 70px;
-        font-size: 0.75rem;
-    }
-}
-
-/* Animation untuk elemen yang muncul */
-@keyframes fadeInUp {
-    from {
-        opacity: 0;
-        transform: translateY(30px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-.input-card, .output-card, .record-audio-section {
-    animation: fadeInUp 0.6s ease-out;
-}
-
-/* Microphone icon animation */
-@keyframes pulse {
-    0% {
-        transform: scale(1);
-    }
-    50% {
-        transform: scale(1.05);
-    }
-    100% {
-        transform: scale(1);
-    }
-}
-
-.recording-active {
-    animation: pulse 1s infinite;
-}
-
-/* Border glow animation for recording states */
-@keyframes redGlow {
-    0% {
-        box-shadow: 0 8px 32px rgba(255, 71, 87, 0.3), 0 0 20px rgba(255, 71, 87, 0.2);
-    }
-    50% {
-        box-shadow: 0 8px 32px rgba(255, 71, 87, 0.5), 0 0 30px rgba(255, 71, 87, 0.4);
-    }
-    100% {
-        box-shadow: 0 8px 32px rgba(255, 71, 87, 0.3), 0 0 20px rgba(255, 71, 87, 0.2);
-    }
-}
-
-@keyframes blueGlow {
-    0% {
-        box-shadow: 0 8px 32px rgba(55, 66, 250, 0.3), 0 0 20px rgba(55, 66, 250, 0.2);
-    }
-    50% {
-        box-shadow: 0 8px 32px rgba(55, 66, 250, 0.5), 0 0 30px rgba(55, 66, 250, 0.4);
-    }
-    100% {
-        box-shadow: 0 8px 32px rgba(55, 66, 250, 0.3), 0 0 20px rgba(55, 66, 250, 0.2);
-    }
-}
-
-.record-audio-section.recording-active {
-    animation: redGlow 2s infinite ease-in-out;
-}
-
-.record-audio-section.recording-completed {
-    animation: blueGlow 2s infinite ease-in-out;
-}
-</style>
-"""
-
-# Buat interface dengan theme modern
-with gr.Blocks(
-    title="🩺 SOAP AI - Modern Interface",
-    css=modern_css,
-    theme=gr.themes.Soft(
-        primary_hue="blue",
-        secondary_hue="cyan",
-        neutral_hue="slate",
-        font=gr.themes.GoogleFont("Inter")
-    )
-) as app:
+# Buat interface dengan tampilan default Gradio
+with gr.Blocks(title="🩺 SOAP AI") as app:
     
     # Header
-    gr.HTML("""
-    <div class="main-header">
-        <h1>🎙️ Realtime Recording</h1>
-        <p>High Quality Audio Recording with Smart Visual Feedback</p>
-    </div>
-    """)
+    gr.Markdown("# 🎙️ SOAP AI - Medical Transcription & Analysis")
+    gr.Markdown("Aplikasi untuk mengkonversi percakapan dokter-pasien menjadi format SOAP")
 
     with gr.Row():
         with gr.Column(scale=8):
             input_choice = gr.Dropdown(
                 choices=["Upload Audio", "Realtime Recording", "Input Teks"],
                 value="Realtime Recording",
-                label="🎯 Pilih Metode Input",
-                container=True,
-                elem_classes=["input-dropdown"]
+                label="🎯 Pilih Metode Input"
             )
         with gr.Column(scale=2):
-            clear_button = gr.Button(
-                "🗑️ Clear",
-                variant="secondary",
-                size="sm",
-                elem_classes=["reset-btn"]
-            )
+            clear_button = gr.Button("🗑️ Clear", variant="secondary")
 
     # Input Section - Upload Audio
-    with gr.Group(elem_classes=["input-card"], visible=False) as upload_audio_group:
-        gr.HTML("<h3>📁 Upload Audio File</h3>")
-        
+    with gr.Group(visible=False) as upload_audio_group:
+        gr.Markdown("### 📁 Upload Audio File")
         audio_upload = gr.Audio(
             sources=["upload"], 
             label="📁 Upload File Audio",
-            type="filepath", 
-            show_download_button=False,
-            show_share_button=False,
-            interactive=True,
-            elem_classes=["audio-input"]
+            type="filepath"
         )
 
-    # Input Section - Record Audio with proper padding and dynamic border
-    record_audio_group = gr.Group(elem_classes=["record-audio-section"], visible=True)
-    with record_audio_group:
-        gr.HTML("<h3>🎵 Record Your Audio</h3>")
-        
+    # Input Section - Record Audio
+    with gr.Group(visible=True) as record_audio_group:
+        gr.Markdown("### 🎵 Record Your Audio")
+        recording_status = gr.Textbox(
+            value="⚪ Ready to record",
+            interactive=False,
+            show_label=False,
+            lines=1
+        )
         audio_record = gr.Audio(
             sources=["microphone"], 
             label="🎙️ Realtime Recording",
-            type="filepath", 
-            show_download_button=True,
-            show_share_button=False,
-            interactive=True,
-            streaming=False,
-            elem_classes=["audio-input"]
+            type="filepath"
         )
 
-    # Input Section - Text Input (without record audio section)
-    with gr.Group(elem_classes=["input-card"], visible=False) as text_input_group:
-        gr.HTML("<h3>📝 Input Teks</h3>")
-        
+    # Input Section - Text Input
+    with gr.Group(visible=False) as text_input_group:
+        gr.Markdown("### 📝 Input Teks")
         text_input = gr.Textbox(
             label="📝 Masukkan Percakapan Dokter-Pasien", 
             lines=6, 
-            placeholder="Ketik percakapan antara dokter dan pasien di sini...",
-            elem_classes=["text-input"]
-        )
-
-    # Status Section - hanya untuk Realtime Recording
-    recording_status_group = gr.Group(elem_classes=["status-indicator"], visible=True)
-    with recording_status_group:
-        gr.HTML("<h4>📊 Status Recording</h4>")
-        recording_status = gr.Textbox(
-            value="Siap untuk merekam",
-            interactive=False,
-            show_label=False,
-            lines=1,
-            elem_classes=["status-display"]
+            placeholder="Ketik percakapan antara dokter dan pasien di sini..."
         )
 
     # Validation Section
@@ -638,79 +268,54 @@ with gr.Blocks(
         label="⚠️ Validasi Upload Audio", 
         lines=1, 
         interactive=False, 
-        visible=False,
-        elem_classes=["validation-msg"]
+        visible=False
     )
     validation_realtime = gr.Textbox(
         label="⚠️ Validasi Realtime Recording", 
         lines=1, 
         interactive=False, 
-        visible=True,
-        elem_classes=["validation-msg"]
+        visible=True
     )
     validation_text = gr.Textbox(
         label="⚠️ Validasi Input Teks", 
         lines=1, 
         interactive=False, 
-        visible=False,
-        elem_classes=["validation-msg"]
+        visible=False
     )
 
     # Process Button
-    process_button = gr.Button(
-        "🚀 Proses ke SOAP",
-        variant="primary",
-        size="lg",
-        elem_classes=["process-btn"]
-    )
+    process_button = gr.Button("🚀 Proses ke SOAP", variant="primary", size="lg")
 
-    # Output Section with proper alignment - Fixed Layout
-    with gr.Group(elem_classes=["output-card"]):
-        # Header aligned properly
-        with gr.Row():
-            with gr.Column():
-                gr.HTML('<div class="output-header"><h3>📋 Hasil Analisis</h3></div>')
-        
-        # All outputs in aligned container
-        with gr.Column(elem_classes=["output-container"]):
-            transcript_output = gr.Textbox(
-                label="📝 Hasil Transkripsi", 
-                lines=4,
-                elem_classes=["output-section"]
-            )
-            
-            soap_output = gr.Textbox(
-                label="📋 Ringkasan SOAP", 
-                lines=8,
-                elem_classes=["output-section"]
-            )
-            
-            tags_output = gr.Textbox(
-                label="🏷️ Medical Tags", 
-                lines=6,
-                elem_classes=["output-section"]
-            )
-
-    # Footer
-    gr.HTML("""
-    <div style="text-align: center; padding: 2rem; color: rgba(255,255,255,0.7);">
-        <p>Use via API 🔥 • Built with Gradio 🚀</p>
-    </div>
-    """)
+    # Output Section
+    gr.Markdown("## 📋 Hasil Analisis")
+    
+    transcript_output = gr.Textbox(
+        label="📝 Hasil Transkripsi", 
+        lines=4
+    )
+    
+    soap_output = gr.Textbox(
+        label="📋 Ringkasan SOAP", 
+        lines=8
+    )
+    
+    tags_output = gr.Textbox(
+        label="🏷️ Medical Tags", 
+        lines=6
+    )
 
     # Event handlers untuk toggle inputs
     input_choice.change(
         fn=lambda choice: (
-            gr.update(visible=(choice == "Upload Audio")),   # upload_audio_group
-            gr.update(visible=(choice == "Realtime Recording"), elem_classes=["record-audio-section"]),  # record_audio_group with reset border
-            gr.update(visible=(choice == "Input Teks")),  # text_input_group
-            gr.update(visible=(choice == "Upload Audio")),  # validation_upload
-            gr.update(visible=(choice == "Realtime Recording")),  # validation_realtime
-            gr.update(visible=(choice == "Input Teks")),  # validation_text
-            gr.update(visible=(choice == "Realtime Recording")),  # recording_status_group
-            gr.update(value=""),  # transcript
-            gr.update(value=""),  # soap
-            gr.update(value=""),  # tags
+            gr.update(visible=(choice == "Upload Audio")),
+            gr.update(visible=(choice == "Realtime Recording")),
+            gr.update(visible=(choice == "Input Teks")),
+            gr.update(visible=(choice == "Upload Audio")),
+            gr.update(visible=(choice == "Realtime Recording")),
+            gr.update(visible=(choice == "Input Teks")),
+            gr.update(value=""),
+            gr.update(value=""),
+            gr.update(value="")
         ),
         inputs=input_choice,
         outputs=[
@@ -720,23 +325,22 @@ with gr.Blocks(
             validation_upload,
             validation_realtime,
             validation_text,
-            recording_status_group,
             transcript_output,
             soap_output,
-            tags_output,
-        ],
+            tags_output
+        ]
     )
 
-    # Event handlers untuk recording dengan border dynamics
+    # Event handlers untuk recording
     audio_record.start_recording(
         fn=start_recording,
-        outputs=[recording_status, record_audio_group]
+        outputs=recording_status
     )
     
     audio_record.stop_recording(
         fn=stop_recording,
         inputs=audio_record,
-        outputs=[recording_status, record_audio_group]
+        outputs=recording_status
     )
 
     clear_button.click(
@@ -751,9 +355,8 @@ with gr.Blocks(
             recording_status,
             transcript_output,
             soap_output,
-            tags_output,
-            record_audio_group,  # Reset border when clearing
-        ],
+            tags_output
+        ]
     )
 
     process_button.click(
@@ -765,14 +368,14 @@ with gr.Blocks(
             validation_text,
             transcript_output,
             soap_output,
-            tags_output,
+            tags_output
         ],
-        show_progress="minimal",
+        show_progress="minimal"
     )
 
 # Startup information
 if __name__ == "__main__":
-    print("🚀 Starting Enhanced SOAP AI Application...")
+    print("🚀 Starting SOAP AI Application...")
     print("📋 Setup Instructions:")
     print("1. Install dependencies: pip install gradio pydub nltk requests python-dotenv")
     print("2. Make sure wordlist.lst file is available")
@@ -781,7 +384,6 @@ if __name__ == "__main__":
     
     print("\n🌐 Application will start at: http://localhost:7860")
     print("🎙️ Make sure to allow microphone access when using Realtime Recording!")
-    print("📊 Visual feedback provided through dynamic border colors during recording")
     print()
 
 app.launch()