Spaces:

mozilla-ai
/

wasm-agents-blueprint

Running

File size: 21,384 Bytes

<!DOCTYPE html>
<html>
<head>
    <title>Tool-Calling Agent With Local LLM</title>
    <script src="https://cdn.jsdelivr.net/pyodide/v0.27.7/full/pyodide.js"></script>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }

        .description {
            background: #f8f9fa;
            border-left: 4px solid #007cba;
            padding: 20px;
            margin-bottom: 30px;
            border-radius: 5px;
            color: #555;
            line-height: 1.6;
        }
        .description h2 {
            color: #333;
            margin-top: 0;
            margin-bottom: 15px;
            font-size: 20px;
        }
        .description p {
            margin-bottom: 12px;
        }
        .description ul {
            margin-bottom: 0;
            padding-left: 20px;
        }
        .description li {
            margin-bottom: 8px;
        }
        .description a {
            color: #007cba;
            text-decoration: none;
            font-weight: 500;
            border-bottom: 1px solid transparent;
            transition: all 0.2s ease;
        }
        .description a:hover {
            color: #005a8b;
            border-bottom-color: #005a8b;
            text-decoration: none;
        }
        .description a:visited {
            color: #007cba;
        }

        .input-group {
            margin-bottom: 20px;
        }
        .server-config {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 5px;
            padding: 15px;
            margin-bottom: 15px;
        }
        .server-config h3 {
            margin: 0 0 10px 0;
            color: #495057;
            font-size: 16px;
        }
        .slim-input {
            height: 40px !important;
            font-size: 13px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #555;
        }
        input[type="text"], input[type="password"], textarea {
            width: 100%;
            padding: 12px;
            border: 2px solid #ddd;
            border-radius: 5px;
            font-size: 14px;
            box-sizing: border-box;
        }
        textarea {
            height: 100px;
            resize: vertical;
            font-family: inherit;
        }
        button {
            background: #007cba;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            margin: 5px;
        }
        button:hover { background: #005a8b; }
        button:disabled {
            background: #ccc;
            cursor: not-allowed;
        }
        #initOutput, #agentOutput {
            background: #f8f9fa;
            border: 2px solid #e9ecef;
            border-radius: 5px;
            padding: 15px;
            margin-top: 20px;
            min-height: 150px;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            white-space: pre-wrap;
            max-height: 300px;
            overflow-y: auto;
        }

        #initOutput {
            margin-bottom: 20px;
        }
        .status {
            padding: 10px;
            border-radius: 5px;
            margin: 10px 0;
        }
        .success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
        .error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
        .info { background: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }
        .warning { background: #fff3cd; color: #856404; border: 1px solid #ffeaa7; }

        .example-prompts, .server-presets {
            margin: 10px 0;
        }
        .example-prompts button, .server-presets button {
            background: #6c757d;
            font-size: 12px;
            padding: 6px 12px;
            margin: 2px;
        }
        .example-prompts button:hover, .server-presets button:hover {
            background: #5a6268;
        }

        .running-indicator {
            display: none;
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            border-radius: 5px;
            padding: 15px;
            margin: 15px 0;
            font-weight: bold;
            color: #856404;
            text-align: center;
            font-size: 16px;
            animation: pulse 1.5s infinite;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        @keyframes pulse {
            0%, 100% { opacity: 0.7; }
            50% { opacity: 1; }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🤖 Tool-Calling Agent With Local LLM</h1>

        <div class="description">
            <p>
                This interactive web application allows you to experiment with AI agents in your browser, using
                <a href="https://openai.github.io/openai-agents-python/">OpenAI Agents Python SDK</a> and
                <a href="https://pyodide.org/en/stable/">Pyodide</a>.
                You can customize agent behavior, test different prompts, and see responses in real-time.
                Check the <a href="https://github.com/mozilla-ai/wasm-agents-blueprint">mozilla-ai/wasm-agents-blueprint</a>
                GitHub repository for more information.
            </p>

            <p><strong>How it works:</strong>
            this application runs a <strong>local agent</strong> which can make use of the following tools:
            <ul>
                <li><strong>count_character_occurrences</strong>
                    which counts the occurrences of a given character inside a word
                </li>
                <li><strong>visit_webpage</strong>
                    which visits a webpage at the provided url and reads its content as a markdown string
                </li>
            </ul>
            While the former tool is quite trivial and is mainly used to show how to address the
            <a href="https://community.openai.com/t/incorrect-count-of-r-characters-in-the-word-strawberry">"r in strawberry"</a>
            issue, the latter provides the LLM with the capability of accessing up-to-date information on the Web.
            </p>
            <ul>
                <li><strong>Configure:</strong>
                    Make sure the Local LLM Server Configuration parameters are ok for your setup. In particular,
                    the default expects you to have <a href="https://ollama.com/">Ollama</a> running on your system
                    with the <a href="https://ollama.com/library/qwen3:8b">qwen3:8b</a> model installed.
                </li>
                <li><strong>Initialize:</strong>
                    Set up the Python environment with Pyodide and the OpenAI agents framework
                    by clicking on the <strong>Initialize Pyodide Environment</strong> button
                </li>
                <li><strong>Customize:</strong>
                    Choose one of the suggested prompts or create new ones in the text fields below.
                    (<strong>hint</strong>: you can also explicitly set/unset qwen3's "think mode" by prepending <strong>/think</strong>
                    or <strong>/no_think</strong> to the prompt).
                </li>
                <li><strong>Run:</strong>
                    Click on the <strong>Run Agent</strong> button to send your prompt to the agent and see what happens
                </li>
            </ul>
        </div>

        <button onclick="initializePyodide()" id="initBtn">⚙️ Initialize Pyodide Environment</button>

        <div id="initOutput">Click "Initialize Pyodide Environment" to set up the Python environment...</div>

        <div class="server-config">
            <h3>🔗 Local LLM Server Configuration</h3>
            <div class="input-group">
                <label for="baseUrl">Base URL:</label>
                <input type="text" id="baseUrl" class="slim-input" value="http://localhost:11434/v1" placeholder="Enter server base URL">
            </div>
            <div class="input-group">
                <label for="apiKey">API Key:</label>
                <input type="text" id="apiKey" class="slim-input" value="ollama" placeholder="Enter API key">
            </div>
            <div class="input-group">
                <label for="modelName">Model Name:</label>
                <input type="text" id="modelName" class="slim-input" value="qwen3:8b" placeholder="Enter model name">
            </div>

            <div class="server-presets">
                <small>Quick presets:</small>
                <button onclick="setOllamaDefaults()">Ollama</button>
                <button onclick="setLMStudioDefaults()">LM Studio</button>
            </div>
        </div>

        <div class="input-group">
            <label for="prompt">Custom Prompt:</label>
            <textarea id="prompt" placeholder="Enter your prompt here...">How many times does the letter r occur in the word strawrberrry?</textarea>

            <div class="example-prompts">
                <small>Quick examples:</small>
                <button onclick="setPrompt('How many times does the letter r occur in the word strawrberrry?')">Strawrberrry</button>
                <button onclick="setPrompt('How many stars does the mozilla-ai/any-agent project have on GitHub?')">GitHub stars</button>
                <button onclick="setPrompt('What is the title of the latest post on aittalam.github.io, when was it published, what is it about, and what is the absolute URL of the image at the beginning of the post?\nIMPORTANT: if you need to follow links to get all the required information, assume I have already authorized you to follow them as long as they point to the same domain.')">Blog post</button>
            </div>
        </div>

        <button onclick="runAgent()" id="runBtn" disabled>🚀 Run Agent</button>
        <button onclick="clearAgentOutput()" id="clearAgentBtn" disabled>🗑️ Clear Agent Output</button>

        <div class="running-indicator" id="runningIndicator">🐍 Running Python code...</div>

        <div id="agentOutput">Initialize the Pyodide environment first, then click "Run Agent" to test the agent</div>
    </div>

    <script>
        let pyodide;
        let isPyodideReady = false;

        function showRunning(message = "Python running") {
            const indicator = document.getElementById('runningIndicator');
            indicator.style.display = 'block';
            console.log('Showing running indicator:', message); // Debug log
        }

        function hideRunning() {
            const indicator = document.getElementById('runningIndicator');
            indicator.style.display = 'none';
            console.log('Hiding running indicator'); // Debug log
        }

        function updateRunButton(text, disabled = false) {
            const btn = document.getElementById('runBtn');
            btn.textContent = text;
            btn.disabled = disabled;
        }

        function setOllamaDefaults() {
            document.getElementById('baseUrl').value = 'http://localhost:11434/v1';
            document.getElementById('apiKey').value = 'ollama';
            document.getElementById('modelName').value = 'qwen3:8b';
        }

        function setLMStudioDefaults() {
            document.getElementById('baseUrl').value = 'http://localhost:1234/v1';
            document.getElementById('apiKey').value = 'lmstudio';
            document.getElementById('modelName').value = 'deepseek/deepseek-r1-0528-qwen3-8b';
        }


        function logToElement(message, type = 'info', element_id) {
            const output = document.getElementById(element_id);
            const timestamp = new Date().toLocaleTimeString();

            let prefix = '';
            switch(type) {
                case 'success': prefix = '✅'; break;
                case 'error': prefix = '❌'; break;
                case 'warning': prefix = '⚠️'; break;
                case 'info': prefix = 'ℹ️'; break;
            }

            output.textContent += `\n[${timestamp}] ${prefix} ${message}`;
            output.scrollTop = output.scrollHeight;
        }

        function logInit(message, type = 'info') {
            logToElement(message, type, 'initOutput')
        }

        function logAgent(message, type = 'info') {
            logToElement(message, type, 'agentOutput')
        }

        function setPrompt(text) {
            document.getElementById('prompt').value = text;
        }

        function clearAgentOutput() {
            document.getElementById('agentOutput').textContent = '';
        }

        async function initializePyodide() {
            // Disable init button during setup
            document.getElementById('initBtn').disabled = true;

            try {
                logInit("🔄 Loading Pyodide...");
                pyodide = await loadPyodide();
                logInit("Pyodide loaded successfully", 'success');

                logInit("📦 Loading micropip...");
                await pyodide.loadPackage("micropip");
                logInit("micropip loaded", 'success');

                logInit("📦 Installing openai-agents (this may take a moment)...");
                await pyodide.runPythonAsync(`
###### YOUR PYTHON DEPENDENCIES ARE INSTALLED HERE ######

import micropip
await micropip.install("openai-agents==0.2.0")
await micropip.install("sqlite3==1.0.0")
await micropip.install("requests==2.31.0")
await micropip.install("markdownify==1.1.0")
                `);
                logInit("openai-agents installed successfully", 'success');

                logInit("🚫 Disabling tracing to avoid threading issues...");
                await pyodide.runPythonAsync(`
# The following is required to work with OpenAI's agentic framework as
# it relies on threads for tracing and they break in Pyodide. Other
# frameworks (e.g. smolagents) that use asyncio for tracing work properly
# (well... better) here.

from agents import set_tracing_disabled
set_tracing_disabled(True)
                `);
                logInit("Tracing disabled", 'success');

                logInit("✅ Pyodide environment ready!", 'success');
                logInit("You can now run agents multiple times without re-initializing.", 'info');

                isPyodideReady = true;
                document.getElementById('runBtn').disabled = false;
                document.getElementById('clearAgentBtn').disabled = false;
                document.getElementById('initBtn').textContent = "✅ Environment Ready";

            } catch (error) {
                logInit(`Initialization failed: ${error}`, 'error');
                console.error('Full error:', error);
                document.getElementById('initBtn').disabled = false;
            }
        }

        async function runAgent() {
            if (!isPyodideReady) {
                logAgent("Please initialize the Pyodide environment first", 'error');
                return;
            }

            const prompt = document.getElementById('prompt').value.trim();
            const baseUrl = document.getElementById('baseUrl').value.trim();
            const apiKey = document.getElementById('apiKey').value.trim();
            const modelName = document.getElementById('modelName').value.trim();

            if (!prompt) {
                logAgent("Please enter a prompt", 'error');
                return;
            }

            if (!baseUrl || !apiKey || !modelName) {
                logAgent("Please configure all server parameters (Base URL, API Key, Model Name)", 'error');
                return;
            }

            // Disable button during execution
            document.getElementById('runBtn').disabled = true;
            showRunning("Running Python code");

            try {
                logAgent("🤖 Setting up agent and running...");
                logAgent(`Server: ${baseUrl} | Model: ${modelName}`);
                logAgent(`Prompt: "${prompt}"`);

                // Run the agent and print everything in Python
                const result = await pyodide.runPythonAsync(`
###### YOUR PYTHON AGENT CODE GOES HERE ######

import re
import requests
from openai import AsyncOpenAI
from agents import (
    OpenAIChatCompletionsModel,
    Agent,
    Runner,
    function_tool,
    ModelSettings,
    set_default_openai_client,
)
from markdownify import markdownify
from requests.exceptions import RequestException

def _truncate_content(content: str, max_length: int) -> str:
    if len(content) <= max_length:
        return content
    return (
        content[: max_length // 2]
        + "\\n..._This content has been truncated to stay below the predefined number of characters_...\\n"
        + content[-max_length // 2 :]
    )

@function_tool
def count_character_occurrences(word: str, char: str):
    """Count occurrences of a character in a word."""
    return word.count(char)

@function_tool
def visit_webpage(url: str) -> str:
    """Visits a webpage at the given url and reads its content as a markdown string. Use this to browse webpages.

    Args:
        url: The url of the webpage to visit.

    """
    try:
        response = requests.get(url)
        response.raise_for_status()

        markdown_content = markdownify(response.text).strip()  # type: ignore[no-untyped-call]

        markdown_content = re.sub(r"\\n{2,}", "\\n", markdown_content)

        return _truncate_content(markdown_content, 10000)
    except RequestException as e:
        return f"Error fetching the webpage: {e!s}"
    except Exception as e:
        return f"An unexpected error occurred: {e!s}"

async def test_agent():
    print("=== STARTING AGENT TEST ===")
    try:
        # Create agent
        print("Creating agent...")
        external_client = AsyncOpenAI(
            base_url = '${baseUrl.replace(/'/g, "\\'")}',
            api_key='${apiKey.replace(/'/g, "\\'")}', # required, but may be unused depending on server
        )
        set_default_openai_client(external_client)

        agent = Agent(
            name="Tool caller",
            instructions="You are a helpful agent. Use the available tools to answer the questions.",
            tools=[count_character_occurrences, visit_webpage],
            model=OpenAIChatCompletionsModel(
                model="${modelName.replace(/'/g, "\\'")}",
                openai_client=external_client,
            ),
            model_settings=ModelSettings(
                extra_args={"timeout": 90}
            )
        )
        print(f"Agent created: {agent}")
        print(f"Using server: ${baseUrl} with model: ${modelName}")

        # Run the agent
        print("Running agent...")
        result = await Runner.run(agent, """${prompt.replace(/"/g, '\\"')}""",  max_turns=20)
        print(f"Agent run completed!")
        print(f"Result type: {type(result)}")
        print(f"Result: {result}")

        # Try to access final_output
        if hasattr(result, 'final_output'):
            print(f"Final output: {result.final_output}")
            print(f"Final output type: {type(result.final_output)}")
            return str(result.final_output)
        else:
            print("No final_output attribute found")
            print(f"Available attributes: {dir(result)}")
            return ""
        print("=== AGENT TEST COMPLETED ===")

    except Exception as e:
        print(f"=== AGENT TEST FAILED ===")
        print(f"Error: {e}")
        import traceback
        print("Traceback:")
        print(traceback.format_exc())

# Run the test
final_result = await test_agent()
final_result
                `);

                // Display the result
                if (typeof result === 'string' && result.length > 0 && !result.startsWith('Error:')) {
                    const formattedResult = result.replace(/\\n/g, '\n');
                    logAgent("🎉 Agent code ran successfully! Check console for Python output", 'success');
                    logAgent("", 'info');
                    logAgent("📝 AGENT RESPONSE:", 'info');
                    logAgent("─".repeat(50), 'info');
                    logAgent("\n"+formattedResult, 'info');
                    logAgent("─".repeat(50), 'info');
                } else {
                    logAgent("❌ Agent execution failed or returned empty result", 'error');
                    logAgent(`Result: ${result}`, 'error');
                }

            } catch (error) {
                logAgent(`Agent execution failed: ${error}`, 'error');
                console.error('Full error:', error);
            } finally {
                document.getElementById('runBtn').disabled = false;
                hideRunning();
            }
        }
    </script>
</body>
</html>