Spaces:
Running
Running
File size: 4,635 Bytes
89a78a7 a6dc0bf 89a78a7 a6dc0bf 89a78a7 a6dc0bf 89a78a7 a6dc0bf 89a78a7 a6dc0bf 89a78a7 |
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 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Face Shape Detection</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
<!-- Navbar -->
<nav class="bg-blue-600 text-white p-4 flex justify-between items-center">
<div class="text-lg font-bold">Face Shape Detect</div>
<div class="space-x-4">
<a href="#" class="hover:text-gray-300">Detect</a>
<a href="#" class="hover:text-gray-300">Blog</a>
<a href="#" class="hover:text-gray-300">About Us</a>
</div>
</nav>
<!-- Hero Section -->
<section class="hero bg-blue-500 text-white text-center py-16">
<h1 class="text-4xl font-semibold">Detect Your Face Shape with AI</h1>
<p class="mt-4 text-xl">Upload an image and let AI detect your face shape.</p>
</section>
<!-- Upload Section -->
<section class="upload-section text-center py-16">
<h2 class="text-3xl font-semibold">Upload Your Image</h2>
<input type="file" id="file-upload" class="mt-4 p-2 border rounded" />
<button id="upload-btn" onclick="uploadImage()" class="mt-4 bg-blue-600 text-white p-2 rounded">Upload and Detect</button>
<div id="loading" class="hidden mt-4">Loading...</div>
</section>
<!-- Result Section -->
<section id="result-section" class="hidden py-16">
<h2 class="text-3xl font-semibold text-center">Detection Results</h2>
<!-- Display top result as heading -->
<h3 id="top-shape" class="text-2xl font-semibold text-center mt-4"></h3>
<p id="top-percentage" class="text-xl text-center mt-2"></p>
<div id="result-container" class="mt-8 max-w-xl mx-auto"></div>
</section>
<!-- Footer -->
<footer class="bg-blue-600 text-white text-center py-12">
<p>© 2024 Face Shape Detect. All rights reserved.</p>
</footer>
<script>
function uploadImage() {
const uploadBtn = document.getElementById('upload-btn');
const loadingDiv = document.getElementById('loading');
const fileInput = document.getElementById('file-upload');
// Disable the upload button to prevent multiple clicks
uploadBtn.disabled = true;
loadingDiv.classList.remove('hidden'); // Show loading animation
const formData = new FormData();
formData.append('file', fileInput.files[0]);
axios.post('/predict', formData)
.then(response => {
const resultContainer = document.getElementById('result-container');
resultContainer.innerHTML = '';
const result = response.data;
// Sort the results in descending order
const sortedResult = Object.entries(result).sort((a, b) => b[1] - a[1]);
// Get the highest percentage result
const [topShape, topPercentage] = sortedResult[0];
document.getElementById('top-shape').innerText = `Your face shape is: ${topShape}`;
document.getElementById('top-percentage').innerText = `${topPercentage.toFixed(2)}%`;
// Loop through the sorted result and create progress bars
sortedResult.forEach(([key, value]) => {
let progressBar = `
<div class="mb-4">
<span class="text-lg">${key}: ${value.toFixed(2)}%</span>
<div class="w-full bg-gray-300 rounded-full h-2">
<div class="bg-green-500 h-2" style="width: ${value}%"></div>
</div>
</div>
`;
resultContainer.innerHTML += progressBar;
});
// Show result section
document.getElementById('result-section').classList.remove('hidden');
})
.catch(error => {
console.error('Error uploading image:', error);
})
.finally(() => {
// Enable the upload button and hide loading animation
uploadBtn.disabled = false;
loadingDiv.classList.add('hidden');
});
}
</script>
</body>
</html>
|