Update app.py

app.py

@@ -7,8 +7,6 @@ from pathlib import Path
 import spaces
 import gradio as gr
 
-# WARNING: Don't import torch, cuda, or GPU-related modules at the top level
-# They must ONLY be imported inside functions decorated with @spaces.GPU
 
 # Helper functions that don't use GPU
 def safe_tokenize(text):
@@ -327,7 +325,6 @@ Question: {query} [/INST]</s>"""
         self.conversation_history = []
         return "Conversation has been reset."
 
-
 def main():
     # Create the Vision 2030 service
     service = Vision2030Service()
@@ -365,35 +362,46 @@ def main():
         .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; }
+        /* Style for sample question buttons */
+        .gradio-button.secondary {
+            margin-bottom: 8px;
+            text-align: left;
+            background-color: #f0f9ff;
+            transition: all 0.3s ease;
+            display: block;
+            width: 100%;
+            padding: 8px 12px;
+        }
+        .gradio-button.secondary:hover {
+            background-color: #e0f2fe;
+            transform: translateX(3px);
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
     """) as demo:
         # Header with stylized title (no external images)
         with gr.Row():
             with gr.Column():
-                gr.HTML("""
-                <div style="display: flex; align-items: center; margin-bottom: 20px;">
-                    <div style="background: linear-gradient(135deg, #1e9e5a, #45b08c); 
-                         color: white; padding: 15px; border-radius: 10px; 
-                         margin-right: 20px; width: 80px; height: 80px; 
-                         display: flex; justify-content: center; align-items: center; 
-                         font-weight: bold; font-size: 24px;">
-                        V2030
-                    </div>
-                    <div>
-                        <h1 style="margin: 0; color: #1e9e5a;">Vision 2030 Assistant</h1>
-                        <h3 style="margin: 5px 0 0 0; font-weight: normal;">Your interactive guide to Saudi Arabia's national transformation program</h3>
-                    </div>
-                </div>
-                """)
-            
-        # Language toggle in the header
+                with gr.Row():
+                    # Add local logo image on the left
+                    with gr.Column(scale=1, min_width=100):
+                        gr.Image("logo.png", show_label=False, height=80)
+                    # Title and tagline on the right
+                    with gr.Column(scale=4):
+                        gr.Markdown("""
+                        # Vision 2030 Assistant
+                        ### Your interactive guide to Saudi Arabia's national transformation program
+                        """)
+            
+        # Language toggle in the header with better styling
         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.Column(scale=1):
+                language_toggle = gr.Radio(
+                    choices=["English", "العربية (Arabic)", "Auto-detect"],
+                    value="Auto-detect",
+                    label="Interface Language",
+                    info="Choose your preferred language",
+                    elem_classes=["lang-btn"]
+                )
         
         # Main interface with tabs
         with gr.Tabs() as tabs:
@@ -447,20 +455,18 @@ def main():
                         
                         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
-                        )
+                        # Replace dropdown with clickable buttons
+                        gr.Markdown("### Sample Questions")
+                        with gr.Group():
+                            # English questions
+                            q1_btn = gr.Button("What is Saudi Vision 2030?", variant="secondary")
+                            q2_btn = gr.Button("What are the economic goals of Vision 2030?", variant="secondary")
+                            q3_btn = gr.Button("How does Vision 2030 aim to improve quality of life?", variant="secondary")
+                            
+                            # Arabic questions
+                            q4_btn = gr.Button("ما هي رؤية السعودية 2030؟", variant="secondary")
+                            q5_btn = gr.Button("ما هي الأهداف الاقتصادية لرؤية 2030؟", variant="secondary")
+                            q6_btn = gr.Button("كيف تعزز رؤية 2030 الإرث الثقافي السعودي؟", variant="secondary")
             
             # Analytics and insights tab
             with gr.TabItem("📊 Analytics", id="analytics"):
@@ -823,11 +829,13 @@ def main():
         
         init_btn.click(initialize_system, None, [status_box, system_status])
         
-        sample_questions_dropdown.change(
-            use_sample_question, 
-            [sample_questions_dropdown], 
-            [msg]
-        )
+        # Connect all sample question buttons to the message input
+        q1_btn.click(lambda: "What is Saudi Vision 2030?", None, msg)
+        q2_btn.click(lambda: "What are the economic goals of Vision 2030?", None, msg)
+        q3_btn.click(lambda: "How does Vision 2030 aim to improve quality of life?", None, msg)
+        q4_btn.click(lambda: "ما هي رؤية السعودية 2030؟", None, msg)
+        q5_btn.click(lambda: "ما هي الأهداف الاقتصادية لرؤية 2030؟", None, msg)
+        q6_btn.click(lambda: "كيف تعزز رؤية 2030 الإرث الثقافي السعودي؟", None, msg)
         
         pdf_btn.click(check_pdfs, None, pdf_status)
         sys_btn.click(check_dependencies, None, sys_status)