Spaces:

msmaje
/

ragmodel

Sleeping

App Files Files Community

msmaje commited on Jul 9, 2025

Commit

001ba5f

verified ·

1 Parent(s): 9ce27e5

Update app.py

Browse files

Files changed (1) hide show

app.py +727 -303

app.py CHANGED Viewed

@@ -475,256 +475,619 @@ def answer_question(question):
             logger.error(f"Fallback error: {fallback_error}")
             return f"❌ Error answering question: {str(e)}", ""
-def get_device_info():
-    """Simple function to detect if mobile (basic detection)"""
-    return """
-    <script>
-    function isMobile() {
-        return window.innerWidth <= 768;
-    }
-    function adjustLayout() {
-        const isMob = isMobile();
-        const root = document.documentElement;
-        if (isMob) {
-            root.style.setProperty('--mobile-mode', '1');
-        } else {
-            root.style.setProperty('--mobile-mode', '0');
-        }
-    }
-    window.addEventListener('resize', adjustLayout);
-    adjustLayout();
-    </script>
-    """
 def create_interface():
     """Create the fully responsive Gradio interface"""
-    # Custom CSS for better responsiveness
     custom_css = """
-    /* Base responsive styles */
     .gradio-container {
         max-width: 100% !important;
-        margin: 0 auto;
-        padding: 10px;
     }
-    /* Mobile-first responsive design */
-    @media (max-width: 768px) {
         .gradio-container {
-            padding: 5px;
         }
-        /* Stack elements vertically on mobile */
         .gr-row {
             flex-direction: column !important;
-            gap: 10px !important;
         }
-        /* Full width on mobile */
         .gr-column {
             width: 100% !important;
-            min-width: 100% !important;
         }
-        /* Adjust component spacing */
-        .gr-form > * {
-            margin-bottom: 8px !important;
         }
-        /* Better button sizing */
         .gr-button {
             width: 100% !important;
-            min-height: 44px !important;
-            font-size: 14px !important;
         }
-        /* Text input improvements */
-        .gr-textbox textarea {
-            min-height: 60px !important;
             font-size: 16px !important; /* Prevents zoom on iOS */
         }
-        /* File upload improvements */
         .gr-file {
-            min-height: 100px !important;
         }
         /* Slider improvements */
         .gr-slider {
-            margin: 10px 0 !important;
         }
-        /* Tab improvements */
-        .gr-tab-nav {
-            flex-wrap: wrap !important;
         }
-        .gr-tab-nav > button {
-            flex: 1 1 auto !important;
-            min-width: 80px !important;
-            font-size: 12px !important;
         }
     }
-    /* Tablet styles */
-    @media (min-width: 769px) and (max-width: 1024px) {
         .gradio-container {
-            padding: 15px;
         }
         .gr-button {
-            min-height: 40px !important;
         }
     }
-    /* Desktop styles */
     @media (min-width: 1025px) {
         .gradio-container {
-            max-width: 1400px;
-            padding: 20px;
         }
     }
-    /* Improve readability */
     .gr-markdown h1 {
         font-size: clamp(1.5rem, 4vw, 2.5rem) !important;
         line-height: 1.2 !important;
         margin-bottom: 1rem !important;
     }
     .gr-markdown h3 {
-        font-size: clamp(1.1rem, 3vw, 1.4rem) !important;
-        margin: 1rem 0 0.5rem 0 !important;
     }
-    .gr-markdown p, .gr-markdown li {
-        font-size: clamp(0.9rem, 2.5vw, 1rem) !important;
-        line-height: 1.5 !important;
     }
-    /* Status text improvements */
-    .gr-textbox[data-testid="textbox"] {
-        font-family: monospace !important;
-        font-size: clamp(0.8rem, 2vw, 0.9rem) !important;
     }
     /* Accessibility improvements */
     .gr-button:focus,
-    .gr-textbox:focus,
     .gr-file:focus {
-        outline: 2px solid #2563eb !important;
         outline-offset: 2px !important;
     }
-    /* Dark mode considerations */
-    @media (prefers-color-scheme: dark) {
-        .gr-button {
-            border: 1px solid #374151 !important;
-        }
     }
     """
-    with gr.Blocks(
-        title="PDF RAG System",
-        theme=gr.themes.Soft(),
-        css=custom_css
-    ) as demo:
-        # Add device detection script
-        gr.HTML(get_device_info())
         gr.Markdown("""
-        # 📚 PDF Question Answering System
-        Upload your PDF documents and ask questions about their content!
-        **Quick Start:**
-        1. Upload PDFs or use pre-loaded ones
-        2. Click Process to prepare your documents
-        3. Ask questions about the content
         """)
