Spaces:
Sleeping
Sleeping
| const classificationEndpoint = "https://fatma23457-minima.hf.space/api/predict"; | |
| let currentDataUrl = null; | |
| function dataUrlFromFile(file) { | |
| return new Promise((resolve, reject) => { | |
| const reader = new FileReader(); | |
| reader.onload = (event) => { | |
| resolve(event.target.result); | |
| }; | |
| reader.readAsDataURL(file); | |
| }); | |
| } | |
| // إرسال الصورة للسيرفر | |
| function classifyImage(dataUrl) { | |
| const jsonData = {"data": [dataUrl],"fn_index": 0 }; | |
| const jsonDataString = JSON.stringify(jsonData); | |
| const headers = new Headers(); | |
| headers.append('Content-Type', 'application/json'); | |
| const request = new Request(classificationEndpoint, { | |
| method: 'POST', | |
| headers: headers, | |
| body: jsonDataString | |
| }); | |
| return fetch(request).then(response => response.json()); | |
| } | |
| function formatAsPercentage(number, digits) { | |
| return (number * 100).toFixed(digits) + "%"; | |
| } | |
| function formatPredictionText(prediction) { | |
| try { | |
| const predictionData = prediction.data[0]; | |
| const confidence = predictionData.confidences[0]['confidence']; | |
| return `${predictionData.label}: ${formatAsPercentage(confidence, 2)} confidence`; | |
| } catch (e) { | |
| return "Prediction complete!"; | |
| } | |
| } | |
| const selectElement = document.getElementById('image-file'); | |
| const submitBtn = document.getElementById('submit-btn'); | |
| selectElement.addEventListener('change', (event) => { | |
| const files = event.target.files; | |
| if (files.length > 0) { | |
| const file = files[0]; | |
| dataUrlFromFile(file).then((dataUrl) => { | |
| currentDataUrl = dataUrl; | |
| document.getElementById('image-preview').src = dataUrl; | |
| document.getElementById('prediction-text').innerText = "Image loaded. Ready to classify!"; | |
| submitBtn.disabled = false; | |
| }); | |
| } | |
| }); | |
| submitBtn.addEventListener('click', () => { | |
| if (!currentDataUrl) return; | |
| document.getElementById('prediction-text').innerText = "Classifying... Please wait..."; | |
| submitBtn.disabled = true; | |
| classifyImage(currentDataUrl) | |
| .then((prediction) => { | |
| console.log(prediction); | |
| document.getElementById('prediction-text').innerText = formatPredictionText(prediction); | |
| submitBtn.disabled = false; | |
| }) | |
| .catch((error) => { | |
| console.error("Error:", error); | |
| document.getElementById('prediction-text').innerText = "Failed to connect to API. Is your Space running?"; | |
| submitBtn.disabled = false; | |
| }); | |
| }); |