|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Gradio API Client</title> |
|
|
<style> |
|
|
body { font-family: system-ui, sans-serif; line-height: 1.6; max-width: 800px; margin: 2rem auto; } |
|
|
.container { display: flex; flex-direction: column; gap: 1.5rem; border: 1px solid #ccc; padding: 1.5rem; border-radius: 8px; } |
|
|
.tab-content { display: none; } |
|
|
.tab-content.active { display: block; } |
|
|
.tabs button { padding: 10px; border: 1px solid #ccc; background: #f0f0f0; cursor: pointer; } |
|
|
.tabs button.active { background: #fff; border-bottom: 1px solid #fff; } |
|
|
h1, h3 { margin-top: 0; } |
|
|
input, button, textarea { font-size: 1rem; padding: 0.5rem; } |
|
|
pre { background: #f4f4f4; padding: 1rem; border-radius: 5px; white-space: pre-wrap; word-wrap: break-word; } |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<h1>Gradio API Test Client</h1> |
|
|
<div class="container"> |
|
|
<div> |
|
|
<label for="api-url-base"><b>Base API URL (Your Space's Direct URL):</b></label> |
|
|
<input type="text" id="api-url-base" placeholder="https://your-space-name.hf.space" style="width: 100%;"> |
|
|
</div> |
|
|
|
|
|
<div class="tabs"> |
|
|
<button class="tab-button active" onclick="showTab('mcp')">Test /run/mcp_decode (Base64)</button> |
|
|
</div> |
|
|
|
|
|
<div id="mcp" class="tab-content active"> |
|
|
<h3>Test the MCP (Base64) Endpoint</h3> |
|
|
<p>This method is simple and robust for programmatic use.</p> |
|
|
<div> |
|
|
<label for="image-upload-mcp">Upload Image to convert to Base64:</label> |
|
|
<input type="file" id="image-upload-mcp" accept="image/png"> |
|
|
</div> |
|
|
<textarea id="base64-output" rows="4" readonly placeholder="Base64 will appear here..."></textarea> |
|
|
<button id="submit-mcp">Send Base64 to /run/mcp_decode</button> |
|
|
<h3>MCP Result:</h3> |
|
|
<pre id="result-mcp">...</pre> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
const apiUrlBaseInput = document.getElementById('api-url-base'); |
|
|
const mcpUploadInput = document.getElementById('image-upload-mcp'); |
|
|
const b64Output = document.getElementById('base64-output'); |
|
|
const mcpSubmitBtn = document.getElementById('submit-mcp'); |
|
|
const mcpResultPre = document.getElementById('result-mcp'); |
|
|
|
|
|
|
|
|
mcpUploadInput.addEventListener('change', () => { |
|
|
const file = mcpUploadInput.files[0]; |
|
|
if (!file) return; |
|
|
const reader = new FileReader(); |
|
|
reader.onload = (e) => { |
|
|
|
|
|
const b64 = e.target.result.split(',')[1]; |
|
|
b64Output.value = b64; |
|
|
}; |
|
|
reader.readAsDataURL(file); |
|
|
}); |
|
|
|
|
|
|
|
|
mcpSubmitBtn.addEventListener('click', async () => { |
|
|
const baseUrl = apiUrlBaseInput.value.trim(); |
|
|
const b64String = b64Output.value.trim(); |
|
|
|
|
|
if (!baseUrl || !b64String) { |
|
|
mcpResultPre.textContent = 'Error: Please provide both a base URL and an image.'; |
|
|
return; |
|
|
} |
|
|
|
|
|
mcpResultPre.textContent = 'Sending request...'; |
|
|
mcpSubmitBtn.disabled = true; |
|
|
|
|
|
const apiUrl = `${baseUrl}/run/mcp_decode`; |
|
|
|
|
|
|
|
|
const payload = { |
|
|
data: [ b64String ] |
|
|
}; |
|
|
|
|
|
try { |
|
|
const response = await fetch(apiUrl, { |
|
|
method: 'POST', |
|
|
headers: { 'Content-Type': 'application/json' }, |
|
|
body: JSON.stringify(payload) |
|
|
}); |
|
|
|
|
|
const result = await response.json(); |
|
|
|
|
|
if (result.error) { |
|
|
throw new Error(result.error); |
|
|
} |
|
|
|
|
|
|
|
|
mcpResultPre.textContent = `✅ Success!\n\n${JSON.stringify(result.data[0], null, 2)}`; |
|
|
} catch (error) { |
|
|
mcpResultPre.textContent = `❌ API Request Failed:\n\n${error.message}`; |
|
|
} finally { |
|
|
mcpSubmitBtn.disabled = false; |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
