Fix error icon styling and tooltip functionality
- Removed error icon from parallel field (optional field with default value) - Added black background to error icons (#000000) - Added hover effect to error icons (changes to blue on hover) - Added proper tooltip popup for error icons (same as ? tooltip) - Removed inline styles from HTML, moved to CSS
This commit is contained in:
parent
fd6208a376
commit
5821734eb8
2 changed files with 21 additions and 12 deletions
|
|
@ -309,20 +309,30 @@ html[lang="en"] .tooltip-icon:hover::after {
|
|||
|
||||
.error-icon {
|
||||
display: none;
|
||||
font-size: 14px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: #000000;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
line-height: 16px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
cursor: help;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.error-icon:hover {
|
||||
background-color: #0000FF;
|
||||
}
|
||||
|
||||
.error-icon:hover::after {
|
||||
content: attr(data-tooltip);
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background-color: #FF0000;
|
||||
background-color: #000000;
|
||||
color: #FFFFFF;
|
||||
padding: 8px 12px;
|
||||
font-size: 11px;
|
||||
|
|
|
|||
17
index.html
17
index.html
|
|
@ -21,7 +21,7 @@
|
|||
<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>
|
||||
<span class="error-icon" style="display:none; color: #FF0000; cursor: help; margin-left: 5px;">!</span>
|
||||
<span class="error-icon" style="display:none; margin-left: 5px;">!</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
|
|
@ -45,28 +45,28 @@
|
|||
<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>
|
||||
<span class="error-icon" style="display:none; color: #FF0000; cursor: help; margin-left: 5px;">!</span>
|
||||
<span class="error-icon" style="display:none; margin-left: 5px;">!</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>
|
||||
<span class="error-icon" style="display:none; color: #FF0000; cursor: help; margin-left: 5px;">!</span>
|
||||
<span class="error-icon" style="display:none; margin-left: 5px;">!</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>
|
||||
<span class="error-icon" style="display:none; color: #FF0000; cursor: help; margin-left: 5px;">!</span>
|
||||
<span class="error-icon" style="display:none; margin-left: 5px;">!</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>
|
||||
<span class="error-icon" style="display:none; color: #FF0000; cursor: help; margin-left: 5px;">!</span>
|
||||
<span class="error-icon" style="display:none; margin-left: 5px;">!</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
|
|
@ -79,14 +79,13 @@
|
|||
<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>
|
||||
<span class="error-icon" style="display:none; color: #FF0000; cursor: help; margin-left: 5px;">!</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>
|
||||
<span class="error-icon" style="display:none; color: #FF0000; cursor: help; margin-left: 5px;">!</span>
|
||||
<span class="error-icon" style="display:none; margin-left: 5px;">!</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group" style="display: flex; align-items: center; gap: 10px;">
|
||||
|
|
@ -95,13 +94,13 @@
|
|||
<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>
|
||||
<span class="error-icon" style="display:none; margin-left: 5px;">!</span>
|
||||
|
||||
<div class="form-group" style="display: flex; align-items: center; gap: 10px;">
|
||||
<label for="hf-model" data-key="hf_model_label" style="margin-bottom: 0; white-space: nowrap;">Model (HuggingFace)</label>
|
||||
<input type="text" id="hf-model" placeholder="" style="flex: 1;">
|
||||
<button type="button" id="hf-fetch-btn" data-key="hf_fetch_btn" style="margin-bottom: 0;">Fetch</button>
|
||||
<span class="error-icon" style="display:none; color: #FF0000; cursor: help; margin-left: 5px;">!</span>
|
||||
<span class="error-icon" style="display:none; margin-left: 5px;">!</span>
|
||||
</div>
|
||||
|
||||
<div id="loading-indicator" style="text-align: center; font-style: italic; color: #0000FF; padding: 10px; display: none;"></div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue