change ui

app.py

@@ -92,60 +92,10 @@ def create_interface():
     # Custom CSS for improved styling
     custom_css = """
     .gradio-container {
-        max-width: 1200px !important;
+        max-width: 800px !important;
         margin: 0 auto !important;
     }
     
-    .main-header {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        color: white;
-        padding: 2rem;
-        border-radius: 15px;
-        margin-bottom: 2rem;
-        text-align: center;
-        box-shadow: 0 8px 32px rgba(0,0,0,0.1);
-    }
-    
-    .main-header h1 {
-        margin: 0;
-        font-size: 2.5rem;
-        font-weight: 700;
-        text-shadow: 0 2px 4px rgba(0,0,0,0.3);
-    }
-    
-    .main-header p {
-        margin: 1rem 0 0 0;
-        font-size: 1.1rem;
-        opacity: 0.9;
-    }
-    
-    .feature-grid {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-        gap: 1rem;
-        margin: 2rem 0;
-    }
-    
-    .feature-card {
-        background: white;
-        padding: 1.5rem;
-        border-radius: 12px;
-        border: 1px solid #e1e5e9;
-        box-shadow: 0 4px 6px rgba(0,0,0,0.05);
-        transition: transform 0.2s, box-shadow 0.2s;
-    }
-    
-    .feature-card:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 8px 25px rgba(0,0,0,0.1);
-    }
-    
-    .feature-card h3 {
-        color: #667eea;
-        margin: 0 0 0.5rem 0;
-        font-size: 1.2rem;
-    }
-    
     .chat-container {
         background: white;
         border-radius: 15px;
@@ -161,35 +111,6 @@ def create_interface():
         margin-top: 1rem;
     }
     
-    .examples-section {
-        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
-        color: white;
-        padding: 2rem;
-        border-radius: 15px;
-        margin: 2rem 0;
-    }
-    
-    .examples-section h3 {
-        margin: 0 0 1rem 0;
-        font-size: 1.5rem;
-    }
-    
-    .resources-section {
-        background: #f8f9fa;
-        border-radius: 15px;
-        padding: 2rem;
-        margin: 2rem 0;
-        border: 1px solid #e1e5e9;
-    }
-    
-    .footer {
-        text-align: center;
-        padding: 2rem;
-        color: #6c757d;
-        border-top: 1px solid #e1e5e9;
-        margin-top: 2rem;
-    }
-    
     .gradio-button {
         background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
         border: none !important;
@@ -228,40 +149,6 @@ def create_interface():
         css=custom_css
     ) as demo:
         
-        # Header
-        with gr.Row():
-            with gr.Column(scale=1):
-                gr.HTML("""
-                <div class="main-header">
-                    <h1>🌐 Web Accessibility Learning Assistant</h1>
-                    <p>Your personal tutor for mastering web accessibility using authoritative WebAIM resources</p>
-                </div>
-                """)
-        
-        # Feature highlights
-        with gr.Row():
-            with gr.Column(scale=1):
-                gr.HTML("""
-                <div class="feature-grid">
-                    <div class="feature-card">
-                        <h3>📋 WCAG Guidelines</h3>
-                        <p>Master success criteria and implementation strategies with expert guidance</p>
-                    </div>
-                    <div class="feature-card">
-                        <h3>🔍 Screen Reader Testing</h3>
-                        <p>Learn how to test with assistive technologies like NVDA and JAWS</p>
-                    </div>
-                    <div class="feature-card">
-                        <h3>💻 Code Examples</h3>
-                        <p>Get practical HTML, CSS, and JavaScript patterns for accessibility</p>
-                    </div>
-                    <div class="feature-card">
-                        <h3>🎯 Best Practices</h3>
-                        <p>Discover real-world accessibility solutions and common pitfalls</p>
-                    </div>
-                </div>
-                """)
-        
         # Main chat interface
         with gr.Row():
             with gr.Column(scale=1):
@@ -297,94 +184,6 @@ def create_interface():
                 
                 gr.HTML('</div>')
         
-        # Quick start examples
-        with gr.Row():
-            with gr.Column(scale=1):
-                gr.HTML("""
-                <div class="examples-section">
-                    <h3>🚀 Quick Start Examples</h3>
-                    <p>Click any example below to get started with common accessibility questions:</p>
-                </div>
-                """)
-                
-                gr.Examples(
-                    examples=[
-                        "What are the WCAG 2.1 AA requirements for color contrast?",
-                        "How do I make forms accessible to screen readers?",
-                        "What's the difference between aria-label and aria-labelledby?",
-                        "How can I test my website with a screen reader?",
-                        "What are the most common accessibility mistakes students make?",
-                        "How do I write effective alt text for complex images?",
-                        "What ARIA roles should I use for a navigation menu?",
-                        "How do I make data tables accessible?",
-                        "What are the keyboard navigation requirements?",
-                        "How do I ensure my site works without JavaScript?"
-                    ],
-                    inputs=msg,
-                    examples_per_page=5,
-                    label="Example Questions"
-                )
-        
-        # Additional resources
-        with gr.Row():
-            with gr.Column(scale=1):
-                gr.HTML("""
-                <div class="resources-section">
-                    <h3>📚 Additional Learning Resources</h3>
-                </div>
-                """)
-                
-                with gr.Accordion("🛠️ Recommended Tools", open=False):
-                    gr.Markdown("""
-                    ### Essential Accessibility Testing Tools:
-                    
-                    **🔍 Automated Testing:**
-                    - **WAVE**: Web accessibility evaluation tool (wave.webaim.org)
-                    - **axe DevTools**: Browser extension for accessibility testing
-                    - **Lighthouse**: Built-in accessibility audit in Chrome DevTools
-                    - **HTML_CodeSniffer**: Bookmarklet for quick accessibility checks
-                    
-                    **🎧 Screen Readers:**
-                    - **NVDA**: Free screen reader for Windows
-                    - **JAWS**: Professional screen reader (paid)
-                    - **VoiceOver**: Built-in screen reader for macOS
-                    - **TalkBack**: Android screen reader
-                    
-                    **🎨 Color & Contrast:**
-                    - **WebAIM Contrast Checker**: Verify color contrast ratios
-                    - **Color Oracle**: Simulate color blindness
-                    - **Stark**: Design tool with accessibility features
-                    """)
-                
-                with gr.Accordion("📋 Key Standards & Guidelines", open=False):
-                    gr.Markdown("""
-                    ### Web Accessibility Standards:
-                    
-                    **🌐 WCAG 2.1:**
-                    - **Level A**: Basic accessibility requirements
-                    - **Level AA**: Standard compliance (most common target)
-                    - **Level AAA**: Highest level of accessibility
-                    
-                    **🇺🇸 US Standards:**
-                    - **Section 508**: Federal accessibility requirements
-                    - **ADA**: Americans with Disabilities Act considerations
-                    - **CVAA**: 21st Century Communications and Video Accessibility Act
-                    
-                    **🌍 International:**
-                    - **EN 301 549**: European accessibility standard
-                    - **ISO 9241-171**: International ergonomics standard
-                    """)
-        
-        # Footer
-        with gr.Row():
-            with gr.Column(scale=1):
-                gr.HTML("""
-                <div class="footer">
-                    <p><strong>This chatbot uses authoritative WebAIM resources and is powered by DeepSeek-R1.</strong></p>
-                    <p>For the most up-to-date information, always refer to the original WebAIM documentation at <a href="https://webaim.org" target="_blank">webaim.org</a></p>
-                </div>
-                """)
-        
         # Handle message submission
         def respond(message, history):
             if not message.strip():