README.md

# Word to Code

[![Hugging Face Spaces](https://img.shields.io/badge/%F0%9F%A4%97%20Hugging%20Face-Spaces-blue)](https://huggingface.co/spaces/tinazone/word-to-code)

This is a [Next.js](https://nextjs.org) project that transforms natural language descriptions into visual code sketches.

## 🤗 HuggingFace Space Setup

1. Clone the repository:
```bash
git clone https://huggingface.co/spaces/tinazone/word-to-code
cd word-to-code
```

2. Set up your environment variables:
   - Go to your HuggingFace Space's Settings tab
   - Under "Repository Secrets", add a new secret:
     - Name: `GEMINI_API_KEY`
     - Value: Your Gemini API key from https://ai.google.dev/
   - The secret will be securely passed to the container at runtime

3. Make your changes and push them back:
```bash
git add .
git commit -m "Update space"
git push
```

Note: When pushing, use a HuggingFace access token with write permissions as your password. Generate one from: https://huggingface.co/settings/tokens

## 🎨 Space Configuration

---
title: Word to Code - Visual Code Sketch Generator
emoji: 🎨
colorFrom: blue
colorTo: purple
sdk: docker
pinned: false
app_port: 3000
---

## Local Development

1. Create a `.env.local` file in the root directory:
```bash
GEMINI_API_KEY=your_api_key_here
```

2. Install dependencies:
```bash
npm install
```

3. Run the development server:
```bash
npm run dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

## Features

- Transform natural language descriptions into visual code sketches
- Download sketches as GIF animations
- Real-time code generation and visualization
- Modern, responsive UI

## Technical Stack

- Next.js 14
- React 18
- Tailwind CSS
- P5.js for sketching
- FFmpeg for GIF generation
- Gemini 2.0 for code generation

You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.

[API routes](https://nextjs.org/docs/pages/building-your-application/routing/api-routes) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.

The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/pages/building-your-application/routing/api-routes) instead of React pages.

This project uses [`next/font`](https://nextjs.org/docs/pages/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.

## Learn More

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn-pages-router) - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!

## Deploy on Vercel

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

Check out our [Next.js deployment documentation](https://nextjs.org/docs/pages/building-your-application/deploying) for more details.