Add request timing analytics and improve UI organization

- Reorganized app into separate "App" and "Analytics" tabs
- Added request timing tracking to measure performance
- Display average request time chart alongside request count
- Updated data storage logic for Hugging Face Spaces compatibility
- Added speed-focused messaging highlighting <3 second performance
- Changed timing chart from LinePlot to BarPlot for better visualization

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

analytics.py

@@ -5,8 +5,24 @@ from datetime import datetime, timedelta, timezone
 from filelock import FileLock           # pip install filelock
 import pandas as pd                     # already available in HF images
 
-COUNTS_FILE = "/data/request_counts.json"
-LOCK_FILE   = COUNTS_FILE + ".lock"
+# Determine data directory based on environment
+# 1. Check for environment variable override
+# 2. Use /data if it exists and is writable (Hugging Face Spaces with persistent storage)
+# 3. Use ./data for local development
+DATA_DIR = os.getenv("ANALYTICS_DATA_DIR")
+if not DATA_DIR:
+    if os.path.exists("/data") and os.access("/data", os.W_OK):
+        DATA_DIR = "/data"
+        print("[Analytics] Using persistent storage at /data")
+    else:
+        DATA_DIR = "./data"
+        print("[Analytics] Using local storage at ./data")
+
+os.makedirs(DATA_DIR, exist_ok=True)
+
+COUNTS_FILE = os.path.join(DATA_DIR, "request_counts.json")
+TIMES_FILE = os.path.join(DATA_DIR, "request_times.json")
+LOCK_FILE   = os.path.join(DATA_DIR, "analytics.lock")
 
 def _load() -> dict:
     if not os.path.exists(COUNTS_FILE):
@@ -18,13 +34,32 @@ def _save(data: dict):
     with open(COUNTS_FILE, "w") as f:
         json.dump(data, f)
 
-async def record_request() -> None:
-    """Increment today's counter (UTC) atomically."""
+def _load_times() -> dict:
+    if not os.path.exists(TIMES_FILE):
+        return {}
+    with open(TIMES_FILE) as f:
+        return json.load(f)
+
+def _save_times(data: dict):
+    with open(TIMES_FILE, "w") as f:
+        json.dump(data, f)
+
+async def record_request(duration: float = None) -> None:
+    """Increment today's counter (UTC) atomically and optionally record request duration."""
     today = datetime.now(timezone.utc).strftime("%Y-%m-%d")
     with FileLock(LOCK_FILE):
+        # Update counts
         data = _load()
         data[today] = data.get(today, 0) + 1
         _save(data)
+        
+        # Update times if duration provided
+        if duration is not None:
+            times = _load_times()
+            if today not in times:
+                times[today] = []
+            times[today].append(round(duration, 2))
+            _save_times(times)
 
 def last_n_days_df(n: int = 30) -> pd.DataFrame:
     """Return a DataFrame with a row for each of the past *n* days."""
@@ -42,4 +77,28 @@ def last_n_days_df(n: int = 30) -> pd.DataFrame:
             "count": data.get(day_str, 0),
             "full_date": day_str  # Keep full date for tooltip
         })
+    return pd.DataFrame(records)
+
+def last_n_days_avg_time_df(n: int = 30) -> pd.DataFrame:
+    """Return a DataFrame with average request time for each of the past *n* days."""
+    now = datetime.now(timezone.utc)
+    with FileLock(LOCK_FILE):
+        times = _load_times()
+    records = []
+    for i in range(n):
+        day = (now - timedelta(days=n - 1 - i))
+        day_str = day.strftime("%Y-%m-%d")
+        # Format date for display (MMM DD)
+        display_date = day.strftime("%b %d")
+        
+        # Calculate average time for the day
+        day_times = times.get(day_str, [])
+        avg_time = round(sum(day_times) / len(day_times), 2) if day_times else 0
+        
+        records.append({
+            "date": display_date, 
+            "avg_time": avg_time,
+            "request_count": len(day_times),
+            "full_date": day_str  # Keep full date for tooltip
+        })
     return pd.DataFrame(records)

app.py

@@ -1,5 +1,6 @@
 import os
 import asyncio
+import time
 from typing import Optional
 from datetime import datetime
 import httpx
@@ -9,7 +10,7 @@ from dateutil import parser as dateparser
 from limits import parse
 from limits.aio.storage import MemoryStorage
 from limits.aio.strategies import MovingWindowRateLimiter
-from analytics import record_request, last_n_days_df
+from analytics import record_request, last_n_days_df, last_n_days_avg_time_df
 
 # Configuration
 SERPER_API_KEY = os.getenv("SERPER_API_KEY")