-        # Check for pre-loaded PDFs
-        if PRELOADED_PDFS:
-            gr.Markdown("""
-            <div style="background: linear-gradient(90deg, #10b981, #059669);
-                        color: white; padding: 12px; border-radius: 8px; margin: 10px 0;">
-            🎉 <strong>Pre-loaded PDFs detected!</strong> Use the 'Load Pre-existing PDFs' button to get started quickly.
-            </div>
-            """)
-        # Main layout - responsive columns
         with gr.Row():
-            # Left column - Upload & Settings (collapses to full width on mobile)
-            with gr.Column(scale=1, min_width=300):
-                gr.Markdown("### 📄 Document Management")
-                with gr.Tabs():
-                    with gr.TabItem("📁 Upload PDFs"):
-                        pdf_files = gr.File(
-                            label="Select PDF Files",
-                            file_count="multiple",
-                            file_types=[".pdf"],
-                            height=120
-                        )
-                        process_btn = gr.Button(
-                            "🔄 Process PDFs",
-                            variant="primary",
-                            size="lg"
-                        )
-                    with gr.TabItem("🗂️ ZIP Upload"):
-                        zip_file = gr.File(
-                            label="Upload ZIP (with PDFs)",
-                            file_count="single",
-                            file_types=[".zip"],
-                            height=80
-                        )
-                        extract_btn = gr.Button(
-                            "📦 Extract ZIP",
-                            variant="secondary",
-                            size="lg"
-                        )
-                        extract_output = gr.Textbox(
-                            label="Extraction Status",
-                            lines=2,
-                            max_lines=3
-                        )
-                    with gr.TabItem("💾 Pre-loaded"):
-                        if PRELOADED_PDFS:
-                            pdf_list = [f for f in os.listdir(PDF_FOLDER_PATH) if f.endswith('.pdf')]
-                            gr.Markdown(f"**Found {len(pdf_list)} PDF files**")
-                            # Show files in a more mobile-friendly way
-                            if len(pdf_list) <= 5:
-                                for pdf in pdf_list:
-                                    gr.Markdown(f"📄 {pdf}")
-                            else:
-                                for pdf in pdf_list[:3]:
-                                    gr.Markdown(f"📄 {pdf}")
-                                gr.Markdown(f"*... and {len(pdf_list) - 3} more files*")
-                        else:
-                            gr.Markdown("No pre-loaded PDFs found.")
-                        preload_btn = gr.Button(
-                            "📚 Load Pre-existing PDFs",
-                            variant="primary",
-                            size="lg",
-                            interactive=PRELOADED_PDFS
-                        )
-                # Settings section - collapsible on mobile
-                with gr.Accordion("⚙️ Advanced Settings", open=False):
                     chunk_size = gr.Slider(
-                        minimum=200,
                         maximum=2000,
                         value=1000,
                         step=100,
                         label="Chunk Size",
-                        info="Larger chunks = more context, smaller = more precise"
                     )
                     chunk_overlap = gr.Slider(
@@ -733,176 +1096,237 @@ def create_interface():
                         value=200,
                         step=50,
                         label="Chunk Overlap",
-                        info="Overlap between text chunks"
                     )
-                # Status display
-                process_output = gr.Textbox(
-                    label="📊 Processing Status",
-                    lines=3,
-                    max_lines=5,
-                    placeholder="Status updates will appear here..."
-                )
-            # Right column - Q&A Section (collapses to full width on mobile)
-            with gr.Column(scale=2, min_width=400):
-                gr.Markdown("### ❓ Ask Questions")
-                question_input = gr.Textbox(
-                    label="Your Question",
-                    placeholder="What would you like to know about your documents?",
-                    lines=2,
-                    max_lines=4
                 )
-                ask_btn = gr.Button(
-                    "🤔 Ask Question",
-                    variant="secondary",
-                    size="lg"
                 )
-                # Results section - stack vertically on mobile
-                with gr.Row():
-                    answer_output = gr.Textbox(
-                        label="💡 Answer",
-                        lines=6,
-                        max_lines=12,
-                        placeholder="Your answer will appear here..."
                     )
-                    sources_output = gr.Textbox(
-                        label="📚 Sources",
-                        lines=6,
-                        max_lines=12,
-                        placeholder="Source references will appear here..."
                     )
-        # Event handlers (unchanged)
-        process_btn.click(
-            fn=process_pdfs,
-            inputs=[pdf_files, chunk_size, chunk_overlap],
-            outputs=[process_output]
-        )
         preload_btn.click(
-            fn=load_preloaded_pdfs,
-            inputs=[chunk_size, chunk_overlap],
-            outputs=[process_output]
         )
-        extract_btn.click(
-            fn=extract_zip_to_pdfs,
-            inputs=[zip_file],
-            outputs=[extract_output]
         )
         ask_btn.click(
-            fn=answer_question,
-            inputs=[question_input],
             outputs=[answer_output, sources_output]
         )
         question_input.submit(
-            fn=answer_question,
-            inputs=[question_input],
             outputs=[answer_output, sources_output]
         )
