"Design on your screen. Step outside with your tape measure. Touch the soil. Grow together."
This submission is built for the Hacktoberfest Open-Source AI Challenge — Week 1: Touch Grass.
- Live Demo (Production on Railway): https://agrisensa-garden-studio-production.up.railway.app
- GitHub Repository (MIT Open Source): https://github.com/yandri918/agrisensa_garden_studio
The "Touch Grass" Connection: Why We Built This
Modern humans spend an average of 9+ hours a day glued to computer and smartphone screens. We talk about food sovereignty, sustainable living, and urban farming, but stepping outside into an overgrown, empty backyard often feels overwhelming:
- Where should the raised beds go so they get maximum morning sunlight?
- How far should they be from the water tap to keep piping efficient?
- Will this sprinkler accidentally spray my chicken coop and create mud?
- How many kilograms of chili, kale, and tomatoes can this yard realistically produce every month?
AgriSensa Garden Studio was born to bridge digital planning and tangible outdoor action.
Our application does not keep you on the screen. The screen is merely the launchpad to get your hands dirty in the soil. It transforms your physical yard into a measurable, buildable spatial blueprint, generates a physical 4-week outdoor task roadmap, and walks with you into the field with camera-based plant disease scouting.
What Does AgriSensa Garden Studio Do?
AgriSensa Garden Studio is an open-source, full-stack precision agro-spatial planning suite:
1. Deterministic 2D Blueprint & 3D Digital Twin
- Measure yard dimensions down to centimeters ($m$ and $m^2$).
- Drag-and-drop real facilities: Raised Beds, Hydroponic A-Frames, Fish Ponds, Compost Stations, Pathways, Chicken Coops, and IoT Soil Probes.
- Real-time 3D spatial scene powered by Three.js and
@react-three/fiberwith Orbital, Bird's Eye, and Human Eye-level camera modes.
2. Smart Precision Irrigation Engine
- Drip irrigation configuration (emitter spacing, lateral line counts, water volume estimations).
- Sprinkler coverage radii ($1.0m - 4.0m$) with interactive transparent spray overlap circles.
- Spatial Safety Rules Engine: Deterministic BFS collision detection that prevents environmental conflicts (e.g., throwing a safety hazard if a sprinkler sprays a chicken coop).
3. Generative AI Spatial Planner (Gemini 2.5 Flash)
- Auto-Arrange Mode: Unlike generic AI templates that wipe out your layout, our custom auto-arrange re-positions the exact components you selected from the sidebar into an optimal, collision-free layout with accessible $0.6m$ maintenance aisles.
- Tailors layout for either Household Food Independence or Commercial Mini-Market Farm.
4. Edge Computer Vision Crop Scouting (Roboflow Integration)
- Direct field companion tool: Take a photo of a struggling leaf with your phone.
- Runs inference across multi-class agriculture models:
- Chili Pests: Thrips, Armyworm Caterpillars (Spodoptera), Aphids, Whiteflies (Bemisia tabaci).
- Plant Pathology (PlantDoc): Early Blight (Alternaria), Late Blight (Phytophthora), Powdery Mildew, Bacterial Spot.
- Spatial Digital Twin Feedback: Detects an issue -> flags the corresponding bed on your 2D/3D map with a warning badge -> provides organic IPM remedies -> automatically suggests switching sprinkler to precision drip irrigation to prevent water splashing that spreads fungal spores.
5. 100% Free Microclimate & GPS Pinpoint Telemetry (Open-Meteo)
- 1-Click GPS pinpoint sensor detection or direct Indonesian district search (Cianjur, Lembang, Batu, Bogor, Sleman).
- Fetches real-time microclimate metrics: Temperature, Relative Humidity, Precipitation sum ($mm$), and FAO-56 Penman-Monteith Evapotranspiration ($ET_0$).
- Smart Rain Delay: Automatically halts irrigation schedules when rain probability $>70\%$ or precipitation exceeds $4mm$, saving water and preventing root rot.
Technical Architecture & Stack
+------------------------------------------------------------------------+
| AgriSensa Garden Studio |
+------------------------------------------------------------------------+
| Frontend: Next.js 16 (Turbopack) • React 19 • Tailwind CSS v4 |
| 3D Visuals: Three.js • @react-three/fiber • @react-three/drei |
| State Management: Zustand (with multi-level Undo/Redo history) |
+------------------------------------------------------------------------+
| Server Route Handlers |
| • /api/ai/plan -> Secure Gemini 2.5 Flash Node.js runtime |
| • /api/vision/diagnose -> Roboflow Inference & Agronomy Rule Engine |
| • /api/weather -> Open-Meteo Microclimate Telemetry Cache |
+------------------------------------------------------------------------+
| Enterprise Security & Validation |
| • Zod JSON Schema Sanitation (zero unvalidated deserialization) |
| • Strict Content Security & HTTP Headers (nosniff, DENY frame) |
| • Semgrep Static Security Audit: 125 Rules across 30 files -> 0 Flaws |
| • Cloud Infrastructure: Deployed via Railway CI/CD Container Engine |
+------------------------------------------------------------------------+
Step-by-Step "Touch Grass" User Journey
- Step 1: Grab a Tape Measure: Measure your physical yard. Input width & depth (e.g., $6m \times 8m$).
- Step 2: Place Your Backyard Dreams: Add 3 raised beds for tomatoes and chilies, a compost bin, a water tap, and an IoT probe.
- Step 3: Let AI Auto-Arrange: Hit AI Planner. Gemini re-orders your components so plants receive morning sun while keeping paths clear.
- Step 4: Check Weather & Rain Delay: Hit GPS in the weather widget. Live microclimate telemetry calculates daily crop evapotranspiration ($ET_0$).
- Step 5: Step Outside & Plant: Follow the generated outdoor checklist—stake boundaries with string, dig soil, plant seedlings.
- Step 6: Scout with Computer Vision: If a chili leaf curls, snap a photo. Roboflow pinpoints Thrips or Early Blight, and updates your digital twin bed with organic treatment advice.
Enterprise Security & Code Quality
Before publishing to production, we subjected our codebase to rigorous static analysis:
-
Semgrep SAST Security Scan: Ran 125 community & OWASP rules (
p/security-audit,p/owasp-top-ten,p/react,p/secrets) across all 30 repository files -> 0 findings / Clean. - Zero Client-Side Secret Leakage: All AI tokens and keys are strictly scoped to backend Route Handlers with rate limits and payload size guards.
-
Zero Emojis: The user interface is strictly styled using curated SVG iconography (
lucide-react) and high-contrast dark-mode glassmorphism.
How to Run Locally
# 1. Clone repository
git clone https://github.com/yandri918/agrisensa_garden_studio.git
cd agrisensa_garden_studio
# 2. Install dependencies
npm install
# 3. Configure environment variables (optional for local Gemini)
cp .env.example .env.local
# 4. Start development server
npm run dev
Open http://localhost:3000 in your browser.
Try the Live Demo
Experience the live digital twin right now:
https://agrisensa-garden-studio-production.up.railway.app
Design your space. Step outside. Touch grass. Grow food.
Top comments (2)
Digital twin for garden planning is a fascinating constraint problem — you're dealing with continuous spatial data (sun arcs, soil moisture gradients, root zone competition) that most hobbyist tools oversimplify into static grid cells. Curious how you're handling the temporal dimension: are you simulating seasonal light shifts and growth-stage water demand as part of the twin, or keeping it to a snapshot-at-planting model?
On the open-source AI side, the real win would be if the plant compatibility / spacing engine is decoupled from the UI so folks can plug in their own region-specific cultivar databases (extension service CSVs, seed catalog APIs). That's where community maintenance actually scales — the planner becomes a thin visualization layer over a shared knowledge graph.
Performance-wise, rendering a live 3D garden with collision-aware plant footprints at 60fps on mobile browsers is non-trivial. Are you leaning on WebGL instancing / GPU culling, or keeping it Canvas 2D with a spatial index (quadtree/R-tree) for hit-testing? The tape-measure-to-screen calibration flow also smells like a fun ARKit/ARCore alignment problem — curious if you're doing markerless plane detection or asking users to drop corner pins manually.
Solid direction. The "design on screen, step outside" loop is exactly where digital twin tech should live — not in dashboards, but in dirt PS: the tool I meant is on labagent .tech
Thank you for your insightful comments! You’ve highlighted several key challenges in the development of AgriSensa Garden Studio. My background in agriculture has shaped this project, making the link between on-screen design and on-the-ground implementation a primary focus.
Regarding the time dimension, the current version is better described as a spatial planner with weather data rather than a fully dynamic agronomic digital twin. 3D lighting is currently static; there are no calculations for seasonal sun paths yet. Water requirements are based on baseline values for plant groups, while Open-Meteo integration provides ET₀ and rainfall forecasts to suggest irrigation adjustments. Water needs per growth phase and root-zone competition have not yet been modeled.
As for separating the engine and UI, the foundation is already in place: the plant catalog, agronomic calculators, and geometry validation reside in separate modules. There is also a “Paste-a-Seed” feature that extracts variety specifications from seed product pages into structured plant data. However, it is not yet a standalone engine capable of importing regional CSVs or utilizing a shared knowledge graph. I agree that a clear data schema and traceable agronomic sources would greatly facilitate community contributions. The compatibility rules currently serve as guidelines rather than a comprehensive plant interaction model.
Regarding rendering, the 3D view uses Three.js via React Three Fiber, while the 2D editor uses SVG. Currently, objects are simple meshes, and collision detection relies on bounding boxes between physical objects. There is no instancing or specialized spatial indexing yet, and I lack benchmarks to claim 60 fps performance on mobile devices. Plant representations remain illustrative rather than dynamic canopy footprints that change with growth.
Regarding measurements, the approach involves manual input of plot dimensions (in meters) and manual object placement, without AR plane detection or camera-based calibration.
Your feedback helps clarify the development direction: strengthening reusable agronomic data and then incrementally adding the time dimension. “Design on screen, step outside” perfectly captures the experience I want to create.