Spaces:
Sleeping
Sleeping
File size: 4,691 Bytes
7aad6dd b409397 7aad6dd b409397 7aad6dd b409397 7aad6dd b409397 7aad6dd b409397 7aad6dd b409397 7aad6dd b409397 7aad6dd b409397 c8d6012 7aad6dd b409397 7aad6dd b409397 7aad6dd b409397 7aad6dd b409397 7aad6dd b409397 7aad6dd b409397 7aad6dd b409397 7aad6dd b409397 7aad6dd b409397 7aad6dd b409397 | 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 | document.addEventListener("DOMContentLoaded", () => {
const analyzeBtn = document.getElementById("analyze_btn");
const loadingSpinner = document.getElementById("loading_spinner");
const resultsSection = document.getElementById("results_section");
const textInput = document.getElementById("text_input");
const imageInput = document.getElementById("image_input");
const audioInput = document.getElementById("audio_input");
const finalPrediction = document.getElementById("final_prediction");
const textChartCtx = document.getElementById('text_chart').getContext('2d');
const imageChartCtx = document.getElementById('image_chart').getContext('2d');
const audioChartCtx = document.getElementById('audio_chart').getContext('2d');
let textChart, imageChart, audioChart;
analyzeBtn.addEventListener("click", async () => {
const text = textInput.value.trim();
const imageFile = imageInput.files[0];
const audioFile = audioInput.files[0];
if (!text || !imageFile || !audioFile) {
alert("Please provide text, an image, and an audio file.");
return;
}
loadingSpinner.classList.remove("hidden");
resultsSection.classList.add("hidden");
analyzeBtn.disabled = true;
const formData = new FormData();
formData.append("text_input", text);
formData.append("image_input", imageFile);
formData.append("audio_input", audioFile);
try {
// ✅ Use relative path so it works in Hugging Face Space
const response = await fetch("/predict", {
method: "POST",
body: formData,
});
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
const results = await response.json();
updateUI(results);
} catch (error) {
console.error("Error during analysis:", error);
alert("An error occurred while analyzing. Please check the console.");
} finally {
loadingSpinner.classList.add("hidden");
analyzeBtn.disabled = false;
}
});
function updateUI(results) {
finalPrediction.textContent = results.final_prediction;
const labels = Object.keys(results.final_probabilities);
const textData = Object.values(results.text_probabilities);
const imageData = Object.values(results.image_probabilities);
const audioData = Object.values(results.audio_probabilities);
textChart = createOrUpdateChart(textChart, textChartCtx, labels, textData, 'Text Probabilities');
imageChart = createOrUpdateChart(imageChart, imageChartCtx, labels, imageData, 'Image Probabilities');
audioChart = createOrUpdateChart(audioChart, audioChartCtx, labels, audioData, 'Audio Probabilities');
resultsSection.classList.remove("hidden");
resultsSection.scrollIntoView({ behavior: 'smooth' });
}
function createOrUpdateChart(chartInstance, context, labels, data, title) {
if (chartInstance) chartInstance.destroy();
return new Chart(context, {
type: 'bar',
data: {
labels,
datasets: [{
label: title,
data,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(199, 199, 199, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(199, 199, 199, 1)'
],
borderWidth: 1
}]
},
options: {
maintainAspectRatio: false,
indexAxis: 'y',
scales: {
x: {
beginAtZero: true,
max: 1.0
}
},
plugins: {
legend: {
display: false
}
}
}
});
}
});
|