Fix: Separate CSS, add prompt box, pastel white theme, fix endless scrolling

app.py

@@ -1,6 +1,7 @@
 import gradio as gr
 import requests
 import json
+import os
 
 # ==================== API Functions ====================
 
@@ -65,12 +66,18 @@ def generate_empty_response():
     return """
 ### 💬 Welcome to ICD-10 & CPT Coding Assistant
 
-Please enter provider notes in the chat box and click **Send** to analyze.
+Please enter provider notes in the text box below and click **Send** to analyze.
 
 **Tips:**
 - Provide detailed clinical documentation
 - Include symptoms, diagnoses, and procedures
 - Be specific about treatments and prescriptions
+
+**How to use:**
+1. Select an example from the sidebar, or
+2. Type your own clinical notes below
+3. Click the **Send** button
+4. Review the ICD-10 and CPT codes generated
 """
 
 def format_complete_response(result):
@@ -125,286 +132,21 @@ def load_example(example_name):
     """Load example provider notes"""
     return EXAMPLES.get(example_name, "")
 
-# ==================== Custom CSS ====================
-
-custom_css = """
-/* Global Styles */
-.gradio-container {
-    max-width: 100% !important;
-    padding: 0 !important;
-    background: linear-gradient(135deg, #0d1117 0%, #1a1f2e 100%) !important;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
-}
-
-/* Header Styling */
-.header-container {
-    background: linear-gradient(90deg, #00d4aa 0%, #00a896 100%);
-    padding: 25px;
-    text-align: center;
-    border-radius: 0;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
-    margin-bottom: 0;
-}
-
-.header-container h1 {
-    color: white;
-    font-size: 2rem;
-    font-weight: 700;
-    margin: 0;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
-}
-
-.header-container p {
-    color: #e0f7f4;
-    font-size: 1rem;
-    margin: 8px 0 0 0;
-}
-
-/* Sidebar Styling */
-.sidebar {
-    background: #1a1f2e !important;
-    border-right: 1px solid #00d4aa !important;
-    padding: 20px !important;
-    height: 100vh !important;
-    overflow-y: auto !important;
-}
-
-.sidebar-title {
-    color: #00d4aa !important;
-    font-size: 1.3rem !important;
-    font-weight: 600 !important;
-    margin-bottom: 20px !important;
-    padding-bottom: 10px !important;
-    border-bottom: 2px solid #00d4aa !important;
-}
-
-/* Example Buttons */
-.example-btn {
-    background: linear-gradient(135deg, #00d4aa 0%, #00a896 100%) !important;
-    color: white !important;
-    border: none !important;
-    border-radius: 8px !important;
-    padding: 12px 16px !important;
-    margin: 8px 0 !important;
-    font-weight: 500 !important;
-    cursor: pointer !important;
-    transition: all 0.3s ease !important;
-    width: 100% !important;
-    text-align: left !important;
-}
-
-.example-btn:hover {
-    background: linear-gradient(135deg, #00ffcc 0%, #00d4aa 100%) !important;
-    transform: translateX(5px) !important;
-    box-shadow: 0 4px 12px rgba(0, 212, 170, 0.4) !important;
-}
-
-/* Chat Container */
-.chat-container {
-    background: #0d1117 !important;
-    border-radius: 12px !important;
-    padding: 20px !important;
-    height: calc(100vh - 200px) !important;
-    display: flex !important;
-    flex-direction: column !important;
-}
-
-/* Input Area */
-.input-row {
-    background: #1a1f2e !important;
-    border: 2px solid #00d4aa !important;
-    border-radius: 12px !important;
-    padding: 15px !important;
-    margin-top: 10px !important;
-}
-
-.input-row textarea {
-    background: #0d1117 !important;
-    color: #e6e6e6 !important;
-    border: 1px solid #2d3748 !important;
-    border-radius: 8px !important;
-    font-size: 1rem !important;
-    padding: 12px !important;
-}
-
-.input-row textarea:focus {
-    border-color: #00d4aa !important;
-    outline: none !important;
-    box-shadow: 0 0 0 3px rgba(0, 212, 170, 0.1) !important;
-}
-
-/* Send Button */
-.send-button {
-    background: linear-gradient(135deg, #00d4aa 0%, #00a896 100%) !important;
-    color: white !important;
-    border: none !important;
-    border-radius: 8px !important;
-    padding: 12px 32px !important;
-    font-size: 1rem !important;
-    font-weight: 600 !important;
-    cursor: pointer !important;
-    transition: all 0.3s ease !important;
-    margin-top: 10px !important;
-}
-
-.send-button:hover {
-    background: linear-gradient(135deg, #00ffcc 0%, #00d4aa 100%) !important;
-    box-shadow: 0 6px 20px rgba(0, 212, 170, 0.4) !important;
-    transform: translateY(-2px) !important;
-}
-
-/* Clear Button */
-.clear-button {
-    background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%) !important;
-    color: white !important;
-    border: 1px solid #4a5568 !important;
-    border-radius: 8px !important;
-    padding: 12px 32px !important;
-    font-size: 1rem !important;
-    font-weight: 600 !important;
-    cursor: pointer !important;
-    transition: all 0.3s ease !important;
-    margin-top: 10px !important;
-}
-
-.clear-button:hover {
-    background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%) !important;
-    border-color: #718096 !important;
-    transform: translateY(-2px) !important;
-}
+# ==================== Load External CSS ====================
 
-/* Output Area */
-.output-container {
-    background: #1a1f2e !important;
-    border: 1px solid #2d3748 !important;
-    border-radius: 12px !important;
-    padding: 20px !important;
-    color: #e6e6e6 !important;
-    overflow-y: auto !important;
-    flex-grow: 1 !important;
-    margin-bottom: 15px !important;
-}
-
-.output-container h3 {
-    color: #00d4aa !important;
-    border-bottom: 2px solid #00d4aa !important;
-    padding-bottom: 8px !important;
-    margin-top: 20px !important;
-}
-
-.output-container strong {
-    color: #00ffcc !important;
-}
-
-.output-container hr {
-    border: none !important;
-    border-top: 1px solid #2d3748 !important;
-    margin: 20px 0 !important;
-}
-
-/* API Config Section */
-.api-config {
-    background: #1a1f2e !important;
-    border: 1px solid #2d3748 !important;
-    border-radius: 8px !important;
-    padding: 15px !important;
-    margin-bottom: 15px !important;
-}
-
-.api-config input {
-    background: #0d1117 !important;
-    color: #e6e6e6 !important;
-    border: 1px solid #2d3748 !important;
-    border-radius: 6px !important;
-    padding: 10px !important;
-}
-
-.api-config input:focus {
-    border-color: #00d4aa !important;
-    outline: none !important;
-}
-
-/* Check API Button */
-.check-api-button {
-    background: linear-gradient(135deg, #00a896 0%, #008577 100%) !important;
-    color: white !important;
-    border: none !important;
-    border-radius: 6px !important;
-    padding: 10px 20px !important;
-    font-weight: 500 !important;
-    cursor: pointer !important;
-    transition: all 0.3s ease !important;
-}
-
-.check-api-button:hover {
-    background: linear-gradient(135deg, #00d4aa 0%, #00a896 100%) !important;
-    box-shadow: 0 4px 12px rgba(0, 168, 150, 0.4) !important;
-}
-
-/* Footer */
-.footer {
-    text-align: center;
-    padding: 20px;
-    color: #718096;
-    font-size: 0.9rem;
-    background: #0d1117;
-    border-top: 1px solid #2d3748;
-    margin-top: 20px;
-}
-
-.footer strong {
-    color: #00d4aa;
-}
-
-/* Scrollbar Styling */
-::-webkit-scrollbar {
-    width: 8px;
-}
-
-::-webkit-scrollbar-track {
-    background: #0d1117;
-}
-
-::-webkit-scrollbar-thumb {
-    background: #00d4aa;
-    border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background: #00ffcc;
-}
-
-/* Accordion Styling */
-.accordion {
-    background: #1a1f2e !important;
-    border: 1px solid #2d3748 !important;
-    border-radius: 8px !important;
-}
-
-.accordion summary {
-    color: #00d4aa !important;
-    font-weight: 600 !important;
-    padding: 12px !important;
-    cursor: pointer !important;
-}
-
-/* Responsive */
-@media (max-width: 768px) {
-    .header-container h1 {
-        font-size: 1.5rem;
-    }
-    
-    .sidebar {
-        height: auto !important;
-        border-right: none !important;
-        border-bottom: 1px solid #00d4aa !important;
-    }
-}
-"""
+def load_css():
+    """Load external CSS file"""
+    css_path = os.path.join(os.path.dirname(__file__), "assets", "styles.css")
+    try:
+        with open(css_path, "r", encoding="utf-8") as f:
+            return f.read()
+    except FileNotFoundError:
+        print("Warning: styles.css not found")
+        return ""
 
 # ==================== Gradio Interface ====================
 
