feat(console): wider assistant, generate+explain buttons v0.8.2
This commit is contained in:
+51
-4
@@ -390,8 +390,10 @@
|
|||||||
<textarea id="c-code">def main(ctx):
|
<textarea id="c-code">def main(ctx):
|
||||||
return {"ok": True, "msg": "hello from fission console"}
|
return {"ok": True, "msg": "hello from fission console"}
|
||||||
</textarea>
|
</textarea>
|
||||||
<div style="margin-top:6px;">
|
<div style="margin-top:6px; display:flex; gap:6px; flex-wrap:wrap;">
|
||||||
<button class="btn ghost" id="c-ai-btn" onclick="aiCheck('c-code','c-lang','c-ai-result')">🔍 Проверить синтаксис</button>
|
<button class="btn ghost" id="c-ai-btn" onclick="aiCheck('c-code','c-lang','c-ai-result')">🔍 Проверить синтаксис</button>
|
||||||
|
<button class="btn ghost" id="c-gen-btn" onclick="aiGenerate()">✨ Сгенерировать код</button>
|
||||||
|
<button class="btn ghost" id="c-exp-btn" onclick="aiExplain('c-code','c-lang','c-ai-result')">📖 Что делает?</button>
|
||||||
</div>
|
</div>
|
||||||
<div id="c-ai-result" style="display:none;margin-top:8px;padding:10px 12px;border-radius:6px;font-size:13px;line-height:1.5;white-space:pre-wrap;font-family:monospace;"></div>
|
<div id="c-ai-result" style="display:none;margin-top:8px;padding:10px 12px;border-radius:6px;font-size:13px;line-height:1.5;white-space:pre-wrap;font-family:monospace;"></div>
|
||||||
</div>
|
</div>
|
||||||
@@ -424,8 +426,9 @@
|
|||||||
<div>
|
<div>
|
||||||
<label>Код</label>
|
<label>Код</label>
|
||||||
<textarea id="e-code"></textarea>
|
<textarea id="e-code"></textarea>
|
||||||
<div style="margin-top:6px;">
|
<div style="margin-top:6px; display:flex; gap:6px; flex-wrap:wrap;">
|
||||||
<button class="btn ghost" id="e-ai-btn" onclick="aiCheck('e-code','e-lang-hidden','e-ai-result')">🔍 Проверить синтаксис</button>
|
<button class="btn ghost" id="e-ai-btn" onclick="aiCheck('e-code','e-lang-hidden','e-ai-result')">🔍 Проверить синтаксис</button>
|
||||||
|
<button class="btn ghost" id="e-exp-btn" onclick="aiExplain('e-code','e-lang-hidden','e-ai-result')">📖 Что делает?</button>
|
||||||
</div>
|
</div>
|
||||||
<div id="e-ai-result" style="display:none;margin-top:8px;padding:10px 12px;border-radius:6px;font-size:13px;line-height:1.5;white-space:pre-wrap;font-family:monospace;"></div>
|
<div id="e-ai-result" style="display:none;margin-top:8px;padding:10px 12px;border-radius:6px;font-size:13px;line-height:1.5;white-space:pre-wrap;font-family:monospace;"></div>
|
||||||
</div>
|
</div>
|
||||||
@@ -858,7 +861,7 @@
|
|||||||
================================================================ -->
|
================================================================ -->
|
||||||
<div id="assistant-panel" style="
|
<div id="assistant-panel" style="
|
||||||
position:fixed; bottom:0; right:24px;
|
position:fixed; bottom:0; right:24px;
|
||||||
width:360px; background:#1e1e2e; border:1px solid #3a3a5c;
|
width:720px; background:#1e1e2e; border:1px solid #3a3a5c;
|
||||||
border-bottom:none; border-radius:8px 8px 0 0;
|
border-bottom:none; border-radius:8px 8px 0 0;
|
||||||
font-family:inherit; z-index:900; box-shadow:0 -2px 12px rgba(0,0,0,.4);
|
font-family:inherit; z-index:900; box-shadow:0 -2px 12px rgba(0,0,0,.4);
|
||||||
">
|
">
|
||||||
@@ -872,7 +875,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div id="assistant-body" style="padding:10px; display:flex; flex-direction:column; gap:8px;">
|
<div id="assistant-body" style="padding:10px; display:flex; flex-direction:column; gap:8px;">
|
||||||
<div id="assistant-messages" style="
|
<div id="assistant-messages" style="
|
||||||
min-height:80px; max-height:260px; overflow-y:auto;
|
min-height:80px; max-height:400px; overflow-y:auto;
|
||||||
font-size:.82rem; line-height:1.5; color:#cdd6f4;
|
font-size:.82rem; line-height:1.5; color:#cdd6f4;
|
||||||
background:#13131f; border-radius:4px; padding:8px;
|
background:#13131f; border-radius:4px; padding:8px;
|
||||||
white-space:pre-wrap; word-break:break-word;
|
white-space:pre-wrap; word-break:break-word;
|
||||||
@@ -918,6 +921,50 @@
|
|||||||
}
|
}
|
||||||
msgs.scrollTop = msgs.scrollHeight;
|
msgs.scrollTop = msgs.scrollHeight;
|
||||||
}
|
}
|
||||||
|
async function aiGenerate() {
|
||||||
|
var name = (document.getElementById('c-name').value || '').trim() || 'my-func';
|
||||||
|
var lang = document.getElementById('c-lang').value || 'python';
|
||||||
|
var btn = document.getElementById('c-gen-btn');
|
||||||
|
var resEl = document.getElementById('c-ai-result');
|
||||||
|
btn.disabled = true; btn.textContent = '⏳ Генерирую...';
|
||||||
|
resEl.style.display = 'block'; resEl.style.background = 'var(--bg-alt)'; resEl.style.color = 'var(--fg)';
|
||||||
|
resEl.textContent = 'Запрашиваю у LLM...';
|
||||||
|
try {
|
||||||
|
var q = 'Напиши функцию Fission на ' + lang + ' с именем "' + name + '". Верни только чистый код без пояснений и без markdown-блоков.';
|
||||||
|
var d = await requestJSON('/console/api/ai/ask', 'POST', {question: q});
|
||||||
|
var code = (d.answer || '').replace(/^```[\w]*\n?/, '').replace(/\n?```$/, '');
|
||||||
|
document.getElementById('c-code').value = code;
|
||||||
|
resEl.style.background = '#1a3a1a'; resEl.style.color = '#8f8';
|
||||||
|
resEl.textContent = 'Код сгенерирован и вставлен.';
|
||||||
|
} catch(e) {
|
||||||
|
resEl.style.background = '#3a2a00'; resEl.style.color = '#ffa';
|
||||||
|
resEl.textContent = 'Ошибка: ' + e.message;
|
||||||
|
} finally {
|
||||||
|
btn.disabled = false; btn.textContent = '✨ Сгенерировать код';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
async function aiExplain(codeId, langId, resultId) {
|
||||||
|
var code = (document.getElementById(codeId).value || '').trim();
|
||||||
|
var lang = (document.getElementById(langId) ? document.getElementById(langId).value : '') || 'python';
|
||||||
|
var resEl = document.getElementById(resultId);
|
||||||
|
var btnId = codeId === 'c-code' ? 'c-exp-btn' : 'e-exp-btn';
|
||||||
|
var btn = document.getElementById(btnId);
|
||||||
|
if (!code) { resEl.style.display='block'; resEl.style.background='var(--bg-alt)'; resEl.textContent='Введите код.'; return; }
|
||||||
|
btn.disabled = true; btn.textContent = '⏳ Объясняю...';
|
||||||
|
resEl.style.display = 'block'; resEl.style.background = 'var(--bg-alt)'; resEl.style.color = 'var(--fg)';
|
||||||
|
resEl.textContent = 'Запрашиваю у LLM...';
|
||||||
|
try {
|
||||||
|
var q = 'Кратко объясни что делает этот ' + lang + ' код:\n' + code;
|
||||||
|
var d = await requestJSON('/console/api/ai/ask', 'POST', {question: q});
|
||||||
|
resEl.style.background = '#1a2a3a'; resEl.style.color = '#8cf';
|
||||||
|
resEl.textContent = d.answer || '(пустой ответ)';
|
||||||
|
} catch(e) {
|
||||||
|
resEl.style.background = '#3a2a00'; resEl.style.color = '#ffa';
|
||||||
|
resEl.textContent = 'Ошибка: ' + e.message;
|
||||||
|
} finally {
|
||||||
|
btn.disabled = false; btn.textContent = '📖 Что делает?';
|
||||||
|
}
|
||||||
|
}
|
||||||
// end ai/ask feature
|
// end ai/ask feature
|
||||||
</script>
|
</script>
|
||||||
<!-- end ai/ask feature -->
|
<!-- end ai/ask feature -->
|
||||||
|
|||||||
Reference in New Issue
Block a user