-        # Example questions - more mobile-friendly
-        with gr.Accordion("💡 Example Questions", open=False):
-            gr.Markdown("""
-            **Try asking:**
-            - What are the main topics in these documents?
-            - Can you summarize the key findings?
-            - What data is available for [specific topic]?
-            - What are the differences between X and Y?
-            """)
-        # Footer with helpful info
         gr.Markdown("""
         ---
-        <div style="text-align: center; color: #666; font-size: 0.9em;">
-        💡 <strong>Tips:</strong> Upload multiple PDFs • Use specific questions • Check sources for accuracy<br>
-        🔧 <strong>Powered by:</strong> LangChain • HuggingFace • FAISS • Gradio
-        </div>
         """)
-    return demo
-# Check if environment is properly configured
-def check_environment():
-    """Check if the environment is properly configured"""
-    issues = []
-    if not LANGCHAIN_AVAILABLE:
-        issues.append("❌ LangChain not available - please install: pip install langchain langchain-community")
-    if not os.getenv("HUGGINGFACEHUB_API_TOKEN"):
-        issues.append("❌ HuggingFace API token not found - set HUGGINGFACEHUB_API_TOKEN environment variable")
-    return issues
 # Main execution
 if __name__ == "__main__":
-    print("🚀 Starting PDF RAG System...")
-    # Check environment
-    env_issues = check_environment()
-    if env_issues:
-        print("\n⚠️  Environment Issues Detected:")
-        for issue in env_issues:
-            print(f"   {issue}")
-        print("\n📋 Setup Instructions:")
-        print("   1. Install dependencies: pip install langchain langchain-community sentence-transformers faiss-cpu PyPDF2 gradio")
-        print("   2. Get HuggingFace token: https://huggingface.co/settings/tokens")
-        print("   3. Set environment variable: export HUGGINGFACEHUB_API_TOKEN=your_token_here")
-        print("   4. Restart the application")
-        print("\n🔄 Continuing with limited functionality...\n")
-    # Initialize models on startup
-    if LANGCHAIN_AVAILABLE:
-        print("🔧 Initializing models...")
-        success, message = initialize_models()
-        print(f"   {message}")
-    # Check for pre-loaded PDFs
-    if PRELOADED_PDFS:
-        pdf_count = len([f for f in os.listdir(PDF_FOLDER_PATH) if f.endswith('.pdf')])
-        print(f"📚 Found {pdf_count} pre-loaded PDF files in ./pdfs/")
     try:
-        # Create and launch the interface
-        demo = create_interface()
-        print("🌐 Launching web interface...")
-        print("   📱 Mobile-optimized interface")
-        print("   🖥️  Desktop and tablet supported")
-        print("   🔗 Access the app in your browser")
-        # Launch with configuration for different environments
-        demo.launch(
-            share=False,  # Set to True if you want a public shareable link
-            server_name="0.0.0.0",  # Allow external access
-            server_port=7860,  # Default Gradio port
-            inbrowser=True,  # Auto-open browser
-            show_error=True,  # Show detailed errors
-            quiet=False  # Show startup logs
         )
     except Exception as e:
         print(f"❌ Failed to launch interface: {e}")
-        print("🔧 Try these troubleshooting steps:")
-        print("   1. Check if port 7860 is available")
-        print("   2. Install Gradio: pip install gradio")
-        print("   3. Check firewall settings")
-        print("   4. Try running with: python app.py")
-    except KeyboardInterrupt:
-        print("\n👋 Shutting down PDF RAG System...")
-        print("   Thank you for using the application!")
-    finally:
-        # Cleanup
-        if 'vectorstore' in globals() and vectorstore is not None:
-            print("🧹 Cleaning up resources...")
-        print("✅ Shutdown complete.")

             logger.error(f"Fallback error: {fallback_error}")
             return f"❌ Error answering question: {str(e)}", ""
 def create_interface():
     """Create the fully responsive Gradio interface"""
