|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>AI Vision Classifier</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.prediction-bar { |
|
|
height: 24px; |
|
|
background: linear-gradient(90deg, #5b21b6 0%, #7e22ce 100%); |
|
|
border-radius: 12px; |
|
|
transition: width 0.3s ease; |
|
|
box-shadow: 0 0 10px rgba(124, 58, 237, 0.5); |
|
|
} |
|
|
.prediction-item { |
|
|
background-color: rgba(76, 29, 149, 0.2); |
|
|
padding: 12px; |
|
|
border-radius: 8px; |
|
|
border: 1px solid rgba(124, 58, 237, 0.3); |
|
|
} |
|
|
.webcam-feed { |
|
|
border-radius: 16px; |
|
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.webcam-feed:hover { |
|
|
transform: scale(1.02); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
.webcam-feed img { |
|
|
max-width: 100%; |
|
|
max-height: 100%; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gradient-to-br from-gray-900 to-purple-900 min-h-screen text-gray-100"> |
|
|
<div class="container mx-auto px-4 py-12"> |
|
|
<div class="max-w-4xl mx-auto"> |
|
|
|
|
|
<div class="text-center mb-12"> |
|
|
<h1 class="text-4xl font-bold text-purple-300 mb-2"> |
|
|
<i class="fas fa-robot text-purple-400 mr-2"></i> AI Vision Classifier |
|
|
</h1> |
|
|
<p class="text-gray-300 max-w-lg mx-auto"> |
|
|
A real-time image classification system powered by Teachable Machine. |
|
|
Point your camera at objects to see the AI's predictions. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl shadow-lg overflow-hidden border border-purple-800"> |
|
|
<div class="p-6 md:p-8"> |
|
|
|
|
|
<div class="flex flex-col md:flex-row gap-8"> |
|
|
<div class="flex-1"> |
|
|
<div class="mb-4 flex justify-between items-center"> |
|
|
<h2 class="text-xl font-semibold text-purple-300"> |
|
|
<i class="fas fa-camera text-purple-400 mr-2"></i> Live Feed |
|
|
</h2> |
|
|
<div class="flex gap-2"> |
|
|
<button id="startBtn" onclick="init()" class="bg-purple-700 hover:bg-purple-600 text-white px-4 py-2 rounded-lg transition flex items-center"> |
|
|
<i class="fas fa-play mr-2"></i> Start Camera |
|
|
</button> |
|
|
<label for="fileUpload" class="bg-purple-800 hover:bg-purple-700 text-white px-4 py-2 rounded-lg transition flex items-center cursor-pointer"> |
|
|
<i class="fas fa-upload mr-2"></i> Upload Image |
|
|
<input id="fileUpload" type="file" accept="image/*" class="hidden" onchange="handleImageUpload(this)"> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
<div id="webcam-container" class="webcam-feed bg-gray-700 w-full aspect-square flex items-center justify-center rounded-lg overflow-hidden border border-purple-800"> |
|
|
<div class="text-center p-4"> |
|
|
<i class="fas fa-camera text-purple-400 text-4xl mb-2"></i> |
|
|
<p class="text-gray-300">Camera feed will appear here</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1"> |
|
|
<h2 class="text-xl font-semibold text-purple-300 mb-4"> |
|
|
<i class="fas fa-chart-bar text-purple-400 mr-2"></i> Predictions |
|
|
</h2> |
|
|
<div id="label-container" class="space-y-4"> |
|
|
<div class="bg-gray-100 p-6 rounded-lg text-center"> |
|
|
<i class="fas fa-lightbulb text-yellow-400 text-3xl mb-3"></i> |
|
|
<p class="text-gray-600">Click "Start Camera" to begin classification</p> |
|
|
<p class="text-sm text-gray-500 mt-2">The AI will analyze objects in view and display confidence levels here</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-8 bg-purple-900/30 p-4 rounded-lg border border-purple-800"> |
|
|
<h3 class="font-medium text-purple-300 mb-2 flex items-center"> |
|
|
<i class="fas fa-info-circle text-purple-400 mr-2"></i> How to use |
|
|
</h3> |
|
|
<ol class="list-decimal list-inside text-purple-200 space-y-1 text-sm"> |
|
|
<li>Click "Start Camera" and allow access to your webcam</li> |
|
|
<li>Point your camera at objects you've trained the model to recognize</li> |
|
|
<li>View real-time predictions with confidence percentages</li> |
|
|
<li>For best results, ensure good lighting and clear focus</li> |
|
|
</ol> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-8 text-center text-gray-400 text-sm"> |
|
|
<p>Powered by Teachable Machine and TensorFlow.js</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest/dist/tf.min.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@latest/dist/teachablemachine-image.min.js"></script> |
|
|
<script type="text/javascript"> |
|
|
|
|
|
const URL = "https://teachablemachine.withgoogle.com/models/5bQ38_H5n/"; |
|
|
|
|
|
let model, webcam, labelContainer, maxPredictions; |
|
|
let isRunning = false; |
|
|
|
|
|
|
|
|
async function init() { |
|
|
if (isRunning) return; |
|
|
|
|
|
const startBtn = document.getElementById('startBtn'); |
|
|
startBtn.disabled = true; |
|
|
startBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Initializing...'; |
|
|
|
|
|
try { |
|
|
const modelURL = URL + "model.json"; |
|
|
const metadataURL = URL + "metadata.json"; |
|
|
|
|
|
|
|
|
model = await tmImage.load(modelURL, metadataURL); |
|
|
maxPredictions = model.getTotalClasses(); |
|
|
|
|
|
|
|
|
const flip = true; |
|
|
webcam = new tmImage.Webcam(400, 400, flip); |
|
|
await webcam.setup(); |
|
|
await webcam.play(); |
|
|
|
|
|
|
|
|
const webcamContainer = document.getElementById('webcam-container'); |
|
|
webcamContainer.innerHTML = ''; |
|
|
webcamContainer.appendChild(webcam.canvas); |
|
|
webcam.canvas.classList.add('webcam-feed', 'w-full', 'h-full'); |
|
|
|
|
|
|
|
|
labelContainer = document.getElementById('label-container'); |
|
|
labelContainer.innerHTML = ''; |
|
|
for (let i = 0; i < maxPredictions; i++) { |
|
|
const predictionElement = document.createElement('div'); |
|
|
predictionElement.className = 'prediction-item'; |
|
|
labelContainer.appendChild(predictionElement); |
|
|
} |
|
|
|
|
|
startBtn.innerHTML = '<i class="fas fa-check-circle mr-2"></i> Running'; |
|
|
startBtn.classList.remove('bg-purple-700', 'hover:bg-purple-600'); |
|
|
startBtn.classList.add('bg-purple-600', 'hover:bg-purple-500'); |
|
|
|
|
|
isRunning = true; |
|
|
window.requestAnimationFrame(loop); |
|
|
} catch (error) { |
|
|
console.error('Error initializing:', error); |
|
|
labelContainer.innerHTML = ` |
|
|
<div class="bg-red-50 p-4 rounded-lg text-red-700"> |
|
|
<i class="fas fa-exclamation-triangle mr-2"></i> |
|
|
Error: ${error.message} |
|
|
</div> |
|
|
`; |
|
|
startBtn.disabled = false; |
|
|
startBtn.innerHTML = '<i class="fas fa-play mr-2"></i> Try Again'; |
|
|
} |
|
|
} |
|
|
|
|
|
async function loop() { |
|
|
if (!isRunning) return; |
|
|
|
|
|
webcam.update(); |
|
|
await predict(); |
|
|
window.requestAnimationFrame(loop); |
|
|
} |
|
|
|
|
|
|
|
|
async function handleImageUpload(input) { |
|
|
if (input.files && input.files[0]) { |
|
|
const reader = new FileReader(); |
|
|
|
|
|
reader.onload = async function(e) { |
|
|
const webcamContainer = document.getElementById('webcam-container'); |
|
|
webcamContainer.innerHTML = ''; |
|
|
|
|
|
const img = document.createElement('img'); |
|
|
img.src = e.target.result; |
|
|
img.className = 'webcam-feed w-full h-full object-contain'; |
|
|
webcamContainer.appendChild(img); |
|
|
|
|
|
|
|
|
if (isRunning) { |
|
|
webcam.stop(); |
|
|
isRunning = false; |
|
|
const startBtn = document.getElementById('startBtn'); |
|
|
startBtn.innerHTML = '<i class="fas fa-play mr-2"></i> Start Camera'; |
|
|
startBtn.classList.remove('bg-green-500', 'hover:bg-green-600'); |
|
|
startBtn.classList.add('bg-blue-500', 'hover:bg-blue-600'); |
|
|
startBtn.disabled = false; |
|
|
} |
|
|
|
|
|
|
|
|
if (!model) { |
|
|
try { |
|
|
const modelURL = URL + "model.json"; |
|
|
const metadataURL = URL + "metadata.json"; |
|
|
model = await tmImage.load(modelURL, metadataURL); |
|
|
maxPredictions = model.getTotalClasses(); |
|
|
} catch (error) { |
|
|
console.error('Error loading model:', error); |
|
|
return; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
await predictOnImage(img); |
|
|
} |
|
|
|
|
|
reader.readAsDataURL(input.files[0]); |
|
|
} |
|
|
} |
|
|
|
|
|
async function predictOnImage(imageElement) { |
|
|
|
|
|
labelContainer = document.getElementById('label-container'); |
|
|
labelContainer.innerHTML = ''; |
|
|
|
|
|
|
|
|
for (let i = 0; i < maxPredictions; i++) { |
|
|
const predictionElement = document.createElement('div'); |
|
|
predictionElement.className = 'prediction-item'; |
|
|
labelContainer.appendChild(predictionElement); |
|
|
} |
|
|
|
|
|
|
|
|
const prediction = await model.predict(imageElement); |
|
|
|
|
|
for (let i = 0; i < maxPredictions; i++) { |
|
|
const probability = prediction[i].probability.toFixed(2); |
|
|
const percentage = Math.round(probability * 100); |
|
|
|
|
|
const predictionElement = labelContainer.childNodes[i]; |
|
|
predictionElement.className = 'prediction-item mb-4'; |
|
|
predictionElement.innerHTML = ` |
|
|
<div class="flex justify-between items-center mb-1"> |
|
|
<span class="font-medium text-purple-300">${prediction[i].className}</span> |
|
|
<span class="text-sm font-semibold text-purple-200"> |
|
|
${percentage}% |
|
|
</span> |
|
|
</div> |
|
|
<div class="prediction-bar" style="width: ${percentage}%"></div> |
|
|
`; |
|
|
} |
|
|
} |
|
|
|
|
|
async function predict() { |
|
|
if (!isRunning) return; |
|
|
|
|
|
|
|
|
const prediction = await model.predict(webcam.canvas); |
|
|
|
|
|
for (let i = 0; i < maxPredictions; i++) { |
|
|
const probability = prediction[i].probability.toFixed(2); |
|
|
const percentage = Math.round(probability * 100); |
|
|
|
|
|
const predictionElement = labelContainer.childNodes[i]; |
|
|
predictionElement.className = 'prediction-item mb-4'; |
|
|
predictionElement.innerHTML = ` |
|
|
<div class="flex justify-between items-center mb-1"> |
|
|
<span class="font-medium text-purple-300">${prediction[i].className}</span> |
|
|
<span class="text-sm font-semibold text-purple-200"> |
|
|
${percentage}% |
|
|
</span> |
|
|
</div> |
|
|
<div class="prediction-bar" style="width: ${percentage}%"></div> |
|
|
`; |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=deniztas/model" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
