diff --git a/web/src/lib/canvas/skill-drafting.ts b/web/src/lib/canvas/skill-drafting.ts new file mode 100644 index 000000000..9d625ebe6 --- /dev/null +++ b/web/src/lib/canvas/skill-drafting.ts @@ -0,0 +1,67 @@ +import { buildGenerationConfig } from "@/lib/canvas/canvas-project-generation"; +import { runBackendGenerationTask } from "@/services/api/generation-task"; +import type { AiConfig } from "@/stores/use-config-store"; + +export type SkillDraft = { + skill_name: string; + description: string; + instruction: string; + tag?: string; +}; + +const SKILL_DRAFT_PROMPT = `你是一位技能编写助手。根据用户的想法,为一个「可复用的创作技能」生成一份草稿。 +只输出一个 JSON 对象,不要输出任何其他文字、解释或 Markdown 代码块。JSON 字段: +- "skill_name": 技能名称,简短(不超过 20 个字) +- "tag": 分类,从以下值中选一个字符串:drama(短剧影视)、ecommerce(电商营销)、creative(创意设计)、social(社媒内容)、others(其他) +- "description": 技能简介(不超过 120 字),说明适用场景、输入条件和最终产出 +- "instruction": 技能指令(Markdown 格式,至少 300 字),写给后续在画布中使用该技能的 AI 模型阅读,必须包含:角色设定、输入与约束、分步执行流程、检查清单、输出格式 + +用户的想法: +{{{IDEA}}}`; + +export function buildSkillDraftPrompt(idea: string): string { + return SKILL_DRAFT_PROMPT.replace("{{{IDEA}}}", idea.trim()); +} + +const MAX_NAME_LENGTH = 80; +const MAX_DESCRIPTION_LENGTH = 500; + +export function parseSkillDraft(text: string): Partial { + const trimmed = (text || "").trim(); + if (!trimmed) return {}; + const start = trimmed.indexOf("{"); + const end = trimmed.lastIndexOf("}"); + if (start >= 0 && end > start) { + try { + const raw = JSON.parse(trimmed.slice(start, end + 1)) as Record; + if (raw && typeof raw === "object") { + return { + skill_name: String(raw.skill_name ?? "").trim().slice(0, MAX_NAME_LENGTH), + description: String(raw.description ?? "").trim().slice(0, MAX_DESCRIPTION_LENGTH), + instruction: String(raw.instruction ?? raw.instructions ?? "").trim(), + tag: typeof raw.tag === "string" && raw.tag.trim() ? raw.tag.trim() : undefined, + }; + } + } catch { + // JSON 解析失败时回退到文本整体方案 + } + } + // 回退:首行作为名称,正文作为简介与指令,用户随后可自由编辑 + const firstLine = trimmed.split(/\r?\n/)[0]?.trim().slice(0, 30) || "未命名技能"; + return { + skill_name: firstLine, + description: trimmed.slice(0, MAX_DESCRIPTION_LENGTH), + instruction: trimmed, + }; +} + +export async function generateSkillDraft(idea: string, config: AiConfig, signal?: AbortSignal): Promise> { + const generationConfig = buildGenerationConfig(config, undefined, "text"); + const result = await runBackendGenerationTask({ + mode: "text", + prompt: buildSkillDraftPrompt(idea), + config: generationConfig, + signal, + }); + return parseSkillDraft(result.text || ""); +} \ No newline at end of file diff --git a/web/src/pages/skills/skill-editor-drawer.tsx b/web/src/pages/skills/skill-editor-drawer.tsx index 90093dc17..9ed4787f6 100644 --- a/web/src/pages/skills/skill-editor-drawer.tsx +++ b/web/src/pages/skills/skill-editor-drawer.tsx @@ -1,8 +1,11 @@ import { App, Button, Drawer, Form, Input, Select, Switch } from "antd"; -import { Minus, Plus, Save } from "lucide-react"; +import { Minus, Plus, Save, Wand2 } from "lucide-react"; import { useEffect, useState } from "react"; import { fallbackSkillCategories } from "@/pages/skills/skill-catalog"; +import { generateSkillDraft } from "@/lib/canvas/skill-drafting"; +import { navigateToSettings } from "@/lib/settings-navigation"; +import { useConfigStore, useEffectiveConfig } from "@/stores/use-config-store"; import { createSkill, updateSkill, type Skill, type SkillMutationInput, type SkillShowcaseMedia } from "@/services/api/skills"; type SkillFormValues = Omit & { is_public: boolean }; @@ -12,6 +15,9 @@ export function SkillEditorDrawer({ open, skill, onClose, onSaved }: { open: boo const [form] = Form.useForm(); const [saving, setSaving] = useState(false); const [dirty, setDirty] = useState(false); + const [draftIdea, setDraftIdea] = useState(""); + const [drafting, setDrafting] = useState(false); + const effectiveConfig = useEffectiveConfig(); useEffect(() => { if (!open) return; @@ -60,8 +66,57 @@ export function SkillEditorDrawer({ open, skill, onClose, onSaved }: { open: boo } }; + const draftFromIdea = async () => { + const idea = draftIdea.trim(); + if (!idea) { + message.warning("请先描述你想沉淀的技能"); + return; + } + if (!useConfigStore.getState().isAiConfigReady(effectiveConfig, effectiveConfig.model)) { + message.info("尚未配置可用的文本模型,请先到设置页配置"); + navigateToSettings({ section: "models", continueCreation: true }); + return; + } + setDrafting(true); + try { + const draft = await generateSkillDraft(idea, effectiveConfig); + form.setFieldsValue({ + skill_name: draft.skill_name || "", + description: draft.description || "", + instruction: draft.instruction || "", + ...(draft.tag ? { tag: draft.tag } : {}), + }); + setDirty(true); + message.success("草稿已生成,请检查并调整后保存"); + } catch (error) { + message.error(error instanceof Error ? `起草失败:${error.message}` : "起草失败"); + } finally { + setDrafting(false); + } + }; + return ( } onClick={() => form.submit()}>保存技能}> +
+
+ + AI 起草 + 描述想法,一键生成名称、简介与指令草稿(可再编辑) +
+ setDraftIdea(event.target.value)} + autoSize={{ minRows: 3, maxRows: 6 }} + maxLength={2000} + showCount + disabled={drafting} + placeholder="例如:我要一个竖屏短剧分镜技能——输入剧本段落,输出按景别排列的分镜表,每个镜头包含画面、台词、时长与转场…" + /> +
+ 将使用你的文本模型生成一次草稿 + +
+
setDirty(true)}>