Nvidia/BossAI
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance website flow and user workbench

Browse Source
This commit is contained in:
boos
2026-06-06 21:44:58 +08:00
parent f725de28bd
commit f7916a42e5
4 changed files with 502 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/app/globals.css
+206 -1
View File
@@ -358,6 +358,7 @@ a {
.console-preview-section,
.factory-section,
.studio-section,
.pipeline-section,
.control-section,
.deploy-section,
.final-section {
@@ -1103,6 +1104,7 @@ a {
.ops-section,
.factory-section,
.studio-section,
.pipeline-section,
.control-section,
.deploy-section,
.final-section {
@@ -1124,6 +1126,7 @@ a {
.section-heading span,
.studio-copy span,
.pipeline-copy span,
.control-panel span,
.ops-copy span,
.console-preview-copy > span,
@@ -1140,6 +1143,7 @@ a {
.section-heading h2,
.workflow-panel h2,
.studio-copy h2,
.pipeline-copy h2,
.control-panel h2,
.ops-copy h2,
.console-preview-copy h2,
@@ -1249,6 +1253,9 @@ a {
.endpoint-card p,
.studio-copy p,
.studio-flow p,
.pipeline-copy p,
.pipeline-request p,
.pipeline-steps p,
.workflow-panel p,
.ops-copy p,
.ops-card p,
@@ -1264,6 +1271,9 @@ a {
.capability-card,
.endpoint-card,
.studio-flow article,
.pipeline-request,
.pipeline-steps article,
.pipeline-output,
.control-grid > div,
.ops-card,
.console-preview-stats > div,
@@ -1276,6 +1286,9 @@ a {
.capability-card:hover,
.endpoint-card:hover,
.studio-flow article:hover,
.pipeline-request:hover,
.pipeline-steps article:hover,
.pipeline-output:hover,
.control-grid > div:hover,
.ops-card:hover,
.console-preview-stats > div:hover,
@@ -1350,6 +1363,183 @@ a {
letter-spacing: -0.045em;
}
.pipeline-section {
display: grid;
grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
gap: 18px;
align-items: stretch;
}
.pipeline-copy,
.pipeline-board {
border: 1px solid var(--line);
border-radius: 32px;
background: var(--panel-gradient);
box-shadow: inset 0 1px 0 var(--surface-highlight);
}
.pipeline-copy {
display: grid;
align-content: center;
gap: 18px;
padding: 34px;
}
.pipeline-board {
position: relative;
overflow: hidden;
display: grid;
grid-template-columns: minmax(190px, 0.62fr) minmax(0, 1fr) minmax(220px, 0.72fr);
gap: 12px;
padding: clamp(18px, 3vw, 30px);
}
.pipeline-board::before {
position: absolute;
inset: 0;
pointer-events: none;
content: "";
background:
linear-gradient(var(--console-grid-y) 1px, transparent 1px),
linear-gradient(90deg, var(--console-grid-x) 1px, transparent 1px);
background-size: 38px 38px;
mask-image: linear-gradient(90deg, transparent, black 18%, black 82%, transparent);
}
.pipeline-request,
.pipeline-output,
.pipeline-steps article {
position: relative;
z-index: 1;
border: 1px solid var(--line);
border-radius: 20px;
background: var(--surface);
box-shadow: inset 0 1px 0 var(--surface-highlight);
}
.pipeline-request {
display: grid;
align-content: center;
gap: 10px;
padding: 18px;
}
.pipeline-request span,
.pipeline-output-head span,
.pipeline-output-row span,
.pipeline-steps article span {
color: var(--faint);
font-size: 11px;
}
.pipeline-request strong {
max-width: 16ch;
color: var(--text);
font-size: clamp(21px, 2.2vw, 30px);
line-height: 1.04;
letter-spacing: -0.04em;
}
.pipeline-steps {
display: grid;
gap: 10px;
}
.pipeline-steps article {
display: grid;
grid-template-columns: 36px minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
min-height: 78px;
padding: 12px;
}
.pipeline-steps em {
width: 34px;
height: 34px;
display: grid;
place-items: center;
border: 1px solid var(--line-strong);
border-radius: 12px;
color: var(--text);
background: var(--pill-featured-bg);
font-family: var(--font-geist-mono), monospace;
font-size: 11px;
font-style: normal;
font-weight: 800;
}
.pipeline-steps strong {
display: block;
margin-bottom: 3px;
color: var(--text);
font-size: 14px;
}
.pipeline-steps article span {
justify-self: end;
min-width: 74px;
border: 1px solid var(--line);
border-radius: 999px;
padding: 6px 8px;
background: var(--surface-muted);
text-align: center;
}
.pipeline-output {
display: grid;
align-content: center;
gap: 10px;
padding: 16px;
}
.pipeline-output-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 4px;
}
.pipeline-output-head strong,
.pipeline-output-row em {
color: var(--acid);
font-family: var(--font-geist-mono), monospace;
font-size: 11px;
text-transform: uppercase;
}
.pipeline-output-row {
min-height: 54px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 4px 8px;
align-items: center;
border: 1px solid var(--line);
border-radius: 16px;
background: var(--surface-muted);
padding: 10px;
}
.pipeline-output-row strong {
overflow: hidden;
color: var(--text);
font-size: 13px;
text-overflow: ellipsis;
white-space: nowrap;
}
.pipeline-output-row span {
grid-column: 1;
}
.pipeline-output-row em {
grid-row: 1 / span 2;
grid-column: 2;
align-self: center;
font-style: normal;
}
.endpoint-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -1811,6 +2001,7 @@ a {
.api-section,
.workflow-section,
.ops-section,
.pipeline-section,
.console-preview-section,
.studio-section,
.control-section,
@@ -1838,7 +2029,8 @@ a {
}
.section-heading.split,
.endpoint-grid {
.endpoint-grid,
.pipeline-board {
grid-template-columns: 1fr;
}
@@ -1859,6 +2051,7 @@ a {
.api-section,
.workflow-section,
.ops-section,
.pipeline-section,
.console-preview-section,
.studio-section,
.control-section,
@@ -1942,6 +2135,8 @@ a {
.workflow-panel,
.studio-copy,
.pipeline-copy,
.pipeline-board,
.control-section,
.ops-copy,
.ops-grid,
@@ -1978,8 +2173,18 @@ a {
display: none;
}
.pipeline-steps article {
grid-template-columns: 34px minmax(0, 1fr);
}
.pipeline-steps article span {
grid-column: 2;
justify-self: start;
}
.factory-section,
.control-section,
.pipeline-section,
.console-preview-section,
.deploy-section {
gap: 22px;
website/app/page.tsx
+75
View File
@@ -88,6 +88,39 @@ const studioFlow = [
},
];
const creationPipeline = [
{
stage: "01",
title: "输入创作目标",
body: "商品文案、角色图片、参考音频、附件脚本或 API 请求进入统一入口。",
signal: "Prompt / File",
},
{
stage: "02",
title: "路由合适模型",
body: "按对话、生图、视频、TTS、Comfy 后端和站点健康自动选择能力。",
signal: "Router",
},
{
stage: "03",
title: "执行工作流",
body: "生图助手、视频助手、数字人或 Comfy 画布提交任务并持续记录进度。",
signal: "Workflow",
},
{
stage: "04",
title: "归档最终产出",
body: "只把生成完成的图片、视频和音频写入工作空间，同时沉淀日志与成本。",
signal: "Workspace",
},
];
const creationOutputs = [
["商品讲解视频", "digital-human", "完成"],
["封面主视觉", "gpt-image-2", "归档"],
["短视频脚本", "gpt-5.5", "可复制"],
];
const workflowModes = [
["cloud", "Comfy Cloud API 后端"],
["runninghub", "RunningHub API 后端"],
@@ -435,6 +468,48 @@ export default function Home() {
</div>
</section>
<section className="pipeline-section" data-motion="section">
<div className="pipeline-copy">
<span>Product Flow</span>
<h2>用户给出目标，BossAI 把它推进到可交付产出</h2>
<p>
官网看到的能力不是单点功能。进入后台后，用户可以把一个商品讲解、图片创意或视频脚本一路交给模型路由、工作流执行和工作空间归档。
</p>
</div>
<div className="pipeline-board" aria-label="BossAI 产品流转演示">
<div className="pipeline-request" data-motion="card">
<span>用户输入</span>
<strong>生成 30 秒新品讲解视频</strong>
<p>附人物图、商品卖点、参考音频</p>
</div>
<div className="pipeline-steps">
{creationPipeline.map((item) => (
<article data-motion="card" key={item.stage}>
<em>{item.stage}</em>
<div>
<strong>{item.title}</strong>
<p>{item.body}</p>
</div>
<span>{item.signal}</span>
</article>
))}
</div>
<div className="pipeline-output" data-motion="card">
<div className="pipeline-output-head">
<span>产出归档</span>
<strong>Workspace</strong>
</div>
{creationOutputs.map(([name, model, state]) => (
<div className="pipeline-output-row" key={name}>
<strong>{name}</strong>
<span>{model}</span>
<em>{state}</em>
</div>
))}
</div>
</div>
</section>
<section id="api" className="api-section" data-motion="section">
<div className="section-heading split">
<div>