# screenshot-to-code

[Source](https://github.com/abi/screenshot-to-code)

Esta es una simple aplicación que convierte una captura de pantalla a HTML/Tailwind CSS. Utiliza GPT-4 Vision para generar el código y DALL-E 3 para generar imágenes de aspecto similar.

<iframe width="1080" height="760" src="https://cloud.animaespacio.org/index.php/RwCjzJJnbr6brpN/download" title="Github video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> 


## Empezando

La aplicación tiene un frontend React/Vite y un backend FastAPI. Necesitarás una clave API OpenAI con acceso a la API GPT-4 Vision.

Ejecuta el backend (yo uso Poetry para la gestión de paquetes - `pip install poetry` si no lo tienes):

```bash
cd backend
echo "OPENAI_API_KEY=sk-tu-clave" > .env
instalar poetry
shell poetry
poetry run uvicorn main:app --reload --port 7000
```

Ejecuta el frontend

```bash
cd frontend
yarn
yarn dev
```
Abre http://localhost:5173 para utilizar la aplicación.
Si prefieres ejecutar el backend en un puerto diferente, actualiza VITE_WS_BACKEND_URL en `frontend/.env.local`.

## Versión alojada


🆕 [Pruébalo aquí](https://picoapps.xyz/free-tools/screenshot-to-code) (trae tu propia llave OpenAI - **tu llave debe tener acceso a GPT-4 Vision. Vea la sección [FAQ](#faqs) para más detalles**). O consulta [Getting Started](#getting-started) para instrucciones de instalación local.