Spaces:

yusra21
/

teachable-machine

Running

App Files Files Community

yusra21 commited on Jul 10

Commit

1c5bb0e

verified ·

1 Parent(s): 055868f

<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Teachable Machine Görüntü Modeli</title> <style> /* Genel sayfa düzeni ve hizalama / body { font-family: 'Inter', sans-serif; / Inter fontunu kullan / display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; / Sayfanın tamamını kapla / margin: 0; background-color: #e0f2f7; / Açık mavi arka plan / color: #2c3e50; / Koyu gri metin rengi / padding: 20px; / Kenarlara boşluk ekle / box-sizing: border-box; / Padding'in genişliğe dahil olmasını sağla / } / Başlık stili / h1 { color: #1a73e8; / Google mavisi / margin-bottom: 25px; font-size: 2.2em; text-align: center; border-bottom: 2px solid #1a73e8; padding-bottom: 10px; width: 90%; max-width: 600px; } / Butonlar ve dosya yükleme alanı için kapsayıcı / .controls-container { display: flex; flex-direction: column; align-items: center; gap: 15px; / Butonlar ve input arasında boşluk / margin-bottom: 25px; width: 90%; max-width: 400px; } / Buton stili / button { background-color: #4285f4; / Google mavi butonu / color: white; padding: 12px 25px; border: none; border-radius: 25px; / Daha yuvarlak köşeler / cursor: pointer; font-size: 1.1em; transition: background-color 0.3s ease, transform 0.2s ease; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); / Hafif gölge / outline: none; / Odaklandığında dış çizgiyi kaldır / width: 100%; / Kapsayıcıya göre genişlik / max-width: 250px; / Maksimum genişlik / } button:hover { background-color: #357ae8; / Hover'da daha koyu mavi / transform: translateY(-2px); / Hafif yukarı kaydırma efekti / } button:active { transform: translateY(0); / Tıklamada geri gelme efekti / box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } / Dosya yükleme input stili / input[type="file"] { border: 2px dashed #b3e5fc; border-radius: 10px; padding: 15px; width: 100%; max-width: 300px; text-align: center; background-color: #f0f8ff; / Açık mavi tonu / cursor: pointer; color: #1a73e8; font-size: 1em; transition: border-color 0.3s ease; } input[type="file"]::-webkit-file-upload-button { visibility: hidden; } input[type="file"]::before { content: 'Görsel Yükle'; display: inline-block; background: linear-gradient(to bottom, #4285f4, #357ae8); border-radius: 20px; padding: 8px 16px; outline: none; white-space: nowrap; -webkit-user-select: none; cursor: pointer; font-weight: 700; font-size: 10pt; color: white; margin-right: 10px; } input[type="file"]:hover::before { border-color: #357ae8; } input[type="file"]:active::before { background: #357ae8; } / Web kamerası/Görsel kapsayıcısı stili / #media-container { border: 3px solid #b3e5fc; / Açık mavi çerçeve / border-radius: 15px; / Yuvarlak köşeler / overflow: hidden; / İçeriğin taşmasını engelle / margin-bottom: 25px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25); / Daha belirgin gölge / background-color: #ffffff; / Beyaz arka plan / display: flex; / İçeriği ortalamak için flex kullan / justify-content: center; align-items: center; width: 220px; / Sabit genişlik / height: 220px; / Sabit yükseklik / } / Kanvas veya yüklenen görsel stili / #media-container canvas, #media-container img { display: block; / Kanvasın/görselin altında boşluk olmasını engeller / border-radius: 12px; / Yuvarlak köşeler / max-width: 100%; / Responsive olması için / max-height: 100%; / Responsive olması için / object-fit: contain; / Görselin kapsayıcıya sığmasını sağla / } / Etiket sonuçları kapsayıcısı stili / #label-container { background-color: #ffffff; / Beyaz arka plan / padding: 20px; border-radius: 15px; / Yuvarlak köşeler / box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25); / Daha belirgin gölge / width: 90%; max-width: 350px; / Maksimum genişlik / text-align: center; margin-top: 15px; / Üstten boşluk / } / Her bir etiket satırı stili / #label-container div { padding: 10px 0; border-bottom: 1px solid #e0e0e0; / Açık gri ayırıcı çizgi / font-size: 1.1em; color: #34495e; / Koyu gri metin / transition: background-color 0.2s ease; } / Son etiketin alt çizgisini kaldır / #label-container div:last-child { border-bottom: none; } / Yükleniyor göstergesi / .loading-spinner { border: 4px solid #f3f3f3; / Light grey / border-top: 4px solid #4285f4; / Blue / border-radius: 50%; width: 30px; height: 30px; animation: spin 1s linear infinite; display: none; / Varsayılan olarak gizli / margin-top: 10px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } / Mobil uyumluluk için medya sorguları / @media (max-width: 600px) { h1 { font-size: 1.8em; width: 95%; } button { padding: 10px 20px; font-size: 1em; } #media-container { width: 180px; height: 180px; } #label-container { padding: 15px; max-width: 95%; } #label-container div { font-size: 1em; } } </style> </head> <body> <h1>Teachable Machine Görüntü Modeli</h1> <div class="controls-container"> <button type="button" onclick="startWebcam()">Kamerayı Başlat</button> <input type="file" id="imageUpload" accept="image/"> <button type="button" onclick="processUploadedImage()">Görseli Analiz Et</button> </div> <div id="media-container">  </div>  <div class="loading-spinner" id="loadingSpinner"></div> <div id="label-container"></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"> // Teachable Machine modelinizin URL'si // Kendi modelinizi kullanıyorsanız bu URL'yi değiştirmeniz gerekmektedir. const URL = "https://teachablemachine.withgoogle.com/models/SMwI3_lD/"; let model, webcam, labelContainer, maxPredictions; let isWebcamActive = false; // Kameranın aktif olup olmadığını takip eder let loopId; // requestAnimationFrame döngüsünün ID'si // Sayfa yüklendiğinde modeli önceden yükle window.onload = async () => { await loadModel(); }; // Modeli yükleme fonksiyonu async function loadModel() { const modelURL = URL + "model.json"; const metadataURL = URL + "metadata.json"; try { model = await tmImage.load(modelURL, metadataURL); maxPredictions = model.getTotalClasses(); labelContainer = document.getElementById("label-container"); // Etiketler için div'leri oluştur for (let i = 0; i < maxPredictions; i++) { labelContainer.appendChild(document.createElement("div")); } console.log("Model başarıyla yüklendi."); } catch (error) { console.error("Model yüklenirken hata oluştu:", error); if (labelContainer) { labelContainer.innerHTML = '<div>Hata: Model yüklenemedi. URL\'yi kontrol edin.</div>'; } } } // Kamerayı başlatma fonksiyonu async function startWebcam() { // Eğer kamera zaten aktifse veya model yüklenmediyse bir şey yapma if (isWebcamActive || !model) return; // Önceki görüntüyü temizle ve yükleme göstergesini gizle document.getElementById("media-container").innerHTML = ''; document.getElementById("loadingSpinner").style.display = 'none'; clearLabelContainer(); try { const flip = true; // Web kamerasını yatayda çevir webcam = new tmImage.Webcam(200, 200, flip); // Genişlik, yükseklik, çevirme ayarı await webcam.setup(); // Web kamerasına erişim izni iste await webcam.play(); // Web kamerasını başlat document.getElementById("media-container").appendChild(webcam.canvas); isWebcamActive = true; loopId = window.requestAnimationFrame(loop); // Sürekli tahmin için animasyon döngüsünü başlat console.log("Kamera başlatıldı."); } catch (error) { console.error("Kamera başlatılırken hata oluştu:", error); isWebcamActive = false; if (labelContainer) { labelContainer.innerHTML = '<div>Hata: Kameraya erişim sağlanamadı. Lütfen izin verin.</div>'; } } } // Kamera döngüsü async function loop() { if (webcam && isWebcamActive) { webcam.update(); // Web kamerası çerçevesini güncelle await predict(webcam.canvas); // Tahmin yap loopId = window.requestAnimationFrame(loop); // Bir sonraki kare için tekrar çağır } } // Yüklenen görseli işleme fonksiyonu async function processUploadedImage() { // Eğer kamera aktifse durdur stopWebcam(); const imageUpload = document.getElementById("imageUpload"); const file = imageUpload.files[0]; if (!file) { // Özel bir modal veya mesaj kutusu kullanın, alert() kullanmayın console.warn("Lütfen bir görsel dosyası seçin."); return; } if (!model) { // Özel bir modal veya mesaj kutusu kullanın, alert() kullanmayın console.warn("Model henüz yüklenmedi. Lütfen bekleyin veya sayfayı yenileyin."); return; } // Önceki görüntüyü temizle ve yükleme göstergesini göster document.getElementById("media-container").innerHTML = ''; const loadingSpinner = document.getElementById("loadingSpinner"); // Spinner'ı göstermeden önce elementin var olduğundan emin ol if (loadingSpinner) { loadingSpinner.style.display = 'block'; // Yükleniyor spinner'ını göster } clearLabelContainer(); const reader = new FileReader(); reader.onload = async (e) => { const img = new Image(); img.onload = async () => { document.getElementById("media-container").innerHTML = ''; // Spinner'ı kaldır document.getElementById("media-container").appendChild(img); await predict(img); // Görsel üzerinde tahmin yap if (loadingSpinner) { loadingSpinner.style.display = 'none'; // Yükleniyor spinner'ını gizle } }; img.onerror = () => { console.error("Görsel yüklenirken hata oluştu."); if (loadingSpinner) { loadingSpinner.style.display = 'none'; } if (labelContainer) { labelContainer.innerHTML = '<div>Hata: Görsel yüklenemedi.</div>'; } }; img.src = e.target.result; }; reader.readAsDataURL(file); // Dosyayı base64 string olarak oku } // Tahmin yapma fonksiyonu (hem kanvas hem de görsel için) async function predict(inputElement) { if (model && inputElement) { const prediction = await model.predict(inputElement); // Her sınıf için tahmin sonuçlarını göster for (let i = 0; i < maxPredictions; i++) { const classPrediction = prediction[i].className + ": " + prediction[i].probability.toFixed(2); // Sınıf adı ve olasılık if (labelContainer && labelContainer.childNodes[i]) { labelContainer.childNodes[i].innerHTML = classPrediction; } } } } // Kamerayı durdurma fonksiyonu function stopWebcam() { if (isWebcamActive && webcam) { webcam.stop(); window.cancelAnimationFrame(loopId); isWebcamActive = false; console.log("Kamera durduruldu."); } } // Etiket kapsayıcısını temizleme fonksiyonu function clearLabelContainer() { if (labelContainer) { for (let i = 0; i < maxPredictions; i++) { if (labelContainer.childNodes[i]) { labelContainer.childNodes[i].innerHTML = ''; } } } } </script> </body> </html> - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +333 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Teachable Machine
-emoji: 🐢
-colorFrom: green
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: teachable-machine
+emoji: 🐳
+colorFrom: purple
+colorTo: gray
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,333 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="tr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Teachable Machine Görüntü Modeli</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        /* Custom styles that can't be done with Tailwind */
+        input[type="file"]::-webkit-file-upload-button {
+            visibility: hidden;
+        }
+        input[type="file"]::before {
+            content: 'Görsel Yükle';
+            display: inline-block;
+            background: linear-gradient(to bottom, #3b82f6, #2563eb);
+            border-radius: 9999px;
+            padding: 0.5rem 1rem;
+            outline: none;
+            white-space: nowrap;
+            -webkit-user-select: none;
+            cursor: pointer;
+            font-weight: 600;
+            font-size: 0.875rem;
+            color: white;
+            margin-right: 10px;
+        }
+        input[type="file"]:hover::before {
+            background: linear-gradient(to bottom, #2563eb, #1d4ed8);
+        }
+        input[type="file"]:active::before {
+            background: #1d4ed8;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .loading-spinner {
+            border: 4px solid #f3f4f6;
+            border-top: 4px solid #3b82f6;
+            border-radius: 50%;
+            width: 30px;
+            height: 30px;
+            animation: spin 1s linear infinite;
+        }
+    </style>
+</head>
+<body class="font-sans bg-blue-50 min-h-screen flex flex-col items-center justify-center p-5 text-gray-800">
+    <div class="w-full max-w-3xl mx-auto text-center">
+        <!-- Header Section -->
+        <div class="mb-8">
+            <h1 class="text-3xl md:text-4xl font-bold text-blue-600 mb-4">Teachable Machine Görüntü Modeli</h1>
+            <p class="text-gray-600 max-w-2xl mx-auto">
+                Yapay zeka modelinizle görüntüleri analiz edin. Kameranızı kullanabilir veya bir görsel yükleyebilirsiniz.
+            </p>
+        </div>
+        <!-- Controls Section -->
+        <div class="bg-white rounded-xl shadow-lg p-6 mb-8 w-full max-w-md mx-auto">
+            <div class="space-y-4">
+                <button
+                    onclick="startWebcam()"
+                    class="w-full bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 px-6 rounded-full transition-all duration-200 transform hover:-translate-y-1 shadow-md"
+                >
+                    <div class="flex items-center justify-center space-x-2">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                            <path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v8a2 2 0 01-2 2h-2a2 2 0 01-2-2V6z" />
+                        </svg>
+                        <span>Kamerayı Başlat</span>
+                    </div>
+                </button>
+                <div class="relative">
+                    <input
+                        type="file"
+                        id="imageUpload"
+                        accept="image/*"
+                        class="w-full border-2 border-dashed border-blue-200 rounded-lg p-4 bg-blue-50 text-blue-500 font-medium cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-300 focus:border-transparent"
+                    >
+                </div>
+                <button
+                    onclick="processUploadedImage()"
+                    class="w-full bg-green-500 hover:bg-green-600 text-white font-medium py-3 px-6 rounded-full transition-all duration-200 transform hover:-translate-y-1 shadow-md"
+                >
+                    <div class="flex items-center justify-center space-x-2">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                            <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
+                        </svg>
+                        <span>Görseli Analiz Et</span>
+                    </div>
+                </button>
+            </div>
+        </div>
+        <!-- Media Display Section -->
+        <div class="flex flex-col md:flex-row items-center justify-center gap-8 w-full mb-8">
+            <div id="media-container" class="bg-white border-4 border-blue-200 rounded-xl overflow-hidden shadow-xl w-56 h-56 flex items-center justify-center">
+                <div class="text-gray-400 text-center p-4">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                    </svg>
+                    <p>Kamera veya görsel burada görünecek</p>
+                </div>
+            </div>
+            <div id="label-container" class="bg-white rounded-xl shadow-xl p-6 w-full max-w-md">
+                <h3 class="text-xl font-semibold text-gray-700 mb-4">Analiz Sonuçları</h3>
+                <div class="space-y-3 text-gray-600">
+                    <div class="py-2 border-b border-gray-100">Model yükleniyor...</div>
+                </div>
+            </div>
+        </div>
+        <!-- Loading Spinner -->
+        <div id="loadingSpinner" class="loading-spinner hidden my-4"></div>
+        <!-- Info Box -->
+        <div class="bg-blue-100 border-l-4 border-blue-500 text-blue-700 p-4 rounded-lg max-w-2xl mx-auto mt-6" role="alert">
+            <div class="flex items-center">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+                <p class="font-medium">İpucu:</p>
+            </div>
+            <p class="mt-2">Kamerayı başlatın veya bir görsel yükleyin. Model görüntüyü analiz edecek ve sonuçları gösterecektir.</p>
+        </div>
+    </div>
+    <!-- TensorFlow.js and Teachable Machine libraries -->
+    <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">
+        // Teachable Machine modelinizin URL'si
+        // Kendi modelinizi kullanıyorsanız bu URL'yi değiştirmeniz gerekmektedir.
+        const URL = "https://teachablemachine.withgoogle.com/models/SMwI3_lD/";
+        let model, webcam, labelContainer, maxPredictions;
+        let isWebcamActive = false; // Kameranın aktif olup olmadığını takip eder
+        let loopId; // requestAnimationFrame döngüsünün ID'si
+        // Sayfa yüklendiğinde modeli önceden yükle
+        window.onload = async () => {
+            await loadModel();
+        };
+        // Modeli yükleme fonksiyonu
+        async function loadModel() {
+            const modelURL = URL + "model.json";
+            const metadataURL = URL + "metadata.json";
+            try {
+                model = await tmImage.load(modelURL, metadataURL);
+                maxPredictions = model.getTotalClasses();
+                labelContainer = document.getElementById("label-container");
+                // Clear existing content
+                labelContainer.querySelector('div.space-y-3').innerHTML = '';
+                // Create divs for each prediction class
+                for (let i = 0; i < maxPredictions; i++) {
+                    const div = document.createElement('div');
+                    div.className = 'py-2 border-b border-gray-100';
+                    labelContainer.querySelector('div.space-y-3').appendChild(div);
+                }
+                console.log("Model başarıyla yüklendi.");
+            } catch (error) {
+                console.error("Model yüklenirken hata oluştu:", error);
+                if (labelContainer) {
+                    labelContainer.querySelector('div.space-y-3').innerHTML = '<div class="text-red-500">Hata: Model yüklenemedi. URL\'yi kontrol edin.</div>';
+                }
+            }
+        }
+        // Kamerayı başlatma fonksiyonu
+        async function startWebcam() {
+            // Eğer kamera zaten aktifse veya model yüklenmediyse bir şey yapma
+            if (isWebcamActive || !model) return;
+            // Önceki görüntüyü temizle ve yükleme göstergesini gizle
+            document.getElementById("media-container").innerHTML = '';
+            document.getElementById("loadingSpinner").classList.add('hidden');
+            clearLabelContainer();
+            try {
+                const flip = true; // Web kamerasını yatayda çevir
+                webcam = new tmImage.Webcam(224, 224, flip); // Genişlik, yükseklik, çevirme ayarı
+                await webcam.setup(); // Web kamerasına erişim izni iste
+                await webcam.play(); // Web kamerasını başlat
+                document.getElementById("media-container").appendChild(webcam.canvas);
+                isWebcamActive = true;
+                loopId = window.requestAnimationFrame(loop); // Sürekli tahmin için animasyon döngüsünü başlat
+                console.log("Kamera başlatıldı.");
+            } catch (error) {
+                console.error("Kamera başlatılırken hata oluştu:", error);
+                isWebcamActive = false;
+                if (labelContainer) {
+                    labelContainer.querySelector('div.space-y-3').innerHTML = '<div class="text-red-500">Hata: Kameraya erişim sağlanamadı. Lütfen izin verin.</div>';
+                }
+            }
+        }
+        // Kamera döngüsü
+        async function loop() {
+            if (webcam && isWebcamActive) {
+                webcam.update(); // Web kamerası çerçevesini güncelle
+                await predict(webcam.canvas); // Tahmin yap
+                loopId = window.requestAnimationFrame(loop); // Bir sonraki kare için tekrar çağır
+            }
+        }
+        // Yüklenen görseli işleme fonksiyonu
+        async function processUploadedImage() {
+            // Eğer kamera aktifse durdur
+            stopWebcam();
+            const imageUpload = document.getElementById("imageUpload");
+            const file = imageUpload.files[0];
+            if (!file) {
+                showToast("Lütfen bir görsel dosyası seçin.", "warning");
+                return;
+            }
+            if (!model) {
+                showToast("Model henüz yüklenmedi. Lütfen bekleyin.", "error");
+                return;
+            }
+            // Önceki görüntüyü temizle ve yükleme göstergesini göster
+            document.getElementById("media-container").innerHTML = '';
+            document.getElementById("loadingSpinner").classList.remove('hidden');
+            clearLabelContainer();
+            const reader = new FileReader();
+            reader.onload = async (e) => {
+                const img = new Image();
+                img.onload = async () => {
+                    document.getElementById("media-container").innerHTML = '';
+                    document.getElementById("media-container").appendChild(img);
+                    await predict(img); // Görsel üzerinde tahmin yap
+                    document.getElementById("loadingSpinner").classList.add('hidden');
+                };
+                img.onerror = () => {
+                    console.error("Görsel yüklenirken hata oluştu.");
+                    document.getElementById("loadingSpinner").classList.add('hidden');
+                    if (labelContainer) {
+                        labelContainer.querySelector('div.space-y-3').innerHTML = '<div class="text-red-500">Hata: Görsel yüklenemedi.</div>';
+                    }
+                };
+                img.src = e.target.result;
+            };
+            reader.readAsDataURL(file); // Dosyayı base64 string olarak oku
+        }
+        // Tahmin yapma fonksiyonu (hem kanvas hem de görsel için)
+        async function predict(inputElement) {
+            if (model && inputElement) {
+                const prediction = await model.predict(inputElement);
+                // Her sınıf için tahmin sonuçlarını göster
+                const resultDivs = labelContainer.querySelectorAll('div.space-y-3 > div');
+                for (let i = 0; i < maxPredictions; i++) {
+                    const probability = prediction[i].probability.toFixed(2);
+                    const percentage = Math.round(probability * 100);
+                    // Create a progress bar
+                    const progressBar = `
+                        <div class="w-full bg-gray-200 rounded-full h-2.5 mt-1">
+                            <div class="bg-blue-600 h-2.5 rounded-full" style="width: ${percentage}%"></div>
+                        </div>
+                    `;
+                    resultDivs[i].innerHTML = `
+                        <div class="flex justify-between items-center">
+                            <span class="font-medium">${prediction[i].className}:</span>
+                            <span class="font-semibold">${percentage}%</span>
+                        </div>
+                        ${progressBar}
+                    `;
+                }
+            }
+        }
+        // Kamerayı durdurma fonksiyonu
+        function stopWebcam() {
+            if (isWebcamActive && webcam) {
+                webcam.stop();
+                window.cancelAnimationFrame(loopId);
+                isWebcamActive = false;
+                console.log("Kamera durduruldu.");
+            }
+        }
+        // Etiket kapsayıcısını temizleme fonksiyonu
+        function clearLabelContainer() {
+            if (labelContainer) {
+                const resultDivs = labelContainer.querySelectorAll('div.space-y-3 > div');
+                resultDivs.forEach(div => {
+                    div.innerHTML = '';
+                });
+            }
+        }
+        // Toast mesajı gösterme fonksiyonu
+        function showToast(message, type = 'info') {
+            const colors = {
+                info: 'bg-blue-500',
+                warning: 'bg-yellow-500',
+                error: 'bg-red-500',
+                success: 'bg-green-500'
+            };
+            const toast = document.createElement('div');
+            toast.className = `fixed bottom-4 right-4 text-white px-4 py-2 rounded-lg shadow-lg ${colors[type]} animate-fade-in`;
+            toast.textContent = message;
+            document.body.appendChild(toast);
+            setTimeout(() => {
+                toast.classList.remove('animate-fade-in');
+                toast.classList.add('animate-fade-out');
+                setTimeout(() => {
+                    toast.remove();
+                }, 300);
+            }, 3000);
+        }
+    </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=yusra21/teachable-machine" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>