Files
ai-image/web/skills.html
T

183 lines
10 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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/&lt;profile_name&gt;/</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>