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


# 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.

Built by: [Tina Tarighian](https://tina.zone) Designed by: [Jocelyn Zhao](https://jocelynzhao.com/)

## 🤗 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

## 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
```