@@ -65,8 +66,10 @@ async def search_web(
         - search_web("stock market today", "news", 10) - Get 10 news articles about today's market
         - search_web("machine learning basics") - Get 4 general search results (all defaults)
     """
-    await record_request()
+    start_time = time.time()
+    
     if not SERPER_API_KEY:
+        await record_request()  # Record even failed requests
         return "Error: SERPER_API_KEY environment variable is not set. Please set it to use this tool."
 
     # Validate and constrain num_results
@@ -82,6 +85,8 @@ async def search_web(
         # Check rate limit
         if not await limiter.hit(rate_limit, "global"):
             print(f"[{datetime.now().isoformat()}] Rate limit exceeded")
+            duration = time.time() - start_time
+            await record_request(duration)
             return "Error: Rate limit exceeded. Please try again later (limit: 500 requests per hour)."
 
         # Select endpoint based on search type
@@ -99,6 +104,8 @@ async def search_web(
             resp = await client.post(endpoint, headers=HEADERS, json=payload)
 
         if resp.status_code != 200:
+            duration = time.time() - start_time
+            await record_request(duration)
             return f"Error: Search API returned status {resp.status_code}. Please check your API key and try again."
 
         # Extract results based on search type
@@ -108,6 +115,8 @@ async def search_web(
             results = resp.json().get("organic", [])
 
         if not results:
+            duration = time.time() - start_time
+            await record_request(duration)
             return f"No {search_type} results found for query: '{query}'. Try a different search term or search type."
 
         # Fetch HTML content concurrently
@@ -172,6 +181,8 @@ async def search_web(
             chunks.append(chunk)
 
         if not chunks:
+            duration = time.time() - start_time
+            await record_request(duration)
             return f"Found {len(results)} {search_type} results for '{query}', but couldn't extract readable content from any of them. The websites might be blocking automated access."
 
         result = "\n---\n".join(chunks)
@@ -180,17 +191,20 @@ async def search_web(
         print(
             f"[{datetime.now().isoformat()}] Extraction complete: {successful_extractions}/{len(results)} successful for query '{query}'"
         )
+        
+        # Record successful request with duration
+        duration = time.time() - start_time
+        await record_request(duration)
+        
         return summary + result
 
     except Exception as e:
+        # Record failed request with duration
+        duration = time.time() - start_time
+        await record_request(duration)
         return f"Error occurred while searching: {str(e)}. Please try again or check your query."
 
 
-async def search_and_log(query, search_type, num_results):
-    text = await search_web(query, search_type, num_results)
-    chart_df = last_n_days_df(14)  # Show last 14 days
-    return text, chart_df
-
 
 # Create Gradio interface
 with gr.Blocks(title="Web Search MCP Server") as demo:
@@ -204,104 +218,132 @@ with gr.Blocks(title="Web Search MCP Server") as demo:
         """
     )
 
