dsh-plugin-image-workbench 0.0.0-stage → 1.1.5

package/vendor/chatgpt2api/source/web/src/app/debug/components/ppt-panel.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import { EditableFilePanel } from "./editable-file-panel";
+
+const defaultPrompt = "需要制作一份《2026年Q2 电商运营工作汇报》PPT，用于公司管理层季度会议汇报，整体页数控制在 8 页以内，风格偏商务科技感。重点体现销售增长、用户增长、广告投放效果以及618活动成果，并通过折线图、柱状图、环形图、漏斗图呈现。";
+
+export function PptPanel() {
+  return <EditableFilePanel title="PPT生成" kind="ppt" endpoint="/v1/ppt/generations" defaultPrompt={defaultPrompt} />;
+}

package/vendor/chatgpt2api/source/web/src/app/debug/components/psd-panel.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import { EditableFilePanel } from "./editable-file-panel";
+
+const defaultPrompt = "按原图位置拆分海报元素并合成可编辑 PSD，保留背景和每个元素图层位置，同时输出每个图层素材 zip。";
+
+export function PsdPanel() {
+  return <EditableFilePanel title="PSD生成" kind="psd" endpoint="/v1/psd/generations" defaultPrompt={defaultPrompt} imageRequired />;
+}

package/vendor/chatgpt2api/source/web/src/app/debug/components/search-panel.tsx

