| --- |
| 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](https://ai.google.dev/) |
|
|
| ### Installation |
|
|
| 1. Clone the repository: |
|
|
| ```bash |
| git clone https://github.com/yourusername/handspew.git |
| cd handspew |
| ``` |
|
|
| 2. Install dependencies: |
|
|
| ```bash |
| npm install |
| ``` |
|
|
| 3. Create a `.env.local` file in the root directory and add your Gemini API key: |
|
|
| ``` |
| GEMINI_API_KEY=your_gemini_api_key_here |
| ``` |
|
|
| 4. Start the development server: |
|
|
| ```bash |
| npm run dev |
| ``` |
|
|
| 5. Open [http://localhost:3000](http://localhost:3000) in your browser. |
|
|
| ## How to Use |
|
|
| 1. Allow camera access when prompted |
| 2. Position your hand in front of the camera |
| 3. 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 |
|
|
| 1. Create a new Space on Hugging Face |
| 2. Connect your GitHub repository |
| 3. Add your Gemini API key as a secret in the Space settings with the name `GEMINI_API_KEY` |
| 4. Deploy the app |
|
|
| ## Technologies Used |
|
|
| - [Next.js](https://nextjs.org/) - React framework |
| - [MediaPipe](https://ai.google.dev/edge/mediapipe/solutions/vision/hand_landmarker) - Hand landmark detection |
| - [Gemini 2.0 Flash](https://ai.google.dev/gemini-api/docs/vision) - Vision-based thought generation |
| - [Tailwind CSS](https://tailwindcss.com/) - 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 |
|
|
