metadata

title: HandSpew
emoji: 👋
colorFrom: green
colorTo: blue
sdk: docker
sdk_version: 3.0.0
app_port: 3000
pinned: false

Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

HandSpew

HandSpew is a simple web application that uses MediaPipe for hand landmark detection and Gemini 2.0 Flash for generating thoughts based on hand gestures. When you open your hand like a puppet mouth (thumb not touching other fingers), the app generates a thought related to what the camera sees.

Features

Real-time hand landmark detection using MediaPipe
Thought generation using Gemini 2.0 Flash
Simple and intuitive UI
Responsive design

Getting Started

Prerequisites

Node.js 18.x or higher
A Gemini API key from Google AI Studio

Installation

Clone the repository:

git clone https://github.com/yourusername/handspew.git
cd handspew

Install dependencies:

npm install

Create a .env.local file in the root directory and add your Gemini API key:

GEMINI_API_KEY=your_gemini_api_key_here

Start the development server:

npm run dev

Open http://localhost:3000 in your browser.

How to Use

Allow camera access when prompted
Position your hand in front of the camera
Open and close your hand like a puppet mouth:
- When your thumb is touching another finger (closed mouth), no thoughts are generated
- When your thumb is not touching any finger (open mouth), a thought is generated based on what the camera sees

Deployment

Deploying to Hugging Face Spaces

Create a new Space on Hugging Face
Connect your GitHub repository
Add your Gemini API key as a secret in the Space settings with the name GEMINI_API_KEY
Deploy the app

Technologies Used

Next.js - React framework
MediaPipe - Hand landmark detection
Gemini 2.0 Flash - Vision-based thought generation
Tailwind CSS - Styling

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

Google for providing the MediaPipe and Gemini APIs
The Next.js team for the amazing framework