Update app.py

app.py

@@ -301,6 +301,13 @@ class ClinicalOversightApp:
         logger.info("AI Agent Ready")
         return agent
 
+    def cleanup_resources(self):
+        """Clean up GPU memory and collect garbage"""
+        torch.cuda.empty_cache()
+        gc.collect()
+        if torch.distributed.is_initialized():
+            torch.distributed.destroy_process_group()
+
     def process_response_stream(self, prompt: str, history: List[dict]) -> Generator[dict, None, None]:
         """Stream the agent's response with proper formatting"""
         full_response = ""
@@ -398,8 +405,7 @@ Patient Record (Chunk {chunk_idx}/{len(chunks)}):
                     yield (chatbot_output, download_output, final_summary, progress_text)
                 
                 combined_response += f"--- Analysis for Chunk {chunk_idx} ---\n{chunk_response}\n"
-                torch.cuda.empty_cache()
-                gc.collect()
+                self.cleanup_resources()
 
             # Generate final outputs
             final_summary = self.text_processor.summarize_results(combined_response)
@@ -423,14 +429,23 @@ Patient Record (Chunk {chunk_idx}/{len(chunks)}):
             progress_text = {"visible": False}
             yield (chatbot_output, download_output, final_summary, progress_text)
         finally:
-            torch.cuda.empty_cache()
-            gc.collect()
+            self.cleanup_resources()
 
     def _update_progress(self, current: int, total: int, stage: str = "") -> Dict[str, Any]:
         """Format progress update for UI"""
         progress = f"{stage} - {current}/{total}" if stage else f"{current}/{total}"
         return {"value": progress, "visible": True}
 
