File size: 1,734 Bytes
53a43fe |
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 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gradio API Image Upload</title>
</head>
<body>
<h2>Gradio API Image Upload and Prediction</h2>
<label for="fileInput">Upload an Image: </label>
<input type="file" id="fileInput" accept="image/*">
<button id="submitButton">Predict</button>
<h3>Prediction Result:</h3>
<pre id="result"></pre>
<script type="module">
import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
document.getElementById('submitButton').addEventListener('click', async () => {
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
if (!file) {
document.getElementById('result').textContent = 'Please select an image file.';
return;
}
try {
// Create a Blob from the uploaded file
const exampleImage = await file.arrayBuffer();
const client = await Client.connect("zainali95/test001");
// Make the prediction request
const result = await client.predict("/predict", { img: new Blob([exampleImage], { type: file.type }) });
console.log(result);
// Display the prediction result
document.getElementById('result').textContent = JSON.stringify(result.data, null, 2);
} catch (error) {
document.getElementById('result').textContent = 'Error: ' + error.message;
}
});
</script>
</body>
</html>
|