jaakko/agentic-studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mermaid-kaaviot oppaaseen + mallitiedot agents-sivun status-palkkiin

Browse Source 
GUIDE.md:n ASCII-kaaviot korvattu Mermaid-kaavioilla:
- Projekti-pipeline: flowchart TD värikoodatuilla vaiheilla
- Prompttirakenne: system → agent → user → prefill ketju

Mermaid ladataan CDN:stä ja renderöidään automaattisesti dark-teemalla.
Fallback: kaavion lähdekoodi näkyy tekstinä jos Mermaid ei lataudu.

Agents-sivun compute-status näyttää nyt tarkan mallitiedon:
- "Qwen2.5-Coder-0.5B" tai "Qwen2.5-Coder-3B"
- Tooltip: parametrimäärä, runtime, max tokenit

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jaakko Vanhala
2026-04-06 08:23:19 +03:00
parent dd1945ab28
commit 176f2d6915
2 changed files with 45 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
network-poc/static/index.html
View File

@@ -6,6 +6,7 @@
<title>Kipinä Agentic Playground</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script>
<style>
:root {
--bg-color: #0d1117;
@@ -3155,7 +3156,8 @@ Write the corrected code.`;
const cl = document.getElementById('agent-compute-label');
const btn = document.getElementById('agent-compute-btn');
if (cd) cd.style.background = '#3fb950';
if (cl) { cl.textContent = 'Qwen2.5-Coder'; cl.style.color = '#3fb950'; }
const sizeLabel = coderSize === '3b' ? '3B (3 miljardia parametria)' : '0.5B (500 miljoonaa parametria)';
if (cl) { cl.textContent = 'Qwen2.5-Coder-' + (coderSize === '3b' ? '3B' : '0.5B'); cl.style.color = '#3fb950'; cl.title = sizeLabel + ' · Candle Wasm · CPU · max 512 tok'; }
if (btn) { btn.dataset.state = 'ready'; btn.textContent = '✓ Valmis'; btn.style.borderColor = '#3fb950'; btn.style.color = '#3fb950'; btn.style.cursor = 'default'; btn.title = 'Kielimalli ladattu — oma kone on valmis laskentaan'; }
localStorage.setItem('kpn-coder-loaded', 'true');
}
@@ -3492,6 +3494,16 @@ Write the corrected code.`;
container.querySelectorAll('pre code').forEach(block => {
if (typeof hljs !== 'undefined') hljs.highlightElement(block);
});
// Mermaid-kaaviot
if (typeof mermaid !== 'undefined') {
mermaid.initialize({ startOnLoad: false, theme: 'dark', themeVariables: { primaryColor: '#58a6ff', primaryTextColor: '#c9d1d9', lineColor: '#30363d', background: '#0d1117' } });
container.querySelectorAll('.mermaid-container').forEach(async el => {
try {
const { svg } = await mermaid.render('m-' + el.id, el.textContent.trim());
el.innerHTML = svg;
} catch(e) { /* fallback: jätetään teksti näkyviin */ }
});
}
} catch(e) {
container.innerHTML = '<p style="color:#f85149">Virhe: ' + e.message + '</p>';
}
@@ -3532,10 +3544,15 @@ Write the corrected code.`;
}
for (const line of lines) {
// Koodiblokit
// Koodiblokit + Mermaid-kaaviot
if (line.startsWith('```')) {
if (inCode) {
html += `<pre style="background:#0d1117;border:1px solid #30363d;border-radius:6px;padding:14px;margin:12px 0;overflow-x:auto"><code class="language-${codeLang}">${codeBuffer.replace(/</g,'&lt;')}</code></pre>`;
if (codeLang === 'mermaid') {
const mermaidId = 'mermaid-' + Math.random().toString(36).slice(2, 8);
html += `<div class="mermaid-container" id="${mermaidId}" style="margin:16px 0;text-align:center">${codeBuffer.replace(/</g,'&lt;')}</div>`;
} else {
html += `<pre style="background:#0d1117;border:1px solid #30363d;border-radius:6px;padding:14px;margin:12px 0;overflow-x:auto"><code class="language-${codeLang}">${codeBuffer.replace(/</g,'&lt;')}</code></pre>`;
}
inCode = false;
codeBuffer = '';
} else {