+    # Enhanced CSS for comprehensive responsiveness
     custom_css = """
+    /* CSS Variables for consistent theming */
+    :root {
+        --primary-color: #2563eb;
+        --secondary-color: #10b981;
+        --accent-color: #f59e0b;
+        --text-primary: #1f2937;
+        --text-secondary: #6b7280;
+        --bg-primary: #ffffff;
+        --bg-secondary: #f9fafb;
+        --border-color: #e5e7eb;
+        --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+        --radius-sm: 0.375rem;
+        --radius-md: 0.5rem;
+        --radius-lg: 0.75rem;
+    }
+    /* Dark mode support */
+    @media (prefers-color-scheme: dark) {
+        :root {
+            --text-primary: #f9fafb;
+            --text-secondary: #d1d5db;
+            --bg-primary: #1f2937;
+            --bg-secondary: #111827;
+            --border-color: #374151;
+        }
+    }
+    /* Base container improvements */
     .gradio-container {
         max-width: 100% !important;
+        margin: 0 auto !important;
+        padding: clamp(0.5rem, 2vw, 1.5rem) !important;
+        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
+    }
+    /* Responsive grid system */
+    .gr-row {
+        display: flex !important;
+        flex-wrap: wrap !important;
+        gap: clamp(0.75rem, 2vw, 1.5rem) !important;
+        margin-bottom: clamp(0.75rem, 2vw, 1.5rem) !important;
+    }
+    .gr-column {
+        flex: 1 1 auto !important;
+        min-width: 0 !important;
     }
+    /* Mobile-first responsive breakpoints */
+    /* Small devices (phones, 320px and up) */
+    @media (max-width: 640px) {
         .gradio-container {
+            padding: 0.75rem !important;
         }
         .gr-row {
             flex-direction: column !important;
+            gap: 1rem !important;
         }
         .gr-column {
             width: 100% !important;
+            flex: none !important;
         }
+        /* Stack tabs vertically on very small screens */
+        .gr-tab-nav {
+            flex-direction: column !important;
+            gap: 0.25rem !important;
         }
+        .gr-tab-nav > button {
+            width: 100% !important;
+            text-align: left !important;
+            padding: 0.75rem 1rem !important;
+            font-size: 0.875rem !important;
+        }
+        /* Improve button sizes for touch */
         .gr-button {
             width: 100% !important;
+            min-height: 48px !important;
+            font-size: 0.875rem !important;
+            padding: 0.75rem 1rem !important;
+            border-radius: var(--radius-md) !important;
+            font-weight: 500 !important;
         }
+        /* Text inputs */
+        .gr-textbox textarea,
+        .gr-textbox input {
             font-size: 16px !important; /* Prevents zoom on iOS */
+            padding: 0.75rem !important;
+            border-radius: var(--radius-md) !important;
+            border: 1px solid var(--border-color) !important;
         }
+        /* File upload areas */
         .gr-file {
+            min-height: 120px !important;
+            padding: 1rem !important;
+            border: 2px dashed var(--border-color) !important;
+            border-radius: var(--radius-lg) !important;
+            text-align: center !important;
+        }
+        /* Accordion improvements */
+        .gr-accordion {
+            border-radius: var(--radius-md) !important;
+            border: 1px solid var(--border-color) !important;
         }
         /* Slider improvements */
         .gr-slider {
+            margin: 1rem 0 !important;
         }
+        .gr-slider input[type="range"] {
+            height: 32px !important;
         }
+        /* Form spacing */
+        .gr-form > * {
+            margin-bottom: 1rem !important;
         }
     }
+    /* Medium devices (tablets, 641px and up) */
+    @media (min-width: 641px) and (max-width: 1024px) {
         .gradio-container {
+            padding: 1.25rem !important;
+        }
+        .gr-row {
+            gap: 1.25rem !important;
         }
         .gr-button {
+            min-height: 44px !important;
+            padding: 0.625rem 1.25rem !important;
+            font-size: 0.875rem !important;
+        }
+        .gr-textbox textarea,
+        .gr-textbox input {
+            font-size: 15px !important;
+            padding: 0.625rem !important;
+        }
+        /* Two-column layout for medium screens */
+        .gr-column:first-child {
+            flex: 0 0 35% !important;
+        }
+        .gr-column:last-child {
+            flex: 0 0 60% !important;
         }
     }
+    /* Large devices (desktops, 1025px and up) */
     @media (min-width: 1025px) {
         .gradio-container {
+            max-width: 1400px !important;
+            padding: 2rem !important;
+        }
+        .gr-row {
+            gap: 2rem !important;
+        }
+        .gr-button {
+            min-height: 42px !important;
+            padding: 0.625rem 1.5rem !important;
+            font-size: 0.875rem !important;
+        }
+        .gr-textbox textarea,
+        .gr-textbox input {
+            font-size: 14px !important;
+            padding: 0.625rem !important;
+        }
+        /* Optimal desktop layout */
+        .gr-column:first-child {
+            flex: 0 0 400px !important;
+        }
+        .gr-column:last-child {
+            flex: 1 1 auto !important;
         }
     }
+    /* Typography improvements */
     .gr-markdown h1 {
         font-size: clamp(1.5rem, 4vw, 2.5rem) !important;
+        font-weight: 700 !important;
         line-height: 1.2 !important;
         margin-bottom: 1rem !important;
+        color: var(--text-primary) !important;
     }
+    .gr-markdown h2 {
+        font-size: clamp(1.25rem, 3vw, 1.875rem) !important;
+        font-weight: 600 !important;
+        line-height: 1.3 !important;
+        margin: 1.5rem 0 0.75rem 0 !important;
+        color: var(--text-primary) !important;
+    }
     .gr-markdown h3 {
+        font-size: clamp(1.125rem, 2.5vw, 1.5rem) !important;
+        font-weight: 600 !important;
+        line-height: 1.4 !important;
+        margin: 1.25rem 0 0.5rem 0 !important;
+        color: var(--text-primary) !important;
     }
+    .gr-markdown p,
+    .gr-markdown li {
+        font-size: clamp(0.875rem, 2vw, 1rem) !important;
+        line-height: 1.6 !important;
+        color: var(--text-secondary) !important;
+        margin-bottom: 0.75rem !important;
     }
+    /* Enhanced button styling */
+    .gr-button {
+        background: linear-gradient(135deg, var(--primary-color), #1d4ed8) !important;
+        color: white !important;
+        border: none !important;
+        border-radius: var(--radius-md) !important;
+        font-weight: 500 !important;
+        transition: all 0.2s ease !important;
+        cursor: pointer !important;
+        box-shadow: var(--shadow-sm) !important;
     }
+    .gr-button:hover {
+        background: linear-gradient(135deg, #1d4ed8, var(--primary-color)) !important;
+        transform: translateY(-1px) !important;
+        box-shadow: var(--shadow-md) !important;
+    }
+    .gr-button:active {
+        transform: translateY(0) !important;
+        box-shadow: var(--shadow-sm) !important;
+    }
+    /* Secondary button variant */
+    .gr-button[variant="secondary"] {
+        background: linear-gradient(135deg, var(--secondary-color), #059669) !important;
+    }
+    .gr-button[variant="secondary"]:hover {
+        background: linear-gradient(135deg, #059669, var(--secondary-color)) !important;
+    }
+    /* Tab styling improvements */
+    .gr-tab-nav {
+        background: var(--bg-secondary) !important;
+        border-radius: var(--radius-md) !important;
+        padding: 0.25rem !important;
+        margin-bottom: 1rem !important;
+        display: flex !important;
+        gap: 0.25rem !important;
+    }
+    .gr-tab-nav > button {
+        background: transparent !important;
+        border: none !important;
+        padding: 0.5rem 1rem !important;
+        border-radius: var(--radius-sm) !important;
+        font-weight: 500 !important;
+        color: var(--text-secondary) !important;
+        transition: all 0.2s ease !important;
+        flex: 1 1 auto !important;
+    }
+    .gr-tab-nav > button.selected {
+        background: var(--bg-primary) !important;
+        color: var(--text-primary) !important;
+        box-shadow: var(--shadow-sm) !important;
+    }
+    .gr-tab-nav > button:hover {
+        color: var(--text-primary) !important;
+        background: rgba(255, 255, 255, 0.5) !important;
+    }
+    /* Input and textarea improvements */
+    .gr-textbox textarea,
+    .gr-textbox input {
+        border: 1px solid var(--border-color) !important;
+        border-radius: var(--radius-md) !important;
+        background: var(--bg-primary) !important;
+        color: var(--text-primary) !important;
+        transition: border-color 0.2s ease !important;
+        resize: vertical !important;
+    }
+    .gr-textbox textarea:focus,
+    .gr-textbox input:focus {
+        border-color: var(--primary-color) !important;
+        outline: none !important;
+        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
+    }
+    /* File upload styling */
+    .gr-file {
+        border: 2px dashed var(--border-color) !important;
+        border-radius: var(--radius-lg) !important;
+        background: var(--bg-secondary) !important;
+        padding: 2rem !important;
+        text-align: center !important;
+        transition: all 0.2s ease !important;
+    }
+    .gr-file:hover {
+        border-color: var(--primary-color) !important;
+        background: rgba(37, 99, 235, 0.05) !important;
+    }
+    /* Accordion styling */
+    .gr-accordion {
+        border: 1px solid var(--border-color) !important;
+        border-radius: var(--radius-md) !important;
+        background: var(--bg-primary) !important;
+        margin-bottom: 1rem !important;
+    }
+    .gr-accordion-header {
+        background: var(--bg-secondary) !important;
+        padding: 1rem !important;
+        font-weight: 600 !important;
+        color: var(--text-primary) !important;
+        border-bottom: 1px solid var(--border-color) !important;
+    }
+    /* Slider styling */
+    .gr-slider {
+        margin: 1rem 0 !important;
+    }
+    .gr-slider input[type="range"] {
+        appearance: none !important;
+        background: var(--bg-secondary) !important;
+        border-radius: var(--radius-lg) !important;
+        height: 8px !important;
+    }
+    .gr-slider input[type="range"]::-webkit-slider-thumb {
+        appearance: none !important;
+        width: 20px !important;
+        height: 20px !important;
+        border-radius: 50% !important;
+        background: var(--primary-color) !important;
+        cursor: pointer !important;
+        box-shadow: var(--shadow-sm) !important;
+    }
+    .gr-slider input[type="range"]::-moz-range-thumb {
+        width: 20px !important;
+        height: 20px !important;
+        border-radius: 50% !important;
+        background: var(--primary-color) !important;
+        cursor: pointer !important;
+        border: none !important;
+        box-shadow: var(--shadow-sm) !important;
+    }
+    /* Loading and status indicators */
+    .gr-loading {
+        display: flex !important;
+        align-items: center !important;
+        justify-content: center !important;
+        padding: 2rem !important;
+        color: var(--text-secondary) !important;
+    }
+    /* Scrollbar styling */
+    ::-webkit-scrollbar {
+        width: 8px !important;
+        height: 8px !important;
+    }
+    ::-webkit-scrollbar-track {
+        background: var(--bg-secondary) !important;
+        border-radius: var(--radius-sm) !important;
+    }
+    ::-webkit-scrollbar-thumb {
+        background: var(--border-color) !important;
+        border-radius: var(--radius-sm) !important;
+    }
+    ::-webkit-scrollbar-thumb:hover {
+        background: var(--text-secondary) !important;
+    }
+    /* Animation classes */
+    .fade-in {
+        animation: fadeIn 0.3s ease-in-out !important;
+    }
+    @keyframes fadeIn {
+        from { opacity: 0; transform: translateY(10px); }
+        to { opacity: 1; transform: translateY(0); }
+    }
     /* Accessibility improvements */
+    .gr-button:focus-visible,
+    .gr-textbox input:focus-visible,
+    .gr-textbox textarea:focus-visible {
+        outline: 2px solid var(--primary-color) !important;
+        outline-offset: 2px !important;
+    }
+    /* Print styles */
+    @media print {
+        .gr-button,
+        .gr-file,
+        .gr-slider {
+            display: none !important;
+        }
+        .gr-textbox textarea,
+        .gr-textbox input {
+            border: 1px solid #000 !important;
+            background: white !important;
+        }
+    }
+    /* High contrast mode support */
+    @media (prefers-contrast: high) {
+        :root {
+            --border-color: #000000;
+            --text-primary: #000000;
+            --text-secondary: #333333;
+            --bg-primary: #ffffff;
+            --bg-secondary: #f0f0f0;
+        }
+    }
+    /* Reduced motion support */
+    @media (prefers-reduced-motion: reduce) {
+        * {
+            animation-duration: 0.01ms !important;
+            animation-iteration-count: 1 !important;
+            transition-duration: 0.01ms !important;
+        }
+    }
+    /* Error and success states */
+    .gr-textbox.error textarea,
+    .gr-textbox.error input {
+        border-color: #ef4444 !important;
+        background: rgba(239, 68, 68, 0.05) !important;
+    }
+    .gr-textbox.success textarea,
+    .gr-textbox.success input {
+        border-color: var(--secondary-color) !important;
+        background: rgba(16, 185, 129, 0.05) !important;
+    }
+    /* Custom status messages */
+    .status-message {
+        padding: 0.75rem 1rem !important;
+        border-radius: var(--radius-md) !important;
+        margin: 0.5rem 0 !important;
+        font-size: 0.875rem !important;
+        font-weight: 500 !important;
+    }
+    .status-success {
+        background: rgba(16, 185, 129, 0.1) !important;
+        color: #059669 !important;
+        border: 1px solid rgba(16, 185, 129, 0.2) !important;
+    }
+    .status-error {
+        background: rgba(239, 68, 68, 0.1) !important;
+        color: #dc2626 !important;
+        border: 1px solid rgba(239, 68, 68, 0.2) !important;
+    }
+    .status-warning {
+        background: rgba(245, 158, 11, 0.1) !important;
+        color: #d97706 !important;
+        border: 1px solid rgba(245, 158, 11, 0.2) !important;
+    }
+    /* Enhanced focus styles for accessibility */
     .gr-button:focus,
+    .gr-textbox input:focus,
+    .gr-textbox textarea:focus,
     .gr-file:focus {
+        outline: 2px solid var(--primary-color) !important;
         outline-offset: 2px !important;
     }
+    /* Custom scrollable areas */
+    .scrollable-content {
+        max-height: 400px !important;
+        overflow-y: auto !important;
+        padding: 1rem !important;
+        background: var(--bg-secondary) !important;
+        border-radius: var(--radius-md) !important;
+        border: 1px solid var(--border-color) !important;
     }
     """