-with gr.Blocks(css=custom_css, theme=gr.themes.Soft(), title="ICD-10 & CPT Coding Assistant") as demo:
+with gr.Blocks(css=load_css(), theme=gr.themes.Soft(), title="ICD-10 & CPT Coding Assistant") as demo:
     
     # Hidden state for API URL
     api_url_state = gr.State(value="https://Distopia22-icd-cpt-coding-api.hf.space")
@@ -417,21 +159,21 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft(), title="ICD-10 & CPT Codin
         </div>
     """)
     
-    # Main Layout
-    with gr.Row():
-        # Left Sidebar
-        with gr.Column(scale=1, elem_classes="sidebar"):
+    # Main Layout Container
+    with gr.Row(elem_classes="main-container"):
+        
+        # ==================== Left Sidebar ====================
+        with gr.Column(scale=1, min_width=280, elem_classes="sidebar"):
             gr.HTML('<div class="sidebar-title">📚 Example Cases</div>')
             
-            # Example buttons
+            # Example buttons with event handlers
+            example_buttons = {}
             for example_name in EXAMPLES.keys():
-                gr.Button(
+                btn = gr.Button(
                     f"📄 {example_name}",
                     elem_classes="example-btn"
-                ).click(
-                    fn=lambda name=example_name: load_example(name),
-                    outputs=gr.Textbox(elem_id="provider_notes_input", visible=False)
                 )
+                example_buttons[example_name] = btn
             
             gr.Markdown("---")
             
@@ -446,43 +188,31 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft(), title="ICD-10 & CPT Codin
                 
                 check_api_btn = gr.Button("🔍 Check API Status", elem_classes="check-api-button", size="sm")
                 api_status_output = gr.Textbox(label="Status", lines=3, interactive=False)
-                
-                check_api_btn.click(
-                    fn=check_api_health,
-                    inputs=[api_url_input],
-                    outputs=[api_status_output]
-                )
-                
-                # Update state when URL changes
-                api_url_input.change(
-                    fn=lambda x: x,
-                    inputs=[api_url_input],
-                    outputs=[api_url_state]
-                )
         
-        # Right Chat Area
+        # ==================== Right Chat Area ====================
         with gr.Column(scale=3, elem_classes="chat-container"):
-            # Output/Chat History
+            
+            # Output/Response Area
             output_area = gr.Markdown(
                 value=generate_empty_response(),
-                elem_classes="output-container",
-                label="Analysis Results"
+                elem_classes="output-area",
+                label=""
             )
             
-            # Input Area
-            with gr.Row(elem_classes="input-row"):
-                with gr.Column(scale=5):
+            # Input Area (Prompt Box)
+            with gr.Group(elem_classes="input-container"):
+                with gr.Row():
                     provider_notes_input = gr.Textbox(
                         label="",
                         placeholder="Enter clinical provider notes here...",
-                        lines=4,
-                        max_lines=8,
-                        elem_id="provider_notes_input"
+                        lines=3,
+                        max_lines=5,
+                        show_label=False
                     )
                 
-                with gr.Column(scale=1):
-                    send_btn = gr.Button("🚀 Send", elem_classes="send-button", size="lg")
-                    clear_btn = gr.Button("🗑️ Clear", elem_classes="clear-button", size="lg")
+                with gr.Row():
+                    send_btn = gr.Button("🚀 Send", elem_classes="send-button", size="sm")
+                    clear_btn = gr.Button("🗑️ Clear", elem_classes="clear-button", size="sm")
     
     # Footer
     gr.HTML("""
