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