Update app.py

app.py

@@ -12,301 +12,113 @@ from llama_index.llms.huggingface_api import HuggingFaceInferenceAPI
 # Framework 2: smolagents
 from smolagents import CodeAgent, DuckDuckGoSearchTool, tool, InferenceClientModel
 
-# 0. SHARED CONFIG
+# 0. CONFIG & ASSETS
 HF_TOKEN = os.getenv("HF_TOKEN")
 MODEL_ID = "Qwen/Qwen2.5-7B-Instruct"
 
+# CUSTOM CSS for better styling
+custom_css = """
+.agent-header { text-align: center; margin-bottom: 20px; }
+.tool-tag { background-color: #f0f2f6; border-radius: 5px; padding: 2px 8px; font-size: 0.8em; }
+"""
+
 # ==========================================
 # PART 1: LLAMAINDEX AGENT
 # ==========================================
-li_llm = HuggingFaceInferenceAPI(
-    model_name=MODEL_ID,
-    token=HF_TOKEN,
-    provider="together" 
-)
+li_llm = HuggingFaceInferenceAPI(model_name=MODEL_ID, token=HF_TOKEN, provider="together")
 
 def get_tokyo_time() -> str:
     """Returns the current time in Tokyo, Japan."""
     tz = pytz.timezone('Asia/Tokyo')
     return f"The current time in Tokyo is {datetime.datetime.now(tz).strftime('%H:%M:%S')}"
 
-li_tools = [FunctionTool.from_defaults(fn=get_tokyo_time)]
-
 li_agent = AgentWorkflow.from_tools_or_functions(
-    li_tools,
+    [FunctionTool.from_defaults(fn=get_tokyo_time)],
     llm=li_llm,
 )
 
 async def chat_llama(message, history):
     try:
+        # LlamaIndex Workflows are async-native
         result = await li_agent.run(user_msg=message)
         return str(result)
     except Exception as e:
-        return f"⚠️ **Error:** {str(e)}\n\nPlease try a simpler question or rephrase."
+        return f"❌ LlamaIndex Error: {str(e)}"
 
 # ==========================================
 # PART 2: SMOLAGENTS
 # ==========================================
-smol_model = InferenceClientModel(
-    model_id=MODEL_ID,
-    token=HF_TOKEN,
-    provider="together"
-)
+smol_model = InferenceClientModel(model_id=MODEL_ID, token=HF_TOKEN, provider="together")
 
 @tool
 def weather_tool(location: str) -> str:
-    """Get the current weather for a location.
-    Args:
-        location: The city name.
-    """
+    """Get the current weather for a location."""
     return f"The weather in {location} is currently sunny and 22°C."
 
+# smolagents can capture logs in a buffer for the UI
 smol_agent = CodeAgent(
     model=smol_model,
-    tools=[weather_tool, DuckDuckGoSearchTool()]
+    tools=[weather_tool, DuckDuckGoSearchTool()],
+    add_base_tools=True # Adds useful defaults like line_plot
 )
 
 def chat_smol(message, history):
     try:
+        # We wrap the run to return a clean string
         response = smol_agent.run(message)
         return str(response)
     except Exception as e:
-        return f"⚠️ **Error:** {str(e)}\n\nPlease try rephrasing your question."
+        return f"❌ Smolagents Error: {str(e)}"
 
 # ==========================================
-# PART 3: MODERN GRADIO UI
+# PART 3: IMPROVED GRADIO UI
 # ==========================================
-
-# Custom CSS for better styling
-custom_css = """
-.header-container {
-    text-align: center;
-    padding: 20px;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    border-radius: 10px;
-    margin-bottom: 20px;
-    color: white;
-}
-.info-box {
-    background-color: #f0f4ff;
-    padding: 15px;
-    border-radius: 8px;
-    border-left: 4px solid #667eea;
-    margin-bottom: 15px;
-}
-.feature-card {
-    background: white;
-    padding: 20px;
-    border-radius: 10px;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-    margin-bottom: 15px;
-}
-.tool-badge {
-    display: inline-block;
-    background: #e0e7ff;
-    color: #4338ca;
-    padding: 8px 15px;
-    border-radius: 20px;
-    margin: 5px;
-    font-size: 0.9em;
-    font-weight: 500;
-}
-"""
-
-with gr.Blocks(title="AI Agent Comparison") as demo:
+with gr.Blocks(theme=gr.themes.Soft(), css=custom_css) as demo:
     
