... User modified the `new_string` content to be: AI 동물상 테스트 | 인공지능이 분석하는 나의 얼굴상
🏠 홈으로

🐶 AI 동물상 테스트 🐱

사진을 업로드하여 나의 동물상 찾기

분석할 사진을 업로드해주세요!

🧬 AI 동물상 테스트의 원리

본 서비스는 구글의 'Teachable Machine' 기술을 기반으로 구축되었습니다. 수만 장의 강아지와 고양이 데이터를 학습한 인공지능 모델이 사용자의 얼굴 특징점을 추출하여 실시간으로 비교 분석합니다. 눈의 각도, 입매, 전체적인 얼굴형을 종합적으로 고려하여 가장 높은 일치율을 보이는 동물상을 도출합니다.

🐕 강아지상과 고양이상의 특징

강아지상: 일반적으로 부드러운 인상과 둥근 눈매를 가지고 있어 친근하고 선한 느낌을 줍니다. 많은 사람들에게 호감을 주는 대표적인 인상입니다.

고양이상: 눈꼬리가 살짝 올라가 있고 날카로운 듯하면서도 세련된 분위기를 풍깁니다. 매혹적이고 이지적인 매력을 가진 경우가 많습니다.

🔒 데이터 보안 안내

사용자가 업로드한 이미지는 서버로 전송되지 않습니다. 모든 분석 과정은 사용자의 브라우저 내부(Client-side)에서 처리되므로, 소중한 얼굴 데이터가 외부로 유출될 걱정 없이 안심하고 테스트를 즐기실 수 있습니다.

※ 업로드된 사진은 서버에 저장되지 않으며, 브라우저에서 즉시 분석됩니다.

... const URL = "https://teachablemachine.withgoogle.com/models/Csu6wKHGU/"; let model, labelContainer, maxPredictions; // Load the model on page load async function loadModel() { const modelURL = URL + "model.json"; const metadataURL = URL + "metadata.json"; model = await tmImage.load(modelURL, metadataURL); maxPredictions = model.getTotalClasses(); } loadModel(); async function handleImageUpload(event) { const input = event.target; if (input.files && input.files[0]) { const reader = new FileReader(); const loadingText = document.getElementById("loading-text"); const faceImage = document.getElementById("face-image"); loadingText.innerHTML = "분석 중..."; reader.onload = async function(e) { faceImage.src = e.target.result; faceImage.style.display = "block"; loadingText.style.display = "none"; // Wait for image to load before predicting faceImage.onload = async function() { await predict(); }; }; reader.readAsDataURL(input.files[0]); } } async function predict() { if (!model) await loadModel(); const faceImage = document.getElementById("face-image"); const prediction = await model.predict(faceImage); labelContainer = document.getElementById("label-container"); labelContainer.innerHTML = ""; for (let i = 0; i < maxPredictions; i++) { const probability = (prediction[i].probability * 100).toFixed(0); const barContainer = document.createElement("div"); barContainer.className = "prediction-bar-container"; const label = document.createElement("span"); label.className = "prediction-label"; label.innerHTML = `${prediction[i].className}: ${probability}%`; const barWrapper = document.createElement("div"); barWrapper.className = "bar-wrapper"; const bar = document.createElement("div"); bar.className = "bar"; bar.style.width = probability + "%"; // Highlight the highest probability if (probability > 50) { bar.style.backgroundColor = "var(--accent-color)"; } else { bar.style.backgroundColor = "#ccc"; } barWrapper.appendChild(bar); barContainer.appendChild(label); barContainer.appendChild(barWrapper); labelContainer.appendChild(barContainer); } } // Theme toggle support const themeToggle = document.getElementById('theme-toggle'); const html = document.documentElement; const savedTheme = localStorage.getItem('theme') || 'light'; html.setAttribute('data-theme', savedTheme); themeToggle.addEventListener('click', () => { const currentTheme = html.getAttribute('data-theme'); const newTheme = currentTheme === 'light' ? 'dark' : 'light'; html.setAttribute('data-theme', newTheme); localStorage.setItem('theme', newTheme); themeToggle.textContent = newTheme === 'light' ? '🌙 다크 모드' : '☀️ 라이트 모드'; }); themeToggle.textContent = savedTheme === 'light' ? '🌙 다크 모드' : '☀️ 라이트 모드';