@@ -0,0 +1,172 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { ExternalLink, Globe2, LoaderCircle, Search } from "lucide-react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+import { httpRequest } from "@/lib/request";
+import { cn } from "@/lib/utils";
+
+import type { SearchResult } from "./types";
+
+const normalizeMarkdown = (text: string) =>
+  text
+    .replace(/\ue200url\ue202([^\ue202\ue201]*)\ue202([^\ue201]*)\ue201/g, "[$1]($2)")
+    .replace(/\ue200cite\ue202[^\ue201]*\ue201/g, "")
+    .replace(/\ue200[^\ue201]*\ue201/g, "")
+    .replace(/\ue200[^\ue201]*$/g, "")
+    .replace(/\n{3,}/g, "\n\n")
+    .trim();
+
+const cleanUrl = (url: string) => url.replace(/[\ue200-\ue202].*$/g, "").trim();
+
+const sourceKind = (url: string) => {
+  const host = (() => {
+    try {
+      return new URL(url).hostname;
+    } catch {
+      return "";
+    }
+  })();
+  return host.includes("github.com") ? "github" : "web";
+};
+
+function MarkdownResult({ content }: { content: string }) {
+  return (
+    <ReactMarkdown
+      remarkPlugins={[remarkGfm]}
+      components={{
+        a: ({ className, ...props }) => <a className={cn("font-medium text-blue-700 underline decoration-blue-300 underline-offset-4 hover:text-blue-900 dark:text-blue-300 dark:decoration-blue-700", className)} target="_blank" rel="noreferrer" {...props} />,
+        h1: ({ className, ...props }) => <h1 className={cn("mt-8 mb-4 text-2xl font-semibold tracking-tight text-stone-950 first:mt-0 dark:text-stone-50", className)} {...props} />,
+        h2: ({ className, ...props }) => <h2 className={cn("mt-8 mb-4 border-b border-stone-200 pb-2 text-xl font-semibold tracking-tight text-stone-950 first:mt-0 dark:border-white/10 dark:text-stone-50", className)} {...props} />,
+        h3: ({ className, ...props }) => <h3 className={cn("mt-6 mb-3 text-lg font-semibold text-stone-900 dark:text-stone-100", className)} {...props} />,
+        p: ({ className, ...props }) => <p className={cn("my-4 leading-8 text-stone-800 dark:text-stone-200", className)} {...props} />,
+        ul: ({ className, ...props }) => <ul className={cn("my-4 list-disc space-y-2 pl-6 leading-7 text-stone-800 dark:text-stone-200", className)} {...props} />,
+        ol: ({ className, ...props }) => <ol className={cn("my-4 list-decimal space-y-2 pl-6 leading-7 text-stone-800 dark:text-stone-200", className)} {...props} />,
+        blockquote: ({ className, ...props }) => <blockquote className={cn("my-5 border-l-4 border-stone-300 bg-white/70 py-3 pr-4 pl-5 text-stone-700 dark:border-white/20 dark:bg-white/[0.04] dark:text-stone-300", className)} {...props} />,
+        code: ({ className, ...props }) => <code className={cn("rounded bg-stone-100 px-1.5 py-0.5 font-mono text-[0.9em] text-stone-800 dark:bg-white/10 dark:text-stone-100", className)} {...props} />,
+        pre: ({ className, ...props }) => <pre className={cn("my-5 overflow-x-auto rounded-xl border border-stone-200 bg-stone-950 p-4 text-sm text-stone-50 dark:border-white/10", className)} {...props} />,
+        table: ({ className, ...props }) => <div className="my-5 overflow-x-auto rounded-xl border border-stone-200 dark:border-white/10"><table className={cn("w-full border-collapse text-sm", className)} {...props} /></div>,
+        th: ({ className, ...props }) => <th className={cn("border-b border-stone-200 bg-stone-100 px-3 py-2 text-left font-semibold dark:border-white/10 dark:bg-white/10", className)} {...props} />,
+        td: ({ className, ...props }) => <td className={cn("border-b border-stone-100 px-3 py-2 align-top dark:border-white/10", className)} {...props} />,
+      }}
+    >
+      {content}
+    </ReactMarkdown>
+  );
+}
+
+export function SearchPanel() {
+  const [prompt, setPrompt] = useState("帮我搜索 chatgpt2api 相关项目");
+  const [result, setResult] = useState<SearchResult | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [elapsedMs, setElapsedMs] = useState(0);
+  const [startedAt, setStartedAt] = useState(0);
+  const searched = loading || !!result || !!error;
+
+  useEffect(() => {
+    if (!loading || !startedAt) return;
+    const timer = window.setInterval(() => setElapsedMs(Date.now() - startedAt), 100);
+    return () => window.clearInterval(timer);
+  }, [loading, startedAt]);
+
+  const runSearch = async () => {
+    const value = prompt.trim();
+    if (!value || loading) return;
+    const start = Date.now();
+    setStartedAt(start);
+    setElapsedMs(0);
+    setLoading(true);
+    setError("");
+    setResult(null);
+    try {
+      setResult(await httpRequest<SearchResult>("/v1/search", { method: "POST", body: { prompt: value } }));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setElapsedMs(Date.now() - start);
+      setLoading(false);
+    }
+  };
+
+  return (
+    <section className={cn("mx-auto flex min-h-[calc(100vh-142px)] w-full max-w-6xl flex-col px-4 transition-all", searched ? "py-5" : "justify-center")}>
+      <div className={cn("mx-auto w-full max-w-3xl", searched && "sticky top-3 z-10")}>
+        {!searched ? (
+          <p className="mb-5 text-center text-sm text-stone-500 dark:text-stone-400">利用ChatGPT先进的网页搜索功能进行搜索</p>
+        ) : null}
+        <form
+          className={cn("mx-auto flex w-full items-center gap-3 rounded-full border border-stone-200 bg-white/95 backdrop-blur transition-all dark:border-white/10 dark:bg-stone-950/90", searched ? "px-4 py-2" : "px-5 py-3")}
+          onSubmit={(event) => {
+            event.preventDefault();
+            void runSearch();
+          }}
+        >
+          <img src="/openai.svg" alt="" aria-hidden="true" className="size-5 shrink-0 opacity-80 dark:invert" />
+          <input
+            value={prompt}
+            onChange={(event) => setPrompt(event.target.value)}
+            placeholder="搜索网页"
+            className={cn("min-w-0 flex-1 bg-transparent text-[15px] text-stone-900 outline-none placeholder:text-stone-400 dark:text-stone-100 dark:placeholder:text-stone-500", searched ? "h-8" : "h-10")}
+          />
+          <button type="submit" disabled={loading || !prompt.trim()} className="inline-flex size-8 shrink-0 items-center justify-center rounded-full text-stone-800 transition hover:bg-stone-100 disabled:cursor-not-allowed disabled:text-stone-300 dark:text-stone-100 dark:hover:bg-white/10 dark:disabled:text-stone-600">
+            {loading ? <LoaderCircle className="size-4 animate-spin" /> : <Search className="size-4" />}
+          </button>
+        </form>
+      </div>
+
+      {searched ? <div className="mx-auto w-full max-w-6xl flex-1 pt-6">
+        {loading ? (
+          <div className="mx-auto flex max-w-3xl items-center gap-3 rounded-2xl border border-stone-200 bg-white/75 px-4 py-3 text-sm text-stone-600 dark:border-white/10 dark:bg-white/[0.03] dark:text-stone-300">
+            <LoaderCircle className="size-4 animate-spin" />
+            搜索中... {(elapsedMs / 1000).toFixed(1)}s
+          </div>
+        ) : null}
+
+        {error ? <div className="rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700 dark:border-rose-900/60 dark:bg-rose-950/25 dark:text-rose-300">{error}</div> : null}
+
+        {result ? (
+          <article className="grid gap-8 pb-12 lg:grid-cols-[minmax(0,1fr)_320px]">
+            <div className="min-w-0">
+              <div className="mb-5 flex flex-wrap items-center gap-2 text-xs text-stone-500 dark:text-stone-400">
+                <span className="rounded-full border border-stone-200 bg-white px-3 py-1 dark:border-white/10 dark:bg-white/[0.03]">{result.status || "done"}</span>
+                <span className="rounded-full border border-stone-200 bg-white px-3 py-1 dark:border-white/10 dark:bg-white/[0.03]">{(elapsedMs / 1000).toFixed(2)}s</span>
+                <span className="rounded-full border border-stone-200 bg-white px-3 py-1 dark:border-white/10 dark:bg-white/[0.03]">{result.sources?.length || 0} sources</span>
+              </div>
+              <div className="text-[15px]">
+                <MarkdownResult content={normalizeMarkdown(result.answer || "")} />
+              </div>
+            </div>
+            {result.sources?.length ? (
+              <aside className="lg:sticky lg:top-24 lg:self-start">
+                <div className="mb-3 text-sm font-semibold text-stone-900 dark:text-stone-100">来源</div>
+                <div className="divide-y divide-stone-200 dark:divide-white/10">
+                  {result.sources.map((source, index) => {
+                    const url = cleanUrl(source.url || "");
+                    const kind = sourceKind(url);
+                    return (
+                      <a key={`${url || index}`} href={url} target="_blank" rel="noreferrer" className="flex gap-3 py-3 text-xs transition hover:text-stone-950 dark:hover:text-stone-50">
+                        <span className="mt-0.5 flex size-5 shrink-0 items-center justify-center text-stone-600 dark:text-stone-300">
+                          {kind === "github" ? <img src="/github.svg" alt="" aria-hidden="true" className="size-3.5 dark:invert" /> : <Globe2 className="size-3.5" />}
+                        </span>
+                        <span className="min-w-0">
+                          <span className="line-clamp-2 font-medium leading-5 text-stone-800 dark:text-stone-200">{source.title || url || "source"}</span>
+                          <span className="mt-1 flex items-center gap-1 truncate text-stone-500 dark:text-stone-400">
+                            <ExternalLink className="size-3 shrink-0" />
+                            {url}
+                          </span>
+                        </span>
+                      </a>
+                    );
+                  })}
+                </div>
+              </aside>
+            ) : null}
+          </article>
+        ) : null}
+      </div> : null}
+    </section>
+  );
+}

