Визуализатор мышления ИИ в одном HTML-файле

Приболел тут и решил отвлечься от сложных проектов, сделав что-нибудь эдакое.
В общем, после размышлений и обсуждений с ассистентом, решил сделать визуализатор мышления локальной LLM в реальном времени, упакованный в один HTML-файл.
Вы вводите вопрос — нейросеть начинает думать вслух, а каждое её слово превращается в светящийся «атом» в 3D-космосе. Цвет атома зависит от части речи (существительное, глагол или прилагательное), между связанными словами натягиваются нити, а из каждого слова вылетают искры-токены.
⚙ **Как это работает:**
Браузер (HTML) → Three.js (3D) → Local LLM API (localhost:1234) → Визуализация
1 **Поток токенов:** LM Studio стримит ответ по одному токену через HTTP SSE.
2 **Семантический разбор:** Каждое слово классифицируется regex-паттернами на 4 категории (существительное / глагол / прилагательное / наречие).
3 **Визуальное воплощение:**
• Слово → светящаяся точка (Points + кастомный шейдер)
• Токены → искры-частицы
• Связи → линии между близкими по смыслу словами
4 **Космический фон:** Туманности, звёзды и пыль заполняют пространство, убирая «белые пятна».
5 **Большой взрыв:** В начале генерации — ударная волна, разлёт частиц и отлёт камеры.
👁 **Как это выглядит**
Представьте: тёмный космос с туманностями и звёздами. Вспышка — ударная волна, разлёт частиц. Потом идёт поток слов — каждое становится пульсирующим атомом своего цвета. Между связанными словами появляются нити. Камера медленно вращается вокруг формирующейся «галактики мысли».
Это не просто красивые линии — это визуализация структуры мышления. Существительные (коричневые) притягивают другие слова, глаголы (зелёные) создают движение, а прилагательные (фиолетовые) добавляют ауру.
💻 **Технический стек:**
• Three.js (WebGL)
• Кастомные GLSL-шейдеры (пульсация, glow)
• Post-processing: UnrealBloomPass (свечение)
• BufferGeometry (оптимизация: всё в одном буфере)
• Один HTML-файл, ~700 строк, 0 зависимостей (кроме CDN)
🚀 **Как запустить**
1. Установите LM Studio (https://lmstudio.ai/)
2. Загрузите модель `qwen2.5-14b-instruct` (или любую другую)
3. Включите Local Server (порт 1234)
4. Откройте `index.html` в браузере
5. Введите вопрос и нажмите «Генерировать»
Всё! Никаких облаков, никаких подписок, никаких API-ключей. Полностью локально.
Мышление LLM можно визуализировать. Когда нейросеть думает, она не просто выдаёт текст — она создаёт структуру, паттерны, связи. И эти связи можно увидеть. Это попытка показать, как работает мышление изнутри: как из хаоса токенов рождаются слова, как слова образуют связи, а связи создают смысл.
📊 **В цифрах:**
• Размер кода: ~700 строк
• Файлов: 1 (HTML)
• Макс. слов в сцене: 600
• Макс. связей: 1800
• Макс. частиц-токенов: 4000
• Токенов генерации: до 1500
🔗 **Ссылки:**
GitHub: https://github.com/13vvv71-lang/cosmogenesis
Код полностью открыт, можете форкать, менять и использовать.
P.S. Проект начинался с диалога с DeepSeek, а основной код был написан с помощью Qwen.
#ИИ #нейросети #ThreeJS #WebGL #creativecoding #визуализация #opensource #LMStudio #программирование