DEV Community

Naushad Alam
Naushad Alam

Posted on

SnapNature: Identify Nature with Open-Source AI — Touch Grass Challenge

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass

What I Built

For Hacktoberfest Week 1 — "Touch Grass" — I built SnapNature, a mobile-first Progressive Web App that gets people out of their screens and into nature.

Demo

snapnature

Code

SnapNature

A minimal web application for nature image recognition using deep learning.

Overview

SnapNature uses a pre-trained ResNet50 model (ImageNet) to classify images. Upload a photo of plants, animals, or natural objects, and get instant predictions.

Features

  • 🖼️ Web-based image upload interface
  • 🔍 Top-5 predictions with confidence scores
  • 🌐 REST API for programmatic access
  • 🐳 Docker support
  • ⚡ Fast inference with PyTorch

Quick Start

Option 1: Local Setup

# Create virtual environment
python -m venv venv
venv\Scripts\activate  # Windows
# source venv/bin/activate  # Linux/Mac

# Install dependencies
pip install -r requirements.txt

# Run the app
uvicorn main:app --reload --port 8000
Enter fullscreen mode Exit fullscreen mode

Visit http://127.0.0.1:8000 to use the web interface.

Option 2: Docker

docker build -t snapnature .
docker run -p 8000:8000 snapnature
Enter fullscreen mode Exit fullscreen mode

API Usage

Upload Image

curl -X POST "http://127.0.0.1:8000/predict" \
  -F "file=@path/to/image.jpg"
Enter fullscreen mode Exit fullscreen mode

Predict from URL

curl "http://127.0.0.1:8000/predict_url?url=https://example.com/image.jpg"
Enter fullscreen mode Exit fullscreen mode

Health Check

curl "
…
Enter fullscreen mode Exit fullscreen mode

How I Built It

  • 📸 Take a photo of any plant, animal, or nature scene
  • 🤖 Identify it using an open-source HuggingFace Vision Transformer (ViT) model — google/vit-base-patch16-224
  • 🌱 See results with confidence scores and fun education facts
  • 📝 Save to journal — offline observations stored in your browser
  • 📱 Works offline via Service Worker — go to a trail, no signal needed

Key Features

  • Open-source AI at core — Uses open-weight HuggingFace models, not a locked vendor API
  • Works on any device — PWA installs to home screen, responsive design
  • Privacy-first — Photos saved locally, nothing sent to cloud databases
  • Swap the model — Replace with fine-tuned regional biodiversity models easily

The Challenge: "Touch Grass"

The theme is simple: get outside. SnapNature encourages that directly — open the app, go find something interesting, take a photo. The app then teaches you about it. It's exploration + education combined.

Why Does Open Innovation Matter?

SnapNature demonstrates why open weight models matter:

  • No vendor lock-in — The ViT model is open; swap it anytime
  • Runs without expensive APIs — Works with free HuggingFace inference
  • Fine-tuning ready — Train on local bird/plant datasets for your region
  • Data stays yours — All observations in localStorage; your data, your control
  • Offline by design — Service worker caches assets; works without internet after first visit

Closed APIs don't count as core. Open innovation does.

System Design

Camera/Upload → HuggingFace ViT (Open Weight) → Results + Fun Facts
                          ↓
                  Nature Journal (localStorage)
                          ↓
                  Service Worker / PWA (Offline)
Enter fullscreen mode Exit fullscreen mode

Project Structure

snapnature/
├── index.html     # Mobile-first PWA UI
├── js/app.js      # Camera, AI integration, journal
├── css/style.css  # Responsive design
├── sw.js          # Offline service worker
├── manifest.json  # PWA install config
└── main.py        # FastAPI backend (optional Python API mode)
Enter fullscreen mode Exit fullscreen mode

Tech Stack

  • Frontend: Vanilla HTML/CSS/JS (no framework needed for speed)
  • AI: HuggingFace Inference API with google/vit-base-patch16-224
  • Storage: browser localStorage for offline journal
  • PWA: Service worker + Web App Manifest
  • Backend (optional): FastAPI + PyTorch ResNet50

Where to Try

Live: https://github.com/nashdev97/snapnature

Clone and run locally:

git clone https://github.com/nashdev97/snapnature.git
cd snapnature
python -m http.server 8080  # Open http://localhost:8080
Enter fullscreen mode Exit fullscreen mode

My Agent Session

Agent session - Claude and Omniroute.

Prize Categories

  • Best Use of Open-Source AI / Open Weight Models
  • Best Mobile / PWA Implementation
  • Best "Touch Grass" Theme Execution
  • Best Offline / On-Device Innovation

Built with open-source tools for Hacktoberfest 2026. Let's get outside. 🌿

Top comments (0)