diff --git a/.gitattributes b/.gitattributes index e93e833fa71a4d522bbceb3596720dad9b8ec666..a98497246ec89c4de637b9014ef71f2dbd9e8208 100644 --- a/.gitattributes +++ b/.gitattributes @@ -142,3 +142,8 @@ frontend/src/assets/imagens-default-room/terrace/terrace2.png filter=lfs diff=lf frontend/src/assets/imagens-default-room/terrace/terrace3.png filter=lfs diff=lfs merge=lfs -text frontend/src/assets/imagens-default-room/terrace/terrace4.png filter=lfs diff=lfs merge=lfs -text frontend/src/assets/imagens-default-room/terrace/terrace5.png filter=lfs diff=lfs merge=lfs -text +backend/uploads/demo-room_edit_ef2b9c2c_edit_32b3c807_edit_e6f30d22.jpg filter=lfs diff=lfs merge=lfs -text +backend/uploads/demo-room_edit_ef2b9c2c_edit_32b3c807.jpg filter=lfs diff=lfs merge=lfs -text +backend/uploads/demo-room_edit_ef2b9c2c.jpg filter=lfs diff=lfs merge=lfs -text +backend/uploads/demo-room.jpg filter=lfs diff=lfs merge=lfs -text +backend/uploads/proyecto-White-Houses_edit_d4a831c5_edit_c5a95477.jpg filter=lfs diff=lfs merge=lfs -text diff --git a/README.md b/README.md index 089d08772a5c9fd924a4d6540e31f0d23114372f..318cd1c8532d6a716559bde6c0950d1da84aba20 100644 --- a/README.md +++ b/README.md @@ -1,131 +1,180 @@ ---- -title: Hyper Reality Room Visualizer -emoji: 🏠 -colorFrom: blue -colorTo: indigo -sdk: docker -app_port: 7860 -pinned: false ---- - -# PoC SaaS Iframe - -Este repositorio es una prueba de concepto de un SaaS que ofrece un visualizador embebido mediante iframe. - -## Visión general - -El proyecto está dividido en dos partes principales: - -- `backend/` - servidor en Python con FastAPI que expone APIs, sirve el build de React en producción y controla la seguridad. -- `frontend/` - aplicación React creada con Vite que funciona como visualizador embebido. - -Además existen carpetas de ejemplos de cliente: - -- `cliente1/`, `cliente2/`, `cliente3/` - -Estas páginas muestran cómo integrar el widget del SaaS desde un host externo. - -## Documentación del proyecto - -- Documentación general: este archivo `README.md` -- Documentación del backend: `backend/README.md` - -## Arquitectura - -1. El backend maneja: - - `POST /api/token` para generar tokens temporales - - `GET /config` para devolver datos del cliente - - `POST /session/start` para registrar sesiones activas - - `/app` para servir el frontend construido en producción - - `/widget.js` para el widget que inyecta el iframe en clientes externos - -2. El frontend React se ejecuta en dos modos: - - desarrollo (`npm run dev` en `frontend/`) para cambios rápidos y hot reload - - producción (`npm run build`) produce `frontend/dist`, que el backend sirve como estático - -3. El widget cliente solicita un token al backend y luego inyecta un iframe con `/app?token=...`. - -## Flujo de desarrollo - -Este proyecto tiene dos flujos claros de desarrollo: - -1. Desarrollo frontend con Vite -2. Desarrollo backend con FastAPI - -Ambos pueden correr al mismo tiempo para que los devs trabajen en el app y en la API al mismo tiempo. - -### Flujo recomendado para desarrollo local - -1. Abrir una terminal para el backend: - -```cmd -cd /d C:\Users\alane\OneDrive\Escritorio\Prueba-PoC\backend -.venv\Scripts\activate -pip install -r requirements.txt -python -m uvicorn main:app --reload --host 0.0.0.0 --port 8000 -``` - -2. Abrir otra terminal para el frontend: - -```cmd -cd /d C:\Users\alane\OneDrive\Escritorio\Prueba-PoC\frontend -npm install -npm run dev -``` - -3. Cargar el app React en el navegador para ver hot reload: - -- `http://localhost:5173/app?token=...` - -4. Si necesitas probar la integración completa con el backend y los endpoints, usa también: - -- `http://localhost:8000/preview` -- `http://localhost:8000/admin` - -### Qué significa este flujo - -- `localhost:5173` sirve el frontend en modo desarrollo con hot reload. -- `localhost:8000` sirve el backend y, en producción, también el build estático de React. -- Durante el desarrollo, no necesitas ejecutar `npm run build` cada vez que cambias `frontend/src`. -- El build solo es necesario cuando quieres probar la app servida desde el backend (`/app`) o cuando subes a producción. - -### Desarrollo incremental - -- Cambia archivos en `frontend/src` y Vite recargará el navegador automáticamente. -- Cambia `backend/main.py` y Uvicorn recargará el backend automáticamente. -- Si quieres probar una ruta de frontend específica desde el backend, primero construye y luego carga `http://localhost:8000/app?token=...`. - -### Integración en producción - -Cuando ya estés listo para producción o para una prueba final: - -```cmd -cd /d C:\Users\alane\OneDrive\Escritorio\Prueba-PoC\frontend -npm run build -``` - -Luego abre: - -- `http://localhost:8000/app?token=...` - -En este modo, el backend sirve los archivos estáticos desde `frontend/dist`. - -## Comandos útiles - -- `npm run dev` - desarrollo React con Vite -- `npm run build` - generar `frontend/dist` -- `python -m uvicorn main:app --reload --host 0.0.0.0 --port 8000` - arrancar backend -- `run_server.bat` - helper Windows para iniciar el backend con `.venv` - -## Estructura de carpetas - -- `backend/` - servidor FastAPI, documentos y páginas auxiliares -- `frontend/` - app React + Vite -- `frontend/dist/` - build de producción -- `cliente1/`, `cliente2/`, `cliente3/` - ejemplos de integración - -## Importante - -- En desarrollo, usa `localhost:5173` para ver los cambios de frontend al instante. -- En producción, el backend sirve todos los assets desde `frontend/dist` en `/app`. -- `backend/README.md` contiene la documentación técnica detallada del backend. +--- +title: Hyper Reality Room Visualizer +emoji: 🏠 +colorFrom: blue +colorTo: indigo +sdk: docker +app_port: 7860 +pinned: false +--- + +# Hyper Reality Room Visualizer — PoC SaaS + +Visualizador de habitaciones embebido como SaaS mediante iframe. Los clientes reciben una API key y un snippet HTML; el backend genera un token temporal y carga el visualizador en un iframe. + +## Estructura del repositorio + +``` +Prueba-PoC/ +├── backend/ # FastAPI — API, autenticación, SAM2, texturas +│ ├── main.py +│ ├── routers/ +│ ├── services/ +│ ├── requirements.txt +│ ├── .env # variables locales (no se sube a git) +│ └── Dockerfile # usado solo por docker-compose (desarrollo local) +├── frontend/ # React + Vite — visualizador embebido +│ ├── src/ +│ ├── package.json +│ └── dist/ # generado por npm run build (ignorado en git) +├── Dockerfile # multi-stage para HuggingFace Spaces +├── docker-compose.yml # entorno local con Docker +└── README.md +``` + +## Arquitectura + +``` +Cliente externo (HTML del cliente) + └─► widget.js — se auto-descarga desde el servidor + └─► POST /api/token — obtiene token temporal + └─►