This is a submission for the Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass
What I Built
I built TouchGrass AI 🌿, an AI-powered outdoor adventure planner designed to encourage people to take a break from their screens and reconnect with nature.
In today's digital world, many of us spend hours in front of screens and sometimes struggle to find simple, enjoyable outdoor activities. TouchGrass AI makes getting outside easier by helping users discover nature-based challenges and plan small outdoor adventures.
Key Features
- 🌿 AI-Powered Adventure Planning: Generate personalized outdoor activity suggestions.
- 🌳 Nature Challenges: Discover activities that encourage outdoor exploration.
- ✅ Challenge Tracking: Mark completed challenges and monitor progress.
- 📊 Progress Dashboard: Keep track of completed activities.
- 💾 Local Progress Saving: Store challenge progress in the browser.
- 🎨 Nature-Inspired Design: A clean, green interface focused on outdoor experiences.
- 🔄 Fallback Suggestions: Provide predefined activity ideas when AI generation is unavailable.
The project is designed for students, developers, and anyone who wants to balance screen time with real-world experiences.
My goal is simple: Use technology to encourage people to spend less time on screens and more time exploring the world around them.
Demo
🌐 Live Website: TouchGrass AI
Explore the website, discover outdoor challenges, and try the adventure planner.
Code
💻 GitHub Repository: Touch-Grass-Ai
The project is built with HTML, CSS, and JavaScript, with AI integration designed to run in the browser.
The repository contains the source code and project documentation, making it easier for others to explore, learn from, and contribute to the project.
How I Built It
I built TouchGrass AI using HTML5, CSS3, and JavaScript for the frontend, focusing on an interactive experience that makes outdoor exploration simple and engaging.
For the AI component, I used Transformers.js with the Hugging Face model configured in the project: onnx-community/Qwen2.5-0.5B-Instruct.
The goal of this approach is to run a compatible open-source language model directly in the browser, rather than relying entirely on a paid, closed AI API. The application also includes predefined fallback suggestions for situations where AI generation is unavailable.
Technology Stack
- HTML5: Page structure and content.
- CSS3: Visual design and responsive styling.
- JavaScript: Interactions, challenge tracking, and application logic.
- Transformers.js: Browser-based AI inference.
- Hugging Face: Open model hosting and distribution.
- Local Storage: Saving challenge progress in the browser.
- GitHub Pages: Hosting the live website.
Building this project helped me explore how open-source AI can be integrated into a practical web application.
Why Does Open Innovation Matter?
Open innovation matters because AI development should be accessible to learners, independent developers, and communities—not just organizations with large budgets.
Using open-source AI tools gives developers an opportunity to experiment, understand how models work, and build useful applications without depending entirely on closed APIs.
For TouchGrass AI, this approach makes experimenting with browser-based AI possible while keeping the application lightweight in its architecture and accessible through a web browser.
Open innovation also encourages collaboration, transparency, learning, and continuous improvement. Developers can study the implementation, suggest improvements, and build upon existing ideas.
As a student exploring AI and web development, this project gave me an opportunity to turn an idea into a working web experience while learning how open-source technologies can support real-world problems.
My Agent Session
I developed this project by working through the frontend structure, styling, JavaScript functionality, and AI integration.
Agent session: Not included in this submission.
Prize Categories
- Open-Source AI Application
- Browser-Based AI / Web Development
Note: These categories describe the project's focus. Please verify the official challenge partner categories before submitting and replace these with the exact eligible category names.
🌿 TouchGrass AI — Take a break. Step outside. Touch grass.
Thanks for checking out my project! I'd love to hear your feedback and suggestions for making the experience better.
Top comments (0)