Agent Builder UI: #builder -tabi, lomake, CRUD-integraatio
- Uusi välilehti: Agent Builder (navigointi #builder) - Agenttilista: ladataan /api/v1/agents, näytetään kortteina - Lomake: avatar-valitsin, rooli-template, malli, väri, docs, prompt, parametrit - Tallenna → POST /api/v1/agents, Poista → DELETE /api/v1/agents/:id - Avatar-grid: 8 valmista hahmoa valittavissa Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -724,6 +724,7 @@
|
||||
<div class="main-tab" onclick="switchMainTab('network')" data-i18n="tab_network">Laskentaverkko</div>
|
||||
<div class="main-tab" onclick="switchMainTab('codelab')" data-i18n="tab_codelab">Koodilaboratorio</div>
|
||||
<div class="main-tab active" onclick="switchMainTab('agents')" data-i18n="tab_agents">Kipinä Agentic Playground</div>
|
||||
<div class="main-tab" onclick="switchMainTab('builder')" data-i18n="tab_builder">Agent Builder</div>
|
||||
<div class="main-tab" onclick="switchMainTab('guide')" data-i18n="tab_guide">Opas</div>
|
||||
</div>
|
||||
|
||||
@@ -1131,6 +1132,70 @@
|
||||
</div><!-- /panel-agents -->
|
||||
|
||||
<!-- PANEELI 4: Opas -->
|
||||
<div id="panel-builder" class="main-panel">
|
||||
<div style="max-width:800px;margin:0 auto;padding:20px">
|
||||
<h2 style="color:#f0f6fc;margin-bottom:16px">Agent Builder</h2>
|
||||
<p style="color:#8b949e;margin-bottom:20px">Luo ja muokkaa agentteja. Agentit tallentuvat palvelimelle ja ovat kaikkien käytettävissä.</p>
|
||||
|
||||
<!-- Agenttilista -->
|
||||
<div id="builder-agent-list" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-bottom:24px"></div>
|
||||
|
||||
<!-- Lomake -->
|
||||
<div id="builder-form" style="background:#161b22;border:1px solid #30363d;border-radius:8px;padding:20px;display:none">
|
||||
<div style="display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start">
|
||||
<!-- Avatar-valitsin -->
|
||||
<div>
|
||||
<img id="builder-avatar-preview" src="/avatars/kipina_notext.png" style="width:80px;height:80px;border-radius:16px;border:2px solid #30363d;cursor:pointer;object-fit:cover" onclick="document.getElementById('builder-avatar-select').style.display=document.getElementById('builder-avatar-select').style.display==='none'?'flex':'none'">
|
||||
<div id="builder-avatar-select" style="display:none;flex-wrap:wrap;gap:6px;margin-top:8px;max-width:200px"></div>
|
||||
</div>
|
||||
<!-- Kentät -->
|
||||
<div style="display:flex;flex-direction:column;gap:10px">
|
||||
<div style="display:flex;gap:10px">
|
||||
<input id="builder-id" placeholder="tunniste (esim. tofuist)" style="flex:1;background:#0d1117;border:1px solid #30363d;border-radius:4px;padding:6px 10px;color:#c9d1d9;font-size:13px">
|
||||
<input id="builder-name" placeholder="Näyttönimi" style="flex:1;background:#0d1117;border:1px solid #30363d;border-radius:4px;padding:6px 10px;color:#c9d1d9;font-size:13px">
|
||||
</div>
|
||||
<div style="display:flex;gap:10px">
|
||||
<select id="builder-role" style="flex:1;background:#0d1117;border:1px solid #30363d;border-radius:4px;padding:6px 10px;color:#c9d1d9;font-size:13px">
|
||||
<option value="coder">Koodari</option>
|
||||
<option value="qa">QA / Testaus</option>
|
||||
<option value="devops">DevOps</option>
|
||||
<option value="devsecops">DevSecOps</option>
|
||||
<option value="architect">Arkkitehti</option>
|
||||
<option value="iac">IaC / Infra</option>
|
||||
<option value="data">Data</option>
|
||||
<option value="manager">Manageri</option>
|
||||
<option value="writer">Kirjoittaja</option>
|
||||
<option value="custom">Vapaa</option>
|
||||
</select>
|
||||
<input id="builder-model" placeholder="Malli (esim. qwen2.5-coder:7b)" value="qwen2.5-coder:7b" style="flex:1;background:#0d1117;border:1px solid #30363d;border-radius:4px;padding:6px 10px;color:#c9d1d9;font-size:13px">
|
||||
</div>
|
||||
<div style="display:flex;gap:10px">
|
||||
<input id="builder-color" type="color" value="#3fb950" style="width:40px;height:32px;border:1px solid #30363d;border-radius:4px;background:#0d1117;cursor:pointer">
|
||||
<input id="builder-docs" placeholder="Docs URL (valinnainen, esim. /docs/tofu-cheatsheet.md)" style="flex:1;background:#0d1117;border:1px solid #30363d;border-radius:4px;padding:6px 10px;color:#c9d1d9;font-size:13px">
|
||||
</div>
|
||||
<textarea id="builder-prompt" rows="4" placeholder="System prompt..." style="background:#0d1117;border:1px solid #30363d;border-radius:4px;padding:8px 10px;color:#c9d1d9;font-size:13px;resize:vertical;font-family:inherit"></textarea>
|
||||
<div style="display:flex;gap:10px;align-items:center">
|
||||
<label style="color:#8b949e;font-size:12px">Temp:</label>
|
||||
<input id="builder-temp" type="number" value="0.7" min="0" max="2" step="0.1" style="width:60px;background:#0d1117;border:1px solid #30363d;border-radius:4px;padding:4px 8px;color:#c9d1d9;font-size:12px">
|
||||
<label style="color:#8b949e;font-size:12px">Top-k:</label>
|
||||
<input id="builder-topk" type="number" value="40" min="1" max="200" style="width:60px;background:#0d1117;border:1px solid #30363d;border-radius:4px;padding:4px 8px;color:#c9d1d9;font-size:12px">
|
||||
<label style="color:#8b949e;font-size:12px">Max tok:</label>
|
||||
<input id="builder-maxtokens" type="number" value="512" min="32" max="4096" step="32" style="width:70px;background:#0d1117;border:1px solid #30363d;border-radius:4px;padding:4px 8px;color:#c9d1d9;font-size:12px">
|
||||
</div>
|
||||
<div style="display:flex;gap:8px;justify-content:flex-end">
|
||||
<button onclick="builderSave()" style="background:#238636;border:1px solid #2ea043;color:#fff;padding:6px 16px;border-radius:4px;cursor:pointer;font-size:13px">Tallenna</button>
|
||||
<button onclick="builderDelete()" id="builder-delete-btn" style="background:#21262d;border:1px solid #f85149;color:#f85149;padding:6px 16px;border-radius:4px;cursor:pointer;font-size:13px;display:none">Poista</button>
|
||||
<button onclick="builderCancel()" style="background:#21262d;border:1px solid #30363d;color:#c9d1d9;padding:6px 16px;border-radius:4px;cursor:pointer;font-size:13px">Peruuta</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Uusi agentti -nappi -->
|
||||
<button onclick="builderNew()" id="builder-new-btn" style="margin-top:12px;background:#238636;border:1px solid #2ea043;color:#fff;padding:8px 20px;border-radius:6px;cursor:pointer;font-size:14px">+ Uusi agentti</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="panel-guide" class="main-panel">
|
||||
<div id="guide-content" style="max-width:800px;margin:0 auto;padding:20px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:var(--text-color);line-height:1.7;font-size:15px">
|
||||
<p style="color:#8b949e">Ladataan opasta...</p>
|
||||
@@ -1723,7 +1788,7 @@ IMPORTANT: Include get_db() dependency for FastAPI` },
|
||||
|
||||
// URL-hash navigointi
|
||||
const initHash = window.location.hash.replace('#', '');
|
||||
const hashMap = { 'laskentaverkko': 'network', 'network': 'network', 'codelab': 'codelab', 'agents': 'agents', 'guide': 'guide' };
|
||||
const hashMap = { 'laskentaverkko': 'network', 'network': 'network', 'codelab': 'codelab', 'agents': 'agents', 'builder': 'builder', 'guide': 'guide' };
|
||||
if (hashMap[initHash]) {
|
||||
switchMainTab(hashMap[initHash]);
|
||||
}
|
||||
@@ -4521,6 +4586,142 @@ ${filesHtml}
|
||||
}, 100);
|
||||
});
|
||||
|
||||
// ── Agent Builder ──
|
||||
|
||||
const BUILDER_AVATARS = [
|
||||
'/avatars/kipina_notext.png', '/avatars/karhunpentu.png', '/avatars/kettu_notext.png',
|
||||
'/avatars/pesukarhu_notext.png', '/avatars/susi_notext.png', '/avatars/laiskiainen_notext.png',
|
||||
'/avatars/aikuinen_susi.png', '/avatars/gecko_notext.png'
|
||||
];
|
||||
|
||||
let builderAgents = [];
|
||||
let builderEditing = null; // null = uusi, string = id
|
||||
|
||||
async function builderLoad() {
|
||||
try {
|
||||
const res = await fetch('/api/v1/agents');
|
||||
if (res.ok) builderAgents = await res.json();
|
||||
} catch(e) {}
|
||||
builderRenderList();
|
||||
}
|
||||
|
||||
function builderRenderList() {
|
||||
const list = document.getElementById('builder-agent-list');
|
||||
if (!list) return;
|
||||
list.innerHTML = builderAgents.map(a => `
|
||||
<div onclick="builderEdit('${a.id}')" style="background:#0d1117;border:1px solid #30363d;border-radius:8px;padding:12px;cursor:pointer;transition:border-color 0.2s;display:flex;align-items:center;gap:10px" onmouseover="this.style.borderColor='${a.color}'" onmouseout="this.style.borderColor='#30363d'">
|
||||
<img src="${a.avatar}" style="width:40px;height:40px;border-radius:10px;border:2px solid ${a.color};object-fit:cover">
|
||||
<div>
|
||||
<div style="font-weight:600;color:${a.color};font-size:14px">${esc(a.name)}</div>
|
||||
<div style="color:#8b949e;font-size:11px">${esc(a.model)} · ${a.role}</div>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
function builderNew() {
|
||||
builderEditing = null;
|
||||
document.getElementById('builder-form').style.display = 'block';
|
||||
document.getElementById('builder-new-btn').style.display = 'none';
|
||||
document.getElementById('builder-delete-btn').style.display = 'none';
|
||||
document.getElementById('builder-id').value = '';
|
||||
document.getElementById('builder-id').disabled = false;
|
||||
document.getElementById('builder-name').value = '';
|
||||
document.getElementById('builder-role').value = 'coder';
|
||||
document.getElementById('builder-model').value = 'qwen2.5-coder:7b';
|
||||
document.getElementById('builder-color').value = '#3fb950';
|
||||
document.getElementById('builder-docs').value = '';
|
||||
document.getElementById('builder-prompt').value = '';
|
||||
document.getElementById('builder-temp').value = '0.7';
|
||||
document.getElementById('builder-topk').value = '40';
|
||||
document.getElementById('builder-maxtokens').value = '512';
|
||||
document.getElementById('builder-avatar-preview').src = '/avatars/kipina_notext.png';
|
||||
builderRenderAvatarSelect();
|
||||
}
|
||||
|
||||
function builderEdit(id) {
|
||||
const a = builderAgents.find(x => x.id === id);
|
||||
if (!a) return;
|
||||
builderEditing = id;
|
||||
document.getElementById('builder-form').style.display = 'block';
|
||||
document.getElementById('builder-new-btn').style.display = 'none';
|
||||
document.getElementById('builder-delete-btn').style.display = a.is_default ? 'none' : 'inline-block';
|
||||
document.getElementById('builder-id').value = a.id;
|
||||
document.getElementById('builder-id').disabled = true;
|
||||
document.getElementById('builder-name').value = a.name;
|
||||
document.getElementById('builder-role').value = a.role;
|
||||
document.getElementById('builder-model').value = a.model;
|
||||
document.getElementById('builder-color').value = a.color;
|
||||
document.getElementById('builder-docs').value = a.docs || '';
|
||||
document.getElementById('builder-prompt').value = a.prompt;
|
||||
document.getElementById('builder-temp').value = a.temperature;
|
||||
document.getElementById('builder-topk').value = a.top_k;
|
||||
document.getElementById('builder-maxtokens').value = a.max_tokens;
|
||||
document.getElementById('builder-avatar-preview').src = a.avatar;
|
||||
builderRenderAvatarSelect();
|
||||
}
|
||||
|
||||
function builderRenderAvatarSelect() {
|
||||
const container = document.getElementById('builder-avatar-select');
|
||||
container.innerHTML = BUILDER_AVATARS.map(src =>
|
||||
`<img src="${src}" style="width:36px;height:36px;border-radius:8px;border:2px solid #30363d;cursor:pointer;object-fit:cover" onclick="document.getElementById('builder-avatar-preview').src='${src}';document.getElementById('builder-avatar-select').style.display='none'">`
|
||||
).join('');
|
||||
}
|
||||
|
||||
async function builderSave() {
|
||||
const payload = {
|
||||
id: document.getElementById('builder-id').value.trim().toLowerCase().replace(/[^a-z0-9_-]/g, ''),
|
||||
name: document.getElementById('builder-name').value.trim(),
|
||||
avatar: document.getElementById('builder-avatar-preview').src.replace(location.origin, ''),
|
||||
role: document.getElementById('builder-role').value,
|
||||
model: document.getElementById('builder-model').value.trim(),
|
||||
color: document.getElementById('builder-color').value,
|
||||
docs: document.getElementById('builder-docs').value.trim() || null,
|
||||
prompt: document.getElementById('builder-prompt').value,
|
||||
temperature: parseFloat(document.getElementById('builder-temp').value) || 0.7,
|
||||
top_k: parseInt(document.getElementById('builder-topk').value) || 40,
|
||||
max_tokens: parseInt(document.getElementById('builder-maxtokens').value) || 512,
|
||||
repetition_penalty: 1.15,
|
||||
};
|
||||
if (!payload.id || !payload.name) { alert('Tunniste ja nimi vaaditaan'); return; }
|
||||
try {
|
||||
const res = await fetch('/api/v1/agents', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
if (res.ok) {
|
||||
builderCancel();
|
||||
await builderLoad();
|
||||
} else {
|
||||
alert('Virhe: ' + await res.text());
|
||||
}
|
||||
} catch(e) { alert('Virhe: ' + e.message); }
|
||||
}
|
||||
|
||||
async function builderDelete() {
|
||||
if (!builderEditing) return;
|
||||
if (!confirm('Poistetaanko agentti "' + builderEditing + '"?')) return;
|
||||
try {
|
||||
const res = await fetch('/api/v1/agents/' + builderEditing, { method: 'DELETE' });
|
||||
if (res.ok) {
|
||||
builderCancel();
|
||||
await builderLoad();
|
||||
} else {
|
||||
alert('Virhe: ' + await res.text());
|
||||
}
|
||||
} catch(e) { alert('Virhe: ' + e.message); }
|
||||
}
|
||||
|
||||
function builderCancel() {
|
||||
document.getElementById('builder-form').style.display = 'none';
|
||||
document.getElementById('builder-new-btn').style.display = 'inline-block';
|
||||
builderEditing = null;
|
||||
}
|
||||
|
||||
// Ladataan agentit kun builder-tabi avataan
|
||||
builderLoad();
|
||||
|
||||
// GUIDE.md:n lataus ja renderöinti
|
||||
(async function loadGuide() {
|
||||
const container = document.getElementById('guide-content');
|
||||
|
||||
Reference in New Issue
Block a user