Spaces:
Sleeping
Sleeping
File size: 4,822 Bytes
d067c3d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 |
<!DOCTYPE html>
<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>
|