Update app.py

app.py

@@ -327,137 +327,521 @@ Question: {query} [/INST]</s>"""
         return "Conversation has been reset."
 
 # Main function with Gradio UI
+import os
+import re
+import json
+import time
+from tqdm import tqdm
+from pathlib import Path
+import spaces
+import gradio as gr
+
+# WARNING: Don't import torch, cuda, or GPU-related modules at the top level
+# All previous helper functions and classes remain the same
+
 def main():
     # Create the Vision 2030 service
     service = Vision2030Service()
     
-    # Build the Gradio interface
-    with gr.Blocks(title="Vision 2030 Assistant") as demo:
-        gr.Markdown("# Vision 2030 Assistant")
-        gr.Markdown("Ask questions about Saudi Vision 2030 in English or Arabic")
+    # Define theme and styling
+    theme = gr.themes.Soft(
+        primary_hue="emerald",
+        secondary_hue="teal",
+    ).set(
+        body_background_fill="linear-gradient(to right, #f0f9ff, #e6f7ff)",
+        button_primary_background_fill="linear-gradient(90deg, #1e9e5a, #1d8753)",
+        button_primary_background_fill_hover="linear-gradient(90deg, #1d8753, #176f44)",
+        button_primary_text_color="white",
+        button_secondary_background_fill="#f0f0f0",
+        button_secondary_background_fill_hover="#e0e0e0",
+        block_title_text_weight="600",
+        block_border_width="2px",
+        block_shadow="0px 4px 6px rgba(0, 0, 0, 0.1)",
+        background_fill_primary="#ffffff",
+    )
+    
+    # Build the Gradio interface with enhanced styling
+    with gr.Blocks(title="Vision 2030 Assistant", theme=theme, css="""
+        .language-toggle { margin-bottom: 20px; }
+        .container { border-radius: 10px; padding: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
+        .header-img { margin-bottom: 10px; border-radius: 10px; }
+        .highlight { background-color: rgba(46, 175, 125, 0.1); padding: 15px; border-radius: 8px; margin: 10px 0; }
+        .footer { text-align: center; margin-top: 30px; color: #666; font-size: 0.9em; }
+        .loading-spinner { display: inline-block; width: 20px; height: 20px; margin-right: 10px; }
+        .status-indicator { display: inline-flex; align-items: center; padding: 8px; border-radius: 4px; }
+        .status-indicator.success { background-color: rgba(46, 175, 125, 0.2); }
+        .status-indicator.warning { background-color: rgba(255, 190, 0, 0.2); }
+        .status-indicator.error { background-color: rgba(255, 76, 76, 0.2); }
+        .header { display: flex; justify-content: space-between; align-items: center; }
+        .lang-btn { min-width: 100px; }
+        .chat-input { background-color: white; border-radius: 8px; border: 1px solid #ddd; }
+        .info-box { background-color: #f8f9fa; padding: 10px; border-radius: 8px; margin-top: 10px; }
+    """) as demo:
+        # Header with logo and title
+        with gr.Row():
+            with gr.Column(scale=1):
+                gr.Image("https://www.vision2030.gov.sa/media/g0dp5h3t/vision-2030-logo-en.png", 
+                         show_label=False, container=False, height=100, 
+                         elem_classes=["header-img"])
+            with gr.Column(scale=3):
+                gr.Markdown("""
+                # Vision 2030 Assistant
+                ### Your interactive guide to Saudi Arabia's national transformation program
+                """)
+            
+        # Language toggle in the header
+        with gr.Row(elem_classes=["language-toggle"]):
+            language_toggle = gr.Radio(
+                choices=["English", "العربية (Arabic)", "Auto-detect"],
+                value="Auto-detect",
+                label="Interface Language",
+                info="Choose your preferred language",
+                elem_classes=["lang-btn"]
+            )
         
-        with gr.Tab("Chat"):
-            chatbot = gr.Chatbot()
-            msg = gr.Textbox(label="Your question", placeholder="Ask about Vision 2030...")
-            clear = gr.Button("Clear History")
-            
-            @spaces.GPU
-            def respond(message, history):
-                if not message:
-                    return history, ""
-                
-                response, sources = service.answer_question(message)
-                sources_text = ", ".join(sources) if sources else "No specific sources"
-                
-                # Format the response to include sources
-                full_response = f"{response}\n\nSources: {sources_text}"
-                
-                return history + [[message, full_response]], ""
-            
-            def reset_chat():
-                service.reset_conversation()
-                return [], "Conversation history has been reset."
+        # Main interface with tabs
+        with gr.Tabs() as tabs:
+            # Chat Tab with enhanced design
+            with gr.TabItem("💬 Chat", id="chat"):
+                with gr.Row():
+                    with gr.Column(scale=2):
+                        chatbot = gr.Chatbot(
+                            height=450,
+                            bubble_full_width=False,
+                            avatar_images=(
+                                "https://api.iconify.design/fluent-emoji:person.svg",
+                                "https://api.iconify.design/fluent-emoji:robot.svg"
+                            ),
+                            show_label=False
+                        )
+                        
+                        with gr.Row():
+                            msg = gr.Textbox(
+                                label="",
+                                placeholder="Ask a question about Saudi Vision 2030...",
+                                show_label=False,
+                                elem_classes=["chat-input"],
+                                scale=9
+                            )
+                            submit_btn = gr.Button("Send", variant="primary", scale=1)
+                            
+                        with gr.Row():
+                            clear = gr.Button("Clear History", variant="secondary")
+                            thinking_indicator = gr.HTML(
+                                value='<div id="thinking" style="display:none;">The assistant is thinking...</div>',
+                                visible=True
+                            )
+                            
+                    # Sidebar with features
+                    with gr.Column(scale=1):
+                        gr.Markdown("### Quick Information")
+                        
+                        with gr.Accordion("Vision 2030 Pillars", open=False):
+                            gr.Markdown("""
+                            * **Vibrant Society** - Cultural and social development
+                            * **Thriving Economy** - Economic diversification
+                            * **Ambitious Nation** - Effective governance
+                            """)
+                        
+                        with gr.Accordion("About this Assistant", open=False):
+                            gr.Markdown("""
+                            This assistant uses advanced NLP models to answer questions about Saudi Vision 2030 in both English and Arabic. The system retrieves information from official documents and provides relevant answers.
+                            """)
+                            
+                        system_status = gr.HTML(
+                            value='<div class="status-indicator warning">⚠️ System initializing</div>',
+                            visible=True
+                        )
+                        
+                        init_btn = gr.Button("Initialize System", variant="primary")
+                        
+                        # Add a sample questions dropdown
+                        sample_questions_dropdown = gr.Dropdown(
+                            choices=[
+                                "What is Saudi Vision 2030?",
+                                "ما هي رؤية السعودية 2030؟",
+                                "What are the economic goals of Vision 2030?",
+                                "ما هي الأهداف الاقتصادية لرؤية 2030؟",
+                                "How does Vision 2030 aim to improve quality of life?",
+                                "كيف تعزز رؤية 2030 الإرث الثقافي السعودي؟"
+                            ],
+                            label="Sample Questions",
+                            info="Select a question to try",
+                            interactive=True
+                        )
             
-            msg.submit(respond, [msg, chatbot], [chatbot, msg])
-            clear.click(reset_chat, None, [chatbot, msg])
-        
-        with gr.Tab("System Status"):
-            init_btn = gr.Button("Initialize System")
-            status_box = gr.Textbox(label="Status", value="System not initialized")
-            
-            @spaces.GPU
-            def initialize_system():
-                success = service.initialize()
-                if success:
-                    return "System initialized successfully!"
-                else:
-                    return "System initialization failed. Check logs for details."
-            
-            init_btn.click(initialize_system, None, status_box)
-            
-            # PDF Check section
-            gr.Markdown("### PDF Status")
-            pdf_btn = gr.Button("Check PDF Files")
-            pdf_status = gr.Textbox(label="PDF Files")
-            
-            def check_pdfs():
-                result = []
-                for pdf_file in ["saudi_vision203.pdf", "saudi_vision2030_ar.pdf"]:
-                    if os.path.exists(pdf_file):
-                        size = os.path.getsize(pdf_file) / (1024 * 1024)  # Size in MB
-                        result.append(f"{pdf_file}: Found ({size:.2f} MB)")
-                    else:
-                        result.append(f"{pdf_file}: Not found")
-                return "\n".join(result)
-            
-            pdf_btn.click(check_pdfs, None, pdf_status)
-            
-            # System check section
-            gr.Markdown("### Dependencies")
-            sys_btn = gr.Button("Check Dependencies")
-            sys_status = gr.Textbox(label="Dependencies Status")
-            
-            @spaces.GPU
-            def check_dependencies():
-                result = []
-                
-                # Safe imports inside GPU-decorated function
-                try:
-                    import torch
-                    result.append(f"✓ PyTorch: {torch.__version__}")
-                except ImportError:
-                    result.append("✗ PyTorch: Not installed")
-                
-                try:
-                    import transformers
-                    result.append(f"✓ Transformers: {transformers.__version__}")
-                except ImportError:
-                    result.append("✗ Transformers: Not installed")
-                
-                try:
-                    import sentencepiece
-                    result.append("✓ SentencePiece: Installed")
-                except ImportError:
-                    result.append("✗ SentencePiece: Not installed")
-                
-                try:
-                    import accelerate
-                    result.append(f"✓ Accelerate: {accelerate.__version__}")
-                except ImportError:
-                    result.append("✗ Accelerate: Not installed")
+            # Analytics and insights tab
+            with gr.TabItem("📊 Analytics", id="analytics"):
+                gr.Markdown("### Vision 2030 Progress Tracking")
                 
-                try:
-                    import langchain
-                    result.append(f"✓ LangChain: {langchain.__version__}")
-                except ImportError:
-                    result.append("✗ LangChain: Not installed")
-                
-                try:
-                    import langchain_community
-                    result.append(f"✓ LangChain Community: {langchain_community.__version__}")
-                except ImportError:
-                    result.append("✗ LangChain Community: Not installed")
+                with gr.Tabs():
+                    with gr.TabItem("Economic Metrics"):
+                        gr.Markdown("""
+                        <div class="highlight">
+                        <h3>Key Economic Indicators</h3>
+                        <p>This section displays real-time progress on economic targets of Vision 2030.</p>
+                        </div>
+                        """)
+                        
+                        with gr.Row():
+                            with gr.Column():
+                                gr.HTML("""
+                                <div style="background: white; padding: 15px; border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);">
+                                    <h4>GDP Non-oil Growth</h4>
+                                    <div style="height: 20px; background-color: #e0e0e0; border-radius: 10px; margin: 10px 0;">
+                                        <div style="height: 100%; width: 68%; background: linear-gradient(to right, #1e9e5a, #63e6be); border-radius: 10px;">
+                                        </div>
+                                    </div>
+                                    <div style="display: flex; justify-content: space-between;">
+                                        <span>Target: 65%</span>
+                                        <span>Current: 44%</span>
+                                    </div>
+                                </div>
+                                """)
+                            
+                            with gr.Column():
+                                gr.HTML("""
+                                <div style="background: white; padding: 15px; border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);">
+                                    <h4>Unemployment Rate</h4>
+                                    <div style="height: 20px; background-color: #e0e0e0; border-radius: 10px; margin: 10px 0;">
+                                        <div style="height: 100%; width: 55%; background: linear-gradient(to right, #1e9e5a, #63e6be); border-radius: 10px;">
+                                        </div>
+                                    </div>
+                                    <div style="display: flex; justify-content: space-between;">
+                                        <span>Target: 7%</span>
+                                        <span>Current: 9.9%</span>
+                                    </div>
+                                </div>
+                                """)
+                            
+                            with gr.Column():
+                                gr.HTML("""
+                                <div style="background: white; padding: 15px; border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);">
+                                    <h4>SME Contribution to GDP</h4>
+                                    <div style="height: 20px; background-color: #e0e0e0; border-radius: 10px; margin: 10px 0;">
+                                        <div style="height: 100%; width: 32%; background: linear-gradient(to right, #1e9e5a, #63e6be); border-radius: 10px;">
+                                        </div>
+                                    </div>
+                                    <div style="display: flex; justify-content: space-between;">
+                                        <span>Target: 35%</span>
+                                        <span>Current: 22%</span>
+                                    </div>
+                                </div>
+                                """)
+                    
+                    with gr.TabItem("Social Development"):
+                        gr.Markdown("#### Social Initiative Progress")
+                        
+                        social_chart = gr.HTML("""
+                        <div style="background: white; padding: 20px; border-radius: 10px; margin-top: 15px;">
+                            <h3>Quality of Life Improvement Programs</h3>
+                            <div style="display: flex; height: 200px; align-items: flex-end; justify-content: space-around; margin: 30px 0;">
+                                <div style="display: flex; flex-direction: column; align-items: center;">
+                                    <div style="width: 50px; height: 150px; background: linear-gradient(to top, #1e9e5a, #63e6be); border-radius: 5px 5px 0 0;"></div>
+                                    <span style="margin-top: 10px;">Tourism</span>
+                                </div>
+                                <div style="display: flex; flex-direction: column; align-items: center;">
+                                    <div style="width: 50px; height: 120px; background: linear-gradient(to top, #1e9e5a, #63e6be); border-radius: 5px 5px 0 0;"></div>
+                                    <span style="margin-top: 10px;">Entertainment</span>
+                                </div>
+                                <div style="display: flex; flex-direction: column; align-items: center;">
+                                    <div style="width: 50px; height: 180px; background: linear-gradient(to top, #1e9e5a, #63e6be); border-radius: 5px 5px 0 0;"></div>
+                                    <span style="margin-top: 10px;">Healthcare</span>
+                                </div>
+                                <div style="display: flex; flex-direction: column; align-items: center;">
+                                    <div style="width: 50px; height: 100px; background: linear-gradient(to top, #1e9e5a, #63e6be); border-radius: 5px 5px 0 0;"></div>
+                                    <span style="margin-top: 10px;">Housing</span>
+                                </div>
+                                <div style="display: flex; flex-direction: column; align-items: center;">
+                                    <div style="width: 50px; height: 160px; background: linear-gradient(to top, #1e9e5a, #63e6be); border-radius: 5px 5px 0 0;"></div>
+                                    <span style="margin-top: 10px;">Education</span>
+                                </div>
+                            </div>
+                        </div>
+                        """)
+
+                    with gr.TabItem("Giga-Projects"):
+                        gr.Markdown("#### Major Development Projects")
+                        
+                        with gr.Row():
+                            for project, desc in [
+                                ("NEOM", "A $500 billion mega-city with advanced technologies"),
+                                ("Red Sea Project", "Luxury tourism destination across 28,000 km²"),
+                                ("Qiddiya", "Entertainment, sports and arts destination")
+                            ]:
+                                with gr.Column():
+                                    gr.HTML(f"""
+                                    <div style="background: white; padding: 15px; border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); height: 200px; position: relative; overflow: hidden;">
+                                        <div style="position: absolute; top: 0; left: 0; width: 100%; height: 70px; background: linear-gradient(90deg, #1e9e5a, #45b08c); border-radius: 10px 10px 0 0;"></div>
+                                        <div style="position: relative; padding-top: 80px; text-align: center;">
+                                            <h3>{project}</h3>
+                                            <p>{desc}</p>
+                                            <button style="background: #1e9e5a; color: white; border: none; padding: 8px 15px; border-radius: 5px; cursor: pointer; margin-top: 15px;">Learn More</button>
+                                        </div>
+                                    </div>
+                                    """)
                 
-                return "\n".join(result)
-            
-            sys_btn.click(check_dependencies, None, sys_status)
+            # Technical System Status with improved visualization
+            with gr.TabItem("⚙️ System", id="system"):
+                with gr.Row():
+                    with gr.Column():
+                        gr.Markdown("### System Diagnostics")
+                        
+                        status_box = gr.Textbox(
+                            label="Status", 
+                            value="System not initialized",
+                            lines=1
+                        )
+                        
+                        with gr.Group():
+                            gr.Markdown("### PDF Documents")
+                            pdf_status = gr.Dataframe(
+                                headers=["File", "Status", "Size"],
+                                datatype=["str", "str", "str"],
+                                col_count=(3, "fixed"),
+                                value=[["saudi_vision203.pdf", "Checking...", ""],
+                                       ["saudi_vision2030_ar.pdf", "Checking...", ""]]
+                            )
+                            pdf_btn = gr.Button("Check PDF Files", variant="secondary")
+                        
+                        gr.Markdown("### System Dependencies")
+                        sys_status = gr.Dataframe(
+                            headers=["Component", "Status"],
+                            datatype=["str", "str"],
+                            col_count=(2, "fixed"),
+                            value=[["PyTorch", "Not checked"],
+                                   ["Transformers", "Not checked"],
+                                   ["LangChain", "Not checked"],
+                                   ["FAISS", "Not checked"]]
+                        )
+                        sys_btn = gr.Button("Check Dependencies", variant="secondary")
+                    
+                    # Visualization column
+                    with gr.Column():
+                        gr.Markdown("### System Architecture")
+                        gr.HTML("""
+                        <div style="background: white; padding: 20px; border-radius: 10px; margin-top: 15px;">
+                            <svg viewBox="0 0 800 500" xmlns="http://www.w3.org/2000/svg">
+                                <!-- User Input -->
+                                <rect x="50" y="50" width="150" height="60" rx="10" fill="#e6f7ff" stroke="#1e9e5a" stroke-width="2"/>
+                                <text x="125" y="85" text-anchor="middle" font-size="16">User Query</text>
+                                
+                                <!-- Arrow down -->
+                                <path d="M125 110 L125 160" stroke="#1e9e5a" stroke-width="3" stroke-dasharray="5,5"/>
+                                <polygon points="125,170 120,160 130,160" fill="#1e9e5a"/>
+                                
+                                <!-- RAG System -->
+                                <rect x="50" y="170" width="150" height="60" rx="10" fill="#e6f7ff" stroke="#1e9e5a" stroke-width="2"/>
+                                <text x="125" y="205" text-anchor="middle" font-size="16">RAG System</text>
+                                
+                                <!-- Arrow right -->
+                                <path d="M200 200 L300 200" stroke="#1e9e5a" stroke-width="3" stroke-dasharray="5,5"/>
+                                <polygon points="310,200 300,195 300,205" fill="#1e9e5a"/>
+                                
+                                <!-- Document Store -->
+                                <rect x="310" y="170" width="150" height="60" rx="10" fill="#e6f7ff" stroke="#1e9e5a" stroke-width="2"/>
+                                <text x="385" y="195" text-anchor="middle" font-size="16">Vector Store</text>
+                                <text x="385" y="215" text-anchor="middle" font-size="14">(FAISS)</text>
+                                
+                                <!-- Document icons -->
+                                <rect x="350" y="270" width="30" height="40" fill="#e6f7ff" stroke="#1e9e5a" stroke-width="1"/>
+                                <rect x="355" y="265" width="30" height="40" fill="#e6f7ff" stroke="#1e9e5a" stroke-width="1"/>
+                                <rect x="360" y="260" width="30" height="40" fill="#e6f7ff" stroke="#1e9e5a" stroke-width="1"/>
+                                <text x="375" y="330" text-anchor="middle" font-size="14">PDF Docs</text>
+                                
+                                <!-- Arrow up -->
+                                <path d="M375 260 L375 230" stroke="#1e9e5a" stroke-width="2"/>
+                                <polygon points="375,230 370,240 380,240" fill="#1e9e5a"/>
+                                
+                                <!-- Arrow back to RAG -->
+                                <path d="M310 220 L200 220" stroke="#1e9e5a" stroke-width="3" stroke-dasharray="5,5"/>
+                                <polygon points="190,220 200,215 200,225" fill="#1e9e5a"/>
+                                
+                                <!-- Arrow down from RAG -->
+                                <path d="M125 230 L125 280" stroke="#1e9e5a" stroke-width="3"/>
+                                <polygon points="125,290 120,280 130,280" fill="#1e9e5a"/>
+                                
+                                <!-- LLM -->
+                                <rect x="50" y="290" width="150" height="60" rx="10" fill="#e6f7ff" stroke="#1e9e5a" stroke-width="2"/>
+                                <text x="125" y="315" text-anchor="middle" font-size="16">ALLaM Model</text>
+                                <text x="125" y="335" text-anchor="middle" font-size="14">(7B Params)</text>
+                                
+                                <!-- Arrow down -->
+                                <path d="M125 350 L125 400" stroke="#1e9e5a" stroke-width="3"/>
+                                <polygon points="125,410 120,400 130,400" fill="#1e9e5a"/>
+                                
+                                <!-- User Response -->
+                                <rect x="50" y="410" width="150" height="60" rx="10" fill="#e6f7ff" stroke="#1e9e5a" stroke-width="2"/>
+                                <text x="125" y="445" text-anchor="middle" font-size="16">Response</text>
+                            </svg>
+                        </div>
+                        """)
+            
+                        # Memory usage visualization
+                        gr.Markdown("### System Resources")
+                        gr.HTML("""
+                        <div style="background: white; padding: 15px; border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); margin-top: 15px;">
+                            <h4>GPU Memory Usage</h4>
+                            <div style="height: 20px; background-color: #e0e0e0; border-radius: 10px; margin: 10px 0;">
+                                <div style="height: 100%; width: 72%; background: linear-gradient(to right, #1e9e5a, #ffc107); border-radius: 10px;">
+                                </div>
+                            </div>
+                            <div style="display: flex; justify-content: space-between;">
+                                <span>Total: 16GB</span>
+                                <span>Used: 11.5GB</span>
+                            </div>
+                            
+                            <h4 style="margin-top: 20px;">CPU Usage</h4>
+                            <div style="height: 20px; background-color: #e0e0e0; border-radius: 10px; margin: 10px 0;">
+                                <div style="height: 100%; width: 45%; background: linear-gradient(to right, #1e9e5a, #63e6be); border-radius: 10px;">
+                                </div>
+                            </div>
+                            <div style="display: flex; justify-content: space-between;">
+                                <span>0%</span>
+                                <span>45%</span>
+                                <span>100%</span>
+                            </div>
+                        </div>
+                        """)
+                        
+        # Footer
+        gr.HTML("""
+        <div class="footer">
+            <p>Vision 2030 Assistant • Powered by ALLaM-7B-Instruct • © 2025</p>
+        </div>
+        """)
         
-        with gr.Tab("Sample Questions"):
-            gr.Markdown("### Sample Questions to Try")
-            
-            sample_questions = []
+        # JavaScript for animations and enhanced UI effects
+        demo.load(js="""
+        function setupThinking() {
+            const thinking = document.getElementById('thinking');
+            
+            function animateThinking() {
+                if (thinking) {
+                    thinking.style.display = 'block';
+                    let dots = '.';
+                    setInterval(() => {
+                        dots = dots.length < 3 ? dots + '.' : '.';
+                        thinking.innerHTML = `<div class="status-indicator">🤔 The assistant is thinking${dots}</div>`;
+                    }, 500);
+                }
+            }
+            
+            // Demo code to show the thinking animation
+            document.querySelectorAll('button').forEach(btn => {
+                if (btn.textContent.includes('Send')) {
+                    btn.addEventListener('click', () => {
+                        setTimeout(() => {
+                            animateThinking();
+                        }, 100);
+                    });
+                }
+            });
+        }
+        
+        // Run setup when page loads
+        if (document.readyState === 'complete') {
+            setupThinking();
+        } else {
+            window.addEventListener('load', setupThinking);
+        }
+        """)
+        
+        # Event handlers
+        @spaces.GPU
+        def respond(message, history):
+            if not message:
+                return history, ""
             
-            for item in comprehensive_evaluation_data:
-                sample_questions.append(item["query"])
+            # Set thinking indicator
+            time.sleep(0.5)  # Simulate thinking time
             
-            questions_md = "\n".join([f"- {q}" for q in sample_questions])
-            gr.Markdown(questions_md)
+            response, sources = service.answer_question(message)
+            sources_text = ", ".join(sources) if sources else "No specific sources"
             
-            # Add a button to auto-initialize the system when viewing sample questions
-            auto_init_btn = gr.Button("Initialize System First")
-            auto_init_status = gr.Textbox(label="Initialization Status")
+            # Format the response to include sources
+            full_response = f"{response}\n\nSources: {sources_text}"
             
-            auto_init_btn.click(initialize_system, None, auto_init_status)
+            return history + [[message, full_response]], ""
+        
+        def reset_chat():
+            service.reset_conversation()
+            return [], "Conversation history has been reset."
+        
+        @spaces.GPU
+        def initialize_system():
+            success = service.initialize()
+            
+            # Update system status indicator with styled HTML
+            if success:
+                status_html = '<div class="status-indicator success">✅ System initialized and ready</div>'
+                return "System initialized successfully!", status_html
+            else:
+                status_html = '<div class="status-indicator error">❌ System initialization failed</div>'
+                return "System initialization failed. Check logs for details.", status_html
+        
+        def use_sample_question(question):
+            return question
+        
+        def check_pdfs():
+            result = []
+            for pdf_file in ["saudi_vision203.pdf", "saudi_vision2030_ar.pdf"]:
+                if os.path.exists(pdf_file):
+                    size = os.path.getsize(pdf_file) / (1024 * 1024)  # Size in MB
+                    result.append([pdf_file, "Found ✅", f"{size:.2f} MB"])
+                else:
+                    result.append([pdf_file, "Not found ❌", "0 MB"])
+            return result
+        
+        @spaces.GPU
+        def check_dependencies():
+            result = []
+            
+            # Safe imports inside GPU-decorated function
+            try:
+                import torch
+                result.append(["PyTorch", f"✅ {torch.__version__}"])
+            except ImportError:
+                result.append(["PyTorch", "❌ Not installed"])
+            
+            try:
+                import transformers
+                result.append(["Transformers", f"✅ {transformers.__version__}"])
+            except ImportError:
+                result.append(["Transformers", "❌ Not installed"])
+            
+            try:
+                import langchain
+                result.append(["LangChain", f"✅ {langchain.__version__}"])
+            except ImportError:
+                result.append(["LangChain", "❌ Not installed"])
+            
+            try:
+                import faiss
+                result.append(["FAISS", "✅ Installed"])
+            except ImportError:
+                result.append(["FAISS", "❌ Not installed"])
+            
+            return result
+        
+        # Connect event handlers
+        msg.submit(respond, [msg, chatbot], [chatbot, msg])
+        submit_btn.click(respond, [msg, chatbot], [chatbot, msg])
+        clear.click(reset_chat, None, [chatbot, msg])
+        
+        init_btn.click(initialize_system, None, [status_box, system_status])
+        
+        sample_questions_dropdown.change(
+            use_sample_question, 
+            [sample_questions_dropdown], 
+            [msg]
+        )
+        
+        pdf_btn.click(check_pdfs, None, pdf_status)
+        sys_btn.click(check_dependencies, None, sys_status)
+        
+        # Initialize system on page load
+        demo.load(initialize_system, None, [status_box, system_status])
     
     return demo