+    # Create the interface
+    with gr.Blocks(css=custom_css, title="📚 RAG PDF Chat Interface", theme=gr.themes.Soft()) as interface:
+        # Header
         gr.Markdown("""
+        # 📚 RAG PDF Chat Interface
+        **Upload PDF documents and ask questions about their content using advanced AI**
+        This interface allows you to:
+        - Upload PDF files or ZIP archives containing PDFs
+        - Process documents using state-of-the-art text chunking and embedding techniques
+        - Ask questions about your documents using natural language
+        - Get accurate answers with source citations
         """)
+        # Main interface layout
         with gr.Row():
+            # Left column - Controls
+            with gr.Column(scale=1):
+                # Pre-loaded PDFs section
+                with gr.Accordion("📁 Pre-loaded PDFs", open=PRELOADED_PDFS):
+                    gr.Markdown("""
+                    **Option 1: Use pre-existing PDFs**
+                    If you have PDFs in the `./pdfs` folder, click the button below to process them.
+                    """)
+                    preload_btn = gr.Button(
+                        "🔄 Load Pre-existing PDFs",
+                        variant="secondary",
+                        size="sm"
+                    )
+                    preload_status = gr.Textbox(
+                        label="Pre-load Status",
+                        interactive=False,
+                        lines=2
+                    )
+                # ZIP upload section
+                with gr.Accordion("📦 Upload ZIP Archive", open=False):
+                    gr.Markdown("""
+                    **Option 2: Upload ZIP containing PDFs**
+                    Upload a ZIP file containing PDF documents. They will be extracted to the PDFs folder.
+                    """)
+                    zip_file = gr.File(
+                        label="Upload ZIP Archive",
+                        file_types=[".zip"],
+                        file_count="single"
+                    )
+                    zip_btn = gr.Button(
+                        "📦 Extract ZIP to PDFs",
+                        variant="secondary",
+                        size="sm"
+                    )
+                    zip_status = gr.Textbox(
+                        label="ZIP Status",
+                        interactive=False,
+                        lines=2
+                    )
+                # Direct PDF upload section
+                with gr.Accordion("📄 Upload PDF Files", open=True):
+                    gr.Markdown("""
+                    **Option 3: Direct PDF upload**
+                    Upload PDF files directly for processing.
+                    """)
+                    pdf_files = gr.File(
+                        label="Upload PDF Files",
+                        file_types=[".pdf"],
+                        file_count="multiple"
+                    )
+                # Processing parameters
+                with gr.Accordion("⚙️ Processing Parameters", open=False):
+                    gr.Markdown("""
+                    **Advanced Settings**
+                    Adjust these parameters to optimize document processing for your specific needs.
+                    """)
                     chunk_size = gr.Slider(
+                        minimum=500,
                         maximum=2000,
                         value=1000,
                         step=100,
                         label="Chunk Size",
+                        info="Size of text chunks for processing (larger = more context, smaller = more precise)"
                     )
                     chunk_overlap = gr.Slider(
                         value=200,
                         step=50,
                         label="Chunk Overlap",
+                        info="Overlap between chunks (helps maintain context across boundaries)"
                     )
