Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Image Upload</title> | |
| <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| } | |
| .clickable-image { | |
| cursor: pointer; | |
| border: 2px solid #ddd; | |
| border-radius: 8px; | |
| transition: border-color 0.3s; | |
| } | |
| .clickable-image:hover { | |
| border-color: #007bff; | |
| } | |
| </style> | |
| </head> | |
| <body class="flex flex-col items-center justify-center h-screen bg-gray-100"> | |
| <h1 class="text-2xl font-bold mb-4">Upload an Image</h1> | |
| <input type="file" id="fileInput" accept="image/*" capture="environment" class="hidden"> | |
| <button id="cameraButton" class="bg-red-500 text-white px-4 py-2 rounded">Take Photo</button> | |
| <button id="galleryButton" class="bg-green-500 text-white px-4 py-2 rounded">Choose from Gallery</button> | |
| <br> | |
| <br> | |
| <br> | |
| <!-- <img src="/upload.png" alt="Click to Upload" class="clickable-image mb-4" onclick="triggerFileInput()"> --> | |
| <!-- Dropdown for selecting model_id --> | |
| <select id="modelSelect" class="mb-4 px-4 py-2 border rounded"> | |
| <option value="grian/1">Grian Model</option> | |
| <option value="wheat-dataset-new/2">Wheat Dataset New Model</option> | |
| </select> | |
| <button onclick="uploadImage()" class="bg-blue-500 text-white px-4 py-2 rounded">Upload</button> | |
| <div id="output" class="mt-4"></div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const fileInput = document.getElementById('fileInput'); | |
| const cameraButton = document.getElementById('cameraButton'); | |
| const galleryButton = document.getElementById('galleryButton'); | |
| cameraButton.addEventListener('click', function() { | |
| fileInput.setAttribute('capture', 'environment'); | |
| fileInput.click(); | |
| }); | |
| galleryButton.addEventListener('click', function() { | |
| fileInput.removeAttribute('capture'); | |
| fileInput.click(); | |
| }); | |
| }); | |
| function triggerFileInput() { | |
| document.getElementById('fileInput').click(); | |
| } | |
| async function uploadImage() { | |
| const fileInput = document.getElementById('fileInput'); | |
| const modelSelect = document.getElementById('modelSelect'); | |
| const output = document.getElementById('output'); | |
| const file = fileInput.files[0]; | |
| const modelId = modelSelect.value; | |
| if (!file) { | |
| output.innerHTML = 'No image selected.'; | |
| return; | |
| } | |
| const formData = new FormData(); | |
| formData.append('image', file); | |
| formData.append('model_id', modelId); // Append model_id to FormData | |
| output.innerHTML = 'Uploading...'; | |
| try { | |
| const response = await fetch('/predict_wheat', { | |
| method: 'POST', | |
| body: formData | |
| }); | |
| const result = await response.json(); | |
| const predictedImageSrc = `data:image/jpeg;base64,${result.predicted_image}`; | |
| output.innerHTML = ` | |
| <p>${result.message}</p> | |
| <img src="${predictedImageSrc}" alt="Predicted Image" class="mt-4"> | |
| `; | |
| } catch (error) { | |
| output.innerHTML = 'Failed to get prediction'; | |
| console.error(error); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> | |