Update README

Dockerfile

@@ -1,23 +0,0 @@
-FROM python:3.10-slim
-
-WORKDIR /app
-
-# Copy requirements and install dependencies
-COPY requirements.txt .
-RUN pip install --no-cache-dir -r requirements.txt
-
-# Copy the rest of the code
-COPY . .
-
-# Create necessary directories if they don't exist
-RUN mkdir -p static
-
-# Make port 7860 available (Hugging Face Spaces uses this port)
-EXPOSE 7860
-
-# Set environment variables
-ENV HOST=0.0.0.0
-ENV PORT=7860
-
-# Run the application
-CMD ["python", "-m", "uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -1,3 +1,20 @@
+---
+title: WebAgentTools
+emoji: 🛠️
+colorFrom: blue
+colorTo: purple
+sdk: gradio
+sdk_version: "4.19.2"
+app_file: app.py
+pinned: false
+---
+
+# WebAgentTools
+
+A web-based agent tools interface for interacting with various AI tools and services.
+
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+
 # LangGraph Agent with Tools
 
 This project demonstrates a conversational AI agent built with LangGraph, featuring three integrated tools and a responsive web UI.

app.py

@@ -1,198 +0,0 @@
-# app.py
-from typing import Annotated, Any, Dict, List, Literal, Sequence, TypedDict, Union
-import os
-import asyncio
-from operator import itemgetter
-from dotenv import load_dotenv
-from fastapi import FastAPI, WebSocket, WebSocketDisconnect
-from fastapi.staticfiles import StaticFiles
-from fastapi.responses import FileResponse
-import uvicorn
-
-# LangGraph
-from langgraph.graph import END, StateGraph
-from langgraph.prebuilt import ToolExecutor
-from langgraph.prebuilt.tool_node import ToolNode
-
-# LangChain
-from langchain_core.messages import AIMessage, HumanMessage, SystemMessage, ToolMessage
-from langchain_core.prompts import ChatPromptTemplate, MessagesPlaceholder
-from langchain_core.output_parsers import JsonOutputParser
-from langchain_core.tools import tool
-from langchain_openai import ChatOpenAI
-
-# Load environment variables from .env file
-load_dotenv()
-
-# Setup FastAPI app
-app = FastAPI()
-
-
-# Define the agent's state
-class AgentState(TypedDict):
-    messages: Sequence[Union[AIMessage, HumanMessage, SystemMessage, ToolMessage]]
-    tools: List[Dict]
-
-
-# Define tools
-@tool
-def search_web(query: str) -> str:
-    """Search the web for information on a given query."""
-    # In a real implementation, this would connect to a search API
-    return f"Found information about {query}: This is a simulated web search result for '{query}'."
-
-
-@tool
-def calculate(expression: str) -> str:
-    """Calculate the result of a mathematical expression."""
-    try:
-        # CAUTION: eval can be dangerous in production; consider using a safer alternative
-        return f"Result: {eval(expression)}"
-    except Exception as e:
-        return f"Error calculating: {str(e)}"
-
-
-@tool
-def generate_image_prompt(description: str) -> str:
-    """Generate a detailed prompt for image generation based on a description."""
-    enhanced_prompt = f"An image of {description}, high resolution, detailed lighting, professional quality"
-    return f"Generated image prompt: {enhanced_prompt}"
-
-
-# Set up the language model
-model = ChatOpenAI(temperature=0.5)
-
-# Create tools list
-tools = [search_web, calculate, generate_image_prompt]
-tool_executor = ToolExecutor(tools)
-
-
-# Define agent nodes
-def create_agent_node():
-    # System prompt for the agent
-    system_prompt = """You are a helpful AI assistant with access to the following tools:
-
-1. search_web: Search the web for information
-2. calculate: Calculate the result of mathematical expressions
-3. generate_image_prompt: Generate prompts for image generation
-
-Use these tools to assist the user with their requests. When a tool is needed, call the appropriate function.
-"""
-
-    # Create the prompt template
-    prompt = ChatPromptTemplate.from_messages(
-        [
-            SystemMessage(content=system_prompt),
-            MessagesPlaceholder(variable_name="messages"),
-        ]
-    )
-
-    # Create the agent
-    return prompt | model.bind_tools(tools=tools)
-
-
-# Define routing logic
-def should_continue(state: AgentState) -> Literal["continue", "end"]:
-    """Determine if the agent should continue or end."""
-    # Get the last message
-    last_message = state["messages"][-1]
-    
-    # If the last message is from the AI and doesn't call a tool, we're done
-    if isinstance(last_message, AIMessage) and not last_message.tool_calls:
-        return "end"
-    return "continue"
-
-
-def which_tool(state: AgentState) -> str:
-    """Determine which tool to use."""
-    last_message = state["messages"][-1]
-    if not isinstance(last_message, AIMessage):
-        raise ValueError("Expected AIMessage")
-    if not last_message.tool_calls:
-        raise ValueError("Expected tool_calls")
-    # Just return the name of the first tool
-    return last_message.tool_calls[0]["name"]
-
-
-# Create the graph
-def build_agent_graph():
-    """Build the LangGraph for the agent."""
-    # Create the graph
-    graph = StateGraph(AgentState)
-    
-    # Add the nodes
-    graph.add_node("agent", create_agent_node())
-    graph.add_node("tool", ToolNode(tool_executor))
-    
-    # Add the edges
-    graph.add_conditional_edges(
-        "agent",
-        should_continue,
-        {
-            "continue": "tool",
-            "end": END,
-        },
-    )
-    graph.add_conditional_edges(
-        "tool",
-        lambda state: "agent",
-        {
-            "agent": "agent",
-        },
-    )
-    
-    # Set the entry point
-    graph.set_entry_point("agent")
-    
-    return graph.compile()
-
-
-# Create the agent executor
-agent_executor = build_agent_graph()
-
-
-# WebSocket for real-time communication
-@app.websocket("/ws")
-async def websocket_endpoint(websocket: WebSocket):
-    await websocket.accept()
-    try:
-        # Initialize the state
-        state = {
-            "messages": [],
-            "tools": tools,
-        }
-        
-        while True:
-            data = await websocket.receive_text()
-            # Add the user message to the state
-            state["messages"].append(HumanMessage(content=data))
-            
-            # Run the agent
-            result = agent_executor.invoke(state)
-            
-            # Get the final AI message
-            for message in result["messages"]:
-                if isinstance(message, AIMessage):
-                    await websocket.send_json({"type": "ai_message", "content": message.content})
-                elif isinstance(message, ToolMessage):
-                    await websocket.send_json({"type": "tool_message", "content": message.content})
-            
-            # Update the state
-            state = result
-    
-    except WebSocketDisconnect:
-        print("Client disconnected")
-
-
-# Serve the HTML frontend
-@app.get("/")
-async def get():
-    return FileResponse("index.html")
-
-
-# Mount static files
-app.mount("/static", StaticFiles(directory="static"), name="static")
-
-
-if __name__ == "__main__":
-    uvicorn.run(app, host="0.0.0.0", port=8000)

index.html

@@ -1,40 +0,0 @@
-<!-- index.html -->
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>LangGraph Agent</title>
-    <link rel="stylesheet" href="static/styles.css">
-</head>
-<body>
-    <div class="container">
-        <header>
-            <h1>LangGraph Agent with Tools</h1>
-            <p>Ask me anything! I can search the web, calculate expressions, and generate image prompts.</p>
-        </header>
-
-        <div class="chat-container">
-            <div id="chat-messages" class="chat-messages"></div>
-
-            <div class="message-input">
-                <form id="message-form">
-                    <input type="text" id="user-input" placeholder="Type your message here..." autocomplete="off">
-                    <button type="submit">Send</button>
-                </form>
-            </div>
-        </div>
-
-        <div class="tools-info">
-            <h3>Available Tools:</h3>
-            <ul>
-                <li><strong>Search Web</strong> - Find information online</li>
-                <li><strong>Calculate</strong> - Solve mathematical expressions</li>
-                <li><strong>Generate Image Prompt</strong> - Create detailed image generation prompts</li>
-            </ul>
-        </div>
-    </div>
-
-    <script src="static/script.js"></script>
-</body>
-</html>

requirements.txt

@@ -1,7 +0,0 @@
-fastapi==0.109.0
-uvicorn==0.27.0
-python-dotenv==1.0.0
-langgraph==0.1.10
-langchain-core==0.1.17
-langchain-openai==0.0.5
-websockets==12.0

static/script.js

@@ -1,128 +0,0 @@
-// static/script.js
-document.addEventListener('DOMContentLoaded', function() {
-    const messageForm = document.getElementById('message-form');
-    const userInput = document.getElementById('user-input');
-    const chatMessages = document.getElementById('chat-messages');
-    let websocket;
-
-    // Add welcome message
-    addMessage('Welcome! I can help you search the web, calculate expressions, and generate image prompts. What would you like to do?', 'ai');
-
-    // Connect WebSocket
-    function connectWebSocket() {
-        // Get the correct WebSocket URL based on the current page URL
-        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-        const wsUrl = `${protocol}//${window.location.host}/ws`;
-        
-        websocket = new WebSocket(wsUrl);
-        
-        websocket.onopen = function(event) {
-            console.log('WebSocket connected');
-        };
-        
-        websocket.onmessage = function(event) {
-            const data = JSON.parse(event.data);
-            
-            if (data.type === 'ai_message') {
-                addMessage(data.content, 'ai');
-            } else if (data.type === 'tool_message') {
-                addMessage(data.content, 'tool');
-            }
-        };
-        
-        websocket.onclose = function(event) {
-            console.log('WebSocket disconnected');
-            // Try to reconnect after a delay
-            setTimeout(connectWebSocket, 3000);
-        };
-        
-        websocket.onerror = function(error) {
-            console.error('WebSocket error:', error);
-        };
-    }
-
-    // Connect to WebSocket when page loads
-    connectWebSocket();
-
-    // Handle message submission
-    messageForm.addEventListener('submit', function(event) {
-        event.preventDefault();
-        const message = userInput.value.trim();
-        
-        if (message) {
-            // Add user message to chat
-            addMessage(message, 'user');
-            
-            // Send message to server via WebSocket
-            if (websocket && websocket.readyState === WebSocket.OPEN) {
-                websocket.send(message);
-                
-                // Add a "thinking" message
-                const thinkingId = addThinkingMessage();
-                
-                // Clear input
-                userInput.value = '';
-                
-                // Focus on input
-                userInput.focus();
-            } else {
-                addMessage('Connection lost. Trying to reconnect...', 'system');
-                connectWebSocket();
-            }
-        }
-    });
-
-    // Function to add a message to the chat
-    function addMessage(content, type) {
-        // Remove any thinking message first
-        removeThinkingMessage();
-        
-        const messageDiv = document.createElement('div');
-        messageDiv.classList.add('message');
-        
-        switch (type) {
-            case 'user':
-                messageDiv.classList.add('user-message');
-                break;
-            case 'ai':
-                messageDiv.classList.add('ai-message');
-                break;
-            case 'tool':
-                messageDiv.classList.add('tool-message');
-                break;
-            default:
-                messageDiv.classList.add('system-message');
-        }
-        
-        // Process markdown-like code blocks
-        content = content.replace(/```([\s\S]*?)```/g, '<pre><code>$1</code></pre>');
-        
-        messageDiv.innerHTML = content;
-        chatMessages.appendChild(messageDiv);
-        
-        // Scroll to bottom
-        chatMessages.scrollTop = chatMessages.scrollHeight;
-    }
-
-    // Function to add a "thinking" message
-    function addThinkingMessage() {
-        const thinkingDiv = document.createElement('div');
-        thinkingDiv.classList.add('message', 'ai-message', 'thinking');
-        thinkingDiv.id = 'thinking-message';
-        thinkingDiv.textContent = 'Thinking...';
-        chatMessages.appendChild(thinkingDiv);
-        
-        // Scroll to bottom
-        chatMessages.scrollTop = chatMessages.scrollHeight;
-        
-        return 'thinking-message';
-    }
-
-    // Function to remove the "thinking" message
-    function removeThinkingMessage() {
-        const thinkingMessage = document.getElementById('thinking-message');
-        if (thinkingMessage) {
-            thinkingMessage.remove();
-        }
-    }
-});

static/styles.css

@@ -1,155 +0,0 @@
-/* static/styles.css */
-* {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-}
-
-body {
-    background-color: #f5f5f5;
-    color: #333;
-    line-height: 1.6;
-}
-
-.container {
-    max-width: 900px;
-    margin: 0 auto;
-    padding: 20px;
-}
-
-header {
-    text-align: center;
-    margin-bottom: 30px;
-    padding: 20px;
-    background-color: #ffffff;
-    border-radius: 10px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-}
-
-header h1 {
-    color: #2c3e50;
-    margin-bottom: 10px;
-}
-
-.chat-container {
-    background-color: #ffffff;
-    border-radius: 10px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    overflow: hidden;
-    margin-bottom: 20px;
-}
-
-.chat-messages {
-    height: 400px;
-    padding: 20px;
-    overflow-y: auto;
-}
-
-.message {
-    margin-bottom: 15px;
-    padding: 10px 15px;
-    border-radius: 18px;
-    max-width: 80%;
-    word-wrap: break-word;
-}
-
-.user-message {
-    background-color: #e9f3ff;
-    color: #333;
-    margin-left: auto;
-    border-bottom-right-radius: 5px;
-}
-
-.ai-message {
-    background-color: #f0f0f0;
-    color: #333;
-    margin-right: auto;
-    border-bottom-left-radius: 5px;
-}
-
-.tool-message {
-    background-color: #fcf8e3;
-    color: #8a6d3b;
-    margin-right: auto;
-    border-bottom-left-radius: 5px;
-    font-style: italic;
-}
-
-.message-input {
-    display: flex;
-    padding: 15px;
-    background-color: #f9f9f9;
-    border-top: 1px solid #eaeaea;
-}
-
-#message-form {
-    display: flex;
-    width: 100%;
-}
-
-#user-input {
-    flex-grow: 1;
-    padding: 12px;
-    border: 1px solid #ddd;
-    border-radius: 20px;
-    outline: none;
-    font-size: 16px;
-}
-
-button {
-    padding: 0 20px;
-    background-color: #3498db;
-    color: white;
-    border: none;
-    border-radius: 20px;
-    margin-left: 10px;
-    cursor: pointer;
-    font-size: 16px;
-    transition: background-color 0.3s;
-}
-
-button:hover {
-    background-color: #2980b9;
-}
-
-.tools-info {
-    background-color: #ffffff;
-    border-radius: 10px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    padding: 20px;
-}
-
-.tools-info h3 {
-    margin-bottom: 10px;
-    color: #2c3e50;
-}
-
-.tools-info ul {
-    list-style-type: none;
-}
-
-.tools-info li {
-    margin-bottom: 8px;
-    padding-left: 20px;
-    position: relative;
-}
-
-.tools-info li::before {
-    content: "•";
-    position: absolute;
-    left: 0;
-    color: #3498db;
-}
-
-code {
-    background-color: #f8f8f8;
-    padding: 2px 4px;
-    border-radius: 4px;
-    font-family: 'Courier New', monospace;
-}
-
-.thinking {
-    font-style: italic;
-    color: #888;
-}