DEV Community: Shefali

🌿 Nature Quest AI — Touch Grass, Powered by AI! 🤖🌎

Shefali — Sun, 11 Oct 2026 05:22:23 +0000

Hacktoberfest Open-Source AI Challenge — Week 2: Touch Grass

🌻 What I Built

Nature Quest AI is a web application that encourages children to step outside, explore their surroundings, and learn about nature through exciting missions.

Instead of spending all their time on a screen, kids become little nature explorers! 🕵️‍♀️🍃

Here's how it works:

Discover a mission: The app generates nature challenges, such as finding a five-petal flower, identifying a particular leaf shape, or exploring different soil textures.
Capture the discovery: Kids can take a photo using their camera or upload an existing image of their finding.
Let AI investigate: A multimodal AI forest guide analyzes the image and checks whether it matches the mission.
Learn something new: Once evaluated, the AI shares a short, interesting science fact about the specimen.

The goal is simple: turn screen time into green time! 🌳✨

🌐 Live Application: (https://nature-quest-ai-fnnm.onrender.com/)

💻 GitHub Repository

🔗 https://github.com/Shefa-li/Nature-Quest-AI

📂 Project Structure

Nature-Quest-AI/
├── app.py # Flask backend + AI integration
├── requirements.txt # Python dependencies
├── templates/
│ └── index.html # Frontend, camera & nature quests
└── .gitignore # Keeps sensitive files out of Git

🛠️ How I Built It

Here's a look at the technologies that bring this little nature adventure to life!

🐍 Python + Flask — The Brain Behind the App

Flask handles the backend, manages requests, and connects the frontend to the AI service. Gunicorn runs the application in the deployed environment on Render.

🤖 Google Gemini — The AI Forest Guide

Using the Google GenAI SDK, the application sends images along with mission-specific instructions to a multimodal AI model. The model evaluates the submitted image against the quest and provides relevant educational information.

🎨 HTML + Tailwind CSS — The Explorer's Interface

The frontend provides a responsive experience across desktop and mobile devices, with a simple interface for discovering missions and submitting photos.

🔐 Environment Variables — Keeping Secrets Safe

API credentials are loaded through environment variables, such as GEMINI_API_KEY, rather than being hardcoded into the source code. The .gitignore file helps prevent sensitive local files from accidentally being committed.

☁️ Render + Gunicorn — Bringing It Online

The application is deployed using Render, making the experience accessible through a web browser.

🌍 Why Does Open Innovation Matter?

Open innovation allows developers to experiment, collaborate, and turn creative ideas into practical solutions using accessible tools and technologies.

🌱 Nature Quest AI is my take on using AI for something a little different: helping children become curious about the natural world instead of simply consuming more digital content.

Imagine a child discovering a tiny flower, snapping a picture, and learning something fascinating about it in seconds. A simple walk outside becomes a mini science adventure! 🌼🔬

Less scrolling. More exploring. A little AI magic. A lot more nature! 🌎✨

Hacktoberfest #OpenSource #AI #GeminiAI #Python #Flask #TouchGrass #NatureQuestAI #Render

🎨🖌️Digital Collaborative Sketchbook: A Web App for Creating and Storing Art ✎

Shefali — Mon, 14 Oct 2024 06:14:25 +0000

This is a submission for the The Pinata Challenge

What I Built

I created a web application that allows users to draw digital sketches and upload them to Pinata for storage on the IPFS network. The application features a user-friendly drawing interface with various tools, including colors and brush sizes. Once a sketch is complete, users can download it as an image file and upload it to Pinata, ensuring that their artwork is securely stored and easily accessible.

Demo

You can try out my application (demo) [https://sketchbook-pinata-client.vercel.app/]

My Code

You can view the source code for my project on GitHub: GitHub Repository

More Details

I utilized Pinata to manage the upload of images generated by the sketching tool. Here are some key features:

IPFS Uploads: Once a sketch is saved, the image is converted into a Blob and uploaded to Pinata, which provides a secure and decentralized storage solution.
Efficient File Management: Each upload is linked to a specific user (if authentication is implemented), allowing for organized management of their artworks.

Key Implementation Steps:

How to Obtain a Pinata API Key
To integrate Pinata with your project, follow these steps to obtain an API key:

Sign Up or Log In to Pinata:
Go to https://pinata.cloud/ and create an account or log in if you already have one.
Create an API Key:
After logging in, go to the "API Keys" section in your dashboard.
Click "New Key" to create a new API key.
Provide a name for the key and configure the permissions you need (e.g., pinFileToIPFS for uploading files).
Click "Create", and you will receive an API key, secret, and JWT (JSON Web Token). Copy these as they are needed for your project.
Store the API Key Securely:
In your Next.js project, create a .env.local file to store the API key securely:

NEXT_PUBLIC_PINATA_JWT=your_jwt_token_here

Replace your_jwt_token_here with the JWT you obtained from Pinata. Ensure that you do not expose this key in your codebase or publicly.

How I Built the Sketch App

Image Conversion: I used the canvas.toDataURL() method to convert the drawn sketch into a Base64 string, which is then transformed into a Blob for uploading.

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);

Pinata Integration: Using the Pinata API, I sent the Blob as a file in a multipart/form-data format. This ensures that the file is properly handled by Pinata, and upon successful upload, users receive a unique IPFS hash for their sketch.

const downloadSketch = () => {
    const URL = canvas.toDataURL('image/jpeg');
    const anchor = document.createElement('a');
    anchor.href = URL;
    anchor.download = 'sketch.jpg';
    anchor.click();
};

 const uploadToPinata = async (anchor) => {
        const token = process.env.NEXT_PUBLIC_PINATA_JWT;

        const form = new FormData();
        const blob = await fetch(anchor.href).then(anchor => anchor.blob()); 
        const file = new File([blob], 'sketch.jpg', { type: 'image/jpeg' });
        form.append("file", file);

        const options = {
            method: 'POST',
            headers: {
                Authorization: `Bearer ${token}`, 
            },
            body: form            
        };


        try {
            const response = await fetch('https://uploads.pinata.cloud/v3/files', options);
            const data = await response.json();
            if (response.ok) {
                console.log("Upload successful:", data);
                return data; 
            } else {
                console.error("Error uploading to Pinata:", data);
            }
        } catch (error) {
            console.error("Error uploading to Pinata:", error);
        }
    };

User Feedback: After each upload, users are notified of the success or failure of the operation, enhancing the user experience.

Screenshots of Uploaded Sketches from the SketchBook App
Below are screenshots that showcase the successful upload of images created using the SketchBook app to Pinata Cloud.