Update app.py

app.py

@@ -14,9 +14,9 @@ class RealTimeFactChecker:
         """Initialize Groq client with API key"""
         try:
             self.client = Groq(api_key=api_key)
-            return True, "<div class='status-success'>✅ API Key validated successfully!</div>"
+            return True, '<div class="status-success">✅ API Key validated successfully!</div>'
         except Exception as e:
-            return False, f"<div class='status-error'>❌ Error initializing client: {str(e)}</div>"
+            return False, f'<div class="status-error">❌ Error initializing client: {str(e)}</div>'
     
     def get_system_prompt(self):
         """Get the system prompt for consistent behavior"""
@@ -51,7 +51,7 @@ Remember: Your goal is to be the most reliable, up-to-date source of information
     def query_compound_model(self, query, model, temperature=0.7, custom_system_prompt=None):
         """Query the compound model and return response with tool execution info"""
         if not self.client:
-            return "<div class='status-error'>❌ Please set a valid API key first.</div>", None, None
+            return '<div class="status-error">❌ Please set a valid API key first.</div>', None, None
         
         try:
             start_time = time.time()
@@ -60,8 +60,14 @@ Remember: Your goal is to be the most reliable, up-to-date source of information
             
             chat_completion = self.client.chat.completions.create(
                 messages=[
-                    {"role": "system", "content": system_prompt},
-                    {"role": "user", "content": query}
+                    {
+                        "role": "system",
+                        "content": system_prompt
+                    },
+                    {
+                        "role": "user",
+                        "content": query,
+                    }
                 ],
                 model=model,
                 temperature=temperature,
@@ -72,20 +78,22 @@ Remember: Your goal is to be the most reliable, up-to-date source of information
             response_time = round(end_time - start_time, 2)
             
             response_content = chat_completion.choices[0].message.content
+            
             executed_tools = getattr(chat_completion.choices[0].message, 'executed_tools', None)
+            
             tool_info = self.format_tool_info(executed_tools)
             
             return response_content, tool_info, response_time
             
         except Exception as e:
-            return f"<div class='status-error'>❌ Error querying model: {str(e)}</div>", None, None
+            return f'<div class="status-error">❌ Error querying model: {str(e)}</div>', None, None
     
     def format_tool_info(self, executed_tools):
-        """Format executed tools information as HTML"""
+        """Format executed tools information for display"""
         if not executed_tools:
-            return "<div class='tool-info'>🔍 <strong>Tools Used:</strong> None (Used existing knowledge)</div>"
+            return '<div class="tool-info"><strong>🔍 Tools Used:</strong> None (Used existing knowledge)</div>'
         
-        tool_html = "<div class='tool-info'>🔍 <strong>Tools Used:</strong><ul>"
+        tool_info = '<div class="tool-info"><strong>🔍 Tools Used:</strong><ul>'
         for i, tool in enumerate(executed_tools, 1):
             try:
                 if hasattr(tool, 'name'):
@@ -97,22 +105,24 @@ Remember: Your goal is to be the most reliable, up-to-date source of information
                 else:
                     tool_name = str(tool)
                 
-                tool_html += f"<li>{i}. <strong>{tool_name}</strong>"
+                tool_info += f'<li>{i}. <strong>{tool_name}</strong>'
                 
                 if hasattr(tool, 'parameters'):
                     params = tool.parameters
                     if isinstance(params, dict):
-                        tool_html += "<ul>"
+                        tool_info += '<ul>'
                         for key, value in params.items():
-                            tool_html += f"<li>{key}: {value}</li>"
-                        tool_html += "</ul>"
+                            tool_info += f'<li>{key}: {value}</li>'
+                        tool_info += '</ul>'
                 elif hasattr(tool, 'input'):
-                    tool_html += f"<ul><li>Input: {tool.input}</li></ul>"
-                tool_html += "</li>"
+                    tool_info += f'<ul><li>Input: {tool.input}</li></ul>'
+                tool_info += '</li>'
+                
             except Exception:
-                tool_html += f"<li>{i}. <strong>Tool {i}</strong> (Error parsing details)</li>"
-        tool_html += "</ul></div>"
-        return tool_html
+                tool_info += f'<li>{i}. <strong>Tool {i}</strong> (Error parsing details)</li>'
+        
+        tool_info += '</ul></div>'
+        return tool_info
     
     def get_example_queries(self):
         """Return categorized example queries"""
@@ -164,12 +174,12 @@ Remember: Your goal is to be the most reliable, up-to-date source of information
     def get_custom_prompt_examples(self):
         """Return custom system prompt examples"""
         return {
-            "🎯 Fact-Checker": "You are a fact-checker. Always verify claims with multiple sources and clearly indicate confidence levels in your assessments.",
-            "📊 News Analyst": "You are a news analyst. Focus on providing balanced, unbiased reporting with multiple perspectives on current events.",
-            "💼 Financial Advisor": "You are a financial advisor. Provide accurate market data with context about trends and implications for investors.",
-            "🔬 Research Assistant": "You are a research assistant specializing in scientific and technical information. Provide detailed, evidence-based responses.",
-            "🌍 Global News Correspondent": "You are a global news correspondent. Focus on international events and their interconnections.",
-            "📈 Market Analyst": "You are a market analyst. Provide detailed financial analysis including technical indicators and market sentiment."
+            "🎯 Fact-Checker": "You are a fact-checker. Always verify claims with multiple sources and clearly indicate confidence levels in your assessments. Use phrases like 'highly confident', 'moderately confident', or 'requires verification' when presenting information.",
+            "📊 News Analyst": "You are a news analyst. Focus on providing balanced, unbiased reporting with multiple perspectives on current events. Always present different viewpoints and avoid partisan language.",
+            "💼 Financial Advisor": "You are a financial advisor. Provide accurate market data with context about trends and implications for investors. Always include disclaimers about market risks and the importance of professional financial advice.",
+            "🔬 Research Assistant": "You are a research assistant specializing in scientific and technical information. Provide detailed, evidence-based responses with proper context about methodology and limitations of studies.",
+            "🌍 Global News Correspondent": "You are a global news correspondent. Focus on international events and their interconnections. Provide cultural context and explain how events in one region might affect others.",
+            "📈 Market Analyst": "You are a market analyst. Provide detailed financial analysis including technical indicators, market sentiment, and economic factors affecting price movements."
         }
 
 def create_interface():
@@ -178,152 +188,206 @@ def create_interface():
     custom_css = """
     <style>
     .gradio-container {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        padding: 20px;
+        max-width: 1400px;
+        margin: 0 auto;
+        background: #f5f7fa;
         min-height: 100vh;
-        font-family: 'Segoe UI', sans-serif;
-        color: #333;
+        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+        color: #1f2937;
     }
-
-    h1, h2, h3, h4 {
-        color: white;
-        text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
+    
+    .main-header {
+        background: white;
+        padding: 2rem;
+        border-radius: 12px;
+        margin: 2rem 1rem;
+        text-align: center;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
     }
-
-    .feature-card {
+    
+    .main-header h1 {
+        font-size: 2rem;
+        font-weight: 700;
+        margin: 0;
+        color: #111827;
+    }
+    
+    .main-header p {
+        font-size: 1rem;
+        color: #4b5563;
+        margin: 0.5rem 0 0;
+    }
+    
+    .section-card {
         background: white;
-        border-radius: 10px;
-        padding: 20px;
-        margin-bottom: 20px;
-        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
-        transition: transform 0.3s ease;
+        border-radius: 12px;
+        padding: 1.5rem;
+        margin: 1rem;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+        transition: box-shadow 0.2s ease;
     }
-
-    .feature-card:hover {
-        transform: translateY(-5px);
+    
+    .section-card:hover {
+        box-shadow: 0 4px 16px rgba(0,0,0,0.1);
     }
-
+    
     .example-grid {
         display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-        gap: 10px;
+        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+        gap: 1rem;
+        margin-top: 1rem;
     }
-
-    .status-success {
-        background: #48bb78;
-        color: white;
-        padding: 10px;
-        border-radius: 5px;
+    
+    .example-item {
+        background: #f8fafc;
+        border-radius: 8px;
+        padding: 1rem;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        border: 1px solid #e5e7eb;
     }
-
-    .status-warning {
-        background: #ed8936;
-        color: white;
-        padding: 10px;
-        border-radius: 5px;
+    
+    .example-item:hover {
+        background: #e5e7eb;
+        transform: translateY(-2px);
     }
-
+    
+    .status-success {
+        background: #ecfdf5;
+        color: #065f46;
+        padding: 0.75rem;
+        border-radius: 8px;
+        border: 1px solid #d1fae5;
+    }
+    
     .status-error {
-        background: #f56565;
-        color: white;
-        padding: 10px;
-        border-radius: 5px;
+        background: #fef2f2;
+        color: #991b1b;
+        padding: 0.75rem;
+        border-radius: 8px;
+        border: 1px solid #fee2e2;
     }
-
+    
     .results-section {
         background: white;
-        border-radius: 10px;
-        padding: 20px;
-        margin-top: 20px;
-        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
-    }
-
-    .response-content {
-        background: #f8f9fa;
-        padding: 15px;
-        border-radius: 8px;
-        margin-bottom: 15px;
-    }
-
-    .response-content h3 {
-        color: #2d3748;
-        margin-bottom: 10px;
-    }
-
-    .response-content p {
-        line-height: 1.6;
-        color: #4a5568;
+        border-radius: 12px;
+        padding: 1.5rem;
+        margin: 1rem;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
     }
-
-    .timestamp {
-        font-size: 0.9rem;
-        color: #718096;
-        margin-top: 10px;
-    }
-
+    
     .tool-info {
-        background: #edf2f7;
-        padding: 15px;
+        background: #f8fafc;
         border-radius: 8px;
-        color: #2d3748;
-    }
-
-    .tool-info ul {
-        list-style-type: none;
-        padding-left: 0;
-    }
-
-    .tool-info li {
-        margin-bottom: 8px;
+        padding: 1rem;
+        margin: 1rem 0;
+        border: 1px solid #e5e7eb;
     }
-
+    
     .performance-badge {
-        background: #48bb78;
-        color: white;
-        padding: 5px 10px;
-        border-radius: 15px;
-        font-weight: bold;
+        background: #e5e7eb;
+        color: #374151;
+        padding: 0.5rem 1rem;
+        border-radius: 9999px;
         display: inline-block;
+        margin: 0.5rem 0;
+        font-size: 0.875rem;
     }
-
+    
     .footer-section {
-        background: #2d3748;
+        background: #111827;
         color: white;
-        padding: 20px;
-        border-radius: 10px;
-        margin-top: 20px;
+        padding: 2rem;
+        border-radius: 12px;
+        margin: 2rem 1rem;
         text-align: center;
     }
-
+    
     .footer-section a {
-        color: #63b3ed;
+        color: #60a5fa;
         text-decoration: none;
+        font-weight: 500;
     }
-
+    
     .footer-section a:hover {
         text-decoration: underline;
     }
-
-    @media (max-width: 768px) {
-        .gradio-row {
-            flex-direction: column;
-        }
+    
+    .prompt-example {
+        background: #f8fafc;
+        border-radius: 8px;
+        padding: 1rem;
+        margin: 0.5rem 0;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        border: 1px solid #e5e7eb;
+    }
+    
+    .prompt-example:hover {
+        background: #e5e7eb;
+    }
+    
+    .prompt-example-title {
+        font-weight: 600;
+        color: #1f2937;
+        margin-bottom: 0.25rem;
+    }
+    
+    .prompt-example-text {
+        font-size: 0.875rem;
+        color: #4b5563;
+        line-height: 1.5;
+    }
+    
+    .gr-button {
+        border-radius: 8px !important;
+        padding: 0.75rem 1.5rem !important;
+        font-weight: 500 !important;
+    }
+    
+    .gr-button-primary {
+        background: #2563eb !important;
+        color: white !important;
+    }
+    
+    .gr-button-primary:hover {
+        background: #1d4ed8 !important;
+    }
+    
+    .gr-button-secondary {
+        background: #e5e7eb !important;
+        color: #374151 !important;
+    }
+    
+    .gr-button-secondary:hover {
+        background: #d1d5db !important;
+    }
+    
+    .gr-textbox, .gr-dropdown, .gr-slider {
+        border-radius: 8px !important;
+        border: 1px solid #e5e7eb !important;
+    }
+    
+    .gr-accordion {
+        border-radius: 8px !important;
+        border: 1px solid #e5e7eb !important;
     }
     </style>
     """
     
     def validate_api_key(api_key):
         if not api_key or api_key.strip() == "":
-            return "<div class='status-error'>❌ Please enter a valid API key</div>", False
+            return '<div class="status-error">❌ Please enter a valid API key</div>', False
+        
         success, message = fact_checker.initialize_client(api_key.strip())
         return message, success
     
     def process_query(query, model, temperature, api_key, system_prompt):
         if not api_key or api_key.strip() == "":
-            return "<div class='status-error'>❌ Please set your API key first</div>", "", ""
+            return '<div class="status-error">❌ Please set your API key first</div>', "", ""
         
         if not query or query.strip() == "":
-            return "<div class='status-error'>❌ Please enter a query</div>", "", ""
+            return '<div class="status-error">❌ Please enter a query</div>', "", ""
         
         if not fact_checker.client:
             success, message = fact_checker.initialize_client(api_key.strip())
@@ -336,16 +400,17 @@ def create_interface():
         
         timestamp = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
         formatted_response = f"""
-        <div class='response-content'>
-            <h3>Query: {query}</h3>
-            <p>{response}</p>
-            <p class='timestamp'>Generated at {timestamp} in {response_time}s</p>
+        <div class="results-section">
+            <h3>Query</h3>
+            <p>{query}</p>
+            <h3>Response</h3>
+            <div>{response}</div>
+            <hr>
+            <p><em>Generated at {timestamp} in {response_time}s</em></p>
         </div>
         """
         
-        performance_html = f"<span class='performance-badge'>⚡ Response time: {response_time}s</span>"
-        
-        return formatted_response, tool_info or "", performance_html
+        return formatted_response, tool_info or "", f'<div class="performance-badge">⚡ Response time: {response_time}s</div>'
     
     def reset_system_prompt():
         return fact_checker.get_system_prompt()
@@ -358,37 +423,72 @@ def create_interface():
     
     with gr.Blocks(title="Real-time Fact Checker & News Agent", css=custom_css) as demo:
         gr.HTML("""
-        <div style='text-align: center; padding: 20px;'>
-            <h1>🔍 Real-time Fact Checker & News Agent</h1>
-            <p style='color: white;'>Powered by Groq's Compound Models with Built-in Web Search</p>
+        <div class="main-header">
+            <h1>🔍 Real-time Fact Checker</h1>
+            <p>Powered by Groq's Compound Models with Real-time Web Search</p>
         </div>
         """)
         
-        with gr.Row(elem_classes="gradio-row"):
+        with gr.Row():
             with gr.Column(scale=2):
                 with gr.Group():
-                    gr.HTML('<div class="feature-card">')
+                    gr.HTML('<div class="section-card">')
                     gr.Markdown("### 🔑 API Configuration")
                     api_key_input = gr.Textbox(
                         label="Groq API Key",
                         placeholder="Enter your Groq API key here...",
-                        type="password"
+                        type="password",
+                        info="Get your free API key from https://console.groq.com/"
                     )
                     api_status = gr.HTML(
-                        label="Status",
-                        value="<div class='status-warning'>⚠️ Please enter your API key</div>"
+                        value='<div class="status-error">⚠️ Please enter your API key</div>'
                     )
                     validate_btn = gr.Button("Validate API Key", variant="secondary")
                     gr.HTML('</div>')
                 
                 with gr.Group():
-                    gr.HTML('<div class="feature-card">')
+                    gr.HTML('<div class="section-card">')
+                    gr.Markdown("### ⚙️ Advanced Options")
+                    
+                    with gr.Accordion("📝 System Prompt Examples", open=False):
+                        gr.Markdown("**Click any example to load it as your system prompt:**")
+                        custom_prompts = fact_checker.get_custom_prompt_examples()
+                        for title, prompt in custom_prompts.items():
+                            gr.HTML(f"""
+                            <div class="prompt-example" onclick="document.getElementById('system_prompt_input').value = '{prompt}'">
+                                <div class="prompt-example-title">{title}</div>
+                                <div class="prompt-example-text">{prompt[:100]}...</div>
+                            </div>
+                            """)
+                    
+                    with gr.Accordion("🔧 System Prompt", open=False):
+                        system_prompt_input = gr.Textbox(
+                            label="System Prompt",
+                            value=fact_checker.get_system_prompt(),
+                            lines=8,
+                            info="Customize how the AI behaves and responds",
+                            elem_id="system_prompt_input"
+                        )
+                        reset_prompt_btn = gr.Button("Reset to Default", variant="secondary")
+                        
+                        gr.Markdown("**Quick Load Custom Prompts:**")
+                        for title, prompt in custom_prompts.items():
+                            prompt_btn = gr.Button(title, variant="secondary")
+                            prompt_btn.click(
+                                fn=lambda p=prompt: p,
+                                outputs=[system_prompt_input]
+                            )
+                    gr.HTML('</div>')
+                
+                with gr.Group():
+                    gr.HTML('<div class="section-card">')
                     gr.Markdown("### 💭 Your Query")
                     query_input = gr.Textbox(
                         label="Ask anything that requires real-time information",
                         placeholder="e.g., What are the latest AI developments today?",
                         lines=4
                     )
+                    
                     with gr.Row():
                         model_choice = gr.Dropdown(
                             choices=fact_checker.model_options,
@@ -402,19 +502,23 @@ def create_interface():
                             step=0.1,
                             label="Temperature"
                         )
+                    
                     submit_btn = gr.Button("🔍 Get Real-time Information", variant="primary")
                     clear_btn = gr.Button("Clear", variant="secondary")
                     gr.HTML('</div>')
             
             with gr.Column(scale=1):
                 with gr.Group():
-                    gr.HTML('<div class="feature-card">')
+                    gr.HTML('<div class="section-card">')
                     gr.Markdown("### 📝 Example Queries")
+                    gr.Markdown("Click any example to load it:")
+                    
                     examples = fact_checker.get_example_queries()
                     for category, queries in examples.items():
-                        with gr.Accordion(category, open=False):
+                        with gr.Accordion(category, open=category == "📰 Latest News"):
                             for query in queries:
-                                gr.Button(query, variant="secondary").click(
+                                example_btn = gr.Button(query, variant="secondary")
+                                example_btn.click(
                                     fn=lambda q=query: q,
                                     outputs=[query_input]
                                 )
@@ -422,56 +526,69 @@ def create_interface():
         
         gr.HTML('<div class="results-section">')
         gr.Markdown("### 📊 Results")
+        
         with gr.Row():
             with gr.Column(scale=2):
                 response_output = gr.HTML(
-                    label="Response",
-                    value="<div class='response-content'><p>Your response will appear here...</p></div>"
+                    value='<div class="results-section"><em>Your response will appear here...</em></div>'
                 )
+            
             with gr.Column(scale=1):
                 tool_info_output = gr.HTML(
-                    label="Tool Execution Info",
-                    value="<div class='tool-info'>Tool execution details will appear here...</div>"
+                    value='<div class="tool-info"><em>Tool execution details will appear here...</em></div>'
                 )
+                
                 performance_output = gr.HTML(
-                    label="Performance",
                     value=""
                 )
         gr.HTML('</div>')
         
-        gr.HTML("""
-        <div class="footer-section">
-            <h3>🔗 Useful Links</h3>
-            <p>
-                <a href="https://console.groq.com/" target="_blank">Groq Console</a> |
-                <a href="https://console.groq.com/docs/quickstart" target="_blank">Docs</a> |
-                <a href="https://console.groq.com/docs/models" target="_blank">Models</a>
-            </p>
-            <h3>💡 Tips</h3>
-            <p>Use custom prompts to specialize the AI. Check tool info for web search usage.</p>
-        </div>
-        """)
-        
         validate_btn.click(
             fn=validate_api_key,
             inputs=[api_key_input],
             outputs=[api_status, gr.State()]
         )
         
+        reset_prompt_btn.click(
+            fn=reset_system_prompt,
+            outputs=[system_prompt_input]
+        )
+        
         submit_btn.click(
             fn=process_query,
-            inputs=[query_input, model_choice, temperature, api_key_input, gr.State()],
+            inputs=[query_input, model_choice, temperature, api_key_input, system_prompt_input],
             outputs=[response_output, tool_info_output, performance_output]
         )
         
         clear_btn.click(
-            fn=lambda: ("", "<div class='response-content'><p>Your response will appear here...</p></div>", 
-                       "<div class='tool-info'>Tool execution details will appear here...</div>", ""),
+            fn=lambda: ("", '<div class="results-section"><em>Your response will appear here...</em></div>', 
+                       '<div class="tool-info"><em>Tool execution details will appear here...</em></div>', ""),
             outputs=[query_input, response_output, tool_info_output, performance_output]
         )
+        
+        gr.HTML("""
+        <div class="footer-section">
+            <h3>🔗 Useful Links</h3>
+            <p>
+                <a href="https://console.groq.com/" target="_blank">Groq Console</a> - Get your free API key<br>
+                <a href="https://console.groq.com/docs/quickstart" target="_blank">Groq Documentation</a> - Learn more about Groq models<br>
+                <a href="https://console.groq.com/docs/models" target="_blank">Compound Models Info</a> - Details about compound models
+            </p>
+            <h3>💡 Tips</h3>
+            <ul style="text-align: left; display: inline-block;">
+                <li>Compound models use web search for real-time information</li>
+                <li>Use temperature 0.1 for factual queries, 0.7-0.9 for creative ones</li>
+                <li>compound-beta: more capable | compound-beta-mini: faster</li>
+                <li>Customize system prompts for specialized responses</li>
+                <li>Check Tool Execution Info for web search usage</li>
+            </ul>
+        </div>
+        """)
     
     return demo
 
 if __name__ == "__main__":
     demo = create_interface()
-    demo.launch(share=True)
+    demo.launch(
+        share=True
+    )