+                # Process button
+                process_btn = gr.Button(
+                    "🚀 Process Documents",
+                    variant="primary",
+                    size="lg"
                 )
+                # Status display
+                status_output = gr.Textbox(
+                    label="Processing Status",
+                    interactive=False,
+                    lines=4
                 )
+            # Right column - Chat interface
+            with gr.Column(scale=2):
+                # Chat interface
+                with gr.Tab("💬 Chat with Documents"):
+                    gr.Markdown("""
+                    **Ask questions about your documents**
+                    Once you've processed your PDFs, you can ask questions about their content.
+                    The AI will provide answers based on the information in your documents.
+                    """)
+                    # Question input
+                    question_input = gr.Textbox(
+                        label="Ask a question about your documents",
+                        placeholder="e.g., What is the main topic discussed in the document?",
+                        lines=2
                     )
+                    # Ask button
+                    ask_btn = gr.Button(
+                        "🔍 Ask Question",
+                        variant="primary",
+                        size="lg"
                     )
+                    # Answer display
+                    with gr.Row():
+                        with gr.Column():
+                            answer_output = gr.Textbox(
+                                label="Answer",
+                                interactive=False,
+                                lines=8
+                            )
+                        with gr.Column():
+                            sources_output = gr.Textbox(
+                                label="Sources & References",
+                                interactive=False,
+                                lines=8
+                            )
+                # Help tab
+                with gr.Tab("❓ Help & Tips"):
+                    gr.Markdown("""
+                    ## 🔧 How to Use This Interface
+                    ### Step 1: Upload Documents
+                    Choose one of three options:
+                    - **Pre-loaded PDFs**: Use documents already in the `./pdfs` folder
+                    - **ZIP Archive**: Upload a ZIP file containing multiple PDFs
+                    - **Direct Upload**: Upload PDF files directly
+                    ### Step 2: Process Documents
+                    Click "Process Documents" to:
+                    - Extract text from PDFs
+                    - Split text into manageable chunks
+                    - Create embeddings for semantic search
+                    - Set up the question-answering system
+                    ### Step 3: Ask Questions
+                    Once processing is complete, you can:
+                    - Ask specific questions about document content
+                    - Get answers with source citations
+                    - Explore different aspects of your documents
+                    ## 💡 Tips for Better Results
+                    ### Question Formatting
+                    - **Good**: "What are the main findings about climate change?"
+                    - **Better**: "What specific evidence does the document provide about climate change impacts?"
+                    - **Best**: "According to the research, what are the three most significant climate change impacts on agriculture?"
+                    ### Document Preparation
+                    - Use high-quality, text-based PDFs (not scanned images)
+                    - Ensure documents are well-structured with clear headings
+                    - Remove unnecessary pages to improve processing speed
+                    ### Processing Parameters
+                    - **Chunk Size**:
+                      - Larger (1500-2000): Better for broad context questions
+                      - Smaller (500-1000): Better for specific detail questions
+                    - **Chunk Overlap**:
+                      - More overlap (200-300): Better context continuity
+                      - Less overlap (0-100): Faster processing
+                    ## 🚨 Troubleshooting
+                    ### Common Issues
+                    - **"No documents loaded"**: Check PDF file format and quality
+                    - **"Model initialization failed"**: Verify HuggingFace token is set
+                    - **"Processing timeout"**: Try smaller chunk sizes or fewer documents
+                    - **"Empty answers"**: Rephrase questions or check document content
+                    ### System Requirements
+                    - **HuggingFace Token**: Required for AI model access
+                    - **Memory**: At least 4GB RAM recommended for large documents
+                    - **Storage**: Sufficient space for temporary file processing
+                    ## 🔒 Privacy & Security
+                    - Documents are processed locally when possible
+                    - No document content is permanently stored
+                    - AI model queries may be sent to HuggingFace servers
+                    - Remove sensitive information before processing
+                    ## 📚 Supported Features
+                    - **File Types**: PDF documents only
+                    - **Languages**: Primarily English, limited support for other languages
+                    - **Document Size**: Up to 50MB per PDF recommended
+                    - **Concurrent Processing**: Multiple documents simultaneously
+                    ---
+                    *Need more help? Check the console output for detailed error messages and logs.*
+                    """)
+        # Event handlers
+        def handle_preload():
+            return load_preloaded_pdfs()
+        def handle_zip_extract(zip_file):
+            return extract_zip_to_pdfs(zip_file)
+        def handle_process(pdf_files, chunk_size, chunk_overlap):
+            return process_pdfs(pdf_files, chunk_size, chunk_overlap)
+        def handle_question(question):
+            return answer_question(question)
+        # Connect event handlers
         preload_btn.click(
+            fn=handle_preload,
+            outputs=preload_status
         )
