Update app.py

app.py

@@ -1,5 +1,3 @@
-
-
 import gradio as gr
 import os
 import torch
@@ -214,6 +212,12 @@ def generate_related_topics(query):
             "Impact of climate change on ecosystems",
             "Renewable energy technologies"
         ]
+    elif "computer" in query_lower:
+        return [
+            "History of computers",
+            "Latest developments in computer technology",
+            "How do computers work?"
+        ]
     else:
         # Generate simple variations for any query
         return [
@@ -293,14 +297,14 @@ def format_sources(sources):
     html = ""
     for i, source in enumerate(sources, 1):
         html += f"""
-        <div style="margin-bottom: 15px; padding: 15px; background-color: #f8f9fa; 
-                   border-radius: 8px; border-left: 4px solid #1976d2;">
-            <a href="{source['url']}" target="_blank" style="font-weight: bold; 
-                                                            color: #1976d2; text-decoration: none;">
+        <div style="margin-bottom: 15px; padding: 15px; background-color: #FFFFFF; 
+                   border-radius: 12px; border-left: 4px solid #2563EB; box-shadow: 0 2px 6px rgba(0,0,0,0.08);">
+            <a href="{source['url']}" target="_blank" style="font-weight: 600; 
+                                                            color: #2563EB; text-decoration: none; font-size: 16px;">
                 {source['title']}
             </a>
-            <div style="color: #5f6368; font-size: 14px; margin-top: 5px;">{source['url']}</div>
-            <div style="margin-top: 10px;">{source['snippet']}</div>
+            <div style="color: #64748B; font-size: 14px; margin-top: 6px;">{source['url']}</div>
+            <div style="margin-top: 10px; color: #374151; line-height: 1.5;">{source['snippet']}</div>
         </div>
         """
     return html
@@ -310,12 +314,16 @@ def format_related(topics):
     if not topics:
         return ""
     
-    html = "<div style='display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px;'>"
+    html = "<div style='display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px;'>"
     for topic in topics:
+        # Each topic becomes a button that triggers a new search when clicked
         html += f"""
-        <div style="background-color: #e3f2fd; padding: 8px 16px; border-radius: 20px; 
-                  color: #1976d2; font-size: 14px; cursor: pointer; display: inline-block;"
-             onclick="document.getElementById('query-input').value = '{topic}'; search();">
+        <div style="background-color: #EFF6FF; padding: 10px 16px; border-radius: 100px; 
+                  color: #2563EB; font-size: 14px; font-weight: 500; cursor: pointer; display: inline-block;
+                  transition: all 0.2s ease; border: 1px solid #DBEAFE; box-shadow: 0 1px 2px rgba(0,0,0,0.05);"
+             onclick="document.getElementById('query-input').value = '{topic}'; document.querySelector('button[data-testid=\\\"submit\\\"]').click();"
+             onmouseover="this.style.backgroundColor='#DBEAFE'; this.style.boxShadow='0 2px 5px rgba(0,0,0,0.1)';"
+             onmouseout="this.style.backgroundColor='#EFF6FF'; this.style.boxShadow='0 1px 2px rgba(0,0,0,0.05)';">
             {topic}
         </div>
         """
@@ -333,6 +341,9 @@ def search_interface(query):
     
     start_time = time.time()
     
+    # Show loading message while processing
+    yield ("Searching...", "", "")
+    
     # Perform search and answer generation
     result = search_and_answer(query)
     
@@ -349,69 +360,189 @@ def search_interface(query):
     processing_time = time.time() - start_time
     print(f"Query processed in {processing_time:.2f} seconds")
     
-    return (
+    yield (
         answer_html,
         sources_html,
         related_html
     )
 
-# Create the Gradio interface
+# Create the Gradio interface with modern UI
 css = """
+/* Global styles */
 body {
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    background-color: #F9FAFB;
+    color: #1F2937;
+    line-height: 1.6;
+}
+
+/* Container styling */
+.container {
     max-width: 1200px;
     margin: 0 auto;
+    padding: 0 20px;
 }
-.container {
-    margin-top: 20px;
+
+/* Header styling */
+.header {
+    text-align: center;
+    margin-bottom: 2rem;
+}
+
+/* Search box styling */
+#search-container input {
+    border: 1px solid #E5E7EB;
+    border-radius: 12px;
+    padding: 12px 20px;
+    font-size: 16px;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    transition: all 0.2s ease;
+}
+
+#search-container input:focus {
+    border-color: #2563EB;
+    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
+    outline: none;
+}
+
+/* Button styling */
+button[data-testid="submit"] {
+    background-color: #2563EB !important;
+    color: white !important;
+    font-weight: 600 !important;
+    border-radius: 12px !important;
+    padding: 12px 24px !important;
+    border: none !important;
+    cursor: pointer !important;
+    transition: all 0.2s ease !important;
+    box-shadow: 0 2px 5px rgba(37, 99, 235, 0.3) !important;
+}
+
+button[data-testid="submit"]:hover {
+    background-color: #1D4ED8 !important;
+    box-shadow: 0 4px 8px rgba(37, 99, 235, 0.4) !important;
+    transform: translateY(-1px) !important;
+}
+
+/* Section headers */
+h3 {
+    color: #2563EB;
+    font-weight: 600;
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+    font-size: 1.25rem;
+    border-bottom: 2px solid #DBEAFE;
+    padding-bottom: 0.5rem;
 }
+
+/* Answer box styling */
 .answer {
-    border-radius: 8px;
-    background-color: white;
-    padding: 20px;
-    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
-    margin-bottom: 20px;
+    background-color: #FFFFFF;
+    padding: 24px;
+    border-radius: 12px;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
+    border: 1px solid #E5E7EB;
+    line-height: 1.7;
+    margin-bottom: 1.5rem;
+    color: #374151;
+    min-height: 100px;
+}
+
+.answer p {
+    margin-bottom: 1rem;
+    color: #1F2937;
+}
+
+.answer ul, .answer ol {
+    margin-left: 1.5rem;
+    margin-bottom: 1rem;
 }
-h1 {
-    color: #1976d2;
-    font-size: 2.2rem;
+
+.answer strong, .answer b {
+    color: #111827;
     font-weight: 600;
-    margin-bottom: 10px;
 }
-h3 {
-    color: #1976d2;
-    font-weight: 500;
-    margin-top: 25px;
-    margin-bottom: 15px;
+
+.answer a {
+    color: #2563EB;
+    text-decoration: none;
+    border-bottom: 1px solid currentColor;
+}
+
+/* Empty answer styling */
+.answer:empty::after {
+    content: 'Enter a search query to see results';
+    color: #9CA3AF;
+    font-style: italic;
+}
+
+/* Loading state */
+.answer.loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* Footer styling */
+footer {
+    margin-top: 2rem;
+    text-align: center;
+    color: #6B7280;
+    font-size: 0.875rem;
+    padding: 1rem 0;
+}
+
+/* Responsive styles */
+@media (max-width: 768px) {
+    .answer {
+        padding: 16px;
+    }
+    
+    button[data-testid="submit"] {
+        padding: 10px 16px !important;
+    }
 }
 """
 
-with gr.Blocks(css=css) as demo:
+with gr.Blocks(css=css, theme=gr.themes.Default()) as demo:
+    # Custom header with improved design
     gr.HTML("""
-    <h1>🔍 AI Search System</h1>
-    <p style="margin-bottom: 20px;">Get accurate answers with sources for any question</p>
+    <div class="header">
+        <h1 style="color: #2563EB; font-size: 2.2rem; font-weight: 700; margin-bottom: 0.5rem;">🔍 AI Search System</h1>
+        <p style="color: #64748B; font-size: 1.1rem; max-width: 600px; margin: 0 auto;">
+            Get comprehensive answers with reliable sources for any question you have.
+        </p>
+    </div>
     """)
     
-    with gr.Row():
+    # Search container with improved styling
+    with gr.Row(elem_id="search-container"):
         query_input = gr.Textbox(
             label="Search Query",
-            placeholder="Enter your search query here...",
-            elem_id="query-input"
+            placeholder="What would you like to know?",
+            elem_id="query-input",
+            scale=4
         )
-        search_button = gr.Button("Search 🔍", variant="primary")
+        search_button = gr.Button("Search 🔍", variant="primary", scale=1)
     
+    # Results container with improved layout
     with gr.Row():
+        # Left column for answer and related topics
         with gr.Column(scale=2):
+            # Answer section with better styling
             gr.HTML("<h3>📝 Answer</h3>")
             answer_output = gr.HTML(elem_classes=["answer"])
             
+            # Related topics with better styling
             gr.HTML("<h3>🔗 Related Topics</h3>")
             related_output = gr.HTML()
         
+        # Right column for sources
         with gr.Column(scale=1):
             gr.HTML("<h3>📚 Sources</h3>")
             sources_output = gr.HTML()
     
+    # Set up event handlers with progress indicators
     search_button.click(
         fn=search_interface,
         inputs=[query_input],
@@ -424,10 +555,11 @@ with gr.Blocks(css=css) as demo:
         outputs=[answer_output, sources_output, related_output]
     )
 
+    # Footer with attribution
     gr.HTML("""
-    <div style="margin-top: 20px; text-align: center; color: #666;">
-        <p>Built with Hugging Face Spaces</p>
-    </div>
+    <footer>
+        <p>Built with Hugging Face Spaces & Microsoft Phi-2</p>
+    </footer>
     """)
     
 # Launch app with queue to prevent overloading