Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <meta name="description" content="ShambaSense AI helps Kenyan smallholder farmers record crop symptoms and review cautious crop-health screening results."> | |
| <title>ShambaSense AI | Crop health screening</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script defer src="app.js"></script> | |
| </head> | |
| <body> | |
| <a class="skip-link" href="#main-content">Skip to main content</a> | |
| <header class="site-header"> | |
| <div class="header-inner"> | |
| <a class="brand" href="#top" aria-label="ShambaSense AI home"> | |
| <span class="brand-mark" aria-hidden="true">✦</span> | |
| <span> | |
| <strong>ShambaSense</strong> | |
| <small>Crop health, clearly explained</small> | |
| </span> | |
| </a> | |
| <div class="header-actions"> | |
| <span class="status-dot"><span aria-hidden="true"></span><span data-i18n="privateDevice">Private on this device</span></span> | |
| <label class="language-control"> | |
| <span class="sr-only" data-i18n="language">Language</span> | |
| <select id="language-select" aria-label="Language"> | |
| <option value="en">English</option> | |
| <option value="sw">Kiswahili</option> | |
| </select> | |
| </label> | |
| </div> | |
| </div> | |
| </header> | |
| <main id="main-content" class="page" tabindex="-1"> | |
| <section id="top" class="hero" aria-labelledby="page-title"> | |
| <div> | |
| <p class="eyebrow" data-i18n="eyebrow">For Kenyan smallholder farmers</p> | |
| <h1 id="page-title" data-i18n="title">Check a crop leaf before you decide what to do next.</h1> | |
| <p class="hero-copy" data-i18n="intro">Add a clear photo and a few observations. ShambaSense records your field note and, when a real model is connected, displays its estimate separately from practical safety guidance.</p> | |
| </div> | |
| <div class="hero-note"> | |
| <span class="note-icon" aria-hidden="true">i</span> | |
| <p data-i18n="notDiagnosis">This is a screening aid, not a confirmed diagnosis. Ask a local agricultural extension officer when symptoms are severe or unclear.</p> | |
| </div> | |
| </section> | |
| <nav class="tabs" aria-label="Main sections"> | |
| <button class="tab is-active" type="button" data-view="check" aria-selected="true" data-i18n="checkLeaf">Check a leaf</button> | |
| <button class="tab" type="button" data-view="history" aria-selected="false" data-i18n="fieldHistory">Field history</button> | |
| <button class="tab" type="button" data-view="about" aria-selected="false" data-i18n="aboutSafety">About & safety</button> | |
| </nav> | |
| <section id="view-check" class="view is-visible" aria-labelledby="check-heading"> | |
| <div class="section-heading"> | |
| <div> | |
| <p class="step-label" data-i18n="stepOne">Step 1 of 2</p> | |
| <h2 id="check-heading" data-i18n="addFieldNote">Add a field note</h2> | |
| </div> | |
| <p class="muted" data-i18n="requiredFields">Only the photo and crop are required.</p> | |
| </div> | |
| <form id="assessment-form" novalidate> | |
| <div class="workspace"> | |
| <section class="panel input-panel" aria-labelledby="photo-heading"> | |
| <div class="panel-heading"> | |
| <div> | |
| <p class="step-label">01</p> | |
| <h3 id="photo-heading" data-i18n="photoHeading">Add a crop photo</h3> | |
| </div> | |
| <span class="required" data-i18n="required">Required</span> | |
| </div> | |
| <p class="helper" data-i18n="photoHelp">Use daylight, one leaf, and a steady close-up. JPG, PNG, or WEBP up to 10 MB.</p> | |
| <label id="drop-zone" class="drop-zone" for="image-input" tabindex="0"> | |
| <input id="image-input" type="file" accept="image/jpeg,image/png,image/webp" hidden> | |
| <span id="upload-prompt"> | |
| <span class="upload-icon" aria-hidden="true">↑</span> | |
| <strong data-i18n="choosePhoto">Choose a photo</strong> | |
| <span data-i18n="dragPhoto">or drag and drop it here</span> | |
| </span> | |
| <span id="preview-wrap" class="preview-wrap" hidden> | |
| <img id="image-preview" alt="" /> | |
| <span id="file-name" class="file-name"></span> | |
| </span> | |
| </label> | |
| <div id="file-status" class="field-status" role="status" aria-live="polite"></div> | |
| <button id="remove-image" class="text-button" type="button" hidden data-i18n="removePhoto">Remove photo</button> | |
| <div class="form-grid"> | |
| <div class="field"> | |
| <label for="crop-select" data-i18n="cropLabel">Crop</label> | |
| <select id="crop-select" required> | |
| <option value="maize" data-i18n="maize">Maize</option> | |
| <option value="tomato" data-i18n="tomato">Tomato</option> | |
| <option value="potato" data-i18n="potato">Potato</option> | |
| <option value="beans" data-i18n="beans">Beans</option> | |
| <option value="banana" data-i18n="banana">Banana</option> | |
| <option value="other" data-i18n="other">Other / not sure</option> | |
| </select> | |
| </div> | |
| <div class="field"> | |
| <label for="symptoms" data-i18n="symptomsLabel">What are you noticing?</label> | |
| <textarea id="symptoms" rows="4" maxlength="600" data-i18n-placeholder="symptomsPlaceholder" placeholder="For example: yellow spots on older leaves after rain"></textarea> | |
| <span class="character-count"><span id="character-count">0</span>/600</span> | |
| </div> | |
| </div> | |
| <div class="form-actions"> | |
| <button class="button button-primary" type="submit" id="analyse-button" data-i18n="analysePhoto">Analyse photo</button> | |
| <button class="button button-secondary" type="button" id="reset-button" data-i18n="clearForm">Clear form</button> | |
| </div> | |
| <div id="form-status" class="form-status" role="status" aria-live="polite"></div> | |
| </section> | |
| <section class="panel results-panel" aria-labelledby="results-heading"> | |
| <div class="panel-heading"> | |
| <div> | |
| <p class="step-label">02</p> | |
| <h3 id="results-heading" data-i18n="resultsHeading">Review the result</h3> | |
| </div> | |
| <span id="result-state" class="state-badge state-empty" data-i18n="waiting">Waiting for a photo</span> | |
| </div> | |
| <div id="results-content" class="results-content"> | |
| <div class="empty-state"> | |
| <span class="empty-icon" aria-hidden="true">○</span> | |
| <h4 data-i18n="emptyTitle">Your result will appear here</h4> | |
| <p data-i18n="emptyCopy">Add a photo and select your crop. We will show the model estimate only if genuine inference is available.</p> | |
| </div> | |
| </div> | |
| <div id="report-actions" class="report-actions" hidden> | |
| <button id="download-txt" class="button button-secondary" type="button" data-i18n="downloadTxt">Download TXT</button> | |
| <button id="download-json" class="button button-secondary" type="button" data-i18n="downloadJson">Download JSON</button> | |
| </div> | |
| </section> | |
| </div> | |
| </form> | |
| </section> | |
| <section id="view-history" class="view" aria-labelledby="history-heading" hidden> | |
| <div class="section-heading"> | |
| <div> | |
| <p class="step-label" data-i18n="savedLocally">Saved locally</p> | |
| <h2 id="history-heading" data-i18n="yourHistory">Your field history</h2> | |
| </div> | |
| <button id="clear-history" class="text-button danger" type="button" data-i18n="clearHistory">Clear history</button> | |
| </div> | |
| <div id="history-content"></div> | |
| </section> | |
| <section id="view-about" class="view" aria-labelledby="about-heading" hidden> | |
| <div class="section-heading"> | |
| <div> | |
| <p class="step-label" data-i18n="useWithCare">Use with care</p> | |
| <h2 id="about-heading" data-i18n="aboutTitle">What ShambaSense can and cannot do</h2> | |
| </div> | |
| </div> | |
| <div class="about-grid"> | |
| <article class="info-block"> | |
| <h3 data-i18n="worksTitle">What it does</h3> | |
| <p data-i18n="worksCopy">It helps you record a crop, photo, and symptoms. If a compatible inference service is configured, it displays that service's returned classification and scores without presenting them as a confirmed diagnosis.</p> | |
| </article> | |
| <article class="info-block"> | |
| <h3 data-i18n="privacyTitle">Privacy on this Space</h3> | |
| <p data-i18n="privacyCopy">Field history stays in this browser's local storage. Photos are previewed locally and are not saved by this page. If an inference endpoint is configured, the selected photo and field note are sent to that endpoint for processing; review its privacy policy before use.</p> | |
| </article> | |
| <article class="info-block"> | |
| <h3 data-i18n="safetyTitle">Safer next steps</h3> | |
| <p data-i18n="safetyCopy">Improve the photo, compare symptoms across the plant, and ask an extension officer before applying pesticide. Do not rely on a photo score alone, especially when the crop is valuable or the plant is severely affected.</p> | |
| </article> | |
| <article class="info-block"> | |
| <h3 data-i18n="sourcesTitle">Reference material</h3> | |
| <p><a href="https://www.kalro.org/" target="_blank" rel="noopener noreferrer">KALRO</a> · <a href="https://www.fao.org/plant-production-protection/en/" target="_blank" rel="noopener noreferrer">FAO Plant Production and Protection</a></p> | |
| </article> | |
| </div> | |
| </section> | |
| </main> | |
| <footer class="site-footer"> | |
| <span>ShambaSense AI</span> | |
| <span data-i18n="footerNote">A practical screening aid for field decisions, not a diagnosis.</span> | |
| </footer> | |
| </body> | |
| </html> | |