feat: pipeline Sage前端桥接模块
- 通过HTTP调用Hermes Pipeline API - 产线列表/详情/提交/节点查看 - CSS+JS前端样式
This commit is contained in:
parent
5cc987efc0
commit
e75e6f77e1
4
.gitignore
vendored
Normal file
4
.gitignore
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
__pycache__/
|
||||
*.pyc
|
||||
*.egg-info/
|
||||
build/
|
||||
6
pipeline/__init__.py
Normal file
6
pipeline/__init__.py
Normal file
@ -0,0 +1,6 @@
|
||||
"""Pipeline module - Sage frontend for Hermes pipeline backend"""
|
||||
|
||||
from .init import (
|
||||
load_pipeline,
|
||||
get_pipeline_config,
|
||||
)
|
||||
87
pipeline/init.py
Normal file
87
pipeline/init.py
Normal file
@ -0,0 +1,87 @@
|
||||
"""Pipeline module initialization - bridges Sage frontend to Hermes pipeline API"""
|
||||
|
||||
import aiohttp
|
||||
import json
|
||||
from ahserver.serverenv import ServerEnv
|
||||
|
||||
MODULE_NAME = "pipeline"
|
||||
MODULE_VERSION = "1.0.0"
|
||||
|
||||
# Hermes Pipeline API base URL (configurable)
|
||||
PIPELINE_API_BASE = "https://token.opencomputing.cn/pipeline/v1"
|
||||
|
||||
|
||||
async def _hermes_request(method, path, data=None, timeout=120):
|
||||
"""Generic HTTP request to Hermes pipeline API"""
|
||||
url = f"{PIPELINE_API_BASE}{path}"
|
||||
async with aiohttp.ClientSession() as session:
|
||||
kwargs = {"timeout": aiohttp.ClientTimeout(total=timeout)}
|
||||
if method == "GET":
|
||||
async with session.get(url, **kwargs) as resp:
|
||||
return await resp.json()
|
||||
elif method == "POST":
|
||||
async with session.post(url, json=data, **kwargs) as resp:
|
||||
return await resp.json()
|
||||
elif method == "PUT":
|
||||
async with session.put(url, json=data, **kwargs) as resp:
|
||||
return await resp.json()
|
||||
return {"status": "error", "message": f"Unknown method: {method}"}
|
||||
|
||||
|
||||
async def hermes_pipeline_list(user_id):
|
||||
"""Get all pipelines for a user"""
|
||||
return await _hermes_request("GET", f"/tasks?user_id={user_id}")
|
||||
|
||||
|
||||
async def hermes_pipeline_detail(pipeline_id):
|
||||
"""Get pipeline detail with node tree"""
|
||||
return await _hermes_request("GET", f"/task/{pipeline_id}")
|
||||
|
||||
|
||||
async def hermes_pipeline_submit(data):
|
||||
"""Submit a new pipeline task"""
|
||||
return await _hermes_request("POST", "/task/submit", data, timeout=30)
|
||||
|
||||
|
||||
async def hermes_pipeline_node(pipeline_id, step, version=None):
|
||||
"""Get a specific node's input and output"""
|
||||
path = f"/task/{pipeline_id}/node/{step}"
|
||||
if version:
|
||||
path += f"?version={version}"
|
||||
return await _hermes_request("GET", path)
|
||||
|
||||
|
||||
async def hermes_pipeline_modify(pipeline_id, updates, rerun_from="node"):
|
||||
"""Modify node artifacts and rerun pipeline.
|
||||
|
||||
rerun_from:
|
||||
- 'node': rerun from the modified node itself (input changed)
|
||||
- 'next': rerun from the node after the modified one (output changed)
|
||||
"""
|
||||
data = {
|
||||
"pipeline_id": pipeline_id,
|
||||
"updates": updates,
|
||||
"rerun_from": rerun_from,
|
||||
}
|
||||
return await _hermes_request("POST", "/task/update", data, timeout=60)
|
||||
|
||||
|
||||
def get_pipeline_config():
|
||||
"""Return pipeline module configuration"""
|
||||
return {
|
||||
"api_base": PIPELINE_API_BASE,
|
||||
"module_name": MODULE_NAME,
|
||||
"version": MODULE_VERSION,
|
||||
}
|
||||
|
||||
|
||||
def load_pipeline():
|
||||
"""Register all pipeline functions with ServerEnv"""
|
||||
env = ServerEnv()
|
||||
env.hermes_pipeline_list = hermes_pipeline_list
|
||||
env.hermes_pipeline_detail = hermes_pipeline_detail
|
||||
env.hermes_pipeline_submit = hermes_pipeline_submit
|
||||
env.hermes_pipeline_node = hermes_pipeline_node
|
||||
env.hermes_pipeline_modify = hermes_pipeline_modify
|
||||
env.get_pipeline_config = get_pipeline_config
|
||||
return True
|
||||
13
wwwroot/api/pipeline_detail.dspy
Normal file
13
wwwroot/api/pipeline_detail.dspy
Normal file
@ -0,0 +1,13 @@
|
||||
user_id = await get_user()
|
||||
if not user_id:
|
||||
return json.dumps({"status": "error", "message": "未登录"}, ensure_ascii=False)
|
||||
|
||||
pipeline_id = params_kw.get('pipeline_id', '')
|
||||
if not pipeline_id:
|
||||
return json.dumps({"status": "error", "message": "缺少pipeline_id"}, ensure_ascii=False)
|
||||
|
||||
try:
|
||||
result = await hermes_pipeline_detail(pipeline_id)
|
||||
return json.dumps(result, ensure_ascii=False)
|
||||
except Exception as e:
|
||||
return json.dumps({"status": "error", "message": str(e)}, ensure_ascii=False)
|
||||
9
wwwroot/api/pipeline_list.dspy
Normal file
9
wwwroot/api/pipeline_list.dspy
Normal file
@ -0,0 +1,9 @@
|
||||
user_id = await get_user()
|
||||
if not user_id:
|
||||
return json.dumps({"status": "error", "message": "未登录"}, ensure_ascii=False)
|
||||
|
||||
try:
|
||||
result = await hermes_pipeline_list(user_id)
|
||||
return json.dumps(result, ensure_ascii=False)
|
||||
except Exception as e:
|
||||
return json.dumps({"status": "error", "message": str(e)}, ensure_ascii=False)
|
||||
25
wwwroot/api/pipeline_modify.dspy
Normal file
25
wwwroot/api/pipeline_modify.dspy
Normal file
@ -0,0 +1,25 @@
|
||||
user_id = await get_user()
|
||||
if not user_id:
|
||||
return json.dumps({"status": "error", "message": "未登录"}, ensure_ascii=False)
|
||||
|
||||
pipeline_id = params_kw.get('pipeline_id', '')
|
||||
step = params_kw.get('step', '')
|
||||
modify_type = params_kw.get('modify_type', 'input') # 'input' or 'output'
|
||||
content = params_kw.get('content', '')
|
||||
|
||||
if not pipeline_id or not step or not content:
|
||||
return json.dumps({"status": "error", "message": "缺少必要参数"}, ensure_ascii=False)
|
||||
|
||||
try:
|
||||
content_data = json.loads(content)
|
||||
except Exception:
|
||||
content_data = content
|
||||
|
||||
updates = {step: {"content": content_data}}
|
||||
rerun_from = "node" if modify_type == "input" else "next"
|
||||
|
||||
try:
|
||||
result = await hermes_pipeline_modify(pipeline_id, updates, rerun_from)
|
||||
return json.dumps(result, ensure_ascii=False)
|
||||
except Exception as e:
|
||||
return json.dumps({"status": "error", "message": str(e)}, ensure_ascii=False)
|
||||
16
wwwroot/api/pipeline_node.dspy
Normal file
16
wwwroot/api/pipeline_node.dspy
Normal file
@ -0,0 +1,16 @@
|
||||
user_id = await get_user()
|
||||
if not user_id:
|
||||
return json.dumps({"status": "error", "message": "未登录"}, ensure_ascii=False)
|
||||
|
||||
pipeline_id = params_kw.get('pipeline_id', '')
|
||||
step = params_kw.get('step', '')
|
||||
version = params_kw.get('version', None)
|
||||
|
||||
if not pipeline_id or not step:
|
||||
return json.dumps({"status": "error", "message": "缺少pipeline_id或step"}, ensure_ascii=False)
|
||||
|
||||
try:
|
||||
result = await hermes_pipeline_node(pipeline_id, step, version)
|
||||
return json.dumps(result, ensure_ascii=False)
|
||||
except Exception as e:
|
||||
return json.dumps({"status": "error", "message": str(e)}, ensure_ascii=False)
|
||||
29
wwwroot/api/pipeline_submit.dspy
Normal file
29
wwwroot/api/pipeline_submit.dspy
Normal file
@ -0,0 +1,29 @@
|
||||
user_id = await get_user()
|
||||
if not user_id:
|
||||
return json.dumps({"status": "error", "message": "未登录"}, ensure_ascii=False)
|
||||
|
||||
mode = params_kw.get('mode', '')
|
||||
title = params_kw.get('title', '')
|
||||
lyrics = params_kw.get('lyrics', '')
|
||||
|
||||
if not mode:
|
||||
return json.dumps({"status": "error", "message": "缺少mode参数"}, ensure_ascii=False)
|
||||
|
||||
submit_data = {
|
||||
"mode": mode,
|
||||
"title": title,
|
||||
"lyrics": lyrics,
|
||||
"user_id": user_id,
|
||||
}
|
||||
|
||||
# 收集其他可选参数
|
||||
for key in ['input_audio', 'input_video', 'outline', 'lyricist', 'composer', 'scene']:
|
||||
val = params_kw.get(key, '')
|
||||
if val:
|
||||
submit_data[key] = val
|
||||
|
||||
try:
|
||||
result = await hermes_pipeline_submit(submit_data)
|
||||
return json.dumps(result, ensure_ascii=False)
|
||||
except Exception as e:
|
||||
return json.dumps({"status": "error", "message": str(e)}, ensure_ascii=False)
|
||||
122
wwwroot/pipeline.css
Normal file
122
wwwroot/pipeline.css
Normal file
@ -0,0 +1,122 @@
|
||||
/* Pipeline Module Styles */
|
||||
|
||||
.pipeline-container { padding: 20px; height: 100%; overflow-y: auto; }
|
||||
|
||||
.pipeline-header {
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid #e0e0e0;
|
||||
}
|
||||
.pipeline-header h2 { margin: 0; font-size: 22px; color: #333; }
|
||||
|
||||
.pipeline-btn {
|
||||
padding: 8px 18px; border: none; border-radius: 6px; cursor: pointer;
|
||||
font-size: 14px; font-weight: 500; transition: all 0.2s;
|
||||
}
|
||||
.pipeline-btn-primary { background: #4a90d9; color: #fff; }
|
||||
.pipeline-btn-primary:hover { background: #357abd; }
|
||||
.pipeline-btn-secondary { background: #e8e8e8; color: #333; }
|
||||
.pipeline-btn-secondary:hover { background: #d5d5d5; }
|
||||
.pipeline-btn-danger { background: #e74c3c; color: #fff; }
|
||||
.pipeline-btn-danger:hover { background: #c0392b; }
|
||||
.pipeline-btn-sm { padding: 4px 12px; font-size: 12px; }
|
||||
|
||||
.pipeline-task-list { list-style: none; padding: 0; margin: 0; }
|
||||
.pipeline-task-item {
|
||||
display: flex; align-items: center; padding: 14px 16px;
|
||||
border: 1px solid #e0e0e0; border-radius: 8px; margin-bottom: 10px;
|
||||
cursor: pointer; transition: all 0.2s; background: #fff;
|
||||
}
|
||||
.pipeline-task-item:hover { border-color: #4a90d9; box-shadow: 0 2px 8px rgba(74,144,217,0.12); }
|
||||
.pipeline-task-id { font-family: monospace; font-size: 13px; color: #4a90d9; font-weight: 600; min-width: 180px; }
|
||||
.pipeline-task-title { flex: 1; font-size: 15px; color: #333; margin: 0 16px; }
|
||||
.pipeline-task-meta { font-size: 12px; color: #888; display: flex; gap: 16px; align-items: center; }
|
||||
|
||||
.pipeline-status {
|
||||
padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600;
|
||||
display: inline-block;
|
||||
}
|
||||
.status-completed { background: #d4edda; color: #155724; }
|
||||
.status-running { background: #fff3cd; color: #856404; }
|
||||
.status-failed { background: #f8d7da; color: #721c24; }
|
||||
.status-submitted { background: #d1ecf1; color: #0c5460; }
|
||||
|
||||
/* Task Detail */
|
||||
.pipeline-detail-header {
|
||||
display: flex; align-items: center; gap: 16px; margin-bottom: 20px;
|
||||
padding-bottom: 12px; border-bottom: 2px solid #e0e0e0;
|
||||
}
|
||||
.pipeline-back-btn {
|
||||
background: none; border: 1px solid #ccc; border-radius: 6px;
|
||||
padding: 6px 14px; cursor: pointer; font-size: 13px; color: #666;
|
||||
}
|
||||
.pipeline-back-btn:hover { background: #f0f0f0; }
|
||||
.pipeline-detail-title { font-size: 20px; font-weight: 600; color: #333; }
|
||||
.pipeline-detail-meta { font-size: 13px; color: #888; margin-top: 4px; }
|
||||
|
||||
/* Node Tree */
|
||||
.pipeline-node-tree { padding: 0; }
|
||||
.pipeline-node-card {
|
||||
border: 1px solid #e0e0e0; border-radius: 8px; margin-bottom: 8px;
|
||||
overflow: hidden; background: #fff; position: relative;
|
||||
}
|
||||
.pipeline-node-card::before {
|
||||
content: ''; position: absolute; left: 20px; top: -8px;
|
||||
width: 2px; height: 8px; background: #d0d0d0;
|
||||
}
|
||||
.pipeline-node-card:first-child::before { display: none; }
|
||||
.pipeline-node-header {
|
||||
display: flex; align-items: center; padding: 12px 16px;
|
||||
cursor: pointer; transition: background 0.15s;
|
||||
}
|
||||
.pipeline-node-header:hover { background: #f8f9fa; }
|
||||
.pipeline-node-icon { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; margin-right: 12px; flex-shrink: 0; }
|
||||
.node-icon-completed { background: #d4edda; color: #155724; }
|
||||
.node-icon-running { background: #fff3cd; color: #856404; }
|
||||
.node-icon-pending { background: #e8e8e8; color: #888; }
|
||||
.node-icon-failed { background: #f8d7da; color: #721c24; }
|
||||
.pipeline-node-name { flex: 1; font-size: 14px; font-weight: 500; color: #333; }
|
||||
.pipeline-node-version { font-size: 11px; color: #888; background: #f0f0f0; padding: 2px 8px; border-radius: 10px; margin-left: 8px; }
|
||||
|
||||
.pipeline-node-body { padding: 0 16px 16px; display: none; border-top: 1px solid #f0f0f0; }
|
||||
.pipeline-node-body.expanded { display: block; padding-top: 12px; }
|
||||
|
||||
.pipeline-io-section { margin-bottom: 12px; }
|
||||
.pipeline-io-label { font-size: 12px; font-weight: 600; color: #666; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
|
||||
.pipeline-io-content {
|
||||
background: #f8f9fa; border: 1px solid #e8e8e8; border-radius: 6px;
|
||||
padding: 10px; font-family: monospace; font-size: 12px;
|
||||
max-height: 200px; overflow-y: auto; white-space: pre-wrap; word-break: break-all;
|
||||
}
|
||||
.pipeline-io-actions { display: flex; gap: 8px; margin-top: 8px; }
|
||||
|
||||
/* Create Form */
|
||||
.pipeline-form { max-width: 600px; }
|
||||
.pipeline-form-group { margin-bottom: 18px; }
|
||||
.pipeline-form-label { display: block; font-size: 13px; font-weight: 600; color: #555; margin-bottom: 6px; }
|
||||
.pipeline-form-input, .pipeline-form-select, .pipeline-form-textarea {
|
||||
width: 100%; padding: 10px 12px; border: 1px solid #d0d0d0;
|
||||
border-radius: 6px; font-size: 14px; box-sizing: border-box;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
.pipeline-form-input:focus, .pipeline-form-select:focus, .pipeline-form-textarea:focus {
|
||||
border-color: #4a90d9; outline: none; box-shadow: 0 0 0 3px rgba(74,144,217,0.1);
|
||||
}
|
||||
.pipeline-form-textarea { min-height: 150px; resize: vertical; font-family: inherit; }
|
||||
|
||||
/* Edit Modal */
|
||||
.pipeline-edit-section {
|
||||
background: #f8f9fa; border: 1px solid #e0e0e0; border-radius: 8px;
|
||||
padding: 16px; margin-top: 12px;
|
||||
}
|
||||
.pipeline-edit-textarea {
|
||||
width: 100%; min-height: 200px; padding: 10px; border: 1px solid #d0d0d0;
|
||||
border-radius: 6px; font-family: monospace; font-size: 12px;
|
||||
resize: vertical; box-sizing: border-box;
|
||||
}
|
||||
.pipeline-edit-type { display: flex; gap: 12px; margin-bottom: 12px; }
|
||||
.pipeline-edit-type label { display: flex; align-items: center; gap: 4px; font-size: 13px; cursor: pointer; }
|
||||
.pipeline-edit-actions { display: flex; gap: 8px; margin-top: 12px; }
|
||||
|
||||
.pipeline-empty { text-align: center; padding: 60px 20px; color: #aaa; }
|
||||
.pipeline-loading { text-align: center; padding: 40px; color: #888; font-size: 14px; }
|
||||
.pipeline-error { background: #fff3f3; border: 1px solid #fcc; border-radius: 6px; padding: 12px; color: #c00; font-size: 13px; margin: 10px 0; }
|
||||
492
wwwroot/pipeline.js
Normal file
492
wwwroot/pipeline.js
Normal file
@ -0,0 +1,492 @@
|
||||
/* Pipeline Module - Main JavaScript */
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
var API_BASE = ''; // Will be set on init
|
||||
var currentView = 'list';
|
||||
var currentPipelineId = null;
|
||||
|
||||
// === Initialization ===
|
||||
|
||||
function init() {
|
||||
// Detect API base from current URL
|
||||
var base = window.location.pathname.replace(/\/pipeline\/index\.ui.*$/, '/pipeline');
|
||||
API_BASE = base;
|
||||
showListView();
|
||||
}
|
||||
|
||||
// === API Helpers ===
|
||||
|
||||
function apiGet(path, callback) {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', API_BASE + path, true);
|
||||
xhr.onreadystatechange = function() {
|
||||
if (xhr.readyState === 4) {
|
||||
try {
|
||||
var data = JSON.parse(xhr.responseText);
|
||||
callback(null, data);
|
||||
} catch(e) {
|
||||
callback('解析响应失败', null);
|
||||
}
|
||||
}
|
||||
};
|
||||
xhr.onerror = function() { callback('网络请求失败', null); };
|
||||
xhr.send();
|
||||
}
|
||||
|
||||
function apiPost(path, body, callback) {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('POST', API_BASE + path, true);
|
||||
xhr.setRequestHeader('Content-Type', 'application/json');
|
||||
xhr.onreadystatechange = function() {
|
||||
if (xhr.readyState === 4) {
|
||||
try {
|
||||
var data = JSON.parse(xhr.responseText);
|
||||
callback(null, data);
|
||||
} catch(e) {
|
||||
callback('解析响应失败', null);
|
||||
}
|
||||
}
|
||||
};
|
||||
xhr.onerror = function() { callback('网络请求失败', null); };
|
||||
xhr.send(JSON.stringify(body));
|
||||
}
|
||||
|
||||
// === View Rendering ===
|
||||
|
||||
function getContainer() {
|
||||
return document.getElementById('pipeline_content');
|
||||
}
|
||||
|
||||
function showListView() {
|
||||
currentView = 'list';
|
||||
currentPipelineId = null;
|
||||
var c = getContainer();
|
||||
if (!c) return;
|
||||
c.innerHTML = '<div class="pipeline-container">' +
|
||||
'<div class="pipeline-header">' +
|
||||
'<h2>产线任务</h2>' +
|
||||
'<button class="pipeline-btn pipeline-btn-primary" onclick="PipelineUI.showCreateView()">+ 新建任务</button>' +
|
||||
'</div>' +
|
||||
'<div id="pipeline_list_body"><div class="pipeline-loading">加载中...</div></div>' +
|
||||
'</div>';
|
||||
loadTaskList();
|
||||
}
|
||||
|
||||
function loadTaskList() {
|
||||
apiGet('/api/pipeline_list.dspy', function(err, data) {
|
||||
var el = document.getElementById('pipeline_list_body');
|
||||
if (!el) return;
|
||||
if (err) { el.innerHTML = '<div class="pipeline-error">' + err + '</div>'; return; }
|
||||
if (data.status === 'error') { el.innerHTML = '<div class="pipeline-error">' + (data.message || '加载失败') + '</div>'; return; }
|
||||
|
||||
var tasks = data.tasks || data.data || [];
|
||||
if (!tasks.length) {
|
||||
el.innerHTML = '<div class="pipeline-empty">暂无产线任务<br><br><button class="pipeline-btn pipeline-btn-primary" onclick="PipelineUI.showCreateView()">创建第一个任务</button></div>';
|
||||
return;
|
||||
}
|
||||
var html = '<ul class="pipeline-task-list">';
|
||||
for (var i = 0; i < tasks.length; i++) {
|
||||
var t = tasks[i];
|
||||
var st = t.state || 'unknown';
|
||||
var stClass = 'status-' + st;
|
||||
var stText = {completed:'已完成', running:'运行中', failed:'失败', submitted:'已提交', processing:'处理中'}[st] || st;
|
||||
html += '<li class="pipeline-task-item" onclick="PipelineUI.showDetailView(\'' + t.pipeline_id + '\')">' +
|
||||
'<span class="pipeline-task-id">' + esc(t.pipeline_id) + '</span>' +
|
||||
'<span class="pipeline-task-title">' + esc(t.title || t.mode || '-') + '</span>' +
|
||||
'<span class="pipeline-task-meta">' +
|
||||
'<span>' + esc(t.mode || '') + '</span>' +
|
||||
'<span class="pipeline-status ' + stClass + '">' + stText + '</span>' +
|
||||
'<span>v' + (t.current_version || 1) + '</span>' +
|
||||
'</span></li>';
|
||||
}
|
||||
html += '</ul>';
|
||||
el.innerHTML = html;
|
||||
});
|
||||
}
|
||||
|
||||
function showCreateView() {
|
||||
currentView = 'create';
|
||||
var c = getContainer();
|
||||
if (!c) return;
|
||||
c.innerHTML = '<div class="pipeline-container">' +
|
||||
'<div class="pipeline-detail-header">' +
|
||||
'<button class="pipeline-back-btn" onclick="PipelineUI.showListView()">← 返回</button>' +
|
||||
'<span class="pipeline-detail-title">新建产线任务</span></div>' +
|
||||
'<div class="pipeline-form" id="pipeline_create_form">' +
|
||||
|
||||
'<div class="pipeline-form-group">' +
|
||||
'<label class="pipeline-form-label">产线模式</label>' +
|
||||
'<select class="pipeline-form-select" id="pf_mode" onchange="PipelineUI.onModeChange()">' +
|
||||
'<option value="audio_lyrics">音频+歌词 (Mode A)</option>' +
|
||||
'<option value="video_lyrics">视频+歌词 (Mode B)</option>' +
|
||||
'<option value="lyrics_only" selected>仅歌词/大纲 (Mode C)</option>' +
|
||||
'</select></div>' +
|
||||
|
||||
'<div class="pipeline-form-group" id="pf_audio_group" style="display:none">' +
|
||||
'<label class="pipeline-form-label">音频文件路径</label>' +
|
||||
'<input class="pipeline-form-input" id="pf_audio" placeholder="/path/to/audio.mp3" /></div>' +
|
||||
|
||||
'<div class="pipeline-form-group" id="pf_video_group" style="display:none">' +
|
||||
'<label class="pipeline-form-label">视频文件路径</label>' +
|
||||
'<input class="pipeline-form-input" id="pf_video" placeholder="/path/to/video.mp4" /></div>' +
|
||||
|
||||
'<div class="pipeline-form-group">' +
|
||||
'<label class="pipeline-form-label">歌曲名称</label>' +
|
||||
'<input class="pipeline-form-input" id="pf_title" placeholder="输入歌曲名称" /></div>' +
|
||||
|
||||
'<div class="pipeline-form-group" id="pf_lyrics_group">' +
|
||||
'<label class="pipeline-form-label">歌词</label>' +
|
||||
'<textarea class="pipeline-form-textarea" id="pf_lyrics" placeholder="输入歌词文本，或留空由AI生成"></textarea></div>' +
|
||||
|
||||
'<div class="pipeline-form-group">' +
|
||||
'<label class="pipeline-form-label">词作者</label>' +
|
||||
'<input class="pipeline-form-input" id="pf_lyricist" placeholder="可选" /></div>' +
|
||||
|
||||
'<div class="pipeline-form-group">' +
|
||||
'<label class="pipeline-form-label">曲作者</label>' +
|
||||
'<input class="pipeline-form-input" id="pf_composer" placeholder="可选" /></div>' +
|
||||
|
||||
'<div style="margin-top:24px">' +
|
||||
'<button class="pipeline-btn pipeline-btn-primary" onclick="PipelineUI.submitTask()" id="pf_submit_btn">提交任务</button>' +
|
||||
'<button class="pipeline-btn pipeline-btn-secondary" onclick="PipelineUI.showListView()" style="margin-left:8px">取消</button>' +
|
||||
'</div></div>' +
|
||||
'<div id="pipeline_create_msg"></div></div>';
|
||||
}
|
||||
|
||||
function onModeChange() {
|
||||
var mode = document.getElementById('pf_mode').value;
|
||||
var audioG = document.getElementById('pf_audio_group');
|
||||
var videoG = document.getElementById('pf_video_group');
|
||||
var lyricsG = document.getElementById('pf_lyrics_group');
|
||||
if (audioG) audioG.style.display = (mode === 'audio_lyrics') ? 'block' : 'none';
|
||||
if (videoG) videoG.style.display = (mode === 'video_lyrics') ? 'block' : 'none';
|
||||
if (lyricsG) lyricsG.style.display = (mode === 'video_lyrics') ? 'none' : 'block';
|
||||
}
|
||||
|
||||
function submitTask() {
|
||||
var mode = document.getElementById('pf_mode').value;
|
||||
var title = document.getElementById('pf_title').value;
|
||||
var lyrics = document.getElementById('pf_lyrics') ? document.getElementById('pf_lyrics').value : '';
|
||||
var lyricist = document.getElementById('pf_lyricist').value;
|
||||
var composer = document.getElementById('pf_composer').value;
|
||||
|
||||
if (!title) { alert('请输入歌曲名称'); return; }
|
||||
|
||||
var body = { mode: mode, title: title, lyrics: lyrics, lyricist: lyricist, composer: composer };
|
||||
|
||||
if (mode === 'audio_lyrics') {
|
||||
body.input_audio = document.getElementById('pf_audio').value;
|
||||
if (!body.input_audio) { alert('请输入音频文件路径'); return; }
|
||||
} else if (mode === 'video_lyrics') {
|
||||
body.input_video = document.getElementById('pf_video').value;
|
||||
if (!body.input_video) { alert('请输入视频文件路径'); return; }
|
||||
}
|
||||
|
||||
var btn = document.getElementById('pf_submit_btn');
|
||||
if (btn) { btn.disabled = true; btn.textContent = '提交中...'; }
|
||||
|
||||
apiPost('/api/pipeline_submit.dspy', body, function(err, data) {
|
||||
if (btn) { btn.disabled = false; btn.textContent = '提交任务'; }
|
||||
if (err) { alert('提交失败: ' + err); return; }
|
||||
if (data.status === 'error') { alert('提交失败: ' + (data.message || '未知错误')); return; }
|
||||
|
||||
var pid = data.pipeline_id;
|
||||
if (pid) {
|
||||
showDetailView(pid);
|
||||
} else {
|
||||
showListView();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// === Task Detail View ===
|
||||
|
||||
function showDetailView(pipelineId) {
|
||||
currentView = 'detail';
|
||||
currentPipelineId = pipelineId;
|
||||
var c = getContainer();
|
||||
if (!c) return;
|
||||
c.innerHTML = '<div class="pipeline-container">' +
|
||||
'<div class="pipeline-detail-header">' +
|
||||
'<button class="pipeline-back-btn" onclick="PipelineUI.showListView()">← 返回</button>' +
|
||||
'<div><div class="pipeline-detail-title" id="pd_title">加载中...</div>' +
|
||||
'<div class="pipeline-detail-meta" id="pd_meta"></div></div></div>' +
|
||||
'<div id="pd_nodes"><div class="pipeline-loading">加载任务节点...</div></div>' +
|
||||
'</div>';
|
||||
loadTaskDetail(pipelineId);
|
||||
}
|
||||
|
||||
function loadTaskDetail(pid) {
|
||||
apiGet('/api/pipeline_detail.dspy?pipeline_id=' + encodeURIComponent(pid), function(err, data) {
|
||||
if (err) {
|
||||
document.getElementById('pd_nodes').innerHTML = '<div class="pipeline-error">' + err + '</div>';
|
||||
return;
|
||||
}
|
||||
if (data.status === 'error') {
|
||||
document.getElementById('pd_nodes').innerHTML = '<div class="pipeline-error">' + (data.message || '加载失败') + '</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
var titleEl = document.getElementById('pd_title');
|
||||
var metaEl = document.getElementById('pd_meta');
|
||||
var nodesEl = document.getElementById('pd_nodes');
|
||||
|
||||
if (titleEl) titleEl.textContent = data.title || pid;
|
||||
if (metaEl) {
|
||||
var st = data.state || '';
|
||||
var stText = {completed:'已完成', running:'运行中', failed:'失败', submitted:'已提交'}[st] || st;
|
||||
metaEl.innerHTML = 'ID: ' + esc(pid) + ' | ' +
|
||||
esc(data.mode || '') + ' | ' +
|
||||
'<span class="pipeline-status status-' + st + '">' + stText + '</span>' +
|
||||
' | 版本 v' + (data.current_version || 1);
|
||||
}
|
||||
|
||||
renderNodeTree(nodesEl, data);
|
||||
});
|
||||
}
|
||||
|
||||
function renderNodeTree(container, data) {
|
||||
if (!container) return;
|
||||
var steps = data.steps || {};
|
||||
var artifacts = data.artifacts || {};
|
||||
var versions = data.versions || {};
|
||||
|
||||
// Sort steps by order
|
||||
var stepList = [];
|
||||
for (var name in steps) {
|
||||
if (steps.hasOwnProperty(name)) {
|
||||
var s = steps[name];
|
||||
stepList.push({name: name, order: s.order || 0, version: s.version || 1, deps: s.deps || [], state: s.state || ''});
|
||||
}
|
||||
}
|
||||
stepList.sort(function(a, b) { return a.order - b.order; });
|
||||
|
||||
if (!stepList.length) {
|
||||
container.innerHTML = '<div class="pipeline-empty">无步骤数据</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
var html = '<div class="pipeline-node-tree">';
|
||||
for (var i = 0; i < stepList.length; i++) {
|
||||
var step = stepList[i];
|
||||
var st = step.state || 'pending';
|
||||
var stText = {completed:'✓', running:'⟳', pending:'○', failed:'✗'}[st] || '?';
|
||||
var iconClass = 'node-icon-' + st;
|
||||
var nameCN = STEP_NAMES[step.name] || step.name;
|
||||
|
||||
// Find artifact for this step
|
||||
var artKey = '';
|
||||
for (var ak in artifacts) {
|
||||
if (artifacts.hasOwnProperty(ak) && artifacts[ak].step === step.name) {
|
||||
artKey = ak;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
html += '<div class="pipeline-node-card" id="node_' + step.name + '">' +
|
||||
'<div class="pipeline-node-header" onclick="PipelineUI.toggleNode(\'' + step.name + '\')">' +
|
||||
'<div class="pipeline-node-icon ' + iconClass + '">' + stText + '</div>' +
|
||||
'<span class="pipeline-node-name">' + esc(nameCN) + '</span>' +
|
||||
'<span class="pipeline-node-version">v' + step.version + '</span>' +
|
||||
'</div>' +
|
||||
'<div class="pipeline-node-body" id="node_body_' + step.name + '">';
|
||||
|
||||
if (st === 'completed') {
|
||||
html += '<div class="pipeline-io-section">' +
|
||||
'<div class="pipeline-io-label">输入 / 输出</div>' +
|
||||
'<div id="node_io_' + step.name + '" class="pipeline-io-content">点击加载...</div>' +
|
||||
'<div class="pipeline-io-actions">' +
|
||||
'<button class="pipeline-btn pipeline-btn-secondary pipeline-btn-sm" onclick="PipelineUI.loadNodeIO(\'' + step.name + '\')">刷新</button>' +
|
||||
'<button class="pipeline-btn pipeline-btn-primary pipeline-btn-sm" onclick="PipelineUI.showNodeEdit(\'' + step.name + '\', \'input\')">修改输入</button>' +
|
||||
'<button class="pipeline-btn pipeline-btn-primary pipeline-btn-sm" onclick="PipelineUI.showNodeEdit(\'' + step.name + '\', \'output\')">修改输出</button>' +
|
||||
'</div></div>';
|
||||
} else if (st === 'running') {
|
||||
html += '<div class="pipeline-loading">该节点正在运行中...</div>';
|
||||
} else if (st === 'failed') {
|
||||
html += '<div class="pipeline-error">该节点执行失败</div>';
|
||||
} else {
|
||||
html += '<div style="color:#aaa;font-size:13px">等待执行</div>';
|
||||
}
|
||||
|
||||
html += '</div></div>';
|
||||
}
|
||||
html += '</div>';
|
||||
container.innerHTML = html;
|
||||
|
||||
// Auto-expand failed or running node
|
||||
for (var j = 0; j < stepList.length; j++) {
|
||||
if (stepList[j].state === 'failed' || stepList[j].state === 'running') {
|
||||
toggleNode(stepList[j].name);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Step name Chinese mapping
|
||||
var STEP_NAMES = {
|
||||
'audio_preparing': '音频准备',
|
||||
'video_preparing': '视频准备',
|
||||
'demucs_separating': '人声分离',
|
||||
'lyric_generating': '歌词生成',
|
||||
'lyric_evaluating': '歌词评估',
|
||||
'music_generating': '音乐生成',
|
||||
'music_polling': '音乐轮询',
|
||||
'lyric_calibrating': '歌词校准',
|
||||
'subtitle_rendering': '字幕渲染',
|
||||
'subtitle_exporting': '字幕导出',
|
||||
'character_designing': '角色设计',
|
||||
'character_image_generating': '角色图生成',
|
||||
'storyboard_generating': '分镜剧本',
|
||||
'scene_video_generating': '分镜视频生成',
|
||||
'scene_video_evaluating': '分镜视频评估',
|
||||
'scene_video_concatenating': '分镜视频拼接',
|
||||
'ktv_synthesizing': 'KTV合成'
|
||||
};
|
||||
|
||||
function toggleNode(stepName) {
|
||||
var body = document.getElementById('node_body_' + stepName);
|
||||
if (!body) return;
|
||||
var isExpanded = body.classList.contains('expanded');
|
||||
body.classList.toggle('expanded');
|
||||
|
||||
// Load IO data on first expand
|
||||
if (!isExpanded) {
|
||||
var ioEl = document.getElementById('node_io_' + stepName);
|
||||
if (ioEl && ioEl.textContent === '点击加载...') {
|
||||
loadNodeIO(stepName);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function loadNodeIO(stepName) {
|
||||
var ioEl = document.getElementById('node_io_' + stepName);
|
||||
if (!ioEl) return;
|
||||
ioEl.textContent = '加载中...';
|
||||
|
||||
apiGet('/api/pipeline_node.dspy?pipeline_id=' + encodeURIComponent(currentPipelineId) + '&step=' + encodeURIComponent(stepName), function(err, data) {
|
||||
if (err) { ioEl.textContent = '加载失败: ' + err; return; }
|
||||
if (data.status === 'error') { ioEl.textContent = '错误: ' + (data.message || ''); return; }
|
||||
|
||||
var text = '';
|
||||
if (data.input) {
|
||||
text += '【输入】\n' + formatData(data.input) + '\n\n';
|
||||
}
|
||||
if (data.output) {
|
||||
text += '【输出】\n' + formatData(data.output);
|
||||
}
|
||||
if (!text) text = '(无数据)';
|
||||
ioEl.textContent = text;
|
||||
});
|
||||
}
|
||||
|
||||
// === Node Edit ===
|
||||
|
||||
function showNodeEdit(stepName, modifyType) {
|
||||
var nodeBody = document.getElementById('node_body_' + stepName);
|
||||
if (!nodeBody) return;
|
||||
|
||||
// Check if edit section already exists
|
||||
var existing = document.getElementById('node_edit_' + stepName);
|
||||
if (existing) { existing.remove(); return; }
|
||||
|
||||
var typeLabel = modifyType === 'input' ? '修改输入（从该节点重跑）' : '修改输出（从下一节点重跑）';
|
||||
|
||||
// Get current content
|
||||
var ioEl = document.getElementById('node_io_' + stepName);
|
||||
var currentContent = '';
|
||||
if (ioEl) {
|
||||
var text = ioEl.textContent;
|
||||
if (modifyType === 'input' && text.indexOf('【输入】') >= 0) {
|
||||
currentContent = text.substring(text.indexOf('【输入】') + 4, text.indexOf('【输出】') >= 0 ? text.indexOf('【输出】') : text.length).trim();
|
||||
} else if (modifyType === 'output' && text.indexOf('【输出】') >= 0) {
|
||||
currentContent = text.substring(text.indexOf('【输出】') + 4).trim();
|
||||
}
|
||||
}
|
||||
|
||||
var html = '<div class="pipeline-edit-section" id="node_edit_' + stepName + '">' +
|
||||
'<div class="pipeline-io-label">' + esc(typeLabel) + '</div>' +
|
||||
'<textarea class="pipeline-edit-textarea" id="node_edit_content_' + stepName + '">' + esc(currentContent) + '</textarea>' +
|
||||
'<input type="hidden" id="node_edit_type_' + stepName + '" value="' + modifyType + '" />' +
|
||||
'<div class="pipeline-edit-actions">' +
|
||||
'<button class="pipeline-btn pipeline-btn-primary pipeline-btn-sm" onclick="PipelineUI.submitNodeEdit(\'' + stepName + '\')" id="node_edit_btn_' + stepName + '">确认修改并重跑</button>' +
|
||||
'<button class="pipeline-btn pipeline-btn-secondary pipeline-btn-sm" onclick="document.getElementById(\'node_edit_' + stepName + '\').remove()">取消</button>' +
|
||||
'</div>' +
|
||||
'<div id="node_edit_msg_' + stepName + '"></div></div>';
|
||||
|
||||
nodeBody.insertAdjacentHTML('beforeend', html);
|
||||
}
|
||||
|
||||
function submitNodeEdit(stepName) {
|
||||
var content = document.getElementById('node_edit_content_' + stepName).value;
|
||||
var modifyType = document.getElementById('node_edit_type_' + stepName).value;
|
||||
var msgEl = document.getElementById('node_edit_msg_' + stepName);
|
||||
var btn = document.getElementById('node_edit_btn_' + stepName);
|
||||
|
||||
if (!content.trim()) { alert('内容不能为空'); return; }
|
||||
|
||||
if (btn) { btn.disabled = true; btn.textContent = '提交中...'; }
|
||||
if (msgEl) msgEl.innerHTML = '<div class="pipeline-loading">提交修改...</div>';
|
||||
|
||||
apiPost('/api/pipeline_modify.dspy', {
|
||||
pipeline_id: currentPipelineId,
|
||||
step: stepName,
|
||||
modify_type: modifyType,
|
||||
content: content
|
||||
}, function(err, data) {
|
||||
if (btn) { btn.disabled = false; btn.textContent = '确认修改并重跑'; }
|
||||
if (err) {
|
||||
if (msgEl) msgEl.innerHTML = '<div class="pipeline-error">' + err + '</div>';
|
||||
return;
|
||||
}
|
||||
if (data.status === 'error') {
|
||||
if (msgEl) msgEl.innerHTML = '<div class="pipeline-error">' + (data.message || '修改失败') + '</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
if (msgEl) msgEl.innerHTML = '<div style="color:green;font-size:13px;margin-top:8px">修改成功！' +
|
||||
(data.new_version ? ' 新版本: v' + data.new_version : '') +
|
||||
(data.rerun_steps ? ' 重跑步骤: ' + data.rerun_steps.join(', ') : '') +
|
||||
'</div>';
|
||||
|
||||
// Reload task detail after 2 seconds
|
||||
setTimeout(function() { loadTaskDetail(currentPipelineId); }, 2000);
|
||||
});
|
||||
}
|
||||
|
||||
// === Utilities ===
|
||||
|
||||
function formatData(obj) {
|
||||
if (typeof obj === 'string') return obj;
|
||||
try { return JSON.stringify(obj, null, 2); } catch(e) { return String(obj); }
|
||||
}
|
||||
|
||||
function esc(s) {
|
||||
if (!s) return '';
|
||||
var d = document.createElement('div');
|
||||
d.appendChild(document.createTextNode(s));
|
||||
return d.innerHTML;
|
||||
}
|
||||
|
||||
// === Expose Public API ===
|
||||
|
||||
window.PipelineUI = {
|
||||
init: init,
|
||||
showListView: showListView,
|
||||
showCreateView: showCreateView,
|
||||
showDetailView: showDetailView,
|
||||
submitTask: submitTask,
|
||||
onModeChange: onModeChange,
|
||||
toggleNode: toggleNode,
|
||||
loadNodeIO: loadNodeIO,
|
||||
showNodeEdit: showNodeEdit,
|
||||
submitNodeEdit: submitNodeEdit
|
||||
};
|
||||
|
||||
// Auto-init on DOM ready
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', init);
|
||||
} else {
|
||||
init();
|
||||
}
|
||||
|
||||
})();
|
||||
Loading…
x
Reference in New Issue
Block a user