Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>MemeOps 🚀</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;600&display=swap" rel="stylesheet"> | |
| <style> | |
| body{font-family:Roboto,system-ui;margin:0;background:#0b0b0b;color:#eee;display:grid;place-items:center;min-height:100dvh;padding:18px} | |
| .card{max-width:860px;width:100%;background:#121212;border:1px solid #2a2a2a;border-radius:16px;padding:16px;box-shadow:0 8px 30px #0008} | |
| h1{margin:0 0 8px;font-size:22px} | |
| p,code,pre{font-size:14px;line-height:1.4} | |
| .muted{color:#b8b8b8} | |
| img{width:100%;height:auto;border-radius:12px;background:#1a1a1a} | |
| .cap{margin-top:8px;font-size:18px;font-weight:600} | |
| pre{background:#1a1a1a;border:1px solid #2a2a2a;border-radius:10px;padding:10px;overflow:auto} | |
| a{color:#9ad1ff;text-decoration:none} | |
| </style> | |
| </head> | |
| <body> | |
| <section class="card"> | |
| <!-- 1) Concept --> | |
| <h1>MemeOps 🚀</h1> | |
| <p class="muted"> | |
| Concept: server reads a fake git diff → LLM writes a short caption → picks an Imgflip template → you giggle. | |
| </p> | |
| <p> | |
| <strong>modelcontextprotocol/inspector</strong> = a developer UI + proxy to test MCP servers over | |
| <em>Streamable HTTP</em>. We'll use it to connect to your server: | |
| <code>https://fmarky-memeops-mcp-server.hf.space/mcp</code>. | |
| </p> | |
| <section class="card"> | |
| <h2 style="margin-top:0;font-size:18px">Connect with Inspector (Streamable HTTP)</h2> | |
| <p class="muted">Create the config and launch the Inspector:</p> | |
| <pre><code>cat > mcp.json <<'EOF' | |
| { | |
| "mcpServers": { | |
| "memeops": { | |
| "type": "streamable-http", | |
| "url": "https://fmarky-memeops-mcp-server.hf.space/mcp", | |
| "note": "MemeOps MCP server (FastMCP) - via Streamable HTTP" | |
| } | |
| } | |
| } | |
| EOF | |
| npx -y @modelcontextprotocol/inspector --config ./mcp.json | |
| <p class="muted">Open the UI at <code>http://127.0.0.1:6274</code> | |
| → run <code>tools/call</code> for <code>memes.render_for_commit</code> with <code>{"commit_id":"demo-42"}</code>.</p> | |
| </section> | |
| <section class="card"> | |
| <img id="meme" alt="Random meme" /> | |
| </section> | |
| <script> | |
| // One random Imgflip meme | |
| (async () => { | |
| try { | |
| const r = await fetch("https://api.imgflip.com/get_memes"); | |
| const j = await r.json(); | |
| const list = (j?.data?.memes||[]); | |
| const pick = list[Math.floor(Math.random()*list.length)]; | |
| document.getElementById("meme").src = pick.url; | |
| // Optional: tweak static legend based on template name | |
| if ((pick.name||"").toLowerCase().includes("distracted")) { | |
| document.getElementById("legend").textContent = "Static legend: Me → perf gains | Also me → breaking tests"; | |
| } | |
| } catch(e) { | |
| document.getElementById("legend").textContent = "Couldn't fetch meme 😭 - try again."; | |
| } | |
| })(); | |
| </script> | |
| </body> | |
| </html> | |