You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
206 lines
10 KiB
206 lines
10 KiB
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title data-i18n="skills.meta.title">Popi.art Skills</title>
|
|
<meta name="description" data-i18n-content="skills.meta.description" content="Popi.art SkillHub 技能目录静态页原型。" />
|
|
<link rel="stylesheet" href="./skillhub_assets/site.css" />
|
|
<script src="./skillhub_assets/site.js" defer></script>
|
|
</head>
|
|
<body data-page="skills">
|
|
<div class="site-shell">
|
|
<header class="site-header">
|
|
<a class="site-brand" href="./skillhub_index.html">
|
|
<span class="site-brand-dot"></span>
|
|
<span>Popi<span class="accent">.art</span></span>
|
|
</a>
|
|
<nav class="site-nav">
|
|
<a href="./skillhub_index.html" data-i18n="common.nav.home">首页</a>
|
|
<a href="./skillhub_docs.html" data-i18n="common.nav.docs">文档</a>
|
|
<a class="is-active" href="./skillhub_skills.html" data-i18n="common.nav.skills">技能页</a>
|
|
<a href="./skillhub_console.html" data-i18n="common.nav.console">控制台</a>
|
|
<a href="./skillhub_pricing.html" data-i18n="common.nav.pricing">定价</a>
|
|
</nav>
|
|
<div class="site-actions">
|
|
<a class="locale-link" href="./skillhub_skills.html" data-locale-toggle data-i18n="common.localeToggle">中文</a>
|
|
<a class="button button-primary button-header" href="./skillhub_login.html" data-i18n="common.login">登录</a>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="site-main">
|
|
<div class="page-stack">
|
|
<section class="section">
|
|
<div class="section-title section-heading" data-i18n-html="skills.heading">
|
|
<div class="eyebrow">SKILL CATALOG</div>
|
|
<h2>把 `Popiart_skillhub` 直接转成 <span>产品目录页</span></h2>
|
|
<p>目录结构来自 `index.json`，技能详情结构来自每个 `skills/*/SKILL.md`，不再手写另一套平行数据。</p>
|
|
</div>
|
|
|
|
<div class="stat-row">
|
|
<article class="metric">
|
|
<strong>58</strong>
|
|
<span data-i18n="skills.metrics.origin">popiart origin skills</span>
|
|
</article>
|
|
<article class="metric">
|
|
<strong>1</strong>
|
|
<span data-i18n="skills.metrics.upstream">upstream reference skill</span>
|
|
</article>
|
|
<article class="metric">
|
|
<strong>2</strong>
|
|
<span data-i18n="skills.metrics.showcase">showcase skills</span>
|
|
</article>
|
|
<article class="metric">
|
|
<strong>3</strong>
|
|
<span data-i18n="skills.metrics.baseline">runtime baseline</span>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<div class="hero-proof">
|
|
<span class="pill" data-i18n="skills.pills.naming">Naming: popiskill-<category>-<capability>-<slug>-v<major></span>
|
|
<span class="pill" data-i18n="skills.pills.categories">Categories: image / video / audio / meta</span>
|
|
<span class="pill" data-i18n="skills.pills.source">Source: index.json + SKILL.md</span>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<div class="section-title section-heading" data-i18n-html="skills.featuredHeading">
|
|
<div class="eyebrow">FEATURED</div>
|
|
<h2>精选技能</h2>
|
|
</div>
|
|
|
|
<div class="skill-grid">
|
|
<article class="skill-card" data-i18n-html="skills.card1">
|
|
<div class="skill-card-top">
|
|
<span class="badge badge-primary">IMAGE</span>
|
|
<span class="badge badge-success">BASELINE</span>
|
|
</div>
|
|
<h3>popiskill-image-text2image-basic-v1</h3>
|
|
<p>当前官方 runtime baseline 之一，适合作为首页和控制台的默认引导能力。</p>
|
|
<ul class="meta-list">
|
|
<li><strong>Capability:</strong> text2image</li>
|
|
<li><strong>Origin:</strong> popiart</li>
|
|
<li><strong>Display:</strong> 文生图</li>
|
|
</ul>
|
|
</article>
|
|
|
|
<article class="skill-card" data-i18n-html="skills.card2">
|
|
<div class="skill-card-top">
|
|
<span class="badge badge-primary">IMAGE</span>
|
|
<span class="badge badge-success">BASELINE</span>
|
|
</div>
|
|
<h3>popiskill-image-img2img-basic-v1</h3>
|
|
<p>基础图像编辑能力，是从静态目录进入真实图像编辑执行面的关键入口。</p>
|
|
<ul class="meta-list">
|
|
<li><strong>Capability:</strong> img2img</li>
|
|
<li><strong>Origin:</strong> popiart</li>
|
|
<li><strong>Display:</strong> 图像编辑</li>
|
|
</ul>
|
|
</article>
|
|
|
|
<article class="skill-card" data-i18n-html="skills.card3">
|
|
<div class="skill-card-top">
|
|
<span class="badge badge-primary">VIDEO</span>
|
|
<span class="badge badge-success">BASELINE</span>
|
|
</div>
|
|
<h3>popiskill-video-image2video-basic-v1</h3>
|
|
<p>当前 video 路径中最适合在产品站里承担“可执行示例”角色的公开 skill。</p>
|
|
<ul class="meta-list">
|
|
<li><strong>Capability:</strong> image2video</li>
|
|
<li><strong>Origin:</strong> popiart</li>
|
|
<li><strong>Display:</strong> 图生视频</li>
|
|
</ul>
|
|
</article>
|
|
|
|
<article class="skill-card" data-i18n-html="skills.card4">
|
|
<div class="skill-card-top">
|
|
<span class="badge badge-primary">IMAGE</span>
|
|
<span class="badge badge-warning">SHOWCASE</span>
|
|
</div>
|
|
<h3>popiskill-image-img2img-popistudio-alice-showcase-v1</h3>
|
|
<p>基于固定 Alice reference image 的角色一致性 showcase workflow，适合 demo 与 proof frame。</p>
|
|
<ul class="meta-list">
|
|
<li><strong>Capability:</strong> img2img</li>
|
|
<li><strong>Showcase:</strong> true</li>
|
|
<li><strong>Display:</strong> PopiStudio Alice</li>
|
|
</ul>
|
|
</article>
|
|
|
|
<article class="skill-card" data-i18n-html="skills.card5">
|
|
<div class="skill-card-top">
|
|
<span class="badge badge-primary">VIDEO</span>
|
|
<span class="badge badge-warning">SHOWCASE</span>
|
|
</div>
|
|
<h3>popiskill-video-image2video-popistudio-alice-showcase-v1</h3>
|
|
<p>把 Alice showcase 从单帧扩展到 teaser motion clip，是很适合首页营销区展示的 skill。</p>
|
|
<ul class="meta-list">
|
|
<li><strong>Capability:</strong> image2video</li>
|
|
<li><strong>Showcase:</strong> true</li>
|
|
<li><strong>Display:</strong> Alice teaser</li>
|
|
</ul>
|
|
</article>
|
|
|
|
<article class="skill-card" data-i18n-html="skills.card6">
|
|
<div class="skill-card-top">
|
|
<span class="badge badge-primary">AUDIO</span>
|
|
<span class="badge badge-success">CATALOG</span>
|
|
</div>
|
|
<h3>popiskill-audio-tts-multimodel-v1</h3>
|
|
<p>目录里的一批 audio skill 说明站点不能只围绕图像和视频设计，音频能力是完整品类。</p>
|
|
<ul class="meta-list">
|
|
<li><strong>Capability:</strong> tts</li>
|
|
<li><strong>Category:</strong> audio</li>
|
|
<li><strong>Display:</strong> 多模型 TTS</li>
|
|
</ul>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="spotlight">
|
|
<article class="spotlight-card" data-i18n-html="skills.detail">
|
|
<div class="eyebrow">DETAIL EXAMPLE</div>
|
|
<h3>Skill 详情页应该长什么样</h3>
|
|
<p>从 `SKILL.md` 里可以稳定提取：frontmatter 描述、适用场景、不适用场景、required inputs、workflow、command pattern、payload template 和 artifact handling。</p>
|
|
<ul class="meta-list meta-list-spaced-lg">
|
|
<li><strong>Use when:</strong> demo frame / proof frame / character consistency</li>
|
|
<li><strong>Do not use:</strong> text-only / batch / long-form video</li>
|
|
<li><strong>Required input:</strong> scene_prompt</li>
|
|
<li><strong>Optional:</strong> shot_type / camera / mood / aspect_ratio</li>
|
|
</ul>
|
|
</article>
|
|
|
|
<article class="doc-card" data-i18n-html="skills.command">
|
|
<div class="eyebrow">REAL COMMAND</div>
|
|
<h3>Alice Showcase Command Pattern</h3>
|
|
<div class="code-block">
|
|
<div class="code-head">
|
|
<span>Skill Run</span>
|
|
<button class="button copy-button" data-copy-target="skills-alice-run" type="button">复制</button>
|
|
</div>
|
|
<pre><code id="skills-alice-run">popiart run popiskill-image-img2img-popistudio-alice-showcase-v1 \
|
|
--input @params.json \
|
|
--wait</code></pre>
|
|
</div>
|
|
</article>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="site-footer">
|
|
<div class="footer-grid">
|
|
<div>
|
|
<strong data-i18n="skills.footer.title">Popi.art Skill Catalog Prototype</strong>
|
|
<div class="footer-subtitle" data-i18n-html="skills.footer.subtitle">技能页字段按 `index.json` 和 `SKILL.md` 设计，后续可直接接远端 registry。</div>
|
|
</div>
|
|
<div class="footer-links">
|
|
<a href="./skillhub_index.html" data-i18n="common.nav.home">首页</a>
|
|
<a href="./skillhub_docs.html" data-i18n="common.nav.docs">文档</a>
|
|
<a href="./skillhub_console.html" data-i18n="common.nav.console">控制台</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|