Spaces:

deniztas
/

model

Running

App Files Files Community

model / index.html

deniztas

predictionsdaki yazıları mora çevir kaplan aslan kedi gibi tagleri - Follow Up Deployment

eb935e1 verified 9 months ago

raw

history blame contribute delete

15.1 kB

	<!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">
	<!-- Header -->
	<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>

	<!-- Main Content -->
	<div class="bg-gray-800 rounded-xl shadow-lg overflow-hidden border border-purple-800">
	<div class="p-6 md:p-8">
	<!-- Webcam Container -->
	<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>

	<!-- Predictions Container -->
	<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>

	<!-- Instructions -->
	<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>

	<!-- Footer -->
	<div class="mt-8 text-center text-gray-400 text-sm">
	<p>Powered by Teachable Machine and TensorFlow.js</p>
	</div>
	</div>
	</div>

	<!-- Scripts -->
	<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">
	// the link to your model provided by Teachable Machine export panel
	const URL = "https://teachablemachine.withgoogle.com/models/5bQ38_H5n/";

	let model, webcam, labelContainer, maxPredictions;
	let isRunning = false;

	// Load the image model and setup the webcam
	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";

	// load the model and metadata
	model = await tmImage.load(modelURL, metadataURL);
	maxPredictions = model.getTotalClasses();

	// Setup webcam
	const flip = true; // whether to flip the webcam
	webcam = new tmImage.Webcam(400, 400, flip); // increased resolution
	await webcam.setup(); // request access to the webcam
	await webcam.play();

	// Update UI
	const webcamContainer = document.getElementById('webcam-container');
	webcamContainer.innerHTML = '';
	webcamContainer.appendChild(webcam.canvas);
	webcam.canvas.classList.add('webcam-feed', 'w-full', 'h-full');

	// Setup predictions container
	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(); // update the webcam frame
	await predict();
	window.requestAnimationFrame(loop);
	}

	// run the webcam image through the image model
	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);

	// Stop webcam if running
	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;
	}

	// Load model if not already loaded
	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;
	}
	}

	// Predict on the uploaded image
	await predictOnImage(img);
	}

	reader.readAsDataURL(input.files[0]);
	}
	}

	async function predictOnImage(imageElement) {
	// Clear previous predictions
	labelContainer = document.getElementById('label-container');
	labelContainer.innerHTML = '';

	// Create prediction elements
	for (let i = 0; i < maxPredictions; i++) {
	const predictionElement = document.createElement('div');
	predictionElement.className = 'prediction-item';
	labelContainer.appendChild(predictionElement);
	}

	// Predict
	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;

	// predict can take in an image, video or canvas html element
	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>