Spaces:
Paused
Paused
File size: 3,782 Bytes
4bbacde a21ebb4 4bbacde a21ebb4 7e7d725 478099f 3ce3e54 478099f a21ebb4 4bbacde a21ebb4 4bbacde 7e7d725 a21ebb4 4bbacde a21ebb4 4bbacde a21ebb4 4bbacde a21ebb4 4bbacde a21ebb4 4bbacde | 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 103 104 | <!DOCTYPE html>
<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>
|