112 lines
3.9 KiB
JavaScript
112 lines
3.9 KiB
JavaScript
const API_URL = window.location.origin + '/api';
|
||
|
||
const promptInput = document.getElementById('promptInput');
|
||
const tempSlider = document.getElementById('tempSlider');
|
||
const tempVal = document.getElementById('tempVal');
|
||
const topkSlider = document.getElementById('topkSlider');
|
||
const topkVal = document.getElementById('topkVal');
|
||
const generateBtn = document.getElementById('generateBtn');
|
||
const generate5Btn = document.getElementById('generate5Btn');
|
||
const outputArea = document.getElementById('outputArea');
|
||
const statusMsg = document.getElementById('statusMsg');
|
||
|
||
tempSlider.addEventListener('input', () => {
|
||
tempVal.textContent = tempSlider.value;
|
||
});
|
||
|
||
topkSlider.addEventListener('input', () => {
|
||
topkVal.textContent = topkSlider.value;
|
||
});
|
||
|
||
generateBtn.addEventListener('click', () => generate(1));
|
||
generate5Btn.addEventListener('click', () => generate(5));
|
||
|
||
async function generate(count) {
|
||
const prompt = promptInput.value.trim();
|
||
const temperature = parseFloat(tempSlider.value);
|
||
const top_k = parseInt(topkSlider.value);
|
||
|
||
outputArea.innerHTML = '';
|
||
statusMsg.textContent = 'Генерация...';
|
||
statusMsg.className = 'status-msg';
|
||
|
||
try {
|
||
const res = await fetch(`${API_URL}/generate`, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
prompt,
|
||
temperature,
|
||
top_k,
|
||
num_samples: count
|
||
})
|
||
});
|
||
|
||
if (!res.ok) {
|
||
const err = await res.json().catch(() => ({}));
|
||
throw new Error(err.detail || `Ошибка ${res.status}`);
|
||
}
|
||
|
||
const data = await res.json();
|
||
statusMsg.textContent = '';
|
||
statusMsg.className = 'status-msg';
|
||
|
||
data.texts.forEach((text, i) => {
|
||
const div = document.createElement('div');
|
||
div.className = 'gen-output-item';
|
||
if (count > 1) {
|
||
div.innerHTML = `<span class="gen-badge">#${i + 1}</span>${text}...😱`;
|
||
} else {
|
||
div.textContent = `${text}...😱`;
|
||
}
|
||
outputArea.appendChild(div);
|
||
});
|
||
} catch (err) {
|
||
statusMsg.textContent = '❌ Сервер недоступен. Запустите API: python server.py';
|
||
statusMsg.className = 'status-msg error';
|
||
fallbackGenerate(count, prompt, temperature, top_k);
|
||
}
|
||
}
|
||
|
||
function fallbackGenerate(count, prompt, temperature, top_k) {
|
||
const templates = [
|
||
prompt
|
||
? `${prompt} — этот секрет знают единицы`
|
||
: 'Этот секрет знают единицы',
|
||
prompt
|
||
? `${prompt} — врачи в шоке от открытия`
|
||
: 'Врачи в шоке от этого открытия',
|
||
prompt
|
||
? `${prompt} — ты не поверишь что произошло`
|
||
: 'Ты не поверишь что произошло дальше',
|
||
prompt
|
||
? `${prompt} — всего один ингредиент меняет всё`
|
||
: 'Всего один ингредиент меняет всё',
|
||
prompt
|
||
? `${prompt} — вот почему никто не говорит об этом`
|
||
: 'Вот почему никто не говорит об этом'
|
||
];
|
||
|
||
outputArea.innerHTML = '';
|
||
for (let i = 0; i < count && i < templates.length; i++) {
|
||
const div = document.createElement('div');
|
||
div.className = 'gen-output-item';
|
||
if (count > 1) {
|
||
div.innerHTML = `<span class="gen-badge">#${i + 1}</span>${templates[i]}...😱`;
|
||
} else {
|
||
div.textContent = `${templates[i]}...😱`;
|
||
}
|
||
outputArea.appendChild(div);
|
||
}
|
||
}
|
||
|
||
// Example tabs
|
||
document.querySelectorAll('.ex-tab').forEach(tab => {
|
||
tab.addEventListener('click', () => {
|
||
document.querySelectorAll('.ex-tab').forEach(t => t.classList.remove('active'));
|
||
document.querySelectorAll('.ex-content').forEach(c => c.classList.remove('active'));
|
||
tab.classList.add('active');
|
||
document.getElementById('ex-' + tab.dataset.tab).classList.add('active');
|
||
});
|
||
});
|