Spaces:
Running
Running
<!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"> <!-- Kamera görüntüsü veya yüklenen görsel buraya gelecek --> </div> <!-- Yükleniyor göstergesi media-container dışına taşındı --> <div class="loading-spinner" id="loadingSpinner"></div> <div id="label-container"></div> <!-- TensorFlow.js ve Teachable Machine kütüphaneleri --> <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
1c5bb0e
verified
| <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> |