last commit

app.py

@@ -65,16 +65,25 @@ 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"
+    return (
+        "🎙️ Sedang merekam... Klik stop untuk menyelesaikan",
+        gr.update(elem_classes=["record-audio-section", "recording-active"])  # Add red border
+    )
 
 def stop_recording(audio):
     """Function yang dipanggil ketika recording selesai"""
     if audio is not None:
         print("✅ Recording completed!")
-        return "✅ Recording selesai! Audio siap diproses"
+        return (
+            "✅ Recording selesai! Audio siap diproses",
+            gr.update(elem_classes=["record-audio-section", "recording-completed"])  # Add blue border
+        )
     else:
         print("❌ No audio recorded")
-        return "❌ Tidak ada audio yang direkam"
+        return (
+            "❌ Tidak ada audio yang direkam",
+            gr.update(elem_classes=["record-audio-section"])  # Reset to default
+        )
 
 def test_microphone():
     """Function untuk test microphone"""
@@ -83,7 +92,10 @@ def test_microphone():
 
 def reset_recording_status():
     """Function untuk reset status recording"""
-    return "📱 Siap untuk merekam - Klik tombol record"
+    return (
+        "📱 Siap untuk merekam - Klik tombol record",
+        gr.update(elem_classes=["record-audio-section"])  # Reset to default
+    )
 
 def handle_audio(audio_file):
     """Handle audio processing - returns (validation_message, transcript, soap, tags)"""
@@ -149,7 +161,7 @@ def toggle_inputs_with_refresh(choice):
         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")),  # record audio 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
@@ -167,6 +179,7 @@ def clear_all_data():
         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):
@@ -215,7 +228,7 @@ def process_data(choice, audio_upload, audio_record, text_input):
         # Default case - clear all
         return ("", "", "", "", "", "")
 
-# Custom CSS untuk tampilan modern dengan alignment yang diperbaiki
+# Custom CSS untuk tampilan modern dengan alignment yang diperbaiki dan border dinamis
 modern_css = """
 <style>
 /* Background gradient yang modern */
@@ -266,7 +279,7 @@ modern_css = """
     border: 1px solid rgba(255,255,255,0.2);
 }
 
-/* Record audio section with padding */
+/* Record audio section with padding - default state */
 .record-audio-section {
     background: rgba(255, 255, 255, 0.95);
     border-radius: 20px;
@@ -275,6 +288,21 @@ modern_css = """
     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 */
@@ -479,6 +507,39 @@ modern_css = """
 .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>
 """
 
@@ -498,7 +559,7 @@ with gr.Blocks(
     gr.HTML("""
     <div class="main-header">
         <h1>🎙️ Realtime Recording</h1>
-        <p>High Quality Audio Recording</p>
+        <p>High Quality Audio Recording with Smart Visual Feedback</p>
     </div>
     """)
 
@@ -533,8 +594,9 @@ with gr.Blocks(
             elem_classes=["audio-input"]
         )
 
-    # Input Section - Record Audio with proper padding
-    with gr.Group(elem_classes=["record-audio-section"], visible=True) as record_audio_group:
+    # 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>")
         
         audio_record = gr.Audio(
@@ -640,7 +702,7 @@ with gr.Blocks(
     input_choice.change(
         fn=lambda choice: (
             gr.update(visible=(choice == "Upload Audio")),   # upload_audio_group
-            gr.update(visible=(choice == "Realtime Recording")),  # record_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
@@ -665,16 +727,16 @@ with gr.Blocks(
         ],
     )
 
-    # Event handlers untuk recording
+    # Event handlers untuk recording dengan border dynamics
     audio_record.start_recording(
         fn=start_recording,
-        outputs=recording_status
+        outputs=[recording_status, record_audio_group]
     )
     
     audio_record.stop_recording(
         fn=stop_recording,
         inputs=audio_record,
-        outputs=recording_status
+        outputs=[recording_status, record_audio_group]
     )
 
     clear_button.click(
@@ -690,6 +752,7 @@ with gr.Blocks(
             transcript_output,
             soap_output,
             tags_output,
+            record_audio_group,  # Reset border when clearing
         ],
     )
 
@@ -709,7 +772,7 @@ with gr.Blocks(
 
 # Startup information
 if __name__ == "__main__":
-    print("🚀 Starting Enhanced SOAP AI Application with Modern UI...")
+    print("🚀 Starting Enhanced 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")
@@ -718,7 +781,7 @@ if __name__ == "__main__":
     
     print("\n🌐 Application will start at: http://localhost:7860")
     print("🎙️ Make sure to allow microphone access when using Realtime Recording!")
-    print("✨ Modern UI with clean recording status!")
+    print("📊 Visual feedback provided through dynamic border colors during recording")
     print()
 
 app.launch()