PLAYFIELD AI

Akshat Gupta — Tue, 06 Oct 2026 11:24:19 +0000

PlayField AI — What Should We Play?
What I Built

PlayField AI is a small open-source AI project built for Hacktoberfest's "Touch Grass" challenge.

The idea is simple: instead of asking an AI what to do while staying behind a screen, PlayField AI uses AI to help you decide what to play outside.

You can upload or capture a photo of a field, court, or outdoor space. The app uses an open AI vision model directly in the browser to analyze the image and recommend a sport that fits the environment.

It then shows:

🏏 The recommended sport

📊 A confidence score

💡 A short reason for the recommendation

🎯 A play challenge to encourage you to actually go outside and play

The project is designed for anyone who has access to an outdoor space but needs a little inspiration for what to play.

There is no paid AI API involved. The AI runs locally in the browser, and the uploaded photos stay on the user's device.

Code

💻 GitHub Repository:
https://github.com/akshgupta025-sketch/PLAYFIELD-AI

Demo
Demo Link:
https://akshgupta025-sketch.github.io/PLAYFIELD-AI/

How I Built It

PlayField AI is built with HTML, CSS, and JavaScript, with AI inference running directly in the browser using Transformers.js.

The project uses the open vision model Xenova/clip-vit-base-patch32.

When a user uploads or captures a photo, the application uses CLIP to compare the visual scene with possible sports and determine which sport is the best match.

The basic flow is:

Photo → Local AI Analysis → Sport Recommendation → Play Challenge → Go Outside

The model runs locally in the browser. On the first analysis, the open model needs to be downloaded once, which requires an internet connection. After that, it can be cached for subsequent use.

This means the application does not need a backend AI service or a paid API for image analysis.

Tech Stack

HTML

CSS

JavaScript

Transformers.js

Xenova/clip-vit-base-patch32

Browser-based local AI inference

Why Does Open Innovation Matter?

Open innovation made it possible to build this project without relying on a proprietary AI API.

Because the model can run locally in the browser through Transformers.js, PlayField AI doesn't need to send users' photos to a remote AI service. There are no paid AI API calls involved, and the core AI experience can run directly on the user's device after the model has been downloaded and cached.

Using an open model also makes it easier to experiment, learn, and extend the project. Developers can build on openly available models and browser-based AI tools instead of being limited to a single closed AI provider.

For a project like PlayField AI, this matters because the goal isn't just to demonstrate AI.

It's to use AI as a small tool that helps people leave the screen, go outside, and interact with the real world. 🌱

My Agent Session

Not included.

Prize Categories

No specific partner prize category selected.

DEV Community: Akshat Gupta

PLAYFIELD AI