feat: complete image console and add verified REST and MCP workflows
This commit is contained in:
+182
@@ -0,0 +1,182 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>SKILL.md · ai-image</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<script src="api.js"></script>
|
||||
<script src="components.js"></script>
|
||||
</head>
|
||||
<body data-page="skills">
|
||||
|
||||
<aside class="app-nav">
|
||||
<div class="app-brand">
|
||||
<span class="brand-mark" aria-hidden="true"></span>
|
||||
<span class="brand-text"><b>ai-image</b><small>绘图聚合控制台</small></span>
|
||||
</div>
|
||||
<nav class="nav-list">
|
||||
<p class="nav-group">工作台</p>
|
||||
<a class="nav-item" data-nav="create" href="create.html"><span class="nav-ico"><svg class="ico" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3-1.9 5.8L4 10.7l6.1 1.9L12 18.4l1.9-5.8 6.1-1.9-6.1-1.9Z"/><path d="M5 3v4"/><path d="M19 17v4"/><path d="M3 5h4"/><path d="M17 19h4"/></svg></span>出图</a>
|
||||
<a class="nav-item" data-nav="gallery" href="index.html"><span class="nav-ico"><svg class="ico" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="18" height="18" x="3" y="3" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg></span>画廊</a>
|
||||
<a class="nav-item" data-nav="records" href="records.html"><span class="nav-ico"><svg class="ico" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 3-6.7L3 8"/><path d="M3 3v5h5"/><path d="M12 7v5l4 2"/></svg></span>生成记录</a>
|
||||
<p class="nav-group">配置</p>
|
||||
<a class="nav-item" data-nav="providers" href="providers.html"><span class="nav-ico"><svg class="ico" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 22v-5"/><path d="M9 8V2"/><path d="M15 8V2"/><path d="M18 8v3a6 6 0 0 1-12 0V8Z"/></svg></span>供应商</a>
|
||||
<a class="nav-item" data-nav="models" href="models.html"><span class="nav-ico"><svg class="ico" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z"/><path d="m7 16.5-4.74-2.85"/><path d="m7 16.5 5-3"/><path d="M7 16.5v5.17"/><path d="M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z"/><path d="m17 16.5-5-3"/><path d="m17 16.5 4.74-2.85"/><path d="M17 16.5v5.17"/><path d="M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z"/><path d="M12 8 7.26 5.15"/><path d="m12 8 4.74-2.85"/><path d="M12 13.5V8"/></svg></span>模型</a>
|
||||
<p class="nav-group">Agent</p>
|
||||
<a class="nav-item" data-nav="skills" href="skills.html"><span class="nav-ico"><svg class="ico" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/></svg></span>SKILL.md</a>
|
||||
</nav>
|
||||
<div class="nav-foot">
|
||||
<span class="dot dot-ok"></span>服务在线 <span class="mono">:8765</span>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="app-content">
|
||||
<header class="top-bar">
|
||||
<div class="crumb">
|
||||
<span class="crumb-sec">Agent</span>
|
||||
<span class="crumb-sep">/</span>
|
||||
<h1>SKILL.md</h1>
|
||||
</div>
|
||||
<div class="top-actions"><span class="tag tag-warn">Agent 实时拉取</span><a class="btn btn-secondary btn-sm" href="providers.html">供应商</a></div>
|
||||
</header>
|
||||
<section class="page-body">
|
||||
<div class="split">
|
||||
<div class="card">
|
||||
<div class="card-head">
|
||||
<div>
|
||||
<h3>SKILL.md 预览</h3>
|
||||
<div class="sub" id="docMeta">—</div>
|
||||
</div>
|
||||
<div class="top-actions">
|
||||
<button class="btn btn-secondary btn-sm" id="copyBtn"><span class="ico" data-icon="copy"></span>复制全文</button>
|
||||
<button class="btn btn-secondary btn-sm" id="rawBtn"><span class="ico" data-icon="code"></span>查看源码</button>
|
||||
<button class="btn btn-secondary btn-sm" id="refreshBtn"><span class="ico" data-icon="refresh"></span>刷新</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="md" id="mdView"></div>
|
||||
<div class="code-box hidden" id="rawView" style="white-space:pre-wrap;max-height:60vh;overflow:auto"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stagger">
|
||||
<div class="card">
|
||||
<div class="card-head"><h3>Agent 调用流程</h3><div class="sub">文档不含固定模型名，必须先拉模型</div></div>
|
||||
<div class="card-body">
|
||||
<ol class="flow">
|
||||
<li>
|
||||
<b>列出供应商</b>
|
||||
<div class="code-box">GET /api/providers · list_providers()</div>
|
||||
</li>
|
||||
<li class="must">
|
||||
<b>拉取上游模型（必做）</b>
|
||||
<div class="code-box">POST /api/providers/{id}/discover · discover_models(provider_id)</div>
|
||||
<div class="hint">返回 <code>{ total, matched }</code>，<code>matched</code> 即 ID 含 <code>image</code> 的模型</div>
|
||||
</li>
|
||||
<li>
|
||||
<b>用返回的模型出图</b>
|
||||
<div class="code-box">POST /api/generate · generate_image(...)</div>
|
||||
</li>
|
||||
</ol>
|
||||
<div class="alert alert-danger">
|
||||
<span class="ico" data-icon="alert"></span>
|
||||
<div>
|
||||
<b>matched 为空时立即结束</b>
|
||||
不猜测模型名、不调用出图接口，直接回复「没找到有效的模型」。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-head"><h3>Agent 获取方式</h3></div>
|
||||
<div class="card-body">
|
||||
<div class="field" style="margin-bottom:10px">
|
||||
<label>REST 接口</label>
|
||||
<div class="code-box">GET /api/skills</div>
|
||||
<div class="hint">返回 JSON；原文接口为 /api/skills/raw</div>
|
||||
</div>
|
||||
<div class="field" style="margin-bottom:10px">
|
||||
<label>curl</label>
|
||||
<div class="code-box" id="curlBox">curl -s http://localhost:8765/api/skills</div>
|
||||
</div>
|
||||
<div class="field" style="margin-bottom:0">
|
||||
<label>MCP 工具</label>
|
||||
<div class="code-box">get_skill_doc()</div>
|
||||
<div class="hint">下游 Agent 无需读取仓库文件</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-head"><h3>文档同步状态</h3></div>
|
||||
<div class="card-body">
|
||||
<div class="toolbar" style="margin-bottom:0">
|
||||
<span class="dot dot-ok"></span>
|
||||
<span>文档不包含任何固定模型名</span>
|
||||
</div>
|
||||
<div class="toolbar" style="margin-bottom:0">
|
||||
<span class="dot dot-ok"></span>
|
||||
<span>模型清单来自实时拉取接口</span>
|
||||
</div>
|
||||
<div class="toolbar" style="margin-bottom:0">
|
||||
<span class="dot dot-warn"></span>
|
||||
<span class="dim">图生图示例见本文档；仅支持参考图的供应商可用</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-head"><h3>约定</h3></div>
|
||||
<div class="card-body">
|
||||
<div class="md">
|
||||
<ul>
|
||||
<li>模型名<strong>不写死在文档里</strong>，Agent 必须先调用发现接口再出图。</li>
|
||||
<li>过滤规则：模型 ID 转小写后包含 <code>image</code>。</li>
|
||||
<li>未命中模型时结束并回复「没找到有效的模型」，不重试猜测。</li>
|
||||
<li>尺寸统一为 <code>WxH</code>；仅 Agnes 支持 <code>ratio</code> 比例参数。</li>
|
||||
<li>图片落盘于 <code>output/<profile_name>/</code>，页面画廊即该目录。</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
const $ = (s) => document.querySelector(s);
|
||||
let doc = null;
|
||||
|
||||
|
||||
$("#copyBtn").addEventListener("click", () => { if (doc) copyText(doc.body); });
|
||||
$("#rawBtn").addEventListener("click", () => {
|
||||
const raw = $("#rawView");
|
||||
const md = $("#mdView");
|
||||
const showRaw = raw.classList.contains("hidden");
|
||||
raw.classList.toggle("hidden", !showRaw);
|
||||
md.classList.toggle("hidden", showRaw);
|
||||
$("#rawBtn").innerHTML = icon(showRaw ? "fileText" : "code", 16) + (showRaw ? "查看渲染" : "查看源码");
|
||||
});
|
||||
$("#refreshBtn").addEventListener("click", (event) => runTask(async () => {
|
||||
await load();
|
||||
toast("文档已刷新");
|
||||
}, event.currentTarget));
|
||||
|
||||
async function load() {
|
||||
doc = await window.API.getSkill();
|
||||
$("#docMeta").textContent = "版本 " + doc.version + " · 更新于 " + doc.updated_at;
|
||||
$("#mdView").innerHTML = renderMarkdown(doc.body);
|
||||
$("#rawView").textContent = doc.body;
|
||||
}
|
||||
|
||||
paintIcons();
|
||||
runTask(load);
|
||||
})();
|
||||
</script>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user