Нейронная сеть с нуля — наблюдай в реальном времени как сигнал проходит через нейроны, видь веса, активации и математику каждого слоя.
GPT-Transformer с нуля — настоящий авторегрессивный трансформер с механизмом Self-Attention, обученный только на NumPy. Генерирует текст об ИИ, показывает карту внимания.
INPUT HIDDEN-1 HIDDEN-2 HIDDEN-3 OUTPUT
● ──┐ ◉ ◉ ◉ [ greeting ████ 97% ]
● ├───→ ◉ ───→ ◉ ───→ ◉ ───→ [ farewell 2% ]
● ──┘ ◉ ◉ ◉ [ what_is_ai 1% ]
... ... ... ... ...
236 feat 48 ReLU 32 ReLU 24 ReLU 15 Softmax
| Функция | Описание |
|---|---|
| 🎬 Live анимация | Наблюдай как пульс сигнала летит от входного слоя к выходному в реальном времени |
| 🔬 Детали нейрона | Кликни на любой нейрон — увидишь z (до активации), a (после), % активности |
| 🔮 Матрица весов | Тепловая карта весов каждого слоя: красный = отрицательный, зелёный = положительный |
| 📊 Распределение | Все 15 классов намерений с анимированными барами уверенности |
| 📈 История обучения | Кривые loss и accuracy за все 700 эпох |
| ⚡ Пошаговое объяснение | Токенизация → bag-of-words → слой1 → слой2 → … → ответ |
| 🌐 Частицы-фон | Анимированная нейронная сеть из частиц на заднем фоне |
| 🔄 Retrain в браузере | Кнопка переобучения — нейросеть учится прямо в браузере без сервера |
| 🤖 GPT Transformer | Настоящий GPT-стиль трансформер с Self-Attention, GELU, LayerNorm — только NumPy |
| 👁 Карта внимания | Визуализация матриц внимания (Attention Heatmap) всех голов при генерации текста |
# 1. Клонируй репозиторий
git clone https://github.com/Vuunderkind/neural-network-visualizer.git
cd neural-network-visualizer
# 2. Открой в VS Code
code .
# 3. Правой кнопкой на index.html → "Open with Live Server"
# Открывай: http://localhost:5500⚡ Модель уже обучена и включена (
model.json). Запускается мгновенно.
# Установи зависимости
pip install numpy flask flask-cors
# Запусти (автоматически обучит если нет model.json)
python server.py
# Открой браузер: http://localhost:5000start.bat ← запускает Python сервер одним кликом
┌─────────────────────────────────────────────────────────────────┐
│ ПРЯМОЕ РАСПРОСТРАНЕНИЕ │
│ │
│ ВХОД СКРЫТЫЙ-1 СКРЫТЫЙ-2 СКРЫТЫЙ-3 ВЫХОД │
│ │
│ "привет" │
│ ┌───────┐ ┌────────┐ ┌───────┐ ┌───────┐ ┌───────┐ │
│ │ BOW │ │48 нейр.│ │32 нейр│ │24 нейр│ │ 15 │ │
│ │ вектор│ → │ ReLU │ → │ ReLU │ → │ ReLU │ → │Softmax│ │
│ │ (236) │ │ │ │ │ │ │ │классов│ │
│ └───────┘ └────────┘ └───────┘ └───────┘ └───────┘ │
│ ↓ │
│ "greeting: 97%" │
└─────────────────────────────────────────────────────────────────┘
z = w₁x₁ + w₂x₂ + w₃x₃ + ... + wₙxₙ + b ← линейная комбинация
a = max(0, z) ← ReLU активация
P(класс k) = e^(z_k) / Σⱼ e^(z_j) ← вероятности (сумма = 1)
| Слой | Нейроны | Активация | Параметры |
|---|---|---|---|
| Input | 236 | Bag-of-Words | — |
| Hidden-1 | 48 | ReLU | 11 376 |
| Hidden-2 | 32 | ReLU | 1 568 |
| Hidden-3 | 24 | ReLU | 792 |
| Output | 15 | Softmax | 375 |
| Итого | 14 111 |
┌─────────────────────────────────────────────────┐
│ ЦИКЛ ОБУЧЕНИЯ (700 эпох) │
│ │
│ 1. Forward Pass → предсказание ŷ │
│ 2. Cross-Entropy → L = −Σ yᵢ·log(ŷᵢ) │
│ 3. Backprop → градиенты (chain rule) │
│ 4. Adam Update → θ ← θ − lr·m̂/(√v̂+ε) │
│ │
│ β₁=0.9 β₂=0.999 lr=0.001 batch=16 │
│ │
│ Результат: Accuracy = 100% на 210 примерах │
└─────────────────────────────────────────────────┘
m = β₁·m + (1−β₁)·∇θ ← момент 1-го порядка (направление)
v = β₂·v + (1−β₂)·∇θ² ← момент 2-го порядка (масштаб)
m̂ = m / (1−β₁ᵗ) ← коррекция смещения
v̂ = v / (1−β₂ᵗ)
θ = θ − lr · m̂ / (√v̂ + ε) ← адаптивное обновление
neural-network-visualizer/
│
├── 📄 index.html ← Точка входа (Go Live или localhost:5000)
│
├── 🎨 css/
│ └── style.css ← 900+ строк: glassmorphism, neon, GPT вкладка
│
├── 🧠 js/
│ ├── nn.js ← MLP с нуля (Dense, Adam, backprop)
│ ├── chatbot.js ← 15 намерений + NLP конвейер (BOW)
│ ├── vis.js ← Canvas: частицы, нейроны, тепловые карты
│ └── app.js ← UI логика + GPT вкладка + attention viz
│
├── 🤖 GPT Transformer (Python)
│ ├── transformer.py ← GPT с нуля: MultiHeadAttn, FFN, backprop, Adam
│ ├── corpus.py ← Обучающий корпус (~17K символов про ИИ/ML)
│ ├── train_gpt.py ← Скрипт обучения (запускает ~3-5 мин на CPU)
│ ├── gpt_model.json ← Веса GPT после обучения (генерируется)
│ └── gpt_tokenizer.json ← Символьный словарь (генерируется)
│
├── 🐍 MLP Backend
│ ├── neural_network.py ← MLP на NumPy
│ ├── chatbot.py ← Python версия чатбота
│ └── server.py ← Flask API (MLP + GPT эндпоинты)
│
├── 📦 model.json ← Обученные веса MLP
├── 📦 model_meta.json ← Словарь + метаданные MLP
│
├── 📋 requirements.txt ← numpy, flask, flask-cors
└── 📜 README.md
| Стек | Назначение |
|---|---|
| Vanilla JS | Нейронная сеть, NLP конвейер, UI |
| HTML5 Canvas | Визуализация нейросети, частицы, тепловые карты |
| CSS3 | Glassmorphism, анимации, neon glow эффекты |
| Python + NumPy | Предобучение модели (опционально) |
| Flask | Опциональный API сервер |
| Google Fonts | Orbitron (sci-fi заголовки) + JetBrains Mono |
Никаких ML фреймворков. Нейронная сеть написана с нуля: матричное умножение, backpropagation, Adam — всё вручную.
greeting ← приветствия (привет, hello, hi...)
farewell ← прощания (пока, bye...)
what_is_ai ← что такое ИИ
what_is_neural_network ← что такое нейронная сеть
what_is_neuron ← как работает нейрон
what_is_training ← обучение, backprop, gradient descent
what_is_weights ← веса нейросети
what_is_activation ← функции активации (ReLU, Softmax...)
math_question ← математика, матрицы
who_are_you ← кто ты, представься
what_can_you_do ← твои возможности
thanks ← благодарности
positive_emotion ← позитивные эмоции
negative_emotion ← негативные эмоции
deep_learning ← CNN, RNN, Transformer, GPT...
┌────────────────────────────────────────────────────────────────────┐
│ 🧠 NEURAL NETWORK AI Параметры: 14111 Словарь: 236 Точность: 100% │
├─────────────────────────────────────────┬──────────────────────────┤
│ │ 💬 ЗАПРОСЫ │
│ ●──●──●──● Анимация сигнала │ │
│ ● ╲●╱ ● ● INPUT → H1 → H2 → OUT │ > что такое нейрон │
│ ●──●──●──● нейроны светятся │ Нейрон вычисляет z=Wx+b │
│ при активации │ затем a=ReLU(z)... │
│ Кликни = детали нейрона │ │
│ Hover = значение активации │ [чипы для быстрых примеров]│
├─────────────────────────────────────────┴──────────────────────────┤
│ [⚡ШАГИ] [🔬СЛОИ] [📊УВЕРЕННОСТЬ] [🔮ВЕСА] [📈ОБУЧЕНИЕ] [📚КАК РАБОТАЕТ]│
├────────────────────────────────────────────────────────────────────┤
│ ШАГ 1: Токенизация ШАГ 2: Словарь ШАГ 3: BOW вектор │
│ ["что","такое", Найдено 2/3 [0,0,1,0,1,0,0,1,...] │
│ "нейрон"] токенов 236 значений │
└────────────────────────────────────────────────────────────────────┘
Ввод: "привет как дела"
│
▼
Токенизация: ["привет", "как", "дела"]
│
▼
Bag-of-Words (словарь 236 слов):
[0, 0, ..., 1, ..., 1, ..., 1, ..., 0]
позиции: привет=42, как=15, дела=7
│
▼
Forward Pass:
Layer 1 (48 ReLU): z = W·x + b → a = max(0, z)
Layer 2 (32 ReLU): z = W·a₁ + b → a = max(0, z)
Layer 3 (24 ReLU): z = W·a₂ + b → a = max(0, z)
Layer 4 (15 Softmax): probabilities sum to 1.0
│
▼
Output: greeting → 97.3% ← ПОБЕДИТЕЛЬ
farewell → 1.2%
...
│
▼
Ответ: "Привет! Я нейронная сеть, обученная с нуля..."
┌─────────────────────────────────────────────────────────────────┐
│ GPT-STYLE AUTOREGRESSIVE TRANSFORMER │
│ │
│ Вход: "Нейронная сеть " │
│ ↓ CharTokenizer (каждый символ = токен) │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ TokenEmb(64) + PosEmb(64) ← эмбеддинги │ │
│ │ │ │
│ │ ┌─────────────────────────────────────────────────────┐ │ │
│ │ │ TRANSFORMER BLOCK × 3 │ │ │
│ │ │ │ │ │
│ │ │ LayerNorm → MultiHeadAttention(4 heads) → +residual│ │ │
│ │ │ LayerNorm → FeedForward(256, GELU) → +residual│ │ │
│ │ └─────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ LayerNorm → Linear(64→vocab) → Softmax │ │
│ └────────────────────────────────────────────────────────────┘ │
│ ↓ Next-token prediction (авторегрессия) │
│ "Нейронная сеть — это математическая модель..." │
└─────────────────────────────────────────────────────────────────┘
Q = x·Wq, K = x·Wk, V = x·Wv
Attention(Q,K,V) = softmax(Q·Kᵀ / √d_k + mask) · V
mask[i,j] = -∞ если j > i ← не смотрим в будущее
# Шаг 1 — обучить (3-5 минут на CPU)
python train_gpt.py
# Шаг 2 — запустить сервер с GPT API
python server.py
# Шаг 3 — открыть http://localhost:5000
# → вкладка "🤖 GPT TRANSFORMER"POST http://localhost:5000/api/gpt/generate
{
"prompt": "Нейронная сеть",
"max_new": 200,
"temperature": 0.8,
"top_k": 40,
"detailed": true ← включает карту внимания
}
GET http://localhost:5000/api/gpt/info
| 👤 Автор | NOXQD |
| art303750@gmail.com | |
| 📱 Телефон | +7 705 333 2735 |
| 🐙 GitHub | @Vuunderkind |
MIT License — используй свободно, ссылка на автора приветствуется.
Сделано с ❤️ и без единой ML-библиотеки
NumPy only в Python · Vanilla JS в браузере
⭐ Если проект понравился — поставь звезду!