Javiai/radionicapp

Radiónica — la app

Prototipo de etapa 1: una sola página donde se elige una imagen, se elige qué darle y se aplica. Sustituye a la idea anterior de "landing + app dentro": esto es lo único que hay.

Sin servidor. La imagen no sale nunca del dispositivo de quien la usa: se lee en el navegador y se descarga en el navegador. No hay cuenta, ni contraseña, ni pago.

Verlo en local

Hacen falta un par de cosas: son módulos de JavaScript, y el navegador no los carga si abres el archivo con doble clic. Hay que servirlo:

cd web python3 -m http.server 8000 # o: npm run servir

y abrir http://localhost:8000

Los tests

npm test # equivale a: node --test tests/*.test.js

No hace falta instalar nada: usa el ejecutor de tests que trae Node. Son la red de seguridad para cuando cambiemos cosas — sobre todo tokens.test.js, que falla si alguien escribe un color o una duración fuera de css/tokens.css, que es como se desmonta un sistema de diseño sin enterarse.

La prueba de navegador (el recorrido completo, y que en móvil no se salga nada) necesita Playwright y se salta sola si no está:

npm install -D playwright && npx playwright install chromium node --test tests/navegador.test.js

Dónde está cada cosa

El mapa completo

index.html estructura y símbolos. Sin un solo estilo en línea. css/tokens.css ← EL ARCHIVO DE DISEÑO. Dos capas: primitivos y semánticos. css/base.css reset y tipografía css/componentes/ cielo, umbral, carta, símbolos, controles js/proceso.js ← EL PROCESO. Entero, en un archivo, de arriba abajo. js/energias.js cómo se llaman las tres energías en la pantalla js/estado.js máquina de estados, sin DOM (por eso se puede probar sin navegador) js/vista.js pinta el estado; no decide nada js/main.js el cableado, nada más js/cielo.js estrellas generativas, leyendo tokens js/imagen.js cargar y entregar la imagen js/uso.js registro de uso, preparado y apagado js/textos.js los textos que cambian según el momento js/ejemplos.js las imágenes de ejemplo

Las reglas que sostienen esto: el CSS no sabe de JS, la vista no decide, el estado no toca el DOM, y ningún componente escribe un valor de diseño. Si algo de eso se rompe, los tests lo dicen.

Publicar en Hugging Face

Este directorio es la raíz del Space (sdk: static), no el repo de Gradio que hay un nivel más arriba. Hace falta un Space nuevo:

cd web git init && git add . && git commit -m "primera versión" git remote add origin https://huggingface.co/spaces/TU-USUARIO/EL-NOMBRE git push -u origin main

El proceso

Está entero en js/proceso.js y se lee de arriba abajo. La imagen se convierte en números, esos números entran en cada función y salen de ella.

En crearElSpell no les pasa nada físico: entran, el spell se crea con ellos dentro, y salen igual. Ese paso por dentro es el proceso. El spell no se muestra en ninguna parte.

Después, darContraste les aplica un aumento mínimo —uno o dos niveles en los extremos, nada en los medios tonos—.

Falta dejarLaHuella, que es donde el spell llegaría a la imagen.

En pantalla, una banda de luz difuminada recorre la imagen de arriba abajo y por su centro va pasando el revelado. La misma estructura servirá para el deslizador manual.

Decisiones abiertas

• —En qué formato se guarda. Hoy JPEG al 98%: la resolución es exacta, pero la compresión mueve valores por su cuenta. PNG no añadiría nada, a cambio de que el archivo pese entre cinco y diez veces más. Pendiente de probar el peso en un móvil real. El razonamiento completo está en js/imagen.js.
• —Imágenes muy grandes. Safari y iOS no permiten un lienzo de más de ~16,7 millones de píxeles: por encima de eso vuelve en blanco sin avisar. Hay que decidir qué se le dice a la persona cuando su foto pase de ahí.

Lo que está preparado y aún no encendido

• —Preparación neutra de la imagen antes de aplicar la energía elegida — js/conjuros.js, PREPARACION. Pendiente de pensar.
• —Marcar el metadato del archivo — js/pasos/metadato.js.
• —Huella en los píxeles — js/pasos/huella.js, con el procedimiento planteado el 13/09: del conjuro se saca un hash, y el hash decide qué píxeles se mueven y en qué dirección.
• —Registro de uso — js/uso.js. El identificador anónimo ya se guarda desde el primer día aunque no se envíe nada, para que cuando haya servidor se pueda saber quién volvió, no solo cuántos clics hubo.