| <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> | |