Plataforma educativa interactiva que explica cómo funcionan los LLMs mediante simuladores funcionales, visualización de probabilidades y experimentación directa. Sin antropomorfismo ni promesas
Si este proyecto aporta valor o podría inspirar a otros, considera difundirlo en tu red profesional.
FlowXion — Plataforma Educativa sobre IA basada en experimentación
FlowXion es una plataforma educativa interactiva diseñada para explicar cómo funcionan realmente los modelos de lenguaje (LLMs), sin antropomorfismo ni promesas irreales.
El proyecto no se centra en "usar IA", sino en entender por qué responde como responde, mediante simuladores funcionales, visualización de probabilidades y experimentación directa.
Problema abordado
La mayoría de personas utiliza herramientas como ChatGPT o Claude sin visibilidad sobre el proceso interno de generación de texto.
Esto provoca:
Dificultad para escribir prompts efectivos
Confusión ante respuestas inesperadas
Expectativas poco realistas sobre capacidades y límites
FlowXion aborda este problema haciendo visible el proceso interno de un LLM de forma práctica y verificable.
Enfoque
El proyecto se basa en aprendizaje mediante experimentación, no en teoría abstracta:
Visualización del proceso token a token
Manipulación directa de parámetros como temperatura
Comparación real entre prompts vagos y estructurados
Datos y límites explicados sin simplificaciones engañosas
Todas las herramientas son funcionales y están en producción (no mockups).
Qué demuestra este proyecto
Este proyecto demuestra capacidad para:
Explicar conceptos técnicos complejos a perfiles no técnicos
Diseñar y desarrollar herramientas interactivas reales
Tomar decisiones técnicas orientadas a rendimiento y simplicidad
Mantener código limpio, documentado y fácilmente extensible
Construir una arquitectura moderna con deployment automático
Funcionalidades principales
Simulador de generación de texto token a token
Visualización de probabilidades y temperatura
Explorador de conceptos con datos verificables
Experimento guiado de prompt engineering
Biblioteca de 41 prompts profesionales
Guías técnicas extensas en Markdown
Stack técnico
Frontend
Astro (SSG)
Tailwind CSS 4
JavaScript Vanilla (ES6+)
Content & Export
Markdown / MDX
JSON dinámicos
jsPDF
Deployment
Cloudflare Pages (CI/CD automático)
Enfoque: Rendimiento, simplicidad y control total del código.
Resultados observados
Comprensión clara del proceso interno de generación tras interactuar con el simulador
Mejora observable en la calidad de prompts tras experimentación guiada
Alto engagement gracias a interactividad frente a contenido pasivo
FlowXion no es una demo de IA. Es una demostración de cómo diseñar, explicar y construir software educativo técnicamente riguroso, sin vender humo.
Frontend
Astro 5.16.6 (SSG)
HTML estático con hidratación parcial
Build ultra-rápido (10-15 segundos)
Content Collections nativo
Tailwind CSS 4
Purge automático (reduce CSS de 3.5 MB a ~20 KB)
Variables CSS para dark mode
JavaScript Vanilla (ES6+)
Cero frameworks client-side
Control total del bundle
Enfoque técnico
Ejemplo: Componente Astro con hidratación selectiva
---
// src/pages/index.astro
import BaseLayout from '../layouts/BaseLayout.astro';
const title = "FlowXion - IA sin humo";
---
<BaseLayout title={title}>
<!-- HTML estático -->
<section class="hero">
<h1>Entiende cómo funciona la IA</h1>
</section>
<!-- JavaScript solo donde es necesario -->
<div id="simulador"></div>
</BaseLayout>
<script src="/js/herramienta1.js"></script>
Contenido:
## Herramientas principalesFlowXion incluye **6 herramientas funcionales en producción** diseñadas para explicar el funcionamiento interno de los LLMs mediante experimentación directa.
- Simulador de generación de texto token a token
- Visualización interactiva de probabilidades y temperatura
- Explorador de conceptos con datos verificables
- Experimento guiado de prompt engineering
- Generador de insights exportables (jsPDF)
- Biblioteca curada de 41 prompts profesionales
Todas permiten interacción real: sliders que afectan cálculos, comparaciones con resultados contrastados, generación dinámica y feedback inmediato.
---## Implementación técnica destacada**Ejemplo 1: Cálculo de probabilidades con softmax real**```javascript
// Simulador generación texto - herramienta1.js
const calculateProbabilities = (temperature) => {
const contexts = [
{ text: "buenos", logit: 8.2 },
{ text: "días", logit: 7.8 },
{ text: "tardes", logit: 6.5 },
// ... 37 contextos más
];
// Aplicar temperatura
const adjustedLogits = contexts.map(c => c.logit / temperature);
// Softmax real
const maxLogit = Math.max(...adjustedLogits);
const expScores = adjustedLogits.map(l => Math.exp(l - maxLogit));
const sumExp = expScores.reduce((a, b) => a + b);
const probabilities = expScores.map(s => s / sumExp);
return contexts.map((c, i) => ({
...c,
probability: probabilities[i]
}));
};
// Actualización en tiempo real
temperatureSlider.addEventListener('input', (e) => {
const temp = parseFloat(e.target.value);
const probs = calculateProbabilities(temp);
updateVisualization(probs);
}); Hola
Contenido:
## Sistema de contenidosEl proyecto integra un sistema de contenidos técnicos utilizado para publicar guías extensas (2,500-3,000 palabras) sobre el funcionamiento y los límites de la IA.
**Características:**- Contenido en Markdown tipado con validación
- Estructura mantenible y extensible
- Guías orientadas a comprensión técnica real
---## Implementación**Validación de contenido con Zod Schema:**```typescript
// src/content/config.ts
import { defineCollection, z } from 'astro:content';
const guias = defineCollection({
type: 'content',
schema: z.object({
title: z.string(),
description: z.string(),
pubDate: z.coerce.date(),
ogImage: z.string().optional(),
tags: z.array(z.string())
})
});
export const collections = { guias };
