🍃 LeafLock — Open-Source AI Outdoor Steganography Engine

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

Built for Hacktoberfest 2026 (#hf26challenge),Global Hack Week (GHW), and DEV.to Hackathon Challenges

LeafLock brings digital steganography into the physical world. Player 1 locks a secret payload message behind any physical outdoor object (nature, plants, animals, stones, items). Player 2 decodes an AI-generated riddle synthesized by Google Gemma models, steps outdoors, locates the physical object, and captures a matching photo with their camera to decrypt the hidden message!

Live Web Application: https://leaflock.onrender.com/

GitHub Repository: https://github.com/iqbhavya/LeafLock

🏆 Hacktoberfest Prize Categories & Alignment

  • Touch Grass Challenge (#hf26challenge): Asynchronous 2-player outdoor steganography game that encourages participants to step outside, explore flora/fauna, and engage with nature.
  • Best Use of Gemma ($200): Integrates Google AI Studio and Google Gemma models (gemma-4-31b-it, gemma-4-26b-a4b-it) to dynamically synthesize 2-line cryptic riddles based on real-time detected botanical, object, and color features.
  • Best Use of MongoDB Atlas: Powered by MongoDB Atlas (M0 Cluster) with Mongoose models to securely manage shortCodes, extracted visual feature fingerprints, riddles, and completion states without storing raw Base64 user photos.
  • AI Vision & Dynamic LLM Engine: Combines MobileNet Neural Network for real-time object classification, sharp for perceptual dHash and 64-bin color histogram extraction, and Google AI Studio Gemma LLM for dynamic riddle synthesis. Best Use of Render ($200): Deployed the React/Vite web application and frontend asset pipeline on Render's global edge network to ensure fast, highly available access for users exploring outdoors.
  • Zero-Hardcoding Dynamic Referee: Evaluates photo matches dynamically using perceptual dHash, 64-bin color histogram intersection, and Google AI Studio Gemma semantic category evaluation.

🎮 System Architecture & Gameplay Flow

🔒 1. Tab 1: "Lock a Secret" (Player 1 Flow)

  1. Input: Upload or snap a photo of any physical object + enter secret message (optional custom riddle).
  2. Vision & Feature Extraction: MobileNet classifies object category while sharp extracts dHash perceptual fingerprint, HSL color space, and 64-bin color histogram.
  3. Dynamic AI Riddle Generation (Google AI Studio Gemma): Auto-crafts a poetic 2-line cryptic riddle guiding someone outdoors to find the object without spoiling its name directly.
  4. MongoDB Atlas Storage: Generates a clean 6-character shortCode (e.g., DOG-784, OAK-9B2) and stores the record securely in MongoDB Atlas.

📸 2. Tab 2: "Decrypt a Message" (Player 2 Flow)

  1. Clue Lookup (GET /api/cipher/:shortCode): Player 2 enters the shortCode to retrieve public clue information (riddle, solved, createdAt). Never leaks secretMessage, keyName, or features.
  2. Touch Grass & Snap Photo: Player 2 steps outside, locates the physical object, and snaps a photo with <input accept="image/*" capture="environment" />.
  3. Zero-Spoiler AI Referee (POST /api/cipher/unlock):
    • Compares visual dHash, color spectrum, and MobileNet object labels via Google AI Studio Gemma semantic evaluation.
    • Match Criteria: Requires >= 60% similarity score + semantic category match.
    • Privacy & Mystery: Rejection error messages give general guidance without leaking the target's answer or name!
  4. Resolution:
    • If Match: Marks solved: true in MongoDB Atlas, triggers confetti animation, and reveals decrypted secretMessage.
    • If Incorrect: Returns polite feedback without spoiling the secret target.

🛠️ API Endpoint Specification

1. POST /api/cipher/create

  • Body: { imageBase64: string, secretMessage: string, customRiddle?: string }
  • Response: { success: true, shortCode: string, keyName: string, riddle: string }

2. GET /api/cipher/:shortCode

  • Param: shortCode (e.g. OAK-784)
  • Response: { success: true, shortCode: string, riddle: string, solved: boolean, createdAt: string }

3. POST /api/cipher/unlock

  • Body: { shortCode: string, player2ImageBase64: string }
  • Response: { success: true, secretMessage: string, reasoning: string } or { success: false, error: string, reasoning: string }

🚀 Technical Highlights & Open-Source Stack

  • Frontend: React 19, Vite 8, Tailwind CSS v4, Lucide Icons, Canvas Confetti.
  • Backend: Node.js, Express 5.
  • Database: MongoDB Atlas Cluster via Mongoose.
  • Vision & AI Pipeline: @tensorflow/tfjs-core, @tensorflow-models/mobilenet, sharp, @google/generative-ai (Google AI Studio Gemma models).
  • Deployement : Render.

hf26challenge #devchallenge