+    def toggle_theme(self, theme_state: str) -> tuple[str, str]:
+        """Toggle between light and dark themes"""
+        new_theme = "dark" if theme_state == "light" else "light"
+        button_text = "☀️ Light Mode" if new_theme == "dark" else "🌙 Dark Mode"
+        return new_theme, button_text
+
+    def toggle_sidebar(self, sidebar_state: bool) -> bool:
+        """Toggle sidebar visibility"""
+        return not sidebar_state
+
     def create_interface(self):
         """Create Gradio interface with refined ChatGPT-like design"""
         css = """
@@ -442,7 +457,7 @@ Patient Record (Chunk {chunk_idx}/{len(chunks)}):
         .gradio-container {
             max-width: 800px;
             margin: 0 auto;
-            padding: 20px;
+            padding: 24px;
         }
         .chat-container {
             background: var(--chat-bg);
@@ -450,7 +465,7 @@ Patient Record (Chunk {chunk_idx}/{len(chunks)}):
             padding: 24px;
             height: 80vh;
             overflow-y: auto;
-            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
             position: relative;
         }
         .message {
@@ -459,13 +474,15 @@ Patient Record (Chunk {chunk_idx}/{len(chunks)}):
             border-radius: 12px;
             max-width: 80%;
             transition: all 0.3s ease;
+            background: var(--message-bg);
             position: relative;
         }
         .message:hover {
             transform: translateY(-2px);
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
         }
         .message.user {
-            background: #007bff;
+            background: linear-gradient(135deg, #007bff, #0056b3);
             color: white;
             margin-left: auto;
         }
@@ -482,11 +499,11 @@ Patient Record (Chunk {chunk_idx}/{len(chunks)}):
         .input-container {
             display: flex;
             align-items: center;
-            margin-top: 20px;
+            margin-top: 24px;
             background: var(--chat-bg);
             padding: 12px 24px;
             border-radius: 30px;
-            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
             position: sticky;
             bottom: 0;
         }
@@ -497,34 +514,52 @@ Patient Record (Chunk {chunk_idx}/{len(chunks)}):
             color: var(--text-color);
             outline: none;
             font-size: 1em;
+            placeholder-opacity: 0.6;
         }
         .send-btn {
-            background: #007bff;
+            background: linear-gradient(135deg, #007bff, #0056b3);
             color: white;
             border: none;
             border-radius: 20px;
             padding: 10px 20px;
             margin-left: 12px;
-            transition: background 0.2s ease;
+            transition: transform 0.2s ease;
         }
         .send-btn:hover {
-            background: #0056b3;
+            transform: scale(1.05);
+        }
+        .send-btn:active {
+            animation: pulse 0.3s ease;
         }
         .sidebar {
             background: var(--sidebar-bg);
             padding: 24px;
             border-radius: 16px;
-            margin-top: 20px;
-            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-            transition: transform 0.3s ease;
+            margin-top: 24px;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+            transition: transform 0.4s ease;
             transform: translateX(0);
-        }
-        .sidebar-hidden {
-            transform: translateX(100%);
-            position: absolute;
+            position: fixed;
             right: 0;
             top: 100px;
             width: 300px;
+            z-index: 1000;
+        }
+        .sidebar-hidden {
+            transform: translateX(100%);
+        }
+        .sidebar-backdrop {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0,0,0,0.3);
+            z-index: 999;
+            display: none;
+        }
+        .sidebar:not(.sidebar-hidden) ~ .sidebar-backdrop {
+            display: block;
         }
         .header {
             text-align: center;
@@ -532,9 +567,9 @@ Patient Record (Chunk {chunk_idx}/{len(chunks)}):
         }
         .theme-toggle {
             position: absolute;
-            top: 20px;
-            right: 20px;
-            background: #007bff;
+            top: 24px;
+            right: 24px;
+            background: linear-gradient(135deg, #007bff, #0056b3);
             color: white;
             border: none;
             border-radius: 20px;
@@ -549,11 +584,25 @@ Patient Record (Chunk {chunk_idx}/{len(chunks)}):
             left: 50%;
             transform: translateX(-50%);
             font-size: 1.2em;
-            animation: spin 1s linear infinite;
+            animation: pulse 1.5s ease infinite;
         }
-        @keyframes spin {
-            0% { transform: translateX(-50%) rotate(0deg); }
-            100% { transform: translateX(-50%) rotate(360deg); }
+        .typing-indicator {
+            display: none;
+            font-size: 0.9em;
+            color: var(--text-color);
+            opacity: 0.7;
+            margin: 12px;
+        }
+        .typing-indicator.active {
+            display: block;
+            animation: blink 1s step-end infinite;
+        }
+        @keyframes pulse {
+            0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; }
+            50% { transform: translateX(-50%) scale(1.2); opacity: 0.7; }
+        }
+        @keyframes blink {
+            50% { opacity: 0.3; }
         }
         :root {
             --background: #ffffff;
@@ -561,15 +610,14 @@ Patient Record (Chunk {chunk_idx}/{len(chunks)}):
             --chat-bg: #f9fafb;
             --message-bg: #e5e5ea;
             --sidebar-bg: #f1f3f5;
+            transition: background 0.3s ease, color 0.3s ease;
         }
-        @media (prefers-color-scheme: dark) {
-            :root {
-                --background: #1e2a44;
-                --text-color: #ffffff;
-                --chat-bg: #2d3b55;
-                --message-bg: #3e4c6a;
-                --sidebar-bg: #2a3650;
-            }
+        [data-theme="dark"] {
+            --background: #1e2a44;
+            --text-color: #ffffff;
+            --chat-bg: #2d3b55;
+            --message-bg: #3e4c6a;
+            --sidebar-bg: #2a3650;
         }
         @media (max-width: 600px) {
             .gradio-container {
@@ -589,6 +637,7 @@ Patient Record (Chunk {chunk_idx}/{len(chunks)}):
             }
             .sidebar {
                 width: 100%;
+                top: 80px;
             }
             .sidebar-hidden {
                 transform: translateX(100%);
@@ -597,16 +646,10 @@ Patient Record (Chunk {chunk_idx}/{len(chunks)}):
         """
         
         js = """
-        function toggleTheme() {
-            const root = document.documentElement;
-            const isDark = root.style.getPropertyValue('--background') === '#1e2a44';
-            root.style.setProperty('--background', isDark ? '#ffffff' : '#1e2a44');
-            root.style.setProperty('--text-color', isDark ? '#333333' : '#ffffff');
-            root.style.setProperty('--chat-bg', isDark ? '#f9fafb' : '#2d3b55');
-            root.style.setProperty('--message-bg', isDark ? '#e5e5ea' : '#3e4c6a');
-            root.style.setProperty('--sidebar-bg', isDark ? '#f1f3f5' : '#2a3650');
-            localStorage.setItem('theme', isDark ? 'light' : 'dark');
-            document.querySelector('.theme-toggle').innerHTML = isDark ? '🌙 Dark Mode' : '☀️ Light Mode';
+        function applyTheme(theme) {
+            document.documentElement.setAttribute('data-theme', theme);
+            localStorage.setItem('theme', theme);
+            document.querySelector('.theme-toggle').innerHTML = theme === 'dark' ? '☀️ Light Mode' : '🌙 Dark Mode';
         }
 
         function toggleSidebar() {
@@ -615,14 +658,16 @@ Patient Record (Chunk {chunk_idx}/{len(chunks)}):
         }
 
         document.addEventListener('DOMContentLoaded', () => {
-            const savedTheme = localStorage.getItem('theme');
-            if (savedTheme === 'dark') toggleTheme();
+            const savedTheme = localStorage.getItem('theme') || 'light';
+            applyTheme(savedTheme);
             document.querySelector('.sidebar').classList.add('sidebar-hidden');
-            document.querySelector('.theme-toggle').innerHTML = savedTheme === 'dark' ? '☀️ Light Mode' : '🌙 Dark Mode';
         });
         """
 
         with gr.Blocks(theme=gr.themes.Default(), css=css, js=js, title="Clinical Oversight Assistant") as app:
