agrosense / web /index.html
johnpitteera's picture
Upload folder using huggingface_hub
d27b187 verified
Raw
History Blame Contribute Delete
22.8 kB
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AgroSense — Intelligent Farming Advisor</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header class="topbar">
<div class="datebar">
<span id="dt-greg">📅 …</span>
<span id="dt-saka">🪔 …</span>
<span id="dt-ist">🕐 …</span>
</div>
<div class="row" style="margin-top:6px; gap:8px;">
<label class="field" style="min-width:140px"><span>News region</span>
<select id="news-region"></select></label>
<label class="field" style="min-width:140px"><span>News topic</span>
<select id="news-topic"></select></label>
</div>
<div class="ticker-wrap"><div class="ticker" id="news-ticker">📰 Loading headlines…</div></div>
<div class="ticker-wrap"><div class="ticker cmd" id="cmd-ticker">💹 Loading commodities…</div></div>
</header>
<div class="container">
<div class="brand"><span class="logo">🌱</span><h1>AgroSense</h1>
<span class="muted small">Intelligent RAG-based farming advisor</span>
<a class="small" href="/landing" target="_blank" style="margin-left:8px">🏠 Landing page</a>
<div class="dropdown" style="margin-left:auto">
<button class="dd-toggle" id="docs-toggle">📘 Docs ▾</button>
<div class="dd-menu" id="docs-menu">
<div class="dd-head">Documentation</div>
<div class="dd-item"><span>User Manual</span><a href="/downloads/user-manual.pdf" target="_blank">PDF</a><a href="/downloads/user-manual.docx">Word</a></div>
<div class="dd-item"><span>Technical Guide</span><a href="/downloads/technical-guide.pdf" target="_blank">PDF</a><a href="/downloads/technical-guide.docx">Word</a></div>
<div class="dd-item"><span>SOP</span><a href="/downloads/sop.pdf" target="_blank">PDF</a><a href="/downloads/sop.docx">Word</a></div>
<div class="dd-sep"></div>
<div class="dd-head">Business</div>
<div class="dd-item"><span>GTM &amp; Monetization</span><a href="/downloads/gtm-plan.pdf" target="_blank">PDF</a><a href="/downloads/gtm-plan.docx">Word</a></div>
<div class="dd-sep"></div>
<div class="dd-head">Campaign kit</div>
<div class="dd-item"><span>Instagram</span><a href="/downloads/instagram-campaign.pdf" target="_blank">PDF</a><a href="/downloads/instagram-campaign.docx">Word</a></div>
<div class="dd-item"><span>Facebook</span><a href="/downloads/facebook-campaign.pdf" target="_blank">PDF</a><a href="/downloads/facebook-campaign.docx">Word</a></div>
<div class="dd-item"><span>LinkedIn</span><a href="/downloads/linkedin-campaign.pdf" target="_blank">PDF</a><a href="/downloads/linkedin-campaign.docx">Word</a></div>
<div class="dd-item"><span>30-day Calendar</span><a href="/downloads/content-calendar.pdf" target="_blank">PDF</a><a href="/downloads/content-calendar.docx">Word</a></div>
</div>
</div>
</div>
<!-- shared controls -->
<div class="controls">
<label class="field"><span>📍 Location</span>
<input id="loc" placeholder="e.g. Belagavi" /></label>
<label class="field"><span>🌐 Answer language</span>
<select id="lang"></select></label>
<label class="field"><span>🌾 Crop</span>
<input id="crop" placeholder="e.g. Tomato" /></label>
<label class="field"><span>Growth stage</span>
<select id="stage">
<option value="">(any)</option><option>seedling</option>
<option>vegetative</option><option>flowering</option><option>maturity</option>
</select></label>
</div>
<div class="tabs" id="tabs"></div>
<!-- ADVISOR -->
<section class="panel active" data-tab="Advisor">
<div class="card">
<h3>💬 Ask the advisor</h3>
<div class="advisor-head">
<div class="avatar" id="avatar" title="AgroBot — your speaking advisor">
<svg viewBox="0 0 120 120" aria-hidden="true">
<defs><radialGradient id="agroFace" cx="50%" cy="38%" r="65%">
<stop offset="0%" stop-color="#48e6a2"/><stop offset="100%" stop-color="#1d8a5c"/>
</radialGradient></defs>
<ellipse class="leaf" cx="60" cy="19" rx="15" ry="7" transform="rotate(-22 60 19)"/>
<circle class="face" cx="60" cy="66" r="40" fill="url(#agroFace)"/>
<circle class="eye" cx="47" cy="60" r="5"/>
<circle class="eye" cx="73" cy="60" r="5"/>
<ellipse class="mouth" cx="60" cy="82" rx="12" ry="5"/>
</svg>
<span class="ring"></span>
</div>
<div class="advisor-meta">
<div><b>AgroBot</b> <span class="muted small" id="tts-status">ready</span></div>
<div class="row" style="margin-top:5px">
<button id="speak-btn" class="ghost">🔊 Speak</button>
<button id="stop-btn" class="ghost">⏹ Stop</button>
<label class="toggle"><input type="checkbox" id="autospeak"> Auto-speak answers</label>
</div>
</div>
</div>
<textarea id="q" placeholder="e.g. My soil is sandy, rainfall 900mm, growing maize — fertilizer and pest steps?"></textarea>
<div class="row" style="margin:8px 0;">
<label class="toggle"><input type="checkbox" id="t-sat"> satellite</label>
<label class="toggle"><input type="checkbox" id="t-adv"> advisories</label>
<label class="toggle"><input type="checkbox" id="t-prices"> prices</label>
<button id="ask">Ask</button>
</div>
<div id="answer"></div>
</div>
</section>
<!-- LOCATION INTEL -->
<section class="panel" data-tab="Location intel">
<div class="row" style="margin-bottom:10px;">
<button id="load-intel">Load for location</button>
<span class="muted small">weather · satellite · environment · planetary · hazards · advisories</span>
</div>
<div class="grid" id="intel"></div>
</section>
<!-- MARKET -->
<section class="panel" data-tab="Market">
<div class="grid">
<div class="card"><h3>💰 Mandi prices</h3>
<div class="row"><input id="price-commodity" placeholder="commodity e.g. Tomato" />
<input id="price-state" placeholder="state (optional)" />
<button id="load-prices">Get</button></div>
<div id="prices"></div>
</div>
<div class="card"><h3>💹 Commodities</h3><div id="commodities"></div></div>
</div>
<div class="card" style="margin-top:12px">
<h3>🤝 Farmer trading — buy &amp; sell produce</h3>
<p class="muted small">Post produce to <b>sell</b>, or a <b>buy</b> requirement, and
connect directly with the other party (in-app inquiry + a live deal video room).</p>
<div class="row">
<select id="tr-type"><option value="">All</option>
<option value="sell">Selling</option><option value="buy">Buying</option></select>
<input id="tr-commodity" placeholder="commodity (e.g. Tomato)" style="flex:1" />
<input id="tr-state" placeholder="state/place (optional)" style="width:150px" />
<button id="tr-find">Browse</button>
</div>
<div id="tr-list" style="margin-top:8px"></div>
</div>
<div id="tr-detail" style="margin-top:12px"></div>
<div class="card" style="margin-top:12px">
<h3>➕ Post a listing</h3>
<div class="row">
<label class="field" style="width:120px"><span>I want to</span>
<select id="nt-type"><option value="sell">Sell</option><option value="buy">Buy</option></select></label>
<label class="field" style="flex:1"><span>Commodity *</span><input id="nt-commodity" placeholder="e.g. Tomato" /></label>
<label class="field" style="width:110px"><span>Quantity *</span><input id="nt-quantity" placeholder="500" /></label>
<label class="field" style="width:110px"><span>Unit</span>
<select id="nt-unit"><option>kg</option><option>quintal</option><option>tonne</option><option>dozen</option><option>bag</option><option>piece</option></select></label>
<label class="field" style="width:130px"><span>Price (₹/unit)</span><input id="nt-price" placeholder="18" /></label>
</div>
<div class="row">
<label class="field" style="width:140px"><span>Grade/quality</span><input id="nt-grade" placeholder="Grade A" /></label>
<label class="field" style="flex:1"><span>Location</span><input id="nt-location" placeholder="e.g. Belagavi" /></label>
<label class="field" style="width:150px"><span>State</span><input id="nt-state" placeholder="e.g. Karnataka" /></label>
</div>
<div class="row">
<label class="field" style="flex:1"><span>Your name</span><input id="nt-seller" placeholder="optional" /></label>
<label class="field" style="flex:1"><span>Contact (optional)</span><input id="nt-contact" placeholder="phone / how to reach you" /></label>
</div>
<label class="field"><span>Description</span><textarea id="nt-description" placeholder="freshness, harvest date, transport, terms…"></textarea></label>
<button id="tr-create" style="margin-top:8px">Post listing</button>
<div id="nt-msg" class="cite"></div>
</div>
</section>
<!-- PLANT CLINIC & LIVE DOCTOR -->
<section class="panel" data-tab="🩺 Plant clinic">
<p class="muted small" style="margin:0 0 8px">Diagnose with AI (image + symptoms), then
<b>escalate to a verified human plant doctor</b> for a live consult.</p>
<div class="grid">
<div class="card"><h3>🌿 Image diagnosis</h3>
<input type="file" id="img" accept="image/*" />
<button id="classify" style="margin-top:8px;">Analyze image</button>
<div id="vision"></div>
</div>
<div class="card"><h3>🩺 Telemedicine</h3>
<textarea id="symptoms" placeholder="Describe symptoms, e.g. yellow spots spreading on lower leaves"></textarea>
<button id="consult" style="margin-top:8px;">Get consultation</button>
<div id="tele"></div>
</div>
</div>
<h3 style="margin:16px 0 6px;border-top:1px solid var(--border, #2a2a2a);padding-top:14px">
👨‍⚕️ Talk to a live plant doctor</h3>
<div class="grid">
<div class="card"><h3>👨‍⚕️ Request a live consult</h3>
<label class="field"><span>Your name</span><input id="farmer" value="Farmer" /></label>
<div class="row" style="margin-top:8px;">
<label class="field" style="flex:1"><span>Channel</span>
<select id="channel"><option>video</option><option>chat</option><option>phone</option></select></label>
<label class="field" style="flex:1"><span>Language</span>
<select id="consult-lang"><option value="">(any)</option><option>English</option>
<option>Hindi</option><option>Kannada</option><option>Telugu</option>
<option>Tamil</option><option>Gujarati</option><option>Urdu</option></select></label>
</div>
<button id="request-consult" style="margin-top:8px;">Request consultation</button>
<div id="consult-session"></div>
</div>
<div class="card"><h3>🧑‍🔬 Verified plant doctors</h3><div id="experts"></div></div>
<div class="card"><h3>🩺 Apply as a plant doctor</h3>
<div class="grid" style="grid-template-columns:repeat(auto-fit,minmax(150px,1fr))">
<label class="field"><span>Name *</span><input id="doc-name" /></label>
<label class="field"><span>Specialization *</span><input id="doc-spec" placeholder="e.g. Plant Pathology" /></label>
<label class="field"><span>Region *</span><input id="doc-region" /></label>
<label class="field"><span>Languages * (comma)</span><input id="doc-langs" placeholder="English, Hindi" /></label>
<label class="field"><span>Contact *</span><input id="doc-contact" placeholder="email / phone" /></label>
<label class="field"><span>Credentials *</span><input id="doc-cred" placeholder="qualification / degree" /></label>
<label class="field"><span>ICAR / Reg. no. *</span><input id="doc-reg" placeholder="e.g. ICAR-12345" /></label>
</div>
<button id="doc-apply" style="margin-top:8px">Submit application</button>
<div id="doc-apply-msg" class="cite"></div>
</div>
</div>
<div id="doctor-profile" style="margin-top:12px"></div>
</section>
<!-- CLUBS -->
<section class="panel" data-tab="👥 Clubs">
<div class="grid">
<div class="card">
<h3>👥 Find a farmers' club</h3>
<div class="row">
<select id="club-type"><option value="">All</option>
<option value="location">Location</option><option value="commodity">Commodity</option></select>
<input id="club-key" placeholder="state or crop (e.g. Karnataka, Tomato)" style="flex:1" />
<button id="club-find">Find</button>
</div>
<div id="clubs-list" style="margin-top:8px"></div>
</div>
<div class="card">
<h3>➕ Create a club</h3>
<label class="field"><span>Name *</span><input id="nc-name" placeholder="e.g. Mango Growers Club" /></label>
<div class="row">
<label class="field" style="flex:1"><span>Type</span>
<select id="nc-type"><option value="location">Location</option><option value="commodity">Commodity</option></select></label>
<label class="field" style="flex:1"><span>Location/Commodity *</span>
<input id="nc-key" placeholder="e.g. Kerala / Mango" /></label>
</div>
<label class="field"><span>Description</span><textarea id="nc-desc"></textarea></label>
<label class="field"><span>Your name (creator)</span><input id="nc-creator" placeholder="optional" /></label>
<button id="club-create" style="margin-top:8px">Create club</button>
<div id="nc-msg" class="cite"></div>
</div>
</div>
<div id="club-detail" style="margin-top:12px"></div>
</section>
<!-- TRADITIONAL -->
<section class="panel" data-tab="🪔 Traditional">
<div class="card">
<h3>🪔 Traditional Advisor</h3>
<p class="muted small">Indian traditional practices + Panchang (astrological) guidance
for daily farm activities. Uses your <b>Location</b> (sidebar) for area-specific practices.</p>
<div class="row">
<label class="field" style="flex:1"><span>Activity</span>
<select id="trad-activity">
<option value="general">General (today)</option>
<option value="sowing">Sowing</option>
<option value="transplanting">Transplanting</option>
<option value="ploughing">Ploughing</option>
<option value="fertilizing">Fertilizing</option>
<option value="seed_treatment">Seed treatment</option>
<option value="irrigation">Irrigation</option>
<option value="pest_control">Pest control</option>
<option value="weeding">Weeding</option>
<option value="harvesting">Harvesting</option>
<option value="mixed_cropping">Mixed cropping</option>
</select></label>
<button id="trad-go" style="align-self:flex-end">Get advice</button>
</div>
<div id="trad-out"></div>
</div>
</section>
<!-- FINANCE (bank assistance + government schemes/subsidies) -->
<section class="panel" data-tab="🏦 Finance">
<p class="muted small" style="margin:0 0 8px">Agricultural finance for farmers —
<b>bank assistance &amp; loans</b> (KCC, crop/term loans, allied, FPO/SHG, AIF…) and
<b>government schemes &amp; subsidies</b> (central + state). Browse, see how to apply, and
lodge a loan enquiry.</p>
<div class="card">
<h3>🏦 Bank assistance &amp; agri-loans</h3>
<div class="row">
<select id="fin-category"><option value="">All categories</option></select>
<input id="fin-search" placeholder="search (e.g. tractor, dairy, gold, term loan)" style="flex:1" />
<button id="fin-find">Browse</button>
</div>
<div id="fins-list" style="margin-top:10px"></div>
</div>
<div id="fin-detail" style="margin-top:12px"></div>
<div class="card" style="margin-top:12px">
<h3>🏛️ Government schemes &amp; subsidies</h3>
<p class="muted small">Central &amp; state agricultural schemes — benefits, eligibility,
application process, documents and official portals, plus latest announcements.
Set your <b>Location</b> in the sidebar to see schemes for your state (central schemes always show).</p>
<div class="row">
<select id="sub-level"><option value="">Central + State</option>
<option value="central">Central only</option><option value="state">State only</option></select>
<input id="sub-search" placeholder="search (e.g. insurance, credit, irrigation)" style="flex:1" />
<button id="sub-find">Browse</button>
</div>
<div id="subs-list" style="margin-top:10px"></div>
</div>
<div id="sub-detail" style="margin-top:12px"></div>
<div class="card" style="margin-top:12px">
<h3>📢 Latest announcements</h3>
<div id="sub-updates"></div>
</div>
</section>
<!-- LAND RECORDS -->
<section class="panel" data-tab="🗺️ Land records">
<div class="card">
<h3>🗺️ Land record search &amp; documents</h3>
<p class="muted small">Find your State's official land-record portal — the local record
(RTC/Pahani, 7/12, Khatauni, Jamabandi…), how to search and download it, and what it
contains. Uses your <b>Location</b> (sidebar) to pick the State, or choose one below.</p>
<div class="row">
<label class="field" style="flex:1"><span>State</span>
<select id="lr-state"><option value="">Use my location</option></select></label>
<button id="lr-find" style="align-self:flex-end">Find</button>
</div>
<div id="lr-out" style="margin-top:10px"></div>
</div>
</section>
<!-- RADIO -->
<section class="panel" data-tab="📻 Radio">
<div class="card">
<h3>📻 Internet radio — India</h3>
<div class="row">
<input id="radio-search" placeholder="filter (e.g. AIR, Tamil, news, agriculture)" style="flex:1" />
<button id="radio-load">Load stations</button>
</div>
<audio id="radio-audio" controls style="width:100%;margin-top:10px"></audio>
<div id="radio-now" class="cite"></div>
<div id="radio-list" style="margin-top:8px"></div>
<div class="cite" style="margin-top:6px">Internet streams via Radio Browser (keyless) —
not over-the-air FM. Some streams may be temporarily offline.</div>
</div>
</section>
<!-- ADMIN -->
<section class="panel" data-tab="⚙️ Admin">
<div class="card">
<h3>⚙️ Configure knowledge base</h3>
<div class="row">
<input id="admin-token" type="password" placeholder="admin token" style="flex:1" />
<button id="admin-unlock">Unlock</button>
</div>
<div id="admin-status" class="cite"></div>
</div>
<div id="admin-area" style="display:none">
<div class="grid">
<div class="card">
<h3 id="admin-form-title">➕ Add entry</h3>
<input type="hidden" id="adm-id" />
<div class="grid" style="grid-template-columns:repeat(auto-fit,minmax(160px,1fr))">
<label class="field"><span>Crop *</span><input id="adm-crop" /></label>
<label class="field"><span>Category</span><input id="adm-category" /></label>
<label class="field"><span>Soil type</span><input id="adm-soil_type" /></label>
<label class="field"><span>Rainfall (mm)</span><input id="adm-rainfall_mm" /></label>
<label class="field"><span>Region</span><input id="adm-region" /></label>
<label class="field"><span>Season</span><input id="adm-season" /></label>
<label class="field"><span>Source *</span><input id="adm-source" /></label>
</div>
<label class="field"><span>Recommended fertilizer</span><textarea id="adm-recommended_fertilizer"></textarea></label>
<label class="field"><span>Disease prevention</span><textarea id="adm-disease_prevention"></textarea></label>
<label class="field"><span>Pest management</span><textarea id="adm-pest_management"></textarea></label>
<div class="row" style="margin-top:8px">
<button id="admin-save">Save entry</button>
<button id="admin-clear" class="ghost">Clear</button>
</div>
<div id="admin-form-msg" class="cite"></div>
</div>
<div class="card">
<h3>📚 Entries (<span id="admin-count">0</span>)</h3>
<div id="admin-list"></div>
</div>
</div>
<div class="card" style="margin-top:12px">
<h3>🩺 Plant doctor verification</h3>
<div id="admin-doctors"></div>
</div>
<div class="card" style="margin-top:12px">
<h3>🏛️ Post a scheme announcement</h3>
<div class="row">
<label class="field" style="flex:1"><span>Scheme</span>
<select id="asub-id"></select></label>
<label class="field" style="width:140px"><span>Date (optional)</span>
<input id="asub-date" placeholder="e.g. 2026-05-30" /></label>
</div>
<label class="field"><span>Announcement / update *</span>
<textarea id="asub-text" placeholder="e.g. Enrolment window open until 30 June…"></textarea></label>
<button id="asub-post" style="margin-top:8px">Post announcement</button>
<div id="asub-msg" class="cite"></div>
</div>
<div class="card" style="margin-top:12px">
<h3>🏦 Loan enquiries (<span id="admin-fin-count">0</span>)</h3>
<div id="admin-finance"></div>
</div>
</div>
</section>
</div>
<script src="app.js"></script>
</body>
</html>