Arseniy Romenskiy
b8352ebd17
- Added ConfigParser module for parsing Hugging Face config files - Added model name display above form - Added file upload for config.json (accepts only .json files) - Added reset button to clear all fields - Added error indicators (!) with language-aware messages for missing fields - Auto-populates fields: num_hidden_layers, num_key_value_heads, head_dim, num_attention_heads, max_position_embeddings, full_attention_interval - Sets defaults for optional fields: parallel=1, model_size=0 - Auto-calculates after successful config upload - Default quantization set to f16
129 lines
8.8 KiB
HTML
129 lines
8.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title data-key="title">Калькулятор Памяти Контекста LLM</title>
|
|
<link rel="stylesheet" href="css/styles.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<h1 data-key="title">Калькулятор Памяти Контекста LLM</h1>
|
|
<button id="lang-toggle" class="lang-btn">EN</button>
|
|
</div>
|
|
|
|
<!-- Model name display -->
|
|
<div id="model-name-display" class="model-name"></div>
|
|
|
|
<form id="calculator-form">
|
|
<div class="form-group">
|
|
<label for="context-length" data-key="context_length_label">Длина Контекста (токены)</label>
|
|
<input type="number" id="context-length" placeholder="Введите длину контекста" required min="1">
|
|
<span class="tooltip-icon" data-tooltip-ru="Количество токенов в контексте. Влияет линейно на размер KV кеша" data-tooltip-en="Number of tokens in context. Affects KV cache size linearly"></span>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="k-type" data-key="k_type_label">Квантование K кеша</label>
|
|
<select id="k-type" required>
|
|
<option value="KV" selected data-key="kv_cache">KV кеш</option>
|
|
<option value="f32">f32</option>
|
|
<option value="f16">f16</option>
|
|
<option value="bf16">bf16</option>
|
|
<option value="q8_0" data-key="q8_0">q8_0</option>
|
|
<option value="q4_0" data-key="q4_0">q4_0</option>
|
|
<option value="q4_1" data-key="q4_1">q4_1</option>
|
|
<option value="iq4_nl" data-key="iq4_nl">iq4_nl</option>
|
|
<option value="q5_0" data-key="q5_0">q5_0</option>
|
|
<option value="q5_1" data-key="q5_1">q5_1</option>
|
|
</select>
|
|
<span class="tooltip-icon" data-tooltip-ru="Тип квантования для тензоров ключей внимания. Меньшее значение = меньше памяти, но потенциально выше ошибка квантования" data-tooltip-en="Quantization type for attention key tensors. Lower value = less memory, but potentially higher quantization error"></span>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="kv-heads" data-key="kv_heads_label">Головок KV</label>
|
|
<input type="number" id="kv-heads" placeholder="Введите количество головок KV" required min="1">
|
|
<span class="tooltip-icon" data-tooltip-ru="Количество голов внимания для K и V тензоров. Обычно num_key_value_heads в конфигурации модели" data-tooltip-en="Number of attention heads for K and V tensors. Usually num_key_value_heads in model config"></span>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="head-size" data-key="head_size_label">Размер Головки</label>
|
|
<input type="number" id="head-size" placeholder="Введите размер головы" required min="1">
|
|
<span class="tooltip-icon" data-tooltip-ru="Размер каждой головы внимания (head_dim). Влияет линейно на размер KV кеша" data-tooltip-en="Size of each attention head (head_dim). Affects KV cache size linearly"></span>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="num-heads" data-key="num_heads_label">Количество Головок</label>
|
|
<input type="number" id="num-heads" placeholder="Введите количество головок" required min="1">
|
|
<span class="tooltip-icon" data-tooltip-ru="Общее количество голов внимания. Используется только для информации и примеров" data-tooltip-en="Total number of attention heads. Used for display and examples only"></span>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="num-layers" data-key="num_layers_label">Количество Слов</label>
|
|
<input type="number" id="num-layers" placeholder="Введите количество слоев" required min="1">
|
|
<span class="tooltip-icon" data-tooltip-ru="Количество слоев модели. Каждый слой имеет свой KV кеш" data-tooltip-en="Number of model layers. Each layer has its own KV cache"></span>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="model-size" data-key="model_size_label">Размер Модели (GB)</label>
|
|
<input type="number" id="model-size" placeholder="Опционально, для общего объема памяти" min="0" step="0.1">
|
|
<span class="tooltip-icon" data-tooltip-ru="Размер весов модели в гигабайтах. Используется для расчета общего объема памяти (KV кеш + веса)" data-tooltip-en="Model weights size in gigabytes. Used to calculate total memory (KV cache + weights)"></span>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="parallel" data-key="parallel_label">Параллелизм (np)</label>
|
|
<input type="number" id="parallel" value="1" min="1" title="">
|
|
<span class="tooltip-icon" data-tooltip-ru="Количество параллельных последовательностей для декодирования (-np/--parallel в llama.cpp). Увеличивает KV кеш пропорционально" data-tooltip-en="Number of parallel sequences for decoding (-np/--parallel in llama.cpp). Increases KV cache proportionally"></span>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="full-attention" data-key="full_attention_label">Интервал Полного Внимания</label>
|
|
<input type="number" id="full-attention" placeholder="Опционально" min="1">
|
|
<span class="tooltip-icon" data-tooltip-ru="Интервал слоев для полного внимания. Слои считают полный KV кеш каждые N слоев. Уменьшает эффективное количество слоев" data-tooltip-en="Interval for full attention layers. Layers compute full KV cache every N layers. Reduces effective layer count"></span>
|
|
</div>
|
|
|
|
<div class="form-group" style="display: flex; align-items: center; gap: 10px;">
|
|
<label for="config-file" data-key="config_file_label" style="margin-bottom: 0; white-space: nowrap;">Config.json</label>
|
|
<input type="file" id="config-file" accept=".json" style="flex: 1; margin-bottom: 0;">
|
|
<button type="button" id="reset-btn" data-key="reset_btn" style="margin-bottom: 0;">Сбросить</button>
|
|
</div>
|
|
<span class="tooltip-icon" data-tooltip-ru="Загрузите config.json из модели. Автоматически заполнит поля и запустит расчет" data-tooltip-en="Upload model config.json. Auto-fills fields and runs calculation"></span>
|
|
<span class="error-icon" style="display:none; color: #FF0000; cursor: help; margin-left: 5px;">!</span>
|
|
|
|
<div class="checkbox-group">
|
|
<input type="checkbox" id="asymmetric">
|
|
<label for="asymmetric" data-key="asymmetric_label">Асимметричный Контекст</label>
|
|
</div>
|
|
|
|
<div id="asymmetric-controls" class="asymmetric-controls">
|
|
<div class="form-group">
|
|
<label for="v-type" data-key="v_type_label">Квантование V кеша</label>
|
|
<select id="v-type">
|
|
<option value="f32">f32</option>
|
|
<option value="f16">f16</option>
|
|
<option value="bf16">bf16</option>
|
|
<option value="q8_0" data-key="q8_0">q8_0</option>
|
|
<option value="q4_0" data-key="q4_0">q4_0</option>
|
|
<option value="q4_1" data-key="q4_1">q4_1</option>
|
|
<option value="iq4_nl" data-key="iq4_nl">iq4_nl</option>
|
|
<option value="q5_0" data-key="q5_0">q5_0</option>
|
|
<option value="q5_1" data-key="q5_1">q5_1</option>
|
|
</select>
|
|
<span class="tooltip-icon" data-tooltip-ru="Тип квантования для тензоров значений внимания. Можно выбрать отдельно от K кеша" data-tooltip-en="Quantization type for attention value tensors. Can be selected separately from K cache"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="button" id="calculate-btn" data-key="calculate_btn">Рассчитать</button>
|
|
</form>
|
|
|
|
<div id="example-text" class="example">
|
|
<p data-key="example_text">Пример: context=8192, layers=32, kv_heads=32, head_size=128, model_size=7 GB, parallel=1</p>
|
|
</div>
|
|
|
|
<div id="results"></div>
|
|
</div>
|
|
|
|
<script src="js/calculation.js"></script>
|
|
<script src="js/app.js"></script>
|
|
</body>
|
|
</html>
|