+            theme_state = gr.State(value="light")
+            sidebar_state = gr.State(value=False)
+            
             gr.HTML("""
             <div class='header'>
                 <h1 style='color: var(--text-color);'>🩺 Clinical Oversight Assistant</h1>
@@ -630,10 +675,10 @@ Patient Record (Chunk {chunk_idx}/{len(chunks)}):
                     AI-powered analysis of patient records for missed diagnoses
                 </p>
             </div>
+            <div class='sidebar-backdrop'></div>
             """)
-            gr.Button("🌙 Dark Mode", elem_classes="theme-toggle").click(
-                None, None, None, _js="toggleTheme"
-            )
+            
+            theme_button = gr.Button("🌙 Dark Mode", elem_classes="theme-toggle")
             
             with gr.Column(elem_classes="chat-container"):
                 chatbot = gr.Chatbot(
@@ -644,29 +689,34 @@ Patient Record (Chunk {chunk_idx}/{len(chunks)}):
                     elem_classes="chatbot",
                     render_markdown=True
                 )
-                gr.HTML("<div class='loading-spinner' style='display: none;'>⏳</div>")
+                gr.HTML("<div class='loading-spinner'>⏳</div>")
+                gr.HTML("<div class='typing-indicator'>Typing...</div>")
             
             with gr.Row():
-                gr.Button("📂 Tools", variant="secondary").click(
-                    None, None, None, _js="toggleSidebar"
-                )
+                tools_button = gr.Button("📂 Tools", variant="secondary")
             
             with gr.Column(elem_classes="sidebar"):
-                gr.Markdown("### 📎 Upload Records")
+                gr.Markdown("### 📎 Upload Records", elem_classes="tooltip", elem_id="upload-tooltip")
                 file_upload = gr.File(
                     file_types=[".pdf", ".csv", ".xls", ".xlsx"],
                     file_count="multiple",
-                    label="Patient Records"
+                    label="Patient Records",
+                    elem_classes="tooltip",
+                    elem_id="upload-input"
                 )
-                gr.Markdown("### 📝 Analysis Summary")
+                gr.Markdown("### 📝 Analysis Summary", elem_classes="tooltip", elem_id="summary-tooltip")
                 final_summary = gr.Markdown(
-                    "Analysis results will appear here..."
+                    "Analysis results will appear here...",
+                    elem_classes="tooltip",
+                    elem_id="summary-output"
                 )
-                gr.Markdown("### 📄 Full Report")
+                gr.Markdown("### 📄 Full Report", elem_classes="tooltip", elem_id="report-tooltip")
                 download_output = gr.File(
                     label="Download Report",
                     visible=False,
-                    interactive=False
+                    interactive=False,
+                    elem_classes="tooltip",
+                    elem_id="download-output"
                 )
             
             with gr.Row(elem_classes="input-container"):
@@ -686,50 +736,90 @@ Patient Record (Chunk {chunk_idx}/{len(chunks)}):
             progress_text = gr.Textbox(
                 label="Progress Status",
                 visible=False,
-                interactive=False
+                interactive=False,
+                elem_classes="progress-text"
             )
 
