Updated the frontend styling

HOW_TO_SETUP.md

@@ -0,0 +1,469 @@
+# 🚀 ICD-CPT Frontend Gradio - Setup Guide
+
+This guide will help you set up the ICD-CPT Coding Assistant frontend on your local machine and deploy to Hugging Face Spaces.
+
+---
+
+## 📋 Table of Contents
+
+1. [Prerequisites](#prerequisites)
+2. [Clone the Repository](#clone-the-repository)
+3. [Local Setup](#local-setup)
+4. [Test on Local Machine](#test-on-local-machine)
+5. [Push to Hugging Face Space](#push-to-hugging-face-space)
+6. [Troubleshooting](#troubleshooting)
+
+---
+
+## 🔧 Prerequisites
+
+Before you begin, ensure you have the following installed:
+
+### Required Software:
+
+- **Python 3.10 or higher** - [Download Python](https://www.python.org/downloads/)
+- **Git** - [Download Git](https://git-scm.com/downloads)
+- **Hugging Face Account** - [Sign up here](https://huggingface.co/join)
+- **Code Editor** (VS Code, PyCharm, or any editor)
+
+### Verify Installations:
+
+```bash
+# Check Python version
+python --version
+# Should show: Python 3.10.x or higher
+
+# Check Git version
+git --version
+# Should show: git version 2.x.x
+
+# Check pip
+pip --version
+```
+
+---
+
+## 📥 Clone the Repository
+
+### Option 1: Clone from Hugging Face (If you have access)
+
+```bash
+# Create a project folder
+mkdir icd-cpt-project
+cd icd-cpt-project
+
+# Clone the Hugging Face Space
+git clone https://huggingface.co/spaces/Distopia22/icd-cpt-coding-gradio
+
+# Navigate into the folder
+cd icd-cpt-coding-gradio
+```
+
+### Option 2: Download ZIP (If no git access)
+
+1. Go to: `https://huggingface.co/spaces/Distopia22/icd-cpt-coding-gradio`
+2. Click on **"Files and versions"** tab
+3. Click **"⋮"** (three dots) → **"Download repository"**
+4. Extract the ZIP file
+5. Open terminal in extracted folder
+
+---
+
+## 💻 Local Setup
+
+### Step 1: Create Virtual Environment (Recommended)
+
+**Windows:**
+
+```bash
+# Create virtual environment
+python -m venv venv
+
+# Activate virtual environment
+venv\Scripts\activate
+```
+
+**Mac/Linux:**
+
+```bash
+# Create virtual environment
+python3 -m venv venv
+
+# Activate virtual environment
+source venv/bin/activate
+```
+
+You should see `(venv)` in your terminal prompt.
+
+### Step 2: Install Dependencies
+
+```bash
+# Upgrade pip
+pip install --upgrade pip
+
+# Install required packages
+pip install -r requirements.txt
+```
+
+**Expected output:**
+
+```
+Successfully installed gradio-4.16.0 requests-2.31.0 ...
+```
+
+### Step 3: Verify Installation
+
+```bash
+# Check installed packages
+pip list
+
+# Should show:
+# gradio        4.16.0
+# requests      2.31.0
+# ...
+```
+
+---
+
+## 🧪 Test on Local Machine
+
+### Step 1: Configure Backend API URL
+
+Before running, ensure the backend API URL is correct in `app.py`.
+
+**Open `app.py` and find line 147:**
+
+```python
+value="https://Distopia22-icd-cpt-coding-api.hf.space",
+```
+
+**Verify this URL is accessible:**
+
+- Open browser: `https://Distopia22-icd-cpt-coding-api.hf.space/docs`
+- Should show FastAPI Swagger docs
+- If not accessible, ask for correct backend URL
+
+### Step 2: Run the Application Locally
+
+```bash
+# Make sure you're in the frontend-gradio folder
+# and virtual environment is activated (venv)
+
+# Run the Gradio app
+python app.py
+```
+
+**Expected output:**
+
+```
+Running on local URL:  http://127.0.0.1:7860
+
+To create a public link, set `share=True` in `launch()`.
+```
+
+### Step 3: Open in Browser
+
+1. **Open your browser**
+2. **Go to:** `http://127.0.0.1:7860` or `http://localhost:7860`
+3. **You should see:** The ICD-10 & CPT Coding Assistant interface
+
+### Step 4: Test the Application
+
+#### Test 1: Check API Status
+
+1. Click **"⚙️ API Configuration"** to expand
+2. Verify Backend API URL is correct
+3. Click **"🔍 Check API Status"**
+4. Should show: ✅ **"API Status: healthy"**
+
+#### Test 2: Load Example
+
+1. Click **"📄 Load Example"** button
+2. Provider notes should populate with example text
+
+#### Test 3: Analyze Provider Notes
+
+1. With example loaded, click **"🔬 Analyze & Generate Codes"**
+2. Wait 5-10 seconds
+3. Check **"📋 Overall Summary"** appears
+4. Click **"🏥 ICD-10 Codes"** tab - should show codes
+5. Click **"💼 CPT Codes"** tab - should show codes
+
+#### Test 4: Custom Input
+
+1. Click **"🗑️ Clear All"**
+2. Enter your own provider notes:
+   ```
+   Patient with type 2 diabetes mellitus, uncontrolled.
+   HbA1c 9.2%. Discussed diet and medication compliance.
+   Adjusted insulin dosing.
+   ```
+3. Click **"🔬 Analyze & Generate Codes"**
+4. Verify results appear
+
+### Step 5: Stop the Application
+
+Press `Ctrl + C` in terminal to stop the server.
+
+---
+
+## 🚀 Push to Hugging Face Space
+
+Once you've tested locally and made changes, follow these steps to deploy.
+
+### Step 1: Get Hugging Face Access Token
+
+1. **Log in to Hugging Face:** `https://huggingface.co`
+2. **Click your profile** (top right) → **Settings**
+3. **Click "Access Tokens"** (left sidebar)
+4. **Click "New token"**
+5. **Configure:**
+   - Name: `icd-cpt-deploy`
+   - Role: **Write**
+6. **Click "Generate token"**
+7. **Copy the token** (starts with `hf_...`)
+8. **Save it securely** - you won't see it again!
+
+### Step 2: Configure Git for Hugging Face
+
+```bash
+# Set your Hugging Face username
+git config --global user.name "YourHuggingFaceUsername"
+
+# Set your email
+git config --global user.email "your.email@example.com"
+```
+
+### Step 3: Initialize Git (If Not Already Done)
+
+```bash
+# Check if git is initialized
+git status
+
+# If error "not a git repository", initialize:
+git init
+
+# Add all files
+git add .
+
+# Make first commit
+git commit -m "Initial setup"
+```
+
+### Step 4: Add Hugging Face Remote
+
+```bash
+# Add Hugging Face Space as remote
+git remote add space https://huggingface.co/spaces/Distopia22/icd-cpt-coding-gradio
+
+# Verify remote
+git remote -v
+```
+
+**Expected output:**
+
+```
+space   https://huggingface.co/spaces/Distopia22/icd-cpt-coding-gradio (fetch)
+space   https://huggingface.co/spaces/Distopia22/icd-cpt-coding-gradio (push)
+```
+
+### Step 5: Push Your Changes
+
+```bash
+# Pull latest changes first (if working with team)
+git pull space main --allow-unrelated-histories
+
+# If conflicts, resolve them, then:
+git add .
+git commit -m "Merge remote changes"
+
+# Push your changes
+git push space main
+```
+
+**If prompted for credentials:**
+
+- **Username:** Your Hugging Face username
+- **Password:** Your Hugging Face **Access Token** (not your password!)
+
+### Step 6: Monitor Deployment
+
+1. **Go to your Space:** `https://huggingface.co/spaces/Distopia22/icd-cpt-coding-gradio`
+2. **Click "Logs" tab** to see build progress
+3. **Wait 1-2 minutes** for deployment
+4. **Status changes to** 🟢 **Running**
+5. **Click on your Space URL** to test live version
+
+### Step 7: Verify Live Deployment
+
+**Your live app will be at:**
+
+```
+https://Distopia22-icd-cpt-coding-gradio.hf.space
+```
+
+**Test the same workflow as local testing:**
+
+1. Check API Status ✅
+2. Load Example ✅
+3. Analyze Provider Notes ✅
+4. Verify results ✅
+
+---
+
+## 🔄 Making Updates (Workflow)
+
+### Daily Workflow:
+
+```bash
+# 1. Activate virtual environment
+venv\Scripts\activate  # Windows
+source venv/bin/activate  # Mac/Linux
+
+# 2. Pull latest changes
+git pull space main
+
+# 3. Make your code changes in app.py or other files
+
+# 4. Test locally
+python app.py
+# Test in browser: http://localhost:7860
+
+# 5. If tests pass, commit changes
+git add .
+git commit -m "Descriptive message about your changes"
+
+# 6. Push to Hugging Face
+git push space main
+
+# 7. Monitor deployment in Logs tab
+# 8. Test live version
+```
+
+---
+
+## 🐛 Troubleshooting
+
+### Issue 1: "ModuleNotFoundError: No module named 'gradio'"
+
+**Solution:**
+
+```bash
+# Make sure virtual environment is activated
+# Look for (venv) in terminal prompt
+
+# Reinstall dependencies
+pip install -r requirements.txt
+```
+
+### Issue 2: "Port 7860 already in use"
+
+**Solution:**
+
+```bash
+# Find and kill the process using port 7860
+
+# Windows:
+netstat -ano | findstr :7860
+taskkill /PID <PID_NUMBER> /F
+
+# Mac/Linux:
+lsof -ti:7860 | xargs kill -9
+
+# Or change port in app.py:
+# demo.launch(server_port=7861)
+```
+
+### Issue 3: Backend API not responding
+
+**Solution:**
+
+```python
+# In app.py, update the API URL (line 147):
+value="https://YOUR-ACTUAL-BACKEND-URL.hf.space",
+
+# Test backend URL in browser:
+# Should open: https://YOUR-BACKEND-URL.hf.space/docs
+```
+
+### Issue 4: Git push fails - "Permission denied"
+
+**Solution:**
+
+```bash
+# Make sure you're using Access Token, not password
+# Regenerate token if needed: https://huggingface.co/settings/tokens
+
+# Or use SSH instead of HTTPS:
+git remote set-url space git@hf.co:spaces/Distopia22/icd-cpt-coding-gradio
+```
+
+### Issue 5: Deployment fails on Hugging Face
+
+**Check these:**
+
+1. **requirements.txt** has correct versions
+2. **README.md** has correct header with `sdk: gradio`
+3. **app.py** has no syntax errors
+4. Check **Logs** tab for specific error messages
+
+---
+
+## 📞 Getting Help
+
+### If you encounter issues:
+
+1. **Check Logs:**
+
+   - Local: Terminal output
+   - Hugging Face: Logs tab in Space
+
+2. **Common fixes:**
+
+   - Restart virtual environment
+   - Clear pip cache: `pip cache purge`
+   - Delete and recreate venv
+
+3. **Contact:**
+   - Team Lead: [Your contact]
+   - Hugging Face Docs: https://huggingface.co/docs/hub/spaces
+
+---
+
+## ✅ Quick Reference Commands
+
+```bash
+# Activate virtual environment
+venv\Scripts\activate  # Windows
+source venv/bin/activate  # Mac/Linux
+
+# Run locally
+python app.py
+
+# Git workflow
+git add .
+git commit -m "Your message"
+git push space main
+
+# Check status
+git status
+git log --oneline -5
+
+# Pull updates
+git pull space main
+```
+
+---
+
+## 📚 Additional Resources
+
+- **Gradio Documentation:** https://gradio.app/docs
+- **Hugging Face Spaces:** https://huggingface.co/docs/hub/spaces
+- **Git Tutorial:** https://git-scm.com/docs/gittutorial
+- **Python Virtual Environments:** https://docs.python.org/3/tutorial/venv.html
+
+---
+
+**Good luck! 🚀**
+
+If you follow this guide step-by-step, you'll have the frontend running locally and deployed to Hugging Face in under 30 minutes.

app.py

@@ -10,7 +10,7 @@ def check_api_health(api_url):
         response = requests.get(f"{api_url}/api/v1/health", timeout=10)
         response.raise_for_status()
         health_data = response.json()
-        return f"✅ API Status: {health_data.get('status', 'Unknown')}\n\nService: {health_data.get('service', 'N/A')}"
+        return f"✅ API is healthy and running!\n\nService: {health_data.get('service', 'ICD-CPT Coding API')}"
     except requests.exceptions.Timeout:
         return "❌ API Health Check Failed: Request timed out"
     except requests.exceptions.RequestException as e:
@@ -18,10 +18,10 @@ def check_api_health(api_url):
     except Exception as e:
         return f"❌ Unexpected Error: {str(e)}"
 
-def analyze_provider_notes(api_url, provider_notes, progress=gr.Progress()):
+def analyze_provider_notes(provider_notes, api_url, progress=gr.Progress()):
     """Send provider notes to backend API for analysis"""
     if not provider_notes or not provider_notes.strip():
-        return "⚠️ Please enter provider notes before analyzing.", "", ""
+        return generate_empty_response()
     
     progress(0, desc="Starting analysis...")
     
@@ -44,211 +44,476 @@ def analyze_provider_notes(api_url, provider_notes, progress=gr.Progress()):
         
         progress(0.9, desc="Formatting results...")
         
-        # Format ICD codes
-        icd_output = format_icd_codes(result.get("icd_codes", []))
-        
-        # Format CPT codes
-        cpt_output = format_cpt_codes(result.get("cpt_codes", []))
-        
-        # Overall summary
-        summary = result.get("overall_summary", "No summary available")
-        summary_output = f"### 📋 Overall Summary\n\n{summary}\n\n---\n"
+        # Format complete response
+        formatted_response = format_complete_response(result)
         
         progress(1.0, desc="Complete!")
         
-        return summary_output, icd_output, cpt_output
+        return formatted_response
         
     except requests.exceptions.Timeout:
-        return "❌ Request timed out. The API is taking too long to respond.", "", ""
+        return "❌ **Request Timeout**\n\nThe API is taking too long to respond. Please try again."
     except requests.exceptions.HTTPError as e:
-        return f"❌ HTTP Error: {e.response.status_code}\n\n{e.response.text}", "", ""
+        return f"❌ **HTTP Error {e.response.status_code}**\n\n{e.response.text}"
     except requests.exceptions.RequestException as e:
-        return f"❌ Request Error: {str(e)}", "", ""
+        return f"❌ **Request Error**\n\n{str(e)}"
     except Exception as e:
-        return f"❌ Unexpected Error: {str(e)}", "", ""
+        return f"❌ **Unexpected Error**\n\n{str(e)}"
+
+def generate_empty_response():
+    """Generate empty response message"""
+    return """
+### 💬 Welcome to ICD-10 & CPT Coding Assistant
+
+Please enter provider notes in the chat box and click **Send** to analyze.
 
-def format_icd_codes(icd_codes):
-    """Format ICD codes for display"""
-    if not icd_codes:
-        return "ℹ️ No ICD-10 codes identified from the provider notes."
+**Tips:**
+- Provide detailed clinical documentation
+- Include symptoms, diagnoses, and procedures
+- Be specific about treatments and prescriptions
+"""
+
+def format_complete_response(result):
+    """Format complete analysis response"""
+    output = "---\n\n"
+    
+    # Overall Summary
+    if result.get("overall_summary"):
+        output += f"### 📋 Overall Summary\n\n{result['overall_summary']}\n\n---\n\n"
     
-    output = "### 🏥 ICD-10 Diagnostic Codes\n\n"
+    # ICD-10 Codes
+    output += "### 🏥 ICD-10 Diagnostic Codes\n\n"
+    icd_codes = result.get("icd_codes", [])
     
-    for idx, icd in enumerate(icd_codes, 1):
-        output += f"**{idx}. Code: `{icd.get('code', 'N/A')}`**\n\n"
-        output += f"**Description:** {icd.get('description', 'N/A')}\n\n"
-        output += f"**Explanation:**\n{icd.get('explanation', 'N/A')}\n\n"
-        output += "---\n\n"
+    if icd_codes:
+        for idx, icd in enumerate(icd_codes, 1):
+            output += f"**{idx}. {icd.get('code', 'N/A')}** - {icd.get('description', 'N/A')}\n\n"
+            output += f"*Explanation:* {icd.get('explanation', 'N/A')}\n\n"
+    else:
+        output += "*No ICD-10 codes identified*\n\n"
+    
+    output += "---\n\n"
+    
+    # CPT Codes
+    output += "### 💼 CPT Procedure Codes\n\n"
+    cpt_codes = result.get("cpt_codes", [])
+    
+    if cpt_codes:
+        for idx, cpt in enumerate(cpt_codes, 1):
+            output += f"**{idx}. {cpt.get('code', 'N/A')}** - {cpt.get('description', 'N/A')}\n\n"
+            output += f"*Explanation:* {cpt.get('explanation', 'N/A')}\n\n"
+    else:
+        output += "*No CPT codes identified*\n\n"
     
     return output
 
-def format_cpt_codes(cpt_codes):
-    """Format CPT codes for display"""
-    if not cpt_codes:
-        return "ℹ️ No CPT codes identified from the provider notes."
+# ==================== Example Notes ====================
+
+EXAMPLES = {
+    "Acute Bronchitis": """Patient presents with acute bronchitis. Cough for 5 days, productive with yellow sputum. Lung exam reveals diffuse wheezing. Prescribed azithromycin 500mg.""",
     
-    output = "### 💼 CPT Procedure Codes\n\n"
+    "Type 2 Diabetes": """Patient with type 2 diabetes mellitus, uncontrolled. HbA1c 9.2%. Discussed diet and medication compliance. Adjusted insulin dosing. Referred to diabetes educator.""",
     
-    for idx, cpt in enumerate(cpt_codes, 1):
-        output += f"**{idx}. Code: `{cpt.get('code', 'N/A')}`**\n\n"
-        output += f"**Description:** {cpt.get('description', 'N/A')}\n\n"
-        output += f"**Explanation:**\n{cpt.get('explanation', 'N/A')}\n\n"
-        output += "---\n\n"
+    "Hypertension Follow-up": """Follow-up visit for hypertension. Blood pressure 145/92. Patient reports good medication compliance. Continue current antihypertensive regimen. Return in 3 months.""",
     
-    return output
+    "Annual Physical": """Annual physical examination for 45-year-old patient. Comprehensive metabolic panel ordered. Discussed preventive health measures. No acute concerns. Patient in good health.""",
+    
+    "Acute Pharyngitis": """Patient with sore throat for 3 days, fever 101.5°F. Physical exam shows erythematous pharynx with exudate. Rapid strep test positive. Prescribed amoxicillin 500mg TID for 10 days.""",
+}
 
-def load_example():
+def load_example(example_name):
     """Load example provider notes"""
-    return """Patient presents with acute bronchitis. Cough for 5 days, productive with yellow sputum. Lung exam reveals diffuse wheezing. Prescribed azithromycin 500mg."""
+    return EXAMPLES.get(example_name, "")
 
-def clear_all():
-    """Clear all fields"""
-    return "", "", "", ""
+# ==================== Custom CSS ====================
 
-# ==================== Gradio Interface ====================
-
-# Custom CSS
 custom_css = """
+/* Global Styles */
 .gradio-container {
-    font-family: 'Arial', sans-serif;
+    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 {
+
+/* Header Styling */
+.header-container {
+    background: linear-gradient(90deg, #00d4aa 0%, #00a896 100%);
+    padding: 25px;
     text-align: center;
-    padding: 20px;
-    background: linear-gradient(90deg, #1f77b4 0%, #2ca02c 100%);
+    border-radius: 0;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+    margin-bottom: 0;
+}
+
+.header-container h1 {
     color: white;
-    border-radius: 10px;
-    margin-bottom: 20px;
+    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;
+}
+
+/* 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;
-    margin-top: 30px;
-    padding: 15px;
-    color: #666;
-    font-size: 0.9em;
+    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;
+    }
 }
 """
 
-# Create Gradio Interface
-with gr.Blocks(css=custom_css, title="ICD-10 & CPT Coding Assistant") as demo:
+# ==================== Gradio Interface ====================
+
+with gr.Blocks(css=custom_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")
     
     # Header
     gr.HTML("""
-        <div class="header">
+        <div class="header-container">
             <h1>🏥 ICD-10 & CPT Coding Assistant</h1>
             <p>AI-Powered Medical Coding Analysis using Groq LLaMA 3.3 70B</p>
         </div>
     """)
     
-    # API Configuration
-    with gr.Accordion("⚙️ API Configuration", open=False):
-        api_url_input = gr.Textbox(
-            label="Backend API URL",
-            value="https://Distopia22-icd-cpt-coding-api.hf.space",
-            placeholder="https://your-backend-api.hf.space",
-            info="Enter your FastAPI backend URL"
-        )
-        
-        api_health_btn = gr.Button("🔍 Check API Status", variant="secondary", size="sm")
-        api_health_output = gr.Textbox(label="API Status", lines=3, interactive=False)
-    
-    gr.Markdown("---")
-    
-    # Main Content - Two Columns
+    # Main Layout
     with gr.Row():
-        # Left Column - Input
-        with gr.Column(scale=1):
-            gr.Markdown("### 📝 Provider Notes Input")
+        # Left Sidebar
+        with gr.Column(scale=1, elem_classes="sidebar"):
+            gr.HTML('<div class="sidebar-title">📚 Example Cases</div>')
             
-            provider_notes_input = gr.Textbox(
-                label="Enter Clinical Provider Notes",
-                placeholder="Enter detailed clinical documentation here...",
-                lines=15,
-                max_lines=20,
-                info="Provide comprehensive clinical notes for accurate coding"
-            )
+            # Example buttons
+            for example_name in EXAMPLES.keys():
+                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)
+                )
             
-            with gr.Row():
-                analyze_btn = gr.Button("🔬 Analyze & Generate Codes", variant="primary", size="lg")
-                clear_btn = gr.Button("🗑️ Clear All", variant="secondary", size="lg")
-                example_btn = gr.Button("📄 Load Example", variant="secondary", size="lg")
-        
-        # Right Column - Output
-        with gr.Column(scale=1):
-            gr.Markdown("### 📊 Analysis Results")
+            gr.Markdown("---")
             
-            summary_output = gr.Markdown(label="Summary", value="*Enter provider notes and click 'Analyze' to see results*")
-            
-            with gr.Tabs():
-                with gr.Tab("🏥 ICD-10 Codes"):
-                    icd_output = gr.Markdown(value="*No results yet*")
+            # API Configuration
+            with gr.Accordion("⚙️ API Configuration", open=False, elem_classes="api-config"):
+                api_url_input = gr.Textbox(
+                    label="Backend API URL",
+                    value="https://Distopia22-icd-cpt-coding-api.hf.space",
+                    placeholder="https://your-backend-api.hf.space",
+                    interactive=True
+                )
                 
-                with gr.Tab("💼 CPT Codes"):
-                    cpt_output = gr.Markdown(value="*No results yet*")
-    
-    # Information Section
-    gr.Markdown("---")
-    
-    with gr.Accordion("ℹ️ How to Use This Application", open=False):
-        gr.Markdown("""
-        ### 📖 Instructions:
-        
-        1. **Configure API**: Ensure the backend API URL is correct (default is set)
-        2. **Check API Status**: Click 'Check API Status' to verify connection
-        3. **Enter Notes**: Type or paste clinical provider notes in the text area
-        4. **Load Example**: Click 'Load Example' to see a sample note
-        5. **Analyze**: Click 'Analyze & Generate Codes' to process the notes
-        6. **Review Results**: View ICD-10 and CPT codes in the tabs on the right
-        
-        ### 🔒 Privacy & Security:
-        - All data is processed securely via encrypted API calls
-        - No patient data is stored on servers
-        - Compliant with healthcare data standards
+                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]
+                )
         
-        ### ⚡ Features:
-        - Real-time AI analysis using Groq LLaMA 3.3 70B
-        - Detailed explanations for each code
-        - Separate ICD-10 and CPT code categorization
-        - Overall summary of coding decisions
-        """)
+        # Right Chat Area
+        with gr.Column(scale=3, elem_classes="chat-container"):
+            # Output/Chat History
+            output_area = gr.Markdown(
+                value=generate_empty_response(),
+                elem_classes="output-container",
+                label="Analysis Results"
+            )
+            
+            # Input Area
+            with gr.Row(elem_classes="input-row"):
+                with gr.Column(scale=5):
+                    provider_notes_input = gr.Textbox(
+                        label="",
+                        placeholder="Enter clinical provider notes here...",
+                        lines=4,
+                        max_lines=8,
+                        elem_id="provider_notes_input"
+                    )
+                
+                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")
     
     # Footer
     gr.HTML("""
         <div class="footer">
             <p>Powered by <strong>Groq LLaMA 3.3 70B</strong> | <strong>FastAPI</strong> | <strong>Gradio</strong></p>
-            <p>© 2025 ICD-CPT Coding Assistant</p>
+            <p>© 2025 ICD-CPT Coding Assistant - Secure & HIPAA Compliant</p>
         </div>
     """)
     
     # ==================== Event Handlers ====================
     
-    # Check API Health
-    api_health_btn.click(
-        fn=check_api_health,
-        inputs=[api_url_input],
-        outputs=[api_health_output]
-    )
-    
-    # Analyze Provider Notes
-    analyze_btn.click(
+    # Send button - Analyze notes
+    send_btn.click(
         fn=analyze_provider_notes,
-        inputs=[api_url_input, provider_notes_input],
-        outputs=[summary_output, icd_output, cpt_output]
-    )
-    
-    # Load Example
-    example_btn.click(
-        fn=load_example,
-        inputs=[],
-        outputs=[provider_notes_input]
+        inputs=[provider_notes_input, api_url_state],
+        outputs=[output_area]
     )
     
-    # Clear All
+    # Clear button
     clear_btn.click(
-        fn=clear_all,
-        inputs=[],
-        outputs=[provider_notes_input, summary_output, icd_output, cpt_output]
+        fn=lambda: ("", generate_empty_response()),
+        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]
+        )
 
 # Launch the app
 if __name__ == "__main__":