Hugging Face's logo

Spaces:
pavan1221
/
imagerecogntion
Sleeping

App Files Community
pavan1221 commited on
Commit
eb8e7be
·
verified ·
1 Parent(s): d30c09d

Upload 5 files

Browse files
Files changed (5) hide show
  1. Dockerfile +12 -0
  2. Procfile +1 -0
  3. app.py +76 -0
  4. index (8).html +255 -0
  5. requirements.txt +8 -0
Dockerfile ADDED
@@ -0,0 +1,12 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ FROM python:3.10-slim
2
+
3
+ WORKDIR /app
4
+
5
+ COPY requirements.txt .
6
+ RUN pip install -r requirements.txt
7
+
8
+ COPY . .
9
+
10
+ EXPOSE 7860
11
+
12
+ CMD ["gunicorn", "app:app", "--bind", "0.0.0.0:7860"]
Procfile ADDED
@@ -0,0 +1 @@
 
 
1
+ web: gunicorn app:app
app.py ADDED
@@ -0,0 +1,76 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import os, re, json, base64, requests
2
+ from flask import Flask, request, jsonify, send_file
3
+ from flask_cors import CORS
4
+ from groq import Groq
5
+ from supabase import create_client, Client
6
+
7
+ app = Flask(__name__)
8
+ CORS(app)
9
+
10
+ client = Groq(api_key=os.environ["GROQ_API_KEY"])
11
+ supabase = create_client(os.environ["SUPABASE_URL"], os.environ["SUPABASE_KEY"])
12
+
13
+ def fetch_wikipedia(search_term):
14
+ search_term = search_term.replace(" ", "_")
15
+ url = f"https://en.wikipedia.org/api/rest_v1/page/summary/{search_term}"
16
+ return requests.get(url, headers={"User-Agent": "EucalyptusLens/1.0"}).json()
17
+
18
+ def clean_wikipedia(data):
19
+ summary = data.get("extract", "")
20
+ summary = re.sub(r'\[.*?\]', '', summary)
21
+ summary = re.sub(r'\s{2,}', ' ', summary)
22
+ summary = re.sub(r'[^\x00-\x7F]+', '', summary).strip()
23
+ return {"title": data.get("title",""), "summary": summary, "url": data.get("content_urls",{}).get("desktop",{}).get("page","")}
24
+
25
+ def build_rag_context(c):
26
+ return f"Plant: {c['title']}\nSummary: {c['summary']}\nSource: {c['url']}\n"
27
+
28
+ def identify_plant(image_path):
29
+ with open(image_path,"rb") as f:
30
+ b64 = base64.b64encode(f.read()).decode("utf-8")
31
+ response = client.chat.completions.create(
32
+ model="meta-llama/llama-4-scout-17b-16e-instruct",
33
+ messages=[{"role":"user","content":[
34
+ {"type":"image_url","image_url":{"url":f"data:image/jpeg;base64,{b64}"}},
35
+ {"type":"text","text":'''You are an expert botanist. Respond in JSON only:
36
+ {"common_name":"...","scientific_name":"...","family":"...","confidence":"high/medium/low","key_features":["..."],"wikipedia_search_term":"..."}'''}
37
+ ]}],
38
+ temperature=0.2, max_tokens=500
39
+ )
40
+ return json.loads(re.sub(r'```json|```','',response.choices[0].message.content).strip())
41
+
42
+ def analyze_plant(image_path):
43
+ plant = identify_plant(image_path)
44
+ cleaned = clean_wikipedia(fetch_wikipedia(plant.get("wikipedia_search_term", plant.get("common_name",""))))
45
+ return {"identification": plant, "wikipedia": build_rag_context(cleaned)}
46
+
47
+ def save_to_supabase(result):
48
+ id = result["identification"]
49
+ supabase.table("plant_history").insert({
50
+ "common_name": id.get("common_name"), "scientific_name": id.get("scientific_name"),
51
+ "family": id.get("family"), "confidence": id.get("confidence"),
52
+ "key_features": id.get("key_features"), "wikipedia_summary": result["wikipedia"],
53
+ "wikipedia_url": id.get("wikipedia_search_term")
54
+ }).execute()
55
+
56
+ @app.route("/")
57
+ def index():
58
+ return send_file("index.html")
59
+
60
+ @app.route("/analyze", methods=["POST"])
61
+ def analyze():
62
+ if "file" not in request.files:
63
+ return jsonify({"error": "No file"}), 400
64
+ file = request.files["file"]
65
+ file.save("temp.jpg")
66
+ result = analyze_plant("temp.jpg")
67
+ os.remove("temp.jpg")
68
+ save_to_supabase(result)
69
+ return jsonify(result)
70
+
71
+ @app.route("/history", methods=["GET"])
72
+ def history():
73
+ return jsonify(supabase.table("plant_history").select("*").order("created_at", desc=True).execute().data)
74
+
75
+ if __name__ == "__main__":
76
+ app.run(host="0.0.0.0", port=int(os.environ.get("PORT", 5000)))
index (8).html ADDED
@@ -0,0 +1,255 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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, maximum-scale=1.0, user-scalable=no">
6
+ <meta name="apple-mobile-web-app-capable" content="yes">
7
+ <meta name="theme-color" content="#f7f3ee">
8
+ <title>EucalyptusLens</title>
9
+ <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">
10
+ <style>
11
+ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
12
+ :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}
13
+ html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
14
+ body{background:var(--bg);color:var(--text);font-family:'Outfit',sans-serif;font-weight:300;min-height:100dvh;overflow-x:hidden}
15
+ 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}
16
+ *{position:relative;z-index:1}
17
+ 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}
18
+ .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}
19
+ .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}
20
+ .nav-right{display:flex;align-items:center;gap:12px}
21
+ .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}
22
+ .nav-tabs{display:flex;gap:4px}
23
+ .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}
24
+ .nav-tab.active{background:linear-gradient(135deg,var(--periwinkle),var(--mauve));color:white;box-shadow:0 2px 8px rgba(123,143,212,0.25)}
25
+ .nav-tab:hover:not(.active){background:var(--bg2);color:var(--text2)}
26
+ .hero{text-align:center;padding:56px 24px 44px;animation:fadeUp 0.7s ease both}
27
+ .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}
28
+ .hero-tag::before,.hero-tag::after{content:'';width:28px;height:1px;background:var(--border2)}
29
+ .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}
30
+ .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}
31
+ .hero p{font-size:15px;color:var(--text2);max-width:420px;margin:0 auto;line-height:1.75}
32
+ .main{max-width:960px;margin:0 auto;padding:0 24px 80px}
33
+ .upload-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
34
+ .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}
35
+ .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}
36
+ .drop-zone:hover::after,.drop-zone.dragover::after{opacity:1}
37
+ .drop-zone:hover,.drop-zone.dragover{border-color:var(--periwinkle);transform:translateY(-2px);box-shadow:0 8px 28px rgba(123,143,212,0.12)}
38
+ .drop-zone:active{transform:scale(0.98)}
39
+ .zone-icon{width:52px;height:52px;margin:0 auto 14px;border-radius:14px;display:flex;align-items:center;justify-content:center}
40
+ .upload-icon{background:linear-gradient(135deg,rgba(123,143,212,0.15),rgba(201,123,168,0.15))}
41
+ .camera-icon-bg{background:linear-gradient(135deg,rgba(74,171,181,0.15),rgba(138,170,106,0.15))}
42
+ .drop-zone h3{font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:500;color:var(--ink);margin-bottom:5px}
43
+ .drop-zone p{font-size:12px;color:var(--text3);line-height:1.5}
44
+ .formats{font-family:'DM Mono',monospace;font-size:9px;color:var(--text3);margin-top:10px;letter-spacing:0.1em}
45
+ #fileInput{display:none}
46
+ .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}
47
+ .camera-zone:hover{box-shadow:0 8px 28px rgba(74,171,181,0.10)}
48
+ #cameraFeed{width:100%;flex:1;object-fit:cover;display:none}
49
+ #cameraCanvas{display:none}
50
+ .camera-placeholder{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 20px;text-align:center}
51
+ .camera-controls{display:flex;gap:8px;padding:12px;background:var(--bg2);border-top:1px solid var(--border);justify-content:center;flex-wrap:wrap}
52
+ .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}
53
+ .preview-header{display:flex;align-items:center;justify-content:space-between;padding:10px 18px;border-bottom:1px solid var(--border);background:var(--bg2)}
54
+ .preview-header span{font-family:'DM Mono',monospace;font-size:10px;color:var(--text3);letter-spacing:0.12em;text-transform:uppercase}
55
+ #previewImage{width:100%;max-height:260px;object-fit:contain;padding:16px}
56
+ .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}
57
+ .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}
58
+ .btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(123,143,212,0.35)}
59
+ .btn-primary:active{transform:scale(0.98)}
60
+ .btn-primary:disabled{opacity:0.4;cursor:not-allowed;transform:none;box-shadow:none}
61
+ .btn-secondary{background:var(--surface);color:var(--text2);border:1px solid var(--border);font-size:10px;padding:9px 16px}
62
+ .btn-secondary:hover{background:var(--bg2);border-color:var(--periwinkle);color:var(--periwinkle)}
63
+ .btn-danger{background:transparent;color:var(--rose);border:1px solid rgba(201,123,168,0.3);font-size:10px;padding:6px 14px}
64
+ .btn-danger:hover{background:rgba(201,123,168,0.08)}
65
+ .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)}
66
+ .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}
67
+ .loading p{font-family:'DM Mono',monospace;font-size:11px;color:var(--text3);letter-spacing:0.15em}
68
+ .loading-steps{margin-top:14px;display:flex;flex-direction:column;gap:7px;align-items:center}
69
+ .loading-step{font-size:11px;color:var(--text3);font-family:'DM Mono',monospace;opacity:0;animation:fadeIn 0.5s ease forwards}
70
+ .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}
71
+ .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))}
72
+ .result-name{font-family:'Cormorant Garamond',serif;font-size:clamp(24px,5vw,32px);font-weight:500;color:var(--ink);line-height:1.1}
73
+ .result-scientific{font-family:'Cormorant Garamond',serif;font-size:15px;font-style:italic;color:var(--mauve);margin-top:4px}
74
+ .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}
75
+ .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)}
76
+ .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)}
77
+ .confidence-low{background:rgba(201,123,168,0.12);color:var(--rose);border:1px solid rgba(201,123,168,0.3)}
78
+ .result-body{padding:22px 24px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
79
+ .result-section h4{font-family:'DM Mono',monospace;font-size:9px;color:var(--text3);letter-spacing:0.2em;text-transform:uppercase;margin-bottom:10px}
80
+ .result-section p{font-size:14px;color:var(--text);line-height:1.7}
81
+ .features-list{display:flex;flex-direction:column;gap:7px}
82
+ .feature-item{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--text2);line-height:1.4}
83
+ .feature-dot{width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,var(--periwinkle),var(--rose));flex-shrink:0;margin-top:4px}
84
+ .wiki-section{grid-column:1/-1;padding-top:18px;border-top:1px solid var(--border)}
85
+ .wiki-text{font-size:13px;color:var(--text2);line-height:1.85}
86
+ .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}
87
+ .wiki-link:hover{color:var(--mauve)}
88
+ .history-section{display:none;animation:fadeUp 0.4s ease both}
89
+ .history-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
90
+ .history-header h2{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:400;color:var(--ink)}
91
+ .history-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
92
+ .history-card{border:1px solid var(--border);border-radius:14px;padding:18px;background:var(--surface);transition:all 0.2s;cursor:pointer}
93
+ .history-card:hover{border-color:var(--periwinkle);transform:translateY(-2px);box-shadow:0 8px 24px rgba(123,143,212,0.12)}
94
+ .history-card-name{font-family:'Cormorant Garamond',serif;font-size:19px;color:var(--ink);margin-bottom:2px}
95
+ .history-card-scientific{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:12px;color:var(--mauve);margin-bottom:12px}
96
+ .history-card-meta{display:flex;align-items:center;justify-content:space-between}
97
+ .history-card-date{font-family:'DM Mono',monospace;font-size:9px;color:var(--text3)}
98
+ .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}
99
+ 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}
100
+ footer p{font-family:'DM Mono',monospace;font-size:10px;color:var(--text3);letter-spacing:0.08em}
101
+ .footer-stack{display:flex;gap:6px;flex-wrap:wrap}
102
+ .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)}
103
+ .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}
104
+ .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}
105
+ .bottom-nav-item.active{background:linear-gradient(135deg,rgba(123,143,212,0.12),rgba(201,123,168,0.12))}
106
+ .bottom-nav-item span{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:0.08em;color:var(--text3);text-transform:uppercase}
107
+ .bottom-nav-item.active span{color:var(--mauve)}
108
+ @keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
109
+ @keyframes fadeIn{from{opacity:0}to{opacity:0.7}}
110
+ @keyframes spin{to{transform:rotate(360deg)}}
111
+ @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}}
112
+ @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}}
113
+ </style>
114
+ </head>
115
+ <body>
116
+ <nav>
117
+ <div class="logo">Eucalyptus<span>Lens</span></div>
118
+ <div class="nav-right">
119
+ <div class="nav-badge">LLaMA 4 Scout</div>
120
+ <div class="nav-tabs">
121
+ <button class="nav-tab active" onclick="showTab('identify')" id="tab-identify">Identify</button>
122
+ <button class="nav-tab" onclick="showTab('history')" id="tab-history">History</button>
123
+ </div>
124
+ </div>
125
+ </nav>
126
+ <div class="hero">
127
+ <div class="hero-tag">AI Plant Recognition</div>
128
+ <h1>Identify <em>any</em><br>plant instantly</h1>
129
+ <p>Upload a photo or use your camera. Our AI identifies plants and enriches results with botanical knowledge.</p>
130
+ </div>
131
+ <div class="main">
132
+ <div id="identify-section">
133
+ <div class="upload-grid">
134
+ <div class="drop-zone" id="dropZone" onclick="document.getElementById('fileInput').click()">
135
+ <div class="zone-icon upload-icon">
136
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
137
+ <path d="M12 15V5M8 9l4-4 4 4" stroke="url(#ug)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
138
+ <path d="M4 17v1a2 2 0 002 2h12a2 2 0 002-2v-1" stroke="url(#ug)" stroke-width="1.5" stroke-linecap="round"/>
139
+ <defs><linearGradient id="ug" x1="4" y1="4" x2="20" y2="20"><stop stop-color="#7b8fd4"/><stop offset="1" stop-color="#c97ba8"/></linearGradient></defs>
140
+ </svg>
141
+ </div>
142
+ <h3>Upload Image</h3>
143
+ <p>Drop a photo here<br>or tap to browse</p>
144
+ <div class="formats">JPG · PNG · WEBP · HEIC</div>
145
+ </div>
146
+ <input type="file" id="fileInput" accept="image/*">
147
+ <div class="camera-zone" id="cameraZone">
148
+ <video id="cameraFeed" autoplay playsinline></video>
149
+ <canvas id="cameraCanvas"></canvas>
150
+ <div class="camera-placeholder" id="cameraPlaceholder">
151
+ <div class="zone-icon camera-icon-bg">
152
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
153
+ <rect x="2" y="7" width="20" height="13" rx="3" stroke="url(#cg)" stroke-width="1.5" fill="none"/>
154
+ <circle cx="12" cy="13" r="3.5" stroke="url(#cg)" stroke-width="1.5" fill="none"/>
155
+ <path d="M8 7l1.5-2.5h5L16 7" stroke="url(#cg)" stroke-width="1.5" stroke-linecap="round"/>
156
+ <defs><linearGradient id="cg" x1="2" y1="7" x2="22" y2="20"><stop stop-color="#4aabb5"/><stop offset="1" stop-color="#8aaa6a"/></linearGradient></defs>
157
+ </svg>
158
+ </div>
159
+ <h3>Use Camera</h3>
160
+ <p>Take a live photo</p>
161
+ </div>
162
+ <div class="camera-controls">
163
+ <button class="btn btn-secondary" onclick="startCamera()" id="btnStartCamera">Start</button>
164
+ <button class="btn btn-secondary" onclick="capturePhoto()" id="btnCapture" style="display:none;">Capture</button>
165
+ <button class="btn btn-secondary" onclick="stopCamera()" id="btnStopCamera" style="display:none;">Stop</button>
166
+ </div>
167
+ </div>
168
+ </div>
169
+ <div class="preview-container" id="previewContainer">
170
+ <div class="preview-header">
171
+ <span>Preview</span>
172
+ <button class="btn btn-danger" onclick="clearImage()">Clear</button>
173
+ </div>
174
+ <img id="previewImage" src="" alt="Preview">
175
+ </div>
176
+ <button class="btn btn-primary" id="btnAnalyze" onclick="analyzeImage()" disabled>Analyze Plant</button>
177
+ <div style="margin-top:14px;">
178
+ <div class="loading" id="loading">
179
+ <div class="loading-spinner"></div>
180
+ <p>Analyzing your plant...</p>
181
+ <div class="loading-steps">
182
+ <div class="loading-step" style="animation-delay:0.5s">Processing image with LLaMA 4 Scout</div>
183
+ <div class="loading-step" style="animation-delay:1.5s">Fetching botanical data from Wikipedia</div>
184
+ <div class="loading-step" style="animation-delay:2.5s">Building knowledge context</div>
185
+ </div>
186
+ </div>
187
+ <div class="result-card" id="resultCard">
188
+ <div class="result-header">
189
+ <div>
190
+ <div class="result-name" id="resultName"></div>
191
+ <div class="result-scientific" id="resultScientific"></div>
192
+ </div>
193
+ <div class="confidence-badge" id="confidenceBadge"></div>
194
+ </div>
195
+ <div class="result-body">
196
+ <div class="result-section"><h4>Family</h4><p id="resultFamily"></p></div>
197
+ <div class="result-section"><h4>Key Features</h4><div class="features-list" id="resultFeatures"></div></div>
198
+ <div class="result-section wiki-section">
199
+ <h4>Botanical Overview</h4>
200
+ <p class="wiki-text" id="resultWiki"></p>
201
+ <a href="#" class="wiki-link" id="resultWikiLink" target="_blank">Read on Wikipedia →</a>
202
+ </div>
203
+ </div>
204
+ </div>
205
+ </div>
206
+ </div>
207
+ <div id="history-section" class="history-section" style="display:none;">
208
+ <div class="history-header">
209
+ <h2>Scan History</h2>
210
+ <button class="btn btn-secondary" onclick="loadHistory()">Refresh</button>
211
+ </div>
212
+ <div id="historyGrid" class="history-grid">
213
+ <div class="history-empty">No scans yet. Identify your first plant.</div>
214
+ </div>
215
+ </div>
216
+ </div>
217
+ <footer>
218
+ <p>EucalyptusLens — AI Botanical Intelligence</p>
219
+ <div class="footer-stack">
220
+ <span class="stack-badge">LLaMA 4 Scout</span>
221
+ <span class="stack-badge">Wikipedia RAG</span>
222
+ <span class="stack-badge">Flask</span>
223
+ <span class="stack-badge">Supabase</span>
224
+ </div>
225
+ </footer>
226
+ <div class="bottom-nav">
227
+ <button class="bottom-nav-item active" onclick="showTab('identify')" id="bnav-identify">
228
+ <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>
229
+ <span>Identify</span>
230
+ </button>
231
+ <button class="bottom-nav-item" onclick="showTab('history')" id="bnav-history">
232
+ <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>
233
+ <span>History</span>
234
+ </button>
235
+ </div>
236
+ <script>
237
+ const API = "https://inscrutable-reprehensibly-dwain.ngrok-free.dev";
238
+ let currentFile=null,cameraStream=null;
239
+ 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'})}
240
+ const dropZone=document.getElementById('dropZone');
241
+ dropZone.addEventListener('dragover',e=>{e.preventDefault();dropZone.classList.add('dragover')});
242
+ dropZone.addEventListener('dragleave',()=>dropZone.classList.remove('dragover'));
243
+ dropZone.addEventListener('drop',e=>{e.preventDefault();dropZone.classList.remove('dragover');const f=e.dataTransfer.files[0];if(f&&f.type.startsWith('image/'))setImage(f)});
244
+ document.getElementById('fileInput').addEventListener('change',e=>{if(e.target.files[0])setImage(e.target.files[0])});
245
+ 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)}
246
+ 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=''}
247
+ 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.')}}
248
+ 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)}
249
+ 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'}
250
+ 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}}
251
+ 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'})}
252
+ 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>'}}
253
+ </script>
254
+ </body>
255
+ </html>
requirements.txt ADDED
@@ -0,0 +1,8 @@
 
 
 
 
 
 
 
 
 
1
+ flask
2
+ flask-cors
3
+ groq
4
+ supabase
5
+ requests
6
+ pillow
7
+ beautifulsoup4
8
+ gunicorn