Spaces:

mozilla-ai
/

wasm-agents-blueprint

Running

App Files Files Community

aittalam commited on 1 day ago

Commit

0092a74

verified ·

1 Parent(s): 2444451

Update index.html

Browse files

Files changed (1) hide show

index.html +133 -15

index.html CHANGED Viewed

@@ -3,6 +3,7 @@
 <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>
@@ -159,6 +160,15 @@
             background: #5a6268;
         }
         .running-indicator {
             display: none;
             background: #fff3cd;
@@ -203,16 +213,24 @@
                 <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
@@ -229,6 +247,11 @@
             </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>
@@ -237,15 +260,15 @@
             <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">
@@ -263,7 +286,8 @@
                 <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>
@@ -279,6 +303,11 @@
         let pyodide;
         let isPyodideReady = false;
         function showRunning(message = "Python running") {
             const indicator = document.getElementById('runningIndicator');
             indicator.style.display = 'block';
@@ -297,6 +326,29 @@
             btn.disabled = disabled;
         }
         function setOllamaDefaults() {
             document.getElementById('baseUrl').value = 'http://localhost:11434/v1';
             document.getElementById('apiKey').value = 'ollama';
@@ -306,10 +358,9 @@
         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();
@@ -343,6 +394,12 @@
         }
         async function initializePyodide() {
             // Disable init button during setup
             document.getElementById('initBtn').disabled = true;
@@ -360,10 +417,13 @@
 ###### 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');
@@ -415,6 +475,10 @@ set_tracing_disabled(True)
                 return;
             }
             // Disable button during execution
             document.getElementById('runBtn').disabled = true;
             showRunning("Running Python code");
@@ -422,6 +486,11 @@ set_tracing_disabled(True)
             try {
                 logAgent("🤖 Setting up agent and running...");
                 logAgent(`Server: ${baseUrl} | Model: ${modelName}`);
                 logAgent(`Prompt: "${prompt}"`);
                 // Run the agent and print everything in Python
@@ -441,6 +510,7 @@ from agents import (
 )
 from markdownify import markdownify
 from requests.exceptions import RequestException
 def _truncate_content(content: str, max_length: int) -> str:
     if len(content) <= max_length:
@@ -457,27 +527,71 @@ def count_character_occurrences(word: str, char: str):
     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:
@@ -489,10 +603,14 @@ async def test_agent():
         )
         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,

 <head>
     <title>Tool-Calling Agent With Local LLM</title>
     <script src="https://cdn.jsdelivr.net/pyodide/v0.27.7/full/pyodide.js"></script>
+    <script src="config.js"></script>
     <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
     <meta content="utf-8" http-equiv="encoding">
     <style>
             background: #5a6268;
         }