+        zip_btn.click(
+            fn=handle_zip_extract,
+            inputs=zip_file,
+            outputs=zip_status
+        )
+        process_btn.click(
+            fn=handle_process,
+            inputs=[pdf_files, chunk_size, chunk_overlap],
+            outputs=status_output
         )
         ask_btn.click(
+            fn=handle_question,
+            inputs=question_input,
             outputs=[answer_output, sources_output]
         )
+        # Enable Enter key for question input
         question_input.submit(
+            fn=handle_question,
+            inputs=question_input,
             outputs=[answer_output, sources_output]
         )
+        # Add keyboard shortcuts info
         gr.Markdown("""
         ---
+        **💡 Keyboard Shortcuts**: Press Enter in the question box to ask your question quickly!
         """)
+    return interface
 # Main execution
 if __name__ == "__main__":
+    # Initialize the interface
+    interface = create_interface()
+    # Check system status
+    print("🔍 System Status Check:")
+    print(f"✅ LangChain Available: {LANGCHAIN_AVAILABLE}")
+    print(f"✅ HuggingFace Hub Available: {HUGGINGFACE_HUB_AVAILABLE}")
+    print(f"✅ Pre-loaded PDFs: {PRELOADED_PDFS}")
+    print(f"✅ PDF Folder: {PDF_FOLDER_PATH}")
+    # Check for HuggingFace token
+    hf_token = os.getenv("HUGGINGFACEHUB_API_TOKEN")
+    if hf_token:
+        print("✅ HuggingFace API Token: Found")
+    else:
+        print("❌ HuggingFace API Token: Not found - Please set HUGGINGFACEHUB_API_TOKEN environment variable")
+    # Launch the interface
     try:
+        interface.launch(
+            server_name="0.0.0.0",
+            server_port=7860,
+            share=False,
+            debug=False,
+            show_error=True,
+            show_tips=True,
+            enable_queue=True,
+            max_threads=10,
+            auth=None,  # Add authentication if needed
+            favicon_path=None,
+            ssl_keyfile=None,
+            ssl_certfile=None,
+            ssl_keyfile_password=None,
+            height=800,
+            width="100%",
+            prevent_thread_lock=False,
+            allowed_paths=[PDF_FOLDER_PATH],
+            blocked_paths=None,
+            root_path=None,
+            app_kwargs=None
         )
     except Exception as e:
+        logger.error(f"Failed to launch interface: {e}")
         print(f"❌ Failed to launch interface: {e}")
+        print("🔧 Try running with: python your_script.py")