package/vendor/chatgpt2api/source/web/src/app/debug/components/skill-panel.tsx

@@ -0,0 +1,169 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { Copy, Download } from "lucide-react";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+import webConfig from "@/constants/common-env";
+import { fetchSettingsConfig } from "@/lib/api";
+import { getStoredAuthSession } from "@/store/auth";
+
+export function SkillPanel() {
+  const [browserBaseUrl, setBrowserBaseUrl] = useState("");
+  const [configuredBaseUrl, setConfiguredBaseUrl] = useState("");
+  const [authKey, setAuthKey] = useState("");
+
+  useEffect(() => {
+    setBrowserBaseUrl(window.location.origin);
+    void fetchSettingsConfig().then((data) => setConfiguredBaseUrl(String(data.config.base_url || "").replace(/\/$/, ""))).catch(() => undefined);
+    void getStoredAuthSession().then((session) => setAuthKey(session?.key || ""));
+  }, []);
+
+  const apiBaseUrl = configuredBaseUrl || webConfig.apiUrl.replace(/\/$/, "") || browserBaseUrl;
+  const skillZh = useMemo(() => `---
+name: chatgpt2api-search
+description: 当用户需要联网搜索、查询最新信息、核实事实或需要来源链接时，调用本地 chatgpt2api 搜索接口。
+---
+
+# ChatGPT2API 搜索
+
+当用户要求联网搜索、查询最新信息、核实资料、查新闻、查价格、查文档更新或需要来源链接时，使用这个 skill。
+
+## 接口
+
+POST ${apiBaseUrl}/v1/search
+
+Headers:
+
+Authorization: Bearer ${authKey}
+Content-Type: application/json
+
+Body:
+
+{
+  "prompt": "<用户要搜索的问题>"
+}
+
+## 返回处理
+
+- 使用接口返回的 \`answer\` 作为主要回答。
+- 如果有 \`sources\`，在回答里附上来源链接。
+- 如果接口报错，简要说明错误并询问是否重试。`, [apiBaseUrl, authKey]);
+
+  const skillEn = useMemo(() => `---
+name: chatgpt2api-search
+description: Use when current web search is needed through this chatgpt2api server. Call the configured HTTP search endpoint with a prompt and return the answer with source URLs.
+---
+
+# ChatGPT2API Search
+
+Use this skill when the user asks for current web search, online lookup, recent information, or source-backed answers. It calls the local chatgpt2api search endpoint and returns an answer with source links.
+
+## When to use
+
+- The user asks to search the web, look something up, verify current information, or find the latest status.
+- The answer needs source URLs, recent details, prices, releases, docs, laws, schedules, or news.
+- Do not use it for purely local codebase questions unless the user explicitly asks for web search.
+
+## Request
+
+POST ${apiBaseUrl}/v1/search
+
+Headers:
+
+Authorization: Bearer ${authKey}
+Content-Type: application/json
+
+JSON body:
+
+{
+  "prompt": "<search question>"
+}
+
+## Response handling
+
+- Use \`answer\` as the main response.
+- Include source URLs from \`sources\` when available.
+- If the endpoint returns an error, summarize the error and ask the user whether to retry.
+- Keep the final answer concise unless the user asks for detail.`, [apiBaseUrl, authKey]);
+
+  const zhPrompt = useMemo(() => `请帮我在本机安装一个用于联网搜索的 skill。
+
+要求：
+1. 请按你当前环境的 skill 安装规范，把它安装成本地 skill。
+2. skill 名称为：chatgpt2api-search
+3. 文件名为：SKILL.md
+4. 如果你无法确定本地 skills 目录在哪里，先告诉我需要放到哪个目录，不要猜路径。
+5. 只创建或更新这个 skill 文件，不要修改其他无关文件。
+6. SKILL.md 请写入下面的完整内容。
+
+SKILL.md 内容：
+
+\`\`\`markdown
+${skillZh}
+\`\`\``, [skillZh]);
+
+  const enPrompt = useMemo(() => `Please install a local web-search skill on this machine.
+
+Requirements:
+1. Install this as a local skill according to the skill installation rules of your current environment.
+2. Skill name: chatgpt2api-search
+3. File name: SKILL.md
+4. If you cannot determine the local skills directory, tell me which directory is required before writing files.
+5. Only create or update this skill file. Do not modify unrelated files.
+6. Write the full content below into SKILL.md.
+
+SKILL.md content:
+
+\`\`\`markdown
+${skillEn}
+\`\`\``, [skillEn]);
+
+  const copyText = async (text: string) => {
+    await navigator.clipboard.writeText(text);
+    toast.success("已复制");
+  };
+
+  const downloadSkill = (text: string) => {
+    const url = URL.createObjectURL(new Blob([text], { type: "text/markdown;charset=utf-8" }));
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = "SKILL.md";
+    link.click();
+    URL.revokeObjectURL(url);
+  };
+
+  const versions = [
+    { title: "中文安装指令", desc: "复制后直接发给 Codex 或 Claude，让它安装到本地。", prompt: zhPrompt, skill: skillZh },
+    { title: "English install prompt", desc: "Copy and send this to Codex or Claude to install locally.", prompt: enPrompt, skill: skillEn },
+  ];
+
+  return (
+    <section className="grid items-stretch gap-4 lg:grid-cols-2">
+      {versions.map((item) => (
+        <div key={item.title} className="flex flex-col overflow-hidden rounded-lg border border-slate-200 bg-white shadow-sm dark:border-white/10 dark:bg-white/[0.04]">
+          <div className="flex items-center justify-between gap-3 border-b border-slate-200/70 bg-slate-50/80 p-4 dark:border-white/10 dark:bg-white/[0.03]">
+            <div>
+              <h2 className="font-medium text-slate-900 dark:text-slate-100">{item.title}</h2>
+              <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">{item.desc}</p>
+            </div>
+            <div className="flex gap-2">
+              <Button size="sm" variant="outline" className="cursor-pointer" onClick={() => downloadSkill(item.skill)}>
+                <Download />
+                下载
+              </Button>
+              <Button size="sm" className="cursor-pointer" onClick={() => void copyText(item.prompt)}>
+                <Copy />
+                复制
+              </Button>
+            </div>
+          </div>
+          <pre className="flex-1 whitespace-pre-wrap p-4 font-mono text-sm leading-6">
+            {item.prompt}
+          </pre>
+        </div>
+      ))}
+    </section>
+  );
+}

