README.md

metadata

title: ECOTAGS 3D
emoji: 🌌
colorFrom: indigo
colorTo: green
sdk: static
sdk_version: 1.0.0
app_file: index.html
pinned: false

ECOTAGS 3D - Deploy en Hugging Face Spaces (Static)

Este proyecto es una app web 100% cliente (Three.js + Firebase + Gemini) que puede correr en un Space estático de Hugging Face.

Estructura

• index.html: Aplicación principal.
• styles.css: Estilos opcionales.
• scripts/: Scripts auxiliares (si los usas).
• netlify/ y netlify.toml: Configuración de Netlify (opcional; en Hugging Face Static no se usan).

Importante sobre la API de Gemini

En un Space estático NO existe backend. Por lo tanto, la app hace llamadas directas a la API de Gemini con una clave guardada localmente en el navegador.

• Abre la sección "Configuración" dentro de la app (index.html).
• Pega tu clave de Gemini en "Gemini API Key (guardada localmente)" y pulsa "Guardar clave".
• La clave se almacena en localStorage del navegador y no se sube al servidor.

Si necesitas ocultar la clave del cliente, migra a un Space con backend (por ejemplo Gradio/Streamlit en Python) y usa los Secrets del Space para acceder a la API desde el servidor.

Firebase: dominios autorizados

Si usas Firebase Auth/Firestore, añade los dominios del Space a la lista de dominios autorizados en la consola de Firebase:

• https://<tu-usuario>-<tu-space>.hf.space
• En previews/PRs, también pueden generarse subdominios temporales https://<algo>.hf.space.

En Firebase Console:

• Auth > Settings > Authorized domains: agrega los dominios del Space.
• Firestore Rules: asegúrate de tener las reglas que necesitas para lectura/escritura.

Crear el Space

1. Ve a https://huggingface.co/spaces y crea un nuevo Space.
2. Tipo de Space: "Static".
3. Conecta tu repositorio o sube los archivos del proyecto (index.html, styles.css, etc.).
4. Configuración del Space (Static):
   • Build command: vacío (no hay build si no usas bundler)
   • Build output directory: / (raíz) o la carpeta donde esté tu index.html
5. Guarda y espera a que el Space se construya.

La app debería quedar accesible en https://<tu-usuario>-<tu-space>.hf.space/.

Notas sobre el antiguo proxy de Netlify

Este proyecto incluye un proxy de Netlify en netlify/functions/gemini-proxy.js para ocultar la clave de Gemini cuando se despliega en Netlify. En Hugging Face (Static) ese endpoint no existe, por lo que la app intentará primero el proxy y, si falla, usará automáticamente la clave local.

• Puedes dejar esos archivos sin problema.
• Si deseas limpiar el repositorio para Hugging Face, elimina netlify/ y netlify.toml (opcional).

Migrar a Space con backend (opcional)

Si quieres ocultar la clave y hacer llamadas a Gemini desde el servidor:

• Crea un Space nuevo tipo Gradio o Streamlit (Python) o Node.
• Mueve la lógica del proxy (actualmente en netlify/functions/gemini-proxy.js) a una ruta del backend.
• Configura GEMINI_API_KEY como Secret del Space.
• En index.html, elimina el fallback local o invierte el orden para forzar el backend.

Desarrollo local

Puedes abrir index.html en un servidor local sencillo (para evitar problemas de CORS y rutas):

• Con Python 3: python -m http.server 8000
• Con Node (serve): npx serve .

Luego visita http://localhost:8000.

Asegúrate de:

• Configurar la API key de Gemini localmente en la app.
• Tener los dominios locales autorizados en Firebase (localhost, 127.0.0.1).