This is a submission for the Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass
What I Built
🌿 GreenQuest AI — Turn Screen Time into Green Time!
GreenQuest AI is an AI-powered outdoor adventure app that encourages people to take a break from their screens and reconnect with nature.
The idea is simple: instead of using AI to generate more reasons to stay online, what if we used it to inspire people to go outside?
With GreenQuest AI, users can generate personalized outdoor missions based on their preferred activity, available time, and difficulty. Whether it's exploring a nearby park, observing trees, watching birds, discovering cloud patterns, or helping clean up the environment, every mission encourages users to experience the world beyond their screens.
To make the experience more engaging, I added gamification features, including:
- 🤖 AI-generated missions: Discover fun outdoor challenges.
- ⏱️ Activity timer: Set aside dedicated time for each adventure.
- 🏆 XP and levels: Earn experience points by completing missions.
- 🔥 Streak tracking: Encourage consistent outdoor habits.
- 🎖️ Achievement badges: Celebrate progress and milestones.
- 📊 Progress dashboard: Track completed activities and time spent outdoors.
- 💾 Local progress storage: Keep supported progress data between visits.
GreenQuest AI is designed for students, developers, remote workers, and anyone who spends too much time in front of a screen and wants a fun reason to step outside.
The mission is to make touching grass a habit, not just a meme. 🌱
Demo
🌐 Live Website: https://021abhimanyu.github.io/GreenQuest-AI/
🐙 GitHub Repository: https://github.com/021abhimanyu/GreenQuest-AI
Try generating an outdoor mission, pick a challenge that fits your schedule, and take it outside!
Code
The complete source code is available on GitHub:
The project is built using three main files:
-
index.html— The application's structure and interface. -
style.css— The nature-inspired design and responsive layout. -
script.js— AI integration, mission generation, timer, gamification, and progress tracking.
The goal was to keep the project lightweight and easy to understand, so developers can explore the code, customize it, and build upon it.
Contributions and suggestions are welcome!
How I Built It
I built GreenQuest AI using HTML, CSS, JavaScript, Transformers.js, and an open-weight language model.
The main technology choices are:
- HTML5 and CSS3: For the responsive, nature-inspired user interface.
- JavaScript: For mission generation logic, timers, progress tracking, XP, levels, streaks, and badges.
- Transformers.js: To run compatible machine-learning models directly in the browser.
- Qwen2.5-0.5B-Instruct: The open-weight language model configured to generate creative outdoor missions.
- ONNX Runtime: For browser-based model inference through the Transformers.js ecosystem.
- Browser local storage: To preserve supported user progress without requiring a database.
One of my main goals was to make the AI experience accessible without requiring users to install Ollama, configure a separate backend, or obtain a paid inference API key.
The model is loaded through Transformers.js, with browser inference configured to use WebGPU when available and WebAssembly as a fallback.
Here's how the application works:
- The user selects their preferred activity, duration, and difficulty.
- JavaScript prepares a prompt using those preferences.
- The browser-based AI generates an outdoor mission.
- The application displays the mission and its details.
- The user heads outdoors, starts the timer, and completes the activity.
- The app updates supported progress statistics and awards XP and achievements.
I also included fallback mission logic so the application can remain useful when AI generation fails.
The most interesting part of this project is that the AI's purpose is to encourage less screen time and more real-world activity.
Why Does Open Innovation Matter?
Open innovation made this project possible without depending on a proprietary AI inference API.
Using an open-weight model with Transformers.js let me explore browser-based AI inference while keeping the architecture relatively simple. I didn't need to set up a dedicated model server or require users to install a separate AI runtime such as Ollama.
This approach offers several advantages:
🌍 Accessibility
Developers and users can experiment with AI without needing a paid inference API subscription. The model still requires an initial download, and performance depends on the user's device and browser.
🔍 Transparency and experimentation
The application code is available for inspection and modification. Developers can experiment with prompts, compatible models, mission categories, and reward systems.
🛠️ Developer freedom
An open model ecosystem makes it easier to learn about model inference and customize the experience instead of relying entirely on a closed, hosted API.
🔐 More control over inference
With browser-side inference, mission-generation prompts can be processed locally rather than sent to a dedicated inference API. Initial model and library downloads still use external hosting, so this is not a claim that the application makes no network requests.
🌱 AI with a purpose beyond the screen
This is the idea that matters most to me. AI applications often encourage people to spend more time interacting with digital content. GreenQuest AI takes a different approach: it uses AI to suggest activities that encourage people to leave their devices behind and experience nature.
Open innovation made it possible to experiment with this idea using accessible tools and a model I can inspect, customize, and build around.
My Agent Session
I haven't included an agent session link in this submission. If I publish a DevRelay session demonstrating the development process, I'll add it here.
Prize Categories
My primary submission is for the Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass.
Additional partner prize categories will depend on the challenge's official eligibility requirements. I'll list any additional categories only after confirming that GreenQuest AI meets their criteria.
Built with 🌿, JavaScript, and open-source AI.
Let's use AI to touch grass, not just scroll past it. 🌎💚
Top comments (0)