+        .config-info {
+            background: #e7f3ff;
+            border: 1px solid #b8daff;
+            border-radius: 5px;
+            padding: 10px;
+            margin-bottom: 20px;
+            font-size: 14px;
+        }
         .running-indicator {
             display: none;
             background: #fff3cd;
                 <li><strong>visit_webpage</strong>
                     which visits a webpage at the provided url and reads its content as a markdown string
                 </li>
+                <li><strong>search_tavily</strong>
+                    which performs web searches using Tavily API (requires TAVILY_API_KEY in config.js)
+                </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 two provide 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. You
+                    can also click the <strong>LM Studio</strong> preset button if you are using
+                    <a href="https://lmstudio.ai/">LM Studio</a>, and make sure to update your model name accordingly.
+                    Optionally, add your TAVILY_API_KEY to config.js to enable web search functionality.
+                    <br/><strong>NOTE</strong>: if you are using LM Studio with a thinking model and are getting tool
+                    calls directly in the model's response, disable thinking in the "Edit model default parameters" section.
                 </li>
                 <li><strong>Initialize:</strong>
                     Set up the Python environment with Pyodide and the OpenAI agents framework
             </ul>
         </div>
+        <div class="config-info">
+            <strong>📋 Configuration:</strong> Config loaded from config.js
+            <span id="configStatus"></span>
+        </div>
         <button onclick="initializePyodide()" id="initBtn">⚙️ Initialize Pyodide Environment</button>
         <div id="initOutput">Click "Initialize Pyodide Environment" to set up the Python environment...</div>
             <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:1234/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="lmstudio" placeholder="Enter API key">
             </div>
             <div class="input-group">
                 <label for="modelName">Model Name:</label>
+                <input type="text" id="modelName" class="slim-input" value="qwen/qwen3-8b" placeholder="Enter model name">
             </div>
             <div class="server-presets">
                 <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 https:\/\/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>
+                <button onclick="setPrompt('What are 5 tv shows that are trending in 2025? Please provide the name of the show, the exact release date, the genre, and a brief description of the show.\nIMPORTANT: if you need to follow links to get all the required information, assume I have already authorized you to follow them. Always download full webpage contents.')">Trending TV Shows</button>
             </div>
         </div>
         let pyodide;
         let isPyodideReady = false;
+        // Check config on page load
+        window.addEventListener('load', function() {
+            checkConfig();
+        });
         function showRunning(message = "Python running") {
             const indicator = document.getElementById('runningIndicator');
             indicator.style.display = 'block';
             btn.disabled = disabled;
         }
+        function checkConfig() {
+            const configStatus = document.getElementById('configStatus');
+            let statusParts = [];
+            if (typeof window.APP_CONFIG === 'undefined') {
+                configStatus.innerHTML = ' - <span style="color: #dc3545;">❌ Config not loaded</span>';
+                return { configLoaded: false, tavilyAvailable: false };
+            }
+            // Check if Tavily API key is available
+            const tavilyAvailable = window.APP_CONFIG.TAVILY_API_KEY &&
+                                   window.APP_CONFIG.TAVILY_API_KEY !== 'your-tavily-api-key-here';
+            if (tavilyAvailable) {
+                statusParts.push('<span style="color: #28a745;">✅ Tavily API key configured</span>');
+            } else {
+                statusParts.push('<span style="color: #ffc107;">⚠️ Tavily API key not set (search_tavily tool will be disabled)</span>');
+            }
+            configStatus.innerHTML = ' - ' + statusParts.join(', ');
+            return { configLoaded: true, tavilyAvailable: tavilyAvailable };
+        }
         function setOllamaDefaults() {
             document.getElementById('baseUrl').value = 'http://localhost:11434/v1';
             document.getElementById('apiKey').value = 'ollama';
         function setLMStudioDefaults() {
             document.getElementById('baseUrl').value = 'http://localhost:1234/v1';
             document.getElementById('apiKey').value = 'lmstudio';
+            document.getElementById('modelName').value = 'mistralai/devstral-small-2507';
         }
         function logToElement(message, type = 'info', element_id) {
             const output = document.getElementById(element_id);
             const timestamp = new Date().toLocaleTimeString();
         }
         async function initializePyodide() {
+            // Check config first
+            const configCheck = checkConfig();
+            if (!configCheck.configLoaded) {
+                logInit("Config not loaded, but proceeding anyway", 'warning');
+            }
             // Disable init button during setup
             document.getElementById('initBtn').disabled = true;
 ###### YOUR PYTHON DEPENDENCIES ARE INSTALLED HERE ######
 import micropip
+await micropip.install("typing-extensions>=4.12.2")
+await micropip.install("openai==1.99.9")
+await micropip.install("mcp==1.12.4")
+await micropip.install("openai-agents==0.2.6")
 await micropip.install("sqlite3==1.0.0")
 await micropip.install("markdownify==1.1.0")
+await micropip.install("tavily-python==0.7.10")
                 `);
                 logInit("openai-agents installed successfully", 'success');
                 return;
             }
+            // Check if Tavily API key is available
+            const configCheck = checkConfig();
+            const tavilyApiKey = configCheck.tavilyAvailable ? window.APP_CONFIG.TAVILY_API_KEY : null;
             // 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}`);
+                if (tavilyApiKey) {
+                    logAgent("Tavily search enabled", 'success');
+                } else {
+                    logAgent("Tavily search disabled (no API key)", 'warning');
+                }
                 logAgent(`Prompt: "${prompt}"`);
                 // Run the agent and print everything in Python
 )
 from markdownify import markdownify
 from requests.exceptions import RequestException
+from tavily.tavily import TavilyClient
 def _truncate_content(content: str, max_length: int) -> str:
     if len(content) <= max_length:
     return word.count(char)
 @function_tool
+def visit_webpage(url: str, timeout: int = 30, max_length: int = None) -> 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.
+        timeout: The timeout in seconds for the request.
+        max_length: The maximum number of characters of text that can be returned.
+                    If not provided, the full webpage is returned.
     """
     try:
+        response = requests.get(url, timeout=timeout)
         response.raise_for_status()
+        markdown_content = markdownify(response.text).strip()
         markdown_content = re.sub(r"\\n{2,}", "\\n", markdown_content)
+        if max_length:
+            return _truncate_content(markdown_content, max_length)
+        return str(markdown_content)
     except RequestException as e:
         return f"Error fetching the webpage: {e!s}"
     except Exception as e:
         return f"An unexpected error occurred: {e!s}"
+@function_tool
+def search_tavily(query: str, include_images: bool = False) -> str:
+    """Perform a Tavily web search based on your query and return the top search results.
+    See https://blog.tavily.com/getting-started-with-the-tavily-search-api for more information.
+    Args:
+        query (str): The search query to perform.
+        include_images (bool): Whether to include images in the results.
+    Returns:
+        The top search results as a formatted string.
+    """
+    api_key='${tavilyApiKey ? tavilyApiKey.replace(/'/g, "\\'") : ""}'
+    if not api_key:
+        return "TAVILY_API_KEY not configured in config.js."
+    try:
+        client = TavilyClient(api_key)
+        response = client.search(query, include_images=include_images)
+        results = response.get("results", [])
+        output = []
+        for result in results:
+            output.append(
+                f"[{result.get('title', 'No Title')}]({result.get('url', '#')})\\n{result.get('content', '')}"
+            )
+        if include_images and "images" in response:
+            output.append("\\nImages:")
+            for image in response["images"]:
+                output.append(image)
+        return "\\n\\n".join(output) if output else "No results found."
+    except Exception as e:
+        return f"Error performing Tavily search: {e!s}"
 async def test_agent():
     print("=== STARTING AGENT TEST ===")
     try:
         )
         set_default_openai_client(external_client)
+        # Build tools list conditionally
+        tools = [count_character_occurrences, visit_webpage]
+        ${tavilyApiKey ? 'tools.append(search_tavily)' : '# search_tavily tool not added (no API key)'}
         agent = Agent(
             name="Tool caller",
             instructions="You are a helpful agent. Use the available tools to answer the questions.",
+            tools=tools,
             model=OpenAIChatCompletionsModel(
                 model="${modelName.replace(/'/g, "\\'")}",
                 openai_client=external_client,