@@ -494,6 +224,13 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft(), title="ICD-10 & CPT Codin
     
     # ==================== Event Handlers ====================
     
+    # Example button clicks
+    for example_name, btn in example_buttons.items():
+        btn.click(
+            fn=lambda name=example_name: load_example(name),
+            outputs=[provider_notes_input]
+        )
+    
     # Send button - Analyze notes
     send_btn.click(
         fn=analyze_provider_notes,
@@ -507,13 +244,19 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft(), title="ICD-10 & CPT Codin
         outputs=[provider_notes_input, output_area]
     )
     
-    # Example buttons - Load example into input
-    for example_name in EXAMPLES.keys():
-        example_btn = gr.Button(f"📄 {example_name}", visible=False)
-        example_btn.click(
-            fn=lambda name=example_name: load_example(name),
-            outputs=[provider_notes_input]
-        )
+    # Check API Health
+    check_api_btn.click(
+        fn=check_api_health,
+        inputs=[api_url_input],
+        outputs=[api_status_output]
+    )
+    
+    # Update API URL state when changed
+    api_url_input.change(
+        fn=lambda x: x,
+        inputs=[api_url_input],
+        outputs=[api_url_state]
+    )
 
 # Launch the app
 if __name__ == "__main__":

assets/styles.css