-            def show_loading_spinner():
-                return gr.update(value="<div class='loading-spinner'>⏳</div>", visible=True)
+            def show_loading(state: bool) -> dict:
+                return {
+                    "value": "<div class='loading-spinner'>⏳</div>" if state else "<div class='loading-spinner' style='display: none;'>⏳</div>",
+                    "visible": state
+                }
+
+            def show_typing(state: bool) -> dict:
+                return {
+                    "value": f"<div class='typing-indicator{' active' if state else ''}'>Typing...</div>",
+                    "visible": state
+                }
+
+            # Theme toggle handler
+            theme_button.click(
+                self.toggle_theme,
+                inputs=[theme_state],
+                outputs=[theme_state, theme_button],
+                _js="theme => applyTheme(theme)"
+            )
 
-            def hide_loading_spinner():
-                return gr.update(value="<div class='loading-spinner' style='display: none;'>⏳</div>", visible=False)
+            # Sidebar toggle handler
+            tools_button.click(
+                self.toggle_sidebar,
+                inputs=[sidebar_state],
+                outputs=[sidebar_state],
+                _js="() => toggleSidebar()"
+            )
 
+            # Analysis handlers
             send_btn.click(
-                show_loading_spinner,
-                outputs=[chatbot],
-                _js="() => { document.querySelector('.loading-spinner').style.display = 'block'; }"
+                show_loading,
+                inputs=[gr.State(value=True)],
+                outputs=[chatbot]
+            ).then(
+                show_typing,
+                inputs=[gr.State(value=True)],
+                outputs=[chatbot]
             ).then(
                 self.analyze,
                 inputs=[msg_input, chatbot, file_upload],
                 outputs=[chatbot, download_output, final_summary, progress_text],
                 show_progress="hidden"
             ).then(
-                hide_loading_spinner,
-                outputs=[chatbot],
-                _js="() => { document.querySelector('.loading-spinner').style.display = 'none'; }"
+                show_loading,
+                inputs=[gr.State(value=False)],
+                outputs=[chatbot]
+            ).then(
+                show_typing,
+                inputs=[gr.State(value=False)],
+                outputs=[chatbot]
             )
             
             msg_input.submit(
-                show_loading_spinner,
-                outputs=[chatbot],
-                _js="() => { document.querySelector('.loading-spinner').style.display = 'block'; }"
+                show_loading,
+                inputs=[gr.State(value=True)],
+                outputs=[chatbot]
+            ).then(
+                show_typing,
+                inputs=[gr.State(value=True)],
+                outputs=[chatbot]
             ).then(
                 self.analyze,
                 inputs=[msg_input, chatbot, file_upload],
                 outputs=[chatbot, download_output, final_summary, progress_text],
                 show_progress="hidden"
             ).then(
-                hide_loading_spinner,
-                outputs=[chatbot],
-                _js="() => { document.querySelector('.loading-spinner').style.display = 'none'; }"
+                show_loading,
+                inputs=[gr.State(value=False)],
+                outputs=[chatbot]
+            ).then(
+                show_typing,
+                inputs=[gr.State(value=False)],
+                outputs=[chatbot]
             )
             
             app.load(
                 lambda: [
-                    [], None, "", "", None, {"visible": False}
+                    [], None, "", "", None, {"visible": False}, "light", False, "🌙 Dark Mode"
                 ],
-                outputs=[chatbot, download_output, final_summary, msg_input, file_upload, progress_text],
+                outputs=[chatbot, download_output, final_summary, msg_input, file_upload, progress_text, theme_state, sidebar_state, theme_button],
                 queue=False
             )
 
@@ -737,6 +827,7 @@ Patient Record (Chunk {chunk_idx}/{len(chunks)}):
 
 # ==================== APPLICATION ENTRY POINT ====================
 if __name__ == "__main__":
+    app = None
     try:
         logger.info("Starting Clinical Oversight Assistant...")
         app = ClinicalOversightApp()
@@ -756,5 +847,5 @@ if __name__ == "__main__":
         logger.error(f"Application failed to start: {e}")
         raise
     finally:
-        if torch.distributed.is_initialized():
-            torch.distributed.destroy_process_group()
+        if app:
+            app.cleanup_resources()