Spaces:
Sleeping
Sleeping
File size: 4,884 Bytes
62139b4 |
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 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 |
let uploadedFile = null;
// DOM elements
const uploadArea = document.getElementById('uploadArea');
const fileInput = document.getElementById('fileInput');
const imageSection = document.getElementById('imageSection');
const uploadedImage = document.getElementById('uploadedImage');
const predictBtn = document.getElementById('predictBtn');
const resultsSection = document.getElementById('resultsSection');
const hotDogProb = document.getElementById('hotDogProb');
const notHotDogProb = document.getElementById('notHotDogProb');
const loading = document.getElementById('loading');
// Drag and drop event listeners
uploadArea.addEventListener('dragover', handleDragOver);
uploadArea.addEventListener('dragleave', handleDragLeave);
uploadArea.addEventListener('drop', handleDrop);
uploadArea.addEventListener('click', () => fileInput.click());
// File input change listener
fileInput.addEventListener('change', handleFileSelect);
function handleDragOver(e) {
e.preventDefault();
uploadArea.classList.add('dragover');
}
function handleDragLeave(e) {
e.preventDefault();
uploadArea.classList.remove('dragover');
}
function handleDrop(e) {
e.preventDefault();
uploadArea.classList.remove('dragover');
const files = e.dataTransfer.files;
if (files.length > 0) {
handleFile(files[0]);
}
}
function handleFileSelect(e) {
const files = e.target.files;
if (files.length > 0) {
handleFile(files[0]);
}
}
function handleFile(file) {
// Check if file is an image
if (!file.type.startsWith('image/')) {
alert('Please select an image file.');
return;
}
uploadedFile = file;
// Display the image
const reader = new FileReader();
reader.onload = function(e) {
uploadedImage.src = e.target.result;
imageSection.style.display = 'block';
predictBtn.disabled = false;
// Hide results if they were previously shown
resultsSection.style.display = 'none';
};
reader.readAsDataURL(file);
}
async function predictImage() {
if (!uploadedFile) {
alert('Please upload an image first.');
return;
}
// Show loading state
loading.style.display = 'block';
predictBtn.disabled = true;
resultsSection.style.display = 'none';
try {
// Create FormData to send the image
const formData = new FormData();
formData.append('file', uploadedFile);
// Make API call to the predict endpoint
const response = await fetch('http://localhost:7860/predict', {
method: 'POST',
body: formData
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const result = await response.json();
// Display results
displayResults(result);
} catch (error) {
console.error('Error making prediction:', error);
alert('Error making prediction. Please try again.');
} finally {
// Hide loading state
loading.style.display = 'none';
predictBtn.disabled = false;
}
}
function displayResults(result) {
// Extract probabilities from the response
// Assuming the API returns something like: { "hot_dog": 0.85, "not_hot_dog": 0.15 }
// or { "predictions": [{"label": "hot_dog", "probability": 0.85}, {"label": "not_hot_dog", "probability": 0.15}] }
let hotDogProbability = 0;
let notHotDogProbability = 0;
// Handle different possible response formats
if (result.hot_dog !== undefined && result.not_hot_dog !== undefined) {
hotDogProbability = result.hot_dog;
notHotDogProbability = result.not_hot_dog;
} else if (result.predictions) {
result.predictions.forEach(pred => {
if (pred.label === 'hot_dog') {
hotDogProbability = pred.probability;
} else if (pred.label === 'not_hot_dog') {
notHotDogProbability = pred.probability;
}
});
} else if (result.probabilities) {
// Handle array format
hotDogProbability = result.probabilities[0] || 0;
notHotDogProbability = result.probabilities[1] || 0;
} else {
// Fallback: try to extract from any available format
const keys = Object.keys(result);
if (keys.length >= 2) {
const values = Object.values(result);
hotDogProbability = values[0] || 0;
notHotDogProbability = values[1] || 0;
}
}
// Format probabilities as percentages
hotDogProb.textContent = `${(hotDogProbability * 100).toFixed(2)}%`;
notHotDogProb.textContent = `${(notHotDogProbability * 100).toFixed(2)}%`;
// Show results section
resultsSection.style.display = 'block';
}
// Initialize button state
predictBtn.disabled = true; |