# Devi (DevIA): guía para otra IA Lee este archivo completo antes de usar los recursos de esta carpeta. Dice quién es Devi, qué archivos hay, cuándo usar cada uno y qué reglas respetar. La web con todo animado y probable está en **https://devi.devmarkpe.com**. > **English summary.** Devi is the mascot of DEVMARK and the face of its AI, called **DevIA** (always > written with a capital "IA"; "Devi" is the affectionate name). It is a small robot with a diagonally cut > top-left corner, a dark screen face with two pill-shaped eyes and a diagonal antenna. Everything here is > ready to use: `recursos/svg` (vector, transparent), `recursos/png` (1024 px, transparent), > `recursos/avatar` (square, for circular crops), `recursos/video` (samples), `web/` (a `` > custom element that animates it in any page) and `motor/` (a Node engine that renders any state as SVG > frames and exports WebM/MOV with alpha, MP4, GIF, APNG). File names follow `devi-{version}-{state}.{svg|png}` > with versions `base | patitas | completo`. Use the colors below, never redraw the character, and follow > the rules in this file. ## Quién es | Nombre | Qué es | Cómo se escribe | |---|---|---| | **DevIA** | La inteligencia artificial de DEVMARK | Siempre **DevIA**, con "IA" en mayúscula. Nunca "Devia" ni "DEVIA" | | **Devi** | La mascota, la cara de DevIA. Es el nombre cariñoso | **Devi** | DEVMARK es el holding de agencia web y software de Jaime Tarazona (devmarkpe.com). Usa **DevIA** en contextos formales (menús, ajustes, documentos) y **Devi** en trato cercano ("Devi está pensando…", saludos, tutoriales, redes). ## Cómo es (para describirla igual) Un robot pequeño de cabeza grande. El cuerpo es un cuadrado redondeado al que le falta la **esquina superior izquierda, cortada en diagonal**: es el gesto del isotipo de DEVMARK y lo que la hace reconocible. Una **franja oscura** recorre la parte de arriba siguiendo ese corte. La cara es una **pantalla oscura** con **dos ojos claros en forma de píldora**, y debajo tres puntitos que se apagan. Tiene **orejas** pequeñas a los lados y una **antena** fina que sale del centro del corte, inclinada, con una bolita oscura de aro claro. Las manos son manoplas con pulgar; los pies, zapatos con suela oscura. La versión de cuerpo completo lleva el isotipo de DEVMARK en el pecho. **No la redibujes.** Usa los archivos. Si necesitas otra pose, genérala con el motor. ## Colores | Rol | Hex | Dónde | |---|---|---| | Cuerpo | `#5B53D0` | cuerpo y cabeza | | Oscuro | `#3D34BC` | franja superior, orejas, brazos, patas, suela | | Claro | `#A9B4FF` | ojos, manos, pies, antena, insignias, isotipo del pecho | | Tinta | `#110C29` | pantalla y bolita de la antena | Fondos recomendados: claro `#F4F5FF`, oscuro `#110C29`. Sobre fondo oscuro, prefiere la versión base. ## Qué hay en la carpeta | Ruta | Contenido | |---|---| | `recursos/svg/` | 54 poses vectoriales (3 versiones × 18 estados), fondo transparente, lienzo 300 × 290 | | `recursos/png/` | Las mismas poses en PNG de 1024 px, con transparencia | | `recursos/avatar/` | Avatar cuadrado de la cabeza (`claro`, `oscuro`, `indigo`), SVG y PNG, para recorte circular | | `recursos/hojas/` | Una imagen por versión con los 18 estados juntos: míralas para elegir una pose | | `recursos/video/` | Muestras: `devi-completo-presentacion` (webm con transparencia y mp4) y `devi-patitas-ia` (webm y gif) | | `recursos/manifiesto.json` | Lista legible por máquina de archivos, estados y colores | | `web/` | La etiqueta ``: Devi animada en cualquier página, sin React ni build | | `ejemplo.html` | Una página de ejemplo que usa la etiqueta | | `motor/` | El motor en Node para generar cualquier pose o animación | | `guia/mascota-devi.md` | La guía completa de marca y uso | Nombre de archivo: `devi-{version}-{estado}.{svg|png}`, por ejemplo `recursos/svg/devi-patitas-exito.svg`. ### Versiones | Versión | Clave | Tamaño en pantalla | Cuándo | |---|---|---|---| | Base (solo cabeza) | `base` | 24 a 64 px | Avatar de chat, notificaciones, cabecera del asistente, perfil de redes | | Patitas y manitos | `patitas` | 96 a 160 px | Estados vacíos, errores, tarjetas de celebración, portal | | Cuerpo completo | `completo` | 240 a 320 px | Tutorial, bienvenida, portada, videos y reels | Por debajo de 48 px usa siempre `base`. No escales `completo` a tamaño de avatar. ### Estados (18) | Clave | Cuándo usarlo | |---|---| | `reposo` | Estado de partida, sin acción | | `saludo` | Bienvenida, registro, inicio de sesión | | `senalando` | Tutorial: señala algo | | `hablando` | Narrar o explicar: la boca se abre con la voz | | `feliz`, `amor`, `guino`, `sorpresa`, `mareado` | **Solo reacciones de juego** (ver reglas) | | `triste` | Cancelado o rechazado, sin dramatizar | | `pensando` | La IA está razonando | | `escribiendo` | La IA está respondiendo | | `buscando` | La IA está buscando en archivos o en una base de conocimiento | | `cargando` | Cargas largas, exportaciones, envíos | | `exito` | Completado, pagado, aprobado | | `error` | Algo falló y hay que actuar | | `alerta` | Vencimiento próximo, aviso importante | | `durmiendo` | Estado vacío o sin actividad | ## Reglas 1. **Dos niveles de IA.** La **chispa** (icono de cuatro puntas) marca "esto lo hizo la IA" en botones y etiquetas, sin mascota. **Devi** solo aparece donde hay conversación o una acción larga de la IA. 2. **Una versión según el tamaño** (tabla de arriba). 3. **Sobria en el trabajo, cálida con el cliente.** En paneles densos, solo estados y tamaño pequeño. En portales y pantallas de bienvenida, más presencia y celebración. 4. **Solo en superficies de DEVMARK.** No la pongas en sitios de terceros ni de clientes de Jaime: esos sitios llevan su propia marca. 5. **Tono.** Nada de gestos juguetones en errores de pago o de seguridad. `mareado`, `amor`, `guino`, `feliz` y `sorpresa` **no** son estados de sistema: son reacciones de juego. 6. **Accesibilidad.** Pon siempre un texto (`alt`, `aria-label` o texto visible) con el estado. Con `prefers-reduced-motion`, usa una imagen quieta en vez de animación. La mascota no lleva información que no esté también en texto. 7. **No alteres el personaje:** ni forma, ni colores, ni proporciones, ni el nombre. Si hace falta otra pose o accesorio, regenera con el motor. ## Cómo usarla **Imagen estática** (lo más simple): ```html Devi celebra: proyecto completado ``` **Animada, en cualquier página**, con la etiqueta (sin React ni build). Abre `ejemplo.html` para verla: ```html ``` Atributos: `version`, `estado`, `tamano` (px), `texto` (accesible; vacío la vuelve decorativa), `emocion` (neutral, alegre, entusiasta, serio, sorpresa, triste; al hablar), `juego` (seguir el cursor y reaccionar, solo en superficies de juego), `sombra="false"`. Propiedades de JavaScript: `mirarA = { x, y }` y `voz = 0 a 1`. También se puede cargar desde `https://devi.devmarkpe.com/v1/devi.js`. Un estado según el dato, por ejemplo el estado de un proyecto: ```js const DEVI_POR_ESTADO = { PLANIFICACION: "pensando", EN_CURSO: "escribiendo", PAUSADO: "durmiendo", COMPLETADO: "exito", CANCELADO: "triste", }; const ruta = (version, estado) => `recursos/svg/devi-${version}-${estado}.svg`; ``` Chat con IA: `pensando` mientras se espera la respuesta, `escribiendo` mientras llegan los tokens, `exito` al terminar y `error` si falla. ## El motor (para generar más) Requiere Node 20 o superior y, para video, `ffmpeg`. ```bash cd motor npm install npm run generar # regenera svg, png, avatares, hojas y manifiesto en ../recursos node video.mjs --version completo --secuencia "saludo:2,senalando:3,exito:2.5" --fps 30 --formatos webm,mov,mp4 ``` Opciones de `video.mjs`: `--version` (`base`, `patitas`, `completo`), `--estado` y `--seg`, o bien `--secuencia "estado:segundos,estado:segundos"`, `--fps`, `--alto` (1080), `--fondo` (`transparente`, `claro`, `oscuro` o `#hex`), `--mirada x,y` (a dónde mira o señala, en el lienzo 300 × 290), `--sin-sombra`, `--formatos` (`webm,mov,gif,apng,mp4,png`), `--salida`. Desde código, `motor/rig.mjs` no tiene dependencias: ```js import { Devi, pose } from "./motor/rig.mjs"; const svg = pose("patitas", "exito"); // una pose fija const d = new Devi("patitas"); d.setEstado("exito"); for (let i = 0; i < 60; i++) d.paso(1 / 60); const cuadro = d.svg(); // un cuadro de la animación, SVG puro ``` ### Qué formato sirve para qué | Dónde | Formato | |---|---| | Web propia | SVG, o la etiqueta `` si debe moverse | | Correo, PDF, presentaciones | PNG transparente (1024 px) | | Avatar de redes o WhatsApp | `recursos/avatar/*.png` | | Video web con transparencia | WebM | | Edición de video (Premiere, DaVinci) | MOV ProRes 4444 (con el motor) | | Reels, TikTok, Shorts | MP4 sobre fondo | | Chats donde solo cabe una imagen animada | GIF o APNG | ## Interacciones de juego **Solo cuando el usuario juega con Devi**, en superficies de juego (bienvenida, tutorial, 404, estados vacíos, portal del cliente). Nunca en tablas, formularios o paneles densos. Con el atributo `juego`: | Acción | Reacción | |---|---| | Mover el cursor | Los ojos siguen primero y el cuerpo después, con retraso | | Cursor encima | `feliz`; si se queda más de 1,6 s, `amor` | | Clic | Squash y salto con `sorpresa` | | Doble clic | `guino` | | Tres clics en 1,7 s | `mareado` 3 s (ignora clics mientras dura) | | Mantener presionado 0,5 s | Se aplasta con `amor`; al soltar rebota | | 12 s sin tocar | `durmiendo`; al mover el cursor despierta con `sorpresa` | `pensando`, `escribiendo`, `buscando`, `durmiendo` y `error` no siguen el cursor. ## Texto listo para pegar a otra IA > Voy a usar la mascota **Devi** de DEVMARK, que es la cara de **DevIA**, la inteligencia artificial. > Los recursos están en la carpeta `Devi-DevMark`. Lee `PARA-IA.md` y respeta sus reglas: usa los SVG o > PNG existentes, no redibujes ni cambies colores, elige la versión según el tamaño (`base` hasta 64 px, > `patitas` de 96 a 160 px, `completo` de 240 a 320 px), pon siempre un texto con el estado, y usa > `mareado`, `amor`, `guino`, `feliz` y `sorpresa` solo como reacciones de juego. DevIA se escribe > siempre con "IA" en mayúscula; Devi es el nombre cariñoso de la mascota. ## Propiedad Devi y DevIA son de DEVMARK (Jaime Tarazona). Úsalos tal como están, sin modificar el personaje.