Hugging Face's logo

Spaces:
omkhk
/
vrukshaved-app
Running

App Files Community
omkhk commited on
Commit
628aab1
Β·
verified Β·
1 Parent(s): e70da0c

Upload index.html with huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +320 -19
index.html CHANGED
@@ -1,19 +1,320 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>VrukshaVed β€” Ayurvedic Plant Intelligence</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9
+ <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" />
10
+ <link rel="stylesheet" href="static/css/style.css" />
11
+ </head>
12
+ <body>
13
+
14
+ <!-- ═══ BACKGROUND ══════════════════════════════════════════════════════════ -->
15
+ <div class="bg-layer">
16
+ <div class="mandala-ring ring-1"></div>
17
+ <div class="mandala-ring ring-2"></div>
18
+ <div class="mandala-ring ring-3"></div>
19
+ <div class="leaf-scatter" id="leafScatter"></div>
20
+ </div>
21
+
22
+ <!-- ═══ HEADER ══════════════════════════════════════════════════════════════ -->
23
+ <header class="site-header">
24
+ <div class="header-inner">
25
+ <div class="logo-group">
26
+ <div class="logo-icon">
27
+ <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
28
+ <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"/>
29
+ <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"/>
30
+ <path d="M24 8C18 22 30 26 24 44" stroke="#4d9e40" stroke-width="2" stroke-linecap="round" fill="none"/>
31
+ <defs>
32
+ <linearGradient id="lg1" x1="8" y1="4" x2="40" y2="44" gradientUnits="userSpaceOnUse">
33
+ <stop stop-color="#a8e06a"/>
34
+ <stop offset="1" stop-color="#2d7a22"/>
35
+ </linearGradient>
36
+ </defs>
37
+ </svg>
38
+ </div>
39
+ <div class="logo-text">
40
+ <h1 class="site-title">VrukshaVed</h1>
41
+ <p class="site-tagline">ΰ€΅ΰ₯ƒΰ€•ΰ₯ΰ€·ΰ€΅ΰ₯‡ΰ€¦ Β· Ayurvedic Plant Intelligence</p>
42
+ </div>
43
+ </div>
44
+ <nav class="header-nav">
45
+ <a href="#upload-section">Identify</a>
46
+ <a href="#about-section">About</a>
47
+ <a href="#plants-section">Plants</a>
48
+ </nav>
49
+ </div>
50
+ </header>
51
+
52
+ <!-- ═══ HERO ═════════════════════════════════════════════════════════════════ -->
53
+ <section class="hero">
54
+ <div class="hero-content">
55
+ <div class="hero-badge">CNN Β· Deep Learning Β· Ayurveda</div>
56
+ <h2 class="hero-headline">
57
+ Identify <em>Sacred Plants</em><br />
58
+ Unlock <em>Ancient Wisdom</em>
59
+ </h2>
60
+ <p class="hero-subtext">
61
+ Upload a leaf photograph and let our CNN model β€” trained on 6,900+ images
62
+ of 80 Indian medicinal species β€” reveal the plant and its Ayurvedic healing properties.
63
+ </p>
64
+ <a href="#upload-section" class="cta-btn">
65
+ <span>Identify a Leaf</span>
66
+ <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>
67
+ </a>
68
+ </div>
69
+ <div class="hero-decoration">
70
+ <div class="deco-circle c1"></div>
71
+ <div class="deco-circle c2"></div>
72
+ <div class="rotating-mandala">✦</div>
73
+ </div>
74
+ </section>
75
+
76
+ <!-- ═══ UPLOAD SECTION ═══════════════════════════════════════════════════════ -->
77
+ <section class="upload-section" id="upload-section">
78
+ <div class="section-container">
79
+ <div class="section-header">
80
+ <span class="section-label">01 β€” Identify</span>
81
+ <h2>Upload or Capture a Leaf</h2>
82
+ <p>Supported: JPG, PNG, WEBP Β· Max 10MB Β· Best results with a single clear leaf on any background</p>
83
+ </div>
84
+
85
+ <div class="upload-area" id="uploadArea">
86
+ <div class="upload-idle" id="uploadIdle">
87
+ <div class="upload-icon">
88
+ <svg viewBox="0 0 64 64" fill="none">
89
+ <circle cx="32" cy="32" r="30" stroke="currentColor" stroke-width="1.5" stroke-dasharray="4 3"/>
90
+ <path d="M32 44V20M22 30l10-10 10 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
91
+ </svg>
92
+ </div>
93
+ <p class="upload-main-text">Drop leaf image here</p>
94
+ <p class="upload-sub-text">or choose an option below</p>
95
+ <div class="upload-buttons">
96
+ <label for="fileInput" class="btn-upload">
97
+ <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>
98
+ Upload File
99
+ </label>
100
+ <button class="btn-camera" id="cameraBtn">
101
+ <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>
102
+ Use Camera
103
+ </button>
104
+ </div>
105
+ <input type="file" id="fileInput" accept="image/*" style="display:none" />
106
+ </div>
107
+
108
+ <!-- Camera view -->
109
+ <div class="camera-view" id="cameraView" style="display:none">
110
+ <video id="cameraFeed" autoplay playsinline></video>
111
+ <div class="camera-overlay">
112
+ <div class="camera-frame"></div>
113
+ <p class="camera-hint">Position leaf inside the frame</p>
114
+ </div>
115
+ <div class="camera-controls">
116
+ <button class="btn-capture" id="captureBtn">
117
+ <span class="capture-ring"></span>
118
+ Capture
119
+ </button>
120
+ <button class="btn-cancel-camera" id="cancelCameraBtn">βœ• Cancel</button>
121
+ </div>
122
+ <canvas id="cameraCanvas" style="display:none"></canvas>
123
+ </div>
124
+
125
+ <!-- Preview -->
126
+ <div class="image-preview" id="imagePreview" style="display:none">
127
+ <img id="previewImg" src="" alt="Leaf preview" />
128
+ <div class="preview-actions">
129
+ <button class="btn-analyze" id="analyzeBtn">
130
+ <span class="btn-text">Analyze Leaf</span>
131
+ <span class="btn-spinner" style="display:none">
132
+ <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>
133
+ Analyzing…
134
+ </span>
135
+ </button>
136
+ <button class="btn-clear" id="clearBtn">βœ• Clear</button>
137
+ </div>
138
+ </div>
139
+ </div>
140
+ </div>
141
+ </section>
142
+
143
+ <!-- ═══ RESULTS SECTION ══════════════════════════════════════════════════════ -->
144
+ <section class="results-section" id="resultsSection" style="display:none">
145
+ <div class="section-container">
146
+ <div class="section-header">
147
+ <span class="section-label">02 β€” Result</span>
148
+ <h2>Plant Identified</h2>
149
+ </div>
150
+
151
+ <!-- Top Prediction Card -->
152
+ <div class="result-hero-card" id="resultHeroCard">
153
+ <div class="result-leaf-thumb">
154
+ <img id="resultThumb" src="" alt="Analyzed leaf" />
155
+ <div class="confidence-badge" id="confidenceBadge"></div>
156
+ </div>
157
+ <div class="result-identity">
158
+ <p class="result-family" id="resultFamily"></p>
159
+ <h2 class="result-common-name" id="resultCommonName"></h2>
160
+ <p class="result-botanical" id="resultBotanical"></p>
161
+ <p class="result-ayurvedic" id="resultAyurvedic"></p>
162
+ <p class="result-habitat" id="resultHabitat"></p>
163
+ <div class="demo-warning" id="demoWarning" style="display:none">
164
+ ⚠️ Demo Mode β€” Place your <code>model.pth</code> in the <code>backend/</code> folder for real predictions.
165
+ </div>
166
+ </div>
167
+ </div>
168
+
169
+ <!-- Medicinal Info -->
170
+ <div class="medicinal-grid" id="medicinalGrid">
171
+
172
+ <div class="med-card uses-card">
173
+ <div class="med-card-header">
174
+ <span class="med-icon">🌿</span>
175
+ <h3>Medicinal Uses</h3>
176
+ </div>
177
+ <ul class="uses-list" id="usesList"></ul>
178
+ </div>
179
+
180
+ <div class="med-card compounds-card">
181
+ <div class="med-card-header">
182
+ <span class="med-icon">βš—οΈ</span>
183
+ <h3>Active Compounds</h3>
184
+ </div>
185
+ <div class="compounds-tags" id="compoundsTags"></div>
186
+ </div>
187
+
188
+ <div class="med-card rasa-card">
189
+ <div class="med-card-header">
190
+ <span class="med-icon">☯</span>
191
+ <h3>Ayurvedic Properties</h3>
192
+ </div>
193
+ <div class="rasa-grid" id="rasaGrid"></div>
194
+ </div>
195
+
196
+ <div class="med-card dosage-card">
197
+ <div class="med-card-header">
198
+ <span class="med-icon">πŸ“‹</span>
199
+ <h3>Dosage & Parts Used</h3>
200
+ </div>
201
+ <p class="dosage-text" id="dosageText"></p>
202
+ <div class="parts-tags" id="partsTags"></div>
203
+ <div class="precaution-box" id="precautionBox"></div>
204
+ </div>
205
+
206
+ </div>
207
+
208
+ <!-- Top 5 Predictions -->
209
+ <div class="top5-section">
210
+ <h3 class="top5-title">Top 5 Predictions</h3>
211
+ <div class="top5-bars" id="top5Bars"></div>
212
+ </div>
213
+
214
+ <div class="result-actions">
215
+ <button class="btn-new-scan" onclick="resetApp()">↩ Scan Another Leaf</button>
216
+ </div>
217
+
218
+ </div>
219
+ </section>
220
+
221
+ <!-- ═══ ABOUT SECTION ════════════════════════════════════════════════════════ -->
222
+ <section class="about-section" id="about-section">
223
+ <div class="section-container">
224
+ <div class="about-grid">
225
+ <div class="about-text">
226
+ <span class="section-label">About VrukshaVed</span>
227
+ <h2>Bridging Ancient Knowledge<br />with Modern AI</h2>
228
+ <p>
229
+ VrukshaVed (Sanskrit: ΰ€΅ΰ₯ƒΰ€•ΰ₯ΰ€·ΰ€΅ΰ₯‡ΰ€¦ β€” <em>"Knowledge of Trees"</em>) combines
230
+ Convolutional Neural Networks with Ayurvedic botanical wisdom to make
231
+ plant identification and herbal knowledge accessible to everyone.
232
+ </p>
233
+ </div>
234
+ <div class="stats-grid">
235
+ <div class="stat-box">
236
+ <span class="stat-number">80</span>
237
+ <span class="stat-label">Plant Species</span>
238
+ </div>
239
+ <div class="stat-box">
240
+ <span class="stat-number">6,900+</span>
241
+ <span class="stat-label">Training Images</span>
242
+ </div>
243
+ <div class="stat-box">
244
+ <span class="stat-number">5000+</span>
245
+ <span class="stat-label">Years of Ayurveda</span>
246
+ </div>
247
+ <div class="stat-box">
248
+ <span class="stat-number">CNN</span>
249
+ <span class="stat-label">Deep Learning Model</span>
250
+ </div>
251
+ </div>
252
+ </div>
253
+ </div>
254
+ </section>
255
+
256
+ <!-- ═══ PLANTS BROWSER ════════════════════════════════════════════════════════ -->
257
+ <section class="plants-section" id="plants-section">
258
+ <div class="section-container">
259
+ <div class="section-header">
260
+ <span class="section-label">03 β€” Browse</span>
261
+ <h2>All 80 Supported Species</h2>
262
+ </div>
263
+ <div class="search-bar-wrap">
264
+ <input type="text" id="plantSearch" placeholder="Search plant name…" class="plant-search" />
265
+ </div>
266
+ <div class="plant-grid" id="plantGrid"></div>
267
+
268
+ <div class="plant-detail-card" id="plantDetailCard" style="display:none">
269
+ <div class="plant-detail-head">
270
+ <p class="plant-detail-family" id="detailFamily"></p>
271
+ <h3 class="plant-detail-name" id="detailName"></h3>
272
+ <p class="plant-detail-botanical" id="detailBotanical"></p>
273
+ <p class="plant-detail-ayurvedic" id="detailAyurvedic"></p>
274
+ <p class="plant-detail-habitat" id="detailHabitat"></p>
275
+ </div>
276
+
277
+ <div class="plant-detail-grid">
278
+ <div class="plant-detail-block">
279
+ <h4>Medicinal Uses</h4>
280
+ <ul id="detailUses"></ul>
281
+ </div>
282
+ <div class="plant-detail-block">
283
+ <h4>Active Compounds</h4>
284
+ <div class="detail-tags" id="detailCompounds"></div>
285
+ </div>
286
+ <div class="plant-detail-block">
287
+ <h4>Ayurvedic Properties</h4>
288
+ <div class="detail-rasa-grid" id="detailRasa"></div>
289
+ </div>
290
+ <div class="plant-detail-block">
291
+ <h4>Dosage, Parts & Precautions</h4>
292
+ <p class="detail-dosage" id="detailDosage"></p>
293
+ <div class="detail-tags" id="detailParts"></div>
294
+ <p class="detail-precautions" id="detailPrecautions"></p>
295
+ </div>
296
+ </div>
297
+ </div>
298
+ </div>
299
+ </section>
300
+
301
+ <!-- ═══ FOOTER ════════════════════════════════════════════════════════════════ -->
302
+ <footer class="site-footer">
303
+ <div class="footer-inner">
304
+ <div class="footer-logo">
305
+ <span class="footer-title">VrukshaVed</span>
306
+ <span class="footer-sub">ΰ€΅ΰ₯ƒΰ€•ΰ₯ΰ€·ΰ€΅ΰ₯‡ΰ€¦</span>
307
+ </div>
308
+ <p class="footer-note">
309
+ Dataset: <em>Indian Medicinal Leaves Image Datasets</em> β€” Pushpa B R, Shobha Rani (2023).
310
+ DOI: 10.17632/748f8jkphb.3 Β· CC BY 4.0
311
+ </p>
312
+ <p class="footer-disclaimer">
313
+ βš•οΈ For educational purposes only. Consult a qualified Ayurvedic practitioner before using any herbal remedy.
314
+ </p>
315
+ </div>
316
+ </footer>
317
+
318
+ <script src="static/js/app.js"></script>
319
+ </body>
320
+ </html>