Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>VrukshaVed β Ayurvedic Plant Intelligence</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | |
| <link href="https://fonts.googleapis.com/css2?family=Yatra+One&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap" rel="stylesheet" /> | |
| <link rel="stylesheet" href="static/css/style.css" /> | |
| </head> | |
| <body> | |
| <!-- βββ BACKGROUND ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ --> | |
| <div class="bg-layer"> | |
| <div class="mandala-ring ring-1"></div> | |
| <div class="mandala-ring ring-2"></div> | |
| <div class="mandala-ring ring-3"></div> | |
| <div class="leaf-scatter" id="leafScatter"></div> | |
| </div> | |
| <!-- βββ HEADER ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ --> | |
| <header class="site-header"> | |
| <div class="header-inner"> | |
| <div class="logo-group"> | |
| <div class="logo-icon"> | |
| <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M24 4C24 4 8 14 8 28C8 36.837 15.163 44 24 44C32.837 44 40 36.837 40 28C40 14 24 4 24 4Z" fill="url(#lg1)" opacity="0.9"/> | |
| <path d="M24 12C24 12 14 20 14 30C14 36.627 18.373 41 24 41" stroke="#c8f5a0" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.6"/> | |
| <path d="M24 8C18 22 30 26 24 44" stroke="#4d9e40" stroke-width="2" stroke-linecap="round" fill="none"/> | |
| <defs> | |
| <linearGradient id="lg1" x1="8" y1="4" x2="40" y2="44" gradientUnits="userSpaceOnUse"> | |
| <stop stop-color="#a8e06a"/> | |
| <stop offset="1" stop-color="#2d7a22"/> | |
| </linearGradient> | |
| </defs> | |
| </svg> | |
| </div> | |
| <div class="logo-text"> | |
| <h1 class="site-title">VrukshaVed</h1> | |
| <p class="site-tagline">ΰ€΅ΰ₯ΰ€ΰ₯ΰ€·ΰ€΅ΰ₯ΰ€¦ Β· Ayurvedic Plant Intelligence</p> | |
| </div> | |
| </div> | |
| <nav class="header-nav"> | |
| <a href="#upload-section">Identify</a> | |
| <a href="#about-section">About</a> | |
| <a href="#plants-section">Plants</a> | |
| </nav> | |
| </div> | |
| </header> | |
| <!-- βββ HERO βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ --> | |
| <section class="hero"> | |
| <div class="hero-content"> | |
| <div class="hero-badge">CNN Β· Deep Learning Β· Ayurveda</div> | |
| <h2 class="hero-headline"> | |
| Identify <em>Sacred Plants</em><br /> | |
| Unlock <em>Ancient Wisdom</em> | |
| </h2> | |
| <p class="hero-subtext"> | |
| Upload a leaf photograph and let our CNN model β trained on 6,900+ images | |
| of 80 Indian medicinal species β reveal the plant and its Ayurvedic healing properties. | |
| </p> | |
| <a href="#upload-section" class="cta-btn"> | |
| <span>Identify a Leaf</span> | |
| <svg viewBox="0 0 20 20" fill="none"><path d="M10 3v14M3 10l7 7 7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg> | |
| </a> | |
| </div> | |
| <div class="hero-decoration"> | |
| <div class="deco-circle c1"></div> | |
| <div class="deco-circle c2"></div> | |
| <div class="rotating-mandala">β¦</div> | |
| </div> | |
| </section> | |
| <!-- βββ UPLOAD SECTION βββββββββββββββββββββββββββββββββββββββββββββββββββββββ --> | |
| <section class="upload-section" id="upload-section"> | |
| <div class="section-container"> | |
| <div class="section-header"> | |
| <span class="section-label">01 β Identify</span> | |
| <h2>Upload or Capture a Leaf</h2> | |
| <p>Supported: JPG, PNG, WEBP Β· Max 10MB Β· Best results with a single clear leaf on any background</p> | |
| </div> | |
| <div class="upload-area" id="uploadArea"> | |
| <div class="upload-idle" id="uploadIdle"> | |
| <div class="upload-icon"> | |
| <svg viewBox="0 0 64 64" fill="none"> | |
| <circle cx="32" cy="32" r="30" stroke="currentColor" stroke-width="1.5" stroke-dasharray="4 3"/> | |
| <path d="M32 44V20M22 30l10-10 10 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> | |
| </svg> | |
| </div> | |
| <p class="upload-main-text">Drop leaf image here</p> | |
| <p class="upload-sub-text">or choose an option below</p> | |
| <div class="upload-buttons"> | |
| <label for="fileInput" class="btn-upload"> | |
| <svg viewBox="0 0 20 20" fill="none"><path d="M4 16h12M10 4v9M6 8l4-4 4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg> | |
| Upload File | |
| </label> | |
| <button class="btn-camera" id="cameraBtn"> | |
| <svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="11" r="3" stroke="currentColor" stroke-width="1.5"/><path d="M2 7.5C2 6.672 2.672 6 3.5 6H4.764a1 1 0 00.894-.553L6.5 4h7l.842 1.447A1 1 0 0015.236 6H16.5C17.328 6 18 6.672 18 7.5V15a1 1 0 01-1 1H3a1 1 0 01-1-1V7.5z" stroke="currentColor" stroke-width="1.5"/></svg> | |
| Use Camera | |
| </button> | |
| </div> | |
| <input type="file" id="fileInput" accept="image/*" style="display:none" /> | |
| </div> | |
| <!-- Camera view --> | |
| <div class="camera-view" id="cameraView" style="display:none"> | |
| <video id="cameraFeed" autoplay playsinline></video> | |
| <div class="camera-overlay"> | |
| <div class="camera-frame"></div> | |
| <p class="camera-hint">Position leaf inside the frame</p> | |
| </div> | |
| <div class="camera-controls"> | |
| <button class="btn-capture" id="captureBtn"> | |
| <span class="capture-ring"></span> | |
| Capture | |
| </button> | |
| <button class="btn-cancel-camera" id="cancelCameraBtn">β Cancel</button> | |
| </div> | |
| <canvas id="cameraCanvas" style="display:none"></canvas> | |
| </div> | |
| <!-- Preview --> | |
| <div class="image-preview" id="imagePreview" style="display:none"> | |
| <img id="previewImg" src="" alt="Leaf preview" /> | |
| <div class="preview-actions"> | |
| <button class="btn-analyze" id="analyzeBtn"> | |
| <span class="btn-text">Analyze Leaf</span> | |
| <span class="btn-spinner" style="display:none"> | |
| <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" stroke-dasharray="31.4" stroke-dashoffset="10" class="spinner-arc"/></svg> | |
| Analyzing⦠| |
| </span> | |
| </button> | |
| <button class="btn-clear" id="clearBtn">β Clear</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- βββ RESULTS SECTION ββββββββββββββββββββββββββββββββββββββββββββββββββββββ --> | |
| <section class="results-section" id="resultsSection" style="display:none"> | |
| <div class="section-container"> | |
| <div class="section-header"> | |
| <span class="section-label">02 β Result</span> | |
| <h2>Plant Identified</h2> | |
| </div> | |
| <!-- Top Prediction Card --> | |
| <div class="result-hero-card" id="resultHeroCard"> | |
| <div class="result-leaf-thumb"> | |
| <img id="resultThumb" src="" alt="Analyzed leaf" /> | |
| <div class="confidence-badge" id="confidenceBadge"></div> | |
| </div> | |
| <div class="result-identity"> | |
| <p class="result-family" id="resultFamily"></p> | |
| <h2 class="result-common-name" id="resultCommonName"></h2> | |
| <p class="result-botanical" id="resultBotanical"></p> | |
| <p class="result-ayurvedic" id="resultAyurvedic"></p> | |
| <p class="result-habitat" id="resultHabitat"></p> | |
| <div class="demo-warning" id="demoWarning" style="display:none"> | |
| β οΈ Demo Mode β Place your <code>model.pth</code> in the <code>backend/</code> folder for real predictions. | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Medicinal Info --> | |
| <div class="medicinal-grid" id="medicinalGrid"> | |
| <div class="med-card uses-card"> | |
| <div class="med-card-header"> | |
| <span class="med-icon">πΏ</span> | |
| <h3>Medicinal Uses</h3> | |
| </div> | |
| <ul class="uses-list" id="usesList"></ul> | |
| </div> | |
| <div class="med-card compounds-card"> | |
| <div class="med-card-header"> | |
| <span class="med-icon">βοΈ</span> | |
| <h3>Active Compounds</h3> | |
| </div> | |
| <div class="compounds-tags" id="compoundsTags"></div> | |
| </div> | |
| <div class="med-card rasa-card"> | |
| <div class="med-card-header"> | |
| <span class="med-icon">β―</span> | |
| <h3>Ayurvedic Properties</h3> | |
| </div> | |
| <div class="rasa-grid" id="rasaGrid"></div> | |
| </div> | |
| <div class="med-card dosage-card"> | |
| <div class="med-card-header"> | |
| <span class="med-icon">π</span> | |
| <h3>Dosage & Parts Used</h3> | |
| </div> | |
| <p class="dosage-text" id="dosageText"></p> | |
| <div class="parts-tags" id="partsTags"></div> | |
| <div class="precaution-box" id="precautionBox"></div> | |
| </div> | |
| </div> | |
| <!-- Top 5 Predictions --> | |
| <div class="top5-section"> | |
| <h3 class="top5-title">Top 5 Predictions</h3> | |
| <div class="top5-bars" id="top5Bars"></div> | |
| </div> | |
| <div class="result-actions"> | |
| <button class="btn-new-scan" onclick="resetApp()">β© Scan Another Leaf</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- βββ ABOUT SECTION ββββββββββββββββββββββββββββββββββββββββββββββββββββββββ --> | |
| <section class="about-section" id="about-section"> | |
| <div class="section-container"> | |
| <div class="about-grid"> | |
| <div class="about-text"> | |
| <span class="section-label">About VrukshaVed</span> | |
| <h2>Bridging Ancient Knowledge<br />with Modern AI</h2> | |
| <p> | |
| VrukshaVed (Sanskrit: ΰ€΅ΰ₯ΰ€ΰ₯ΰ€·ΰ€΅ΰ₯ΰ€¦ β <em>"Knowledge of Trees"</em>) combines | |
| Convolutional Neural Networks with Ayurvedic botanical wisdom to make | |
| plant identification and herbal knowledge accessible to everyone. | |
| </p> | |
| </div> | |
| <div class="stats-grid"> | |
| <div class="stat-box"> | |
| <span class="stat-number">80</span> | |
| <span class="stat-label">Plant Species</span> | |
| </div> | |
| <div class="stat-box"> | |
| <span class="stat-number">6,900+</span> | |
| <span class="stat-label">Training Images</span> | |
| </div> | |
| <div class="stat-box"> | |
| <span class="stat-number">5000+</span> | |
| <span class="stat-label">Years of Ayurveda</span> | |
| </div> | |
| <div class="stat-box"> | |
| <span class="stat-number">CNN</span> | |
| <span class="stat-label">Deep Learning Model</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- βββ PLANTS BROWSER ββββββββββββββββββββββββββββββββββββββββββββββββββββββββ --> | |
| <section class="plants-section" id="plants-section"> | |
| <div class="section-container"> | |
| <div class="section-header"> | |
| <span class="section-label">03 β Browse</span> | |
| <h2>All 80 Supported Species</h2> | |
| </div> | |
| <div class="search-bar-wrap"> | |
| <input type="text" id="plantSearch" placeholder="Search plant nameβ¦" class="plant-search" /> | |
| </div> | |
| <div class="plant-grid" id="plantGrid"></div> | |
| <div class="plant-detail-card" id="plantDetailCard" style="display:none"> | |
| <div class="plant-detail-head"> | |
| <p class="plant-detail-family" id="detailFamily"></p> | |
| <h3 class="plant-detail-name" id="detailName"></h3> | |
| <p class="plant-detail-botanical" id="detailBotanical"></p> | |
| <p class="plant-detail-ayurvedic" id="detailAyurvedic"></p> | |
| <p class="plant-detail-habitat" id="detailHabitat"></p> | |
| </div> | |
| <div class="plant-detail-grid"> | |
| <div class="plant-detail-block"> | |
| <h4>Medicinal Uses</h4> | |
| <ul id="detailUses"></ul> | |
| </div> | |
| <div class="plant-detail-block"> | |
| <h4>Active Compounds</h4> | |
| <div class="detail-tags" id="detailCompounds"></div> | |
| </div> | |
| <div class="plant-detail-block"> | |
| <h4>Ayurvedic Properties</h4> | |
| <div class="detail-rasa-grid" id="detailRasa"></div> | |
| </div> | |
| <div class="plant-detail-block"> | |
| <h4>Dosage, Parts & Precautions</h4> | |
| <p class="detail-dosage" id="detailDosage"></p> | |
| <div class="detail-tags" id="detailParts"></div> | |
| <p class="detail-precautions" id="detailPrecautions"></p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- βββ FOOTER ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ --> | |
| <footer class="site-footer"> | |
| <div class="footer-inner"> | |
| <div class="footer-logo"> | |
| <span class="footer-title">VrukshaVed</span> | |
| <span class="footer-sub">ΰ€΅ΰ₯ΰ€ΰ₯ΰ€·ΰ€΅ΰ₯ΰ€¦</span> | |
| </div> | |
| <p class="footer-note"> | |
| Dataset: <em>Indian Medicinal Leaves Image Datasets</em> β Pushpa B R, Shobha Rani (2023). | |
| DOI: 10.17632/748f8jkphb.3 Β· CC BY 4.0 | |
| </p> | |
| <p class="footer-disclaimer"> | |
| βοΈ For educational purposes only. Consult a qualified Ayurvedic practitioner before using any herbal remedy. | |
| </p> | |
| </div> | |
| </footer> | |
| <script src="static/js/app.js"></script> | |
| </body> | |
| </html> | |