File size: 5,873 Bytes
f21948d bdf4f9d ac5e1ac f21948d bdf4f9d f21948d |
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 |
document.addEventListener('DOMContentLoaded', function() {
const uploadForm = document.getElementById('uploadForm');
const submitBtn = document.getElementById('submitBtn');
const btnText = document.getElementById('btnText');
const loadingSpinner = document.getElementById('loadingSpinner');
const resultsSection = document.getElementById('results');
const errorSection = document.getElementById('error');
const videoInput = document.getElementById('video');
// Exercise names for display
const ACTIONS = [
"barbell biceps curl", "lateral raise", "push-up", "bench press",
"chest fly machine", "deadlift", "decline bench press", "hammer curl",
"hip thrust", "incline bench press", "lat pulldown", "leg extension",
"leg raises", "plank", "pull Up", "romanian deadlift", "russian twist",
"shoulder press", "squat", "t bar row", "tricep Pushdown", "tricep dips"
];
uploadForm.addEventListener('submit', async function(e) {
e.preventDefault();
// Validate inputs
const hasFile = videoInput.files.length > 0;
if (!hasFile) {
showError('Please select a video file.');
return;
}
// Show loading state
setLoadingState(true);
hideResults();
hideError();
try {
const formData = new FormData();
formData.append('video', videoInput.files[0]);
const response = await fetch('/upload', {
method: 'POST',
body: formData
});
const data = await response.json();
if (response.ok && data.success) {
displayResults(data.results);
} else {
showError(data.error || 'An error occurred during processing.');
}
} catch (error) {
console.error('Upload error:', error);
showError('Network error occurred. Please try again.');
} finally {
setLoadingState(false);
}
});
function setLoadingState(loading) {
submitBtn.disabled = loading;
if (loading) {
btnText.textContent = 'Processing...';
loadingSpinner.style.display = 'inline-block';
} else {
btnText.textContent = 'Analyze Video';
loadingSpinner.style.display = 'none';
}
}
function showError(message) {
document.getElementById('errorMessage').textContent = message;
errorSection.style.display = 'block';
resultsSection.style.display = 'none';
}
function hideError() {
errorSection.style.display = 'none';
}
function hideResults() {
resultsSection.style.display = 'none';
}
function displayResults(results) {
console.log('Results:', results);
// Display ensemble results
displayPredictions('ensembleResults', results.ensemble_predictions);
// Display individual model results
displayPredictions('stgcnResults', results.individual_predictions.stgcn);
displayPredictions('transformerResults', results.individual_predictions.transformer_12rel);
displayPredictions('angleResults', results.individual_predictions.transformer_angle);
displayPredictions('swin3dResults', results.individual_predictions.swin3d);
// Display processing times
document.getElementById('stgcnTime').textContent = results.processing_times.stgcn.toFixed(2);
document.getElementById('transformerTime').textContent = results.processing_times.transformer_12rel.toFixed(2);
document.getElementById('angleTime').textContent = results.processing_times.transformer_angle.toFixed(2);
document.getElementById('swin3dTime').textContent = results.processing_times.swin3d.toFixed(2);
// Display summary
document.getElementById('totalTime').textContent = results.total_processing_time;
document.getElementById('windowsProcessed').textContent = results.windows_processed || 'N/A';
document.getElementById('mediapipeTime').textContent = results.processing_times.mediapipe.toFixed(2);
// Show results
resultsSection.style.display = 'block';
hideError();
}
function displayPredictions(containerId, predictions) {
const container = document.getElementById(containerId);
container.innerHTML = '';
predictions.forEach((pred, index) => {
const predItem = document.createElement('div');
predItem.className = 'prediction-item';
const exerciseName = document.createElement('span');
exerciseName.className = 'exercise-name';
exerciseName.textContent = `${index + 1}. ${pred.exercise}`;
const probability = document.createElement('span');
probability.className = 'probability';
probability.textContent = `${(pred.probability * 100).toFixed(1)}%`;
const probabilityBar = document.createElement('div');
probabilityBar.className = 'probability-bar';
const probabilityFill = document.createElement('div');
probabilityFill.className = 'probability-fill';
probabilityFill.style.width = `${pred.probability * 100}%`;
probabilityBar.appendChild(probabilityFill);
predItem.appendChild(exerciseName);
predItem.appendChild(probability);
const predContainer = document.createElement('div');
predContainer.appendChild(predItem);
predContainer.appendChild(probabilityBar);
container.appendChild(predContainer);
});
}
}); |