@@ -0,0 +1,325 @@
+/* ==================== Global Styles ==================== */
+.gradio-container {
+    max-width: 100% !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%) !important;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
+    height: 100vh !important;
+    overflow: hidden !important;
+}
+
+/* ==================== Header Styling ==================== */
+.header-container {
+    background: linear-gradient(90deg, #00d4aa 0%, #00a896 100%);
+    padding: 20px 25px;
+    text-align: center;
+    border-radius: 0;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    margin: 0;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+}
+
+.header-container h1 {
+    color: white;
+    font-size: 1.8rem;
+    font-weight: 700;
+    margin: 0;
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.header-container p {
+    color: #e0f7f4;
+    font-size: 0.95rem;
+    margin: 5px 0 0 0;
+}
+
+/* ==================== Layout Container ==================== */
+.main-container {
+    display: flex;
+    height: calc(100vh - 100px);
+    overflow: hidden;
+}
+
+/* ==================== Left Sidebar ==================== */
+.sidebar {
+    background: #ffffff !important;
+    border-right: 2px solid #e0e7ef !important;
+    padding: 20px !important;
+    width: 280px !important;
+    min-width: 280px !important;
+    height: 100% !important;
+    overflow-y: auto !important;
+    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05) !important;
+}
+
+.sidebar-title {
+    color: #00a896 !important;
+    font-size: 1.2rem !important;
+    font-weight: 600 !important;
+    margin-bottom: 15px !important;
+    padding-bottom: 10px !important;
+    border-bottom: 2px solid #00d4aa !important;
+}
+
+/* ==================== Example Buttons ==================== */
+.example-btn {
+    background: linear-gradient(135deg, #00d4aa 0%, #00a896 100%) !important;
+    color: white !important;
+    border: none !important;
+    border-radius: 10px !important;
+    padding: 12px 15px !important;
+    margin: 6px 0 !important;
+    font-weight: 500 !important;
+    font-size: 0.9rem !important;
+    cursor: pointer !important;
+    transition: all 0.3s ease !important;
+    width: 100% !important;
+    text-align: left !important;
+    box-shadow: 0 2px 5px rgba(0, 212, 170, 0.2) !important;
+}
+
+.example-btn:hover {
+    background: linear-gradient(135deg, #00ffcc 0%, #00d4aa 100%) !important;
+    transform: translateX(5px) !important;
+    box-shadow: 0 4px 12px rgba(0, 212, 170, 0.3) !important;
+}
+
+/* ==================== Right Chat Area ==================== */
+.chat-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    background: #fafbfc !important;
+    padding: 20px !important;
+    height: 100% !important;
+    overflow: hidden !important;
+}
+
+/* ==================== Output/Response Area ==================== */
+.output-area {
+    flex: 1;
+    background: white !important;
+    border: 1px solid #e0e7ef !important;
+    border-radius: 12px !important;
+    padding: 20px !important;
+    margin-bottom: 15px !important;
+    overflow-y: auto !important;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
+}
+
+.output-area h3 {
+    color: #00a896 !important;
+    border-bottom: 2px solid #00d4aa !important;
+    padding-bottom: 8px !important;
+    margin-top: 15px !important;
+    margin-bottom: 12px !important;
+}
+
+.output-area strong {
+    color: #00a896 !important;
+}
+
+.output-area hr {
+    border: none !important;
+    border-top: 1px solid #e0e7ef !important;
+    margin: 15px 0 !important;
+}
+
+.output-area p {
+    color: #2d3748 !important;
+    line-height: 1.6 !important;
+    margin: 8px 0 !important;
+}
+
+/* ==================== Input Area (Prompt Box) ==================== */
+.input-container {
+    background: white !important;
+    border: 2px solid #00d4aa !important;
+    border-radius: 12px !important;
+    padding: 15px !important;
+    box-shadow: 0 4px 12px rgba(0, 212, 170, 0.15) !important;
+}
+
+.input-container textarea {
+    background: #fafbfc !important;
+    color: #2d3748 !important;
+    border: 1px solid #e0e7ef !important;
+    border-radius: 8px !important;
+    font-size: 0.95rem !important;
+    padding: 12px !important;
+    resize: none !important;
+}
+
+.input-container textarea:focus {
+    border-color: #00d4aa !important;
+    outline: none !important;
+    box-shadow: 0 0 0 3px rgba(0, 212, 170, 0.1) !important;
+    background: white !important;
+}
+
+/* ==================== Button Styling ==================== */
+.send-button {
+    background: linear-gradient(135deg, #00d4aa 0%, #00a896 100%) !important;
+    color: white !important;
+    border: none !important;
+    border-radius: 8px !important;
+    padding: 10px 28px !important;
+    font-size: 0.95rem !important;
+    font-weight: 600 !important;
+    cursor: pointer !important;
+    transition: all 0.3s ease !important;
+    margin-left: 8px !important;
+    box-shadow: 0 2px 8px rgba(0, 212, 170, 0.3) !important;
+}
+
+.send-button:hover {
+    background: linear-gradient(135deg, #00ffcc 0%, #00d4aa 100%) !important;
+    box-shadow: 0 4px 15px rgba(0, 212, 170, 0.4) !important;
+    transform: translateY(-2px) !important;
+}
+
+.clear-button {
+    background: white !important;
+    color: #718096 !important;
+    border: 1px solid #e0e7ef !important;
+    border-radius: 8px !important;
+    padding: 10px 28px !important;
+    font-size: 0.95rem !important;
+    font-weight: 600 !important;
+    cursor: pointer !important;
+    transition: all 0.3s ease !important;
+    margin-left: 8px !important;
+}
+
+.clear-button:hover {
+    background: #f7fafc !important;
+    border-color: #cbd5e0 !important;
+    color: #4a5568 !important;
+    transform: translateY(-2px) !important;
+}
+
+/* ==================== API Configuration ==================== */
+.api-config {
+    background: #f7fafc !important;
+    border: 1px solid #e0e7ef !important;
+    border-radius: 8px !important;
+    padding: 12px !important;
+    margin-bottom: 12px !important;
+}
+
+.api-config input {
+    background: white !important;
+    color: #2d3748 !important;
+    border: 1px solid #e0e7ef !important;
+    border-radius: 6px !important;
+    padding: 8px 12px !important;
+    font-size: 0.9rem !important;
+}
+
+.api-config input:focus {
+    border-color: #00d4aa !important;
+    outline: none !important;
+    box-shadow: 0 0 0 3px rgba(0, 212, 170, 0.1) !important;
+}
+
+.check-api-button {
+    background: linear-gradient(135deg, #00a896 0%, #008577 100%) !important;
+    color: white !important;
+    border: none !important;
+    border-radius: 6px !important;
+    padding: 8px 18px !important;
+    font-weight: 500 !important;
+    font-size: 0.85rem !important;
+    cursor: pointer !important;
+    transition: all 0.3s ease !important;
+    box-shadow: 0 2px 5px rgba(0, 168, 150, 0.2) !important;
+}
+
+.check-api-button:hover {
+    background: linear-gradient(135deg, #00d4aa 0%, #00a896 100%) !important;
+    box-shadow: 0 4px 10px rgba(0, 168, 150, 0.3) !important;
+}
+
+/* ==================== Scrollbar Styling ==================== */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f5f9;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #00d4aa;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #00a896;
+}
+
+/* ==================== Accordion Styling ==================== */
+.accordion {
+    background: white !important;
+    border: 1px solid #e0e7ef !important;
+    border-radius: 8px !important;
+    margin-bottom: 10px !important;
+}
+
+.accordion summary {
+    color: #00a896 !important;
+    font-weight: 600 !important;
+    font-size: 0.9rem !important;
+    padding: 10px !important;
+    cursor: pointer !important;
+}
+
+/* ==================== Footer ==================== */
+.footer {
+    text-align: center;
+    padding: 15px;
+    color: #718096;
+    font-size: 0.85rem;
+    background: #ffffff;
+    border-top: 1px solid #e0e7ef;
+    margin-top: 0;
+}
+
+.footer strong {
+    color: #00a896;
+}
+
+/* ==================== Responsive Design ==================== */
+@media (max-width: 768px) {
+    .header-container h1 {
+        font-size: 1.3rem;
+    }
+    
+    .sidebar {
+        width: 220px !important;
+        min-width: 220px !important;
+    }
+    
+    .main-container {
+        flex-direction: column;
+        height: auto;
+    }
+}
+
+/* ==================== Fix Endless Scrolling ==================== */
+body {
+    overflow: hidden !important;
+}
+
+html {
+    overflow: hidden !important;
+}
+
+.gradio-container {
+    overflow: hidden !important;
+}