-    # Header Section
-    with gr.Row(elem_classes="header-container"):
-        gr.Markdown("""
-        # 🤖 AI Agent Framework Comparison
-        ### Compare LlamaIndex and smolagents side-by-side
-        """)
-    
-    # Model Info Bar
-    with gr.Row():
+    with gr.Row(elem_classes="agent-header"):
         gr.Markdown(f"""
-        <div class="info-box">
-        <strong>🧠 Current Model:</strong> {MODEL_ID} | <strong>⚡ Provider:</strong> Together AI | <strong>🔑 Status:</strong> {'✅ Connected' if HF_TOKEN else '❌ No Token'}
-        </div>
+        # 🤖 Multi-Framework Agent Playground
+        **Model:** `{MODEL_ID}` | **Provider:** `Together AI`
         """)
-    
-    # Main Tabs
-    with gr.Tabs() as tabs:
-        
-        # Tab 1: LlamaIndex
-        with gr.Tab("🦙 LlamaIndex Workflow"):
+
+    with gr.Tabs():
+        # TAB 1: LLAMAINDEX
+        with gr.Tab("🏗️ LlamaIndex Workflow"):
             with gr.Row():
-                with gr.Column(scale=1):
-                    gr.Markdown("""
-                    <div class="feature-card">
-                    
-                    ### About LlamaIndex
-                    **Framework Type:** Workflow-based Agent  
-                    **Strengths:** Structured reasoning, enterprise-grade  
-                    
-                    **Available Tools:**
-                    
-                    <span class="tool-badge">🕐 Tokyo Time</span>
-                    
-                    **Best For:**
-                    - Time-based queries
-                    - Structured data retrieval
-                    - Enterprise applications
-                    
-                    </div>
-                    """)
-                    
-                    gr.Markdown("""
-                    ### 💡 Try These Examples
-                    Click to copy and paste:
-                    
-                    ```
-                    What time is it in Tokyo?
-                    ```
-                    
-                    ```
-                    Can you tell me the current Tokyo time?
-                    ```
-                    
-                    ```
-                    What's the time right now in Japan?
-                    ```
-                    """)
-                
-                with gr.Column(scale=2):
+                with gr.Column(scale=4):
                     gr.ChatInterface(
                         fn=chat_llama,
-                        chatbot=gr.Chatbot(height=500, placeholder="Ask me about Tokyo time! 🕐"),
-                        textbox=gr.Textbox(placeholder="Type your message here...", container=False),
-                        retry_btn="🔄 Retry",
-                        undo_btn="↩️ Undo",
-                        clear_btn="🗑️ Clear",
+                        examples=["What time is it in Tokyo?", "Explain how workflows work."],
+                        type="messages"
                     )
-        
-        # Tab 2: smolagents
-        with gr.Tab("🔧 smolagents CodeAgent"):
-            with gr.Row():
                 with gr.Column(scale=1):
-                    gr.Markdown("""
-                    <div class="feature-card">
-                    
-                    ### About smolagents
-                    **Framework Type:** Code-executing Agent  
-                    **Strengths:** Dynamic execution, web search  
-                    
-                    **Available Tools:**
-                    
-                    <span class="tool-badge">🌤️ Weather</span>
-                    <span class="tool-badge">🔍 Web Search</span>
-                    
-                    **Best For:**
-                    - General queries
-                    - Web research
-                    - Weather information
-                    
-                    </div>
-                    """)
-                    
-                    gr.Markdown("""
-                    ### 💡 Try These Examples
-                    Click to copy and paste:
-                    
-                    ```
-                    What's the weather in Paris?
-                    ```
-                    
-                    ```
-                    Search for latest AI news
-                    ```
-                    
-                    ```
-                    Tell me the weather in London
-                    ```
-                    
-                    ```
-                    Find information about Claude AI
-                    ```
-                    """)
-                
-                with gr.Column(scale=2):
+                    gr.Markdown("### Agent Specs")
+                    gr.Markdown("**Type:** Workflow-based Agent")
+                    gr.Markdown("**Tools:** `get_tokyo_time`")
+                    gr.Info("LlamaIndex Workflows use an event-driven architecture, ideal for complex, multi-step logic.")
+
+        # TAB 2: SMOLAGENTS
+        with gr.Tab("💻 smolagents CodeAgent"):
+            with gr.Row():
+                with gr.Column(scale=4):
                     gr.ChatInterface(
                         fn=chat_smol,
-                        chatbot=gr.Chatbot(height=500, placeholder="Ask me anything! I can search the web and check weather. 🌐"),
-                        textbox=gr.Textbox(placeholder="Type your message here...", container=False),
-                        retry_btn="🔄 Retry",
-                        undo_btn="↩️ Undo",
-                        clear_btn="🗑️ Clear",
+                        examples=["What is the weather in Paris?", "Search for the latest AI news."],
+                        type="messages"
                     )