-    gr.Markdown(
-        """
-        # 🔍 Web Search MCP Server
-        
-        This MCP server provides web search capabilities to LLMs. It can perform general web searches
-        or specifically search for fresh news articles, extracting the main content from results.
-        
-        **Search Types:**
-        - **General Search**: Diverse results from various sources (blogs, docs, articles, etc.)
-        - **News Search**: Fresh news articles and breaking stories from news sources
-        
-        **Note:** This interface is primarily designed for MCP tool usage by LLMs, but you can 
-        also test it manually below.
-        """
-    )
-
-    gr.HTML(
-        """
-        <div style="margin-bottom: 24px;">
-            <a href="https://huggingface.co/spaces/victor/websearch?view=api">
-                <img src="https://huggingface.co/datasets/huggingface/badges/resolve/main/use-with-mcp-lg-dark.svg" 
-                     alt="Use with MCP" 
-                     style="height: 36px;">
-            </a>
-        </div>
-        """,
-        padding=0,
-    )
-
-    with gr.Row():
-        with gr.Column(scale=3):
-            query_input = gr.Textbox(
-                label="Search Query",
-                placeholder='e.g. "OpenAI news", "climate change 2024", "AI developments"',
-                info="Required: Enter your search query",
+    gr.Markdown("# 🔍 Web Search MCP Server")
+
+    with gr.Tabs():
+        with gr.Tab("App"):
+            gr.Markdown(
+                """
+                This MCP server provides web search capabilities to LLMs. It can perform general web searches
+                or specifically search for fresh news articles, extracting the main content from results.
+                
+                **⚡ Speed-Focused:** Optimized to complete the entire search process - from query to 
+                fully extracted web content - in under 3 seconds. Check out the Analytics tab 
+                to see real-time performance metrics.
+                
+                **Search Types:**
+                - **General Search**: Diverse results from various sources (blogs, docs, articles, etc.)
+                - **News Search**: Fresh news articles and breaking stories from news sources
+                
+                **Note:** This interface is primarily designed for MCP tool usage by LLMs, but you can 
+                also test it manually below.
+                """
             )
-        with gr.Column(scale=1):
-            search_type_input = gr.Radio(
-                choices=["search", "news"],
-                value="search",
-                label="Search Type",
-                info="Choose search type",
+
+            gr.HTML(
+                """
+                <div style="margin-bottom: 24px;">
+                    <a href="https://huggingface.co/spaces/victor/websearch?view=api">
+                        <img src="https://huggingface.co/datasets/huggingface/badges/resolve/main/use-with-mcp-lg-dark.svg" 
+                             alt="Use with MCP" 
+                             style="height: 36px;">
+                    </a>
+                </div>
+                """,
+                padding=0,
             )
 
-    with gr.Row():
-        num_results_input = gr.Slider(
-            minimum=1,
-            maximum=20,
-            value=4,
-            step=1,
-            label="Number of Results",
-            info="Optional: How many results to fetch (default: 4)",
-        )
+            with gr.Row():
+                with gr.Column(scale=3):
+                    query_input = gr.Textbox(
+                        label="Search Query",
+                        placeholder='e.g. "OpenAI news", "climate change 2024", "AI developments"',
+                        info="Required: Enter your search query",
+                    )
+                with gr.Column(scale=1):
+                    search_type_input = gr.Radio(
+                        choices=["search", "news"],
+                        value="search",
+                        label="Search Type",
+                        info="Choose search type",
+                    )
+
+            with gr.Row():
+                num_results_input = gr.Slider(
+                    minimum=1,
+                    maximum=20,
+                    value=4,
+                    step=1,
+                    label="Number of Results",
+                    info="Optional: How many results to fetch (default: 4)",
+                )
 
-    search_button = gr.Button("Search", variant="primary")
+            search_button = gr.Button("Search", variant="primary")
 
-    output = gr.Textbox(
-        label="Extracted Content",
-        lines=25,
-        max_lines=50,
-        info="The extracted article content will appear here",
-    )
+            output = gr.Textbox(
+                label="Extracted Content",
+                lines=25,
+                max_lines=50,
+                info="The extracted article content will appear here",
+            )
 
-    # Add examples
-    gr.Examples(
-        examples=[
-            ["OpenAI GPT-5 latest developments", "news", 5],
-            ["React hooks useState", "search", 4],
-            ["Tesla stock price today", "news", 6],
-            ["Apple Vision Pro reviews", "search", 4],
-            ["best Italian restaurants NYC", "search", 4],
-        ],
-        inputs=[query_input, search_type_input, num_results_input],
-        outputs=output,
-        fn=search_web,
-        cache_examples=False,
-    )
+            # Add examples
+            gr.Examples(
+                examples=[
+                    ["OpenAI GPT-5 latest developments", "news", 5],
+                    ["React hooks useState", "search", 4],
+                    ["Tesla stock price today", "news", 6],
+                    ["Apple Vision Pro reviews", "search", 4],
+                    ["best Italian restaurants NYC", "search", 4],
+                ],
+                inputs=[query_input, search_type_input, num_results_input],
+                outputs=output,
+                fn=search_web,
+                cache_examples=False,
+            )
 
-    requests_plot = gr.BarPlot(
-        value=last_n_days_df(14),  # Show only last 14 days for better visibility
-        x="date",
-        y="count",
-        title="Daily Community Request Count",
-        tooltip=["date", "count"],
-        height=280,
-        x_label_angle=-45,  # Rotate labels to prevent overlap
-        container=False,
-    )
+        with gr.Tab("Analytics"):
+            gr.Markdown("## Community Usage Analytics")
+            gr.Markdown("Track daily request counts and average response times from all community users.")
+            
+            with gr.Row():
+                with gr.Column():
+                    requests_plot = gr.BarPlot(
+                        value=last_n_days_df(14),  # Show only last 14 days for better visibility
+                        x="date",
+                        y="count",
+                        title="Daily Request Count",
+                        tooltip=["date", "count"],
+                        height=350,
+                        x_label_angle=-45,  # Rotate labels to prevent overlap
+                        container=False,
+                    )
+                
+                with gr.Column():
+                    avg_time_plot = gr.BarPlot(
+                        value=last_n_days_avg_time_df(14),  # Show only last 14 days
+                        x="date",
+                        y="avg_time",
+                        title="Average Request Time (seconds)",
+                        tooltip=["date", "avg_time", "request_count"],
+                        height=350,
+                        x_label_angle=-45,
+                        container=False,
+                    )
 
     search_button.click(
-        fn=search_and_log,  # wrapper
+        fn=search_web,  # Use search_web directly instead of search_and_log
         inputs=[query_input, search_type_input, num_results_input],
-        outputs=[output, requests_plot],  # update both
+        outputs=output,
         api_name=False,  # Hide this endpoint from API & MCP
     )
 
-    # Load fresh analytics data when the page loads
-    demo.load(fn=lambda: last_n_days_df(14), outputs=requests_plot, api_name=False)
+    # Load fresh analytics data when the page loads or Analytics tab is clicked
+    demo.load(
+        fn=lambda: (last_n_days_df(14), last_n_days_avg_time_df(14)), 
+        outputs=[requests_plot, avg_time_plot], 
+        api_name=False
+    )
 
     # Expose search_web as the only MCP tool
     gr.api(search_web, api_name="search_web")