🗂️ NOTESPASS — Espacio de trabajo con ventanas e IA local

NOTESPASS es un escritorio virtual dentro del navegador: un espacio de trabajo con ventanas flotantes (arrastrables y redimensionables) donde puedes tener notas, listas, tablas, código, un reproductor de música y un asistente de IA que controla toda la aplicación con lenguaje natural.

Todo funciona offline y sin cuentas: los datos se guardan en tu navegador (IndexedDB) y la IA corre localmente con Ollama.

Funcionalidades

• 🪟 Gestor de ventanas estilo escritorio: crea, mueve, redimensiona, minimiza y maximiza ventanas sobre un canvas.
• 📝 Cuatro tipos de editor de notas: Markdown, listas de tareas, tablas y código.
• 🎵 Reproductor de música local: arrastra tus MP3/FLAC, lee las etiquetas ID3 (título, artista, álbum) y los guarda en IndexedDB.
• 🎨 Temas personalizables por ventana, con editor de temas propio (color, ícono, nombre).
• 🤖 Asistente de IA por comandos: le escribes "crea una nota para el examen de redes y pon música" y el modelo responde con JSON estructurado que la app convierte en acciones reales (crear ventanas, reproducir música, cambiar temas...).

Arquitectura

El proyecto está organizado en módulos desacoplados que se comunican por un bus de comandos y eventos:

src/
├── app/            # Shell de la aplicación (Layout, inicialización)
├── components/     # UI: ventanas, editores, música, chat, temas
├── modules/        # Lógica de dominio: WindowManager, NoteEngine,
│                   # AudioPlayer, ThemeManager (cada uno con sus comandos)
├── services/
│   ├── ai/         # Cliente de Ollama (streaming)
│   ├── commandBus/ # Despacha comandos {domain, action, params} a cada módulo
│   ├── eventBus/   # Eventos internos entre módulos
│   ├── parser/     # Valida y parsea el JSON que devuelve el LLM
│   └── storage/    # Persistencia en IndexedDB (idb-keyval)
├── store/          # Estado global con Zustand (uno por dominio)
└── types/          # Tipos compartidos

La parte que más me gustó construir: el LLM no responde texto libre, sino un contrato JSON estricto ({"message": ..., "commands": [...]}). El parser valida ese JSON y el commandBus enruta cada comando a su módulo. Así, el modelo de IA es un "usuario más" de la misma API interna que usa la interfaz.

Tecnologías

• React 19 + TypeScript + Vite
• Zustand (estado), framer-motion (animaciones), Tailwind CSS 4
• react-rnd (ventanas arrastrables), idb-keyval (IndexedDB), jsmediatags (etiquetas de audio)
• Ollama + Llama 3.2 3B con un Modelfile personalizado y system prompt propio

Cómo ejecutarlo

npm install
npm run dev

La app funciona completa sin IA. Para activar el asistente:

1. Instala Ollama.
2. Descarga el modelo base Llama 3.2 3B Instruct (Q4_K_M, GGUF) y colócalo en ai/ como llama-3.2-3b-instruct.Q4_K_M.gguf (no está en el repo por su tamaño, ~2 GB).
3. Crea el modelo personalizado:

cd ai
ollama create notespass-ai -f Modelfile

4. Recarga la app y abre el panel de chat.

En llm_finetuning_data.txt está la documentación del contrato JSON y ejemplos de entrenamiento que preparé para hacer fine-tuning del modelo.

Lo que aprendí con este proyecto

• Diseñar una arquitectura modular real (command bus + event bus) en lugar de un monolito de componentes.
• Hacer que un LLM local se comporte de forma determinística con system prompts, plantillas de Modelfile y validación estricta de la salida.
• Persistencia binaria en el navegador (audio en IndexedDB) y manejo de metadatos de archivos.