# Petal & Leaf is a small web app that helps you look at your plants instead of your phone. > Source: > Published: 2026-10-07 11:10:22+00:00 *This is a submission for the [Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass](https://dev.to/challenges/hacktoberfest-week1-2026-10-05)* ## What I Built **Petal & Leaf** is a small web app that helps you look at your plants instead of your phone. I grow a few plants at home, including a tulsi (holy basil) on my balcony. I wanted an app for people like me with a few pots, not one that assumes a big garden. It works for anyone with a balcony, a rooftop, a few pots, or a friend's garden. It has three tabs: - **Check Plant:** Take a photo of a leaf, flower, or whole plant. A local AI model gives its best guess at the plant name, a one-line description, any visible problems, a care tip, and a confidence level. It's always labelled*"AI guess, not a diagnosis."* - **Quests:** Three small daily quests for your home plants (I tested with my tulsi), like touching the leaves gently, checking the stems for pests, or listening to the leaves rustle. You tap how the soil feels (Dry, Damp, or Wet) and get advice for that state, plus a seasonal tip. - **Log:** Everything you save is kept here with its date, photo, soil state, a short note, and an optional bird-sound recording. A "screen time vs outside time" tracker shows how much of the session you actually spent outside. The idea is simple: the phone gives you a small job, then you put it away and go touch the soil. The app isn't limited to tulsi, and the photo check works on any plant, leaf, or flower. ## Demo *Check Plant tab: a photo of tulsi identified as "basil (likely holy basil)" with medium confidence.* *Quests tab: AI-generated quests, the soil picker, and Gemma's rephrased seasonal tip.* *Log tab: a saved photo analysis, a 9-second bird recording, and quests completed.* ## Code ### Screen-free nature quests powered by open-weight Gemma that runs in your browser, offline. 🌱 # 🌱 Petal & Leaf Touch the soil. Look at the leaf. Spot the flower. Phone back in your pocket. Petal & Leaf gives you small daily quests for your plants (touch the soil check the leaves, listen for a bird), then helps you log what you found When available, the open Gemma 3 4B model runs locally through Ollama to suggest quests, care tips, and photo observations. Built-in advice keeps working when Ollama is unavailable. Built for the DEV Hacktoberfest Open-Source AI Challenge: Week 1 (Touch Grass). ## App screenshots | Check Plant | Quests | | | | ### Nature log ## Gemma use cases Petal & Leaf connects to the local `gemma3:4b` Ollama model for: - **Plant photo checks:** suggest a likely plant, describe visible details mention visible issues, and offer a photo-specific care tip. This is an AI guess, not a diagnosis. - **Daily quest planning:** create three short, hands-on Tulsi quests using the selected soil state, season… The repo has a README and an MIT license. ## How I Built It **Stack:** React + Vite, Ollama running **Gemma (`gemma3:4b`)** on my own laptop, and browser localStorage for the log. I built it one feature at a time with GitHub Copilot prompts, committing after each step. **Where Gemma is used:** 1. **Photo analysis.** The app resizes the photo and sends it to Gemma through Ollama's`/api/chat` endpoint. It asks for a JSON reply with the plant, a short description, issues, a tip, and a confidence level. The prompt tells it never to claim certainty. 2. **Daily quests and soil advice.** Gemma writes three quests from the plant, the soil state, the season, and where I am (my balcony or a friend's garden). 3. **Friendly seasonal tips.** I keep a small table of tulsi tips for each season and let Gemma rephrase it in a friendly voice. The facts come from my table, and Gemma only handles the wording. **Safety net:** If the model is off or returns bad JSON, the app falls back to simple built-in rules, so it never breaks. ### What went wrong (and what I changed) - **Running Gemma in the browser failed.** My first plan was fully in-browser Gemma through MediaPipe, so a phone could run it with no laptop. The model wouldn't load and the app showed a fallback message. I switched to local Ollama. The app now needs my laptop, so it isn't truly offline on a phone yet. - **The first advice was vague.** With the soil set to*Wet* , the AI said something like "maintain consistent soil moisture," which isn't helpful. I made the soil state a strict rule in the prompt and added a code check so wet soil never gets a "water it" suggestion. - **The quests repeated themselves.** Two of the three were about pests. I changed the prompt to require different kinds of quests: one about the soil, one about the leaves, and one about smelling or listening. - **I almost built the wrong thing.** My first idea was a bird-call identifier. Then I realised birds stop singing the second you press record, so I made the plant check the main feature. Bird sounds became an optional quest where you record a clip and note what you heard. - **I renamed it twice.** I started with*Naturequest* , found another entry that was too similar, tried*Leafnote* , and settled on*Petal & Leaf* because the app works on flowers too. ## Why Does Open Innovation Matter? - **My photos and notes stay on my machine.** Pictures of my plants and my log go to Gemma on my own laptop, not to someone else's server. - **It costs nothing to run.** No API key and no per-photo charge, so I could take as many test photos as I wanted. - **I could change how it behaves.** Because I control the model and the prompts, I tightened the soil rule and fixed the repeated quests as soon as I saw the problems. - **I could see the limits.** Running the model myself made it clear what a 4B model can and can't do, which brings me to the honest part below. ## Honest Notes: What Worked and What Didn't - Gemma named my **tulsi photo** as "basil (likely holy basil)" with*medium* confidence. It got the plant family right and was cautious about the exact type. - On a **bouquet of roses** , it said "roses" and "none noticed" for issues. Its care tip about drainage was generic and not tied to anything visible in the photo. - "No visible issues" from a small model shouldn't be trusted blindly. That's why every result carries the "not a diagnosis" label. **Touch Grass field test:** I tested on my balcony. Screen time:*5 min* . Outside time:*20 min* . I did: touched the soil, checked the leaves. Did you hear a bird, or only rustling leaves? **Limits:** It needs Ollama running on a laptop, I tested it mostly on tulsi, and the soil state is tapped by hand because moisture can't be judged reliably from a photo. ## My Agent Session Example prompts used with GitHub Copilot: - “Create a mobile-first React + Vite plant-care app with a soft pastel green theme, daily Tulsi quests, and a local observation log.” - “Use my local Ollama gemma3:4b model to generate safe daily quests and analyze plant photos. Resize images before sending, parse JSON safely, and keep built-in advice as a fallback.” - “Add a four-season Tulsi tips table, optional bird-listening notes and recordings, and a screen-time vs. outside-time tracker.” ## Prize Categories ### Best Use of Gemma Petal & Leaf connects to the local `gemma3:4b` model through Ollama. Gemma does three jobs: - **Plant photo checks:** It suggests a likely plant, describes visible details, mentions visible issues, and gives a care tip based on the photo. This is an AI guess, not a diagnosis. - **Daily quest planning:** It creates three short, hands-on quests for my tulsi, using the soil state, the season, and where I am. - **Friendly seasonal care:** It rephrases the current seasonal tip from my table in a welcoming voice. Photo checks are optional, and the app resizes photos before sending them to Ollama. The app does not identify birds. The bird quest only records a clip and a note. ### Best Use of GitHub Copilot I built Petal & Leaf by giving GitHub Copilot one prompt at a time and committing after each step. Copilot helped me with: - Building the React components and mobile-first styles - Writing the Ollama API integration and the JSON response handling - Adding the tabs layout, local-first logging, and fallback behavior - Fixing the soil-advice rules and the repeated quests - Writing the README and setup steps Copilot was a development aid only. It is not needed to run the app, because the runtime AI features use the local Ollama model. ## What's Next - Run Gemma inside the browser so it works on a phone with no laptop - A native Android version using on-device Gemma - Bird identification with BirdNET - A "walk quest" that sends you to the nearest park