DEV Community

Cover image for NatureMate AI: Turning Screen Time into Green Time with Open-Source AI
Tejasvi
Tejasvi

Posted on

NatureMate AI: Turning Screen Time into Green Time with Open-Source AI

Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass Submission 🌿

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

What I Built

NatueMateAI-Touch Grass Challenge

![ ](https://dev-to-uploads.s3.us-east-
I built NatureMate AI — Touch Grass Challenge, a web application that encourages people to spend less time scrolling on screens and more time exploring the outdoors.

The idea is simple: instead of spending every free moment on a phone or computer, users can generate small nature-based missions, such as taking a mindful walk, observing different leaves, listening to birds, or exploring a nearby park.

The application includes an outdoor challenge timer, mission suggestions, progress tracking, and a nature journal where users can save their reflections.

It is designed especially for students and anyone who wants to build healthier digital habits through small, achievable outdoor activities.

My goal was to use technology as a bridge between the digital world and the natural world.
2.amazonaws.com/uploads/articles/30vdzw6zi1rauaz457x4.png)

Demo

🌐 Live Website: https://tejasvimishra6.github.io/NatureMate-AI/


💻 GitHub Repository: https://github.com/TejasviMishra6/NatureMate-AI

You can visit the website to explore NatureMate AI and try its nature challenge features.

Code

🌐 Live Website: https://tejasvimishra6.github.io/NatureMate-AI/

You can visit the website to explore NatureMate AI and try its nature challenge features.

How I Built It

I built NatureMate AI using HTML5, CSS3, and JavaScript, with Transformers.js for browser-based AI integration.

The project uses the open-weight model onnx-community/Qwen2.5-0.5B-Instruct through the Transformers.js library to generate nature-based activity suggestions directly in the browser.

Here is how the main components work:

HTML5: Structures the website, including the mission section, timer, progress statistics, and nature journal.
CSS3: Creates a clean, responsive interface with nature-inspired colours and styling.
JavaScript: Handles user interactions, countdown timers, mission generation, and progress tracking.
Transformers.js: Provides browser-based inference with a compatible text-generation model.
Hugging Face: Hosts the model files used for AI-powered mission generation.
Local Storage: Saves completed challenge statistics and journal reflections in the user's browser.

When a user requests a mission, the application attempts to generate one using the AI model. If the model fails to load or its output cannot be processed, predefined nature missions provide a fallback experience.

I chose browser-based inference to explore how AI can be integrated into a lightweight web application without requiring Ollama or a separate local AI server. The model and its dependencies may need to be downloaded over the internet, and performance depends on the user's device and browser.

Why Does Open Innovation Matter?

Open innovation matters because useful technology should be something people can learn from, experiment with, and improve together.

For this project, open-weight AI and open-source tools made it possible to explore AI-powered features without building a model from scratch or relying on a proprietary hosted AI API.

This approach offers several benefits:

Accessibility: Students and beginners can experiment with AI using familiar web technologies.
Transparency: Developers can inspect and modify the application code.
Flexibility: The AI model can potentially be replaced with another compatible model.
Learning opportunities: The project demonstrates how open AI tools can be integrated into a practical application.
Community collaboration: Other developers can contribute new missions, improve the interface, and extend its features.

A closed API could also generate nature missions, but using an open-weight model gives developers more opportunities to experiment with model integration and browser-based inference. It can also reduce dependence on a proprietary inference provider, although hardware requirements, model licensing, and download requirements still matter.

NatureMate AI represents my belief that AI should not only make digital experiences more engaging but also help people take meaningful actions in the real world.

My Agent Session

I have not included an agent session link in this submission.

Prize Categories

Primary focus: Open-Source AI

NatureMate AI explores the use of an open-weight language model and open-source browser-based AI tooling to create a practical application that encourages healthier digital habits and outdoor exploration.

Top comments (0)