feat: 管线四阶段进度上报 + 图片预览 + Vite 代理
后端: - pipeline.go: ProgressReporter 回调类型 + WithProgressReporter 注入 context - nodes.go: 各节点 pre/post handler 调用 reportProgress() 上报阶段进度 - generate.go: TaskResponse 新增 stage 字段,runPipelineBg 注入进度回调 前端: - vite.config.ts: 添加 /generation 代理到后端静态文件服务 - generation.ts: 轮询读取 stage 字段,暴露 stage/retryCount/rejectReason - GeneratePage.tsx: ProgressBar 接收真实管线阶段数据
This commit is contained in:
@@ -49,6 +49,7 @@ type TaskResponse struct {
|
||||
Prompt string `json:"prompt"`
|
||||
AssetType string `json:"assetType"`
|
||||
Status string `json:"status"`
|
||||
Stage string `json:"stage,omitempty"`
|
||||
Progress int `json:"progress"`
|
||||
RetryCount int `json:"retryCount"`
|
||||
Error string `json:"error,omitempty"`
|
||||
@@ -110,7 +111,12 @@ func Generate(c *gin.Context) {
|
||||
|
||||
// runPipelineBg 后台执行生成管线,更新任务状态。
|
||||
func runPipelineBg(projectID, taskID string, req GenerateRequest) {
|
||||
updateStatus(taskID, "running", 10)
|
||||
// 注入进度上报回调
|
||||
ctx := service.WithProgressReporter(context.Background(), func(stage string, progress int) {
|
||||
updateTaskProgress(taskID, "running", stage, progress)
|
||||
})
|
||||
|
||||
updateTaskProgress(taskID, "running", "prompt_builder", 5)
|
||||
|
||||
in := service.PipelineInput{
|
||||
ProjectID: projectID,
|
||||
@@ -131,7 +137,6 @@ func runPipelineBg(projectID, taskID string, req GenerateRequest) {
|
||||
},
|
||||
}
|
||||
|
||||
ctx := context.Background()
|
||||
output, err := service.RunPipeline(ctx, in)
|
||||
if err != nil {
|
||||
log.Printf("[generate] task %s failed: %v", taskID, err)
|
||||
@@ -139,7 +144,7 @@ func runPipelineBg(projectID, taskID string, req GenerateRequest) {
|
||||
return
|
||||
}
|
||||
|
||||
updateStatus(taskID, "saving", 80)
|
||||
updateTaskProgress(taskID, "saving", "format_adapter", 90)
|
||||
|
||||
// 保存图片到 ../generation/{projectId}/{taskId}/
|
||||
genDir := filepath.Join("..", "generation", projectID, taskID)
|
||||
@@ -180,13 +185,14 @@ func runPipelineBg(projectID, taskID string, req GenerateRequest) {
|
||||
log.Printf("[generate] task %s completed, %d assets", taskID, len(assets))
|
||||
}
|
||||
|
||||
func updateStatus(taskID, status string, progress int) {
|
||||
func updateTaskProgress(taskID, status, stage string, progress int) {
|
||||
rec, ok := taskStore.Load(taskID)
|
||||
if !ok {
|
||||
return
|
||||
}
|
||||
r := rec.(*taskRecord)
|
||||
r.task.Status = status
|
||||
r.task.Stage = stage
|
||||
r.task.Progress = progress
|
||||
taskStore.Store(taskID, r)
|
||||
}
|
||||
|
||||
@@ -57,8 +57,10 @@ var promptOptimizerNode = compose.InvokableLambda(func(ctx context.Context, in P
|
||||
func promptOptimizerPreHandler(ctx context.Context, in PipelineInput, state *PipelineState) (PipelineInput, error) {
|
||||
if state.RetryCount == 0 {
|
||||
state.Input = in
|
||||
reportProgress(ctx, "prompt_builder", 10)
|
||||
} else if state.RejectReason != "" {
|
||||
in.RejectReason = state.RejectReason
|
||||
reportProgress(ctx, "prompt_builder", 30+state.RetryCount*10)
|
||||
}
|
||||
return in, nil
|
||||
}
|
||||
@@ -66,6 +68,7 @@ func promptOptimizerPreHandler(ctx context.Context, in PipelineInput, state *Pip
|
||||
// promptOptimizerPostHandler 将最终提示词写入全局状态。
|
||||
func promptOptimizerPostHandler(ctx context.Context, out string, state *PipelineState) (string, error) {
|
||||
state.FinalPrompt = out
|
||||
reportProgress(ctx, "asset_generator", 35)
|
||||
return out, nil
|
||||
}
|
||||
|
||||
@@ -82,6 +85,7 @@ var assetGeneratorNode = compose.InvokableLambda(func(ctx context.Context, promp
|
||||
// assetGeneratorPostHandler 将原始图片写入全局状态。
|
||||
func assetGeneratorPostHandler(ctx context.Context, out []GeneratedImage, state *PipelineState) ([]GeneratedImage, error) {
|
||||
state.RawImages = out
|
||||
reportProgress(ctx, "quality_supervisor", 60)
|
||||
return out, nil
|
||||
}
|
||||
|
||||
@@ -104,11 +108,14 @@ var qualitySupervisorNode = compose.InvokableLambda(func(ctx context.Context, im
|
||||
|
||||
if pass {
|
||||
state.NextNode = nodeFormatAdapter
|
||||
reportProgress(ctx, "format_adapter", 85)
|
||||
} else if state.RetryCount >= 3 {
|
||||
state.NextNode = nodeFormatAdapter
|
||||
reportProgress(ctx, "format_adapter", 85)
|
||||
} else {
|
||||
state.RetryCount++
|
||||
state.NextNode = nodePromptOptimizer
|
||||
reportProgress(ctx, "quality_supervisor", 50+state.RetryCount*10)
|
||||
}
|
||||
|
||||
input = state.Input
|
||||
|
||||
@@ -14,6 +14,25 @@ const (
|
||||
nodeFormatAdapter = "format_adapter"
|
||||
)
|
||||
|
||||
// ProgressReporter 管线进度回调:stage 为当前节点名,progress 为 0-100。
|
||||
type ProgressReporter func(stage string, progress int)
|
||||
|
||||
type progressKeyType struct{}
|
||||
|
||||
var progressCtxKey progressKeyType
|
||||
|
||||
// WithProgressReporter 将进度回调注入 context。
|
||||
func WithProgressReporter(ctx context.Context, r ProgressReporter) context.Context {
|
||||
return context.WithValue(ctx, progressCtxKey, r)
|
||||
}
|
||||
|
||||
// reportProgress 从 context 取出回调上报进度。
|
||||
func reportProgress(ctx context.Context, stage string, progress int) {
|
||||
if r, ok := ctx.Value(progressCtxKey).(ProgressReporter); ok {
|
||||
r(stage, progress)
|
||||
}
|
||||
}
|
||||
|
||||
// NewGenerateGraph 创建生成管线 Graph(PromptOptimizer → AssetGenerator → QualitySupervisor → FormatAdapter)。
|
||||
//
|
||||
// START → PromptOptimizer → AssetGenerator → QualitySupervisor
|
||||
|
||||
@@ -19,9 +19,12 @@ export default function GeneratePage() {
|
||||
const { style: projectStyle, loadProject } = useProjectStore()
|
||||
const {
|
||||
status,
|
||||
stage,
|
||||
progress,
|
||||
taskId,
|
||||
statusText,
|
||||
retryCount,
|
||||
rejectReason,
|
||||
submit,
|
||||
reset: resetGeneration,
|
||||
} = useGenerationStore()
|
||||
@@ -83,11 +86,11 @@ export default function GeneratePage() {
|
||||
) : (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
|
||||
<ProgressBar
|
||||
stage={null}
|
||||
stage={stage}
|
||||
progress={progress}
|
||||
status={status}
|
||||
retryCount={0}
|
||||
rejectReason={null}
|
||||
retryCount={retryCount}
|
||||
rejectReason={rejectReason}
|
||||
/>
|
||||
|
||||
{status === 'running' && (
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { create } from 'zustand'
|
||||
import type { Asset, GenerateRequest } from '../api/types'
|
||||
import type { Asset, GenerateRequest, PipelineStage } from '../api/types'
|
||||
import { submitGenerate, getTask, getAssets } from '../api/generate'
|
||||
|
||||
type Status = 'idle' | 'submitting' | 'running' | 'completed' | 'failed'
|
||||
@@ -7,9 +7,12 @@ type Status = 'idle' | 'submitting' | 'running' | 'completed' | 'failed'
|
||||
interface GenerationState {
|
||||
taskId: string | null
|
||||
projectId: string | null
|
||||
stage: PipelineStage | null
|
||||
progress: number
|
||||
status: Status
|
||||
statusText: string
|
||||
retryCount: number
|
||||
rejectReason: string | null
|
||||
assets: Asset[]
|
||||
error: string | null
|
||||
submit: (req: GenerateRequest) => Promise<void>
|
||||
@@ -25,18 +28,21 @@ function stopPolling() {
|
||||
}
|
||||
}
|
||||
|
||||
export const useGenerationStore = create<GenerationState>((set, get) => ({
|
||||
export const useGenerationStore = create<GenerationState>((set) => ({
|
||||
taskId: null,
|
||||
projectId: null,
|
||||
stage: null,
|
||||
progress: 0,
|
||||
status: 'idle',
|
||||
statusText: '',
|
||||
retryCount: 0,
|
||||
rejectReason: null,
|
||||
assets: [],
|
||||
error: null,
|
||||
|
||||
submit: async (req) => {
|
||||
stopPolling()
|
||||
set({ status: 'submitting', error: null, statusText: '提交中...' })
|
||||
set({ status: 'submitting', error: null, statusText: '提交中...', stage: null })
|
||||
try {
|
||||
const { taskId } = await submitGenerate(req)
|
||||
|
||||
@@ -44,24 +50,26 @@ export const useGenerationStore = create<GenerationState>((set, get) => ({
|
||||
taskId,
|
||||
projectId: req.projectId,
|
||||
status: 'running',
|
||||
progress: 10,
|
||||
progress: 5,
|
||||
stage: 'prompt_builder',
|
||||
statusText: '任务已提交,等待生成...',
|
||||
})
|
||||
|
||||
// 开始轮询进度
|
||||
pollTimer = setInterval(async () => {
|
||||
try {
|
||||
const task = await getTask(taskId)
|
||||
|
||||
set({
|
||||
progress: task.progress ?? get().progress,
|
||||
set((s) => ({
|
||||
stage: task.stage ?? s.stage,
|
||||
progress: task.progress ?? s.progress,
|
||||
retryCount: task.retryCount ?? s.retryCount,
|
||||
statusText:
|
||||
task.status === 'running'
|
||||
? '生成中...'
|
||||
? stageLabel(task.stage)
|
||||
: task.status === 'pending'
|
||||
? '排队中...'
|
||||
: task.status,
|
||||
})
|
||||
}))
|
||||
|
||||
if (task.status === 'completed') {
|
||||
stopPolling()
|
||||
@@ -71,6 +79,7 @@ export const useGenerationStore = create<GenerationState>((set, get) => ({
|
||||
set({
|
||||
status: 'completed',
|
||||
progress: 100,
|
||||
stage: 'format_adapter',
|
||||
statusText: '生成完成',
|
||||
assets,
|
||||
})
|
||||
@@ -85,7 +94,7 @@ export const useGenerationStore = create<GenerationState>((set, get) => ({
|
||||
} catch {
|
||||
// 网络错误不中断轮询
|
||||
}
|
||||
}, 2000)
|
||||
}, 1500)
|
||||
} catch (err) {
|
||||
stopPolling()
|
||||
set({ status: 'failed', error: (err as Error).message, statusText: '提交失败' })
|
||||
@@ -97,11 +106,24 @@ export const useGenerationStore = create<GenerationState>((set, get) => ({
|
||||
set({
|
||||
taskId: null,
|
||||
projectId: null,
|
||||
stage: null,
|
||||
progress: 0,
|
||||
status: 'idle',
|
||||
statusText: '',
|
||||
retryCount: 0,
|
||||
rejectReason: null,
|
||||
assets: [],
|
||||
error: null,
|
||||
})
|
||||
},
|
||||
}))
|
||||
|
||||
function stageLabel(stage?: string): string {
|
||||
switch (stage) {
|
||||
case 'prompt_builder': return '优化提示词...'
|
||||
case 'asset_generator': return '生成素材中...'
|
||||
case 'quality_supervisor': return '质检中...'
|
||||
case 'format_adapter': return '格式转换中...'
|
||||
default: return '生成中...'
|
||||
}
|
||||
}
|
||||
|
||||
@@ -14,6 +14,10 @@ export default defineConfig({
|
||||
target: 'http://localhost:8080',
|
||||
changeOrigin: true,
|
||||
},
|
||||
'/generation': {
|
||||
target: 'http://localhost:8080',
|
||||
changeOrigin: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user