214 lines
8.0 KiB
JavaScript
214 lines
8.0 KiB
JavaScript
import { useEffect, useMemo, useState } from "react";
|
|
import { callSkill, loadAgentConfig, loadSession, signInUrl } from "./a2a.js";
|
|
|
|
const DEFAULT_FORM = {
|
|
asset_type: "character",
|
|
theme: "forest knight",
|
|
palette: "#22c55e, #14532d, #facc15",
|
|
size: 128,
|
|
style: "pixel",
|
|
variant_count: 2,
|
|
};
|
|
|
|
export function App() {
|
|
const [config, setConfig] = useState(null);
|
|
const [session, setSession] = useState(null);
|
|
const [form, setForm] = useState(DEFAULT_FORM);
|
|
const [result, setResult] = useState(null);
|
|
const [receipts, setReceipts] = useState([]);
|
|
const [error, setError] = useState(null);
|
|
const [running, setRunning] = useState(false);
|
|
const [loadingReceipts, setLoadingReceipts] = useState(false);
|
|
|
|
useEffect(() => {
|
|
loadAgentConfig()
|
|
.then((data) => {
|
|
setConfig(data);
|
|
return loadSession(data).catch(() => ({ authenticated: false }));
|
|
})
|
|
.then((sessionData) => setSession(sessionData))
|
|
.catch((err) => setError(err.message || String(err)));
|
|
}, []);
|
|
|
|
const generateSkill = useMemo(
|
|
() => config?.skills?.find((skill) => skill.name === "generate_svg_asset"),
|
|
[config],
|
|
);
|
|
const listSkill = useMemo(
|
|
() => config?.skills?.find((skill) => skill.name === "list_recent_receipts"),
|
|
[config],
|
|
);
|
|
const needsSignIn = Boolean(config?.auth?.invokeRequiresSession && session && !session.authenticated);
|
|
const signInHref = useMemo(() => (config ? signInUrl(config) : null), [config]);
|
|
|
|
function update(field, value) {
|
|
setForm((current) => ({ ...current, [field]: value }));
|
|
}
|
|
|
|
function requestPayload() {
|
|
return {
|
|
asset_type: form.asset_type,
|
|
theme: form.theme.trim(),
|
|
palette: form.palette.split(",").map((item) => item.trim()).filter(Boolean),
|
|
size: Number(form.size),
|
|
style: form.style,
|
|
variant_count: Number(form.variant_count),
|
|
};
|
|
}
|
|
|
|
async function generateAsset(event) {
|
|
event.preventDefault();
|
|
if (!config || !generateSkill) return;
|
|
setRunning(true);
|
|
setError(null);
|
|
setResult(null);
|
|
try {
|
|
const data = await callSkill(config, "generate_svg_asset", requestPayload());
|
|
setResult(data);
|
|
if (data?.status === "setup_required") {
|
|
setError(data.warning || "Setup is required before this skill can run.");
|
|
}
|
|
if (listSkill) loadReceipts();
|
|
} catch (err) {
|
|
setError(err.message || String(err));
|
|
} finally {
|
|
setRunning(false);
|
|
}
|
|
}
|
|
|
|
async function loadReceipts() {
|
|
if (!config || !listSkill) return;
|
|
setLoadingReceipts(true);
|
|
try {
|
|
const data = await callSkill(config, "list_recent_receipts", { limit: 8 });
|
|
if (data.status === "ok") setReceipts(data.receipts || []);
|
|
} catch (err) {
|
|
if (!String(err.message || err).toLowerCase().includes("sign in")) {
|
|
setError(err.message || String(err));
|
|
}
|
|
} finally {
|
|
setLoadingReceipts(false);
|
|
}
|
|
}
|
|
|
|
if (!config) {
|
|
return <main className="loading"><p>{error || "Loading SVG asset studio..."}</p></main>;
|
|
}
|
|
|
|
return (
|
|
<main className="app-shell">
|
|
<section className="hero">
|
|
<div>
|
|
<p className="eyebrow">SVG game asset generator</p>
|
|
<h1>Generate production-ready SVG sprites for your game.</h1>
|
|
<p className="lede">
|
|
Choose an asset type, style, size, and palette. The backend returns inline SVG assets
|
|
and persists a signed-in execution receipt when deployed with managed Postgres.
|
|
</p>
|
|
</div>
|
|
<div className="session-card">
|
|
<span>{session?.authenticated ? "Signed in" : "Sign-in required to run"}</span>
|
|
<strong>{session?.user?.email || session?.email || config.agent?.name}</strong>
|
|
{needsSignIn && signInHref ? <a href={signInHref}>Sign in with A2A Cloud</a> : null}
|
|
</div>
|
|
</section>
|
|
|
|
<section className="workspace">
|
|
<form className="generator-card" onSubmit={generateAsset}>
|
|
<div className="form-grid">
|
|
<label>
|
|
Asset type
|
|
<select value={form.asset_type} onChange={(event) => update("asset_type", event.target.value)}>
|
|
<option value="character">Character</option>
|
|
<option value="enemy">Enemy</option>
|
|
<option value="item">Item</option>
|
|
<option value="tile">Tile</option>
|
|
<option value="icon">Icon</option>
|
|
<option value="projectile">Projectile</option>
|
|
</select>
|
|
</label>
|
|
<label>
|
|
Style
|
|
<select value={form.style} onChange={(event) => update("style", event.target.value)}>
|
|
<option value="pixel">Pixel</option>
|
|
<option value="flat">Flat</option>
|
|
<option value="outline">Outline</option>
|
|
<option value="neon">Neon</option>
|
|
</select>
|
|
</label>
|
|
<label className="wide">
|
|
Theme prompt
|
|
<input maxLength={80} minLength={2} value={form.theme} onChange={(event) => update("theme", event.target.value)} />
|
|
</label>
|
|
<label className="wide">
|
|
Palette (#RRGGBB, comma-separated, max 5)
|
|
<input value={form.palette} onChange={(event) => update("palette", event.target.value)} />
|
|
</label>
|
|
<label>
|
|
Canvas size
|
|
<input max={512} min={32} type="number" value={form.size} onChange={(event) => update("size", event.target.value)} />
|
|
</label>
|
|
<label>
|
|
Variants
|
|
<input max={4} min={1} type="number" value={form.variant_count} onChange={(event) => update("variant_count", event.target.value)} />
|
|
</label>
|
|
</div>
|
|
<button disabled={running || needsSignIn} type="submit">
|
|
{running ? "Generating..." : "Generate SVG assets"}
|
|
</button>
|
|
{needsSignIn ? <p className="hint">Sign in to invoke backend tools and persist receipts.</p> : null}
|
|
{error ? <p className="error">{error}</p> : null}
|
|
</form>
|
|
|
|
<aside className="receipt-card">
|
|
<div className="receipt-header">
|
|
<div>
|
|
<p className="eyebrow">Receipts</p>
|
|
<h2>Recent runs</h2>
|
|
</div>
|
|
<button disabled={loadingReceipts || needsSignIn} onClick={loadReceipts} type="button">
|
|
{loadingReceipts ? "Loading..." : "Refresh"}
|
|
</button>
|
|
</div>
|
|
{receipts.length ? (
|
|
<ul className="receipts">
|
|
{receipts.map((item) => (
|
|
<li key={item.receipt_id}>
|
|
<strong>{item.theme}</strong>
|
|
<span>{item.asset_type} · {item.style} · {item.variant_count} variant(s)</span>
|
|
<code>{item.receipt_id}</code>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
) : (
|
|
<p className="empty">No persisted receipts loaded yet.</p>
|
|
)}
|
|
</aside>
|
|
</section>
|
|
|
|
<section className="results">
|
|
<div className="result-header">
|
|
<div>
|
|
<p className="eyebrow">Generated assets</p>
|
|
<h2>{result?.status === "ok" ? `${result.svg_assets?.length || 0} SVG asset(s)` : "Preview"}</h2>
|
|
</div>
|
|
{result?.receipt_id ? <code>{result.receipt_id}</code> : null}
|
|
</div>
|
|
{result?.warnings?.length ? <p className="warning">{result.warnings.join(" · ")}</p> : null}
|
|
<div className="asset-grid">
|
|
{(result?.svg_assets || []).map((asset) => (
|
|
<article className="asset" key={asset.name}>
|
|
<div className="svg-preview" dangerouslySetInnerHTML={{ __html: asset.svg }} />
|
|
<div className="asset-meta">
|
|
<strong>{asset.name}</strong>
|
|
<button type="button" onClick={() => navigator.clipboard?.writeText(asset.svg)}>Copy SVG</button>
|
|
</div>
|
|
</article>
|
|
))}
|
|
{!result ? <p className="empty">Submit the form to render SVG assets from the live backend.</p> : null}
|
|
</div>
|
|
</section>
|
|
</main>
|
|
);
|
|
}
|