-        
-        # Tab 3: Comparison & Info
-        with gr.Tab("📊 Framework Comparison"):
-            gr.Markdown("""
-            ## Framework Feature Comparison
-            
-            | Feature | LlamaIndex | smolagents |
-            |---------|------------|------------|
-            | **Architecture** | Workflow-based | Code-execution |
-            | **Web Search** | ❌ | ✅ |
-            | **Custom Tools** | ✅ | ✅ |
-            | **Speed** | ⚡⚡ Fast | ⚡⚡⚡ Very Fast |
-            | **Complexity** | Higher | Lower |
-            | **Best Use Case** | Enterprise, Structured | General, Dynamic |
-            
-            ---
-            
-            ## How to Use This Space
-            
-            1. **Choose a Framework Tab** - Pick either LlamaIndex or smolagents
-            2. **Copy the Examples** - Use the example queries shown in each tab
-            3. **Ask Your Questions** - Type your own questions in the chat
-            4. **Compare Results** - Try the same question in both frameworks
-            
-            ---
-            
-            ## Tips for Best Results
-            
-            - ✅ **Be specific** - "What time is it in Tokyo?" works better than "time?"
-            - ✅ **Use natural language** - Ask questions as you would to a person
-            - ✅ **Start simple** - Try the examples first to understand capabilities
-            - ❌ **Avoid complex multi-step queries** - Keep questions focused
-            
-            ---
-            
-            ## Technical Details
-            
-            **Model:** `Qwen/Qwen2.5-7B-Instruct`  
-            **Provider:** Together AI Inference API  
-            **Frameworks:** LlamaIndex v0.12+ & smolagents v1.0+  
-            **Deployment:** Hugging Face Spaces (Gradio 6.0)
-            
-            ---
-            
-            ## Framework Strengths
-            
-            ### LlamaIndex 🦙
-            - Excellent for enterprise applications
-            - Built-in support for RAG (Retrieval Augmented Generation)
-            - Strong workflow orchestration
-            - Great for structured data operations
-            
-            ### smolagents 🔧
-            - Lightweight and fast
-            - Dynamic code execution
-            - Great for web search and general queries
-            - Simple to set up and use
-            """)
-    
-    # Footer
-    gr.Markdown("""
-    ---
-    <div style="text-align: center; color: #666; padding: 20px;">
-        <p>Built with ❤️ using Gradio 6.0 | Powered by Together AI | Framework Comparison Demo</p>
-        <p style="font-size: 0.9em;">⚠️ This is a demonstration space. Responses may vary based on API availability.</p>
-    </div>
-    """)
+                with gr.Column(scale=1):
+                    gr.Markdown("### Agent Specs")
+                    gr.Markdown("**Type:** Code Executor")
+                    gr.Markdown("**Tools:** `weather_tool`, `DuckDuckGo`")
+                    gr.Warning("smolagents writes and executes Python code to solve tasks.")
+
+    with gr.Accordion("⚙️ System Configuration", open=False):
+        gr.JSON(value={
+            "model": MODEL_ID,
+            "status": "Connected",
+            "timezone": "UTC",
+            "frameworks": ["LlamaIndex 0.11+", "smolagents 1.0+"]
+        })
 
 if __name__ == "__main__":
-    demo.launch(
-        theme=gr.themes.Soft(),
-        css=custom_css
-    )
+    demo.launch()