Dev Playground
Practica lo que de verdad se usa al construir con IA local
30 ejercicios en el navegador y un proyecto final por bloque. Escribes código, se comprueba solo y, si falla, te dice qué esperaba y qué obtuvo. Pistas y solución si te atascas. Sin cuenta.
Ingeniería LLM Peticiones, streaming, JSON, RAG y muestreo.
0/12
- Similitud del coseno La búsqueda semántica compara embeddings con la similitud del coseno. Impleméntala y cubre los casos límite: longitudes distintas y vectores nulos.
- Trocea texto con solapamiento Antes de indexar un documento para RAG se parte en trozos. Un pequeño solapamiento evita cortar una idea justo por la mitad.
- Lee el stream de Ollama Ollama responde línea a línea en JSON. Junta el texto y calcula los tokens por segundo con sus propios contadores.
- Una petición de chat compatible con OpenAI Ollama, vLLM y LiteLLM aceptan el mismo formato que la API de OpenAI. Construye la URL y el cuerpo correctos y valida la entrada antes de enviar nada.
- Plantillas de prompt sin sorpresas Rellena {{variables}} en un prompt, falla si falta alguna y evita que el texto del usuario abra o cierre marcadores de la plantilla.
- Softmax con temperatura El parámetro temperature de un LLM divide los logits antes del softmax. Impleméntalo de forma numéricamente estable y observa su efecto.
- Lee un stream SSE de chat Con
stream: true, la API de chat compatible con OpenAI responde con Server-Sent Events. Junta los fragmentos de texto y para en[DONE]. - Recupera los k documentos más parecidos El paso de recuperación de un RAG: ordena los documentos por similitud con la consulta y quédate con los k primeros, con desempates estables.
- ¿Cabe el modelo en memoria? La misma cuenta que usan nuestras páginas de producto: pesos, caché KV y margen de ejecución contra la memoria utilizable.
- Cabe en la ventana de contexto Un modelo local con 8K de contexto no admite todo el historial. Conserva el mensaje de sistema y los mensajes más recientes que quepan.
- Saca el JSON de la respuesta de un LLM Pides JSON y el modelo contesta con una frase, un bloque ```json y a veces llaves sueltas. Extrae el primer objeto válido o devuelve null.
- Muestreo top-p (nucleus) El parámetro
top_pde Ollama descarta los tokens improbables antes de elegir. Implementa ese filtro.
Fiabilidad Reintentos, timeouts, cachés y límites.
0/6
- Debounce: no llames al modelo en cada tecla Un autocompletado que lanza un prompt por tecla satura el servidor. Espera a que el usuario pare de escribir.
- Una caché LRU para respuestas del modelo Si dos usuarios hacen la misma pregunta, no hace falta volver a generar. Guarda las últimas respuestas y descarta las menos usadas.
- Reintentos con espera exponencial Un modelo ocupado falla de vez en cuando. Reintenta sin martillear el servidor: 100, 200, 400 ms.
- Corta las llamadas lentas con AbortController Un servidor de modelos saturado puede tardar minutos. Pon un límite de tiempo y cancela la petición de verdad.
- Limita las peticiones simultáneas Lanzar 50 prompts a la vez contra un modelo local solo llena la cola. Procésalos de dos en dos y conserva el orden.
- Limita el ritmo con un cubo de fichas Tu API delante del modelo debe aceptar ráfagas cortas sin dejar que nadie la acapare. El cubo de fichas hace las dos cosas.
Datos y texto Parsear, limpiar, validar y escapar.
0/6
- Escapa la salida del modelo antes de pintarla Un modelo puede devolver HTML, a propósito o porque alguien se lo pidió en el prompt. Con
innerHTMLese HTML se ejecuta. - Slugs limpios para títulos en español Las tildes, la ñ y los signos de apertura acaban en URL rotas. Conviértelos en un slug legible.
- Quita duplicados y agrupa modelos por familia Un inventario de modelos con entradas repetidas: quédate con la más reciente de cada uno y cuenta cuántos hay por familia.
- Valida el JSON que devuelve el modelo Pedir JSON a un modelo no garantiza que llegue bien formado: faltan campos o vienen números como texto. Compruébalo antes de usarlo.
- Lee un CSV con comillas Antes de indexar datos para un RAG hay que leerlos bien. Un
split(',')se rompe con el primer nombre que lleva coma. - Extrae fechas ISO y fechas en español Antes de dárselo a un modelo, saca las fechas de un texto con una expresión regular y descarta las que no existen.
Web básica La interfaz alrededor del modelo: componentes accesibles, SVG y canvas.
0/6
- Un botón de alternar accesible Un botón que se activa y desactiva tiene que decirlo también al lector de pantalla, no solo con color.
- Atajos de teclado para un prompt Ctrl+Enter (o Cmd+Enter en Mac) envía el prompt y Escape lo borra. El resto de teclas sigue funcionando como siempre.
- Pinta una lista de modelos sin inyectar HTML Los nombres de modelo vienen de fuera. Pintarlos con
textContentevita que un nombre raro se convierta en código. - Una sparkline en canvas Una línea pequeña que muestra la tendencia de la latencia. Escala los valores a la altura del canvas y dibuja la polilínea.
- Gráfico de barras SVG con tokens por segundo Dibuja la velocidad medida de tres modelos en un SVG accesible, con cada barra proporcional a la más rápida.
- Pestañas accesibles con ARIA y teclado Tres botones y tres paneles no son un widget de pestañas hasta que lo dicen los roles ARIA y las flechas funcionan.