GreenTalk

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>GreenTalk</title> <meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src 'self' data: blob:; media-src 'self' blob:; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline'; connect-src 'none'; frame-ancestors 'none'; base-uri 'none'; form-action 'none'"> <meta http-equiv="Permissions-Policy" content="camera=(self), microphone=(self), geolocation=(), usb=(), fullscreen=(), payment=(), xr-spatial-tracking=()"> <style> :root{ --bg0:#e8fff1; --bg1:#f7fffb; --panel:rgba(255,255,255,.82); --panel2:rgba(255,255,255,.66); --ink:rgba(9,24,16,.92); --muted:rgba(9,24,16,.64); --line:rgba(9,24,16,.12); --acc:#19b56b; --acc2:#0e8c52; --warn:#d97706; --bad:#dc2626; --ok:#16a34a; --r:20px; --r2:14px; --sh:0 22px 70px rgba(2,6,23,.14); --sh2:0 10px 26px rgba(2,6,23,.10); --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Apple SD Gothic Neo","Noto Sans","Noto Sans KR",sans-serif; --focus: 0 0 0 4px rgba(25,181,107,.20), 0 10px 26px rgba(2,6,23,.10); } *{ box-sizing:border-box; } html,body{ height:100%; } body{ margin:0; font-family:var(--sans); color:var(--ink); background: radial-gradient(1000px 560px at 12% -10%, rgba(25,181,107,.18), transparent 55%), radial-gradient(900px 560px at 108% 18%, rgba(34,197,94,.14), transparent 60%), linear-gradient(180deg,var(--bg0),var(--bg1)); transition: background .45s ease; } @media (prefers-reduced-motion: reduce){ *{ scroll-behavior:auto !important; transition:none !important; animation:none !important; } } .wrap{ max-width:980px; margin:0 auto; padding:18px 16px 26px; } .hero{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:16px 16px 12px; border-radius:var(--r); background:linear-gradient(135deg, rgba(255,255,255,.76), rgba(255,255,255,.54)); box-shadow:var(--sh2); border:1px solid rgba(255,255,255,.55); backdrop-filter: blur(12px); } .title{ min-width:0; } h1{ margin:2px 0 6px; font-size:1.6rem; line-height:1.12; letter-spacing:-0.02em; font-weight:900; } .sub{ margin:0; color:var(--muted); line-height:1.35; font-size:.98rem; } .badge{ flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:999px; background:rgba(25,181,107,.12); border:1px solid rgba(25,181,107,.22); color:rgba(9,24,16,.78); font-weight:900; font-size:.9rem; white-space:nowrap; user-select:none; } .dot{ width:10px;height:10px;border-radius:999px;background:var(--acc); box-shadow:0 0 0 6px rgba(25,181,107,.18); } .topbar{ margin-top:12px; display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; } .pill{ display:inline-flex; align-items:center; gap:8px; padding:9px 10px; border-radius:999px; border:1px solid rgba(9,24,16,.12); background:rgba(255,255,255,.66); color:rgba(9,24,16,.78); font-weight:900; font-size:.9rem; user-select:none; } .lang{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .select{ appearance:none; border:1px solid rgba(9,24,16,.14); background:rgba(255,255,255,.82); color:var(--ink); border-radius:14px; padding:10px 12px; font-weight:900; cursor:pointer; box-shadow:0 10px 24px rgba(2,6,23,.08); outline:none; } .select:focus{ box-shadow:var(--focus); border-color:rgba(25,181,107,.38); } .grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:14px; margin-top:14px; } @media (max-width:900px){ .grid{ grid-template-columns:1fr; } .badge{ display:none; } } .card{ border-radius:var(--r); background:var(--panel); border:1px solid rgba(255,255,255,.62); box-shadow:var(--sh); backdrop-filter: blur(14px); overflow:hidden; } .card-h{ padding:14px 14px 10px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:10px; } .card-h .h{ font-weight:950; letter-spacing:-0.01em; } .card-h .mini{ color:var(--muted); font-size:.92rem; } .card-b{ padding:14px; } .videoWrap{ position:relative; border-radius:var(--r2); overflow:hidden; background:rgba(9,24,16,.06); border:1px solid rgba(9,24,16,.08); } video{ width:100%; height:auto; display:block; max-height:380px; object-fit:cover; background:#000; } canvas{ display:none; } .row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:12px; } .btn{ appearance:none; border:1px solid rgba(9,24,16,.14); background:rgba(255,255,255,.84); color:var(--ink); border-radius:14px; padding:11px 12px; font-weight:950; cursor:pointer; box-shadow:0 10px 24px rgba(2,6,23,.10); transition: transform .08s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; user-select:none; outline:none; } .btn:active{ transform:translateY(1px); } .btn:focus{ box-shadow:var(--focus); border-color:rgba(25,181,107,.38); } .btn.primary{ background:linear-gradient(135deg, rgba(25,181,107,.95), rgba(14,140,82,.95)); color:#fff; border-color:rgba(25,181,107,.35); } .btn.ghost{ background:rgba(255,255,255,.72); } .btn.danger{ background:rgba(220,38,38,.10); border-color:rgba(220,38,38,.25); color:rgba(145,20,20,.95); } .btn.warn{ background:rgba(217,119,6,.12); border-color:rgba(217,119,6,.26); color:rgba(120,53,15,.95); } .btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; } .input{ width:100%; padding:12px 12px; border-radius:14px; border:1px solid rgba(9,24,16,.16); background:rgba(255,255,255,.84); outline:none; font-size:1rem; box-shadow:0 10px 24px rgba(2,6,23,.08); } .input:focus{ border-color:rgba(25,181,107,.45); box-shadow:var(--focus); } .box{ margin-top:12px; padding:12px 12px; border-radius:14px; background:rgba(255,255,255,.76); border:1px solid rgba(9,24,16,.10); color:rgba(9,24,16,.88); white-space:pre-line; line-height:1.4; } .box.mono{ font-family:var(--mono); font-size:.93rem; color:rgba(9,24,16,.82); } .hint{ color:var(--muted); font-size:.92rem; line-height:1.45; margin-top:10px; } .sr{ position:absolute; left:-9999px; width:1px;height:1px; overflow:hidden; } .tog{ display:inline-flex; align-items:center; gap:8px; padding:9px 10px; border-radius:999px; border:1px solid rgba(9,24,16,.12); background:rgba(255,255,255,.66); color:rgba(9,24,16,.78); font-weight:950; cursor:pointer; user-select:none; outline:none; } .tog:focus{ box-shadow:var(--focus); } .sliderWrap{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px; padding:10px 10px; border-radius:14px; background:rgba(255,255,255,.66); border:1px solid rgba(9,24,16,.10); } .range{ width: 180px; accent-color: var(--acc); } .kv{ font-weight:900; color:rgba(9,24,16,.80); } footer{ margin-top:14px; padding:14px 14px; border-radius:var(--r); background:rgba(255,255,255,.72); border:1px solid rgba(9,24,16,.10); color:rgba(9,24,16,.74); line-height:1.5; font-size:.92rem; } body[data-theme="dark"]{ --bg0:#03140c; --bg1:#061a12; --panel:rgba(12,26,18,.72); --panel2:rgba(12,26,18,.58); --ink:rgba(236,253,245,.92); --muted:rgba(236,253,245,.62); --line:rgba(236,253,245,.16); --sh:0 22px 70px rgba(0,0,0,.45); --sh2:0 10px 26px rgba(0,0,0,.35); } body[data-theme="dark"] .hero{ background:linear-gradient(135deg, rgba(12,26,18,.72), rgba(12,26,18,.52)); border:1px solid rgba(236,253,245,.12); } body[data-theme="dark"] .badge{ background:rgba(25,181,107,.16); border-color:rgba(25,181,107,.26); } body[data-theme="dark"] .videoWrap{ background:rgba(236,253,245,.06); border-color:rgba(236,253,245,.10); } </style> </head> <body> <div class="wrap"> <div class="hero"> <div class="title"> <h1 id="t_title">GreenTalk</h1> <p class="sub" id="t_sub">A gentle, browser-only experience that turns plant visuals and your message into comforting words.</p> </div> <div class="badge" aria-hidden="true"><span class="dot"></span>On-device • No uploads</div> </div> <div class="topbar"> <div class="lang"> <label for="langSel" class="pill" id="t_langLabel">Language</label> <select id="langSel" class="select" aria-label="Language selector"> <option value="en" selected>English</option> <option value="ko">한국어</option> <option value="ja">日本語</option> <option value="es">Español</option> <option value="fr">Français</option> <option value="de">Deutsch</option> <option value="zh">中文</option> </select> <button class="tog" id="btnTheme" type="button">🌙 <span id="t_theme">Theme</span></button> </div> <div class="pill" id="hc7-privacy">Privacy: Local-only</div> </div> <div class="grid"> <section class="card" aria-label="Camera and analysis"> <div class="card-h"> <div> <div class="h" id="t_camH">Camera</div> <div class="mini" id="t_camMini">Point at a plant, then analyze a frame.</div> </div> <div class="pill" id="hc7-camState">Camera: Off</div> </div> <div class="card-b"> <div class="videoWrap"> <video id="plantCam" autoplay muted playsinline></video> <canvas id="snap" width="360" height="270"></canvas> </div> <div class="row"> <button class="btn primary" id="btn-start-cam" type="button">Start camera</button> <button class="btn ghost" id="btn-stop-cam" type="button">Stop camera</button> <button class="btn" id="btn-analyze" type="button">Analyze mood</button> <button class="btn" id="btn-multi" type="button">Analyze 3 zones</button> </div> <div class="box" id="result" role="status" aria-live="polite">Ready when you are. Start the camera to begin.</div> <div class="box mono" id="network" style="display:none;" role="status" aria-live="polite"></div> <div class="hint" id="t_note"> This app runs on-device (no uploads). The mood result is a creative color-based heuristic for emotional storytelling, not a plant-health diagnosis. Camera/microphone require your permission. If you are sensitive to audio, keep volume low or disable sound. </div> </div> </section> <aside class="card" aria-label="Plant dialogue and audio"> <div class="card-h"> <div> <div class="h" id="t_dialogH">Plant dialogue</div> <div class="mini" id="t_dialogMini">Say something, then receive a gentle reply.</div> </div> <div class="pill" id="hc7-audioState">Audio: Idle</div> </div> <div class="card-b"> <label class="sr" for="userInput">Message to your plant</label> <input id="userInput" class="input" type="text" inputmode="text" autocomplete="off" placeholder="Type a message to your plant..." /> <div class="row"> <button class="btn" id="btn-plant-hear" type="button">Hear a reply</button> </div> <div class="sliderWrap"> <span class="kv" id="t_vol">Chime volume</span> <input id="vol" class="range" type="range" min="0" max="18" value="8" /> <span class="kv" id="volVal">8%</span> </div> <div class="row"> <button class="btn warn" id="btn-chime" type="button">Play gentle chime</button> <button class="btn danger" id="btn-stop-audio" type="button">Stop audio</button> </div> <div class="row"> <button class="btn" id="btn-listen" type="button">Listen (mic)</button> <button class="btn" id="btn-stop-listen" type="button" disabled>Stop listening</button> </div> <div class="box" id="user-response" role="status" aria-live="polite">Your plant’s reply will appear here.</div> <footer id="t_footer"> © 2026 Happycode7. All rights reserved.<br> No unauthorized copying, modification, or redistribution without permission.<br> Not for medical, safety-critical, or plant growth diagnosis purposes.<br> You are responsible for how you use the software. </footer> </div> </aside> </div> </div> <script> (function(){ "use strict"; var $ = function(id){ return document.getElementById(id); }; var camStateEl = $("hc7-camState"); var audioStateEl = $("hc7-audioState"); var i18n = { en: { title: "GreenTalk", sub: "A gentle, browser-only experience that turns plant visuals and your message into comforting words.", langLabel:"Language", theme:"Theme", camH: "Camera", camMini: "Point at a plant, then analyze a frame.", dialogH: "Plant dialogue", dialogMini: "Say something, then receive a gentle reply.", btnStart: "Start camera", btnStop: "Stop camera", btnAnalyze: "Analyze mood", btnMulti: "Analyze 3 zones", placeholder: "Type a message to your plant...", hear: "Hear a reply", vol:"Chime volume", chime:"Play gentle chime", stopAudio:"Stop audio", listen:"Listen (mic)", stopListen:"Stop listening", ready: "Ready when you are. Start the camera to begin.", note: "This app runs on-device (no uploads). The mood result is a creative color-based heuristic for emotional storytelling, not a plant-health diagnosis. Camera/microphone require your permission. If you are sensitive to audio, keep volume low or disable sound.", camOn: "Camera: On", camOff: "Camera: Off", audioIdle: "Audio: Idle", audioPlaying: "Audio: Playing", audioListening: "Audio: Listening", tipLighting: "Tip: Try different lighting for a different “story.”", startFirst: "Start the camera first.", camDenied: "Camera permission was denied or the camera isn’t available.", camNoSupport: "This browser doesn’t support camera access.", frameFail: "Frame capture failed. Some in-app browsers restrict camera rendering.", micNoSupport: "This browser doesn’t support microphone access.", micNeed: "Microphone permission is required. Please allow it in your browser.", listeningTimeout: "Listening timed out. Try again in a quiet place.", needAnalyze: "Analyze a mood first, then ask again.", typeFirst: "Type a message first.", chimePlaying:"Playing a gentle chime at low volume…", audioStopped:"Audio stopped.", zoneTitle: "3-zone plant mood scan", zone: "Zone ", care: "Suggested care: ", mood: "Mood: ", plantReply: "Plant reply:", privacy: "Privacy: Local-only", darkOn:"Dark on", darkOff:"Dark off" }, ko: { title: "GreenTalk", sub: "식물의 색감과 당신의 문장을 따뜻한 말로 바꿔주는, 브라우저 단독 실행 도구입니다.", langLabel:"언어", theme:"테마", camH: "카메라", camMini: "식물을 비춘 뒤 프레임을 분석해 보세요.", dialogH: "식물 대화", dialogMini: "메시지를 남기고, 부드러운 답장을 받아보세요.", btnStart: "카메라 시작", btnStop: "카메라 정지", btnAnalyze: "무드 분석", btnMulti: "3구역 분석", placeholder: "식물에게 전할 말을 입력하세요...", hear: "답장 받기", vol:"차임 볼륨", chime:"부드러운 차임 재생", stopAudio:"오디오 중지", listen:"듣기 (마이크)", stopListen:"듣기 중지", ready: "준비되면 시작하세요. 카메라를 켜면 됩니다.", note: "이 앱은 로컬에서만 동작하며(업로드 없음), 무드 결과는 색상 기반의 창작적 해석입니다(진단 목적 아님). 카메라/마이크는 권한이 필요합니다. 오디오에 민감하다면 볼륨을 낮추거나 소리를 꺼 주세요.", camOn: "카메라: 켜짐", camOff: "카메라: 꺼짐", audioIdle: "오디오: 대기", audioPlaying: "오디오: 재생", audioListening: "오디오: 듣는 중", tipLighting: "팁: 조명에 따라 다른 ‘이야기’로 바뀔 수 있어요.", startFirst: "먼저 카메라를 시작해 주세요.", camDenied: "카메라 권한이 거부되었거나 카메라를 사용할 수 없습니다.", camNoSupport: "이 브라우저는 카메라를 지원하지 않습니다.", frameFail: "프레임 캡처에 실패했습니다. 일부 인앱 브라우저는 제한이 있을 수 있어요.", micNoSupport: "이 브라우저는 마이크를 지원하지 않습니다.", micNeed: "마이크 권한이 필요합니다. 브라우저에서 허용해 주세요.", listeningTimeout: "시간이 초과되었습니다. 조용한 곳에서 다시 시도해 주세요.", needAnalyze: "먼저 무드 분석을 한 뒤에 다시 시도해 주세요.", typeFirst: "메시지를 먼저 입력해 주세요.", chimePlaying:"낮은 볼륨으로 부드러운 차임을 재생하는 중…", audioStopped:"오디오를 중지했습니다.", zoneTitle: "3구역 식물 무드 스캔", zone: "구역 ", care: "권장 케어: ", mood: "무드: ", plantReply: "식물의 답장:", privacy: "프라이버시: 로컬 전용", darkOn:"다크 켜짐", darkOff:"다크 꺼짐" }, ja: { title: "GreenTalk", sub: "植物の色合いとあなたの言葉を、やさしいメッセージに変えるブラウザ完結ツールです。", langLabel:"言語", theme:"テーマ", camH: "カメラ", camMini: "植物に向けて、フレームを解析してください。", dialogH: "植物との会話", dialogMini: "言葉をかけて、やさしい返事を受け取りましょう。", btnStart: "カメラ開始", btnStop: "カメラ停止", btnAnalyze: "ムード解析", btnMulti: "3ゾーン解析", placeholder: "植物に伝えるメッセージを入力...", hear: "返事を受け取る", vol:"チャイム音量", chime:"やさしいチャイム再生", stopAudio:"オーディオ停止", listen:"聴く (マイク)", stopListen:"聴取停止", ready: "準備ができたら、カメラを開始してください。", note: "このアプリは端末内で動作します（アップロードなし）。ムード結果は色にもとづく創作的な解釈で、診断ではありません。カメラ/マイクは許可が必要です。音に敏感な場合は音量を下げるか無効にしてください。", camOn: "カメラ: ON", camOff: "カメラ: OFF", audioIdle: "オーディオ: 待機", audioPlaying: "オーディオ: 再生", audioListening: "オーディオ: 受信中", tipLighting: "ヒント: 照明で“物語”が変わります。", startFirst: "先にカメラを開始してください。", camDenied: "カメラ許可が拒否されたか、利用できません。", camNoSupport: "このブラウザはカメラに対応していません。", frameFail: "キャプチャに失敗しました。アプリ内ブラウザでは制限がある場合があります。", micNoSupport: "このブラウザはマイクに対応していません。", micNeed: "マイク許可が必要です。ブラウザで許可してください。", listeningTimeout: "タイムアウトしました。静かな場所で再試行してください。", needAnalyze: "先にムード解析をしてからもう一度お試しください。", typeFirst: "先にメッセージを入力してください。", chimePlaying:"低音量でやさしいチャイムを再生中…", audioStopped:"オーディオを停止しました。", zoneTitle: "3ゾーンムードスキャン", zone: "ゾーン ", care: "おすすめケア: ", mood: "ムード: ", plantReply: "植物の返事:", privacy: "プライバシー: ローカルのみ", darkOn:"ダークON", darkOff:"ダークOFF" }, es: { title: "GreenTalk", sub: "Una experiencia suave, solo en tu navegador, que convierte la imagen de tu planta y tu mensaje en palabras reconfortantes.", langLabel:"Idioma", theme:"Tema", camH: "Cámara", camMini: "Apunta a una planta y analiza un fotograma.", dialogH: "Diálogo con tu planta", dialogMini: "Dile algo y recibe una respuesta suave.", btnStart: "Iniciar cámara", btnStop: "Detener cámara", btnAnalyze: "Analizar ánimo", btnMulti: "Analizar 3 zonas", placeholder: "Escribe un mensaje para tu planta...", hear: "Recibir respuesta", vol:"Volumen del timbre", chime:"Reproducir timbre suave", stopAudio:"Detener audio", listen:"Escuchar (mic)", stopListen:"Dejar de escuchar", ready: "Cuando quieras. Inicia la cámara para comenzar.", note: "Esta app funciona en tu dispositivo (sin subidas). El ánimo es una heurística creativa basada en color, no un diagnóstico. Cámara/micrófono requieren permiso. Si eres sensible al audio, mantén el volumen bajo o desactívalo.", camOn: "Cámara: ON", camOff: "Cámara: OFF", audioIdle: "Audio: Inactivo", audioPlaying: "Audio: Reproduciendo", audioListening: "Audio: Escuchando", tipLighting: "Consejo: Cambia la luz para obtener otra “historia”.", startFirst: "Primero inicia la cámara.", camDenied: "Permiso de cámara denegado o la cámara no está disponible.", camNoSupport: "Este navegador no admite cámara.", frameFail: "Falló la captura. Algunos navegadores integrados limitan el render de cámara.", micNoSupport: "Este navegador no admite micrófono.", micNeed: "Se requiere permiso de micrófono. Actívalo en tu navegador.", listeningTimeout: "Se agotó el tiempo. Inténtalo en un lugar silencioso.", needAnalyze: "Primero analiza el ánimo y luego vuelve a intentar.", typeFirst: "Primero escribe un mensaje.", chimePlaying:"Reproduciendo un timbre suave a bajo volumen…", audioStopped:"Audio detenido.", zoneTitle: "Escaneo de ánimo en 3 zonas", zone: "Zona ", care: "Cuidado sugerido: ", mood: "Ánimo: ", plantReply: "Respuesta de la planta:", privacy: "Privacidad: Solo local", darkOn:"Oscuro ON", darkOff:"Oscuro OFF" }, fr: { title:"GreenTalk", sub:"Une expérience douce, uniquement dans votre navigateur, qui transforme l’image de votre plante et votre message en mots réconfortants.", langLabel:"Langue", theme:"Thème", camH:"Caméra", camMini:"Pointez une plante, puis analysez une image.", dialogH:"Dialogue avec la plante", dialogMini:"Dites quelque chose et recevez une réponse douce.", btnStart:"Démarrer la caméra", btnStop:"Arrêter la caméra", btnAnalyze:"Analyser l’humeur", btnMulti:"Analyser 3 zones", placeholder:"Écrivez un message à votre plante...", hear:"Recevoir une réponse", vol:"Volume du carillon", chime:"Jouer un carillon doux", stopAudio:"Arrêter l’audio", listen:"Écouter (micro)", stopListen:"Arrêter l’écoute", ready:"Quand vous voulez. Démarrez la caméra pour commencer.", note:"Cette app fonctionne sur l’appareil (sans envoi). Le résultat est une interprétation créative basée sur la couleur, pas un diagnostic. Caméra/micro nécessitent une autorisation. Si vous êtes sensible au son, baissez le volume ou désactivez-le.", camOn:"Caméra: ON", camOff:"Caméra: OFF", audioIdle:"Audio: Inactif", audioPlaying:"Audio: Lecture", audioListening:"Audio: Écoute", tipLighting:"Astuce: Essayez un autre éclairage pour une autre “histoire”.", startFirst:"Démarrez d’abord la caméra.", camDenied:"Autorisation caméra refusée ou caméra indisponible.", camNoSupport:"Ce navigateur ne prend pas en charge la caméra.", frameFail:"Capture impossible. Certains navigateurs intégrés limitent la caméra.", micNoSupport:"Ce navigateur ne prend pas en charge le micro.", micNeed:"Autorisation micro requise. Veuillez l’autoriser.", listeningTimeout:"Temps écoulé. Réessayez dans un endroit calme.", needAnalyze:"Analysez d’abord l’humeur, puis réessayez.", typeFirst:"Écrivez d’abord un message.", chimePlaying:"Lecture d’un carillon doux à faible volume…", audioStopped:"Audio arrêté.", zoneTitle:"Scan d’humeur en 3 zones", zone:"Zone ", care:"Soin suggéré: ", mood:"Humeur: ", plantReply:"Réponse de la plante:", privacy:"Confidentialité: Local uniquement", darkOn:"Sombre ON", darkOff:"Sombre OFF" }, de: { title:"GreenTalk", sub:"Eine sanfte, rein browserbasierte Erfahrung, die Pflanzenbild und Nachricht in tröstende Worte verwandelt.", langLabel:"Sprache", theme:"Thema", camH:"Kamera", camMini:"Auf eine Pflanze richten und ein Bild analysieren.", dialogH:"Pflanzen-Dialog", dialogMini:"Sag etwas und erhalte eine sanfte Antwort.", btnStart:"Kamera starten", btnStop:"Kamera stoppen", btnAnalyze:"Stimmung analysieren", btnMulti:"3 Zonen analysieren", placeholder:"Schreibe eine Nachricht an deine Pflanze...", hear:"Antwort erhalten", vol:"Klanglautstärke", chime:"Sanften Klang abspielen", stopAudio:"Audio stoppen", listen:"Hören (Mikro)", stopListen:"Hören stoppen", ready:"Bereit, wenn du es bist. Starte die Kamera.", note:"Diese App läuft lokal (keine Uploads). Das Ergebnis ist eine kreative, farbbasierte Interpretation – keine Diagnose. Kamera/Mikro brauchen Berechtigung. Wenn du empfindlich bist, Lautstärke niedrig halten oder Ton aus.", camOn:"Kamera: An", camOff:"Kamera: Aus", audioIdle:"Audio: Leerlauf", audioPlaying:"Audio: Wiedergabe", audioListening:"Audio: Hört zu", tipLighting:"Tipp: Anderes Licht, andere „Story“.", startFirst:"Starte zuerst die Kamera.", camDenied:"Kameraberechtigung verweigert oder Kamera nicht verfügbar.", camNoSupport:"Dieser Browser unterstützt keine Kamera.", frameFail:"Frame-Capture fehlgeschlagen. Manche In-App-Browser sind eingeschränkt.", micNoSupport:"Dieser Browser unterstützt kein Mikrofon.", micNeed:"Mikrofonberechtigung erforderlich.", listeningTimeout:"Zeit abgelaufen. Bitte in ruhiger Umgebung erneut versuchen.", needAnalyze:"Erst Stimmung analysieren, dann erneut.", typeFirst:"Bitte zuerst eine Nachricht eingeben.", chimePlaying:"Sanfter Klang bei niedriger Lautstärke…", audioStopped:"Audio gestoppt.", zoneTitle:"3-Zonen Stimmungs-Scan", zone:"Zone ", care:"Empfohlene Pflege: ", mood:"Stimmung: ", plantReply:"Pflanzenantwort:", privacy:"Privatsphäre: Nur lokal", darkOn:"Dunkel An", darkOff:"Dunkel Aus" }, zh: { title:"GreenTalk", sub:"温柔的纯浏览器体验：把植物画面与您的话语，变成安慰的文字（本地运行，不上传）。", langLabel:"语言", theme:"主题", camH:"相机", camMini:"对准植物，然后分析画面。", dialogH:"植物对话", dialogMini:"说点什么，获得温柔回应。", btnStart:"开启相机", btnStop:"关闭相机", btnAnalyze:"分析氛围", btnMulti:"分析 3 个区域", placeholder:"给植物写一句话…", hear:"获得回复", vol:"铃声音量", chime:"播放温柔铃声", stopAudio:"停止音频", listen:"聆听（麦克风）", stopListen:"停止聆听", ready:"准备好就开始吧。先开启相机。", note:"本应用在设备本地运行（不上传）。结果为基于颜色的创意叙事启发，并非诊断。相机/麦克风需要授权。对声音敏感请调低音量或关闭。", camOn:"相机：开", camOff:"相机：关", audioIdle:"音频：空闲", audioPlaying:"音频：播放中", audioListening:"音频：聆听中", tipLighting:"提示：不同光线会产生不同“故事”。", startFirst:"请先开启相机。", camDenied:"相机权限被拒绝或相机不可用。", camNoSupport:"此浏览器不支持相机。", frameFail:"截帧失败，部分内置浏览器可能受限。", micNoSupport:"此浏览器不支持麦克风。", micNeed:"需要麦克风权限，请在浏览器中允许。", listeningTimeout:"聆听超时，请在安静环境重试。", needAnalyze:"请先分析氛围，再继续。", typeFirst:"请先输入消息。", chimePlaying:"正在以低音量播放温柔铃声…", audioStopped:"已停止音频。", zoneTitle:"三段区域氛围扫描", zone:"区域 ", care:"建议照护：", mood:"氛围：", plantReply:"植物回复：", privacy:"隐私：仅本地", darkOn:"深色：开", darkOff:"深色：关" } }; var emotionMap = { thriving: { title:"Vibrant", text:"Your plant looks bright and lively—like it’s saying “I’m here with you.”", bg:"#dbffe3", need:"Keep the environment steady and gentle." }, blooming: { title:"Blooming", text:"There’s an open, growing energy here—soft and hopeful.", bg:"#f0fff6", need:"Light and hydration seem to be working well." }, calm: { title:"Calm", text:"Quiet growth. Nothing to prove—just steady presence.", bg:"#eafff0", need:"Maintain this peaceful rhythm." }, alert: { title:"Alert", text:"Something feels different in the air—your plant is paying attention.", bg:"#fff4cc", need:"Check for sudden changes in light or airflow." }, shocked: { title:"Startled", text:"A sudden shift—like a flinch. It wants calm again.", bg:"#ffe0d6", need:"Reduce harsh light and let it settle." }, wilted: { title:"Tired", text:"It looks a little worn, as if it’s asking for a slower pace today.", bg:"#efe7e2", need:"Review watering and overall stress." }, parched: { title:"Thirsty", text:"Dryness is speaking loudly—like “please, a sip of care.”", bg:"#ffe1e1", need:"If appropriate, water and check humidity." }, overwatered:{ title:"Heavy", text:"Too much water can feel like weight. It wants breathing room.", bg:"#d9fff3", need:"Pause watering and ensure drainage." }, sunburned: { title:"Sun-warm", text:"That light might be a bit intense—gentle shade could help.", bg:"#ffd8de", need:"Avoid direct harsh sunlight." }, freezing: { title:"Cold", text:"It feels chilly—like it’s pulling inward for warmth.", bg:"#d6f2ff", need:"Warm the space slightly and avoid drafts." }, lonely: { title:"Lonely", text:"It’s quietly waiting for you—presence matters.", bg:"#ece3ff", need:"Talk to it, even softly." }, loved: { title:"Loved", text:"It feels your attention—like a warm hand on the day.", bg:"#ffe3f0", need:"Keep showing up. Small care counts." }, growingSlow:{ title:"Slow", text:"Progress is slow, but it’s still progress.", bg:"#f6ffe0", need:"Check pot size, nutrition, or light balance." } }; var comfortReplies = [ "You did enough today. Let the rest wait.", "Breathe. Your pace is allowed to be gentle.", "Even quiet days are real progress.", "You’re not behind—you’re becoming.", "If today felt heavy, you don’t have to carry it alone.", "Small care is still care. It counts.", "You are allowed to rest without earning it.", "Your soft heart is not a weakness.", "I’m here with you—one leaf, one breath at a time.", "The morning always returns, even after a long night." ]; var mediaStream = null; var audioCtx = null; var masterGain = null; var limiter = null; var activeNodes = []; var micStream = null; var micRAF = null; var curLang = "en"; var theme = "light"; function t(key){ var dict = i18n[curLang] || i18n.en; return dict[key] || (i18n.en[key] || ""); } function safeText(el, txt){ if(!el) return; el.textContent = String(txt == null ? "" : txt); } function setCamState(on){ safeText(camStateEl, on ? t("camOn") : t("camOff")); } function setAudioState(mode){ if(!audioStateEl) return; if(mode === "idle") safeText(audioStateEl, t("audioIdle")); else if(mode === "playing") safeText(audioStateEl, t("audioPlaying")); else if(mode === "listening") safeText(audioStateEl, t("audioListening")); else safeText(audioStateEl, String(mode || "")); } function applyLang(lang){ curLang = (i18n[lang] ? lang : "en"); $("langSel").value = curLang; safeText($("t_title"), t("title")); safeText($("t_sub"), t("sub")); safeText($("t_camH"), t("camH")); safeText($("t_camMini"), t("camMini")); safeText($("t_dialogH"), t("dialogH")); safeText($("t_dialogMini"), t("dialogMini")); safeText($("btn-start-cam"), t("btnStart")); safeText($("btn-stop-cam"), t("btnStop")); safeText($("btn-analyze"), t("btnAnalyze")); safeText($("btn-multi"), t("btnMulti")); safeText($("t_langLabel"), t("langLabel")); safeText($("t_theme"), t("theme")); $("userInput").placeholder = t("placeholder"); safeText($("btn-plant-hear"), t("hear")); safeText($("t_vol"), t("vol")); safeText($("btn-chime"), t("chime")); safeText($("btn-stop-audio"), t("stopAudio")); safeText($("btn-listen"), t("listen")); safeText($("btn-stop-listen"), t("stopListen")); safeText($("t_note"), t("note")); safeText($("hc7-privacy"), t("privacy")); if(!($("result").textContent || "").trim()){ safeText($("result"), t("ready")); } setCamState(!!mediaStream); } function applyTheme(next){ theme = (next === "dark") ? "dark" : "light"; document.body.setAttribute("data-theme", theme); try{ localStorage.setItem("hc7_greentalk_theme", theme); }catch(e){} safeText($("btnTheme"), (theme === "dark" ? "☀️ " : "🌙 ") + t("theme")); } function clamp(n, a, b){ return Math.max(a, Math.min(b, n)); } function startCamera(){ var gum = (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) ? navigator.mediaDevices.getUserMedia.bind(navigator.mediaDevices) : null; if(!gum){ safeText($("result"), t("camNoSupport")); return; } gum({ video: { facingMode: "environment", width: { ideal: 1280 }, height: { ideal: 720 } }, audio: false }) .then(function(s){ mediaStream = s; var v = $("plantCam"); v.srcObject = s; setCamState(true); safeText($("result"), t("ready")); }) .catch(function(){ safeText($("result"), t("camDenied")); setCamState(false); }); } function stopCamera(){ try{ if(mediaStream){ mediaStream.getTracks().forEach(function(tr){ try{ tr.stop(); }catch(e){} }); } }catch(e){} mediaStream = null; try{ $("plantCam").srcObject = null; }catch(e){} setCamState(false); } function computeAvgRGB(imageData){ var d = imageData.data; var r=0,g=0,b=0; for(var i=0;i<d.length;i+=4){ r += d[i]; g += d[i+1]; b += d[i+2]; } var n = d.length/4; return { r: Math.round(r/n), g: Math.round(g/n), b: Math.round(b/n) }; } function getRefinedMood(r,g,b,br){ var hue = Math.atan2(Math.sqrt(3)*(g-b), 2*r - g - b) * 180 / Math.PI; var sat = Math.max(r,g,b) - Math.min(r,g,b); if(br > 220 && sat < 20) return "thriving"; if(br > 180 && sat > 50) return "blooming"; if(br > 150 && br < 180) return "calm"; if(sat > 85) return "alert"; if(br < 60) return "parched"; if(br < 95 && sat < 30) return "wilted"; if(hue > 30 && hue < 60 && br > 200) return "sunburned"; if(hue < 0 && br < 105) return "freezing"; return "growingSlow"; } function saveHistory(obj){ try{ var raw = localStorage.getItem("hc7_greentalk_history"); var arr = raw ? JSON.parse(raw) : []; arr.push({ t: new Date().toISOString(), v: obj }); if(arr.length > 120) arr = arr.slice(arr.length - 120); localStorage.setItem("hc7_greentalk_history", JSON.stringify(arr)); }catch(e){} } function applyMood(moodKey, extraLine){ var emo = emotionMap[moodKey] || emotionMap.calm; var lines = []; lines.push(t("mood") + emo.title); lines.push(""); lines.push(emo.text); lines.push(""); lines.push(t("care") + emo.need); if(extraLine){ lines.push(""); lines.push(extraLine); } safeText($("result"), lines.join("\n")); document.body.style.background = "radial-gradient(1000px 560px at 12% -10%, rgba(25,181,107,.18), transparent 55%)," + "radial-gradient(900px 560px at 108% 18%, rgba(34,197,94,.14), transparent 60%)," + "linear-gradient(180deg, " + emo.bg + ", #f7fffb)"; saveHistory({ type:"mood", mood:moodKey, text: emo.text }); return emo; } function analyzeVideoFrame(){ var v = $("plantCam"); if(!v || !v.srcObject){ safeText($("result"), t("startFirst")); return; } var c = $("snap"); var ctx = c.getContext("2d", { willReadFrequently:true }); var w = c.width, h = c.height; try{ ctx.drawImage(v, 0, 0, w, h); var img = ctx.getImageData(0,0,w,h); var avg = computeAvgRGB(img); var br = (avg.r + avg.g + avg.b) / 3; var mood = getRefinedMood(avg.r, avg.g, avg.b, br); applyMood(mood, t("tipLighting")); }catch(e){ safeText($("result"), t("frameFail")); } } function analyzeMultiplePlants(){ var v = $("plantCam"); if(!v || !v.srcObject){ $("network").style.display = "block"; safeText($("network"), t("startFirst")); return; } var c = $("snap"); var ctx = c.getContext("2d", { willReadFrequently:true }); var w = c.width, h = c.height; try{ ctx.drawImage(v, 0, 0, w, h); var img = ctx.getImageData(0,0,w,h); var data = img.data; var zones = 3; var zh = Math.floor(h / zones); var out = []; out.push(t("zoneTitle")); out.push(""); for(var k=0;k<zones;k++){ var y0 = k * zh; var y1 = (k === zones-1) ? h : (k+1) * zh; var r=0,g=0,b=0,cnt=0; for(var yy=y0; yy<y1; yy++){ for(var xx=0; xx<w; xx++){ var i = (yy*w + xx) * 4; r += data[i]; g += data[i+1]; b += data[i+2]; cnt++; } } var rr = Math.round(r/cnt), gg = Math.round(g/cnt), bb = Math.round(b/cnt); var br = (rr+gg+bb)/3; var mood = getRefinedMood(rr,gg,bb,br); var emo = emotionMap[mood] || emotionMap.calm; out.push(t("zone") + (k+1) + ": " + emo.title); out.push(emo.text); out.push(t("care") + emo.need); out.push(""); } $("network").style.display = "block"; safeText($("network"), out.join("\n")); saveHistory({ type:"zones", text: out.join("\n") }); }catch(e){ $("network").style.display = "block"; safeText($("network"), t("frameFail")); } } function respondToUser(){ var input = (($("userInput").value || "")).trim(); if(!input){ safeText($("user-response"), t("typeFirst")); return; } var cur = (($("result").textContent || "")).trim(); if(!cur || cur.indexOf(t("mood")) !== 0){ safeText($("user-response"), t("needAnalyze")); return; } var chosenKey = "calm"; var keys = Object.keys(emotionMap); for(var i=0;i<keys.length;i++){ var k = keys[i]; if(cur.indexOf(emotionMap[k].title) !== -1){ chosenKey = k; break; } } var emo = emotionMap[chosenKey] || emotionMap.calm; var reply = []; reply.push(t("plantReply")); reply.push("“" + input + "”"); reply.push(""); reply.push(emo.text); reply.push(""); reply.push(t("care") + emo.need); safeText($("user-response"), reply.join("\n")); saveHistory({ type:"dialogue", user: input, reply: emo.text }); $("userInput").value = ""; } function ensureAudio(){ var C = window.AudioContext || window.webkitAudioContext; if(!C){ safeText($("result"), "Audio is not supported in this browser."); return Promise.resolve(false); } if(!audioCtx){ audioCtx = new C(); masterGain = audioCtx.createGain(); limiter = audioCtx.createDynamicsCompressor(); masterGain.gain.value = 0.08; limiter.threshold.value = -18; limiter.knee.value = 18; limiter.ratio.value = 12; limiter.attack.value = 0.003; limiter.release.value = 0.18; masterGain.connect(limiter); limiter.connect(audioCtx.destination); } if(audioCtx.state === "suspended"){ return audioCtx.resume().then(function(){ return true; }).catch(function(){ return false; }); } return Promise.resolve(true); } function stopAllAudio(){ try{ for(var i=0;i<activeNodes.length;i++){ try{ activeNodes[i].stop(0); }catch(e){} } }catch(e){} activeNodes = []; setAudioState("idle"); safeText($("result"), t("audioStopped")); } function getVolGain(){ var v = parseInt(($("vol").value || "0"), 10); if(isNaN(v)) v = 0; v = clamp(v, 0, 18); safeText($("volVal"), v + "%"); return (v / 100); } function playGentleChime(){ ensureAudio().then(function(ok){ if(!ok) return; stopAllAudio(); var g = getVolGain(); var ctx = audioCtx; var out = ctx.createGain(); out.gain.value = 0.0001; var o1 = ctx.createOscillator(); var o2 = ctx.createOscillator(); o1.type = "sine"; o2.type = "triangle"; var now = ctx.currentTime; var dur = 0.9; var a = 0.02, d = 0.18, r = 0.22; o1.frequency.setValueAtTime(528, now); o2.frequency.setValueAtTime(660, now); o2.detune.setValueAtTime(-6, now); out.gain.setValueAtTime(0.0001, now); out.gain.exponentialRampToValueAtTime(Math.max(0.0002, g), now + a); out.gain.exponentialRampToValueAtTime(Math.max(0.0002, g * 0.65), now + a + d); out.gain.setValueAtTime(Math.max(0.0002, g * 0.65), now + dur - r); out.gain.exponentialRampToValueAtTime(0.0001, now + dur); o1.connect(out); o2.connect(out); out.connect(masterGain); activeNodes = [o1, o2]; o1.start(now); o2.start(now); o1.stop(now + dur + 0.02); o2.stop(now + dur + 0.02); setAudioState("playing"); safeText($("result"), t("chimePlaying")); setTimeout(function(){ setAudioState("idle"); }, Math.round((dur + 0.05) * 1000)); }); } function stopListening(){ if(micRAF){ try{ cancelAnimationFrame(micRAF); }catch(e){} micRAF = null; } if(micStream){ try{ micStream.getTracks().forEach(function(tr){ try{ tr.stop(); }catch(e){} }); }catch(e){} } micStream = null; $("btn-stop-listen").disabled = true; setAudioState("idle"); } function listenMic(){ var gum = (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) ? navigator.mediaDevices.getUserMedia.bind(navigator.mediaDevices) : null; if(!gum){ safeText($("result"), t("micNoSupport")); return; } gum({ audio: true, video: false }) .then(function(stream){ micStream = stream; $("btn-stop-listen").disabled = false; ensureAudio().then(function(ok){ if(!ok){ stopListening(); return; } if(!audioCtx){ stopListening(); return; } setAudioState("listening"); var ctx = audioCtx; var mic = ctx.createMediaStreamSource(stream); var an = ctx.createAnalyser(); an.fftSize = 4096; mic.connect(an); var data = new Uint8Array(an.frequencyBinCount); var startedAt = Date.now(); var timeoutMs = 4200; var samples = 0; var energySum = 0; function readOnce(){ an.getByteFrequencyData(data); var sum = 0; for(var i=0;i<data.length;i++) sum += data[i]; var avg = sum / Math.max(1, data.length); energySum += avg; samples++; } function finish(){ var avgEnergy = energySum / Math.max(1, samples); var reply = comfortReplies[Math.floor(Math.random() * comfortReplies.length)]; var out = []; out.push("Mic energy: " + avgEnergy.toFixed(1)); out.push(reply); safeText($("result"), out.join("\n")); safeText($("user-response"), t("plantReply") + "\n“" + reply + "”"); saveHistory({ type:"mic", energy: avgEnergy, reply: reply }); stopListening(); } function tick(){ if(!micStream) return; if(Date.now() - startedAt > timeoutMs){ safeText($("result"), t("listeningTimeout")); stopListening(); return; } readOnce(); if(samples >= 10){ finish(); return; } micRAF = requestAnimationFrame(tick); } micRAF = requestAnimationFrame(tick); }); }) .catch(function(){ safeText($("result"), t("micNeed")); setAudioState("idle"); }); } function onVolChange(){ getVolGain(); } $("btn-start-cam").addEventListener("click", startCamera, { passive:true }); $("btn-stop-cam").addEventListener("click", stopCamera, { passive:true }); $("btn-analyze").addEventListener("click", analyzeVideoFrame, { passive:true }); $("btn-multi").addEventListener("click", analyzeMultiplePlants, { passive:true }); $("btn-plant-hear").addEventListener("click", respondToUser, { passive:true }); $("btn-chime").addEventListener("click", playGentleChime, { passive:true }); $("btn-stop-audio").addEventListener("click", stopAllAudio, { passive:true }); $("btn-listen").addEventListener("click", listenMic, { passive:true }); $("btn-stop-listen").addEventListener("click", stopListening, { passive:true }); $("vol").addEventListener("input", onVolChange, { passive:true }); $("langSel").addEventListener("change", function(){ applyLang(this.value); }, { passive:true }); $("btnTheme").addEventListener("click", function(){ applyTheme(theme === "dark" ? "light" : "dark"); }, { passive:true }); window.addEventListener("pagehide", function(){ try{ stopAllAudio(); }catch(e){} try{ stopListening(); }catch(e){} try{ stopCamera(); }catch(e){} try{ if(audioCtx){ try{ audioCtx.close(); }catch(e){} audioCtx = null; } }catch(e){} }, { passive:true }); document.addEventListener("visibilitychange", function(){ if(document.hidden){ try{ stopAllAudio(); }catch(e){} try{ stopListening(); }catch(e){} } }, { passive:true }); setCamState(false); setAudioState("idle"); try{ var savedTheme = localStorage.getItem("hc7_greentalk_theme"); if(savedTheme === "dark") theme = "dark"; }catch(e){} applyTheme(theme); try{ var savedLang = localStorage.getItem("hc7_greentalk_lang"); if(savedLang && i18n[savedLang]) curLang = savedLang; }catch(e){} applyLang(curLang); getVolGain(); try{ $("langSel").addEventListener("change", function(){ try{ localStorage.setItem("hc7_greentalk_lang", this.value); }catch(e){} }, { passive:true }); }catch(e){} })(); </script> </body> </html>

'+Practical software for daily life' 카테고리의 다른 글

Instant Blood Pressure Viewer (Forearm/Vein rPPG) (4)	2026.02.12
Knit & Stitch Gauge Checker (4)	2026.02.12
EgiLiji - Real-time Route Comparison (4)	2026.02.11
NNM Masking & Decor Tool (3)	2026.02.11
Second Eye — Motion Alert & Safety Assist (9)	2026.02.10

GreenTalk

'+Practical software for daily life' 카테고리의 다른 글

관련글

티스토리툴바