图片预览下载增强与双模式提示词完善

frontend/package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@types/react-syntax-highlighter": "^15.5.13",
+        "jszip": "^3.10.1",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
         "react-syntax-highlighter": "^16.1.0"
@@ -2029,6 +2030,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
+      "license": "MIT"
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "dev": true,
@@ -2592,6 +2599,12 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
+      "license": "MIT"
+    },
     "node_modules/import-fresh": {
       "version": "3.3.1",
       "dev": true,
@@ -2615,6 +2628,12 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC"
+    },
     "node_modules/is-alphabetical": {
       "version": "2.0.1",
       "license": "MIT",
@@ -2703,6 +2722,12 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "license": "MIT"
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "dev": true,
@@ -2770,6 +2795,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/jszip": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
+      "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
+      "license": "(MIT OR GPL-3.0-or-later)",
+      "dependencies": {
+        "lie": "~3.3.0",
+        "pako": "~1.0.2",
+        "readable-stream": "~2.3.6",
+        "setimmediate": "^1.0.5"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "dev": true,
@@ -2790,6 +2827,15 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
     "node_modules/lilconfig": {
       "version": "3.1.3",
       "dev": true,
@@ -2986,6 +3032,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+      "license": "(MIT AND Zlib)"
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "dev": true,
@@ -3236,6 +3288,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "license": "MIT"
+    },
     "node_modules/property-information": {
       "version": "7.1.0",
       "license": "MIT",
@@ -3323,6 +3381,21 @@
         "pify": "^2.3.0"
       }
     },
+    "node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "dev": true,
@@ -3449,6 +3522,12 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
     "node_modules/scheduler": {
       "version": "0.27.0",
       "license": "MIT"
@@ -3461,6 +3540,12 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
+      "license": "MIT"
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "dev": true,
@@ -3496,6 +3581,15 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
     "node_modules/strip-json-comments": {
       "version": "3.1.1",
       "dev": true,
@@ -3765,7 +3859,6 @@
     },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/vite": {

frontend/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@types/react-syntax-highlighter": "^15.5.13",
+    "jszip": "^3.10.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-syntax-highlighter": "^16.1.0"

frontend/src/components/ImagePreview.tsx

@@ -1,4 +1,5 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import JSZip from 'jszip';
 
 interface ImagePreviewProps {
   imageUrls: string[];
@@ -6,43 +7,139 @@ interface ImagePreviewProps {
 
 export function ImagePreview({ imageUrls }: ImagePreviewProps) {
   const [activeIndex, setActiveIndex] = useState(0);
+  const [isLightboxOpen, setIsLightboxOpen] = useState(false);
+  const [zoom, setZoom] = useState(1);
+  const [isDownloadingSingle, setIsDownloadingSingle] = useState(false);
+  const [isDownloadingAll, setIsDownloadingAll] = useState(false);
 
   useEffect(() => {
     setActiveIndex(0);
   }, [imageUrls.join('|')]);
 
+  useEffect(() => {
+    if (!isLightboxOpen) {
+      setZoom(1);
+    }
+  }, [isLightboxOpen]);
+
   const activeImage = imageUrls[activeIndex];
+  const hasImages = imageUrls.length > 0;
+
+  const timestampPrefix = useMemo(() => {
+    const now = new Date();
+    const pad = (value: number) => String(value).padStart(2, '0');
+    return `${now.getFullYear()}${pad(now.getMonth() + 1)}${pad(now.getDate())}-${pad(now.getHours())}${pad(now.getMinutes())}${pad(now.getSeconds())}`;
+  }, [imageUrls.join('|')]);
+
+  const getAbsoluteUrl = (url: string): string => {
+    if (/^https?:\/\//i.test(url)) {
+      return url;
+    }
+    return new URL(url, window.location.origin).toString();
+  };
+
+  const downloadBlob = (blob: Blob, filename: string) => {
+    const blobUrl = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = blobUrl;
+    link.download = filename;
+    link.click();
+    setTimeout(() => URL.revokeObjectURL(blobUrl), 1000);
+  };
+
+  const handleDownloadSingle = async () => {
+    if (!activeImage || isDownloadingSingle) {
+      return;
+    }
+    setIsDownloadingSingle(true);
+    try {
+      const response = await fetch(getAbsoluteUrl(activeImage));
+      if (!response.ok) {
+        throw new Error(`下载失败: ${response.status}`);
+      }
+      const blob = await response.blob();
+      downloadBlob(blob, `${timestampPrefix}-image-${activeIndex + 1}.png`);
+    } catch (error) {
+      console.error('单张下载失败', error);
+    } finally {
+      setIsDownloadingSingle(false);
+    }
+  };
 
-  const handleDownloadAll = () => {
-    imageUrls.forEach((url, index) => {
-      setTimeout(() => {
-        const link = document.createElement('a');
-        link.href = url;
-        link.download = `manim-image-${index + 1}.png`;
-        link.click();
-      }, index * 150);
-    });
+  const handleDownloadAll = async () => {
+    if (!hasImages || isDownloadingAll) {
+      return;
+    }
+    setIsDownloadingAll(true);
+    try {
+      const zip = new JSZip();
+      await Promise.all(
+        imageUrls.map(async (url, index) => {
+          const response = await fetch(getAbsoluteUrl(url));
+          if (!response.ok) {
+            throw new Error(`图片 ${index + 1} 下载失败: ${response.status}`);
+          }
+          const blob = await response.blob();
+          zip.file(`${timestampPrefix}-image-${index + 1}.png`, blob);
+        })
+      );
+      const zipBlob = await zip.generateAsync({ type: 'blob' });
+      downloadBlob(zipBlob, `${timestampPrefix}-images.zip`);
+    } catch (error) {
+      console.error('打包下载失败', error);
+    } finally {
+      setIsDownloadingAll(false);
+    }
   };
 
   return (
     <div className="h-full flex flex-col bg-bg-secondary/30 rounded-2xl overflow-hidden">
       <div className="flex items-center justify-between px-4 py-2.5">
         <h3 className="text-xs font-medium text-text-secondary/80 uppercase tracking-wide">图片预览</h3>
-        <button
-          onClick={handleDownloadAll}
-          disabled={imageUrls.length === 0}
-          className="text-xs text-text-secondary/70 hover:text-accent transition-colors flex items-center gap-1.5 disabled:opacity-40 disabled:cursor-not-allowed"
-        >
-          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
-          </svg>
-          下载全部
-        </button>
+        <div className="flex items-center gap-3">
+          <button
+            onClick={() => setIsLightboxOpen(true)}
+            disabled={!hasImages}
+            className="text-xs text-text-secondary/70 hover:text-accent transition-colors flex items-center gap-1.5 disabled:opacity-40 disabled:cursor-not-allowed"
+          >
+            <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 3h6m0 0v6m0-6l-7 7M9 21H3m0 0v-6m0 6l7-7" />
+            </svg>
+            放大预览
+          </button>
+          <button
+            onClick={handleDownloadSingle}
+            disabled={!hasImages || isDownloadingSingle || isDownloadingAll}
+            className="text-xs text-text-secondary/70 hover:text-accent transition-colors flex items-center gap-1.5 disabled:opacity-40 disabled:cursor-not-allowed"
+          >
+            <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+            </svg>
+            {isDownloadingSingle ? '下载中...' : '下载'}
+          </button>
+          <button
+            onClick={handleDownloadAll}
+            disabled={!hasImages || isDownloadingAll || isDownloadingSingle}
+            className="text-xs text-text-secondary/70 hover:text-accent transition-colors flex items-center gap-1.5 disabled:opacity-40 disabled:cursor-not-allowed"
+          >
+            <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+            </svg>
+            {isDownloadingAll ? '打包中...' : '下载全部'}
+          </button>
+        </div>
       </div>
 
       <div className="flex-1 bg-black/90 flex items-center justify-center">
         {activeImage ? (
-          <img src={activeImage} alt={`图片 ${activeIndex + 1}`} className="w-full h-full object-contain" />
+          <button
+            type="button"
+            onClick={() => setIsLightboxOpen(true)}
+            className="w-full h-full cursor-zoom-in"
+            title="点击放大预览"
+          >
+            <img src={activeImage} alt={`图片 ${activeIndex + 1}`} className="w-full h-full object-contain" />
+          </button>
         ) : (
           <p className="text-xs text-text-secondary/60">暂无图片输出</p>
         )}
@@ -70,6 +167,48 @@ export function ImagePreview({ imageUrls }: ImagePreviewProps) {
           </div>
         </div>
       )}
+
+      {isLightboxOpen && activeImage && (
+        <div className="fixed inset-0 z-[80] bg-black/85 backdrop-blur-sm flex flex-col">
+          <div className="flex items-center justify-between px-5 py-3 text-white/90">
+            <div className="text-xs">
+              放大预览 · 图片 {activeIndex + 1}/{imageUrls.length}
+            </div>
+            <div className="flex items-center gap-3">
+              <button
+                type="button"
+                onClick={() => setZoom((z) => Math.max(0.5, Math.round((z - 0.1) * 10) / 10))}
+                className="px-2 py-1 rounded bg-white/15 hover:bg-white/25 text-xs"
+              >
+                -
+              </button>
+              <span className="text-xs tabular-nums">{Math.round(zoom * 100)}%</span>
+              <button
+                type="button"
+                onClick={() => setZoom((z) => Math.min(3, Math.round((z + 0.1) * 10) / 10))}
+                className="px-2 py-1 rounded bg-white/15 hover:bg-white/25 text-xs"
+              >
+                +
+              </button>
+              <button
+                type="button"
+                onClick={() => setIsLightboxOpen(false)}
+                className="px-2 py-1 rounded bg-white/15 hover:bg-white/25 text-xs"
+              >
+                关闭
+              </button>
+            </div>
+          </div>
+          <div className="flex-1 flex items-center justify-center overflow-auto px-6 pb-6">
+            <img
+              src={activeImage}
+              alt={`放大图片 ${activeIndex + 1}`}
+              className="max-w-none"
+              style={{ transform: `scale(${zoom})`, transformOrigin: 'center center' }}
+            />
+          </div>
+        </div>
+      )}
     </div>
   );
 }

frontend/vite.config.ts

@@ -32,6 +32,10 @@ export default defineConfig({
         target: 'http://localhost:3000',
         changeOrigin: true,
       },
+      '/images': {
+        target: 'http://localhost:3000',
+        changeOrigin: true,
+      },
     },
   },
 })

src/prompts/loader.ts

@@ -28,6 +28,9 @@ export interface TemplateVariables {
   attempt?: number
   instructions?: string
   code?: string
+  outputMode?: 'video' | 'image'
+  isImage?: boolean
+  isVideo?: boolean
 }
 
 /** 提示词覆盖配置 */
@@ -97,7 +100,9 @@ export function clearTemplateCache(): void {
 /**
  * 替换简单变量占位符 {{variable}}
  */
-function replaceVariables(template: string, variables: Record<string, string | number | undefined>): string {
+type TemplateValue = string | number | boolean | undefined
+
+function replaceVariables(template: string, variables: Record<string, TemplateValue>): string {
   return template.replace(/\{\{(\w+)\}\}/g, (match, key) => {
     const value = variables[key]
     return value !== undefined ? String(value) : match
@@ -107,11 +112,14 @@ function replaceVariables(template: string, variables: Record<string, string | n
 /**
  * 处理条件块 {{#if variable}}...{{/if}}
  */
-function processConditionals(template: string, variables: Record<string, string | number | undefined>): string {
+function processConditionals(template: string, variables: Record<string, TemplateValue>): string {
   return template.replace(
     /\{\{#if\s+(\w+)\}\}([\s\S]*?)\{\{\/if\}\}/g,
     (_, key, content) => {
       const value = variables[key]
+      if (typeof value === 'boolean') {
+        return value ? content : ''
+      }
       return value !== undefined && value !== '' ? content : ''
     }
   )
@@ -135,10 +143,10 @@ function assembleTemplate(
     .replace(/\{\{rules\}\}/g, rules)
 
   // 3. 处理条件块
-  result = processConditionals(result, variables as Record<string, string | number | undefined>)
+  result = processConditionals(result, variables as Record<string, TemplateValue>)
 
   // 4. 替换变量占位符
-  result = replaceVariables(result, variables as Record<string, string | number | undefined>)
+  result = replaceVariables(result, variables as Record<string, TemplateValue>)
 
   return result.trim()
 }
@@ -222,13 +230,35 @@ export function getAllDefaultTemplates(): {
 // ============================================================================
 
 /** @deprecated 使用 getRoleUserPrompt('conceptDesigner', { concept, seed }) */
-export function generateConceptDesignerPrompt(concept: string, seed: string): string {
-  return getRoleUserPrompt('conceptDesigner', { concept, seed })
+export function generateConceptDesignerPrompt(
+  concept: string,
+  seed: string,
+  outputMode: 'video' | 'image' = 'video'
+): string {
+  return getRoleUserPrompt('conceptDesigner', {
+    concept,
+    seed,
+    outputMode,
+    isImage: outputMode === 'image',
+    isVideo: outputMode === 'video'
+  })
 }
 
 /** @deprecated 使用 getRoleUserPrompt('codeGeneration', { concept, seed, sceneDesign }) */
-export function generateCodeGenerationPrompt(concept: string, seed: string, sceneDesign?: string): string {
-  return getRoleUserPrompt('codeGeneration', { concept, seed, sceneDesign })
+export function generateCodeGenerationPrompt(
+  concept: string,
+  seed: string,
+  sceneDesign?: string,
+  outputMode: 'video' | 'image' = 'video'
+): string {
+  return getRoleUserPrompt('codeGeneration', {
+    concept,
+    seed,
+    sceneDesign,
+    outputMode,
+    isImage: outputMode === 'image',
+    isVideo: outputMode === 'video'
+  })
 }
 
 /** @deprecated 使用 getRoleUserPrompt('codeRetry', { concept, errorMessage, code, attempt }) */
@@ -242,6 +272,18 @@ export function generateCodeFixPrompt(
 }
 
 /** @deprecated 使用 getRoleUserPrompt('codeEdit', { concept, instructions, code }) */
-export function generateCodeEditPrompt(concept: string, instructions: string, code: string): string {
-  return getRoleUserPrompt('codeEdit', { concept, instructions, code })
+export function generateCodeEditPrompt(
+  concept: string,
+  instructions: string,
+  code: string,
+  outputMode: 'video' | 'image' = 'video'
+): string {
+  return getRoleUserPrompt('codeEdit', {
+    concept,
+    instructions,
+    code,
+    outputMode,
+    isImage: outputMode === 'image',
+    isVideo: outputMode === 'video'
+  })
 }

src/prompts/templates/roles/code-edit.md

@@ -8,8 +8,23 @@
 ### 输出要求
 
 - **仅输出代码**：禁止解释或 Markdown 包裹
-- **锚点协议**：使用 ### START ### 开始，### END ### 结束，仅输出锚点之间的代码
-- **结构规范**：场景类固定为 `MainScene`，统一使用 `from manim import *`
+- **画布边界（硬约束）**：x in [-8, 8]，y in [-4.5, 4.5]。修改后任何元素都不得越界。
+{{#if isVideo}}
+- **锚点协议（视频）**：使用 ### START ### 开始，### END ### 结束，仅输出锚点之间的代码
+- **结构规范（视频）**：场景类固定为 `MainScene`，统一使用 `from manim import *`
+{{/if}}
+{{#if isImage}}
+- **锚点协议（图片）**：仅允许输出 YON_IMAGE 锚点块，块外禁止任何字符。
+- **格式（图片）**：
+  - `### YON_IMAGE_1_START ###`
+  - `...python code...`
+  - `### YON_IMAGE_1_END ###`
+  - `### YON_IMAGE_2_START ###`
+  - `...python code...`
+  - `### YON_IMAGE_2_END ###`
+- **编号规则（图片）**：编号必须从 1 开始连续递增。
+- **结构规范（图片）**：每个块都必须包含可渲染 Scene 类，统一使用 `from manim import *`。
+{{/if}}
 
 {{knowledge}}
 

src/prompts/templates/roles/code-generation.md

@@ -12,13 +12,30 @@
 
 - **{{concept}}**: 用户输入的数学概念或可视化需求
 - **{{seed}}**: 随机种子（用于在保持逻辑严谨的前提下，对布局和细节进行微调）
+- **画布边界（硬约束）**：x in [-8, 8]，y in [-4.5, 4.5]。所有对象与标签的最终位置和关键中间位置都不得越界。
 
 ### 产出要求
 
 - **纯代码输出**：**严禁**输出 Markdown 代码块标识符（如 ```python），**严禁**包含任何解释性文字。输出内容应能直接作为 `.py` 文件运行
-- **锚点协议**：输出必须以 ### START ### 开始，以 ### END ### 结束，两个锚点之间只允许出现代码
-- **结构规范**：核心类名固定为 `MainScene`（若为 3D 场景则继承自 `ThreeDScene`）。必须使用全部导入 `from manim import *`
-- **逻辑表达**：必须通过动态动画（不仅仅是静态展示）来深度解读 `{{concept}}` 的数学内涵
+{{#if isVideo}}
+- **锚点协议（视频）**：输出必须以 ### START ### 开始，以 ### END ### 结束，两个锚点之间只允许出现代码
+- **结构规范（视频）**：核心类名固定为 `MainScene`（若为 3D 场景则继承自 `ThreeDScene`）。必须使用全部导入 `from manim import *`
+- **逻辑表达（视频）**：必须通过动态动画（不仅仅是静态展示）来深度解读 `{{concept}}` 的数学内涵
+{{/if}}
+{{#if isImage}}
+- **锚点协议（图片）**：输出必须只包含 YON_IMAGE 锚点块，块外禁止任何字符。
+- **图片锚点格式**：
+  - `### YON_IMAGE_1_START ###`
+  - `...python code...`
+  - `### YON_IMAGE_1_END ###`
+  - `### YON_IMAGE_2_START ###`
+  - `...python code...`
+  - `### YON_IMAGE_2_END ###`
+- **编号规则（图片）**：编号必须从 1 开始且连续递增。
+- **结构规范（图片）**：每个锚点块只负责一张图，必须包含可渲染的 Scene 类，统一使用 `from manim import *`。
+- **逻辑表达（图片）**：静态构图优先，强调“分栏布局 + 覆盖式推导”，禁止元素重叠。
+- **边界规则（图片）**：若内容过多必须拆成更多锚点块，禁止通过越界放置来容纳内容。
+{{/if}}
 
 {{knowledge}}
 
@@ -32,6 +49,9 @@
    - **逻辑关联性**：具有相同数学含义的元素必须使用相同或相近的颜色
    - **视觉对比度**：重点强调的元素（如目标结论）使用高饱和度颜色（如 `YELLOW` 或 `PURE_RED`），辅助元素使用低对比度颜色（如 `GRAY` 或 `BLUE_E`）
 4. **代码实现**：对照 API 索引表，确保每个方法的参数合法
+{{#if isImage}}
+5. **多图组织**：将内容拆分为多张静态图时，每张图只承载一个明确目标（概念/推导/结论），并用锚点分块输出。
+{{/if}}
 
 {{rules}}
 

src/prompts/templates/roles/concept-designer.md

@@ -6,6 +6,15 @@
 
 **概念**: {{concept}}
 **种子**: {{seed}}（用于微调方案细节，不影响核心设计）
+**输出模式**: {{outputMode}}
+
+{{#if isImage}}
+### 图片模式附加要求
+
+- 本次任务是**静态图片模式**，不是视频动画模式。
+- 方案必须面向“多张静态图”组织内容：每张图一个明确目标（概念图/推导图/结论图或按选项分图）。
+- 优先确保构图清晰、分栏稳定、标注不重叠，不要求复杂运动设计。
+{{/if}}
 
 ### 知识层（必须使用）
 
@@ -13,6 +22,7 @@
 - 画布比例：16:9
 - 画布中心：(0, 0)
 - 坐标边界：x in [-8, 8]，y in [-4.5, 4.5]
+- **边界强约束**：所有几何图形、公式文本、标签、箭头在任意步骤（含淡入淡出和变换中间态）都不得超出上述坐标边界。
 
 请在分镜中使用标准术语：Transform、Focus、Fade In、Fade Out。
 
@@ -45,6 +55,7 @@
 5. 公式、标注、图形在任意时刻都不得重叠（遮挡零容忍）。
 6. 对于多选项/多分支推导，禁止全量纵向堆叠，必须使用分栏布局。
 7. 对于多选项/多分支推导，必须使用覆盖式推导：上一项中间推导先淡出，再进入下一项。
+8. 禁止把任意元素放置到画布边界之外；若内容较多，必须缩放或分图，不得越界。
 
 ### 分镜输出要求
 
@@ -64,6 +75,9 @@
    - 每一步必须建立“逻辑推导（公式/文本）”与“几何表现（图形/运动）”的时间锚点对应关系
    - 每一步必须写明动态对象的起始状态、变化过程、最终状态
    - 对于多选项/多分支推导，每一步必须标注当前采用的分栏结构（如左推导右结论），并写明覆盖式切换细节（谁淡出、谁保留、谁新进场）
+{{#if isImage}}
+   - 图片模式下，步骤可解释为“逐图切换流程”：每一步对应一张静态图，并说明与上一张图的覆盖替换关系
+{{/if}}
 
 4. **视觉元素规划与布局**
    - 列出需要展示的几何图形/公式/函数

src/server.ts

@@ -75,27 +75,33 @@ async function initializeApp(): Promise<void> {
       next(err)
     })
 
-    // 请求日志（开发环境）
-    if (isDevelopment()) {
-      app.use(requestLogger)
-    }
-
-    // 静态文件服务
-    app.use(express.static('public'))
+    // 请求日志（开发环境）
+    if (isDevelopment()) {
+      app.use(requestLogger)
+    }
+
+    // 静态文件服务（图片/视频资源找不到时返回 404，避免错误回退到 index.html）
+    app.use('/images', express.static(path.join(process.cwd(), 'public', 'images'), { fallthrough: false }))
+    app.use('/videos', express.static(path.join(process.cwd(), 'public', 'videos'), { fallthrough: false }))
+    app.use(express.static('public'))
 
     // 挂载所有路由（包括健康检查和 API 路由）
     app.use(routes)
 
     // SPA fallback：任何非 API 请求都返回 React 的 index.html
-    app.get('*', (req, res) => {
-      // 跳过健康检查和 API 路由
-      if (req.path.startsWith('/health') || req.path.startsWith('/api')) {
-        return notFoundHandler(req, res, () => {})
-      }
-      // 返回 React 前端的 index.html
-      const indexPath = path.join(__dirname, '..', 'public', 'index.html')
-      res.sendFile(indexPath, (err) => {
-        if (err) {
+    app.get('*', (req, res) => {
+      // 跳过健康检查和 API 路由
+      if (req.path.startsWith('/health') || req.path.startsWith('/api')) {
+        return notFoundHandler(req, res, () => {})
+      }
+      // 带扩展名的资源请求若未命中静态文件，不应回退 SPA
+      if (path.extname(req.path)) {
+        return notFoundHandler(req, res, () => {})
+      }
+      // 返回 React 前端的 index.html
+      const indexPath = path.join(__dirname, '..', 'public', 'index.html')
+      res.sendFile(indexPath, (err) => {
+        if (err) {
           return notFoundHandler(req, res, () => {})
         }
       })

src/services/code-edit.ts

@@ -96,25 +96,14 @@ export async function generateEditedManimCode(
     return ''
   }
 
-  try {
+  try {
     const baseSystemPrompt = promptOverrides?.roles?.codeEdit?.system || SYSTEM_PROMPTS.codeEdit
     const userPromptOverride = promptOverrides?.roles?.codeEdit?.user
     const baseUserPrompt = userPromptOverride
-      ? applyPromptTemplate(userPromptOverride, { concept, instructions, code }, promptOverrides)
-      : generateCodeEditPrompt(concept, instructions, code)
-    const imageModeSuffix = `
-
-图片模式强约束：
-1. 仅输出 YON_IMAGE 锚点块代码，块外禁止任何字符。
-2. 锚点格式必须为 ### YON_IMAGE_n_START ### / ### YON_IMAGE_n_END ###。
-3. 编号从 1 连续递增，检测到几组就渲染几张。
-4. 每个块都必须包含可渲染的 Scene 类。`
-    const systemPrompt = outputMode === 'image'
-      ? `${baseSystemPrompt}\n\n当前任务为图片模式，请严格遵守 YON_IMAGE 多图锚点协议。`
-      : baseSystemPrompt
-    const userPrompt = outputMode === 'image'
-      ? `${baseUserPrompt}${imageModeSuffix}`
-      : baseUserPrompt
+      ? applyPromptTemplate(userPromptOverride, { concept, instructions, code, outputMode }, promptOverrides)
+      : generateCodeEditPrompt(concept, instructions, code, outputMode)
+    const systemPrompt = baseSystemPrompt
+    const userPrompt = baseUserPrompt
 
     logger.info('开始 AI 修改代码', { concept, outputMode })
 

src/services/concept-designer.ts

@@ -111,55 +111,9 @@ function buildVisionUserMessage(
   ]
 }
 
-function buildImageDesignerPrompt(concept: string, seed: string): string {
-  return `你是静态数学可视化总导演，不是动画导演。请输出结构化自然语言设计方案，不要代码。
-
-任务概念：${concept}
-随机种子：${seed}
-
-硬约束：
-1. 画布采用 16:9，中心 (0,0)，坐标边界 x[-8,8], y[-4.5,4.5]。
-2. 每张图必须使用分栏布局，不允许把推导全部纵向堆叠。
-3. 对多步骤/多选项题，采用覆盖式推进：当前项讲完后淡出，再展示下一项。
-4. 零重叠：文本、公式、几何标注在静止与运动描述中都不能重叠。
-5. 禁止伪代码，禁止输出编程语言片段。
-6. 输出包含：核心概念拆解、分屏布局定义、分步执行指令（含镜头术语）、全局视觉规格表。
-
-术语库（请直接使用）：Transform, Focus, Fade In, Fade Out。`
-}
-
-function buildImageCodePrompt(concept: string, seed: string, sceneDesign: string): string {
-  return `你需要基于设计方案生成 Manim 代码，目标是“多张静态图”。
-
-概念：${concept}
-种子：${seed}
-
-设计方案：
-${sceneDesign}
-
-输出协议（必须严格遵守）：
-1. 只输出代码，不要解释，不要 Markdown。
-2. 代码必须由若干锚点块组成，且块外禁止任何字符：
-### YON_IMAGE_1_START ###
-...python code...
-### YON_IMAGE_1_END ###
-### YON_IMAGE_2_START ###
-...python code...
-### YON_IMAGE_2_END ###
-3. 编号从 1 连续递增。
-4. 每个块只负责一张图，必须包含可渲染的 Scene 类。
-5. 静态构图优先：以布局、标注、结论呈现为主，避免复杂动画。
-6. 所有图都要保证“分栏+覆盖式推导”要求，不重叠。
-
-实现规范：
-- 使用 from manim import *
-- 兼容 Manim Community v0.19.2
-- 代码必须可运行`
-}
-
-/**
- * 判断是否应该在不带图片的情况下重试
- */
+/**
+ * 判断是否应该在不带图片的情况下重试
+ */
 function shouldRetryWithoutImages(error: unknown): boolean {
   if (!(error instanceof OpenAI.APIError)) {
     return false
@@ -309,12 +263,8 @@ async function generateSceneDesign(
     const systemPrompt = promptOverrides?.roles?.conceptDesigner?.system || SYSTEM_PROMPTS.conceptDesigner
     const userPromptOverride = promptOverrides?.roles?.conceptDesigner?.user
     const userPrompt = userPromptOverride
-      ? applyPromptTemplate(userPromptOverride, { concept, seed }, promptOverrides)
-      : (
-        outputMode === 'image'
-          ? buildImageDesignerPrompt(concept, seed)
-          : generateConceptDesignerPrompt(concept, seed)
-      )
+      ? applyPromptTemplate(userPromptOverride, { concept, seed, outputMode }, promptOverrides)
+      : generateConceptDesignerPrompt(concept, seed, outputMode)
 
     logger.info('开始阶段1：生成场景设计方案', { concept, outputMode, seed, hasImages: !!referenceImages?.length })
 
@@ -438,12 +388,8 @@ async function generateCodeFromDesign(
     const systemPrompt = promptOverrides?.roles?.codeGeneration?.system || SYSTEM_PROMPTS.codeGeneration
     const userPromptOverride = promptOverrides?.roles?.codeGeneration?.user
     const userPrompt = userPromptOverride
-      ? applyPromptTemplate(userPromptOverride, { concept, seed, sceneDesign }, promptOverrides)
-      : (
-        outputMode === 'image'
-          ? buildImageCodePrompt(concept, seed, sceneDesign)
-          : generateCodeGenerationPrompt(concept, seed, sceneDesign)
-      )
+      ? applyPromptTemplate(userPromptOverride, { concept, seed, sceneDesign, outputMode }, promptOverrides)
+      : generateCodeGenerationPrompt(concept, seed, sceneDesign, outputMode)
 
     logger.info('开始阶段2：根据设计方案生成代码', { concept, outputMode, seed })