Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | |
| <meta name="apple-mobile-web-app-capable" content="yes"> | |
| <meta name="theme-color" content="#f7f3ee"> | |
| <title>EucalyptusLens</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=DM+Mono:wght@300;400;500&family=Outfit:wght@200;300;400;500&display=swap" rel="stylesheet"> | |
| <style> | |
| *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} | |
| :root{--bg:#f7f3ee;--bg2:#f0eae0;--surface:#ffffff;--surface2:#faf7f2;--border:#e2d9cc;--border2:#d4c8b8;--rose:#c97ba8;--mauve:#9b6fa0;--periwinkle:#7b8fd4;--teal:#4aabb5;--amber:#d4955a;--sage:#8aaa6a;--lilac:#c4b8e8;--ink:#2a2035;--text:#3a2f48;--text2:#7a6d88;--text3:#b0a4bc} | |
| html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent} | |
| body{background:var(--bg);color:var(--text);font-family:'Outfit',sans-serif;font-weight:300;min-height:100dvh;overflow-x:hidden} | |
| body::before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse 70% 50% at 0% 0%,rgba(123,143,212,0.12) 0%,transparent 55%),radial-gradient(ellipse 60% 60% at 100% 0%,rgba(201,123,168,0.10) 0%,transparent 50%),radial-gradient(ellipse 50% 40% at 50% 100%,rgba(74,171,181,0.08) 0%,transparent 50%);pointer-events:none;z-index:0} | |
| *{position:relative;z-index:1} | |
| nav{display:flex;align-items:center;justify-content:space-between;padding:18px 32px;background:rgba(247,243,238,0.88);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:200} | |
| .logo{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:600;background:linear-gradient(135deg,var(--mauve),var(--periwinkle));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} | |
| .logo span{font-style:italic;background:linear-gradient(135deg,var(--teal),var(--sage));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} | |
| .nav-right{display:flex;align-items:center;gap:12px} | |
| .nav-badge{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:0.1em;padding:5px 12px;border-radius:20px;background:linear-gradient(135deg,rgba(123,143,212,0.12),rgba(201,123,168,0.12));border:1px solid var(--lilac);color:var(--mauve);white-space:nowrap} | |
| .nav-tabs{display:flex;gap:4px} | |
| .nav-tab{padding:7px 16px;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;cursor:pointer;border:none;background:transparent;color:var(--text3);border-radius:20px;transition:all 0.2s;font-family:'DM Mono',monospace} | |
| .nav-tab.active{background:linear-gradient(135deg,var(--periwinkle),var(--mauve));color:white;box-shadow:0 2px 8px rgba(123,143,212,0.25)} | |
| .nav-tab:hover:not(.active){background:var(--bg2);color:var(--text2)} | |
| .hero{text-align:center;padding:56px 24px 44px;animation:fadeUp 0.7s ease both} | |
| .hero-tag{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:0.25em;text-transform:uppercase;color:var(--teal);margin-bottom:16px;display:flex;align-items:center;justify-content:center;gap:12px} | |
| .hero-tag::before,.hero-tag::after{content:'';width:28px;height:1px;background:var(--border2)} | |
| .hero h1{font-family:'Cormorant Garamond',serif;font-size:clamp(40px,8vw,80px);font-weight:300;line-height:1.05;color:var(--ink);margin-bottom:14px;letter-spacing:-0.02em} | |
| .hero h1 em{font-style:italic;background:linear-gradient(135deg,var(--rose),var(--periwinkle));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} | |
| .hero p{font-size:15px;color:var(--text2);max-width:420px;margin:0 auto;line-height:1.75} | |
| .main{max-width:960px;margin:0 auto;padding:0 24px 80px} | |
| .upload-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px} | |
| .drop-zone{border:2px dashed var(--border2);border-radius:16px;padding:44px 20px;text-align:center;cursor:pointer;background:var(--surface);transition:all 0.3s;position:relative;overflow:hidden;-webkit-user-select:none;user-select:none} | |
| .drop-zone::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(123,143,212,0.05),rgba(201,123,168,0.05));opacity:0;transition:opacity 0.3s;border-radius:14px} | |
| .drop-zone:hover::after,.drop-zone.dragover::after{opacity:1} | |
| .drop-zone:hover,.drop-zone.dragover{border-color:var(--periwinkle);transform:translateY(-2px);box-shadow:0 8px 28px rgba(123,143,212,0.12)} | |
| .drop-zone:active{transform:scale(0.98)} | |
| .zone-icon{width:52px;height:52px;margin:0 auto 14px;border-radius:14px;display:flex;align-items:center;justify-content:center} | |
| .upload-icon{background:linear-gradient(135deg,rgba(123,143,212,0.15),rgba(201,123,168,0.15))} | |
| .camera-icon-bg{background:linear-gradient(135deg,rgba(74,171,181,0.15),rgba(138,170,106,0.15))} | |
| .drop-zone h3{font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:500;color:var(--ink);margin-bottom:5px} | |
| .drop-zone p{font-size:12px;color:var(--text3);line-height:1.5} | |
| .formats{font-family:'DM Mono',monospace;font-size:9px;color:var(--text3);margin-top:10px;letter-spacing:0.1em} | |
| #fileInput{display:none} | |
| .camera-zone{border:2px dashed var(--border2);border-radius:16px;overflow:hidden;background:var(--surface);display:flex;flex-direction:column;min-height:200px;transition:box-shadow 0.3s} | |
| .camera-zone:hover{box-shadow:0 8px 28px rgba(74,171,181,0.10)} | |
| #cameraFeed{width:100%;flex:1;object-fit:cover;display:none} | |
| #cameraCanvas{display:none} | |
| .camera-placeholder{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 20px;text-align:center} | |
| .camera-controls{display:flex;gap:8px;padding:12px;background:var(--bg2);border-top:1px solid var(--border);justify-content:center;flex-wrap:wrap} | |
| .preview-container{display:none;margin-bottom:14px;border:1px solid var(--border);border-radius:16px;overflow:hidden;background:var(--surface);box-shadow:0 4px 20px rgba(123,143,212,0.08);animation:fadeUp 0.3s ease both} | |
| .preview-header{display:flex;align-items:center;justify-content:space-between;padding:10px 18px;border-bottom:1px solid var(--border);background:var(--bg2)} | |
| .preview-header span{font-family:'DM Mono',monospace;font-size:10px;color:var(--text3);letter-spacing:0.12em;text-transform:uppercase} | |
| #previewImage{width:100%;max-height:260px;object-fit:contain;padding:16px} | |
| .btn{padding:13px 24px;border:none;border-radius:10px;cursor:pointer;font-family:'DM Mono',monospace;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;transition:all 0.2s;-webkit-tap-highlight-color:transparent;touch-action:manipulation} | |
| .btn-primary{background:linear-gradient(135deg,var(--periwinkle),var(--mauve));color:white;width:100%;font-size:13px;padding:16px;box-shadow:0 4px 16px rgba(123,143,212,0.25);border-radius:12px} | |
| .btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(123,143,212,0.35)} | |
| .btn-primary:active{transform:scale(0.98)} | |
| .btn-primary:disabled{opacity:0.4;cursor:not-allowed;transform:none;box-shadow:none} | |
| .btn-secondary{background:var(--surface);color:var(--text2);border:1px solid var(--border);font-size:10px;padding:9px 16px} | |
| .btn-secondary:hover{background:var(--bg2);border-color:var(--periwinkle);color:var(--periwinkle)} | |
| .btn-danger{background:transparent;color:var(--rose);border:1px solid rgba(201,123,168,0.3);font-size:10px;padding:6px 14px} | |
| .btn-danger:hover{background:rgba(201,123,168,0.08)} | |
| .loading{display:none;text-align:center;padding:48px 24px;border:1px solid var(--border);border-radius:16px;background:var(--surface);margin-bottom:14px;box-shadow:0 4px 20px rgba(123,143,212,0.06)} | |
| .loading-spinner{width:44px;height:44px;border-radius:50%;border:2px solid var(--border);border-top-color:var(--periwinkle);border-right-color:var(--rose);animation:spin 1s linear infinite;margin:0 auto 18px} | |
| .loading p{font-family:'DM Mono',monospace;font-size:11px;color:var(--text3);letter-spacing:0.15em} | |
| .loading-steps{margin-top:14px;display:flex;flex-direction:column;gap:7px;align-items:center} | |
| .loading-step{font-size:11px;color:var(--text3);font-family:'DM Mono',monospace;opacity:0;animation:fadeIn 0.5s ease forwards} | |
| .result-card{display:none;border:1px solid var(--border);border-radius:16px;overflow:hidden;background:var(--surface);margin-bottom:14px;box-shadow:0 8px 40px rgba(123,143,212,0.10);animation:fadeUp 0.5s ease both} | |
| .result-header{padding:22px 24px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;justify-content:space-between;gap:12px;background:linear-gradient(135deg,rgba(123,143,212,0.06),rgba(201,123,168,0.06))} | |
| .result-name{font-family:'Cormorant Garamond',serif;font-size:clamp(24px,5vw,32px);font-weight:500;color:var(--ink);line-height:1.1} | |
| .result-scientific{font-family:'Cormorant Garamond',serif;font-size:15px;font-style:italic;color:var(--mauve);margin-top:4px} | |
| .confidence-badge{font-family:'DM Mono',monospace;font-size:10px;padding:6px 14px;border-radius:20px;letter-spacing:0.1em;text-transform:uppercase;white-space:nowrap;flex-shrink:0} | |
| .confidence-high{background:linear-gradient(135deg,rgba(74,171,181,0.15),rgba(138,170,106,0.15));color:var(--teal);border:1px solid rgba(74,171,181,0.3)} | |
| .confidence-medium{background:linear-gradient(135deg,rgba(212,149,90,0.15),rgba(201,123,168,0.10));color:var(--amber);border:1px solid rgba(212,149,90,0.3)} | |
| .confidence-low{background:rgba(201,123,168,0.12);color:var(--rose);border:1px solid rgba(201,123,168,0.3)} | |
| .result-body{padding:22px 24px;display:grid;grid-template-columns:1fr 1fr;gap:20px} | |
| .result-section h4{font-family:'DM Mono',monospace;font-size:9px;color:var(--text3);letter-spacing:0.2em;text-transform:uppercase;margin-bottom:10px} | |
| .result-section p{font-size:14px;color:var(--text);line-height:1.7} | |
| .features-list{display:flex;flex-direction:column;gap:7px} | |
| .feature-item{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--text2);line-height:1.4} | |
| .feature-dot{width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,var(--periwinkle),var(--rose));flex-shrink:0;margin-top:4px} | |
| .wiki-section{grid-column:1/-1;padding-top:18px;border-top:1px solid var(--border)} | |
| .wiki-text{font-size:13px;color:var(--text2);line-height:1.85} | |
| .wiki-link{display:inline-flex;align-items:center;gap:5px;margin-top:10px;font-family:'DM Mono',monospace;font-size:10px;color:var(--periwinkle);text-decoration:none;letter-spacing:0.05em;transition:color 0.2s} | |
| .wiki-link:hover{color:var(--mauve)} | |
| .history-section{display:none;animation:fadeUp 0.4s ease both} | |
| .history-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px} | |
| .history-header h2{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:400;color:var(--ink)} | |
| .history-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px} | |
| .history-card{border:1px solid var(--border);border-radius:14px;padding:18px;background:var(--surface);transition:all 0.2s;cursor:pointer} | |
| .history-card:hover{border-color:var(--periwinkle);transform:translateY(-2px);box-shadow:0 8px 24px rgba(123,143,212,0.12)} | |
| .history-card-name{font-family:'Cormorant Garamond',serif;font-size:19px;color:var(--ink);margin-bottom:2px} | |
| .history-card-scientific{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:12px;color:var(--mauve);margin-bottom:12px} | |
| .history-card-meta{display:flex;align-items:center;justify-content:space-between} | |
| .history-card-date{font-family:'DM Mono',monospace;font-size:9px;color:var(--text3)} | |
| .history-empty{text-align:center;padding:56px 24px;color:var(--text3);font-family:'Cormorant Garamond',serif;font-size:18px;font-style:italic;border:1px dashed var(--border2);border-radius:14px;grid-column:1/-1} | |
| footer{border-top:1px solid var(--border);padding:24px 32px;display:flex;align-items:center;justify-content:space-between;background:var(--surface2);flex-wrap:wrap;gap:12px} | |
| footer p{font-family:'DM Mono',monospace;font-size:10px;color:var(--text3);letter-spacing:0.08em} | |
| .footer-stack{display:flex;gap:6px;flex-wrap:wrap} | |
| .stack-badge{font-family:'DM Mono',monospace;font-size:9px;color:var(--text3);border:1px solid var(--border);padding:4px 10px;border-radius:20px;background:var(--surface)} | |
| .bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:rgba(247,243,238,0.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--border);padding:10px 24px;padding-bottom:calc(10px + env(safe-area-inset-bottom));z-index:200;justify-content:space-around} | |
| .bottom-nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;padding:6px 20px;border-radius:10px;transition:all 0.2s;border:none;background:transparent;-webkit-tap-highlight-color:transparent} | |
| .bottom-nav-item.active{background:linear-gradient(135deg,rgba(123,143,212,0.12),rgba(201,123,168,0.12))} | |
| .bottom-nav-item span{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:0.08em;color:var(--text3);text-transform:uppercase} | |
| .bottom-nav-item.active span{color:var(--mauve)} | |
| @keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}} | |
| @keyframes fadeIn{from{opacity:0}to{opacity:0.7}} | |
| @keyframes spin{to{transform:rotate(360deg)}} | |
| @media(max-width:768px){nav{padding:14px 20px}.nav-badge{display:none}.hero{padding:40px 20px 32px}.main{padding:0 16px 80px}.history-grid{grid-template-columns:1fr 1fr}} | |
| @media(max-width:540px){.upload-grid{grid-template-columns:1fr}.result-body{grid-template-columns:1fr}.history-grid{grid-template-columns:1fr}nav{padding:12px 16px}.logo{font-size:18px}.nav-tab{padding:6px 12px;font-size:10px}.hero{padding:32px 16px 28px}.main{padding:0 12px 100px}.drop-zone{padding:32px 16px}.result-body{padding:18px 16px}footer{padding:20px 16px}.bottom-nav{display:flex}.nav-tabs{display:none}} | |
| </style> | |
| </head> | |
| <body> | |
| <nav> | |
| <div class="logo">Eucalyptus<span>Lens</span></div> | |
| <div class="nav-right"> | |
| <div class="nav-badge">LLaMA 4 Scout</div> | |
| <div class="nav-tabs"> | |
| <button class="nav-tab active" onclick="showTab('identify')" id="tab-identify">Identify</button> | |
| <button class="nav-tab" onclick="showTab('history')" id="tab-history">History</button> | |
| </div> | |
| </div> | |
| </nav> | |
| <div class="hero"> | |
| <div class="hero-tag">AI Plant Recognition</div> | |
| <h1>Identify <em>any</em><br>plant instantly</h1> | |
| <p>Upload a photo or use your camera. Our AI identifies plants and enriches results with botanical knowledge.</p> | |
| </div> | |
| <div class="main"> | |
| <div id="identify-section"> | |
| <div class="upload-grid"> | |
| <div class="drop-zone" id="dropZone" onclick="document.getElementById('fileInput').click()"> | |
| <div class="zone-icon upload-icon"> | |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none"> | |
| <path d="M12 15V5M8 9l4-4 4 4" stroke="url(#ug)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/> | |
| <path d="M4 17v1a2 2 0 002 2h12a2 2 0 002-2v-1" stroke="url(#ug)" stroke-width="1.5" stroke-linecap="round"/> | |
| <defs><linearGradient id="ug" x1="4" y1="4" x2="20" y2="20"><stop stop-color="#7b8fd4"/><stop offset="1" stop-color="#c97ba8"/></linearGradient></defs> | |
| </svg> | |
| </div> | |
| <h3>Upload Image</h3> | |
| <p>Drop a photo here<br>or tap to browse</p> | |
| <div class="formats">JPG · PNG · WEBP · HEIC</div> | |
| </div> | |
| <input type="file" id="fileInput" accept="image/*"> | |
| <div class="camera-zone" id="cameraZone"> | |
| <video id="cameraFeed" autoplay playsinline></video> | |
| <canvas id="cameraCanvas"></canvas> | |
| <div class="camera-placeholder" id="cameraPlaceholder"> | |
| <div class="zone-icon camera-icon-bg"> | |
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none"> | |
| <rect x="2" y="7" width="20" height="13" rx="3" stroke="url(#cg)" stroke-width="1.5" fill="none"/> | |
| <circle cx="12" cy="13" r="3.5" stroke="url(#cg)" stroke-width="1.5" fill="none"/> | |
| <path d="M8 7l1.5-2.5h5L16 7" stroke="url(#cg)" stroke-width="1.5" stroke-linecap="round"/> | |
| <defs><linearGradient id="cg" x1="2" y1="7" x2="22" y2="20"><stop stop-color="#4aabb5"/><stop offset="1" stop-color="#8aaa6a"/></linearGradient></defs> | |
| </svg> | |
| </div> | |
| <h3>Use Camera</h3> | |
| <p>Take a live photo</p> | |
| </div> | |
| <div class="camera-controls"> | |
| <button class="btn btn-secondary" onclick="startCamera()" id="btnStartCamera">Start</button> | |
| <button class="btn btn-secondary" onclick="capturePhoto()" id="btnCapture" style="display:none;">Capture</button> | |
| <button class="btn btn-secondary" onclick="stopCamera()" id="btnStopCamera" style="display:none;">Stop</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="preview-container" id="previewContainer"> | |
| <div class="preview-header"> | |
| <span>Preview</span> | |
| <button class="btn btn-danger" onclick="clearImage()">Clear</button> | |
| </div> | |
| <img id="previewImage" src="" alt="Preview"> | |
| </div> | |
| <button class="btn btn-primary" id="btnAnalyze" onclick="analyzeImage()" disabled>Analyze Plant</button> | |
| <div style="margin-top:14px;"> | |
| <div class="loading" id="loading"> | |
| <div class="loading-spinner"></div> | |
| <p>Analyzing your plant...</p> | |
| <div class="loading-steps"> | |
| <div class="loading-step" style="animation-delay:0.5s">Processing image with LLaMA 4 Scout</div> | |
| <div class="loading-step" style="animation-delay:1.5s">Fetching botanical data from Wikipedia</div> | |
| <div class="loading-step" style="animation-delay:2.5s">Building knowledge context</div> | |
| </div> | |
| </div> | |
| <div class="result-card" id="resultCard"> | |
| <div class="result-header"> | |
| <div> | |
| <div class="result-name" id="resultName"></div> | |
| <div class="result-scientific" id="resultScientific"></div> | |
| </div> | |
| <div class="confidence-badge" id="confidenceBadge"></div> | |
| </div> | |
| <div class="result-body"> | |
| <div class="result-section"><h4>Family</h4><p id="resultFamily"></p></div> | |
| <div class="result-section"><h4>Key Features</h4><div class="features-list" id="resultFeatures"></div></div> | |
| <div class="result-section wiki-section"> | |
| <h4>Botanical Overview</h4> | |
| <p class="wiki-text" id="resultWiki"></p> | |
| <a href="#" class="wiki-link" id="resultWikiLink" target="_blank">Read on Wikipedia →</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="history-section" class="history-section" style="display:none;"> | |
| <div class="history-header"> | |
| <h2>Scan History</h2> | |
| <button class="btn btn-secondary" onclick="loadHistory()">Refresh</button> | |
| </div> | |
| <div id="historyGrid" class="history-grid"> | |
| <div class="history-empty">No scans yet. Identify your first plant.</div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer> | |
| <p>EucalyptusLens — AI Botanical Intelligence</p> | |
| <div class="footer-stack"> | |
| <span class="stack-badge">LLaMA 4 Scout</span> | |
| <span class="stack-badge">Wikipedia RAG</span> | |
| <span class="stack-badge">Flask</span> | |
| <span class="stack-badge">Supabase</span> | |
| </div> | |
| </footer> | |
| <div class="bottom-nav"> | |
| <button class="bottom-nav-item active" onclick="showTab('identify')" id="bnav-identify"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="1.5"/><path d="M16.5 16.5L21 21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg> | |
| <span>Identify</span> | |
| </button> | |
| <button class="bottom-nav-item" onclick="showTab('history')" id="bnav-history"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M12 8v4l3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M3.05 11a9 9 0 1 0 .5-3M3 4v4h4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg> | |
| <span>History</span> | |
| </button> | |
| </div> | |
| <script> | |
| const API = "https://inscrutable-reprehensibly-dwain.ngrok-free.dev"; | |
| let currentFile=null,cameraStream=null; | |
| function showTab(t){document.getElementById('identify-section').style.display=t==='identify'?'block':'none';document.getElementById('history-section').style.display=t==='history'?'block':'none';['identify','history'].forEach(x=>{document.getElementById('tab-'+x)?.classList.toggle('active',x===t);document.getElementById('bnav-'+x)?.classList.toggle('active',x===t)});if(t==='history')loadHistory();window.scrollTo({top:0,behavior:'smooth'})} | |
| const dropZone=document.getElementById('dropZone'); | |
| dropZone.addEventListener('dragover',e=>{e.preventDefault();dropZone.classList.add('dragover')}); | |
| dropZone.addEventListener('dragleave',()=>dropZone.classList.remove('dragover')); | |
| dropZone.addEventListener('drop',e=>{e.preventDefault();dropZone.classList.remove('dragover');const f=e.dataTransfer.files[0];if(f&&f.type.startsWith('image/'))setImage(f)}); | |
| document.getElementById('fileInput').addEventListener('change',e=>{if(e.target.files[0])setImage(e.target.files[0])}); | |
| function setImage(file){currentFile=file;const r=new FileReader();r.onload=e=>{document.getElementById('previewImage').src=e.target.result;document.getElementById('previewContainer').style.display='block';document.getElementById('btnAnalyze').disabled=false;document.getElementById('resultCard').style.display='none'};r.readAsDataURL(file)} | |
| function clearImage(){currentFile=null;document.getElementById('previewContainer').style.display='none';document.getElementById('btnAnalyze').disabled=true;document.getElementById('resultCard').style.display='none';document.getElementById('fileInput').value=''} | |
| async function startCamera(){try{cameraStream=await navigator.mediaDevices.getUserMedia({video:{facingMode:'environment'}});const v=document.getElementById('cameraFeed');v.srcObject=cameraStream;v.style.display='block';document.getElementById('cameraPlaceholder').style.display='none';document.getElementById('btnStartCamera').style.display='none';document.getElementById('btnCapture').style.display='inline-block';document.getElementById('btnStopCamera').style.display='inline-block'}catch{alert('Camera access denied.')}} | |
| function capturePhoto(){const v=document.getElementById('cameraFeed'),c=document.getElementById('cameraCanvas');c.width=v.videoWidth;c.height=v.videoHeight;c.getContext('2d').drawImage(v,0,0);c.toBlob(b=>{setImage(new File([b],'capture.jpg',{type:'image/jpeg'}));stopCamera()},'image/jpeg',0.92)} | |
| function stopCamera(){if(cameraStream){cameraStream.getTracks().forEach(t=>t.stop());cameraStream=null}document.getElementById('cameraFeed').style.display='none';document.getElementById('cameraPlaceholder').style.display='flex';document.getElementById('btnStartCamera').style.display='inline-block';document.getElementById('btnCapture').style.display='none';document.getElementById('btnStopCamera').style.display='none'} | |
| async function analyzeImage(){if(!currentFile)return;document.getElementById('loading').style.display='block';document.getElementById('resultCard').style.display='none';document.getElementById('btnAnalyze').disabled=true;const fd=new FormData();fd.append('file',currentFile);try{const r=await fetch(API+'/analyze',{method:'POST',body:fd});const d=await r.json();displayResult(d)}catch{alert('Error connecting to server. Make sure Colab is running.')}finally{document.getElementById('loading').style.display='none';document.getElementById('btnAnalyze').disabled=false}} | |
| function displayResult(data){const id=data.identification,wiki=data.wikipedia||'';document.getElementById('resultName').textContent=id.common_name||'Unknown Plant';document.getElementById('resultScientific').textContent=id.scientific_name||'';document.getElementById('resultFamily').textContent=id.family||'N/A';const b=document.getElementById('confidenceBadge');b.textContent=id.confidence||'unknown';b.className='confidence-badge confidence-'+(id.confidence||'low');const fe=document.getElementById('resultFeatures');fe.innerHTML='';(id.key_features||[]).forEach(f=>{fe.innerHTML+=`<div class="feature-item"><div class="feature-dot"></div><span>${f}</span></div>`});const lines=wiki.split('\n');const summary=lines.find(l=>l.startsWith('Summary:'))?.replace('Summary:','').trim()||'';const url=lines.find(l=>l.startsWith('Source:'))?.replace('Source:','').trim()||'#';document.getElementById('resultWiki').textContent=summary;document.getElementById('resultWikiLink').href=url;document.getElementById('resultCard').style.display='block';document.getElementById('resultCard').scrollIntoView({behavior:'smooth',block:'nearest'})} | |
| async function loadHistory(){const grid=document.getElementById('historyGrid');grid.innerHTML='<div class="history-empty" style="font-style:normal;font-size:12px;">Loading...</div>';try{const r=await fetch(API+'/history');const d=await r.json();if(!d.length){grid.innerHTML='<div class="history-empty">No scans yet.</div>';return}grid.innerHTML='';d.forEach(item=>{const date=new Date(item.created_at).toLocaleDateString('en-US',{month:'short',day:'numeric',year:'numeric'});grid.innerHTML+=`<div class="history-card"><div class="history-card-name">${item.common_name||'Unknown'}</div><div class="history-card-scientific">${item.scientific_name||''}</div><div class="history-card-meta"><div class="confidence-badge confidence-${item.confidence}">${item.confidence}</div><div class="history-card-date">${date}</div></div></div>`})}catch{grid.innerHTML='<div class="history-empty">Could not load history.</div>'}} | |
| </script> | |
| </body> | |
| </html> |