Spaces:
Running
Running
File size: 3,152 Bytes
a943092 | 1 | {"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: server_app"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["from gradio import Server\n", "from fastapi.responses import HTMLResponse\n", "\n", "app = Server()\n", "\n", "@app.mcp.tool(name=\"add\")\n", "@app.api(name=\"add\")\n", "def add(a: int, b: int) -> int:\n", " \"\"\"Add two numbers together.\"\"\"\n", " return a + b\n", "\n", "@app.mcp.tool(name=\"multiply\")\n", "@app.api(name=\"multiply\")\n", "def multiply(a: int, b: int) -> int:\n", " \"\"\"Multiply two numbers together.\"\"\"\n", " return a * b\n", "\n", "@app.get(\"/\", response_class=HTMLResponse)\n", "async def homepage():\n", " return \"\"\"\n", "<!DOCTYPE html>\n", "<html>\n", "<head><title>Calculator</title>\n", "<style>\n", " * { margin: 0; box-sizing: border-box; font-family: 'Courier New', monospace; }\n", " body { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #1a1a2e; color: #fff;}\n", " .calc { background: #16213e; padding: 2rem; border-radius: 1rem; box-shadow: 0 8px 32px rgba(0,0,0,.4); width: 320px; }\n", " #out { background: #0f3460; color: #0f0; font-size: 2rem; text-align: right; padding: .75rem 1rem; border-radius: .5rem; min-height: 3rem; margin-bottom: 1rem; }\n", " .row { display: flex; gap: .5rem; margin-bottom: .5rem; }\n", " input { flex: 1; min-width: 0; padding: .6rem; font-size: 1.2rem; border: none; border-radius: .5rem; background: #e2e2e2; text-align: center; }\n", " button { flex: 1; padding: .6rem; font-size: 1rem; border: none; border-radius: .5rem; cursor: pointer; font-weight: bold; color: #fff; }\n", " .add { background: #e94560; } .mul { background: #533483; }\n", " button:hover { opacity: .85; }\n", "</style></head>\n", "<body>\n", " <div class=\"calc\">\n", " <div id=\"out\">0</div>\n", " Operands\n", " <div class=\"row\"><input id=\"a\" type=\"number\" value=\"3\"><input id=\"b\" type=\"number\" value=\"5\"></div>\n", " Operation\n", " <div class=\"row\"><button class=\"add\" onclick=\"run('add')\">+</button><button class=\"mul\" onclick=\"run('multiply')\">×</button></div>\n", " </div>\n", " <script type=\"module\">\n", " import { client } from \"https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js\";\n", " const app = await client(location.origin);\n", " window.run = async (ep) => {\n", " const a = parseInt(document.getElementById(\"a\").value), b = parseInt(document.getElementById(\"b\").value);\n", " document.getElementById(\"out\").textContent = (await app.predict(\"/\" + ep, { a, b })).data;\n", " };\n", " </script>\n", "</body>\n", "</html>\"\"\"\n", "\n", "if __name__ == \"__main__\":\n", " app.launch(mcp_server=True)\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5} |