package/vendor/chatgpt2api/source/web/src/app/debug/components/types.ts

@@ -0,0 +1,39 @@
+export type SearchResult = {
+  conversation_id: string;
+  status: string;
+  answer: string;
+  sources: Array<{ title?: string; url?: string; snippet?: string; source_type?: string }>;
+};
+
+export type ChatMessage = {
+  role: "system" | "user" | "assistant";
+  content: string | ChatContentPart[];
+};
+
+export type ChatContentPart =
+  | { type: "text"; text: string }
+  | { type: "image_url"; image_url: { url: string } };
+
+export type ChatCompletionResponse = {
+  choices?: Array<{ message?: { role?: string; content?: string } }>;
+};
+
+export type EditableFileTask = {
+  id: string;
+  taskId?: string;
+  status: "queued" | "running" | "success" | "error" | string;
+  kind: "ppt" | "psd" | string;
+  created_at?: string;
+  updated_at?: string;
+  elapsed_seconds?: number;
+  polled_at?: number;
+  prompt_preview?: string;
+  error?: string;
+  result?: {
+    conversation_id?: string;
+    primary_url?: string;
+    zip_url?: string;
+  };
+};
+
+export const pretty = (value: unknown) => JSON.stringify(value, null, 2);

package/vendor/chatgpt2api/source/web/src/app/debug/page.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { LoaderCircle } from "lucide-react";
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { useAuthGuard } from "@/lib/use-auth-guard";
+
+import { ChatPanel } from "./components/chat-panel";
+import { PptPanel } from "./components/ppt-panel";
+import { PsdPanel } from "./components/psd-panel";
+import { SearchPanel } from "./components/search-panel";
+import { SkillPanel } from "./components/skill-panel";
+
+const tabs = [
+  { value: "skills", title: "搜索Skills" },
+  { value: "search", title: "搜索" },
+  { value: "ppt", title: "PPT生成" },
+  { value: "psd", title: "PSD生成" },
+  { value: "chat", title: "对话" },
+];
+
+export default function DebugPage() {
+  const { isCheckingAuth, session } = useAuthGuard(["admin"]);
+
+  if (isCheckingAuth || !session || session.role !== "admin") {
+    return (
+      <div className="flex min-h-[calc(100vh-49px)] items-center justify-center">
+        <LoaderCircle className="size-5 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  return (
+    <Tabs defaultValue="skills" className="mx-auto flex min-h-[calc(100vh-49px)] w-full max-w-[1600px] flex-col gap-4 px-4 pt-3 pb-6 md:px-8">
+      <TabsList variant="line" className="w-full">
+        {tabs.map(({ value, title }) => (
+          <TabsTrigger key={value} value={value}>
+            {title}
+          </TabsTrigger>
+        ))}
+      </TabsList>
+      <TabsContent value="skills">
+        <SkillPanel />
+      </TabsContent>
+      <TabsContent value="search" className="min-h-0">
+        <SearchPanel />
+      </TabsContent>
+      <TabsContent value="ppt" className="min-h-0">
+        <PptPanel />
+      </TabsContent>
+      <TabsContent value="psd" className="min-h-0">
+        <PsdPanel />
+      </TabsContent>
+      <TabsContent value="chat" className="min-h-0">
+        <ChatPanel />
+      </TabsContent>
+    </Tabs>
+  );
+}