Update app.py

app.py

@@ -3,8 +3,15 @@ import pandas as pd
 import os
 import re
 import html
+import time
 from pathlib import Path
 
+# Import Groq API client
+try:
+    from groq import Groq
+except ImportError:
+    print("Groq API not installed. Run: pip install groq")
+
 # Function to load all CSV files from the current directory
 def load_csv_files():
     csv_files = {}
@@ -183,9 +190,266 @@ def search_data(city, search_type, search_query, case_sensitive=False, preserve_
         formatted_results += "</div><hr>"
     
     formatted_results += "</div>"
-    
     return formatted_results
 
+# Function to generate an answer using Groq API for a selected query
+def generate_answer_with_groq(city, question, max_sources=3, api_key=None, temperature=0.3):
+    if not api_key or api_key.strip() == "":
+        return "Error: Groq API key not provided. Please enter your API key in the field above."
+    
+    # Try to initialize the Groq client with the provided API key
+    try:
+        client = Groq(api_key=api_key)
+    except Exception as e:
+        return f"Error initializing Groq client: {str(e)}"
+    
+    data = all_data.get(city)
+    if data is None:
+        return "City data not found"
+        
+    # Find most relevant entries for the question
+    # This is a simple relevance sorting based on TF-IDF-like scoring
+    # For a production app, consider using proper embedding and semantic search
+    scores = []
+    
+    # Keywords that indicate modern tourism/hotel content to deprioritize
+    tourism_keywords = ['hotel', 'vacation', 'booking', 'resort', 'accommodation', 'travel package', 
+                       'tourism', 'tourist', 'reservation', 'stay', 'room', 'suite', 'spa', 'restaurant']
+    
+    for i, row in data.iterrows():
+        context = str(row['context']) if not pd.isna(row['context']) else ""
+        url = str(row['url']) if not pd.isna(row['url']) else ""
+        
+        # Check if this entry is primarily about modern tourism
+        context_lower = context.lower()
+        url_lower = url.lower()
+        tourism_score = sum(1 for keyword in tourism_keywords 
+                          if keyword in context_lower or keyword in url_lower)
+        
+        # Simple scoring: count word overlap between question and context
+        question_words = set(question.lower().split())
+        context_words = set(context.lower().split())
+        overlap = len(question_words.intersection(context_words))
+        
+        # Add a score if there are words in common, but penalize tourism content
+        if overlap > 0:
+            # Reduce score for entries with high tourism content
+            final_score = overlap - (tourism_score * 0.5)  # Penalize tourism content
+            if final_score > 0:  # Only include if still has positive relevance
+                scores.append({
+                    'index': i,
+                    'score': final_score,
+                    'url': url,
+                    'context': context,
+                    'tourism_score': tourism_score
+                })
+    
+    # Sort by score (descending) and take the top entries
+    scores.sort(key=lambda x: x['score'], reverse=True)
+    top_entries = scores[:max_sources]
+    
+    if not top_entries:
+        return f"No relevant information found in the {city} dataset for this question."
+    
+    # Build a context from the most relevant entries
+    context_for_llm = f"Question about the ancient city of {city}: {question}\n\n"
+    context_for_llm += "Information from dataset:\n\n"
+    
+    for i, entry in enumerate(top_entries, 1):
+        context_for_llm += f"Source {i}: {entry['url']}\n"
+        context_for_llm += f"Context: {entry['context'][:500]}...\n\n"
+    
+    # Create a prompt for the LLM
+    prompt = f"""You are an expert historian specializing in ancient cities. 
+Use the following information to answer the question about the ancient city of {city}.
+Base your answer ONLY on the provided information and cite the sources.
+If you cannot find relevant information to answer the question, say so honestly.
+
+IMPORTANT: Ignore any information about modern hotels, vacation packages, tourism accommodations, travel bookings, or contemporary tourism services. Focus only on historical, archaeological, and scholarly information about the ancient city.
+
+{context_for_llm}
+
+Answer the question in a comprehensive, detailed, and informative way. Provide as much relevant historical context as possible. Include proper citations to the sources using [Source X] notation.
+Question: {question}
+
+First, conduct a thorough analysis of each source - evaluate the information quality, relevance, and historical significance. Skip any sources that only contain information about hotels, vacations, or modern tourism.
+Then provide a detailed, well-structured answer with comprehensive explanations and proper citations focused on historical and archaeological content. Include relevant background information, context, and connections to broader historical themes when supported by the sources.
+
+Answer with this structure:
+[THINKING]
+(Show your detailed analysis of the sources here, noting if any sources are skipped due to being about hotels/tourism. Explain how you're weighing the information and what historical connections you're making.)
+[/THINKING]
+
+[ANSWER]
+(Your comprehensive, detailed answer with citations, focusing on historical content only. Provide thorough explanations, context, and analysis based on the available sources.)
+[/ANSWER]"""
+
+    try:
+        # Make the API call to Groq
+        start_time = time.time()
+        
+        # Call Groq API with the deepseek-r1-distill-llama-70b model
+        response = client.chat.completions.create(
+            model="deepseek-r1-distill-llama-70b",
+            messages=[
+                {"role": "system", "content": "You are an expert historian specializing in ancient cities."},
+                {"role": "user", "content": prompt}
+            ],
+            temperature=temperature,
+            max_tokens=4000,  # Increased for longer, more comprehensive answers
+            top_p=0.9,  
+        )
+        
+        completion_time = time.time() - start_time
+        
+        # Extract and format the response
+        full_response = response.choices[0].message.content
+        
+        # Check for explicit markers first
+        thinking_match = re.search(r'\[THINKING\](.*?)\[/THINKING\]', full_response, re.DOTALL)
+        answer_match = re.search(r'\[ANSWER\](.*?)\[/ANSWER\]', full_response, re.DOTALL)
+        
+        # Initialize variables
+        thinking = ""
+        answer = ""
+        
+        # Try different strategies to extract thinking and answer sections
+        if thinking_match and answer_match:
+            # Case 1: Both markers exist
+            thinking = thinking_match.group(1).strip()
+            answer = answer_match.group(1).strip()
+        elif "Final Answer:" in full_response:
+            # Case 2: There's a "Final Answer:" heading
+            parts = full_response.split("Final Answer:", 1)
+            thinking = parts[0].strip()
+            answer = parts[1].strip()
+        elif "**Analysis of Sources:**" in full_response and "**Conclusion:**" in full_response:
+            # Case 3: Look for analysis section followed by conclusion
+            analysis_start = full_response.find("**Analysis of Sources:**")
+            conclusion_start = full_response.find("**Conclusion:**")
+            if analysis_start < conclusion_start:
+                thinking = full_response[:analysis_start].strip()
+                answer = full_response[analysis_start:].strip()
+            else:
+                thinking = full_response[:conclusion_start].strip()
+                answer = full_response[conclusion_start:].strip()
+        elif "Thus," in full_response and "Therefore," in full_response:
+            # Case 4: Look for natural language transitions
+            thinking_end = max(full_response.rfind("Thus,"), full_response.rfind("Therefore,"))
+            if thinking_end > 0:
+                thinking = full_response[:thinking_end].strip()
+                answer = full_response[thinking_end:].strip()
+        elif "Starting with Source" in full_response or "Source 1" in full_response:
+            # Case 5: Detect source analysis pattern
+            # Look for where detailed source analysis ends and final answer begins
+            patterns = [
+                r"\n\n(?:To address|Based on|In conclusion|The answer|Therefore,|Thus,)",
+                r"\n\n\*\*.*?\*\*",  # Look for bold headings that might start the answer
+                r"\n\nGiven the",
+                r"\n\nFrom the"
+            ]
+            
+            split_point = -1
+            for pattern in patterns:
+                matches = list(re.finditer(pattern, full_response, re.IGNORECASE))
+                if matches:
+                    # Take the last match to ensure we're at the final answer section
+                    split_point = matches[-1].start()
+                    break
+            
+            if split_point > 0:
+                thinking = full_response[:split_point].strip()
+                answer = full_response[split_point:].strip()
+            else:
+                # Fallback: try to split at paragraph that doesn't start with "Source"
+                parts = re.split(r'\n\n(?![Ss]ource)', full_response, 1)
+                if len(parts) > 1 and len(parts[1]) > 100:  # Make sure second part is substantial
+                    thinking = parts[0].strip()
+                    answer = parts[1].strip()
+                else:
+                    thinking = "Source analysis integrated with response."
+                    answer = full_response
+        else:
+            # Case 6: Try to split at a double newline followed by a sentence
+            # that doesn't start with "Source" (which is likely part of analysis)
+            parts = re.split(r'\n\n(?![Ss]ource)', full_response, 1)
+            if len(parts) > 1 and len(parts[1]) > 50:  # Make sure second part is substantial
+                thinking = parts[0].strip()
+                answer = parts[1].strip()
+            else:
+                # Case 7: Default - use the whole response as answer and note no clear division
+                thinking = "Analysis not clearly separated in the model's response."
+                answer = full_response
+        
+        # Format the answer as HTML with collapsible thinking and prominent answer sections
+        html_answer = f"<div class='llm-answer'>"
+        
+        # Add the main answer section first (most prominent)
+        html_answer += "<div class='answer-section'>"
+        html_answer += "<h3>Answer:</h3>"
+        
+        # Format answer with proper paragraphs and citation highlighting
+        formatted_answer = answer
+        
+        # Highlight source citations [Source X]
+        formatted_answer = re.sub(
+            r'\[Source (\d+)\]', 
+            r'<span class="citation">[Source \1]</span>', 
+            formatted_answer
+        )
+        
+        # Add paragraph breaks
+        formatted_answer = formatted_answer.replace("\n\n", "</p><p>")
+        formatted_answer = f"<p>{formatted_answer}</p>"
+        
+        html_answer += f"<div class='answer-content'>{formatted_answer}</div>"
+        html_answer += "</div>"
+        
+        # Add the collapsible thinking section
+        html_answer += "<div class='thinking-section'>"
+        html_answer += """
+        <details class='thinking-details'>
+            <summary class='thinking-summary'>
+                <span class='thinking-icon'>🔍</span>
+                <span class='thinking-title'>Show Analysis Process</span>
+                <span class='thinking-chevron'>▼</span>
+            </summary>
+            <div class='thinking-content-wrapper'>
+        """
+        
+        # Format thinking text with proper paragraphs and source highlighting
+        formatted_thinking = thinking
+        
+        # Replace "Source X:" with bold, highlighted version
+        for i in range(1, 10):  # Support up to 9 sources
+            formatted_thinking = re.sub(
+                rf"Source {i}:", 
+                f"<span class='source-highlight'>Source {i}:</span>", 
+                formatted_thinking
+            )
+        
+        # Add paragraph breaks for readability
+        formatted_thinking = formatted_thinking.replace("\n\n", "</p><p>")
+        formatted_thinking = f"<p>{formatted_thinking}</p>"
+        
+        html_answer += f"<div class='thinking-content'>{formatted_thinking}</div>"
+        html_answer += "</div></details></div>"
+        
+        # Add source references at the bottom
+        html_answer += "<div class='sources'><h4>Sources:</h4><ul>"
+        for i, entry in enumerate(top_entries, 1):
+            url_safe = html.escape(entry['url'])
+            html_answer += f"<li>[Source {i}]: <a href='{url_safe}' target='_blank'>{url_safe}</a></li>"
+        html_answer += "</ul></div>"
+        
+        # Add a small note at the bottom
+        html_answer += f"<p class='model-info'><small>Generated using deepseek-r1-distill-llama-70b in {completion_time:.2f} seconds</small></p></div>"
+        
+        return html_answer
+        
+    except Exception as e:
+        return f"Error generating answer: {str(e)}"
+
 # Load all CSV files on startup
 all_data = load_csv_files()
 city_names = list(all_data.keys())
@@ -193,156 +457,385 @@ if not city_names:
     city_names = ["No data found"]
 
 # Create the Gradio interface
-with gr.Blocks(title="Query engine") as app:
-    gr.Markdown("# Archaelogical Query Engine")
-        
-    with gr.Row():
-        with gr.Column():
-            city_dropdown = gr.Dropdown(
-                choices=city_names,
-                value=city_names[0] if city_names else None,
-                label="Select City"
-            )
+with gr.Blocks(title="Archaeological Query Engine") as app:
+       
+    # Add tabs - make sure there's only one top-level Tabs component
+    with gr.Tabs() as tabs:
+        with gr.TabItem("Search Dataset"):
+            gr.Markdown("Search through information about ancient cities from CSV files.")
             
-            # Dropdown for queries based on the selected city
-            query_dropdown = gr.Dropdown(
-                choices=get_queries_for_city(city_names[0] if city_names else None),
-                label="Select a Query",
-                allow_custom_value=True
-            )
+            with gr.Row():
+                with gr.Column():
+                    city_dropdown = gr.Dropdown(
+                        choices=city_names,
+                        value=city_names[0] if city_names else None,
+                        label="Select City"
+                    )
+                    
+                    # Dropdown for queries based on the selected city
+                    query_dropdown = gr.Dropdown(
+                        choices=get_queries_for_city(city_names[0] if city_names else None),
+                        label="Select a Query",
+                        allow_custom_value=True
+                    )
+                    
+                    search_type = gr.Radio(
+                        choices=["Simple Text Search", "Regular Expression Search"],
+                        value="Simple Text Search",
+                        label="Search Type"
+                    )
+                    
+                    # Keep a text box for custom queries
+                    search_query = gr.Textbox(
+                        label="Custom Search Query (optional)",
+                        placeholder="Enter custom text to search for..."
+                    )
+                    
+                    case_sensitive = gr.Checkbox(
+                        label="Case Sensitive",
+                        value=False
+                    )
+                    
+                    show_empty_queries = gr.Checkbox(
+                        label="Show Entries Without Queries",
+                        value=False,
+                        info="Check this to display entries that have empty or missing queries"
+                    )
+                    
+                    preserve_order = gr.Checkbox(
+                        label="Preserve Original Dataset Order",
+                        value=True,
+                        info="When checked, results will be displayed in their original order from the dataset. When unchecked, results will be displayed in the order they are found."
+                    )
+                    
+                    search_button = gr.Button("Search")
+                
+                with gr.Column():
+                    results_text = gr.HTML(
+                        label="Search Results",
+                        value="",
+                        elem_classes=["results-output"]
+                    )
+                    
+                    stats_text = gr.Textbox(
+                        label="Dataset Statistics",
+                        value=f"Total cities loaded: {len(city_names)}\nCities: {', '.join(city_names)}"
+                    )
             
-            search_type = gr.Radio(
-                choices=["Simple Text Search", "Regular Expression Search"],
-                value="Simple Text Search",
-                label="Search Type"
-            )
+            # Update the query dropdown when the city changes
+            def update_queries(city):
+                return gr.Dropdown(choices=get_queries_for_city(city))
             
-            # Keep a text box for custom queries
-            search_query = gr.Textbox(
-                label="Custom Search Query (optional)",
-                placeholder="Enter custom text to search for..."
+            city_dropdown.change(
+                fn=update_queries,
+                inputs=city_dropdown,
+                outputs=query_dropdown
             )
             
-            case_sensitive = gr.Checkbox(
-                label="Case Sensitive",
-                value=False
-            )
+            # Use either the dropdown query or the custom search query
+            def search_with_queries(city, search_type, query_from_dropdown, custom_query, case_sensitive, show_empty_queries, preserve_order):
+                if show_empty_queries:
+                    # If show_empty_queries is checked, we show entries without queries
+                    return find_empty_queries(city, preserve_order)
+                else:
+                    # Otherwise, use the custom query if provided, otherwise use the dropdown selection
+                    final_query = custom_query if custom_query and custom_query.strip() else query_from_dropdown
+                    return search_data(city, search_type, final_query, case_sensitive, preserve_order)
             
-            show_empty_queries = gr.Checkbox(
-                label="Show Entries Without Queries",
-                value=False,
-                info="Check this to display entries that have empty or missing queries"
+            search_button.click(
+                fn=search_with_queries,
+                inputs=[city_dropdown, search_type, query_dropdown, search_query, case_sensitive, show_empty_queries, preserve_order],
+                outputs=results_text
             )
+        
+        # Add new tab for AI-generated answers using Groq API
+        with gr.TabItem("AI Answers (Groq API)"):
+            gr.Markdown("Ask questions about the dataset and get AI-generated answers using the Groq API with the deepseek-r1-distill-llama-70b model.")
             
-            preserve_order = gr.Checkbox(
-                label="Preserve Original Dataset Order",
-                value=True,
-                info="When checked, results will be displayed in their original order from the dataset. When unchecked, results will be displayed in the order they are found."
-            )
+            with gr.Row():
+                with gr.Column():
+                    # API key is now hardcoded in the code
+                                     
+                    ai_city_dropdown = gr.Dropdown(
+                        choices=city_names,
+                        value=city_names[0] if city_names else None,
+                        label="Select City"
+                    )
+                    
+                    question_input = gr.Textbox(
+                        label="Ask a Question",
+                        placeholder="E.g., What was the historical significance of this ancient city?",
+                        lines=3
+                    )
+                    
+                    max_sources_slider = gr.Slider(
+                        minimum=1,
+                        maximum=10,
+                        value=3,
+                        step=1,
+                        label="Maximum Number of Sources to Consider",
+                        info="Higher values may provide more comprehensive answers but will take longer"
+                    )
+                    
+                    temperature_slider = gr.Slider(
+                        minimum=0.0,
+                        maximum=1.0,
+                        value=0.3,
+                        step=0.1,
+                        label="Temperature",
+                        info="Lower values create more focused answers, higher values create more creative ones"
+                    )
+                    
+                    generate_button = gr.Button("Generate Answer")
+                
+                with gr.Column():
+                    answer_output = gr.HTML(
+                        label="AI-Generated Answer",
+                        value="",
+                        elem_classes=["results-output"]
+                    )
             
-            search_button = gr.Button("Search")
-        
-        with gr.Column():
-            results_text = gr.HTML(
-                label="Search Results",
-                value="",
-                elem_classes=["results-output"]
-            )
+            # Function to handle the Generate Answer button click
+            def on_generate_answer(city, question, max_sources, api_key, temperature):
+                if not question or question.strip() == "":
+                    return "Please enter a question to generate an answer."
+                
+                # Use the provided Groq API key directly
+                # Replace this with your actual Groq API key
+                groq_api_key = Groq(api_key=os.environ.get("GROQ_API"))
+                
+                try:
+                                      return generate_answer_with_groq(city, question, max_sources, groq_api_key, temperature)
+                except Exception as e:
+                    return f"Error: {str(e)}"
             
-            stats_text = gr.Textbox(
-                label="Dataset Statistics",
-                value=f"Total cities loaded: {len(city_names)}\nCities: {', '.join(city_names)}"
+            generate_button.click(
+                fn=on_generate_answer,
+                inputs=[ai_city_dropdown, question_input, max_sources_slider, gr.Textbox(visible=False), temperature_slider],
+                outputs=answer_output
             )
-    
-    # Update the query dropdown when the city changes
-    def update_queries(city):
-        return gr.Dropdown(choices=get_queries_for_city(city))
-    
-    city_dropdown.change(
-        fn=update_queries,
-        inputs=city_dropdown,
-        outputs=query_dropdown
-    )
-    
-    # Use either the dropdown query or the custom search query
-    def search_with_queries(city, search_type, query_from_dropdown, custom_query, case_sensitive, show_empty_queries, preserve_order):
-        if show_empty_queries:
-            # If show_empty_queries is checked, we show entries without queries
-            return find_empty_queries(city, preserve_order)
-        else:
-            # Otherwise, use the custom query if provided, otherwise use the dropdown selection
-            final_query = custom_query if custom_query and custom_query.strip() else query_from_dropdown
-            return search_data(city, search_type, final_query, case_sensitive, preserve_order)
-    
-    search_button.click(
-        fn=search_with_queries,
-        inputs=[city_dropdown, search_type, query_dropdown, search_query, case_sensitive, show_empty_queries, preserve_order],
-        outputs=results_text
-    )
+
+    # Add CSS styling
+    gr.HTML("""
+    <style>
+    .gradio-container {
+        font-family: 'Segoe UI', 'Arial', sans-serif;
+    }
+    .results-output {
+        max-height: 600px;
+        overflow-y: auto;
+        padding: 15px;
+        border: 1px solid #e2e8f0;
+        border-radius: 8px;
+        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
+    }
+    a {
+        color: #3182ce;
+        text-decoration: none;
+        transition: color 0.2s;
+    }
+    a:hover {
+        text-decoration: underline;
+        color: #2c5282;
+    }
+    b {
+        color: #2d3748;
+    }
+    .search-results {
+        font-family: 'Segoe UI', 'Arial', sans-serif;
+    }
+    .result-item {
+        margin-bottom: 18px;
+        padding: 15px;
+        background-color: #f9f9f9;
+        border-radius: 8px;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+        transition: transform 0.2s, box-shadow 0.2s;
+    }
+    .result-item:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+    }
+    .original-index {
+        font-size: 0.8em;
+        color: #718096;
+        font-weight: normal;
+    }
+    .result-item h3 {
+        margin-top: 0;
+        color: #2d3748;
+        font-weight: 600;
+    }
+    .result-item:nth-child(odd) {
+        background-color: #f5f7fa;
+    }
+    .result-item:nth-child(even) {
+        background-color: #ffffff;
+    }
+    hr {
+        border: 0;
+        height: 1px;
+        background-color: #e2e8f0;
+        margin: 20px 0;
+    }
+    .llm-answer {
+        font-family: 'Segoe UI', 'Arial', sans-serif;
+        line-height: 1.7;
+        padding: 20px;
+        border-radius: 12px;
+        background-color: #f8fafc;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+        border: 1px solid #cbd5e0;
+        margin: 10px 0;
+    }
+    .answer-section {
+        margin-bottom: 25px;
+        background-color: #ffffff;
+        padding: 25px;
+        border-radius: 10px;
+        border: 1px solid #e2e8f0;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+    }
+    .answer-section h3 {
+        margin-top: 0;
+        color: #1a202c;
+        font-weight: 700;
+        font-size: 1.3em;
+        margin-bottom: 20px;
+        display: flex;
+        align-items: center;
+    }
+    .answer-section h3::before {
+        content: "💡";
+        margin-right: 10px;
+        font-size: 1.1em;
+    }
+    .answer-content {
+        font-size: 1.05em;
+        line-height: 1.8;
+        color: #2d3748;
+    }
+    .answer-content p {
+        margin-bottom: 16px;
+    }
+    .answer-content .citation {
+        font-weight: 600;
+        color: #3182ce;
+        background-color: #ebf8ff;
+        padding: 2px 8px;
+        border-radius: 6px;
+        font-size: 0.9em;
+        border: 1px solid #bee3f8;
+    }
+    .thinking-section {
+        margin-bottom: 20px;
+    }
+    .thinking-details {
+        background-color: #f7fafc;
+        border: 1px solid #e2e8f0;
+        border-radius: 8px;
+        overflow: hidden;
+    }
+    .thinking-summary {
+        cursor: pointer;
+        padding: 15px 20px;
+        background-color: #edf2f7;
+        border-bottom: 1px solid #e2e8f0;
+        display: flex;
+        align-items: center;
+        font-weight: 600;
+        color: #4a5568;
+        transition: background-color 0.2s ease;
+        user-select: none;
+    }
+    .thinking-summary:hover {
+        background-color: #e2e8f0;
+    }
+    .thinking-icon {
+        margin-right: 10px;
+        font-size: 1.1em;
+    }
+    .thinking-title {
+        flex-grow: 1;
+        font-size: 0.95em;
+    }
+    .thinking-chevron {
+        font-size: 0.8em;
+        transition: transform 0.3s ease;
+        margin-left: 10px;
+    }
+    .thinking-details[open] .thinking-chevron {
+        transform: rotate(180deg);
+    }
+    .thinking-content-wrapper {
+        padding: 0;
+    }
+    .thinking-content {
+        background-color: #f0f4f8;
+        padding: 20px;
+        margin: 0;
+        font-size: 0.93em;
+        line-height: 1.6;
+        color: #4a5568;
+    }
+    .thinking-content p {
+        margin-bottom: 12px;
+    }
+    .thinking-content .source-highlight {
+        font-weight: 600;
+        color: #2b6cb0;
+        background-color: #ebf4ff;
+        padding: 2px 6px;
+        border-radius: 4px;
+        border: 1px solid #bee3f8;
+    }
+    .sources {
+        font-size: 0.95em;
+        margin-top: 25px;
+        padding: 20px;
+        background-color: #ffffff;
+        border-radius: 8px;
+        border: 1px solid #e2e8f0;
+        color: #4a5568;
+    }
+    .sources h4 {
+        margin-top: 0;
+        color: #2d3748;
+        font-weight: 600;
+        font-size: 1.05em;
+        margin-bottom: 15px;
+        display: flex;
+        align-items: center;
+    }
+    .sources h4::before {
+        content: "📚";
+        margin-right: 8px;
+        font-size: 1em;
+    }
+    .sources ul {
+        padding-left: 20px;
+        margin: 0;
+    }
+    .sources li {
+        margin-bottom: 8px;
+        line-height: 1.5;
+    }
+    .model-info {
+        text-align: right;
+        color: #718096;
+        margin-top: 20px;
+        margin-bottom: 0;
+        font-size: 0.85em;
+        padding-top: 15px;
+        border-top: 1px solid #e2e8f0;
+    }
+    </style>
+    """)
 
 # Launch the app
 if __name__ == "__main__":
     try:
-        print("Starting Ancient Cities Query Interface...")
         print(f"Loaded {len(city_names)} cities: {', '.join(city_names)}")
-        
-        # Add CSS within the Blocks instead of in launch()
-        with app:
-            gr.HTML("""
-            <style>
-            .gradio-container {
-                font-family: 'Arial', sans-serif;
-            }
-            .results-output {
-                max-height: 600px;
-                overflow-y: auto;
-                padding: 10px;
-                border: 1px solid #ddd;
-                border-radius: 5px;
-            }
-            a {
-                color: #007bff;
-                text-decoration: none;
-            }
-            a:hover {
-                text-decoration: underline;
-            }
-            b {
-                color: #333;
-            }
-            .search-results {
-                font-family: 'Arial', sans-serif;
-            }
-            .result-item {
-                margin-bottom: 15px;
-                padding: 10px;
-                background-color: #f9f9f9;
-                border-radius: 5px;
-            }
-            .result-item h3 {
-                margin-top: 0;
-                color: #333;
-            }
-            .original-index {
-                font-size: 0.8em;
-                color: #666;
-                font-weight: normal;
-            }
-            .result-item:nth-child(odd) {
-                background-color: #f5f5f5;
-            }
-            .result-item:nth-child(even) {
-                background-color: #ffffff;
-            }
-            hr {
-                border: 0;
-                height: 1px;
-                background-color: #ddd;
-                margin: 15px 0;
-            }
-            </style>
-            """)
-            
         app.launch(show_error=True)
     except Exception as e:
         print(f"Error starting application: {e}")