Landing page + oppimispolku + esimerkkiprojektit
1) Landing: gecko hero, projektin syöttökenttä, "Käynnistä"-nappi 2) Oppimispolku-välilehti: promptLog step-by-step (system prompt, syöte, tulos) 3) Kolme esimerkkiprojektia: Käyttäjähallinta-API, UWB-data-analyysi, Todo-sovellus 4) Landing → App -siirtymä käynnistää pipelinen suoraan
This commit is contained in:
Jaakko Vanhala
BIN
network-poc/frontend/public/gecko_hero.webp
Normal file
BIN
network-poc/frontend/public/gecko_hero.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 105 KiB |
@@ -12,7 +12,11 @@ import Settings from "../components/Settings.astro";
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Kipinä Agentic Playground</title>
|
||||
<title>Kipinä Agentic Studio — Näe miten AI-agentit rakentavat projektin</title>
|
||||
<meta name="description" content="Seuraa reaaliajassa miten AI-agenttitiimi suunnittelee, koodaa ja testaa ohjelmistoprojektin. Ilmainen oppimistyökalu.">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
|
||||
<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 type="module">
|
||||
@@ -23,17 +27,88 @@ import Settings from "../components/Settings.astro";
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monaco-editor@0.52.2/min/vs/editor/editor.main.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- ===== LANDING ===== -->
|
||||
<div id="landing">
|
||||
<div class="bg-mesh"></div>
|
||||
<header class="landing-nav">
|
||||
<a href="/" class="landing-logo"><span class="logo-accent">KIPINÄ</span> <span class="logo-sub">/ agentic studio</span></a>
|
||||
</header>
|
||||
|
||||
<section class="hero">
|
||||
<div class="hero-container">
|
||||
<div class="hero-content">
|
||||
<h1 class="hero-title">Näe miten AI-agenttitiimi rakentaa projektin.</h1>
|
||||
<div class="hero-divider"></div>
|
||||
<p class="hero-desc">
|
||||
Seuraa reaaliajassa miten kuusi erikoistunutta AI-agenttia suunnittelee, koodaa, testaa ja katselmoi ohjelmistoprojektin — askel askeleelta.
|
||||
</p>
|
||||
<p class="hero-notice">
|
||||
Jokaisen agentin prompti, syöte ja tulos tallennetaan. Lopuksi saat toistettavan CrewAI-projektin.
|
||||
</p>
|
||||
|
||||
<div class="hero-input-group">
|
||||
<input type="text" id="landing-input" class="hero-input" placeholder="Kuvaile projektisi, esim. "REST API käyttäjähallinnalle"" autocomplete="off">
|
||||
<button id="landing-start" class="hero-btn">Käynnistä</button>
|
||||
</div>
|
||||
|
||||
<div class="hero-examples">
|
||||
<span class="hero-examples-label">Tai kokeile valmista:</span>
|
||||
<button class="example-btn" data-prompt="REST API käyttäjähallinnalle SQLite-tietokannalla">Käyttäjähallinta-API</button>
|
||||
<button class="example-btn" data-prompt="UWB-paikannusdatan ETL-pipeline CSV:stä MariaDB:hen ja visualisointi">UWB-data-analyysi</button>
|
||||
<button class="example-btn" data-prompt="Todo-sovellus FastAPI + SQLite, CRUD-endpointit ja testit">Todo-sovellus</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-orb-wrapper">
|
||||
<div class="hero-orb">
|
||||
<img src="/gecko_hero.webp" alt="Kipinä" class="hero-orb-img">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Miten se toimii -->
|
||||
<section class="how-section">
|
||||
<div class="how-container">
|
||||
<h2 class="how-title">Miten se toimii?</h2>
|
||||
<div class="how-steps">
|
||||
<div class="how-step">
|
||||
<div class="how-step-num">1</div>
|
||||
<h3>Kuvaile projekti</h3>
|
||||
<p>Kirjoita lyhyt kuvaus. Asiakas-agentti jalostaa sen vaatimuksiksi.</p>
|
||||
</div>
|
||||
<div class="how-step">
|
||||
<div class="how-step-num">2</div>
|
||||
<h3>Agentit työskentelevät</h3>
|
||||
<p>Manageri suunnittelee, koodari kirjoittaa, testaaja katselmoi ja korjaa.</p>
|
||||
</div>
|
||||
<div class="how-step">
|
||||
<div class="how-step-num">3</div>
|
||||
<h3>Tutki tulokset</h3>
|
||||
<p>Näe valmis koodi, jokaisen agentin promptit ja CrewAI-projektirakenne.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="landing-footer">
|
||||
<p>© 2026 Kipinä Technologies — <a href="https://kipina.tech">kipina.tech</a></p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<!-- ===== APP (piilotettu kunnes pipeline käynnistyy) ===== -->
|
||||
<div id="app" class="container" style="display:none">
|
||||
<div style="display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px">
|
||||
<div>
|
||||
<h1 style="margin-bottom:0"><span style="color:#ff6b00">Kipinä</span> Agentic Playground</h1>
|
||||
<h1 style="margin-bottom:0"><span style="color:#ff6b00">Kipinä</span> Agentic Studio</h1>
|
||||
<p style="color:#8b949e;margin:0">AI-ohjelmistokehitystiimi · <span id="hub-version">-</span></p>
|
||||
</div>
|
||||
<button class="btn btn-muted" onclick="showLanding()" style="font-size:14px">← Takaisin</button>
|
||||
</div>
|
||||
|
||||
<!-- Välilehdet -->
|
||||
<div class="tabs">
|
||||
<div class="tab active" onclick="switchTab('agents')">Agentit</div>
|
||||
<div class="tab" onclick="switchTab('learn')">Oppimispolku</div>
|
||||
<div class="tab" onclick="switchTab('editor')">Editor</div>
|
||||
<div class="tab" onclick="switchTab('guide')">Opas</div>
|
||||
<div class="tab" onclick="switchTab('settings')">Asetukset</div>
|
||||
@@ -46,6 +121,15 @@ import Settings from "../components/Settings.astro";
|
||||
<Terminal />
|
||||
</div>
|
||||
|
||||
<!-- Oppimispolku-paneeli -->
|
||||
<div id="panel-learn" class="panel">
|
||||
<div id="learn-empty" style="padding:40px;text-align:center;color:#8b949e">
|
||||
<p style="font-size:18px;margin-bottom:8px">Oppimispolku</p>
|
||||
<p>Käynnistä projekti nähdäksesi agenttien promptit ja tulokset askel askeleelta.</p>
|
||||
</div>
|
||||
<div id="learn-steps"></div>
|
||||
</div>
|
||||
|
||||
<Editor />
|
||||
<Guide />
|
||||
<Settings />
|
||||
@@ -69,6 +153,63 @@ import Settings from "../components/Settings.astro";
|
||||
return esc(code);
|
||||
}
|
||||
|
||||
// === Landing → App siirtymä ===
|
||||
function startProject(task) {
|
||||
if (!task || !task.trim()) return;
|
||||
document.getElementById('landing').style.display = 'none';
|
||||
document.getElementById('app').style.display = 'block';
|
||||
// Käynnistä pipeline suoraan termExec:n kautta
|
||||
setTimeout(() => {
|
||||
if (typeof termExec === 'function') termExec(`kpn project "${task.trim()}"`);
|
||||
}, 200);
|
||||
}
|
||||
|
||||
window.showLanding = function() {
|
||||
document.getElementById('app').style.display = 'none';
|
||||
document.getElementById('landing').style.display = '';
|
||||
};
|
||||
|
||||
// Landing-napit
|
||||
document.getElementById('landing-start')?.addEventListener('click', () => {
|
||||
startProject(document.getElementById('landing-input')?.value);
|
||||
});
|
||||
document.getElementById('landing-input')?.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter') startProject(e.target.value);
|
||||
});
|
||||
document.querySelectorAll('.example-btn').forEach(btn => {
|
||||
btn.addEventListener('click', () => startProject(btn.dataset.prompt));
|
||||
});
|
||||
|
||||
// === Oppimispolku — renderöinti ===
|
||||
window._lastPromptLog = null;
|
||||
|
||||
function renderLearnView(promptLog) {
|
||||
window._lastPromptLog = promptLog;
|
||||
const container = document.getElementById('learn-steps');
|
||||
const empty = document.getElementById('learn-empty');
|
||||
if (!container) return;
|
||||
if (!promptLog || !promptLog.length) { container.innerHTML = ''; if (empty) empty.style.display = ''; return; }
|
||||
if (empty) empty.style.display = 'none';
|
||||
|
||||
container.innerHTML = promptLog.map((e, i) => `
|
||||
<div class="learn-step">
|
||||
<div class="learn-step-header" onclick="this.nextElementSibling.classList.toggle('open')">
|
||||
<div class="learn-step-num">${i}</div>
|
||||
<span class="learn-step-agent">${esc(e.agentName)}</span>
|
||||
<span class="learn-step-label">${esc(e.label)} · ${esc(e.model)}</span>
|
||||
</div>
|
||||
<div class="learn-step-body">
|
||||
<div class="learn-section-title">System Prompt</div>
|
||||
<pre class="learn-code">${esc(e.systemPrompt || '(ei system promptia)')}</pre>
|
||||
<div class="learn-section-title">Syöte</div>
|
||||
<pre class="learn-code">${esc(e.userPrompt)}</pre>
|
||||
<div class="learn-section-title">Tulos</div>
|
||||
<pre class="learn-code">${esc(e.response || '(ei tulosta)')}</pre>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
// === Globaalit tilat ===
|
||||
const defaultAgents = {
|
||||
client: { name: 'Asiakas', avatar: '/avatars/kettu_notext.webp', model: 'qwen-coder', order: 0,
|
||||
@@ -237,8 +378,10 @@ OUTPUT FORMAT:
|
||||
window.location.hash = tab;
|
||||
if (tab === 'editor') initMonaco();
|
||||
};
|
||||
const initHash = window.location.hash.replace('#','');
|
||||
if (['editor','guide'].includes(initHash)) switchTab(initHash);
|
||||
setTimeout(() => {
|
||||
const initHash = window.location.hash.replace('#','');
|
||||
if (['editor','guide','learn'].includes(initHash)) switchTab(initHash);
|
||||
}, 0);
|
||||
|
||||
// === Agent selection & config ===
|
||||
let selectedAgent = null;
|
||||
@@ -1140,6 +1283,9 @@ OUTPUT FORMAT:
|
||||
const crewFiles = generateCrewAIFiles(promptLog, task);
|
||||
Object.assign(files, crewFiles);
|
||||
|
||||
// Oppimispolku
|
||||
renderLearnView(promptLog);
|
||||
|
||||
renderProjectCard(files, task);
|
||||
}
|
||||
|
||||
|
||||
@@ -81,6 +81,12 @@ body {
|
||||
}
|
||||
.dd-item:hover, .dd-item.active { background: var(--border); color: var(--accent); }
|
||||
|
||||
#editor-file-list .dd-item {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Pipeline progress */
|
||||
.pipeline-bar {
|
||||
display: none; padding: 8px 14px; background: var(--bg);
|
||||
@@ -196,6 +202,197 @@ body {
|
||||
display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
|
||||
}
|
||||
|
||||
/* ===== LANDING PAGE ===== */
|
||||
|
||||
#landing {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bg-mesh {
|
||||
position: fixed; inset: 0; z-index: -1;
|
||||
background:
|
||||
radial-gradient(ellipse 80% 60% at 20% 40%, rgba(255,107,0,0.08) 0%, transparent 70%),
|
||||
radial-gradient(ellipse 60% 50% at 80% 20%, rgba(88,166,255,0.06) 0%, transparent 70%),
|
||||
var(--bg);
|
||||
}
|
||||
|
||||
.landing-nav {
|
||||
padding: 20px 40px;
|
||||
}
|
||||
.landing-logo { text-decoration: none; font-size: 18px; font-weight: 700; }
|
||||
.logo-accent { color: #ff6b00; }
|
||||
.logo-sub { color: #8b949e; font-weight: 400; }
|
||||
|
||||
/* Hero */
|
||||
.hero {
|
||||
padding: 60px 40px 40px;
|
||||
}
|
||||
.hero-container {
|
||||
max-width: 1200px; margin: 0 auto;
|
||||
display: grid; grid-template-columns: 1fr 400px; gap: 60px; align-items: center;
|
||||
}
|
||||
.hero-title {
|
||||
font-size: clamp(2rem, 4vw, 3rem); font-weight: 800;
|
||||
line-height: 1.15; color: #e6edf3; margin-bottom: 16px;
|
||||
}
|
||||
.hero-divider {
|
||||
width: 60px; height: 3px; background: #ff6b00;
|
||||
border-radius: 2px; margin-bottom: 20px;
|
||||
}
|
||||
.hero-desc {
|
||||
font-size: 1.05rem; color: #8b949e; line-height: 1.7; margin-bottom: 12px;
|
||||
}
|
||||
.hero-notice {
|
||||
font-size: 0.9rem; color: #6e7681; line-height: 1.6;
|
||||
border-left: 2px solid var(--border); padding-left: 12px; margin-bottom: 28px;
|
||||
}
|
||||
|
||||
/* Hero input */
|
||||
.hero-input-group {
|
||||
display: flex; gap: 8px; margin-bottom: 20px;
|
||||
}
|
||||
.hero-input {
|
||||
flex: 1; padding: 14px 18px; font-size: 16px;
|
||||
font-family: 'JetBrains Mono', 'Courier New', monospace;
|
||||
background: var(--panel); color: var(--text);
|
||||
border: 1px solid var(--border); border-radius: 8px;
|
||||
outline: none; transition: border-color 0.2s;
|
||||
}
|
||||
.hero-input:focus {
|
||||
border-color: #ff6b00; box-shadow: 0 0 0 3px rgba(255,107,0,0.15);
|
||||
}
|
||||
.hero-input::placeholder { color: #484f58; }
|
||||
.hero-btn {
|
||||
padding: 14px 28px; font-size: 16px; font-weight: 600;
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: #ff6b00; color: #fff; border: none; border-radius: 8px;
|
||||
cursor: pointer; transition: background 0.2s, transform 0.1s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.hero-btn:hover { background: #e05e00; transform: translateY(-1px); }
|
||||
.hero-btn:active { transform: translateY(0); }
|
||||
|
||||
/* Example buttons */
|
||||
.hero-examples { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
|
||||
.hero-examples-label { color: #6e7681; font-size: 14px; margin-right: 4px; }
|
||||
.example-btn {
|
||||
padding: 8px 16px; font-size: 13px; font-family: 'Inter', sans-serif;
|
||||
background: transparent; color: var(--accent);
|
||||
border: 1px solid var(--border); border-radius: 6px;
|
||||
cursor: pointer; transition: all 0.2s;
|
||||
}
|
||||
.example-btn:hover {
|
||||
border-color: var(--accent); background: rgba(88,166,255,0.08);
|
||||
}
|
||||
|
||||
/* Hero orb */
|
||||
.hero-orb-wrapper {
|
||||
display: flex; justify-content: center; align-items: center;
|
||||
}
|
||||
.hero-orb {
|
||||
width: 340px; height: 340px; border-radius: 50%;
|
||||
background: radial-gradient(circle at 30% 30%, rgba(255,107,0,0.15) 0%, transparent 70%);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
animation: orb-float 6s ease-in-out infinite;
|
||||
}
|
||||
.hero-orb-img {
|
||||
width: 100%; height: 100%; object-fit: contain;
|
||||
filter: drop-shadow(0 0 40px rgba(255,107,0,0.25));
|
||||
}
|
||||
@keyframes orb-float {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-12px); }
|
||||
}
|
||||
|
||||
/* How section */
|
||||
.how-section {
|
||||
padding: 60px 40px;
|
||||
background: rgba(22,27,34,0.6);
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
.how-container { max-width: 900px; margin: 0 auto; }
|
||||
.how-title {
|
||||
text-align: center; font-size: 1.5rem; font-weight: 700;
|
||||
color: #e6edf3; margin-bottom: 40px;
|
||||
}
|
||||
.how-steps {
|
||||
display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
|
||||
}
|
||||
.how-step {
|
||||
text-align: center; padding: 24px;
|
||||
background: var(--panel); border: 1px solid var(--border);
|
||||
border-radius: 12px; transition: border-color 0.3s;
|
||||
}
|
||||
.how-step:hover { border-color: rgba(255,107,0,0.4); }
|
||||
.how-step-num {
|
||||
width: 40px; height: 40px; line-height: 40px;
|
||||
border-radius: 50%; background: rgba(255,107,0,0.12);
|
||||
color: #ff6b00; font-weight: 700; font-size: 18px;
|
||||
margin: 0 auto 14px;
|
||||
}
|
||||
.how-step h3 { color: #e6edf3; font-size: 1rem; margin-bottom: 8px; }
|
||||
.how-step p { color: #8b949e; font-size: 0.9rem; line-height: 1.5; }
|
||||
|
||||
/* Landing footer */
|
||||
.landing-footer {
|
||||
text-align: center; padding: 32px 40px;
|
||||
color: #484f58; font-size: 13px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
.landing-footer a { color: #8b949e; }
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 860px) {
|
||||
.hero-container { grid-template-columns: 1fr; gap: 32px; }
|
||||
.hero-orb-wrapper { order: -1; }
|
||||
.hero-orb { width: 220px; height: 220px; }
|
||||
.how-steps { grid-template-columns: 1fr; }
|
||||
.hero-input-group { flex-direction: column; }
|
||||
}
|
||||
|
||||
/* ===== OPPIMISPOLKU ===== */
|
||||
.learn-step {
|
||||
margin: 12px 0; border: 1px solid var(--border);
|
||||
border-radius: 8px; background: var(--panel); overflow: hidden;
|
||||
}
|
||||
.learn-step-header {
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
padding: 12px 16px; cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.learn-step-header:hover { background: rgba(88,166,255,0.04); }
|
||||
.learn-step-num {
|
||||
width: 28px; height: 28px; line-height: 28px; text-align: center;
|
||||
border-radius: 50%; background: rgba(255,107,0,0.12);
|
||||
color: #ff6b00; font-weight: 700; font-size: 13px; flex-shrink: 0;
|
||||
}
|
||||
.learn-step-agent {
|
||||
font-weight: 600; color: #e6edf3; font-size: 14px;
|
||||
}
|
||||
.learn-step-label {
|
||||
color: #8b949e; font-size: 13px; margin-left: auto;
|
||||
}
|
||||
.learn-step-body {
|
||||
display: none; padding: 0 16px 16px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
.learn-step-body.open { display: block; }
|
||||
.learn-section-title {
|
||||
color: var(--accent); font-size: 12px; font-weight: 600;
|
||||
text-transform: uppercase; letter-spacing: 0.5px;
|
||||
margin: 14px 0 6px;
|
||||
}
|
||||
.learn-code {
|
||||
font-family: 'JetBrains Mono', 'Courier New', monospace;
|
||||
font-size: 12px; line-height: 1.6;
|
||||
background: #010409; border: 1px solid var(--border);
|
||||
border-radius: 6px; padding: 12px; overflow-x: auto;
|
||||
max-height: 300px; overflow-y: auto; white-space: pre-wrap;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes blink { 0%,100% { opacity:1 } 50% { opacity:0 } }
|
||||
@keyframes spin { to { transform: rotate(360deg) } }
|
||||
|
||||
Reference in New Issue
Block a user