cd /news/generative-ai/outsideclass-a-little-less-screen-a-… · home › topics › generative-ai › article
[ARTICLE · art-147769] src=dev.to ↗ pub= topic=generative-ai verified=true sentiment=↑ positive

OutsideClass: A Little Less Screen, a Little More World

A teacher built OutsideClass, an MIT-licensed learning website that uses Google's open-weight Gemma model, served through the Gemini API, to turn a learner's question into an explanation plus a short real-world observation activity. The app keeps the API key server-side, validates bounded inputs with a request timeout and structured responses, and stores optional personalization preferences only in the browser, with prepared samples runnable locally without an API key.

by read6 min views1 publishedOct 8, 2026

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass A learner can read an explanation of symmetry and still walk past a leaf without noticing either half.

That gap is where OutsideClass starts.

I built a learning website that turns a question into something you can notice, compare and explain in the world around you. It uses Google's open-weight Gemma model to prepare an explanation and, when the topic suits it, a short observation activity.

The learning loop is simple:

Ask a question. Read the activity. Put the screen away. Observe. Return with something you noticed.

As a teacher, I care about what remains after someone closes a lesson. Can they recognise the idea somewhere else? Can they describe their evidence? Can they consider another explanation?

OutsideClass gives those questions a place in the learning process.

An activity card provides a focus, manageable steps, safety notes and questions to think about afterwards. Learners can save reflections, attach their own evidence photos, try practice questions and revisit their discoveries in a notebook.

For example, the prepared pattern activity asks learners to compare two nearly matching halves of a leaf. They do not need to pick it. The interesting part is looking closely enough to notice where the halves agree and where they differ. The diagram introduces the comparison. The learner's observation supplies the evidence.

OutsideClass is designed for learners, parents and teachers. Activities can be adapted to the time available, weather, time of day and a family or classroom group. Seated and window-based participation are available too.

The aim is to make the screen a starting point, then give attention back to the world.

A little less screen. A little more world.

You can explore the app without signing up or providing a phone number.

Here is a quick way to try it:

Three prepared samples let visitors explore the format without making a fresh model request. They are clearly labelled as samples.

The current app also includes:

Personalisation is deliberately simple. An optional first name or nickname and a Learner, Teacher or Parent role can personalise the greeting. These preferences stay in the browser. They are not a verified account and do not provide automatic device sync.

I have also prepared a ten-minute walkthrough covering the learning flow, notebook, practice, image consent and Updates. Its examples are demonstrations, not a report of a completed outdoor lesson.

The walkthrough was assembled using Brag, Hyperframes and F5-TTS, with my own voice recording as the narration reference.

The repository is public, and the application source is MIT-licensed.

The repository and its first commits were created on October 6, 2026, during this challenge.

The README covers local setup, Gemma configuration, privacy boundaries and current limitations. The prepared samples can run locally without an API key.

The starting configuration uses gemma-4-26b-a4b-it, served through Google's Gemini API.

The API is the hosting interface. The model requested by OutsideClass is Gemma.

Gemma generates learning explanations, observation activities and practice questions from the learner's question and selected context. Follow-up requests can include the earlier answer, while return visits can use the learner's selected observation context.

This makes Gemma part of the main learning flow: it prepares the material that the learner takes into an observation and returns to afterwards.

The server validates bounded inputs, applies a request timeout and asks for a structured response. It checks the returned content before rendering it.

The API key stays on the server.

Safety guidance also lives in application code. The app can add relevant notes for children, groups, weather and participation choices, rather than depending entirely on a generated response to remember them.

Generated explanations can still be wrong. Adults should review lessons for children, and practice results are learning feedback rather than formal grades.

OutsideClass uses HTML, CSS and browser JavaScript, with a Node.js development server and a Vercel API handler for hosted inference. The application has no runtime npm dependencies.

Saved cards and reflections live in browser localStorage. Evidence photos use IndexedDB. A service worker caches supported pages and resources after an online visit.

There are two separate image flows:

Weather and time of day are selected manually. The app does not require GPS, camera or microphone access.

A lesson pack excludes personal reflections and photos. A notebook backup can contain them. Keeping those exports separate helps teachers share a lesson without accidentally sharing a learner's private work.

An attractive activity card is not enough if a learner loses the reflection they just wrote.

During testing, finishing a timer after returning to its card exposed a problem with unsaved practice answers. I fixed that flow so timer completion preserves the open card's work.

Notebook capacity also refuses new cards at the limit instead of silently removing older discoveries.

The current release passes 72 automated tests and its build check. Coverage includes response validation, provider failures, image consent, practice scoring, storage failures, timer recovery and backup restoration.

Desktop browser checks exercised live Gemma responses and restoring notes, practice results and evidence photos into a fresh notebook. I also tested the app on my phone, and the flows I tried worked.

The current limits are clear:

For me, the value is being able to inspect and change the learning process around an open-weight model. Gemma's available weights leave room to explore a different inference deployment later, including local inference on suitable hardware. That option matters for an app intended to move learning beyond a reliable internet connection.

For this release, I chose hosted inference so learners can open the website without down a model. OutsideClass does not currently run Gemma locally, and changing providers would require adapting the server integration. Opening the application source is equally useful.

Someone can inspect how questions become activities, read the safety rules, change the prompts, select another supported Gemma model or build on the notebook tools. A teacher working with a different curriculum can examine the assumptions and adapt them.

The combination gives others access to the application logic today and a path to experiment with the model's deployment in the future.

The privacy boundaries come from the application design: notebook reflections and evidence photos stay local, while submitted questions and consented question images are processed by Google.

That boundary needs to be explained honestly.

For this challenge, the working contribution is a learning loop that connects an open-weight model to observation, evidence and reflection. The next question should sometimes come from something the learner noticed outside, rather than another suggestion on a screen.

The GitHub repository includes the implementation, commit history and verification notes behind the build. A public DevRelay session is not included in this submission.

Best Use of Gemma

OutsideClass uses Google's Gemma open-weight model to generate its learning explanations, observation activities and practice questions.

Gemma powers the core feature connecting a learner's question to an activity they can take into the world.

Gemma is developed by Google. Hosted access is documented in Google's Gemma API guide. Its model and service terms apply separately from the application's MIT licence.

── more in #generative-ai 4 stories · sorted by recency
── more on @outsideclass 3 stories trending now
sponsored brought to you by zahid.host 4,200+ EU-deployed projects
reading about agents? ship yours in a single git push.

Run your AI side-project on zahid.host

EU-based hosting, git-push deploys, automatic HTTPS, no cold starts. Free tier with a custom domain — perfect for shipping the agent you just read about.

$git push zahid main
→ Live at https://your-agent.zahid.host ✓
Get free account → Pricing
from €0/mo · no card required
LIVE [news/outsideclass-a-littl…] indexed:0 read:6min 2026-10-08 · —