Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Cow Breed Classifier</title> | |
| <style> | |
| body { font-family: Arial, sans-serif; text-align: center; margin-top: 50px; } | |
| .preview { margin-top: 20px; } | |
| img { max-width: 300px; margin-top: 10px; } | |
| .result { margin-top: 20px; font-size: 18px; font-weight: bold; } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Cow Breed Classifier</h1> | |
| <form id="uploadForm"> | |
| <input type="file" name="image" id="imageInput" accept="image/*" required> | |
| <button type="submit">Upload & Predict</button> | |
| </form> | |
| <div class="preview"> | |
| <p>Selected Image:</p> | |
| <img id="previewImg" src="" alt="Preview"> | |
| </div> | |
| <div class="result" id="result"></div> | |
| <script> | |
| const form = document.getElementById("uploadForm"); | |
| const imageInput = document.getElementById("imageInput"); | |
| const previewImg = document.getElementById("previewImg"); | |
| const resultDiv = document.getElementById("result"); | |
| imageInput.addEventListener("change", () => { | |
| const file = imageInput.files[0]; | |
| if (file) { | |
| previewImg.src = URL.createObjectURL(file); | |
| } | |
| }); | |
| form.addEventListener("submit", async (e) => { | |
| e.preventDefault(); | |
| const file = imageInput.files[0]; | |
| if (!file) { | |
| alert("Please select an image first!"); | |
| return; | |
| } | |
| const formData = new FormData(); | |
| formData.append("image", file); | |
| try { | |
| const response = await fetch("/predict", { method: "POST", body: formData }); | |
| const data = await response.json(); | |
| if (data.error) { | |
| resultDiv.textContent = "Error: " + data.error; | |
| } else { | |
| resultDiv.textContent = `Prediction: ${data.label} (Confidence: ${(data.confidence * 100).toFixed(2)}%)`; | |
| } | |
| } catch (err) { | |
| resultDiv.textContent = "Request failed: " + err; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |