Spaces:
Sleeping
Sleeping
| <html> | |
| <head> | |
| <title>Gradio Playgrounf</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/json-schema-faker@0.5.9/dist/json-schema-faker.min.js"></script> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <h1 class="text-3xl font-bold mb-4">Gradio Playground</h1> | |
| <div class="bg-white p-6 rounded-lg shadow-lg"> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 font-bold mb-2" for="repo_id"> | |
| Repo ID | |
| </label> | |
| <div class="flex"> | |
| <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="repo_id" type="text" value="Agents-MCP-Hackathon/calculator-mcp-marcodsn"> | |
| <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded ml-2" id="search"> | |
| Search | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 font-bold mb-2" for="api_name"> | |
| API Name | |
| </label> | |
| <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="api_name" type="text" value="predict"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 font-bold mb-2" for="args"> | |
| Arguments (JSON) | |
| </label> | |
| <textarea class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="args" rows="3">["1 + 2"]</textarea> | |
| </div> | |
| <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline disabled:opacity-50 disabled:cursor-not-allowed" id="submit"> | |
| Submit | |
| </button> | |
| <div class="mt-4"> | |
| <h2 class="text-xl font-bold mb-2">Result</h2> | |
| <pre class="bg-gray-200 p-4 rounded" id="result"></pre> | |
| <div class="hidden" id="loading">Loading...</div> | |
| </div> | |
| </div> | |
| </div> | |
| <script type="module"> | |
| import { client } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js"; | |
| const searchButton = document.getElementById("search"); | |
| const submitButton = document.getElementById("submit"); | |
| const repoIdInput = document.getElementById("repo_id"); | |
| const apiNameInput = document.getElementById("api_name"); | |
| const argsInput = document.getElementById("args"); | |
| const resultDiv = document.getElementById("result"); | |
| const loadingDiv = document.getElementById("loading"); | |
| searchButton.addEventListener("click", async () => { | |
| const repoId = repoIdInput.value; | |
| const app = await client(repoId); | |
| const apiInfo = await app.view_api(); | |
| if (apiInfo.named_endpoints.length > 0) { | |
| const firstApiName = apiInfo.named_endpoints[0].name; | |
| apiNameInput.value = firstApiName; | |
| const exampleArgs = apiInfo.named_endpoints[0].parameters.map(p => JSONSchemaFaker.generate(p.component_schema)); | |
| argsInput.value = JSON.stringify(exampleArgs); | |
| } else if (apiInfo.unnamed_endpoints.length > 0) { | |
| apiNameInput.value = apiInfo.unnamed_endpoints[0].name; | |
| const exampleArgs = apiInfo.unnamed_endpoints[0].parameters.map(p => JSONSchemaFaker.generate(p.component_schema)); | |
| argsInput.value = JSON.stringify(exampleArgs); | |
| } | |
| }); | |
| submitButton.addEventListener("click", async () => { | |
| const repoId = repoIdInput.value; | |
| const apiName = apiNameInput.value; | |
| const args = JSON.parse(argsInput.value); | |
| submitButton.disabled = true; | |
| loadingDiv.classList.remove("hidden"); | |
| resultDiv.classList.add("hidden"); | |
| const response = await fetch(`/gp/${repoId}/${apiName}`, { | |
| method: "POST", | |
| headers: { | |
| "Content-Type": "application/json" | |
| }, | |
| body: JSON.stringify({ args }) | |
| }); | |
| const result = await response.json(); | |
| resultDiv.textContent = JSON.stringify(result, null, 2); | |
| submitButton.disabled = false; | |
| loadingDiv.classList.add("hidden"); | |
| resultDiv.classList.remove("hidden"); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |