Hugging Face's logo

Spaces:
omkhk
/
vrukshaved-app
Running

App Files Community
vrukshaved-app
File size: 14,374 Bytes
628aab1
 
 
 
 
 
 
 
 
 
 
448f1b3
628aab1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
448f1b3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
<!DOCTYPE html>
<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>