FlowXion - Plataforma Educativa de IA

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 principales

FlowXion 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 contenidos

El 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 };