From 6fb98f5812c518cdc8d34cd8b8559b422f2df91e Mon Sep 17 00:00:00 2001
From: petezhuang <petezhuang13@163.com>
Date: Mon, 11 Aug 2025 15:25:05 +0800
Subject: [PATCH 01/49] feat(spx-gui):init painter

---
 spx-gui/src/components/editor/common/painter/painter.vue | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 spx-gui/src/components/editor/common/painter/painter.vue

diff --git a/spx-gui/src/components/editor/common/painter/painter.vue b/spx-gui/src/components/editor/common/painter/painter.vue
new file mode 100644
index 000000000..e69de29bb

From 6d9238ea36c33e6a2334cbaf590a54e708a17cf7 Mon Sep 17 00:00:00 2001
From: petezhuang <petezhuang13@163.com>
Date: Mon, 11 Aug 2025 16:51:13 +0800
Subject: [PATCH 02/49] feat(spx-gui):basic infrastructure of painter

---
 spx-gui/package-lock.json                     |  13 +
 spx-gui/package.json                          |   1 +
 .../common/painter/components/draw_line.vue   |   0
 .../editor/common/painter/painter.vue         | 653 ++++++++++++++++++
 .../editor/sprite/CostumeDetail.vue           |  32 +-
 5 files changed, 691 insertions(+), 8 deletions(-)
 create mode 100644 spx-gui/src/components/editor/common/painter/components/draw_line.vue

diff --git a/spx-gui/package-lock.json b/spx-gui/package-lock.json
index 1d8b35882..8aa4be1b1 100644
--- a/spx-gui/package-lock.json
+++ b/spx-gui/package-lock.json
@@ -52,6 +52,7 @@
         "naive-ui": "^2.38.1",
         "nanoid": "^5.0.5",
         "npm": "^10.3.0",
+        "paper": "^0.12.18",
         "prettier": "^3.2.2",
         "property-information": "^6.5.0",
         "qiniu-js": "^3.4.2",
@@ -11255,6 +11256,18 @@
       "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
       "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
     },
+    "node_modules/paper": {
+      "version": "0.12.18",
+      "resolved": "https://registry.npmjs.org/paper/-/paper-0.12.18.tgz",
+      "integrity": "sha512-ZSLIEejQTJZuYHhSSqAf4jXOnii0kPhCJGAnYAANtdS72aNwXJ9cP95tZHgq1tnNpvEwgQhggy+4OarviqTCGw==",
+      "license": "MIT",
+      "workspaces": [
+        "packages/*"
+      ],
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
diff --git a/spx-gui/package.json b/spx-gui/package.json
index 38b149bec..23b187383 100644
--- a/spx-gui/package.json
+++ b/spx-gui/package.json
@@ -58,6 +58,7 @@
     "naive-ui": "^2.38.1",
     "nanoid": "^5.0.5",
     "npm": "^10.3.0",
+    "paper": "^0.12.18",
     "prettier": "^3.2.2",
     "property-information": "^6.5.0",
     "qiniu-js": "^3.4.2",
diff --git a/spx-gui/src/components/editor/common/painter/components/draw_line.vue b/spx-gui/src/components/editor/common/painter/components/draw_line.vue
new file mode 100644
index 000000000..e69de29bb
diff --git a/spx-gui/src/components/editor/common/painter/painter.vue b/spx-gui/src/components/editor/common/painter/painter.vue
index e69de29bb..162b295e8 100644
--- a/spx-gui/src/components/editor/common/painter/painter.vue
+++ b/spx-gui/src/components/editor/common/painter/painter.vue
@@ -0,0 +1,653 @@
+<template>
+  <div class="painter-container">
+    <!-- 左侧工具栏 -->
+    <div class="toolbar">
+      <div class="tool-section">
+        <h3 class="tool-title">绘图工具</h3>
+        <button 
+          :class="['tool-btn', { active: currentTool === 'line' }]"
+          @click="selectTool('line')"
+          title="直线工具"
+        >
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <line x1="7" y1="17" x2="17" y2="7"></line>
+          </svg>
+          <span>直线</span>
+        </button>
+        
+        <button 
+          :class="['tool-btn', { active: currentTool === 'select' }]"
+          @click="selectTool('select')"
+          title="选择工具"
+        >
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="m3 3 7.07 16.97 2.51-7.39 7.39-2.51L3 3z"></path>
+            <path d="m13 13 6 6"></path>
+          </svg>
+          <span>变形</span>
+        </button>
+      </div>
+      
+      <div class="tool-section">
+        <h3 class="tool-title">操作</h3>
+        <button class="tool-btn action-btn" @click="clearCanvas" title="清空画布">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <polyline points="3,6 5,6 21,6"></polyline>
+            <path d="m19,6v14a2,2 0 0,1 -2,2H7a2,2 0 0,1 -2,-2V6m3,0V4a2,2 0 0,1 2,-2h4a2,2 0 0,1 2,2v2"></path>
+          </svg>
+          <span>清空</span>
+        </button>
+      </div>
+    </div>
+
+    <!-- 画布区域 -->
+    <div class="canvas-wrapper">
+      <canvas 
+        ref="canvasRef" 
+        :width="canvasWidth" 
+        :height="canvasHeight"
+        @click="handleCanvasClick"
+        @mousedown="handleMouseDown"
+        @mousemove="handleMouseMove"
+      ></canvas>
+      
+      <!-- 临时直线预览 -->
+      <svg 
+        v-if="isDrawingLine && startPoint"
+        class="preview-layer"
+        :width="canvasWidth" 
+        :height="canvasHeight"
+      >
+        <line 
+          :x1="startPoint.x" 
+          :y1="startPoint.y" 
+          :x2="previewPoint.x" 
+          :y2="previewPoint.y" 
+          stroke="#2196f3" 
+          stroke-width="3" 
+          stroke-dasharray="5,5"
+        />
+      </svg>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import paper from 'paper'
+
+// 工具类型
+type ToolType = 'line' | 'select'
+
+// TypeScript 接口定义
+interface ExtendedItem extends paper.Item {
+  isControlPoint?: boolean
+  segmentIndex?: number
+  parentPath?: paper.Path
+}
+
+interface Point {
+  x: number
+  y: number
+}
+
+// 响应式变量
+const canvasRef = ref<HTMLCanvasElement | null>(null)
+const canvasWidth = ref<number>(800)
+const canvasHeight = ref<number>(600)
+
+// 工具状态
+const currentTool = ref<ToolType>('line')
+const isDrawingLine = ref<boolean>(false)
+const startPoint = ref<Point | null>(null)
+const previewPoint = ref<Point>({ x: 0, y: 0 })
+
+// 状态管理
+const isDragging = ref<boolean>(false)
+const selectedPoint = ref<ExtendedItem | null>(null)
+const allPaths = ref<paper.Path[]>([])
+const controlPoints = ref<ExtendedItem[]>([])
+
+// 初始化 Paper.js
+const initPaper = (): void => {
+  if (!canvasRef.value) return
+  
+  paper.setup(canvasRef.value)
+  
+  // 设置画布背景
+  const background = new paper.Path.Rectangle({
+    point: [0, 0],
+    size: [canvasWidth.value, canvasHeight.value],
+    fillColor: '#ffffff'
+  })
+  
+  // 使用 update() 替代 draw()
+  paper.view.update()
+}
+
+// 选择工具
+const selectTool = (tool: ToolType): void => {
+  currentTool.value = tool
+  isDrawingLine.value = false
+  startPoint.value = null
+  hideControlPoints()
+}
+
+// 创建控制点
+const createControlPoint = (position: paper.Point): ExtendedItem => {
+  const point = new paper.Path.Circle({
+    center: position,
+    radius: 8,
+    fillColor: '#ff4444',
+    strokeColor: '#cc0000',
+    strokeWidth: 2
+  }) as ExtendedItem
+  
+  point.isControlPoint = true
+  
+  // 添加悬停效果
+  point.onMouseEnter = () => {
+    point.fillColor = new paper.Color('#ff6666')
+    point.scale(1.25) // 放大控制点
+    paper.view.update()
+  }
+  
+  point.onMouseLeave = () => {
+    point.fillColor = new paper.Color('#ff4444')
+    point.scale(0.8) // 恢复原始大小
+    paper.view.update()
+  }
+  
+  return point
+}
+
+// 显示路径的控制点
+const showControlPoints = (path: paper.Path): void => {
+  hideControlPoints()
+  
+  if (path && path.segments) {
+    path.segments.forEach((segment: paper.Segment, index: number) => {
+      const controlPoint = createControlPoint(segment.point)
+      controlPoint.segmentIndex = index
+      controlPoint.parentPath = path
+      controlPoints.value.push(controlPoint)
+    })
+  }
+}
+
+// 隐藏控制点
+const hideControlPoints = (): void => {
+  controlPoints.value.forEach((point: ExtendedItem) => {
+    if (point && point.parent) {
+      point.remove()
+    }
+  })
+  controlPoints.value = []
+}
+
+// 检测点击的路径
+const getPathAtPoint = (point: paper.Point): paper.Path | null => {
+  const hitResult = paper.project.hitTest(point, {
+    segments: false,
+    stroke: true,
+    fill: false,
+    tolerance: 12
+  })
+  
+  if (hitResult && hitResult.item && !(hitResult.item as ExtendedItem).isControlPoint) {
+    return hitResult.item as paper.Path
+  }
+  return null
+}
+
+// 检测点击的控制点
+const getControlPointAtPoint = (point: paper.Point): ExtendedItem | null => {
+  const hitResult = paper.project.hitTest(point, {
+    segments: false,
+    stroke: false,
+    fill: true,
+    tolerance: 15
+  })
+  
+  if (hitResult && hitResult.item && (hitResult.item as ExtendedItem).isControlPoint) {
+    return hitResult.item as ExtendedItem
+  }
+  return null
+}
+
+// 局部平滑函数：只影响当前点及其相邻的线段
+const smoothLocalSegments = (path: paper.Path, segmentIndex: number): void => {
+  const segments = path.segments
+  const currentSegment = segments[segmentIndex]
+  
+  if (!currentSegment) return
+  
+  // 计算影响范围：前一个点到后一个点
+  const prevIndex = Math.max(0, segmentIndex - 1)
+  const nextIndex = Math.min(segments.length - 1, segmentIndex + 1)
+  
+  // 如果是端点，使用不同的处理方式
+  if (segmentIndex === 0 || segmentIndex === segments.length - 1) {
+    // 端点：只影响连接的那一段
+    if (segmentIndex === 0 && segments.length > 1) {
+      // 起始端点
+      const nextSeg = segments[1]
+      calculateLocalHandles(currentSegment, nextSeg, null)
+    } else if (segmentIndex === segments.length - 1 && segments.length > 1) {
+      // 结束端点
+      const prevSeg = segments[segments.length - 2]
+      calculateLocalHandles(currentSegment, null, prevSeg)
+    }
+  } else {
+    // 中间点：影响前后两段
+    const prevSeg = segments[prevIndex]
+    const nextSeg = segments[nextIndex]
+    calculateLocalHandles(currentSegment, nextSeg, prevSeg)
+  }
+}
+
+// 计算局部贝塞尔曲线控制点
+const calculateLocalHandles = (
+  currentSeg: paper.Segment, 
+  nextSeg: paper.Segment | null, 
+  prevSeg: paper.Segment | null
+): void => {
+  // 清除现有的控制点
+  currentSeg.clearHandles()
+  
+  if (nextSeg && prevSeg) {
+    // 中间点：计算平滑的控制点
+    const vector1 = currentSeg.point.subtract(prevSeg.point)
+    const vector2 = nextSeg.point.subtract(currentSeg.point)
+    
+    // 计算控制点方向和长度
+    const angle1 = vector1.angle
+    const angle2 = vector2.angle
+    const avgAngle = (angle1 + angle2) / 2
+    
+    const length1 = vector1.length * 0.3
+    const length2 = vector2.length * 0.3
+    
+    // 设置控制点
+    currentSeg.handleIn = new paper.Point({
+      angle: avgAngle + 180,
+      length: length1
+    })
+    currentSeg.handleOut = new paper.Point({
+      angle: avgAngle,
+      length: length2
+    })
+  } else if (nextSeg) {
+    // 起始点：只设置出控制点
+    const vector = nextSeg.point.subtract(currentSeg.point)
+    currentSeg.handleOut = vector.multiply(0.3)
+  } else if (prevSeg) {
+    // 结束点：只设置入控制点
+    const vector = currentSeg.point.subtract(prevSeg.point)
+    currentSeg.handleIn = vector.multiply(0.3)
+  }
+}
+
+// 在路径上添加新的控制点
+const addControlPointOnPath = (path: paper.Path, clickPoint: paper.Point): void => {
+  const location = path.getNearestLocation(clickPoint)
+  if (location) {
+    // 在最近的位置分割路径，创建新的段点
+    const newSegment = path.insert(location.index + 1, location.point)
+    
+    // 局部平滑新添加的点及其相邻区域
+    smoothLocalSegments(path, location.index + 1)
+    
+    // 重新显示控制点
+    showControlPoints(path)
+    paper.view.update()
+  }
+}
+
+// 鼠标按下事件（用于开始拖拽控制点）
+const handleMouseDown = (event: MouseEvent): void => {
+  if (currentTool.value !== 'select') return
+  
+  const rect = canvasRef.value?.getBoundingClientRect()
+  if (!rect) return
+  
+  const point = new paper.Point(
+    event.clientX - rect.left,
+    event.clientY - rect.top
+  )
+  
+  // 检查是否点击了控制点
+  const controlPoint = getControlPointAtPoint(point)
+  if (controlPoint) {
+    isDragging.value = true
+    selectedPoint.value = controlPoint
+    // 阻止事件冒泡，避免触发 click 事件
+    event.preventDefault()
+    event.stopPropagation()
+  }
+}
+
+// 画布点击事件
+const handleCanvasClick = (event: MouseEvent): void => {
+  const rect = canvasRef.value?.getBoundingClientRect()
+  if (!rect) return
+  
+  const point = new paper.Point(
+    event.clientX - rect.left,
+    event.clientY - rect.top
+  )
+  
+  if (currentTool.value === 'line') {
+    if (!isDrawingLine.value) {
+      // 开始画线
+      isDrawingLine.value = true
+      startPoint.value = { x: point.x, y: point.y }
+    } else {
+      // 完成画线 - 创建路径而不是直线，便于后续转换为曲线
+      const line = new paper.Path()
+      line.add(new paper.Point(startPoint.value!.x, startPoint.value!.y))
+      line.add(point)
+      line.strokeColor = new paper.Color('#2196f3')
+      line.strokeWidth = 3
+      
+      // 设置线段连接方式为圆滑
+      line.strokeCap = 'round'
+      line.strokeJoin = 'round'
+      
+      // 添加悬停效果
+      line.onMouseEnter = () => {
+        if (currentTool.value === 'select') {
+          line.strokeColor = new paper.Color('#1976d2')
+          line.strokeWidth = 4
+          paper.view.update()
+        }
+      }
+      
+      line.onMouseLeave = () => {
+        if (currentTool.value === 'select') {
+          line.strokeColor = new paper.Color('#2196f3')
+          line.strokeWidth = 3
+          paper.view.update()
+        }
+      }
+      
+      allPaths.value.push(line)
+      
+      // 重置状态
+      isDrawingLine.value = false
+      startPoint.value = null
+      
+      paper.view.update()
+    }
+  } else if (currentTool.value === 'select') {
+    // 检查是否点击了控制点（优先级最高）
+    const controlPoint = getControlPointAtPoint(point)
+    if (controlPoint) {
+      // 不在这里设置拖拽状态，由 mousedown 处理
+      return
+    }
+    
+    // 检查是否点击了现有路径
+    const clickedPath = getPathAtPoint(point)
+    if (clickedPath) {
+      // 直接在点击位置添加控制点
+      addControlPointOnPath(clickedPath, point)
+      return
+    }
+    
+    // 点击空白区域，隐藏控制点
+    hideControlPoints()
+    paper.view.update()
+  }
+}
+
+// 鼠标移动事件
+const handleMouseMove = (event: MouseEvent): void => {
+  const rect = canvasRef.value?.getBoundingClientRect()
+  if (!rect) return
+  
+  const point = new paper.Point(
+    event.clientX - rect.left,
+    event.clientY - rect.top
+  )
+  
+  // 更新预览线条
+  if (isDrawingLine.value && startPoint.value) {
+    previewPoint.value = { x: point.x, y: point.y }
+  }
+  
+  // 拖拽控制点
+  if (isDragging.value && selectedPoint.value) {
+    selectedPoint.value.position = point
+    
+    // 更新对应的路径段点
+    if (selectedPoint.value.parentPath && selectedPoint.value.segmentIndex !== undefined) {
+      const segment = selectedPoint.value.parentPath.segments[selectedPoint.value.segmentIndex]
+      if (segment) {
+        segment.point = point
+        
+        // 局部平滑：只影响相邻的线段
+        smoothLocalSegments(selectedPoint.value.parentPath, selectedPoint.value.segmentIndex)
+      }
+    }
+    
+    paper.view.update()
+  }
+}
+
+// 鼠标释放事件（用于结束拖拽）
+const handleMouseUp = (): void => {
+  if (isDragging.value) {
+    isDragging.value = false
+    selectedPoint.value = null
+  }
+}
+
+// 清空画布
+const clearCanvas = (): void => {
+  hideControlPoints()
+  allPaths.value.forEach((path: paper.Path) => {
+    if (path && path.parent) {
+      path.remove()
+    }
+  })
+  allPaths.value = []
+  
+  // 重置状态
+  isDrawingLine.value = false
+  startPoint.value = null
+  
+  paper.project.clear()
+  
+  // 重新创建背景
+  const background = new paper.Path.Rectangle({
+    point: [0, 0],
+    size: [canvasWidth.value, canvasHeight.value],
+    fillColor: '#ffffff'
+  })
+  
+  paper.view.update()
+}
+
+onMounted(() => {
+  initPaper()
+  
+  // 添加键盘事件监听
+  const handleKeyDown = (event: KeyboardEvent): void => {
+    if (event.key === 'Escape') {
+      hideControlPoints()
+      isDrawingLine.value = false
+      startPoint.value = null
+      paper.view.update()
+    } else if (event.key === 'Delete' || event.key === 'Backspace') {
+      // 删除选中的路径
+      if (controlPoints.value.length > 0 && controlPoints.value[0].parentPath) {
+        const pathToDelete = controlPoints.value[0].parentPath
+        pathToDelete.remove()
+        allPaths.value = allPaths.value.filter((path: paper.Path) => path !== pathToDelete)
+        hideControlPoints()
+        paper.view.update()
+      }
+    }
+  }
+  
+  // 添加鼠标释放事件监听
+  window.addEventListener('keydown', handleKeyDown)
+  window.addEventListener('mouseup', handleMouseUp)
+  
+  // 清理函数
+  onUnmounted(() => {
+    window.removeEventListener('keydown', handleKeyDown)
+    window.removeEventListener('mouseup', handleMouseUp)
+  })
+})
+</script>
+
+<style scoped>
+.painter-container {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  background-color: #f5f5f5;
+}
+
+/* 工具栏样式 */
+.toolbar {
+  width: 200px;
+  background-color: #ffffff;
+  border-right: 1px solid #e0e0e0;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
+}
+
+.tool-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.tool-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #333;
+  margin: 0 0 8px 0;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.tool-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  background-color: #fff;
+  color: #666;
+  cursor: pointer;
+  font-size: 14px;
+  transition: all 0.2s ease;
+  text-align: left;
+}
+
+.tool-btn:hover {
+  background-color: #f8f9fa;
+  border-color: #2196f3;
+  color: #2196f3;
+}
+
+.tool-btn.active {
+  background-color: #e3f2fd;
+  border-color: #2196f3;
+  color: #2196f3;
+}
+
+.tool-btn.action-btn {
+  background-color: #fff3e0;
+  border-color: #ff9800;
+  color: #ff9800;
+}
+
+.tool-btn.action-btn:hover {
+  background-color: #ffe0b2;
+  border-color: #f57c00;
+  color: #f57c00;
+}
+
+.tool-btn svg {
+  flex-shrink: 0;
+}
+
+.tool-btn span {
+  font-weight: 500;
+}
+
+/* 画布区域样式 */
+.canvas-wrapper {
+  flex: 1;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
+}
+
+canvas {
+  border: 2px solid #ddd;
+  border-radius: 8px;
+  background-color: white;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  position: relative;
+  z-index: 1;
+}
+
+canvas:hover {
+  border-color: #2196f3;
+}
+
+/* SVG 预览层 */
+.preview-layer {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  pointer-events: none;
+  z-index: 2;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .painter-container {
+    flex-direction: column;
+  }
+  
+  .toolbar {
+    width: 100%;
+    flex-direction: row;
+    padding: 12px;
+    gap: 12px;
+    overflow-x: auto;
+  }
+  
+  .tool-section {
+    flex-direction: row;
+    min-width: fit-content;
+  }
+  
+  .tool-title {
+    writing-mode: vertical-rl;
+    text-orientation: mixed;
+    min-width: 40px;
+    border-bottom: none;
+    border-right: 1px solid #e0e0e0;
+    padding-right: 8px;
+    margin-right: 8px;
+  }
+  
+  .canvas-wrapper {
+    padding: 12px;
+  }
+}
+</style>
diff --git a/spx-gui/src/components/editor/sprite/CostumeDetail.vue b/spx-gui/src/components/editor/sprite/CostumeDetail.vue
index 0fd2b94ef..710545168 100644
--- a/spx-gui/src/components/editor/sprite/CostumeDetail.vue
+++ b/spx-gui/src/components/editor/sprite/CostumeDetail.vue
@@ -1,21 +1,20 @@
 <template>
   <EditorItemDetail :name="costume.name" @rename="handleRename">
-    <div class="img-wrapper">
+    <div class="painter-wrapper">
       <CheckerboardBackground class="background" />
-      <UIImg class="img" :src="imgSrc" :loading="imgLoading" />
+      <Painter class="painter" />
     </div>
   </EditorItemDetail>
 </template>
 
 <script setup lang="ts">
-import { UIImg } from '@/components/ui'
 import { useMessageHandle } from '@/utils/exception'
-import { useFileUrl } from '@/utils/file'
 import type { Costume } from '@/models/costume'
 import type { Sprite } from '@/models/sprite'
 import { useRenameCostume } from '@/components/asset'
 import EditorItemDetail from '../common/EditorItemDetail.vue'
 import CheckerboardBackground from './CheckerboardBackground.vue'
+import Painter from '@/components/editor/common/painter/painter.vue'
 
 const props = defineProps<{
   costume: Costume
@@ -27,17 +26,16 @@ const handleRename = useMessageHandle(() => renameCostume(props.costume), {
   en: 'Failed to rename costume',
   zh: '重命名造型失败'
 }).fn
-
-const [imgSrc, imgLoading] = useFileUrl(() => props.costume.img)
 </script>
 
 <style lang="scss" scoped>
-.img-wrapper {
+.painter-wrapper {
   width: 100%;
   flex: 1 1 0;
   border-radius: 8px;
   position: relative;
   overflow: hidden;
+  min-height: 400px; // 确保画板有足够的高度
 }
 
 .background {
@@ -48,8 +46,26 @@ const [imgSrc, imgLoading] = useFileUrl(() => props.costume.img)
   right: 0;
 }
 
-.img {
+.painter {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  z-index: 1; // 确保画板在背景之上
+}
+
+// 覆盖画板组件的样式以适应容器
+:deep(.painter-container) {
+  padding: 0;
+  background-color: transparent;
   width: 100%;
   height: 100%;
 }
+
+:deep(canvas) {
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  width: 100% !important;
+  height: 100% !important;
+}
 </style>

From b04690ec7ab1f381cc480128d746c5deb2b63cc7 Mon Sep 17 00:00:00 2001
From: petezhuang <petezhuang13@163.com>
Date: Mon, 11 Aug 2025 17:22:16 +0800
Subject: [PATCH 03/49] feat(spx-gui):Decoupling the painter board and draw
 line components

---
 .../common/painter/components/draw_line.vue   | 136 ++++++++++++++++++
 .../editor/common/painter/painter.vue         | 114 +++++----------
 2 files changed, 172 insertions(+), 78 deletions(-)

diff --git a/spx-gui/src/components/editor/common/painter/components/draw_line.vue b/spx-gui/src/components/editor/common/painter/components/draw_line.vue
index e69de29bb..845c6d360 100644
--- a/spx-gui/src/components/editor/common/painter/components/draw_line.vue
+++ b/spx-gui/src/components/editor/common/painter/components/draw_line.vue
@@ -0,0 +1,136 @@
+<template>
+  <!-- 临时直线预览 -->
+  <svg 
+    v-if="isDrawing && startPoint"
+    class="preview-layer"
+    :width="canvasWidth" 
+    :height="canvasHeight"
+  >
+    <line 
+      :x1="startPoint.x" 
+      :y1="startPoint.y" 
+      :x2="previewPoint.x" 
+      :y2="previewPoint.y" 
+      stroke="#2196f3" 
+      stroke-width="3" 
+      stroke-dasharray="5,5"
+    />
+  </svg>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import paper from 'paper'
+
+// Props
+interface Props {
+  canvasWidth: number
+  canvasHeight: number
+  isActive: boolean
+}
+
+const props = defineProps<Props>()
+
+// Emits
+interface Emits {
+  (e: 'line-created', line: paper.Path): void
+}
+
+const emit = defineEmits<Emits>()
+
+// 接口定义
+interface Point {
+  x: number
+  y: number
+}
+
+// 响应式变量
+const isDrawing = ref<boolean>(false)
+const startPoint = ref<Point | null>(null)
+const previewPoint = ref<Point>({ x: 0, y: 0 })
+
+// 创建直线路径
+const createLine = (start: Point, end: Point): paper.Path => {
+  const line = new paper.Path()
+  line.add(new paper.Point(start.x, start.y))
+  line.add(new paper.Point(end.x, end.y))
+  line.strokeColor = new paper.Color('#2196f3')
+  line.strokeWidth = 3
+  
+  // 设置线段连接方式为圆滑
+  line.strokeCap = 'round'
+  line.strokeJoin = 'round'
+  
+  // 添加悬停效果
+  line.onMouseEnter = () => {
+    line.strokeColor = new paper.Color('#1976d2')
+    line.strokeWidth = 4
+    paper.view.update()
+  }
+  
+  line.onMouseLeave = () => {
+    line.strokeColor = new paper.Color('#2196f3')
+    line.strokeWidth = 3
+    paper.view.update()
+  }
+  
+  return line
+}
+
+// 处理画布点击
+const handleCanvasClick = (point: Point): void => {
+  if (!props.isActive) return
+  
+  if (!isDrawing.value) {
+    // 开始画线
+    isDrawing.value = true
+    startPoint.value = { x: point.x, y: point.y }
+  } else {
+    // 完成画线
+    const line = createLine(startPoint.value!, point)
+    emit('line-created', line)
+    
+    // 重置状态
+    resetDrawing()
+  }
+}
+
+// 处理鼠标移动（更新预览）
+const handleMouseMove = (point: Point): void => {
+  if (!props.isActive || !isDrawing.value || !startPoint.value) return
+  
+  previewPoint.value = { x: point.x, y: point.y }
+}
+
+// 重置绘制状态
+const resetDrawing = (): void => {
+  isDrawing.value = false
+  startPoint.value = null
+  previewPoint.value = { x: 0, y: 0 }
+}
+
+// 监听工具切换，重置状态
+watch(() => props.isActive, (newValue) => {
+  if (!newValue) {
+    resetDrawing()
+  }
+})
+
+// 暴露方法给父组件
+defineExpose({
+  handleCanvasClick,
+  handleMouseMove,
+  resetDrawing,
+  isDrawing: isDrawing.value
+})
+</script>
+
+<style scoped>
+.preview-layer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  z-index: 2;
+}
+</style>
diff --git a/spx-gui/src/components/editor/common/painter/painter.vue b/spx-gui/src/components/editor/common/painter/painter.vue
index 162b295e8..effeb5f31 100644
--- a/spx-gui/src/components/editor/common/painter/painter.vue
+++ b/spx-gui/src/components/editor/common/painter/painter.vue
@@ -51,23 +51,14 @@
         @mousemove="handleMouseMove"
       ></canvas>
       
-      <!-- 临时直线预览 -->
-      <svg 
-        v-if="isDrawingLine && startPoint"
-        class="preview-layer"
-        :width="canvasWidth" 
-        :height="canvasHeight"
-      >
-        <line 
-          :x1="startPoint.x" 
-          :y1="startPoint.y" 
-          :x2="previewPoint.x" 
-          :y2="previewPoint.y" 
-          stroke="#2196f3" 
-          stroke-width="3" 
-          stroke-dasharray="5,5"
-        />
-      </svg>
+      <!-- 直线绘制组件 -->
+      <DrawLine
+        ref="drawLineRef"
+        :canvas-width="canvasWidth"
+        :canvas-height="canvasHeight"
+        :is-active="currentTool === 'line'"
+        @line-created="handleLineCreated"
+      />
     </div>
   </div>
 </template>
@@ -75,6 +66,7 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from 'vue'
 import paper from 'paper'
+import DrawLine from './components/draw_line.vue'
 
 // 工具类型
 type ToolType = 'line' | 'select'
@@ -98,9 +90,7 @@ const canvasHeight = ref<number>(600)
 
 // 工具状态
 const currentTool = ref<ToolType>('line')
-const isDrawingLine = ref<boolean>(false)
-const startPoint = ref<Point | null>(null)
-const previewPoint = ref<Point>({ x: 0, y: 0 })
+const drawLineRef = ref<InstanceType<typeof DrawLine> | null>(null)
 
 // 状态管理
 const isDragging = ref<boolean>(false)
@@ -128,11 +118,21 @@ const initPaper = (): void => {
 // 选择工具
 const selectTool = (tool: ToolType): void => {
   currentTool.value = tool
-  isDrawingLine.value = false
-  startPoint.value = null
+  
+  // 重置直线绘制状态
+  if (drawLineRef.value) {
+    drawLineRef.value.resetDrawing()
+  }
+  
   hideControlPoints()
 }
 
+// 处理直线创建
+const handleLineCreated = (line: paper.Path): void => {
+  allPaths.value.push(line)
+  paper.view.update()
+}
+
 // 创建控制点
 const createControlPoint = (position: paper.Point): ExtendedItem => {
   const point = new paper.Path.Circle({
@@ -338,46 +338,9 @@ const handleCanvasClick = (event: MouseEvent): void => {
   )
   
   if (currentTool.value === 'line') {
-    if (!isDrawingLine.value) {
-      // 开始画线
-      isDrawingLine.value = true
-      startPoint.value = { x: point.x, y: point.y }
-    } else {
-      // 完成画线 - 创建路径而不是直线，便于后续转换为曲线
-      const line = new paper.Path()
-      line.add(new paper.Point(startPoint.value!.x, startPoint.value!.y))
-      line.add(point)
-      line.strokeColor = new paper.Color('#2196f3')
-      line.strokeWidth = 3
-      
-      // 设置线段连接方式为圆滑
-      line.strokeCap = 'round'
-      line.strokeJoin = 'round'
-      
-      // 添加悬停效果
-      line.onMouseEnter = () => {
-        if (currentTool.value === 'select') {
-          line.strokeColor = new paper.Color('#1976d2')
-          line.strokeWidth = 4
-          paper.view.update()
-        }
-      }
-      
-      line.onMouseLeave = () => {
-        if (currentTool.value === 'select') {
-          line.strokeColor = new paper.Color('#2196f3')
-          line.strokeWidth = 3
-          paper.view.update()
-        }
-      }
-      
-      allPaths.value.push(line)
-      
-      // 重置状态
-      isDrawingLine.value = false
-      startPoint.value = null
-      
-      paper.view.update()
+    // 委托给 DrawLine 组件处理
+    if (drawLineRef.value) {
+      drawLineRef.value.handleCanvasClick({ x: point.x, y: point.y })
     }
   } else if (currentTool.value === 'select') {
     // 检查是否点击了控制点（优先级最高）
@@ -411,9 +374,9 @@ const handleMouseMove = (event: MouseEvent): void => {
     event.clientY - rect.top
   )
   
-  // 更新预览线条
-  if (isDrawingLine.value && startPoint.value) {
-    previewPoint.value = { x: point.x, y: point.y }
+  // 委托给 DrawLine 组件处理预览
+  if (currentTool.value === 'line' && drawLineRef.value) {
+    drawLineRef.value.handleMouseMove({ x: point.x, y: point.y })
   }
   
   // 拖拽控制点
@@ -453,9 +416,10 @@ const clearCanvas = (): void => {
   })
   allPaths.value = []
   
-  // 重置状态
-  isDrawingLine.value = false
-  startPoint.value = null
+  // 重置直线绘制状态
+  if (drawLineRef.value) {
+    drawLineRef.value.resetDrawing()
+  }
   
   paper.project.clear()
   
@@ -476,8 +440,9 @@ onMounted(() => {
   const handleKeyDown = (event: KeyboardEvent): void => {
     if (event.key === 'Escape') {
       hideControlPoints()
-      isDrawingLine.value = false
-      startPoint.value = null
+      if (drawLineRef.value) {
+        drawLineRef.value.resetDrawing()
+      }
       paper.view.update()
     } else if (event.key === 'Delete' || event.key === 'Backspace') {
       // 删除选中的路径
@@ -608,14 +573,7 @@ canvas:hover {
   border-color: #2196f3;
 }
 
-/* SVG 预览层 */
-.preview-layer {
-  position: absolute;
-  top: 20px;
-  left: 20px;
-  pointer-events: none;
-  z-index: 2;
-}
+
 
 /* 响应式设计 */
 @media (max-width: 768px) {

From 6cd49ff95c6a433d98253101f81cefe32607b448 Mon Sep 17 00:00:00 2001
From: petezhuang <petezhuang13@163.com>
Date: Tue, 12 Aug 2025 10:39:12 +0800
Subject: [PATCH 04/49] fix(spx-gui):fix wrong start point initial position
 while drawing line

---
 .../editor/common/painter/components/draw_line.vue        | 1 +
 spx-gui/src/components/editor/common/painter/painter.vue  | 8 +++-----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/spx-gui/src/components/editor/common/painter/components/draw_line.vue b/spx-gui/src/components/editor/common/painter/components/draw_line.vue
index 845c6d360..01f7c461b 100644
--- a/spx-gui/src/components/editor/common/painter/components/draw_line.vue
+++ b/spx-gui/src/components/editor/common/painter/components/draw_line.vue
@@ -85,6 +85,7 @@ const handleCanvasClick = (point: Point): void => {
     // 开始画线
     isDrawing.value = true
     startPoint.value = { x: point.x, y: point.y }
+    previewPoint.value = { x: point.x, y: point.y }
   } else {
     // 完成画线
     const line = createLine(startPoint.value!, point)
diff --git a/spx-gui/src/components/editor/common/painter/painter.vue b/spx-gui/src/components/editor/common/painter/painter.vue
index effeb5f31..adcc9fbf5 100644
--- a/spx-gui/src/components/editor/common/painter/painter.vue
+++ b/spx-gui/src/components/editor/common/painter/painter.vue
@@ -91,7 +91,6 @@ const canvasHeight = ref<number>(600)
 // 工具状态
 const currentTool = ref<ToolType>('line')
 const drawLineRef = ref<InstanceType<typeof DrawLine> | null>(null)
-
 // 状态管理
 const isDragging = ref<boolean>(false)
 const selectedPoint = ref<ExtendedItem | null>(null)
@@ -108,7 +107,7 @@ const initPaper = (): void => {
   const background = new paper.Path.Rectangle({
     point: [0, 0],
     size: [canvasWidth.value, canvasHeight.value],
-    fillColor: '#ffffff'
+    fillColor: 'transparent'
   })
   
   // 使用 update() 替代 draw()
@@ -427,7 +426,7 @@ const clearCanvas = (): void => {
   const background = new paper.Path.Rectangle({
     point: [0, 0],
     size: [canvasWidth.value, canvasHeight.value],
-    fillColor: '#ffffff'
+    fillColor: 'transparent'
   })
   
   paper.view.update()
@@ -561,9 +560,8 @@ onMounted(() => {
 }
 
 canvas {
-  border: 2px solid #ddd;
   border-radius: 8px;
-  background-color: white;
+  background-color: transparent;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   position: relative;
   z-index: 1;

From 15d80da3a82984d9ee0b7c04a658f2e5907ea911 Mon Sep 17 00:00:00 2001
From: AvenJi0320 <pychi0320@gmail.com>
Date: Tue, 12 Aug 2025 10:54:17 +0800
Subject: [PATCH 05/49] fix(painter):fix select tool handle bug

---
 .../editor/common/painter/painter.vue         | 98 ++++++++++++++++---
 1 file changed, 87 insertions(+), 11 deletions(-)

diff --git a/spx-gui/src/components/editor/common/painter/painter.vue b/spx-gui/src/components/editor/common/painter/painter.vue
index adcc9fbf5..d4a8d89e7 100644
--- a/spx-gui/src/components/editor/common/painter/painter.vue
+++ b/spx-gui/src/components/editor/common/painter/painter.vue
@@ -74,6 +74,7 @@ type ToolType = 'line' | 'select'
 // TypeScript 接口定义
 interface ExtendedItem extends paper.Item {
   isControlPoint?: boolean
+  isTemporaryControlPoint?: boolean
   segmentIndex?: number
   parentPath?: paper.Path
 }
@@ -96,6 +97,18 @@ const isDragging = ref<boolean>(false)
 const selectedPoint = ref<ExtendedItem | null>(null)
 const allPaths = ref<paper.Path[]>([])
 const controlPoints = ref<ExtendedItem[]>([])
+const mouseDownPath = ref<paper.Path | null>(null)
+const mouseDownPos = ref<paper.Point | null>(null)
+
+// 选中路径（独占选择）
+const selectPathExclusive = (path: paper.Path | null): void => {
+  allPaths.value.forEach((p: paper.Path) => {
+    p.selected = false
+  })
+  if (path) {
+    path.selected = true
+  }
+}
 
 // 初始化 Paper.js
 const initPaper = (): void => {
@@ -163,6 +176,7 @@ const createControlPoint = (position: paper.Point): ExtendedItem => {
 // 显示路径的控制点
 const showControlPoints = (path: paper.Path): void => {
   hideControlPoints()
+  selectPathExclusive(path)
   
   if (path && path.segments) {
     path.segments.forEach((segment: paper.Segment, index: number) => {
@@ -182,6 +196,10 @@ const hideControlPoints = (): void => {
     }
   })
   controlPoints.value = []
+  // 同时取消路径高亮
+  allPaths.value.forEach((p: paper.Path) => {
+    p.selected = false
+  })
 }
 
 // 检测点击的路径
@@ -287,20 +305,26 @@ const calculateLocalHandles = (
   }
 }
 
-// 在路径上添加新的控制点
-const addControlPointOnPath = (path: paper.Path, clickPoint: paper.Point): void => {
+// 在路径上添加新的控制点，并返回对应的控制点实例
+const addControlPointOnPath = (path: paper.Path, clickPoint: paper.Point): ExtendedItem | null => {
   const location = path.getNearestLocation(clickPoint)
   if (location) {
     // 在最近的位置分割路径，创建新的段点
-    const newSegment = path.insert(location.index + 1, location.point)
-    
+    const insertIndex = location.index + 1
+    path.insert(insertIndex, location.point)
+
     // 局部平滑新添加的点及其相邻区域
-    smoothLocalSegments(path, location.index + 1)
-    
+    smoothLocalSegments(path, insertIndex)
+
     // 重新显示控制点
     showControlPoints(path)
+    
+    // 返回新创建段点对应的控制点实例
+    const created = controlPoints.value.find((p: ExtendedItem) => p.parentPath === path && p.segmentIndex === insertIndex) || null
     paper.view.update()
+    return created
   }
+  return null
 }
 
 // 鼠标按下事件（用于开始拖拽控制点）
@@ -320,9 +344,17 @@ const handleMouseDown = (event: MouseEvent): void => {
   if (controlPoint) {
     isDragging.value = true
     selectedPoint.value = controlPoint
-    // 阻止事件冒泡，避免触发 click 事件
-    event.preventDefault()
-    event.stopPropagation()
+    return
+  }
+
+  // 若未点到控制点，则检测是否按在某个路径上（不立即创建临时点，等拖拽阈值触发）
+  const clickedPath = getPathAtPoint(point)
+  if (clickedPath) {
+    mouseDownPath.value = clickedPath
+    mouseDownPos.value = point
+  } else {
+    mouseDownPath.value = null
+    mouseDownPos.value = null
   }
 }
 
@@ -352,8 +384,9 @@ const handleCanvasClick = (event: MouseEvent): void => {
     // 检查是否点击了现有路径
     const clickedPath = getPathAtPoint(point)
     if (clickedPath) {
-      // 直接在点击位置添加控制点
-      addControlPointOnPath(clickedPath, point)
+      // 仅选中并显示端点（不新增控制点）
+      showControlPoints(clickedPath)
+      paper.view.update()
       return
     }
     
@@ -378,6 +411,27 @@ const handleMouseMove = (event: MouseEvent): void => {
     drawLineRef.value.handleMouseMove({ x: point.x, y: point.y })
   }
   
+  // 若按在路径上且尚未开始拖拽，当移动超过阈值时，创建临时控制点并进入拖拽
+  if (
+    currentTool.value === 'select' &&
+    !isDragging.value &&
+    mouseDownPath.value &&
+    mouseDownPos.value
+  ) {
+    const dx = point.x - mouseDownPos.value.x
+    const dy = point.y - mouseDownPos.value.y
+    const dist2 = dx * dx + dy * dy
+    const threshold2 = 3 * 3
+    if (dist2 >= threshold2) {
+      const tempPoint = addControlPointOnPath(mouseDownPath.value, mouseDownPos.value)
+      if (tempPoint) {
+        tempPoint.isTemporaryControlPoint = true
+        isDragging.value = true
+        selectedPoint.value = tempPoint
+      }
+    }
+  }
+
   // 拖拽控制点
   if (isDragging.value && selectedPoint.value) {
     selectedPoint.value.position = point
@@ -399,10 +453,32 @@ const handleMouseMove = (event: MouseEvent): void => {
 
 // 鼠标释放事件（用于结束拖拽）
 const handleMouseUp = (): void => {
+  const prevSelected = selectedPoint.value
   if (isDragging.value) {
     isDragging.value = false
     selectedPoint.value = null
   }
+
+  // 清理按下状态
+  const prevMouseDownPath = mouseDownPath.value
+  mouseDownPath.value = null
+  mouseDownPos.value = null
+
+  // 若为临时控制点，则在松开时删除该控制点，并刷新端点显示
+  if (prevSelected && (prevSelected as ExtendedItem).isTemporaryControlPoint) {
+    if (prevSelected.parent) {
+      prevSelected.remove()
+    }
+    controlPoints.value = controlPoints.value.filter((p: ExtendedItem) => p !== prevSelected)
+
+    // 重新显示该路径的所有端点（包含新插入的段点）
+    if (prevSelected.parentPath) {
+      showControlPoints(prevSelected.parentPath)
+    } else if (prevMouseDownPath) {
+      showControlPoints(prevMouseDownPath)
+    }
+    paper.view.update()
+  }
 }
 
 // 清空画布

From 55dfe7c3356c08ad9c97c69ed922293659d4befc Mon Sep 17 00:00:00 2001
From: petezhuang <petezhuang13@163.com>
Date: Tue, 12 Aug 2025 14:03:39 +0800
Subject: [PATCH 06/49] fix:(spx-gui):wrong preview layer layout

---
 .../components/editor/common/painter/components/draw_line.vue   | 2 ++
 spx-gui/src/components/editor/common/painter/painter.vue        | 1 -
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/spx-gui/src/components/editor/common/painter/components/draw_line.vue b/spx-gui/src/components/editor/common/painter/components/draw_line.vue
index 01f7c461b..943e11d27 100644
--- a/spx-gui/src/components/editor/common/painter/components/draw_line.vue
+++ b/spx-gui/src/components/editor/common/painter/components/draw_line.vue
@@ -133,5 +133,7 @@ defineExpose({
   left: 0;
   pointer-events: none;
   z-index: 2;
+  height: 100%;
+  width: 100%;
 }
 </style>
diff --git a/spx-gui/src/components/editor/common/painter/painter.vue b/spx-gui/src/components/editor/common/painter/painter.vue
index d4a8d89e7..fd8215ac6 100644
--- a/spx-gui/src/components/editor/common/painter/painter.vue
+++ b/spx-gui/src/components/editor/common/painter/painter.vue
@@ -632,7 +632,6 @@ onMounted(() => {
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: 20px;
 }
 
 canvas {

From 897ae2c35258e5f304baf70360613b13f45a3f8c Mon Sep 17 00:00:00 2001
From: AvenJi0320 <pychi0320@gmail.com>
Date: Tue, 12 Aug 2025 14:00:06 +0800
Subject: [PATCH 07/49] feat(painter):add paint brush tool

---
 .../common/painter/components/draw_brush.vue  | 106 ++++++++++++++++++
 .../editor/common/painter/painter.vue         |  84 +++++++++++++-
 2 files changed, 187 insertions(+), 3 deletions(-)
 create mode 100644 spx-gui/src/components/editor/common/painter/components/draw_brush.vue

diff --git a/spx-gui/src/components/editor/common/painter/components/draw_brush.vue b/spx-gui/src/components/editor/common/painter/components/draw_brush.vue
new file mode 100644
index 000000000..9830ed829
--- /dev/null
+++ b/spx-gui/src/components/editor/common/painter/components/draw_brush.vue
@@ -0,0 +1,106 @@
+<template>
+  <div></div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import paper from 'paper'
+
+// Props
+interface Props {
+  canvasWidth: number
+  canvasHeight: number
+  isActive: boolean
+}
+
+const props = defineProps<Props>()
+
+// Emits
+interface Emits {
+  (e: 'path-created', path: paper.Path): void
+  (e: 'circle-created', circle: paper.Path): void
+}
+
+const emit = defineEmits<Emits>()
+
+// 接口定义
+interface Point {
+  x: number
+  y: number
+}
+
+// 响应式变量
+const isDrawing = ref<boolean>(false)
+const currentPath = ref<paper.Path | null>(null)
+
+// 创建新路径
+const createNewPath = (startPoint: Point): paper.Path => {
+  const path = new paper.Path()
+  path.strokeColor = new paper.Color('black')
+  path.strokeWidth = 2
+  path.strokeCap = 'round'
+  path.strokeJoin = 'round'
+  
+  // 添加起始点
+  path.add(new paper.Point(startPoint.x, startPoint.y))
+  
+  return path
+}
+
+// 处理鼠标按下
+const handleMouseDown = (point: Point): void => {
+  if (!props.isActive) return
+  
+  isDrawing.value = true
+  currentPath.value = createNewPath(point)
+}
+
+// 处理鼠标拖拽
+const handleMouseDrag = (point: Point): void => {
+  if (!props.isActive || !isDrawing.value || !currentPath.value) return
+  
+  // 向当前路径添加点
+  currentPath.value.add(new paper.Point(point.x, point.y))
+  paper.view.update()
+}
+
+// 处理鼠标释放
+const handleMouseUp = (point: Point): void => {
+  if (!props.isActive || !isDrawing.value) return
+  
+  // 完成当前路径绘制
+  if (currentPath.value) {
+    emit('path-created', currentPath.value)
+  }
+  
+  // 重置状态
+  resetDrawing()
+  paper.view.update()
+}
+
+// 重置绘制状态
+const resetDrawing = (): void => {
+  isDrawing.value = false
+  currentPath.value = null
+}
+
+// 监听工具切换，重置状态
+watch(() => props.isActive, (newValue) => {
+  if (!newValue) {
+    resetDrawing()
+  }
+})
+
+// 暴露方法给父组件
+defineExpose({
+  handleMouseDown,
+  handleMouseDrag,
+  handleMouseUp,
+  resetDrawing,
+  isDrawing: isDrawing.value
+})
+</script>
+
+<style scoped>
+/* 笔刷组件不需要额外样式 */
+</style>
diff --git a/spx-gui/src/components/editor/common/painter/painter.vue b/spx-gui/src/components/editor/common/painter/painter.vue
index fd8215ac6..eae672fea 100644
--- a/spx-gui/src/components/editor/common/painter/painter.vue
+++ b/spx-gui/src/components/editor/common/painter/painter.vue
@@ -15,6 +15,18 @@
           <span>直线</span>
         </button>
         
+        <button 
+          :class="['tool-btn', { active: currentTool === 'brush' }]"
+          @click="selectTool('brush')"
+          title="笔刷工具"
+        >
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="m9.06 11.9 8.07-8.06a2.85 2.85 0 1 1 4.03 4.03l-8.06 8.08"></path>
+            <path d="m7.07 14.94c-1.66 0-3 1.35-3 3.02 0 1.33-2.5 1.52-2 2.02 1.08-2 2.51-2 2.68-2.02 0.44 0 3.34-1.66 3.34-3.02z"></path>
+          </svg>
+          <span>笔刷</span>
+        </button>
+        
         <button 
           :class="['tool-btn', { active: currentTool === 'select' }]"
           @click="selectTool('select')"
@@ -49,6 +61,7 @@
         @click="handleCanvasClick"
         @mousedown="handleMouseDown"
         @mousemove="handleMouseMove"
+        @mouseup="handleCanvasMouseUp"
       ></canvas>
       
       <!-- 直线绘制组件 -->
@@ -59,6 +72,16 @@
         :is-active="currentTool === 'line'"
         @line-created="handleLineCreated"
       />
+      
+      <!-- 笔刷绘制组件 -->
+      <DrawBrush
+        ref="drawBrushRef"
+        :canvas-width="canvasWidth"
+        :canvas-height="canvasHeight"
+        :is-active="currentTool === 'brush'"
+        @path-created="handlePathCreated"
+        @circle-created="handleCircleCreated"
+      />
     </div>
   </div>
 </template>
@@ -67,9 +90,10 @@
 import { ref, onMounted, onUnmounted } from 'vue'
 import paper from 'paper'
 import DrawLine from './components/draw_line.vue'
+import DrawBrush from './components/draw_brush.vue'
 
 // 工具类型
-type ToolType = 'line' | 'select'
+type ToolType = 'line' | 'brush' | 'select'
 
 // TypeScript 接口定义
 interface ExtendedItem extends paper.Item {
@@ -92,6 +116,7 @@ const canvasHeight = ref<number>(600)
 // 工具状态
 const currentTool = ref<ToolType>('line')
 const drawLineRef = ref<InstanceType<typeof DrawLine> | null>(null)
+const drawBrushRef = ref<InstanceType<typeof DrawBrush> | null>(null)
 // 状态管理
 const isDragging = ref<boolean>(false)
 const selectedPoint = ref<ExtendedItem | null>(null)
@@ -136,6 +161,11 @@ const selectTool = (tool: ToolType): void => {
     drawLineRef.value.resetDrawing()
   }
   
+  // 重置笔刷绘制状态
+  if (drawBrushRef.value) {
+    drawBrushRef.value.resetDrawing()
+  }
+  
   hideControlPoints()
 }
 
@@ -145,6 +175,18 @@ const handleLineCreated = (line: paper.Path): void => {
   paper.view.update()
 }
 
+// 处理笔刷路径创建
+const handlePathCreated = (path: paper.Path): void => {
+  allPaths.value.push(path)
+  paper.view.update()
+}
+
+// 处理笔刷圆圈创建
+const handleCircleCreated = (circle: paper.Path): void => {
+  allPaths.value.push(circle)
+  paper.view.update()
+}
+
 // 创建控制点
 const createControlPoint = (position: paper.Point): ExtendedItem => {
   const point = new paper.Path.Circle({
@@ -329,8 +371,6 @@ const addControlPointOnPath = (path: paper.Path, clickPoint: paper.Point): Exten
 
 // 鼠标按下事件（用于开始拖拽控制点）
 const handleMouseDown = (event: MouseEvent): void => {
-  if (currentTool.value !== 'select') return
-  
   const rect = canvasRef.value?.getBoundingClientRect()
   if (!rect) return
   
@@ -339,6 +379,14 @@ const handleMouseDown = (event: MouseEvent): void => {
     event.clientY - rect.top
   )
   
+  // 处理笔刷工具
+  if (currentTool.value === 'brush' && drawBrushRef.value) {
+    drawBrushRef.value.handleMouseDown({ x: point.x, y: point.y })
+    return
+  }
+  
+  if (currentTool.value !== 'select') return
+  
   // 检查是否点击了控制点
   const controlPoint = getControlPointAtPoint(point)
   if (controlPoint) {
@@ -411,6 +459,11 @@ const handleMouseMove = (event: MouseEvent): void => {
     drawLineRef.value.handleMouseMove({ x: point.x, y: point.y })
   }
   
+  // 委托给 DrawBrush 组件处理拖拽
+  if (currentTool.value === 'brush' && drawBrushRef.value) {
+    drawBrushRef.value.handleMouseDrag({ x: point.x, y: point.y })
+  }
+  
   // 若按在路径上且尚未开始拖拽，当移动超过阈值时，创建临时控制点并进入拖拽
   if (
     currentTool.value === 'select' &&
@@ -451,6 +504,23 @@ const handleMouseMove = (event: MouseEvent): void => {
   }
 }
 
+// 画布鼠标释放事件
+const handleCanvasMouseUp = (event: MouseEvent): void => {
+  const rect = canvasRef.value?.getBoundingClientRect()
+  if (!rect) return
+  
+  const point = new paper.Point(
+    event.clientX - rect.left,
+    event.clientY - rect.top
+  )
+  
+  // 处理笔刷工具
+  if (currentTool.value === 'brush' && drawBrushRef.value) {
+    drawBrushRef.value.handleMouseUp({ x: point.x, y: point.y })
+    return
+  }
+}
+
 // 鼠标释放事件（用于结束拖拽）
 const handleMouseUp = (): void => {
   const prevSelected = selectedPoint.value
@@ -496,6 +566,11 @@ const clearCanvas = (): void => {
     drawLineRef.value.resetDrawing()
   }
   
+  // 重置笔刷绘制状态
+  if (drawBrushRef.value) {
+    drawBrushRef.value.resetDrawing()
+  }
+  
   paper.project.clear()
   
   // 重新创建背景
@@ -518,6 +593,9 @@ onMounted(() => {
       if (drawLineRef.value) {
         drawLineRef.value.resetDrawing()
       }
+      if (drawBrushRef.value) {
+        drawBrushRef.value.resetDrawing()
+      }
       paper.view.update()
     } else if (event.key === 'Delete' || event.key === 'Backspace') {
       // 删除选中的路径

From 1846368487b5a30f0f65435259c4597cfa982765 Mon Sep 17 00:00:00 2001
From: AvenJi0320 <pychi0320@gmail.com>
Date: Tue, 12 Aug 2025 14:22:06 +0800
Subject: [PATCH 08/49] fix(painter):modify brush bug

---
 .../editor/common/painter/components/draw_brush.vue |  1 -
 .../components/editor/common/painter/painter.vue    | 13 -------------
 2 files changed, 14 deletions(-)

diff --git a/spx-gui/src/components/editor/common/painter/components/draw_brush.vue b/spx-gui/src/components/editor/common/painter/components/draw_brush.vue
index 9830ed829..16169b368 100644
--- a/spx-gui/src/components/editor/common/painter/components/draw_brush.vue
+++ b/spx-gui/src/components/editor/common/painter/components/draw_brush.vue
@@ -18,7 +18,6 @@ const props = defineProps<Props>()
 // Emits
 interface Emits {
   (e: 'path-created', path: paper.Path): void
-  (e: 'circle-created', circle: paper.Path): void
 }
 
 const emit = defineEmits<Emits>()
diff --git a/spx-gui/src/components/editor/common/painter/painter.vue b/spx-gui/src/components/editor/common/painter/painter.vue
index eae672fea..88d40b35c 100644
--- a/spx-gui/src/components/editor/common/painter/painter.vue
+++ b/spx-gui/src/components/editor/common/painter/painter.vue
@@ -80,7 +80,6 @@
         :canvas-height="canvasHeight"
         :is-active="currentTool === 'brush'"
         @path-created="handlePathCreated"
-        @circle-created="handleCircleCreated"
       />
     </div>
   </div>
@@ -181,12 +180,6 @@ const handlePathCreated = (path: paper.Path): void => {
   paper.view.update()
 }
 
-// 处理笔刷圆圈创建
-const handleCircleCreated = (circle: paper.Path): void => {
-  allPaths.value.push(circle)
-  paper.view.update()
-}
-
 // 创建控制点
 const createControlPoint = (position: paper.Point): ExtendedItem => {
   const point = new paper.Path.Circle({
@@ -677,12 +670,6 @@ onMounted(() => {
   color: #2196f3;
 }
 
-.tool-btn.active {
-  background-color: #e3f2fd;
-  border-color: #2196f3;
-  color: #2196f3;
-}
-
 .tool-btn.action-btn {
   background-color: #fff3e0;
   border-color: #ff9800;

From be7572bf51b1e59fa1bb16952a7590974e41af73 Mon Sep 17 00:00:00 2001
From: AvenJi0320 <pychi0320@gmail.com>
Date: Wed, 13 Aug 2025 10:36:33 +0800
Subject: [PATCH 09/49] fix(painter):fix select btn css

---
 spx-gui/src/components/editor/common/painter/painter.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/spx-gui/src/components/editor/common/painter/painter.vue b/spx-gui/src/components/editor/common/painter/painter.vue
index 88d40b35c..d1ac47c49 100644
--- a/spx-gui/src/components/editor/common/painter/painter.vue
+++ b/spx-gui/src/components/editor/common/painter/painter.vue
@@ -670,6 +670,12 @@ onMounted(() => {
   color: #2196f3;
 }
 
+.tool-btn.active {
+  background-color: #e3f2fd;
+  border-color: #2196f3;
+  color: #2196f3;
+}
+
 .tool-btn.action-btn {
   background-color: #fff3e0;
   border-color: #ff9800;

From 970b99d9b6523c9eb78870c1ea511916877be092 Mon Sep 17 00:00:00 2001
From: petezhuang <petezhuang13@163.com>
Date: Wed, 13 Aug 2025 10:46:52 +0800
Subject: [PATCH 10/49] feat(spx-gui):painter aigc function init

---
 spx-gui/src/apis/picgc.ts                     |  0
 .../common/painter/components/ai_generate.vue |  0
 .../editor/common/painter/painter.vue         | 71 ++++++++++++++++++-
 .../editor/sprite/CostumeDetail.vue           |  5 +-
 4 files changed, 73 insertions(+), 3 deletions(-)
 create mode 100644 spx-gui/src/apis/picgc.ts
 create mode 100644 spx-gui/src/components/editor/common/painter/components/ai_generate.vue

diff --git a/spx-gui/src/apis/picgc.ts b/spx-gui/src/apis/picgc.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/spx-gui/src/components/editor/common/painter/components/ai_generate.vue b/spx-gui/src/components/editor/common/painter/components/ai_generate.vue
new file mode 100644
index 000000000..e69de29bb
diff --git a/spx-gui/src/components/editor/common/painter/painter.vue b/spx-gui/src/components/editor/common/painter/painter.vue
index d1ac47c49..229b92ada 100644
--- a/spx-gui/src/components/editor/common/painter/painter.vue
+++ b/spx-gui/src/components/editor/common/painter/painter.vue
@@ -86,7 +86,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, onMounted, onUnmounted, watch } from 'vue'
 import paper from 'paper'
 import DrawLine from './components/draw_line.vue'
 import DrawBrush from './components/draw_brush.vue'
@@ -123,6 +123,16 @@ const allPaths = ref<paper.Path[]>([])
 const controlPoints = ref<ExtendedItem[]>([])
 const mouseDownPath = ref<paper.Path | null>(null)
 const mouseDownPos = ref<paper.Point | null>(null)
+const imgSrc = ref<string | null>(null)
+const imgLoading = ref<boolean>(true)
+
+// 存储背景图片的引用
+const backgroundImage = ref<paper.Raster | null>(null)
+
+const props = defineProps<{
+  imgSrc: string | null
+  imgLoading: boolean
+}>()
 
 // 选中路径（独占选择）
 const selectPathExclusive = (path: paper.Path | null): void => {
@@ -134,6 +144,52 @@ const selectPathExclusive = (path: paper.Path | null): void => {
   }
 }
 
+// 加载图片到画布
+const loadImageToCanvas = (imageSrc: string): void => {
+  if (!paper.project) return
+  
+  // 如果已有背景图片，先移除
+  if (backgroundImage.value) {
+    backgroundImage.value.remove()
+  }
+  
+  // 创建新的光栅图像
+  const raster = new paper.Raster(imageSrc)
+  
+  raster.onLoad = () => {
+    // 图片加载完成后的处理
+    // 设置图片位置到画布中心
+    raster.position = paper.view.center
+    
+    // 可选：调整图片大小适应画布
+    const scale = Math.min(
+      canvasWidth.value / raster.width,
+      canvasHeight.value / raster.height
+    ) * 0.8 // 留一些边距
+    
+    if (scale < 1) {
+      raster.scale(scale)
+    }
+    
+    // 将图片放到最底层，作为背景
+    raster.sendToBack()
+    
+    // 保存引用
+    backgroundImage.value = raster
+    
+    // 更新视图
+    paper.view.update()
+  }
+
+  raster.onMouseDown = (event: paper.MouseEvent) => {
+    if (currentTool.value === 'select') {
+      selectPathExclusive(null) // 清除路径选择
+      raster.selected = true
+      paper.view.update()
+    }
+  }
+}
+
 // 初始化 Paper.js
 const initPaper = (): void => {
   if (!canvasRef.value) return
@@ -147,7 +203,11 @@ const initPaper = (): void => {
     fillColor: 'transparent'
   })
   
-  // 使用 update() 替代 draw()
+  // 如果有初始图片，加载它
+  if (props.imgSrc) {
+    loadImageToCanvas(props.imgSrc)
+  }
+  
   paper.view.update()
 }
 
@@ -576,6 +636,13 @@ const clearCanvas = (): void => {
   paper.view.update()
 }
 
+// 监听props中的imgSrc变化
+watch(() => props.imgSrc, (newImgSrc) => {
+  if (newImgSrc) {
+    loadImageToCanvas(newImgSrc)
+  }
+}, { immediate: true })
+
 onMounted(() => {
   initPaper()
   
diff --git a/spx-gui/src/components/editor/sprite/CostumeDetail.vue b/spx-gui/src/components/editor/sprite/CostumeDetail.vue
index 710545168..1a2b18eb0 100644
--- a/spx-gui/src/components/editor/sprite/CostumeDetail.vue
+++ b/spx-gui/src/components/editor/sprite/CostumeDetail.vue
@@ -2,7 +2,7 @@
   <EditorItemDetail :name="costume.name" @rename="handleRename">
     <div class="painter-wrapper">
       <CheckerboardBackground class="background" />
-      <Painter class="painter" />
+      <Painter class="painter" :img-src="imgSrc" :img-loading="imgLoading" />
     </div>
   </EditorItemDetail>
 </template>
@@ -15,6 +15,7 @@ import { useRenameCostume } from '@/components/asset'
 import EditorItemDetail from '../common/EditorItemDetail.vue'
 import CheckerboardBackground from './CheckerboardBackground.vue'
 import Painter from '@/components/editor/common/painter/painter.vue'
+import { useFileUrl } from '@/utils/file'
 
 const props = defineProps<{
   costume: Costume
@@ -26,6 +27,8 @@ const handleRename = useMessageHandle(() => renameCostume(props.costume), {
   en: 'Failed to rename costume',
   zh: '重命名造型失败'
 }).fn
+
+const [imgSrc, imgLoading] = useFileUrl(() => props.costume.img)
 </script>
 
 <style lang="scss" scoped>

From 0229c71ed9387d772257154a1c7f0c488f28e76d Mon Sep 17 00:00:00 2001
From: petezhuang <petezhuang13@163.com>
Date: Wed, 13 Aug 2025 14:24:54 +0800
Subject: [PATCH 11/49] feat(spx-gui):img and svg aigc function init(mock edt)
 and several bug fixs

---
 .../common/painter/components/ai_generate.vue | 965 ++++++++++++++++++
 .../editor/common/painter/painter.vue         | 280 ++++-
 2 files changed, 1226 insertions(+), 19 deletions(-)

diff --git a/spx-gui/src/components/editor/common/painter/components/ai_generate.vue b/spx-gui/src/components/editor/common/painter/components/ai_generate.vue
index e69de29bb..5517771b3 100644
--- a/spx-gui/src/components/editor/common/painter/components/ai_generate.vue
+++ b/spx-gui/src/components/editor/common/painter/components/ai_generate.vue
@@ -0,0 +1,965 @@
+<template>
+  <div class="ai-generate-dialog">
+    <!-- 遮罩层 -->
+    <div 
+      v-if="visible" 
+      class="dialog-overlay"
+      @click="handleCancel"
+    >
+      <!-- 弹窗主体 -->
+      <div 
+        class="dialog-content"
+        @click.stop
+      >
+        <!-- 标题栏 -->
+        <div class="dialog-header">
+          <h3 class="dialog-title">AI生成图片</h3>
+          <button 
+            class="close-btn"
+            @click="handleCancel"
+          >
+            ×
+          </button>
+        </div>
+
+        <!-- 内容区域 -->
+        <div class="dialog-body">
+          <div class="dialog-content-wrapper">
+            <!-- 左侧表单区域 -->
+            <div class="form-section">
+              <!-- 模型选择 -->
+              <div class="form-group">
+                <label class="form-label">选择生成模型</label>
+                <div class="model-selector">
+                  <div 
+                    class="model-option"
+                    :class="{ active: selectedModel === 'png' }"
+                    @click="selectedModel = 'png'"
+                  >
+                    <div class="model-icon">🖼️</div>
+                    <div class="model-info">
+                      <div class="model-name">PNG图片</div>
+                      <div class="model-desc">生成高质量位图图片</div>
+                    </div>
+                  </div>
+                  <div 
+                    class="model-option"
+                    :class="{ active: selectedModel === 'svg' }"
+                    @click="selectedModel = 'svg'"
+                  >
+                    <div class="model-icon">📐</div>
+                    <div class="model-info">
+                      <div class="model-name">SVG矢量</div>
+                      <div class="model-desc">生成可缩放矢量图形</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 提示词输入 -->
+              <div class="form-group">
+                <label class="form-label">描述您想要的图片</label>
+                <textarea
+                  v-model="prompt"
+                  class="prompt-input"
+                  placeholder="请详细描述您想要生成的图片内容，例如：一只可爱的卡通猫咪，坐在彩虹上，背景是蓝天白云..."
+                  rows="4"
+                ></textarea>
+                <div class="input-hint">
+                  提示：描述越详细，生成的图片效果越好
+                </div>
+              </div>
+
+              <!-- 生成按钮 -->
+              <div class="form-group">
+                <button 
+                  class="generate-btn"
+                  :disabled="!prompt.trim() || isGenerating"
+                  @click="handleGenerate"
+                >
+                  <span v-if="isGenerating" class="loading-spinner"></span>
+                  {{ isGenerating ? '生成中...' : '生成图片' }}
+                </button>
+              </div>
+            </div>
+
+            <!-- 右侧预览区域 -->
+            <div class="preview-section" :class="{ visible: previewUrl || isGenerating }">
+              <label class="form-label">预览效果</label>
+              <div class="preview-container">
+                <div v-if="isGenerating" class="preview-loading">
+                  <div class="loading-spinner large"></div>
+                  <div class="loading-text">AI正在为您生成图片...</div>
+                </div>
+                <div v-else-if="previewUrl" class="preview-image-wrapper">
+                  <img 
+                    :src="previewUrl" 
+                    alt="AI生成的图片预览"
+                    class="preview-image"
+                    @load="handleImageLoad"
+                    @error="handleImageError"
+                  />
+                  <!-- <div class="preview-info">
+                    <span class="model-tag">{{ selectedModel.toUpperCase() }}</span>
+                    <span class="size-info">{{ imageSize }}</span>
+                  </div> -->
+                </div>
+                <div v-else class="preview-placeholder">
+                  <div class="placeholder-icon">🖼️</div>
+                  <div class="placeholder-text">生成的图片将在这里预览</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 底部按钮 -->
+        <div class="dialog-footer">
+          <button 
+            class="btn btn-secondary"
+            @click="handleCancel"
+          >
+            取消
+          </button>
+          <button 
+            class="btn btn-primary"
+            :disabled="!previewUrl || isGenerating"
+            @click="handleConfirm"
+          >
+            确认使用
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+// Props
+interface Props {
+  visible: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  visible: false
+})
+
+// Emits
+const emit = defineEmits<{
+  'update:visible': [value: boolean]
+  'confirm': [data: { 
+    model: string; 
+    prompt: string; 
+    url?: string; 
+    svgContent?: string;
+  }]
+  'cancel': []
+}>()
+
+// 响应式数据
+const selectedModel = ref<'png' | 'svg'>('png')
+const prompt = ref('')
+const previewUrl = ref('')
+const isGenerating = ref(false)
+const imageSize = ref('')
+
+// 存储SVG原始代码
+const svgRawContent = ref('')
+
+// 方法
+const handleGenerate = async () => {
+  if (!prompt.value.trim()) return
+  
+  isGenerating.value = true
+  previewUrl.value = ''
+  
+  try {
+    // TODO: 这里需要调用实际的AI生成API
+    // 目前使用模拟数据
+    await simulateGeneration()
+    
+    // 模拟生成结果
+    previewUrl.value = generateMockImageUrl()
+    imageSize.value = selectedModel.value === 'png' ? '512x512' : '矢量图'
+    
+  } catch (error) {
+    console.error('生成图片失败:', error)
+    // TODO: 显示错误提示
+  } finally {
+    isGenerating.value = false
+  }
+}
+
+const handleConfirm = () => {
+  if (!previewUrl.value) return
+  
+  const confirmData: any = {
+    model: selectedModel.value,
+    prompt: prompt.value
+  }
+  
+  if (selectedModel.value === 'svg') {
+    // SVG模式：传递原始SVG代码
+    confirmData.svgContent = svgRawContent.value
+    confirmData.url = previewUrl.value // 用于预览的blob URL
+    // console.log('SVG确认数据:', { svgContent: svgRawContent.value })
+  } else {
+    // PNG模式：传递图片URL
+    confirmData.url = previewUrl.value
+    // console.log('PNG确认数据:', { url: previewUrl.value })
+  }
+  
+  emit('confirm', confirmData)
+  
+  handleCancel()
+}
+
+const handleCancel = () => {
+  emit('update:visible', false)
+  emit('cancel')
+  
+  // 重置状态
+  setTimeout(() => {
+    prompt.value = ''
+    previewUrl.value = ''
+    isGenerating.value = false
+    selectedModel.value = 'png'
+  }, 300)
+}
+
+const handleImageLoad = () => {
+//   console.log('图片加载成功')
+}
+
+const handleImageError = () => {
+  console.error('图片加载失败')
+  previewUrl.value = ''
+}
+
+// 模拟生成过程
+const simulateGeneration = () => {
+  return new Promise(resolve => {
+    setTimeout(resolve, 2000) // 模拟2秒生成时间
+  })
+}
+
+// 生成模拟图片URL
+const generateMockImageUrl = () => {
+  if (selectedModel.value === 'svg') {
+    // SVG模拟数据 - 一个简单的彩色图形
+    const svgContent = `<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.16, written by Peter Selinger 2001-2019
+</metadata>
+<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M3090 4524 c-226 -29 -420 -114 -628 -277 -116 -90 -170 -146 -248
+-257 -29 -41 -67 -84 -84 -95 -39 -25 -94 -105 -154 -221 -59 -116 -102 -166
+-172 -200 -104 -51 -200 -30 -309 69 -60 53 -143 107 -164 107 -9 -1 2 -10 24
+-22 22 -11 79 -58 126 -103 66 -64 97 -86 139 -100 123 -41 237 12 347 161 26
+35 48 62 50 60 8 -8 -72 -158 -104 -195 -42 -50 -110 -83 -187 -91 l-61 -6 35
+-12 c31 -11 26 -11 -46 -8 -47 2 -94 11 -112 20 -17 9 -59 50 -93 92 -35 42
+-84 90 -109 107 l-45 31 50 -55 c28 -30 70 -83 94 -117 62 -87 120 -115 254
+-120 125 -5 172 11 242 83 52 54 64 75 163 287 55 115 110 206 161 266 26 30
+31 28 20 -10 -14 -50 -10 -107 11 -168 11 -30 19 -81 20 -112 0 -47 -4 -62
+-27 -89 -44 -52 -139 -78 -172 -46 -11 10 -12 8 -3 -9 27 -51 117 -56 178 -9
+69 52 92 135 69 244 -21 103 -19 149 11 208 30 62 132 168 216 225 60 40 229
+124 297 147 44 14 44 15 -65 -57 -180 -118 -348 -288 -380 -384 -17 -53 -13
+-102 11 -134 14 -18 14 -17 5 9 -31 88 -1 157 130 291 111 114 188 170 355
+259 90 49 121 60 173 64 63 6 82 -6 44 -26 -33 -17 -132 -127 -193 -211 -79
+-110 -166 -257 -271 -455 -164 -308 -225 -388 -356 -469 -65 -41 -78 -60 -20
+-30 153 77 291 231 447 494 41 69 95 159 120 200 163 265 368 460 594 563 42
+20 77 40 77 46 0 10 -26 19 -120 41 -49 11 -284 21 -340 14z m208 -60 c18 -5
+20 -9 10 -21 -22 -27 -67 -43 -167 -58 -56 -8 -102 -15 -104 -15 -2 0 -3 20
+-3 45 1 39 4 45 26 48 42 7 214 7 238 1z m-378 -67 c0 -25 -35 -47 -138 -87
+-160 -62 -231 -102 -347 -193 -37 -29 -30 -20 28 37 96 93 220 177 329 222 88
+36 128 42 128 21z"/>
+<path d="M3698 4440 c-127 -23 -236 -69 -344 -145 -177 -126 -391 -434 -402
+-578 -4 -46 -1 -62 13 -77 38 -42 102 -13 146 65 17 30 32 55 33 55 1 0 -5
+-31 -15 -68 -9 -38 -20 -131 -24 -208 -11 -247 -44 -370 -135 -504 -79 -117
+-196 -217 -336 -288 -101 -51 -166 -65 -270 -60 -80 4 -103 10 -168 41 -42 20
+-76 40 -76 44 0 4 44 21 98 36 107 31 221 83 267 121 29 25 27 24 -74 -10 -58
+-19 -155 -46 -216 -59 -211 -45 -292 -92 -344 -196 -25 -50 -31 -75 -31 -126
+0 -74 15 -115 59 -166 86 -97 248 -140 382 -101 137 41 379 197 527 341 l97
+94 -96 -79 c-104 -86 -219 -166 -286 -201 -60 -30 -63 -26 -10 14 92 70 70 77
+-34 10 -118 -75 -191 -105 -269 -111 l-55 -5 47 19 c26 11 80 41 120 68 l73
+49 -38 3 c-29 3 -50 -4 -85 -27 -100 -64 -177 -77 -242 -42 -40 21 -90 106
+-90 152 0 37 25 97 52 126 l21 22 27 -43 c57 -89 167 -155 276 -164 78 -6 147
+10 249 58 102 47 182 108 286 217 46 49 99 95 121 105 21 10 76 44 121 77 191
+138 394 250 562 310 174 63 225 83 230 90 2 5 -26 -2 -63 -15 -37 -12 -109
+-34 -161 -49 -118 -32 -241 -92 -401 -193 -69 -44 -126 -78 -128 -77 -2 2 5
+20 16 42 11 21 50 117 87 213 111 287 167 384 282 490 37 34 98 80 136 102 84
+50 102 74 21 29 -87 -49 -142 -91 -210 -163 -114 -119 -187 -250 -274 -497
+-47 -133 -85 -221 -95 -221 -3 0 4 19 16 41 40 79 88 249 119 416 58 317 128
+468 282 608 91 82 172 118 275 123 71 3 89 1 136 -21 98 -45 179 -135 219
+-245 16 -44 21 -81 21 -162 1 -106 -12 -172 -50 -257 l-18 -39 -1 61 c-2 142
+-101 264 -245 301 -150 39 -306 -40 -381 -193 -28 -57 -32 -77 -34 -157 -2
+-90 -2 -91 5 -21 12 116 72 204 173 254 150 75 322 6 374 -151 24 -72 16 -187
+-17 -258 -40 -86 -79 -123 -238 -221 -182 -113 -316 -211 -451 -328 -127 -111
+-322 -248 -571 -404 -300 -188 -419 -242 -583 -270 l-79 -13 56 -14 c78 -18
+116 -44 135 -90 10 -22 19 -40 22 -40 3 0 28 15 55 33 39 25 51 40 58 70 l9
+39 39 -58 c46 -69 56 -113 69 -299 8 -115 32 -245 44 -245 2 0 1 42 -2 93 -4
+81 0 111 28 231 33 137 33 138 23 274 -5 76 -6 141 -2 146 5 6 9 -25 9 -70 l0
+-79 19 31 c14 23 34 36 73 49 110 36 210 108 488 355 183 162 210 183 323 254
+155 97 314 146 544 167 297 27 446 -50 534 -274 l26 -69 13 51 c52 217 -47
+339 -310 381 -136 21 -355 8 -510 -31 -109 -27 -261 -107 -394 -205 -65 -48
+-119 -84 -122 -81 -13 13 232 208 415 330 95 64 116 74 125 62 21 -29 102 -34
+264 -18 144 15 161 15 256 -2 194 -34 206 -32 206 32 0 45 -49 192 -94 280
+-34 69 -125 198 -133 189 -2 -2 21 -53 51 -113 72 -140 72 -146 2 -138 -63 8
+-145 -7 -234 -42 -35 -14 -65 -23 -68 -21 -2 3 14 17 36 32 56 37 114 90 152
+140 25 32 20 29 -23 -16 -61 -61 -114 -98 -143 -98 -15 0 -10 9 23 45 167 182
+264 504 217 725 -40 190 -154 322 -334 387 -74 27 -197 37 -274 23z m204 -126
+c108 -35 215 -130 267 -237 41 -84 60 -223 42 -302 -6 -24 -9 -16 -15 43 -21
+200 -122 359 -273 430 -51 23 -70 27 -153 26 -78 0 -107 -5 -162 -27 -95 -37
+-173 -93 -264 -189 -43 -46 -65 -65 -49 -43 155 216 342 334 505 320 30 -3 76
+-12 102 -21z m494 -1150 c42 -20 74 -63 74 -98 0 -31 -1 -31 -70 -5 -44 18
+-78 22 -170 23 -63 0 -144 -3 -180 -7 l-65 -7 60 32 c145 77 273 99 351 62z
+m-2218 -511 l94 -48 107 0 c102 0 145 9 255 51 45 17 0 -19 -63 -50 -208 -105
+-353 -98 -471 24 -84 86 -61 93 78 23z"/>
+<path d="M1990 4405 c-20 -25 -8 -50 25 -50 21 0 31 5 33 18 4 21 -14 47 -33
+47 -7 0 -18 -7 -25 -15z"/>
+<path d="M2220 4315 c0 -8 5 -15 10 -15 6 0 10 7 10 15 0 8 -4 15 -10 15 -5 0
+-10 -7 -10 -15z"/>
+<path d="M2183 4273 c9 -2 25 -2 35 0 9 3 1 5 -18 5 -19 0 -27 -2 -17 -5z"/>
+<path d="M2103 4263 c9 -2 23 -2 30 0 6 3 -1 5 -18 5 -16 0 -22 -2 -12 -5z"/>
+<path d="M2943 4208 c-27 -35 -58 -75 -67 -90 -10 -14 -42 -43 -72 -64 -58
+-40 -67 -60 -12 -26 48 30 151 147 202 230 18 29 -4 7 -51 -50z"/>
+<path d="M1915 4240 c-38 -10 -81 -23 -95 -29 l-25 -12 25 6 c14 3 69 13 123
+22 53 10 97 21 97 25 0 13 -50 8 -125 -12z"/>
+<path d="M2272 4248 c6 -18 28 -21 28 -4 0 9 -7 16 -16 16 -9 0 -14 -5 -12
+-12z"/>
+<path d="M1495 4225 c-113 -24 -236 -84 -372 -182 -71 -50 -84 -67 -22 -27 81
+51 238 124 310 144 80 22 188 27 206 9 7 -7 8 -21 3 -40 -10 -34 -2 -36 33 -9
+52 41 43 92 -21 110 -46 12 -61 12 -137 -5z"/>
+<path d="M2045 4163 c-62 -19 -63 -20 -39 -38 29 -22 65 -18 96 12 48 46 33
+53 -57 26z"/>
+<path d="M2770 4130 c0 -24 29 -38 40 -20 12 19 1 40 -21 40 -12 0 -19 -7 -19
+-20z"/>
+<path d="M2129 4103 l-24 -28 28 24 c25 23 32 31 24 31 -2 0 -14 -12 -28 -27z"/>
+<path d="M2688 4119 c-10 -6 -18 -17 -18 -24 0 -20 39 -19 47 1 8 22 -8 35
+-29 23z"/>
+<path d="M1788 4105 c-123 -45 -228 -174 -228 -281 0 -101 82 -180 160 -152
+29 10 60 46 60 71 0 8 -18 19 -39 26 -93 27 -109 154 -29 228 58 54 174 79
+245 52 34 -12 93 -68 93 -87 0 -7 5 -10 11 -6 15 9 4 59 -22 96 -44 61 -162
+86 -251 53z"/>
+<path d="M1394 4056 c-132 -28 -199 -49 -279 -89 -193 -96 -339 -249 -408
+-427 -35 -90 -47 -225 -27 -311 16 -72 72 -187 114 -238 34 -40 34 -42 20 -76
+-8 -19 -14 -53 -14 -76 0 -54 36 -88 132 -123 107 -40 198 -56 306 -55 157 2
+173 14 27 21 -136 6 -190 19 -297 73 -68 34 -96 60 -119 110 -34 74 -24 82 35
+28 174 -159 331 -200 537 -139 82 24 220 82 169 71 -135 -30 -188 -37 -265
+-38 -218 -2 -354 79 -445 267 -113 232 -84 473 78 648 131 142 301 198 467
+155 l50 -13 -3 59 c-4 68 18 139 51 162 20 14 21 15 2 14 -11 0 -70 -11 -131
+-23z m-594 -510 c-44 -104 -51 -275 -17 -388 8 -27 13 -48 10 -48 -2 0 -18 30
+-36 68 -29 60 -32 76 -31 157 0 94 9 126 60 213 32 54 38 54 14 -2z"/>
+<path d="M2660 3985 c0 -5 5 -17 10 -25 5 -8 10 -10 10 -5 0 6 -5 17 -10 25
+-5 8 -10 11 -10 5z"/>
+<path d="M1864 3950 c-30 -12 -64 -58 -64 -87 0 -31 25 -79 45 -87 26 -10 60
+-7 73 6 19 19 15 48 -7 48 -34 0 -51 12 -51 36 0 22 25 44 49 44 28 0 51 -41
+52 -92 l1 -53 19 43 c25 54 18 92 -23 127 -30 26 -57 30 -94 15z"/>
+<path d="M2761 3923 c-21 -48 -163 -282 -178 -295 -8 -6 -31 -15 -51 -19 -35
+-6 -35 -7 -7 -8 44 -2 70 21 131 116 58 89 128 222 121 229 -2 2 -9 -8 -16
+-23z"/>
+<path d="M2563 3920 c-12 -5 -29 -20 -38 -34 -22 -33 -9 -76 29 -94 23 -12 32
+-11 64 5 40 20 60 60 24 51 -41 -11 -75 44 -36 59 13 5 13 7 2 14 -16 10 -17
+10 -45 -1z"/>
+<path d="M2931 3807 c-27 -45 -83 -155 -124 -244 -149 -323 -244 -407 -557
+-493 -125 -35 -122 -43 10 -37 174 7 293 57 400 167 91 93 155 219 239 468 23
+68 53 146 66 173 38 75 22 59 -34 -34z"/>
+<path d="M2496 3749 c16 -18 82 -45 89 -37 3 2 -20 15 -50 29 -44 20 -52 22
+-39 8z"/>
+<path d="M1490 3744 c0 -17 53 -86 91 -118 92 -78 223 -79 307 -2 49 44 44 56
+-9 23 -49 -30 -58 -32 -143 -32 -74 0 -98 4 -131 22 -41 22 -84 62 -103 98 -6
+11 -12 15 -12 9z"/>
+<path d="M2200 3700 c-12 -8 -9 -10 12 -10 35 0 53 -30 34 -55 -8 -11 -19 -16
+-30 -12 -10 4 -15 3 -11 -3 10 -17 33 -11 49 12 12 16 13 26 4 42 -18 35 -34
+42 -58 26z"/>
+<path d="M1123 3654 c-48 -24 -68 -53 -96 -139 -55 -168 -62 -350 -18 -450 52
+-118 147 -204 246 -225 115 -24 228 17 450 162 153 101 209 130 330 174 50 18
+85 33 78 34 -20 0 -154 -50 -226 -86 -37 -18 -120 -68 -183 -109 -141 -92
+-216 -130 -291 -150 -99 -26 -180 -15 -230 31 -23 20 -24 23 -6 15 32 -16 152
+-13 214 5 68 20 174 73 312 158 60 36 142 78 183 93 40 16 74 31 74 34 0 3
+-53 12 -117 19 -219 24 -301 55 -488 180 -55 37 -124 79 -152 93 l-52 27 -20
+-26 c-11 -14 -27 -48 -37 -76 -33 -100 3 -196 91 -238 81 -39 168 -45 380 -27
+103 9 190 15 193 12 5 -5 -198 -140 -258 -170 -128 -65 -265 -83 -347 -46 -85
+39 -144 169 -145 316 0 87 21 162 65 231 32 52 89 165 85 169 -2 2 -17 -3 -35
+-11z m158 -291 c35 -26 98 -69 139 -95 l75 -49 -45 7 c-176 24 -270 74 -270
+144 0 54 20 53 101 -7z"/>
+<path d="M1288 3653 c7 -3 16 -2 19 1 4 3 -2 6 -13 5 -11 0 -14 -3 -6 -6z"/>
+<path d="M2402 3586 c-33 -75 -74 -121 -138 -152 -49 -24 -63 -26 -124 -21
+-73 6 -79 2 -60 -34 18 -32 72 -24 153 22 40 23 87 56 105 73 33 31 96 140 90
+156 -2 5 -13 -15 -26 -44z"/>
+<path d="M2871 3540 c-52 -171 -139 -314 -238 -395 -97 -79 -161 -105 -363
+-145 -111 -22 -174 -52 -210 -97 -12 -15 -19 -35 -17 -45 3 -10 0 -18 -6 -18
+-30 0 -136 -62 -174 -101 -60 -63 -83 -119 -83 -206 0 -42 4 -73 10 -73 6 0
+10 20 10 45 0 61 35 150 78 197 67 74 143 105 393 163 83 19 183 49 222 65 93
+39 193 115 262 198 56 68 264 372 293 427 15 30 15 30 -27 -7 -28 -26 -51 -38
+-70 -38 -35 0 -43 11 -51 65 l-6 40 -23 -75z m-601 -619 c-15 -9 -170 -61
+-180 -61 -24 2 152 70 180 69 13 0 13 -1 0 -8z"/>
+<path d="M3700 3570 c-10 -6 -2 -7 25 -3 49 7 58 13 19 13 -16 0 -36 -5 -44
+-10z"/>
+<path d="M3780 3566 c0 -2 7 -7 16 -10 8 -3 12 -2 9 4 -6 10 -25 14 -25 6z"/>
+<path d="M3659 3543 c-13 -16 -12 -17 4 -4 16 13 21 21 13 21 -2 0 -10 -8 -17
+-17z"/>
+<path d="M2397 3412 c-21 -23 -22 -56 -1 -76 21 -21 47 -20 67 2 23 26 21 58
+-5 76 -29 21 -41 20 -61 -2z"/>
+<path d="M3907 3396 c-12 -31 -95 -59 -177 -60 -61 -1 -82 3 -114 22 l-39 23
+15 -23 c30 -45 66 -63 126 -62 91 2 213 66 200 105 -3 9 -7 7 -11 -5z"/>
+<path d="M3760 3380 c-21 -7 -21 -8 -5 -9 11 0 27 4 35 9 18 11 5 11 -30 0z"/>
+<path d="M616 3205 c-9 -26 -7 -32 5 -12 6 10 9 21 6 23 -2 3 -7 -2 -11 -11z"/>
+<path d="M2105 3144 c-32 -36 -110 -109 -174 -163 -121 -102 -191 -173 -191
+-193 0 -6 -2 -9 -5 -6 -3 3 8 38 25 78 37 89 37 95 4 47 -65 -96 -96 -203 -95
+-333 0 -195 68 -343 228 -494 120 -113 170 -134 57 -24 -107 105 -168 192
+-203 288 -22 60 -26 88 -26 181 0 105 2 114 34 179 28 57 61 96 190 225 95 95
+169 178 190 214 19 32 32 60 29 63 -3 2 -31 -25 -63 -62z"/>
+<path d="M3648 3161 c-53 -27 -136 -76 -185 -109 -82 -57 -393 -329 -438 -383
+-24 -29 -27 -32 165 137 246 216 310 263 484 355 118 63 99 62 -26 0z"/>
+<path d="M577 3083 c-58 -196 -82 -373 -73 -543 3 -69 10 -141 16 -160 7 -27
+9 -13 6 65 -8 213 19 477 65 643 29 105 17 100 -14 -5z"/>
+<path d="M2929 3118 c-7 -18 -55 -74 -106 -125 -51 -51 -93 -99 -93 -108 0
+-56 151 70 199 167 31 61 39 98 22 98 -5 0 -14 -15 -22 -32z"/>
+<path d="M736 2923 c-32 -95 -53 -246 -40 -288 8 -27 9 -25 11 25 5 86 22 188
+44 263 28 95 17 95 -15 0z"/>
+<path d="M3878 2813 c6 -2 18 -2 25 0 6 3 1 5 -13 5 -14 0 -19 -2 -12 -5z"/>
+<path d="M3828 2803 c7 -3 16 -2 19 1 4 3 -2 6 -13 5 -11 0 -14 -3 -6 -6z"/>
+<path d="M4080 2796 c-82 -31 -148 -73 -321 -209 -208 -162 -470 -360 -574
+-433 l-70 -49 104 130 c58 72 132 162 165 200 74 85 90 105 83 105 -12 0 -197
+-215 -283 -330 -77 -102 -106 -132 -161 -167 -75 -49 -76 -55 -2 -18 170 87
+550 333 798 518 79 59 162 118 185 132 187 108 422 48 512 -131 14 -27 22 -38
+18 -24 -25 96 -118 205 -216 255 -60 30 -80 35 -137 34 -36 0 -82 -6 -101 -13z"/>
+<path d="M3720 2776 c-110 -39 -268 -129 -365 -209 -261 -216 -625 -565 -625
+-600 0 -5 64 51 143 124 234 218 506 458 595 524 92 68 212 136 294 165 29 10
+46 19 38 19 -8 0 -44 -10 -80 -23z"/>
+<path d="M1507 2683 c-38 -60 -49 -108 -45 -187 3 -59 10 -86 41 -149 82 -166
+310 -419 439 -487 54 -29 90 -61 198 -179 96 -104 140 -160 161 -205 33 -71
+38 -56 10 30 -23 70 -50 133 -51 119 0 -13 -35 44 -77 128 -48 95 -81 129
+-181 184 -147 81 -373 324 -458 493 -35 70 -45 194 -21 253 20 47 14 47 -16 0z"/>
+<path d="M4093 2685 c-80 -22 -123 -47 -261 -152 -227 -172 -275 -208 -427
+-313 -172 -119 -224 -169 -280 -266 -22 -38 -59 -90 -82 -116 -40 -45 -73 -97
+-73 -115 0 -4 15 15 34 43 55 82 214 204 330 253 152 66 292 38 399 -79 46
+-51 117 -176 117 -208 0 -8 9 -16 19 -19 24 -6 31 -31 31 -108 0 -182 -116
+-355 -358 -538 -151 -113 -291 -167 -432 -167 -132 0 -238 43 -341 137 -60 55
+-61 56 -29 14 47 -58 137 -125 208 -152 78 -30 242 -38 333 -15 217 54 507
+281 607 475 55 104 72 169 72 267 0 137 -47 232 -198 399 -104 114 -126 157
+-120 232 5 55 6 58 84 133 111 107 229 199 294 229 148 68 316 1 389 -155 11
+-23 24 -62 27 -86 4 -24 11 -46 17 -49 16 -11 20 -91 8 -164 -5 -38 -9 -71 -6
+-73 9 -9 26 80 31 163 5 86 -10 176 -41 249 -16 36 14 7 35 -34 30 -59 45
+-172 32 -245 -5 -33 -8 -62 -7 -64 12 -12 30 100 30 184 0 89 -3 106 -27 156
+-15 30 -45 73 -65 94 -83 83 -235 123 -350 90z m-494 -470 l0 -65 -53 0 c-29
+0 -69 -2 -87 -5 l-34 -6 25 18 c14 10 52 41 85 70 33 28 61 52 62 52 1 1 1
+-28 2 -64z"/>
+<path d="M860 2648 c0 -15 53 -126 97 -202 26 -43 77 -111 114 -151 69 -74 95
+-112 85 -122 -3 -4 -59 47 -124 113 -99 100 -125 132 -160 203 -23 46 -42 90
+-42 97 0 8 -4 14 -8 14 -7 0 -26 -48 -48 -119 -3 -9 -30 11 -80 59 -41 40 -77
+70 -81 67 -22 -23 188 -238 539 -549 86 -76 159 -146 162 -154 3 -9 6 -26 6
+-39 0 -45 40 -152 80 -213 56 -87 181 -214 349 -356 79 -66 176 -148 216 -182
+178 -150 369 -255 650 -357 269 -97 332 -111 500 -112 215 0 291 26 630 218
+322 182 441 274 563 436 119 157 225 411 263 631 17 97 20 137 14 260 -4 80
+-11 168 -15 195 -7 40 -8 33 -4 -30 6 -94 -9 -258 -37 -403 -54 -279 -185
+-547 -347 -709 -80 -80 -158 -135 -324 -229 -73 -42 -170 -98 -215 -126 -195
+-117 -336 -162 -508 -161 -133 0 -225 23 -354 87 -205 104 -356 264 -507 540
+-31 56 -77 120 -124 170 -41 45 -98 108 -125 141 -28 32 -83 95 -123 138 -52
+55 -72 84 -69 97 5 19 -6 26 -86 50 -71 22 -186 159 -248 295 -40 88 -63 212
+-56 304 5 76 5 76 -11 41 -23 -51 -27 -184 -8 -261 9 -35 36 -104 60 -154 77
+-154 183 -268 356 -381 135 -87 229 -215 326 -443 47 -110 109 -220 177 -311
+29 -39 33 -48 14 -31 -15 14 -27 21 -27 17 0 -11 -39 12 -145 88 -166 117
+-308 264 -480 496 -84 113 -135 175 -135 164 0 -9 181 -261 252 -351 140 -176
+274 -295 511 -452 75 -50 137 -93 137 -96 0 -7 -145 60 -207 96 -140 81 -318
+230 -432 364 -179 210 -371 472 -371 506 0 7 140 -50 240 -97 93 -44 221 -133
+299 -208 74 -70 74 -70 40 -22 -70 100 -261 248 -444 342 -208 108 -290 170
+-360 273 -80 118 -115 267 -81 350 31 78 12 125 -48 119 -23 -2 -33 -10 -40
+-31 -9 -23 -6 -36 16 -75 24 -44 48 -138 48 -186 -1 -44 -180 170 -236 283
+-18 36 -33 63 -34 59z m571 -799 c5 -8 22 -44 39 -81 29 -63 207 -306 308
+-420 l47 -53 -50 41 c-141 117 -323 328 -361 419 -27 66 -12 149 17 94z"/>
+<path d="M4080 2509 c-155 -70 -226 -277 -138 -403 15 -20 16 -26 6 -18 -28
+22 -58 96 -68 164 l-9 63 3 -67 c8 -146 116 -246 253 -235 98 7 181 65 208
+144 12 33 14 36 22 18 4 -11 8 -85 8 -165 -1 -129 -4 -156 -29 -240 -93 -320
+-270 -532 -662 -797 -143 -95 -231 -142 -329 -173 -89 -27 -241 -37 -327 -20
+-235 46 -473 221 -608 449 -29 50 -55 91 -58 91 -9 0 82 -156 122 -208 53 -69
+155 -167 216 -209 249 -169 543 -193 805 -64 161 79 422 254 558 374 136 120
+278 349 326 527 79 294 33 561 -114 658 -133 88 -281 -20 -221 -161 20 -48 50
+-70 96 -70 67 0 112 59 90 117 -12 33 -53 59 -80 51 -27 -9 -26 -25 3 -25 32
+0 47 -18 47 -55 0 -93 -127 -83 -146 11 -15 76 50 141 133 131 79 -9 128 -75
+121 -164 -8 -93 -72 -153 -165 -153 -62 0 -100 17 -137 60 -90 108 -39 292 99
+356 95 45 182 22 270 -69 51 -54 45 -38 -9 22 -70 76 -193 102 -286 60z"/>
+<path d="M1307 2474 c-9 -17 -34 -43 -56 -57 -39 -26 -50 -45 -34 -60 3 -4 13
+-1 22 7 9 8 39 23 66 33 57 21 68 45 37 83 l-19 24 -16 -30z"/>
+<path d="M4541 2485 c1 -19 18 -51 18 -35 0 8 -4 22 -9 30 -5 8 -9 11 -9 5z"/>
+<path d="M681 2311 c-1 -59 6 -95 35 -180 70 -210 226 -479 378 -653 146 -168
+321 -308 383 -308 46 0 24 37 -74 126 -327 294 -614 710 -702 1020 l-20 69 0
+-74z"/>
+<path d="M3881 2344 c0 -11 3 -14 6 -6 3 7 2 16 -1 19 -3 4 -6 -2 -5 -13z"/>
+<path d="M1280 2312 c0 -21 17 -44 71 -97 38 -39 102 -112 141 -163 87 -114
+107 -129 41 -31 -27 41 -75 117 -106 169 -38 64 -69 104 -96 123 -21 15 -42
+27 -45 27 -3 0 -6 -12 -6 -28z"/>
+<path d="M3671 2289 c-28 -80 -8 -120 128 -263 165 -172 216 -260 228 -395 l6
+-66 15 35 c22 52 18 138 -8 189 -12 24 -61 84 -108 134 l-87 90 55 -35 c73
+-45 100 -56 158 -64 68 -9 147 16 197 61 39 35 39 36 5 12 -69 -49 -103 -61
+-170 -61 -81 0 -142 27 -256 111 -131 98 -175 168 -154 243 13 44 6 51 -9 9z
+m174 -278 c-3 -3 -18 8 -33 23 l-27 29 32 -23 c18 -13 30 -26 28 -29z"/>
+<path d="M822 2260 c0 -14 2 -19 5 -12 2 6 2 18 0 25 -3 6 -5 1 -5 -13z"/>
+<path d="M830 2219 c0 -33 53 -177 105 -286 30 -62 56 -113 59 -113 2 0 -18
+47 -45 105 -27 58 -65 151 -84 208 -19 56 -35 95 -35 86z"/>
+<path d="M550 2124 c0 -6 18 -67 40 -135 48 -146 128 -317 203 -432 60 -93
+183 -242 248 -302 24 -22 12 -6 -27 36 -39 42 -99 118 -133 170 -77 117 -218
+395 -282 554 -27 66 -48 115 -49 109z"/>
+<path d="M982 2068 c-29 -29 -1 -75 38 -63 17 5 20 13 18 38 -3 35 -33 48 -56
+25z"/>
+<path d="M4312 1987 c-45 -182 -140 -356 -275 -506 -67 -74 -152 -199 -142
+-209 8 -8 101 67 166 135 98 103 178 231 218 351 21 61 65 296 59 313 -2 4
+-13 -33 -26 -84z"/>
+<path d="M1152 1958 c-7 -7 -12 -17 -12 -23 0 -10 43 -54 113 -115 l27 -24
+-20 59 c-20 58 -62 115 -85 115 -6 0 -16 -5 -23 -12z"/>
+<path d="M2975 1876 c-163 -52 -274 -185 -283 -338 -9 -143 67 -250 208 -292
+67 -20 110 -20 185 -1 126 33 215 128 215 229 0 56 -18 94 -60 130 -56 46
+-153 29 -185 -34 -23 -45 -18 -51 14 -19 29 28 61 36 96 23 26 -10 48 -62 41
+-99 -25 -129 -230 -170 -340 -67 -125 118 -64 310 139 439 68 43 54 56 -30 29z"/>
+<path d="M2299 1857 c-31 -21 -34 -27 -31 -66 2 -23 9 -59 16 -79 l13 -37 8
+65 c4 36 16 79 26 96 31 52 22 58 -32 21z"/>
+<path d="M3502 1783 c49 -53 83 -111 104 -178 7 -22 13 -33 13 -24 3 55 -73
+187 -131 229 -27 19 -25 15 14 -27z"/>
+<path d="M3120 1765 c-90 -29 -180 -140 -180 -222 0 -45 23 -97 51 -117 36
+-25 95 -21 124 9 14 13 25 29 25 34 0 6 -11 -1 -25 -14 -28 -29 -42 -31 -72
+-10 -35 24 -47 85 -27 134 41 104 162 138 248 70 18 -14 34 -19 54 -15 44 10
+112 -30 139 -83 70 -134 -16 -299 -202 -388 -85 -40 -204 -67 -258 -57 -56 9
+-39 -12 25 -31 76 -22 211 -20 294 6 185 57 427 225 495 343 31 56 41 90 10
+41 -40 -67 -141 -127 -235 -141 -46 -6 -49 -5 -42 12 17 44 28 133 22 182 -12
+104 -77 191 -175 235 -59 27 -206 33 -271 12z"/>
+<path d="M2227 1696 c15 -30 29 -54 31 -52 5 5 -39 95 -49 102 -5 3 3 -19 18
+-50z"/>
+<path d="M1720 1676 c0 -3 9 -10 20 -16 11 -6 20 -8 20 -6 0 3 -9 10 -20 16
+-11 6 -20 8 -20 6z"/>
+<path d="M1775 1643 c6 -5 46 -36 90 -68 136 -102 214 -188 329 -362 59 -89
+113 -166 121 -173 30 -25 -218 337 -263 384 -51 53 -229 198 -265 217 -12 6
+-17 7 -12 2z"/>
+<path d="M3806 1598 c-17 -29 -58 -82 -93 -117 -34 -36 -60 -67 -58 -69 7 -8
+77 42 122 87 43 43 67 95 61 131 -2 16 -10 8 -32 -32z"/>
+<path d="M886 1584 c-9 -8 -16 -21 -16 -27 0 -20 38 -75 63 -92 23 -14 57 -12
+57 5 0 13 -73 130 -81 130 -4 0 -15 -7 -23 -16z"/>
+<path d="M3623 1520 c0 -25 2 -35 4 -22 2 12 2 32 0 45 -2 12 -4 2 -4 -23z"/>
+<path d="M3110 1526 c0 -2 7 -7 16 -10 8 -3 12 -2 9 4 -6 10 -25 14 -25 6z"/>
+<path d="M1145 1165 c-36 -35 -34 -88 4 -126 36 -36 70 -37 110 -3 35 29 27
+32 170 -61 91 -60 299 -175 316 -175 24 0 -34 38 -159 106 -211 114 -286 163
+-286 186 0 28 -27 76 -49 88 -34 18 -80 12 -106 -15z"/>
+<path d="M1650 1116 c0 -2 31 -23 69 -46 47 -28 71 -49 73 -63 2 -14 10 -22
+23 -22 26 0 27 38 1 43 -10 2 -42 19 -70 36 -61 39 -96 58 -96 52z"/>
+<path d="M1525 1051 c-9 -16 3 -31 26 -31 14 0 19 6 17 17 -4 20 -33 29 -43
+14z"/>
+<path d="M2030 935 c0 -4 14 -34 32 -67 51 -97 135 -150 350 -224 143 -49 247
+-68 375 -69 92 0 115 3 129 17 37 36 -2 52 -179 73 -166 19 -280 49 -433 115
+-135 58 -190 88 -239 132 -19 16 -35 27 -35 23z"/>
+<path d="M1848 755 c-10 -22 -9 -29 10 -47 18 -19 25 -20 47 -10 44 20 28 82
+-22 82 -15 0 -27 -9 -35 -25z"/>
+<path d="M2057 713 c-4 -3 -7 -19 -7 -34 0 -31 28 -53 54 -43 22 8 31 51 16
+69 -13 15 -51 20 -63 8z"/>
+<path d="M2688 703 c7 -3 16 -2 19 1 4 3 -2 6 -13 5 -11 0 -14 -3 -6 -6z"/>
+</g>
+</svg>`
+    
+    // 保存原始SVG代码
+    svgRawContent.value = svgContent.trim()
+    
+    const blob = new Blob([svgContent], { type: 'image/svg+xml' })
+    return URL.createObjectURL(blob)
+  } else {
+    // PNG模拟数据 - 使用 picsum 作为示例图片
+    const width = 400
+    const height = 400
+    const seed = Math.floor(Math.random() * 1000)
+    return `https://picsum.photos/seed/${seed}/${width}/${height}`
+  }
+}
+
+// 监听visible变化
+watch(() => props.visible, (newVal) => {
+  if (!newVal) {
+    // 弹窗关闭时重置状态
+    setTimeout(() => {
+      prompt.value = ''
+      previewUrl.value = ''
+      isGenerating.value = false
+    }, 300)
+  }
+})
+</script>
+
+<style scoped>
+.ai-generate-dialog {
+  position: relative;
+  z-index: 1000;
+}
+
+.dialog-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.dialog-content {
+  background: white;
+  border-radius: 12px;
+  width: 90%;
+  max-width: 900px;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
+  animation: dialogSlideIn 0.3s ease-out;
+}
+
+@keyframes dialogSlideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-20px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.dialog-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 24px;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.dialog-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: #1f2937;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  font-size: 24px;
+  color: #6b7280;
+  cursor: pointer;
+  padding: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  transition: all 0.2s;
+}
+
+.close-btn:hover {
+  background: #f3f4f6;
+  color: #374151;
+}
+
+.dialog-body {
+  padding: 24px;
+}
+
+.dialog-content-wrapper {
+  display: flex;
+  gap: 24px;
+  min-height: 400px;
+}
+
+.form-section {
+  flex: 1;
+  min-width: 0;
+}
+
+.preview-section {
+  flex: 1;
+  min-width: 300px;
+  display: flex;
+  flex-direction: column;
+}
+
+.form-group {
+  margin-bottom: 24px;
+}
+
+.form-label {
+  display: block;
+  margin-bottom: 8px;
+  font-weight: 500;
+  color: #374151;
+  font-size: 14px;
+}
+
+.model-selector {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.model-option {
+  border: 2px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 16px;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.model-option:hover {
+  border-color: #d1d5db;
+  background: #f9fafb;
+}
+
+.model-option.active {
+  border-color: #3b82f6;
+  background: #eff6ff;
+}
+
+.model-icon {
+  font-size: 24px;
+  flex-shrink: 0;
+}
+
+.model-info {
+  flex: 1;
+}
+
+.model-name {
+  font-weight: 500;
+  color: #1f2937;
+  margin-bottom: 4px;
+}
+
+.model-desc {
+  font-size: 12px;
+  color: #6b7280;
+}
+
+.prompt-input {
+  width: 100%;
+  border: 2px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 12px;
+  font-size: 14px;
+  line-height: 1.5;
+  resize: vertical;
+  min-height: 100px;
+  transition: border-color 0.2s;
+}
+
+.prompt-input:focus {
+  outline: none;
+  border-color: #3b82f6;
+}
+
+.input-hint {
+  margin-top: 6px;
+  font-size: 12px;
+  color: #6b7280;
+}
+
+.generate-btn {
+  width: 100%;
+  background: #3b82f6;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  padding: 12px 24px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.generate-btn:hover:not(:disabled) {
+  background: #2563eb;
+}
+
+.generate-btn:disabled {
+  background: #d1d5db;
+  cursor: not-allowed;
+}
+
+.preview-section .form-label {
+  margin-bottom: 12px;
+}
+
+.preview-container {
+  border: 2px dashed #d1d5db;
+  border-radius: 8px;
+  padding: 24px;
+  text-align: center;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 300px;
+}
+
+.preview-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  color: #9ca3af;
+}
+
+.placeholder-icon {
+  font-size: 48px;
+  opacity: 0.5;
+}
+
+.placeholder-text {
+  font-size: 14px;
+  color: #6b7280;
+}
+
+.preview-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  color: #6b7280;
+}
+
+.loading-text {
+  font-size: 14px;
+}
+
+.preview-image-wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+}
+
+.preview-image {
+  max-width: 100%;
+  max-height: 250px;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  object-fit: contain;
+}
+
+.preview-info {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+}
+
+.model-tag {
+  background: #3b82f6;
+  color: white;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.size-info {
+  color: #6b7280;
+  font-size: 12px;
+}
+
+.loading-spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid #e5e7eb;
+  border-top: 2px solid #3b82f6;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+.loading-spinner.large {
+  width: 32px;
+  height: 32px;
+  border-width: 3px;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  padding: 20px 24px;
+  border-top: 1px solid #e5e7eb;
+  background: #f9fafb;
+  border-radius: 0 0 12px 12px;
+}
+
+.btn {
+  padding: 10px 20px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  border: none;
+}
+
+.btn-secondary {
+  background: #f3f4f6;
+  color: #374151;
+}
+
+.btn-secondary:hover {
+  background: #e5e7eb;
+}
+
+.btn-primary {
+  background: #3b82f6;
+  color: white;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: #2563eb;
+}
+
+.btn-primary:disabled {
+  background: #d1d5db;
+  cursor: not-allowed;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .dialog-content {
+    max-width: 95%;
+    margin: 20px;
+  }
+  
+  .dialog-content-wrapper {
+    flex-direction: column;
+    min-height: auto;
+  }
+  
+  .preview-section {
+    min-width: auto;
+    margin-top: 20px;
+  }
+  
+  .preview-container {
+    min-height: 200px;
+  }
+}
+</style>
diff --git a/spx-gui/src/components/editor/common/painter/painter.vue b/spx-gui/src/components/editor/common/painter/painter.vue
index 229b92ada..debafe74b 100644
--- a/spx-gui/src/components/editor/common/painter/painter.vue
+++ b/spx-gui/src/components/editor/common/painter/painter.vue
@@ -28,9 +28,9 @@
         </button>
         
         <button 
-          :class="['tool-btn', { active: currentTool === 'select' }]"
-          @click="selectTool('select')"
-          title="选择工具"
+          :class="['tool-btn', { active: currentTool === 'reshape' }]"
+          @click="selectTool('reshape')"
+          title="变形工具"
         >
           <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <path d="m3 3 7.07 16.97 2.51-7.39 7.39-2.51L3 3z"></path>
@@ -40,6 +40,24 @@
         </button>
       </div>
       
+      <div class="tool-section">
+        <h3 class="tool-title">AI工具</h3>
+        <button class="tool-btn ai-btn" @click="showAiDialog" title="AI生成图片">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M9 12l2 2 4-4"></path>
+            <path d="M21 12c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1z"></path>
+            <path d="M3 12c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1z"></path>
+            <path d="M12 21c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1z"></path>
+            <path d="M12 3c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1z"></path>
+            <path d="M18.364 18.364c.39.39 1.024.39 1.414 0s.39-1.024 0-1.414-.024-.39-1.414 0-.39 1.024 0 1.414z"></path>
+            <path d="M4.222 4.222c.39.39 1.024.39 1.414 0s.39-1.024 0-1.414-1.024-.39-1.414 0-.39 1.024 0 1.414z"></path>
+            <path d="M18.364 5.636c.39-.39.39-1.024 0-1.414s-1.024-.39-1.414 0-.39 1.024 0 1.414 1.024.39 1.414 0z"></path>
+            <path d="M4.222 19.778c.39-.39.39-1.024 0-1.414s-1.024-.39-1.414 0-.39 1.024 0 1.414 1.024.39 1.414 0z"></path>
+          </svg>
+          <span>AI生成</span>
+        </button>
+      </div>
+      
       <div class="tool-section">
         <h3 class="tool-title">操作</h3>
         <button class="tool-btn action-btn" @click="clearCanvas" title="清空画布">
@@ -82,6 +100,13 @@
         @path-created="handlePathCreated"
       />
     </div>
+    
+    <!-- AI生成弹窗 -->
+    <AiGenerate 
+      v-model:visible="aiDialogVisible"
+      @confirm="handleAiConfirm"
+      @cancel="handleAiCancel"
+    />
   </div>
 </template>
 
@@ -90,9 +115,10 @@ import { ref, onMounted, onUnmounted, watch } from 'vue'
 import paper from 'paper'
 import DrawLine from './components/draw_line.vue'
 import DrawBrush from './components/draw_brush.vue'
+import AiGenerate from './components/ai_generate.vue'
 
 // 工具类型
-type ToolType = 'line' | 'brush' | 'select'
+type ToolType = 'line' | 'brush' | 'reshape'
 
 // TypeScript 接口定义
 interface ExtendedItem extends paper.Item {
@@ -113,7 +139,7 @@ const canvasWidth = ref<number>(800)
 const canvasHeight = ref<number>(600)
 
 // 工具状态
-const currentTool = ref<ToolType>('line')
+const currentTool = ref<ToolType | null>(null)
 const drawLineRef = ref<InstanceType<typeof DrawLine> | null>(null)
 const drawBrushRef = ref<InstanceType<typeof DrawBrush> | null>(null)
 // 状态管理
@@ -129,6 +155,9 @@ const imgLoading = ref<boolean>(true)
 // 存储背景图片的引用
 const backgroundImage = ref<paper.Raster | null>(null)
 
+// AI生成弹窗状态
+const aiDialogVisible = ref<boolean>(false)
+
 const props = defineProps<{
   imgSrc: string | null
   imgLoading: boolean
@@ -181,13 +210,13 @@ const loadImageToCanvas = (imageSrc: string): void => {
     paper.view.update()
   }
 
-  raster.onMouseDown = (event: paper.MouseEvent) => {
-    if (currentTool.value === 'select') {
-      selectPathExclusive(null) // 清除路径选择
-      raster.selected = true
-      paper.view.update()
-    }
-  }
+  // raster.onMouseDown = (event: paper.MouseEvent) => {
+    // if (currentTool.value === 'reshape') {
+    //   selectPathExclusive(null) // 清除路径选择
+    //   raster.selected = true
+    //   paper.view.update()
+    // }
+  // }
 }
 
 // 初始化 Paper.js
@@ -273,13 +302,31 @@ const showControlPoints = (path: paper.Path): void => {
   hideControlPoints()
   selectPathExclusive(path)
   
+  // console.log('显示控制点 - 路径类型:', path.constructor.name, '路径:', path)
+  
   if (path && path.segments) {
+    // console.log('路径段数:', path.segments.length)
     path.segments.forEach((segment: paper.Segment, index: number) => {
       const controlPoint = createControlPoint(segment.point)
       controlPoint.segmentIndex = index
       controlPoint.parentPath = path
       controlPoints.value.push(controlPoint)
     })
+  } else if (path instanceof paper.CompoundPath) {
+    // 处理复合路径
+    // console.log('处理复合路径')
+    path.children.forEach((child: paper.Item, childIndex: number) => {
+      if (child instanceof paper.Path && child.segments) {
+        child.segments.forEach((segment: paper.Segment, segIndex: number) => {
+          const controlPoint = createControlPoint(segment.point)
+          controlPoint.segmentIndex = segIndex
+          controlPoint.parentPath = child as paper.Path
+          controlPoints.value.push(controlPoint)
+        })
+      }
+    })
+  } else {
+    // console.warn('路径对象没有segments属性:', path)
   }
 }
 
@@ -295,19 +342,39 @@ const hideControlPoints = (): void => {
   allPaths.value.forEach((p: paper.Path) => {
     p.selected = false
   })
+  if (paper.project) {
+    paper.project.deselectAll()
+  }
 }
 
 // 检测点击的路径
 const getPathAtPoint = (point: paper.Point): paper.Path | null => {
+  // 扩大检测范围，同时检测填充和描边
   const hitResult = paper.project.hitTest(point, {
     segments: false,
     stroke: true,
-    fill: false,
-    tolerance: 12
+    fill: true, // 也检测填充区域
+    tolerance: 15 // 增加容差
   })
   
   if (hitResult && hitResult.item && !(hitResult.item as ExtendedItem).isControlPoint) {
-    return hitResult.item as paper.Path
+    let targetItem = hitResult.item
+    
+    // 如果点击的是组内的对象，需要找到实际的路径对象
+    while (targetItem.parent && targetItem.parent !== paper.project.activeLayer) {
+      targetItem = targetItem.parent
+    }
+    
+    // 检查是否在allPaths数组中
+    const pathInArray = allPaths.value.find(path => path === targetItem || path === hitResult.item)
+    if (pathInArray) {
+      return pathInArray
+    }
+    
+    // 如果是Path或CompoundPath类型，返回原始点击的对象
+    if (hitResult.item instanceof paper.Path || hitResult.item instanceof paper.CompoundPath) {
+      return hitResult.item as paper.Path
+    }
   }
   return null
 }
@@ -422,8 +489,9 @@ const addControlPointOnPath = (path: paper.Path, clickPoint: paper.Point): Exten
   return null
 }
 
-// 鼠标按下事件（用于开始拖拽控制点）
+// 鼠标按下事件（变形-用于开始拖拽控制点）
 const handleMouseDown = (event: MouseEvent): void => {
+  // console.log('handleMouseDown')
   const rect = canvasRef.value?.getBoundingClientRect()
   if (!rect) return
   
@@ -438,7 +506,7 @@ const handleMouseDown = (event: MouseEvent): void => {
     return
   }
   
-  if (currentTool.value !== 'select') return
+  if (currentTool.value !== 'reshape') return
   
   // 检查是否点击了控制点
   const controlPoint = getControlPointAtPoint(point)
@@ -474,10 +542,11 @@ const handleCanvasClick = (event: MouseEvent): void => {
     if (drawLineRef.value) {
       drawLineRef.value.handleCanvasClick({ x: point.x, y: point.y })
     }
-  } else if (currentTool.value === 'select') {
+  } else if (currentTool.value === 'reshape') {
     // 检查是否点击了控制点（优先级最高）
     const controlPoint = getControlPointAtPoint(point)
     if (controlPoint) {
+      // console.log('controlPoint', controlPoint)
       // 不在这里设置拖拽状态，由 mousedown 处理
       return
     }
@@ -485,6 +554,7 @@ const handleCanvasClick = (event: MouseEvent): void => {
     // 检查是否点击了现有路径
     const clickedPath = getPathAtPoint(point)
     if (clickedPath) {
+      // console.log('clickedPath', clickedPath)
       // 仅选中并显示端点（不新增控制点）
       showControlPoints(clickedPath)
       paper.view.update()
@@ -492,6 +562,7 @@ const handleCanvasClick = (event: MouseEvent): void => {
     }
     
     // 点击空白区域，隐藏控制点
+    // console.log('hideControlPoints')
     hideControlPoints()
     paper.view.update()
   }
@@ -519,7 +590,7 @@ const handleMouseMove = (event: MouseEvent): void => {
   
   // 若按在路径上且尚未开始拖拽，当移动超过阈值时，创建临时控制点并进入拖拽
   if (
-    currentTool.value === 'select' &&
+    currentTool.value === 'reshape' &&
     !isDragging.value &&
     mouseDownPath.value &&
     mouseDownPos.value
@@ -604,6 +675,165 @@ const handleMouseUp = (): void => {
   }
 }
 
+// 显示AI生成弹窗
+const showAiDialog = (): void => {
+  aiDialogVisible.value = true
+}
+
+// 处理AI生成确认
+const handleAiConfirm = (data: { 
+  model: string; 
+  prompt: string; 
+  url?: string; 
+  svgContent?: string;
+}): void => {
+  // console.log('AI生成确认:', data)
+  
+  if (data.model === 'svg' && data.svgContent) {
+    // 处理SVG导入
+    importSvgToCanvas(data.svgContent)
+  } else if (data.model === 'png' && data.url) {
+    // 处理PNG图片导入
+    importImageToCanvas(data.url)
+  }
+  
+  aiDialogVisible.value = false
+}
+
+// 处理AI生成取消
+const handleAiCancel = (): void => {
+  // console.log('AI生成取消')
+  aiDialogVisible.value = false
+}
+
+// 导入PNG图片到画布
+const importImageToCanvas = (imageUrl: string): void => {
+  if (!paper.project) return
+  
+  // 创建新的光栅图像
+  const raster = new paper.Raster(imageUrl)
+  
+  raster.onLoad = () => {
+    // 图片加载完成后的处理
+    // 设置图片位置到画布中心
+    raster.position = paper.view.center
+    
+    // 调整图片大小适应画布
+    const scale = Math.min(
+      canvasWidth.value / raster.width * 0.6,
+      canvasHeight.value / raster.height * 0.6
+    )
+    
+    if (scale < 1) {
+      raster.scale(scale)
+    }
+    
+    // 添加点击事件处理
+    // raster.onMouseDown = (event: paper.MouseEvent) => {
+    //   if (currentTool.value === 'reshape') {
+    //     selectPathExclusive(null) // 清除路径选择
+    //     raster.selected = true
+    //     paper.view.update()
+    //   }
+    // }
+    
+    // 更新视图
+    paper.view.update()
+    // console.log('PNG图片已导入到画布')
+  }
+  
+  raster.onError = () => {
+    console.error('图片加载失败')
+  }
+}
+
+// 导入SVG到画布并转换为可编辑的路径
+const importSvgToCanvas = (svgContent: string): void => {
+  if (!paper.project) return
+  
+  try {
+    // 创建一个临时的SVG元素来解析SVG内容
+    const parser = new DOMParser()
+    const svgDoc = parser.parseFromString(svgContent, 'image/svg+xml')
+    const svgElement = svgDoc.documentElement
+    
+    // 检查是否解析成功
+    if (svgElement.nodeName !== 'svg') {
+      console.error('无效的SVG内容')
+      return
+    }
+    
+    // 使用Paper.js导入SVG
+    const importedItem = paper.project.importSVG(svgElement as unknown as SVGElement)
+    
+    if (importedItem) {
+      // 设置位置到画布中心
+      importedItem.position = paper.view.center
+      
+      // 调整大小适应画布
+      const bounds = importedItem.bounds
+      const scale = Math.min(
+        canvasWidth.value / bounds.width * 0.6,
+        canvasHeight.value / bounds.height * 0.6
+      )
+      
+      if (scale < 1) {
+        importedItem.scale(scale)
+      }
+      
+      // 收集所有可编辑的路径
+      // const collectPaths = (item: paper.Item): void => {
+      //   if (item instanceof paper.Path && item.segments && item.segments.length > 0) {
+      //     // 添加到可编辑路径列表
+      //     allPaths.value.push(item)
+          
+      //     // 添加鼠标事件处理
+      //     item.onMouseDown = (event: paper.MouseEvent) => {
+      //       if (currentTool.value === 'reshape') {
+      //         showControlPoints(item)
+      //         paper.view.update()
+      //       }
+      //     }
+      //   } else if (item instanceof paper.Group || item instanceof paper.CompoundPath) {
+      //     // 递归处理子项
+      //     if (item.children) {
+      //       item.children.forEach(child => collectPaths(child))
+      //     }
+      //   }
+      // }
+      
+      // 收集导入的所有路径
+      // collectPaths(importedItem)
+      
+      // 更新视图
+      paper.view.update()
+      // console.log(`SVG已导入到画布，共${allPaths.value.length - (allPaths.value.length - countNewPaths(importedItem))}条可编辑路径`)
+    }
+  } catch (error) {
+    console.error('SVG导入失败:', error)
+  }
+}
+
+// 辅助函数：计算新导入的路径数量
+// const countNewPaths = (item: paper.Item): number => {
+//   let count = 0
+  
+//   const countPathsRecursive = (item: paper.Item): void => {
+//     if (item instanceof paper.Path && item.segments && item.segments.length > 0) {
+//       count++
+//     } else if (item instanceof paper.Group || item instanceof paper.CompoundPath) {
+//       if (item.children) {
+//         item.children.forEach(child => countPathsRecursive(child))
+//       }
+//     }
+//   }
+  
+//   countPathsRecursive(item)
+//   return count
+// }
+
+
+
 // 清空画布
 const clearCanvas = (): void => {
   hideControlPoints()
@@ -755,6 +985,18 @@ onMounted(() => {
   color: #f57c00;
 }
 
+.tool-btn.ai-btn {
+  background-color: #f3e5f5;
+  border-color: #9c27b0;
+  color: #9c27b0;
+}
+
+.tool-btn.ai-btn:hover {
+  background-color: #e1bee7;
+  border-color: #7b1fa2;
+  color: #7b1fa2;
+}
+
 .tool-btn svg {
   flex-shrink: 0;
 }

From 04165af7778dee0aeb8647e69d4de5ab9a260619 Mon Sep 17 00:00:00 2001
From: AvenJi0320 <pychi0320@gmail.com>
Date: Wed, 13 Aug 2025 16:45:13 +0800
Subject: [PATCH 12/49] feat(spx-gui):add modify privew & change img save func

---
 .../editor/common/painter/painter.vue         | 177 ++++++++++++++----
 .../editor/sprite/CostumeDetail.vue           |  32 +++-
 spx-gui/src/components/ui/UIImg.vue           |  17 +-
 3 files changed, 181 insertions(+), 45 deletions(-)

diff --git a/spx-gui/src/components/editor/common/painter/painter.vue b/spx-gui/src/components/editor/common/painter/painter.vue
index debafe74b..6f6723ebb 100644
--- a/spx-gui/src/components/editor/common/painter/painter.vue
+++ b/spx-gui/src/components/editor/common/painter/painter.vue
@@ -154,6 +154,10 @@ const imgLoading = ref<boolean>(true)
 
 // 存储背景图片的引用
 const backgroundImage = ref<paper.Raster | null>(null)
+// 背景矩形（用于导出时隐藏）
+const backgroundRect = ref<paper.Path | null>(null)
+// 标记：当前是否由 props.imgSrc 触发的导入过程（用于避免导入→导出→再次导入循环）
+const isImportingFromProps = ref<boolean>(false)
 
 // AI生成弹窗状态
 const aiDialogVisible = ref<boolean>(false)
@@ -163,6 +167,10 @@ const props = defineProps<{
   imgLoading: boolean
 }>()
 
+const emit = defineEmits<{
+  (e: 'svg-change', svg: string): void
+}>()
+
 // 选中路径（独占选择）
 const selectPathExclusive = (path: paper.Path | null): void => {
   allPaths.value.forEach((p: paper.Path) => {
@@ -173,7 +181,7 @@ const selectPathExclusive = (path: paper.Path | null): void => {
   }
 }
 
-// 加载图片到画布
+// 加载位图图片到画布（PNG/JPG/...）
 const loadImageToCanvas = (imageSrc: string): void => {
   if (!paper.project) return
   
@@ -190,15 +198,8 @@ const loadImageToCanvas = (imageSrc: string): void => {
     // 设置图片位置到画布中心
     raster.position = paper.view.center
     
-    // 可选：调整图片大小适应画布
-    const scale = Math.min(
-      canvasWidth.value / raster.width,
-      canvasHeight.value / raster.height
-    ) * 0.8 // 留一些边距
-    
-    if (scale < 1) {
-      raster.scale(scale)
-    }
+    // 保持原始尺寸，不进行自动缩放
+    // 如果需要缩放，用户可以手动调整
     
     // 将图片放到最底层，作为背景
     raster.sendToBack()
@@ -219,6 +220,53 @@ const loadImageToCanvas = (imageSrc: string): void => {
   // }
 }
 
+// 根据 url 自动判断并导入到画布（优先解析为 SVG，其次作为位图 Raster）
+const loadFileToCanvas = async (imageSrc: string): Promise<void> => {
+  if (!paper.project) return
+  try {
+    const resp = await fetch(imageSrc)
+    // 先尝试从响应体的 blob.type 判断（对 blob: URL 更可靠）
+    let isSvg = false
+    let svgText: string | null = null
+    try {
+      const blob = await resp.clone().blob()
+      if (blob && typeof blob.type === 'string' && blob.type.includes('image/svg')) {
+        isSvg = true
+        svgText = await blob.text()
+      }
+    } catch {}
+
+    // 退化到 header 判断
+    if (!isSvg) {
+      const contentType = resp.headers.get('content-type') || ''
+      if (contentType.includes('image/svg')) {
+        isSvg = true
+        svgText = await resp.clone().text()
+      }
+    }
+
+    // 最后尝试直接将文本解析为 SVG（针对部分 blob: 无类型场景）
+    if (!isSvg) {
+      try {
+        const text = await resp.clone().text()
+        if (/^\s*<svg[\s\S]*<\/svg>\s*$/i.test(text)) {
+          isSvg = true
+          svgText = text
+        }
+      } catch {}
+    }
+
+    if (isSvg && svgText != null) {
+      importSvgToCanvas(svgText)
+    } else {
+      loadImageToCanvas(imageSrc)
+    }
+  } catch {
+    // 回退策略：按位图处理
+    loadImageToCanvas(imageSrc)
+  }
+}
+
 // 初始化 Paper.js
 const initPaper = (): void => {
   if (!canvasRef.value) return
@@ -231,11 +279,9 @@ const initPaper = (): void => {
     size: [canvasWidth.value, canvasHeight.value],
     fillColor: 'transparent'
   })
+  backgroundRect.value = background
   
-  // 如果有初始图片，加载它
-  if (props.imgSrc) {
-    loadImageToCanvas(props.imgSrc)
-  }
+  // 初始图片加载交由下面的 watch 处理
   
   paper.view.update()
 }
@@ -259,14 +305,18 @@ const selectTool = (tool: ToolType): void => {
 
 // 处理直线创建
 const handleLineCreated = (line: paper.Path): void => {
+  console.log('handleLineCreated 被调用')
   allPaths.value.push(line)
   paper.view.update()
+  exportSvgAndEmit()
 }
 
 // 处理笔刷路径创建
 const handlePathCreated = (path: paper.Path): void => {
+  console.log('handlePathCreated 被调用')
   allPaths.value.push(path)
   paper.view.update()
+  exportSvgAndEmit()
 }
 
 // 创建控制点
@@ -648,6 +698,7 @@ const handleCanvasMouseUp = (event: MouseEvent): void => {
 // 鼠标释放事件（用于结束拖拽）
 const handleMouseUp = (): void => {
   const prevSelected = selectedPoint.value
+  const wasDragging = isDragging.value
   if (isDragging.value) {
     isDragging.value = false
     selectedPoint.value = null
@@ -673,6 +724,16 @@ const handleMouseUp = (): void => {
     }
     paper.view.update()
   }
+
+  if (wasDragging) {
+    console.log('拖拽结束，准备导出 SVG')
+    // props 驱动的导入不触发导出，避免循环
+    if (!isImportingFromProps.value) exportSvgAndEmit()
+    else {
+      console.log('跳过导出（props导入中）')
+      isImportingFromProps.value = false
+    }
+  }
 }
 
 // 显示AI生成弹窗
@@ -718,15 +779,8 @@ const importImageToCanvas = (imageUrl: string): void => {
     // 设置图片位置到画布中心
     raster.position = paper.view.center
     
-    // 调整图片大小适应画布
-    const scale = Math.min(
-      canvasWidth.value / raster.width * 0.6,
-      canvasHeight.value / raster.height * 0.6
-    )
-    
-    if (scale < 1) {
-      raster.scale(scale)
-    }
+    // 保持原始尺寸，不进行自动缩放
+    // 如果需要缩放，用户可以手动调整
     
     // 添加点击事件处理
     // raster.onMouseDown = (event: paper.MouseEvent) => {
@@ -740,6 +794,8 @@ const importImageToCanvas = (imageUrl: string): void => {
     // 更新视图
     paper.view.update()
     // console.log('PNG图片已导入到画布')
+
+    exportSvgAndEmit()
   }
   
   raster.onError = () => {
@@ -770,16 +826,8 @@ const importSvgToCanvas = (svgContent: string): void => {
       // 设置位置到画布中心
       importedItem.position = paper.view.center
       
-      // 调整大小适应画布
-      const bounds = importedItem.bounds
-      const scale = Math.min(
-        canvasWidth.value / bounds.width * 0.6,
-        canvasHeight.value / bounds.height * 0.6
-      )
-      
-      if (scale < 1) {
-        importedItem.scale(scale)
-      }
+      // 保持原始尺寸，不进行自动缩放
+      // 如果需要缩放，用户可以手动调整
       
       // 收集所有可编辑的路径
       // const collectPaths = (item: paper.Item): void => {
@@ -808,6 +856,9 @@ const importSvgToCanvas = (svgContent: string): void => {
       // 更新视图
       paper.view.update()
       // console.log(`SVG已导入到画布，共${allPaths.value.length - (allPaths.value.length - countNewPaths(importedItem))}条可编辑路径`)
+      // 导入来源于 props 时不导出，避免循环
+      if (!isImportingFromProps.value) exportSvgAndEmit()
+      else isImportingFromProps.value = false
     }
   } catch (error) {
     console.error('SVG导入失败:', error)
@@ -862,16 +913,37 @@ const clearCanvas = (): void => {
     size: [canvasWidth.value, canvasHeight.value],
     fillColor: 'transparent'
   })
+  backgroundRect.value = background
   
   paper.view.update()
+
+  // 导出变更
+  exportSvgAndEmit()
 }
 
 // 监听props中的imgSrc变化
-watch(() => props.imgSrc, (newImgSrc) => {
-  if (newImgSrc) {
-    loadImageToCanvas(newImgSrc)
-  }
-}, { immediate: true })
+watch(
+  () => props.imgSrc,
+  (newImgSrc) => {
+    if (!newImgSrc) return
+    isImportingFromProps.value = true
+    // 每次外部传入图片时，清空当前项目并重新导入，避免叠加
+    if (paper.project) {
+      paper.project.clear()
+      const background = new paper.Path.Rectangle({
+        point: [0, 0],
+        size: [canvasWidth.value, canvasHeight.value],
+        fillColor: 'transparent'
+      })
+      backgroundRect.value = background
+      allPaths.value = []
+      backgroundImage.value = null
+      paper.view.update()
+    }
+    loadFileToCanvas(newImgSrc)
+  },
+  { immediate: true }
+)
 
 onMounted(() => {
   initPaper()
@@ -895,6 +967,7 @@ onMounted(() => {
         allPaths.value = allPaths.value.filter((path: paper.Path) => path !== pathToDelete)
         hideControlPoints()
         paper.view.update()
+        exportSvgAndEmit()
       }
     }
   }
@@ -909,6 +982,34 @@ onMounted(() => {
     window.removeEventListener('mouseup', handleMouseUp)
   })
 })
+
+// 导出当前画布为 SVG 并上报父组件
+const exportSvgAndEmit = (): void => {
+  console.log('exportSvgAndEmit 被调用')
+  if (!paper.project) {
+    console.log('paper.project 不存在')
+    return
+  }
+  const prevVisible = backgroundRect.value?.visible ?? true
+  if (backgroundRect.value) backgroundRect.value.visible = false
+  try {
+    // 导出SVG时保持原始尺寸和viewBox
+    const svgStr = (paper.project as any).exportSVG({ 
+      asString: true, 
+      embedImages: true,
+      bounds: paper.view.bounds // 使用视图边界确保尺寸正确
+    }) as string
+    console.log('导出的 SVG 长度:', svgStr?.length)
+    if (typeof svgStr === 'string') {
+      console.log('发送 svg-change 事件')
+      emit('svg-change', svgStr)
+    }
+  } catch (e) {
+    console.error('导出 SVG 失败:', e)
+  } finally {
+    if (backgroundRect.value) backgroundRect.value.visible = prevVisible
+  }
+}
 </script>
 
 <style scoped>
diff --git a/spx-gui/src/components/editor/sprite/CostumeDetail.vue b/spx-gui/src/components/editor/sprite/CostumeDetail.vue
index 1a2b18eb0..df8f21477 100644
--- a/spx-gui/src/components/editor/sprite/CostumeDetail.vue
+++ b/spx-gui/src/components/editor/sprite/CostumeDetail.vue
@@ -2,7 +2,7 @@
   <EditorItemDetail :name="costume.name" @rename="handleRename">
     <div class="painter-wrapper">
       <CheckerboardBackground class="background" />
-      <Painter class="painter" :img-src="imgSrc" :img-loading="imgLoading" />
+      <Painter class="painter" :img-src="imgSrc" :img-loading="imgLoading" @svg-change="handleSvgChange" />
     </div>
   </EditorItemDetail>
 </template>
@@ -16,6 +16,8 @@ import EditorItemDetail from '../common/EditorItemDetail.vue'
 import CheckerboardBackground from './CheckerboardBackground.vue'
 import Painter from '@/components/editor/common/painter/painter.vue'
 import { useFileUrl } from '@/utils/file'
+import { fromText } from '@/models/common/file'
+import { useEditorCtx } from '../EditorContextProvider.vue'
 
 const props = defineProps<{
   costume: Costume
@@ -29,6 +31,34 @@ const handleRename = useMessageHandle(() => renameCostume(props.costume), {
 }).fn
 
 const [imgSrc, imgLoading] = useFileUrl(() => props.costume.img)
+
+// 在 setup 阶段获取 editorCtx，避免在异步函数中调用
+const editorCtx = useEditorCtx()
+
+async function handleSvgChange(svg: string) {
+  console.log('handleSvgChange 被调用，SVG 长度:', svg?.length)
+  // 用导出的 SVG 替换 costume.img
+  // 继承原文件名的基础名，改后缀为 .svg
+  const name = props.costume.name.replace(/[\\/\\:*?\"<>|]/g, '-') + '.svg'
+  const file = fromText(name, svg, { type: 'image/svg+xml' })
+  console.log('创建新文件:', name, '类型:', file.type)
+  
+  // 保存原始的分辨率设置
+  const originalBitmapResolution = props.costume.bitmapResolution
+  
+  // 历史记录包装
+  await editorCtx.project.history.doAction(
+    { name: { en: 'Update costume image', zh: '更新造型图片' } },
+    () => {
+      console.log('执行 setImg')
+      props.costume.setImg(file)
+      // 保持原始分辨率，不要强制改为1
+      props.costume.setBitmapResolution(originalBitmapResolution)
+      console.log('setImg 完成')
+    }
+  )
+  console.log('handleSvgChange 完成')
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/spx-gui/src/components/ui/UIImg.vue b/spx-gui/src/components/ui/UIImg.vue
index 1d07a2ad8..fe186d7e9 100644
--- a/spx-gui/src/components/ui/UIImg.vue
+++ b/spx-gui/src/components/ui/UIImg.vue
@@ -1,7 +1,9 @@
 <template>
-  <div class="ui-img" :style="imgStyle">
+  <div class="ui-img">
+    <img v-if="src" :src="src" :style="imgElStyle" />
     <UILoading :visible="loading" cover :mask="false" />
   </div>
+  
 </template>
 
 <script setup lang="ts">
@@ -20,12 +22,11 @@ const props = withDefaults(
     size: 'contain'
   }
 )
-const imgStyle = computed(() =>
+const imgElStyle = computed(() =>
   props.src == null
     ? null
     : {
-        backgroundImage: `url("${props.src}")`,
-        backgroundSize: props.size
+        objectFit: props.size
       }
 )
 </script>
@@ -33,10 +34,14 @@ const imgStyle = computed(() =>
 <style lang="scss" scoped>
 .ui-img {
   position: relative;
-  background-position: center;
-  background-repeat: no-repeat;
   display: flex;
   align-items: center;
   justify-content: center;
 }
+
+.ui-img img {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
 </style>

From d352e46312d828b323ecba6bdec26484441214d2 Mon Sep 17 00:00:00 2001
From: AvenJi0320 <pychi0320@gmail.com>
Date: Wed, 13 Aug 2025 17:20:12 +0800
Subject: [PATCH 13/49] fix(painter):fix control dot display

---
 .../editor/common/painter/painter.vue         | 78 ++++++++++++-------
 1 file changed, 50 insertions(+), 28 deletions(-)

diff --git a/spx-gui/src/components/editor/common/painter/painter.vue b/spx-gui/src/components/editor/common/painter/painter.vue
index 6f6723ebb..eb621b132 100644
--- a/spx-gui/src/components/editor/common/painter/painter.vue
+++ b/spx-gui/src/components/editor/common/painter/painter.vue
@@ -158,6 +158,8 @@ const backgroundImage = ref<paper.Raster | null>(null)
 const backgroundRect = ref<paper.Path | null>(null)
 // 标记：当前是否由 props.imgSrc 触发的导入过程（用于避免导入→导出→再次导入循环）
 const isImportingFromProps = ref<boolean>(false)
+// 保存当前选中的路径，用于导入后恢复控制点显示
+const selectedPathForRestore = ref<paper.Path | null>(null)
 
 // AI生成弹窗状态
 const aiDialogVisible = ref<boolean>(false)
@@ -300,12 +302,12 @@ const selectTool = (tool: ToolType): void => {
     drawBrushRef.value.resetDrawing()
   }
   
+  // 切换工具时总是隐藏控制点
   hideControlPoints()
 }
 
 // 处理直线创建
 const handleLineCreated = (line: paper.Path): void => {
-  console.log('handleLineCreated 被调用')
   allPaths.value.push(line)
   paper.view.update()
   exportSvgAndEmit()
@@ -313,7 +315,6 @@ const handleLineCreated = (line: paper.Path): void => {
 
 // 处理笔刷路径创建
 const handlePathCreated = (path: paper.Path): void => {
-  console.log('handlePathCreated 被调用')
   allPaths.value.push(path)
   paper.view.update()
   exportSvgAndEmit()
@@ -395,6 +396,8 @@ const hideControlPoints = (): void => {
   if (paper.project) {
     paper.project.deselectAll()
   }
+  // 强制更新视图
+  paper.view.update()
 }
 
 // 检测点击的路径
@@ -596,7 +599,6 @@ const handleCanvasClick = (event: MouseEvent): void => {
     // 检查是否点击了控制点（优先级最高）
     const controlPoint = getControlPointAtPoint(point)
     if (controlPoint) {
-      // console.log('controlPoint', controlPoint)
       // 不在这里设置拖拽状态，由 mousedown 处理
       return
     }
@@ -604,7 +606,6 @@ const handleCanvasClick = (event: MouseEvent): void => {
     // 检查是否点击了现有路径
     const clickedPath = getPathAtPoint(point)
     if (clickedPath) {
-      // console.log('clickedPath', clickedPath)
       // 仅选中并显示端点（不新增控制点）
       showControlPoints(clickedPath)
       paper.view.update()
@@ -612,7 +613,6 @@ const handleCanvasClick = (event: MouseEvent): void => {
     }
     
     // 点击空白区域，隐藏控制点
-    // console.log('hideControlPoints')
     hideControlPoints()
     paper.view.update()
   }
@@ -726,11 +726,9 @@ const handleMouseUp = (): void => {
   }
 
   if (wasDragging) {
-    console.log('拖拽结束，准备导出 SVG')
     // props 驱动的导入不触发导出，避免循环
     if (!isImportingFromProps.value) exportSvgAndEmit()
     else {
-      console.log('跳过导出（props导入中）')
       isImportingFromProps.value = false
     }
   }
@@ -830,28 +828,28 @@ const importSvgToCanvas = (svgContent: string): void => {
       // 如果需要缩放，用户可以手动调整
       
       // 收集所有可编辑的路径
-      // const collectPaths = (item: paper.Item): void => {
-      //   if (item instanceof paper.Path && item.segments && item.segments.length > 0) {
-      //     // 添加到可编辑路径列表
-      //     allPaths.value.push(item)
+      const collectPaths = (item: paper.Item): void => {
+        if (item instanceof paper.Path && item.segments && item.segments.length > 0) {
+          // 添加到可编辑路径列表
+          allPaths.value.push(item)
           
-      //     // 添加鼠标事件处理
-      //     item.onMouseDown = (event: paper.MouseEvent) => {
-      //       if (currentTool.value === 'reshape') {
-      //         showControlPoints(item)
-      //         paper.view.update()
-      //       }
-      //     }
-      //   } else if (item instanceof paper.Group || item instanceof paper.CompoundPath) {
-      //     // 递归处理子项
-      //     if (item.children) {
-      //       item.children.forEach(child => collectPaths(child))
-      //     }
-      //   }
-      // }
+          // 添加鼠标事件处理
+          item.onMouseDown = (event: paper.MouseEvent) => {
+            if (currentTool.value === 'reshape') {
+              showControlPoints(item)
+              paper.view.update()
+            }
+          }
+        } else if (item instanceof paper.Group || item instanceof paper.CompoundPath) {
+          // 递归处理子项
+          if (item.children) {
+            item.children.forEach(child => collectPaths(child))
+          }
+        }
+      }
       
       // 收集导入的所有路径
-      // collectPaths(importedItem)
+      collectPaths(importedItem)
       
       // 更新视图
       paper.view.update()
@@ -895,6 +893,9 @@ const clearCanvas = (): void => {
   })
   allPaths.value = []
   
+  // 清理选中路径状态
+  selectedPathForRestore.value = null
+  
   // 重置直线绘制状态
   if (drawLineRef.value) {
     drawLineRef.value.resetDrawing()
@@ -924,9 +925,10 @@ const clearCanvas = (): void => {
 // 监听props中的imgSrc变化
 watch(
   () => props.imgSrc,
-  (newImgSrc) => {
+  async (newImgSrc) => {
     if (!newImgSrc) return
     isImportingFromProps.value = true
+    
     // 每次外部传入图片时，清空当前项目并重新导入，避免叠加
     if (paper.project) {
       paper.project.clear()
@@ -940,7 +942,16 @@ watch(
       backgroundImage.value = null
       paper.view.update()
     }
-    loadFileToCanvas(newImgSrc)
+    
+    // 加载新内容
+    await loadFileToCanvas(newImgSrc)
+    
+    // 导入完成后清理状态，不自动恢复控制点显示
+    // 让用户主动点击路径来显示控制点，避免干扰绘制体验
+    setTimeout(() => {
+      selectedPathForRestore.value = null
+      isImportingFromProps.value = false
+    }, 200)
   },
   { immediate: true }
 )
@@ -990,6 +1001,17 @@ const exportSvgAndEmit = (): void => {
     console.log('paper.project 不存在')
     return
   }
+  
+  // 保存当前选中的路径（如果有控制点显示）
+  if (controlPoints.value.length > 0 && controlPoints.value[0].parentPath) {
+    selectedPathForRestore.value = controlPoints.value[0].parentPath
+  } else {
+    selectedPathForRestore.value = null
+  }
+  
+  // 在导出SVG之前隐藏所有控制点，避免控制点被包含在SVG中
+  hideControlPoints()
+  
   const prevVisible = backgroundRect.value?.visible ?? true
   if (backgroundRect.value) backgroundRect.value.visible = false
   try {

From cf0f1aad1140e1d23abe00749b3e67c9c8922a93 Mon Sep 17 00:00:00 2001
From: petezhuang <petezhuang13@163.com>
Date: Wed, 13 Aug 2025 17:41:42 +0800
Subject: [PATCH 14/49] feat(spx-gui):(in developing)ai generate png and svg
 function(backend deployed on localhost)

---
 spx-gui/src/apis/picgc.ts                     | 139 +++++++
 .../common/painter/components/ai_generate.vue | 388 +++---------------
 2 files changed, 199 insertions(+), 328 deletions(-)

diff --git a/spx-gui/src/apis/picgc.ts b/spx-gui/src/apis/picgc.ts
index e69de29bb..5b2a9c82e 100644
--- a/spx-gui/src/apis/picgc.ts
+++ b/spx-gui/src/apis/picgc.ts
@@ -0,0 +1,139 @@
+/**
+ * @desc Picture Generation APIs for AI image generation
+ */
+
+// independent baseUrl
+const PICGC_BASE_URL = 'http://localhost:8080'
+
+// 简单的HTTP请求函数
+async function picgcRequest(path: string, options: RequestInit = {}) {
+  const url = PICGC_BASE_URL + path
+  
+  const response = await fetch(url, {
+    headers: {
+      'Content-Type': 'application/json',
+      ...options.headers,
+    },
+    ...options,
+  })
+
+  if (!response.ok) {
+    const errorText = await response.text()
+    throw new Error(`Request failed: ${response.status} ${response.statusText} - ${errorText}`)
+  }
+
+  return response.json()
+}
+
+/** Image generation model types */
+export type ImageModel = 'png' | 'svg'
+
+/** 可用的样式选项 */
+export type StyleOption = 
+  | 'FLAT_VECTOR'
+  | 'FLAT_VECTOR_OUTLINE'
+  | 'FLAT_VECTOR_SILHOUETTE'
+  | 'FLAT_VECTOR_ONE_LINE_ART'
+  | 'FLAT_VECTOR_LINE_ART'
+
+/** Request payload for image generation */
+export interface GenerateImageRequest {
+  /** The text prompt describing the desired image */
+  prompt: string
+  negative_prompt?: string
+  style?: StyleOption
+  format?: string
+}
+
+/** Response from backend API */
+export interface GenerateImageResponse {
+  id: string
+  prompt: string
+  negative_prompt?: string
+  style?: string
+  svg_url: string
+  png_url: string
+  width: number
+  height: number
+  created_at: string
+}
+
+
+export async function generateImage(
+  prompt: string, 
+  options?: {
+    negative_prompt?: string
+    style?: StyleOption
+    format?: string
+  }
+): Promise<GenerateImageResponse> {
+  const payload: GenerateImageRequest = {
+    prompt,
+    negative_prompt: options?.negative_prompt || 'text, watermark',
+    style: options?.style || 'FLAT_VECTOR',
+    format: options?.format
+  }
+
+  //生成图片的接口
+  const response = await picgcRequest('/v1/images', {
+    method: 'POST',
+    body: JSON.stringify(payload)
+  }) as GenerateImageResponse
+  console.log('response', response)
+  return response
+}
+
+/**
+ * 直接生成并返回SVG内容
+ */
+export async function generateSvgDirect(
+  prompt: string,
+  options?: {
+    negative_prompt?: string
+    style?: StyleOption
+    format?: string
+  }
+): Promise<{
+  svgContent: string
+  id: string
+  width: number
+  height: number
+}> {
+  const payload: GenerateImageRequest = {
+    prompt,
+    negative_prompt: options?.negative_prompt || 'text, watermark',
+    style: options?.style || 'FLAT_VECTOR',
+    format: options?.format
+  }
+
+  const url = PICGC_BASE_URL + '/v1/images/svg'
+  
+  const response = await fetch(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(payload)
+  })
+
+  if (!response.ok) {
+    const errorText = await response.text()
+    throw new Error(`Request failed: ${response.status} ${response.statusText} - ${errorText}`)
+  }
+
+  // 获取SVG内容
+  const svgContent = await response.text()
+  console.log('svgContent', svgContent)
+  // 从响应头获取元数据
+  const id = response.headers.get('X-Image-Id') || 'unknown'
+  const width = parseInt(response.headers.get('X-Image-Width') || '512')
+  const height = parseInt(response.headers.get('X-Image-Height') || '512')
+
+  return {
+    svgContent,
+    id,
+    width,
+    height
+  }
+}
+
diff --git a/spx-gui/src/components/editor/common/painter/components/ai_generate.vue b/spx-gui/src/components/editor/common/painter/components/ai_generate.vue
index 5517771b3..cec3340dd 100644
--- a/spx-gui/src/components/editor/common/painter/components/ai_generate.vue
+++ b/spx-gui/src/components/editor/common/painter/components/ai_generate.vue
@@ -136,6 +136,7 @@
 
 <script setup lang="ts">
 import { ref, watch } from 'vue'
+import { generateImage, generateSvgDirect } from '@/apis/picgc'
 
 // Props
 interface Props {
@@ -178,11 +179,15 @@ const handleGenerate = async () => {
   try {
     // TODO: 这里需要调用实际的AI生成API
     // 目前使用模拟数据
-    await simulateGeneration()
-    
-    // 模拟生成结果
-    previewUrl.value = generateMockImageUrl()
-    imageSize.value = selectedModel.value === 'png' ? '512x512' : '矢量图'
+    // await simulateGeneration()
+
+    // // 模拟生成结果
+    // previewUrl.value = generateMockImageUrl()
+    // imageSize.value = selectedModel.value === 'png' ? '512x512' : '矢量图'
+
+    await handleRealGenerate()
+    // previewUrl 在 handleRealGenerate 中已经设置
+    // imageSize 在 handleRealGenerate 中已经设置
     
   } catch (error) {
     console.error('生成图片失败:', error)
@@ -245,331 +250,58 @@ const simulateGeneration = () => {
   })
 }
 
-// 生成模拟图片URL
-const generateMockImageUrl = () => {
-  if (selectedModel.value === 'svg') {
-    // SVG模拟数据 - 一个简单的彩色图形
-    const svgContent = `<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
- width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
- preserveAspectRatio="xMidYMid meet">
-<metadata>
-Created by potrace 1.16, written by Peter Selinger 2001-2019
-</metadata>
-<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
-fill="#000000" stroke="none">
-<path d="M3090 4524 c-226 -29 -420 -114 -628 -277 -116 -90 -170 -146 -248
--257 -29 -41 -67 -84 -84 -95 -39 -25 -94 -105 -154 -221 -59 -116 -102 -166
--172 -200 -104 -51 -200 -30 -309 69 -60 53 -143 107 -164 107 -9 -1 2 -10 24
--22 22 -11 79 -58 126 -103 66 -64 97 -86 139 -100 123 -41 237 12 347 161 26
-35 48 62 50 60 8 -8 -72 -158 -104 -195 -42 -50 -110 -83 -187 -91 l-61 -6 35
--12 c31 -11 26 -11 -46 -8 -47 2 -94 11 -112 20 -17 9 -59 50 -93 92 -35 42
--84 90 -109 107 l-45 31 50 -55 c28 -30 70 -83 94 -117 62 -87 120 -115 254
--120 125 -5 172 11 242 83 52 54 64 75 163 287 55 115 110 206 161 266 26 30
-31 28 20 -10 -14 -50 -10 -107 11 -168 11 -30 19 -81 20 -112 0 -47 -4 -62
--27 -89 -44 -52 -139 -78 -172 -46 -11 10 -12 8 -3 -9 27 -51 117 -56 178 -9
-69 52 92 135 69 244 -21 103 -19 149 11 208 30 62 132 168 216 225 60 40 229
-124 297 147 44 14 44 15 -65 -57 -180 -118 -348 -288 -380 -384 -17 -53 -13
--102 11 -134 14 -18 14 -17 5 9 -31 88 -1 157 130 291 111 114 188 170 355
-259 90 49 121 60 173 64 63 6 82 -6 44 -26 -33 -17 -132 -127 -193 -211 -79
--110 -166 -257 -271 -455 -164 -308 -225 -388 -356 -469 -65 -41 -78 -60 -20
--30 153 77 291 231 447 494 41 69 95 159 120 200 163 265 368 460 594 563 42
-20 77 40 77 46 0 10 -26 19 -120 41 -49 11 -284 21 -340 14z m208 -60 c18 -5
-20 -9 10 -21 -22 -27 -67 -43 -167 -58 -56 -8 -102 -15 -104 -15 -2 0 -3 20
--3 45 1 39 4 45 26 48 42 7 214 7 238 1z m-378 -67 c0 -25 -35 -47 -138 -87
--160 -62 -231 -102 -347 -193 -37 -29 -30 -20 28 37 96 93 220 177 329 222 88
-36 128 42 128 21z"/>
-<path d="M3698 4440 c-127 -23 -236 -69 -344 -145 -177 -126 -391 -434 -402
--578 -4 -46 -1 -62 13 -77 38 -42 102 -13 146 65 17 30 32 55 33 55 1 0 -5
--31 -15 -68 -9 -38 -20 -131 -24 -208 -11 -247 -44 -370 -135 -504 -79 -117
--196 -217 -336 -288 -101 -51 -166 -65 -270 -60 -80 4 -103 10 -168 41 -42 20
--76 40 -76 44 0 4 44 21 98 36 107 31 221 83 267 121 29 25 27 24 -74 -10 -58
--19 -155 -46 -216 -59 -211 -45 -292 -92 -344 -196 -25 -50 -31 -75 -31 -126
-0 -74 15 -115 59 -166 86 -97 248 -140 382 -101 137 41 379 197 527 341 l97
-94 -96 -79 c-104 -86 -219 -166 -286 -201 -60 -30 -63 -26 -10 14 92 70 70 77
--34 10 -118 -75 -191 -105 -269 -111 l-55 -5 47 19 c26 11 80 41 120 68 l73
-49 -38 3 c-29 3 -50 -4 -85 -27 -100 -64 -177 -77 -242 -42 -40 21 -90 106
--90 152 0 37 25 97 52 126 l21 22 27 -43 c57 -89 167 -155 276 -164 78 -6 147
-10 249 58 102 47 182 108 286 217 46 49 99 95 121 105 21 10 76 44 121 77 191
-138 394 250 562 310 174 63 225 83 230 90 2 5 -26 -2 -63 -15 -37 -12 -109
--34 -161 -49 -118 -32 -241 -92 -401 -193 -69 -44 -126 -78 -128 -77 -2 2 5
-20 16 42 11 21 50 117 87 213 111 287 167 384 282 490 37 34 98 80 136 102 84
-50 102 74 21 29 -87 -49 -142 -91 -210 -163 -114 -119 -187 -250 -274 -497
--47 -133 -85 -221 -95 -221 -3 0 4 19 16 41 40 79 88 249 119 416 58 317 128
-468 282 608 91 82 172 118 275 123 71 3 89 1 136 -21 98 -45 179 -135 219
--245 16 -44 21 -81 21 -162 1 -106 -12 -172 -50 -257 l-18 -39 -1 61 c-2 142
--101 264 -245 301 -150 39 -306 -40 -381 -193 -28 -57 -32 -77 -34 -157 -2
--90 -2 -91 5 -21 12 116 72 204 173 254 150 75 322 6 374 -151 24 -72 16 -187
--17 -258 -40 -86 -79 -123 -238 -221 -182 -113 -316 -211 -451 -328 -127 -111
--322 -248 -571 -404 -300 -188 -419 -242 -583 -270 l-79 -13 56 -14 c78 -18
-116 -44 135 -90 10 -22 19 -40 22 -40 3 0 28 15 55 33 39 25 51 40 58 70 l9
-39 39 -58 c46 -69 56 -113 69 -299 8 -115 32 -245 44 -245 2 0 1 42 -2 93 -4
-81 0 111 28 231 33 137 33 138 23 274 -5 76 -6 141 -2 146 5 6 9 -25 9 -70 l0
--79 19 31 c14 23 34 36 73 49 110 36 210 108 488 355 183 162 210 183 323 254
-155 97 314 146 544 167 297 27 446 -50 534 -274 l26 -69 13 51 c52 217 -47
-339 -310 381 -136 21 -355 8 -510 -31 -109 -27 -261 -107 -394 -205 -65 -48
--119 -84 -122 -81 -13 13 232 208 415 330 95 64 116 74 125 62 21 -29 102 -34
-264 -18 144 15 161 15 256 -2 194 -34 206 -32 206 32 0 45 -49 192 -94 280
--34 69 -125 198 -133 189 -2 -2 21 -53 51 -113 72 -140 72 -146 2 -138 -63 8
--145 -7 -234 -42 -35 -14 -65 -23 -68 -21 -2 3 14 17 36 32 56 37 114 90 152
-140 25 32 20 29 -23 -16 -61 -61 -114 -98 -143 -98 -15 0 -10 9 23 45 167 182
-264 504 217 725 -40 190 -154 322 -334 387 -74 27 -197 37 -274 23z m204 -126
-c108 -35 215 -130 267 -237 41 -84 60 -223 42 -302 -6 -24 -9 -16 -15 43 -21
-200 -122 359 -273 430 -51 23 -70 27 -153 26 -78 0 -107 -5 -162 -27 -95 -37
--173 -93 -264 -189 -43 -46 -65 -65 -49 -43 155 216 342 334 505 320 30 -3 76
--12 102 -21z m494 -1150 c42 -20 74 -63 74 -98 0 -31 -1 -31 -70 -5 -44 18
--78 22 -170 23 -63 0 -144 -3 -180 -7 l-65 -7 60 32 c145 77 273 99 351 62z
-m-2218 -511 l94 -48 107 0 c102 0 145 9 255 51 45 17 0 -19 -63 -50 -208 -105
--353 -98 -471 24 -84 86 -61 93 78 23z"/>
-<path d="M1990 4405 c-20 -25 -8 -50 25 -50 21 0 31 5 33 18 4 21 -14 47 -33
-47 -7 0 -18 -7 -25 -15z"/>
-<path d="M2220 4315 c0 -8 5 -15 10 -15 6 0 10 7 10 15 0 8 -4 15 -10 15 -5 0
--10 -7 -10 -15z"/>
-<path d="M2183 4273 c9 -2 25 -2 35 0 9 3 1 5 -18 5 -19 0 -27 -2 -17 -5z"/>
-<path d="M2103 4263 c9 -2 23 -2 30 0 6 3 -1 5 -18 5 -16 0 -22 -2 -12 -5z"/>
-<path d="M2943 4208 c-27 -35 -58 -75 -67 -90 -10 -14 -42 -43 -72 -64 -58
--40 -67 -60 -12 -26 48 30 151 147 202 230 18 29 -4 7 -51 -50z"/>
-<path d="M1915 4240 c-38 -10 -81 -23 -95 -29 l-25 -12 25 6 c14 3 69 13 123
-22 53 10 97 21 97 25 0 13 -50 8 -125 -12z"/>
-<path d="M2272 4248 c6 -18 28 -21 28 -4 0 9 -7 16 -16 16 -9 0 -14 -5 -12
--12z"/>
-<path d="M1495 4225 c-113 -24 -236 -84 -372 -182 -71 -50 -84 -67 -22 -27 81
-51 238 124 310 144 80 22 188 27 206 9 7 -7 8 -21 3 -40 -10 -34 -2 -36 33 -9
-52 41 43 92 -21 110 -46 12 -61 12 -137 -5z"/>
-<path d="M2045 4163 c-62 -19 -63 -20 -39 -38 29 -22 65 -18 96 12 48 46 33
-53 -57 26z"/>
-<path d="M2770 4130 c0 -24 29 -38 40 -20 12 19 1 40 -21 40 -12 0 -19 -7 -19
--20z"/>
-<path d="M2129 4103 l-24 -28 28 24 c25 23 32 31 24 31 -2 0 -14 -12 -28 -27z"/>
-<path d="M2688 4119 c-10 -6 -18 -17 -18 -24 0 -20 39 -19 47 1 8 22 -8 35
--29 23z"/>
-<path d="M1788 4105 c-123 -45 -228 -174 -228 -281 0 -101 82 -180 160 -152
-29 10 60 46 60 71 0 8 -18 19 -39 26 -93 27 -109 154 -29 228 58 54 174 79
-245 52 34 -12 93 -68 93 -87 0 -7 5 -10 11 -6 15 9 4 59 -22 96 -44 61 -162
-86 -251 53z"/>
-<path d="M1394 4056 c-132 -28 -199 -49 -279 -89 -193 -96 -339 -249 -408
--427 -35 -90 -47 -225 -27 -311 16 -72 72 -187 114 -238 34 -40 34 -42 20 -76
--8 -19 -14 -53 -14 -76 0 -54 36 -88 132 -123 107 -40 198 -56 306 -55 157 2
-173 14 27 21 -136 6 -190 19 -297 73 -68 34 -96 60 -119 110 -34 74 -24 82 35
-28 174 -159 331 -200 537 -139 82 24 220 82 169 71 -135 -30 -188 -37 -265
--38 -218 -2 -354 79 -445 267 -113 232 -84 473 78 648 131 142 301 198 467
-155 l50 -13 -3 59 c-4 68 18 139 51 162 20 14 21 15 2 14 -11 0 -70 -11 -131
--23z m-594 -510 c-44 -104 -51 -275 -17 -388 8 -27 13 -48 10 -48 -2 0 -18 30
--36 68 -29 60 -32 76 -31 157 0 94 9 126 60 213 32 54 38 54 14 -2z"/>
-<path d="M2660 3985 c0 -5 5 -17 10 -25 5 -8 10 -10 10 -5 0 6 -5 17 -10 25
--5 8 -10 11 -10 5z"/>
-<path d="M1864 3950 c-30 -12 -64 -58 -64 -87 0 -31 25 -79 45 -87 26 -10 60
--7 73 6 19 19 15 48 -7 48 -34 0 -51 12 -51 36 0 22 25 44 49 44 28 0 51 -41
-52 -92 l1 -53 19 43 c25 54 18 92 -23 127 -30 26 -57 30 -94 15z"/>
-<path d="M2761 3923 c-21 -48 -163 -282 -178 -295 -8 -6 -31 -15 -51 -19 -35
--6 -35 -7 -7 -8 44 -2 70 21 131 116 58 89 128 222 121 229 -2 2 -9 -8 -16
--23z"/>
-<path d="M2563 3920 c-12 -5 -29 -20 -38 -34 -22 -33 -9 -76 29 -94 23 -12 32
--11 64 5 40 20 60 60 24 51 -41 -11 -75 44 -36 59 13 5 13 7 2 14 -16 10 -17
-10 -45 -1z"/>
-<path d="M2931 3807 c-27 -45 -83 -155 -124 -244 -149 -323 -244 -407 -557
--493 -125 -35 -122 -43 10 -37 174 7 293 57 400 167 91 93 155 219 239 468 23
-68 53 146 66 173 38 75 22 59 -34 -34z"/>
-<path d="M2496 3749 c16 -18 82 -45 89 -37 3 2 -20 15 -50 29 -44 20 -52 22
--39 8z"/>
-<path d="M1490 3744 c0 -17 53 -86 91 -118 92 -78 223 -79 307 -2 49 44 44 56
--9 23 -49 -30 -58 -32 -143 -32 -74 0 -98 4 -131 22 -41 22 -84 62 -103 98 -6
-11 -12 15 -12 9z"/>
-<path d="M2200 3700 c-12 -8 -9 -10 12 -10 35 0 53 -30 34 -55 -8 -11 -19 -16
--30 -12 -10 4 -15 3 -11 -3 10 -17 33 -11 49 12 12 16 13 26 4 42 -18 35 -34
-42 -58 26z"/>
-<path d="M1123 3654 c-48 -24 -68 -53 -96 -139 -55 -168 -62 -350 -18 -450 52
--118 147 -204 246 -225 115 -24 228 17 450 162 153 101 209 130 330 174 50 18
-85 33 78 34 -20 0 -154 -50 -226 -86 -37 -18 -120 -68 -183 -109 -141 -92
--216 -130 -291 -150 -99 -26 -180 -15 -230 31 -23 20 -24 23 -6 15 32 -16 152
--13 214 5 68 20 174 73 312 158 60 36 142 78 183 93 40 16 74 31 74 34 0 3
--53 12 -117 19 -219 24 -301 55 -488 180 -55 37 -124 79 -152 93 l-52 27 -20
--26 c-11 -14 -27 -48 -37 -76 -33 -100 3 -196 91 -238 81 -39 168 -45 380 -27
-103 9 190 15 193 12 5 -5 -198 -140 -258 -170 -128 -65 -265 -83 -347 -46 -85
-39 -144 169 -145 316 0 87 21 162 65 231 32 52 89 165 85 169 -2 2 -17 -3 -35
--11z m158 -291 c35 -26 98 -69 139 -95 l75 -49 -45 7 c-176 24 -270 74 -270
-144 0 54 20 53 101 -7z"/>
-<path d="M1288 3653 c7 -3 16 -2 19 1 4 3 -2 6 -13 5 -11 0 -14 -3 -6 -6z"/>
-<path d="M2402 3586 c-33 -75 -74 -121 -138 -152 -49 -24 -63 -26 -124 -21
--73 6 -79 2 -60 -34 18 -32 72 -24 153 22 40 23 87 56 105 73 33 31 96 140 90
-156 -2 5 -13 -15 -26 -44z"/>
-<path d="M2871 3540 c-52 -171 -139 -314 -238 -395 -97 -79 -161 -105 -363
--145 -111 -22 -174 -52 -210 -97 -12 -15 -19 -35 -17 -45 3 -10 0 -18 -6 -18
--30 0 -136 -62 -174 -101 -60 -63 -83 -119 -83 -206 0 -42 4 -73 10 -73 6 0
-10 20 10 45 0 61 35 150 78 197 67 74 143 105 393 163 83 19 183 49 222 65 93
-39 193 115 262 198 56 68 264 372 293 427 15 30 15 30 -27 -7 -28 -26 -51 -38
--70 -38 -35 0 -43 11 -51 65 l-6 40 -23 -75z m-601 -619 c-15 -9 -170 -61
--180 -61 -24 2 152 70 180 69 13 0 13 -1 0 -8z"/>
-<path d="M3700 3570 c-10 -6 -2 -7 25 -3 49 7 58 13 19 13 -16 0 -36 -5 -44
--10z"/>
-<path d="M3780 3566 c0 -2 7 -7 16 -10 8 -3 12 -2 9 4 -6 10 -25 14 -25 6z"/>
-<path d="M3659 3543 c-13 -16 -12 -17 4 -4 16 13 21 21 13 21 -2 0 -10 -8 -17
--17z"/>
-<path d="M2397 3412 c-21 -23 -22 -56 -1 -76 21 -21 47 -20 67 2 23 26 21 58
--5 76 -29 21 -41 20 -61 -2z"/>
-<path d="M3907 3396 c-12 -31 -95 -59 -177 -60 -61 -1 -82 3 -114 22 l-39 23
-15 -23 c30 -45 66 -63 126 -62 91 2 213 66 200 105 -3 9 -7 7 -11 -5z"/>
-<path d="M3760 3380 c-21 -7 -21 -8 -5 -9 11 0 27 4 35 9 18 11 5 11 -30 0z"/>
-<path d="M616 3205 c-9 -26 -7 -32 5 -12 6 10 9 21 6 23 -2 3 -7 -2 -11 -11z"/>
-<path d="M2105 3144 c-32 -36 -110 -109 -174 -163 -121 -102 -191 -173 -191
--193 0 -6 -2 -9 -5 -6 -3 3 8 38 25 78 37 89 37 95 4 47 -65 -96 -96 -203 -95
--333 0 -195 68 -343 228 -494 120 -113 170 -134 57 -24 -107 105 -168 192
--203 288 -22 60 -26 88 -26 181 0 105 2 114 34 179 28 57 61 96 190 225 95 95
-169 178 190 214 19 32 32 60 29 63 -3 2 -31 -25 -63 -62z"/>
-<path d="M3648 3161 c-53 -27 -136 -76 -185 -109 -82 -57 -393 -329 -438 -383
--24 -29 -27 -32 165 137 246 216 310 263 484 355 118 63 99 62 -26 0z"/>
-<path d="M577 3083 c-58 -196 -82 -373 -73 -543 3 -69 10 -141 16 -160 7 -27
-9 -13 6 65 -8 213 19 477 65 643 29 105 17 100 -14 -5z"/>
-<path d="M2929 3118 c-7 -18 -55 -74 -106 -125 -51 -51 -93 -99 -93 -108 0
--56 151 70 199 167 31 61 39 98 22 98 -5 0 -14 -15 -22 -32z"/>
-<path d="M736 2923 c-32 -95 -53 -246 -40 -288 8 -27 9 -25 11 25 5 86 22 188
-44 263 28 95 17 95 -15 0z"/>
-<path d="M3878 2813 c6 -2 18 -2 25 0 6 3 1 5 -13 5 -14 0 -19 -2 -12 -5z"/>
-<path d="M3828 2803 c7 -3 16 -2 19 1 4 3 -2 6 -13 5 -11 0 -14 -3 -6 -6z"/>
-<path d="M4080 2796 c-82 -31 -148 -73 -321 -209 -208 -162 -470 -360 -574
--433 l-70 -49 104 130 c58 72 132 162 165 200 74 85 90 105 83 105 -12 0 -197
--215 -283 -330 -77 -102 -106 -132 -161 -167 -75 -49 -76 -55 -2 -18 170 87
-550 333 798 518 79 59 162 118 185 132 187 108 422 48 512 -131 14 -27 22 -38
-18 -24 -25 96 -118 205 -216 255 -60 30 -80 35 -137 34 -36 0 -82 -6 -101 -13z"/>
-<path d="M3720 2776 c-110 -39 -268 -129 -365 -209 -261 -216 -625 -565 -625
--600 0 -5 64 51 143 124 234 218 506 458 595 524 92 68 212 136 294 165 29 10
-46 19 38 19 -8 0 -44 -10 -80 -23z"/>
-<path d="M1507 2683 c-38 -60 -49 -108 -45 -187 3 -59 10 -86 41 -149 82 -166
-310 -419 439 -487 54 -29 90 -61 198 -179 96 -104 140 -160 161 -205 33 -71
-38 -56 10 30 -23 70 -50 133 -51 119 0 -13 -35 44 -77 128 -48 95 -81 129
--181 184 -147 81 -373 324 -458 493 -35 70 -45 194 -21 253 20 47 14 47 -16 0z"/>
-<path d="M4093 2685 c-80 -22 -123 -47 -261 -152 -227 -172 -275 -208 -427
--313 -172 -119 -224 -169 -280 -266 -22 -38 -59 -90 -82 -116 -40 -45 -73 -97
--73 -115 0 -4 15 15 34 43 55 82 214 204 330 253 152 66 292 38 399 -79 46
--51 117 -176 117 -208 0 -8 9 -16 19 -19 24 -6 31 -31 31 -108 0 -182 -116
--355 -358 -538 -151 -113 -291 -167 -432 -167 -132 0 -238 43 -341 137 -60 55
--61 56 -29 14 47 -58 137 -125 208 -152 78 -30 242 -38 333 -15 217 54 507
-281 607 475 55 104 72 169 72 267 0 137 -47 232 -198 399 -104 114 -126 157
--120 232 5 55 6 58 84 133 111 107 229 199 294 229 148 68 316 1 389 -155 11
--23 24 -62 27 -86 4 -24 11 -46 17 -49 16 -11 20 -91 8 -164 -5 -38 -9 -71 -6
--73 9 -9 26 80 31 163 5 86 -10 176 -41 249 -16 36 14 7 35 -34 30 -59 45
--172 32 -245 -5 -33 -8 -62 -7 -64 12 -12 30 100 30 184 0 89 -3 106 -27 156
--15 30 -45 73 -65 94 -83 83 -235 123 -350 90z m-494 -470 l0 -65 -53 0 c-29
-0 -69 -2 -87 -5 l-34 -6 25 18 c14 10 52 41 85 70 33 28 61 52 62 52 1 1 1
--28 2 -64z"/>
-<path d="M860 2648 c0 -15 53 -126 97 -202 26 -43 77 -111 114 -151 69 -74 95
--112 85 -122 -3 -4 -59 47 -124 113 -99 100 -125 132 -160 203 -23 46 -42 90
--42 97 0 8 -4 14 -8 14 -7 0 -26 -48 -48 -119 -3 -9 -30 11 -80 59 -41 40 -77
-70 -81 67 -22 -23 188 -238 539 -549 86 -76 159 -146 162 -154 3 -9 6 -26 6
--39 0 -45 40 -152 80 -213 56 -87 181 -214 349 -356 79 -66 176 -148 216 -182
-178 -150 369 -255 650 -357 269 -97 332 -111 500 -112 215 0 291 26 630 218
-322 182 441 274 563 436 119 157 225 411 263 631 17 97 20 137 14 260 -4 80
--11 168 -15 195 -7 40 -8 33 -4 -30 6 -94 -9 -258 -37 -403 -54 -279 -185
--547 -347 -709 -80 -80 -158 -135 -324 -229 -73 -42 -170 -98 -215 -126 -195
--117 -336 -162 -508 -161 -133 0 -225 23 -354 87 -205 104 -356 264 -507 540
--31 56 -77 120 -124 170 -41 45 -98 108 -125 141 -28 32 -83 95 -123 138 -52
-55 -72 84 -69 97 5 19 -6 26 -86 50 -71 22 -186 159 -248 295 -40 88 -63 212
--56 304 5 76 5 76 -11 41 -23 -51 -27 -184 -8 -261 9 -35 36 -104 60 -154 77
--154 183 -268 356 -381 135 -87 229 -215 326 -443 47 -110 109 -220 177 -311
-29 -39 33 -48 14 -31 -15 14 -27 21 -27 17 0 -11 -39 12 -145 88 -166 117
--308 264 -480 496 -84 113 -135 175 -135 164 0 -9 181 -261 252 -351 140 -176
-274 -295 511 -452 75 -50 137 -93 137 -96 0 -7 -145 60 -207 96 -140 81 -318
-230 -432 364 -179 210 -371 472 -371 506 0 7 140 -50 240 -97 93 -44 221 -133
-299 -208 74 -70 74 -70 40 -22 -70 100 -261 248 -444 342 -208 108 -290 170
--360 273 -80 118 -115 267 -81 350 31 78 12 125 -48 119 -23 -2 -33 -10 -40
--31 -9 -23 -6 -36 16 -75 24 -44 48 -138 48 -186 -1 -44 -180 170 -236 283
--18 36 -33 63 -34 59z m571 -799 c5 -8 22 -44 39 -81 29 -63 207 -306 308
--420 l47 -53 -50 41 c-141 117 -323 328 -361 419 -27 66 -12 149 17 94z"/>
-<path d="M4080 2509 c-155 -70 -226 -277 -138 -403 15 -20 16 -26 6 -18 -28
-22 -58 96 -68 164 l-9 63 3 -67 c8 -146 116 -246 253 -235 98 7 181 65 208
-144 12 33 14 36 22 18 4 -11 8 -85 8 -165 -1 -129 -4 -156 -29 -240 -93 -320
--270 -532 -662 -797 -143 -95 -231 -142 -329 -173 -89 -27 -241 -37 -327 -20
--235 46 -473 221 -608 449 -29 50 -55 91 -58 91 -9 0 82 -156 122 -208 53 -69
-155 -167 216 -209 249 -169 543 -193 805 -64 161 79 422 254 558 374 136 120
-278 349 326 527 79 294 33 561 -114 658 -133 88 -281 -20 -221 -161 20 -48 50
--70 96 -70 67 0 112 59 90 117 -12 33 -53 59 -80 51 -27 -9 -26 -25 3 -25 32
-0 47 -18 47 -55 0 -93 -127 -83 -146 11 -15 76 50 141 133 131 79 -9 128 -75
-121 -164 -8 -93 -72 -153 -165 -153 -62 0 -100 17 -137 60 -90 108 -39 292 99
-356 95 45 182 22 270 -69 51 -54 45 -38 -9 22 -70 76 -193 102 -286 60z"/>
-<path d="M1307 2474 c-9 -17 -34 -43 -56 -57 -39 -26 -50 -45 -34 -60 3 -4 13
--1 22 7 9 8 39 23 66 33 57 21 68 45 37 83 l-19 24 -16 -30z"/>
-<path d="M4541 2485 c1 -19 18 -51 18 -35 0 8 -4 22 -9 30 -5 8 -9 11 -9 5z"/>
-<path d="M681 2311 c-1 -59 6 -95 35 -180 70 -210 226 -479 378 -653 146 -168
-321 -308 383 -308 46 0 24 37 -74 126 -327 294 -614 710 -702 1020 l-20 69 0
--74z"/>
-<path d="M3881 2344 c0 -11 3 -14 6 -6 3 7 2 16 -1 19 -3 4 -6 -2 -5 -13z"/>
-<path d="M1280 2312 c0 -21 17 -44 71 -97 38 -39 102 -112 141 -163 87 -114
-107 -129 41 -31 -27 41 -75 117 -106 169 -38 64 -69 104 -96 123 -21 15 -42
-27 -45 27 -3 0 -6 -12 -6 -28z"/>
-<path d="M3671 2289 c-28 -80 -8 -120 128 -263 165 -172 216 -260 228 -395 l6
--66 15 35 c22 52 18 138 -8 189 -12 24 -61 84 -108 134 l-87 90 55 -35 c73
--45 100 -56 158 -64 68 -9 147 16 197 61 39 35 39 36 5 12 -69 -49 -103 -61
--170 -61 -81 0 -142 27 -256 111 -131 98 -175 168 -154 243 13 44 6 51 -9 9z
-m174 -278 c-3 -3 -18 8 -33 23 l-27 29 32 -23 c18 -13 30 -26 28 -29z"/>
-<path d="M822 2260 c0 -14 2 -19 5 -12 2 6 2 18 0 25 -3 6 -5 1 -5 -13z"/>
-<path d="M830 2219 c0 -33 53 -177 105 -286 30 -62 56 -113 59 -113 2 0 -18
-47 -45 105 -27 58 -65 151 -84 208 -19 56 -35 95 -35 86z"/>
-<path d="M550 2124 c0 -6 18 -67 40 -135 48 -146 128 -317 203 -432 60 -93
-183 -242 248 -302 24 -22 12 -6 -27 36 -39 42 -99 118 -133 170 -77 117 -218
-395 -282 554 -27 66 -48 115 -49 109z"/>
-<path d="M982 2068 c-29 -29 -1 -75 38 -63 17 5 20 13 18 38 -3 35 -33 48 -56
-25z"/>
-<path d="M4312 1987 c-45 -182 -140 -356 -275 -506 -67 -74 -152 -199 -142
--209 8 -8 101 67 166 135 98 103 178 231 218 351 21 61 65 296 59 313 -2 4
--13 -33 -26 -84z"/>
-<path d="M1152 1958 c-7 -7 -12 -17 -12 -23 0 -10 43 -54 113 -115 l27 -24
--20 59 c-20 58 -62 115 -85 115 -6 0 -16 -5 -23 -12z"/>
-<path d="M2975 1876 c-163 -52 -274 -185 -283 -338 -9 -143 67 -250 208 -292
-67 -20 110 -20 185 -1 126 33 215 128 215 229 0 56 -18 94 -60 130 -56 46
--153 29 -185 -34 -23 -45 -18 -51 14 -19 29 28 61 36 96 23 26 -10 48 -62 41
--99 -25 -129 -230 -170 -340 -67 -125 118 -64 310 139 439 68 43 54 56 -30 29z"/>
-<path d="M2299 1857 c-31 -21 -34 -27 -31 -66 2 -23 9 -59 16 -79 l13 -37 8
-65 c4 36 16 79 26 96 31 52 22 58 -32 21z"/>
-<path d="M3502 1783 c49 -53 83 -111 104 -178 7 -22 13 -33 13 -24 3 55 -73
-187 -131 229 -27 19 -25 15 14 -27z"/>
-<path d="M3120 1765 c-90 -29 -180 -140 -180 -222 0 -45 23 -97 51 -117 36
--25 95 -21 124 9 14 13 25 29 25 34 0 6 -11 -1 -25 -14 -28 -29 -42 -31 -72
--10 -35 24 -47 85 -27 134 41 104 162 138 248 70 18 -14 34 -19 54 -15 44 10
-112 -30 139 -83 70 -134 -16 -299 -202 -388 -85 -40 -204 -67 -258 -57 -56 9
--39 -12 25 -31 76 -22 211 -20 294 6 185 57 427 225 495 343 31 56 41 90 10
-41 -40 -67 -141 -127 -235 -141 -46 -6 -49 -5 -42 12 17 44 28 133 22 182 -12
-104 -77 191 -175 235 -59 27 -206 33 -271 12z"/>
-<path d="M2227 1696 c15 -30 29 -54 31 -52 5 5 -39 95 -49 102 -5 3 3 -19 18
--50z"/>
-<path d="M1720 1676 c0 -3 9 -10 20 -16 11 -6 20 -8 20 -6 0 3 -9 10 -20 16
--11 6 -20 8 -20 6z"/>
-<path d="M1775 1643 c6 -5 46 -36 90 -68 136 -102 214 -188 329 -362 59 -89
-113 -166 121 -173 30 -25 -218 337 -263 384 -51 53 -229 198 -265 217 -12 6
--17 7 -12 2z"/>
-<path d="M3806 1598 c-17 -29 -58 -82 -93 -117 -34 -36 -60 -67 -58 -69 7 -8
-77 42 122 87 43 43 67 95 61 131 -2 16 -10 8 -32 -32z"/>
-<path d="M886 1584 c-9 -8 -16 -21 -16 -27 0 -20 38 -75 63 -92 23 -14 57 -12
-57 5 0 13 -73 130 -81 130 -4 0 -15 -7 -23 -16z"/>
-<path d="M3623 1520 c0 -25 2 -35 4 -22 2 12 2 32 0 45 -2 12 -4 2 -4 -23z"/>
-<path d="M3110 1526 c0 -2 7 -7 16 -10 8 -3 12 -2 9 4 -6 10 -25 14 -25 6z"/>
-<path d="M1145 1165 c-36 -35 -34 -88 4 -126 36 -36 70 -37 110 -3 35 29 27
-32 170 -61 91 -60 299 -175 316 -175 24 0 -34 38 -159 106 -211 114 -286 163
--286 186 0 28 -27 76 -49 88 -34 18 -80 12 -106 -15z"/>
-<path d="M1650 1116 c0 -2 31 -23 69 -46 47 -28 71 -49 73 -63 2 -14 10 -22
-23 -22 26 0 27 38 1 43 -10 2 -42 19 -70 36 -61 39 -96 58 -96 52z"/>
-<path d="M1525 1051 c-9 -16 3 -31 26 -31 14 0 19 6 17 17 -4 20 -33 29 -43
-14z"/>
-<path d="M2030 935 c0 -4 14 -34 32 -67 51 -97 135 -150 350 -224 143 -49 247
--68 375 -69 92 0 115 3 129 17 37 36 -2 52 -179 73 -166 19 -280 49 -433 115
--135 58 -190 88 -239 132 -19 16 -35 27 -35 23z"/>
-<path d="M1848 755 c-10 -22 -9 -29 10 -47 18 -19 25 -20 47 -10 44 20 28 82
--22 82 -15 0 -27 -9 -35 -25z"/>
-<path d="M2057 713 c-4 -3 -7 -19 -7 -34 0 -31 28 -53 54 -43 22 8 31 51 16
-69 -13 15 -51 20 -63 8z"/>
-<path d="M2688 703 c7 -3 16 -2 19 1 4 3 -2 6 -13 5 -11 0 -14 -3 -6 -6z"/>
-</g>
-</svg>`
+// 实际的AI图片生成函数
+const handleRealGenerate = async () => {
+  if (!prompt.value.trim()) return
+  
+  isGenerating.value = true
+  previewUrl.value = ''
+  svgRawContent.value = ''
+  
+  try {
+    if (selectedModel.value === 'svg') {
+      const svgResult = await generateSvgDirect(prompt.value, {
+        style: 'FLAT_VECTOR' // developing
+      })
+      
+      // 直接获得SVG内容
+      svgRawContent.value = svgResult.svgContent
+      
+      // 创建blob URL用于预览 - 参照mock方式处理
+      const blob = new Blob([svgResult.svgContent], { type: 'image/svg+xml' })
+      previewUrl.value = URL.createObjectURL(blob)
+      
+      imageSize.value = `${svgResult.width}x${svgResult.height} (矢量图)`
+    } else {
+      // PNG mod
+      const result = await generateImage(prompt.value, {
+        style: 'FLAT_VECTOR' // developing
+      })
+      
+      previewUrl.value = result.png_url
+      imageSize.value = `${result.width}x${result.height}`
+    }
     
-    // 保存原始SVG代码
-    svgRawContent.value = svgContent.trim()
+  } catch (error) {
+    console.error('生成图片失败:', error)
     
-    const blob = new Blob([svgContent], { type: 'image/svg+xml' })
-    return URL.createObjectURL(blob)
-  } else {
-    // PNG模拟数据 - 使用 picsum 作为示例图片
-    const width = 400
-    const height = 400
-    const seed = Math.floor(Math.random() * 1000)
-    return `https://picsum.photos/seed/${seed}/${width}/${height}`
+    let errorMessage = '图片生成失败，请稍后重试'
+    if (error instanceof Error) {
+      if (error.message.includes('timeout')) {
+        errorMessage = '生成超时，请尝试简化描述或稍后重试'
+      } else if (error.message.includes('network')) {
+        errorMessage = '网络连接异常，请检查网络连接'
+      } else if (error.message.includes('400')) {
+        errorMessage = '请求参数错误，请检查提示词长度（至少3个字符）'
+      } else if (error.message.includes('500')) {
+        errorMessage = '服务器内部错误，请稍后重试'
+      }
+    }
+    
+    alert(errorMessage)
+    
+  } finally {
+    isGenerating.value = false
   }
 }
 

From 7bab162082c1d901be760e0562fbc25be9181f7c Mon Sep 17 00:00:00 2001
From: petezhuang <petezhuang13@163.com>
Date: Thu, 14 Aug 2025 11:41:45 +0800
Subject: [PATCH 15/49] feat(spx-gui):english support for picgc and add error
 modal

---
 .../common/painter/components/ai_generate.vue | 322 +++++++++++++++---
 .../editor/common/painter/painter.vue         |  80 ++---
 2 files changed, 309 insertions(+), 93 deletions(-)

diff --git a/spx-gui/src/components/editor/common/painter/components/ai_generate.vue b/spx-gui/src/components/editor/common/painter/components/ai_generate.vue
index cec3340dd..8a5ea65ec 100644
--- a/spx-gui/src/components/editor/common/painter/components/ai_generate.vue
+++ b/spx-gui/src/components/editor/common/painter/components/ai_generate.vue
@@ -13,7 +13,7 @@
       >
         <!-- 标题栏 -->
         <div class="dialog-header">
-          <h3 class="dialog-title">AI生成图片</h3>
+          <h3 class="dialog-title">{{ $t({ en: 'AI Generate Image', zh: 'AI生成图片' }) }}</h3>
           <button 
             class="close-btn"
             @click="handleCancel"
@@ -29,7 +29,7 @@
             <div class="form-section">
               <!-- 模型选择 -->
               <div class="form-group">
-                <label class="form-label">选择生成模型</label>
+                <label class="form-label">{{ $t({ en: 'Select Generation Model', zh: '选择生成模型' }) }}</label>
                 <div class="model-selector">
                   <div 
                     class="model-option"
@@ -38,8 +38,8 @@
                   >
                     <div class="model-icon">🖼️</div>
                     <div class="model-info">
-                      <div class="model-name">PNG图片</div>
-                      <div class="model-desc">生成高质量位图图片</div>
+                      <div class="model-name">{{ $t({ en: 'PNG Image', zh: 'PNG图片' }) }}</div>
+                      <div class="model-desc">{{ $t({ en: 'Generate high-quality bitmap images', zh: '生成高质量位图图片' }) }}</div>
                     </div>
                   </div>
                   <div 
@@ -49,8 +49,8 @@
                   >
                     <div class="model-icon">📐</div>
                     <div class="model-info">
-                      <div class="model-name">SVG矢量</div>
-                      <div class="model-desc">生成可缩放矢量图形</div>
+                      <div class="model-name">{{ $t({ en: 'SVG Vector', zh: 'SVG矢量' }) }}</div>
+                      <div class="model-desc">{{ $t({ en: 'Generate scalable vector graphics', zh: '生成可缩放矢量图形' }) }}</div>
                     </div>
                   </div>
                 </div>
@@ -58,15 +58,15 @@
 
               <!-- 提示词输入 -->
               <div class="form-group">
-                <label class="form-label">描述您想要的图片</label>
+                <label class="form-label">{{ $t({ en: 'Describe the image you want', zh: '描述您想要的图片' }) }}</label>
                 <textarea
                   v-model="prompt"
                   class="prompt-input"
-                  placeholder="请详细描述您想要生成的图片内容，例如：一只可爱的卡通猫咪，坐在彩虹上，背景是蓝天白云..."
+                  :placeholder="$t({ en: 'Please describe in detail the image content you want to generate, for example: a cute cartoon cat sitting on a rainbow with blue sky and white clouds in the background...', zh: '请详细描述您想要生成的图片内容，例如：一只可爱的卡通猫咪，坐在彩虹上，背景是蓝天白云...' })"
                   rows="4"
                 ></textarea>
                 <div class="input-hint">
-                  提示：描述越详细，生成的图片效果越好
+                  {{ $t({ en: 'Tip: The more detailed the description, the better the generated image effect', zh: '提示：描述越详细，生成的图片效果越好' }) }}
                 </div>
               </div>
 
@@ -78,23 +78,23 @@
                   @click="handleGenerate"
                 >
                   <span v-if="isGenerating" class="loading-spinner"></span>
-                  {{ isGenerating ? '生成中...' : '生成图片' }}
+                  {{ isGenerating ? $t({ en: 'Generating...', zh: '生成中...' }) : $t({ en: 'Generate Image', zh: '生成图片' }) }}
                 </button>
               </div>
             </div>
 
             <!-- 右侧预览区域 -->
             <div class="preview-section" :class="{ visible: previewUrl || isGenerating }">
-              <label class="form-label">预览效果</label>
+              <label class="form-label">{{ $t({ en: 'Preview', zh: '预览效果' }) }}</label>
               <div class="preview-container">
                 <div v-if="isGenerating" class="preview-loading">
                   <div class="loading-spinner large"></div>
-                  <div class="loading-text">AI正在为您生成图片...</div>
+                  <div class="loading-text">{{ $t({ en: 'AI is generating images for you...', zh: 'AI正在为您生成图片...' }) }}</div>
                 </div>
                 <div v-else-if="previewUrl" class="preview-image-wrapper">
                   <img 
                     :src="previewUrl" 
-                    alt="AI生成的图片预览"
+                    :alt="$t({ en: 'AI generated image preview', zh: 'AI生成的图片预览' })"
                     class="preview-image"
                     @load="handleImageLoad"
                     @error="handleImageError"
@@ -106,7 +106,7 @@
                 </div>
                 <div v-else class="preview-placeholder">
                   <div class="placeholder-icon">🖼️</div>
-                  <div class="placeholder-text">生成的图片将在这里预览</div>
+                  <div class="placeholder-text">{{ $t({ en: 'Generated images will be previewed here', zh: '生成的图片将在这里预览' }) }}</div>
                 </div>
               </div>
             </div>
@@ -119,14 +119,72 @@
             class="btn btn-secondary"
             @click="handleCancel"
           >
-            取消
+            {{ $t({ en: 'Cancel', zh: '取消' }) }}
           </button>
           <button 
             class="btn btn-primary"
             :disabled="!previewUrl || isGenerating"
             @click="handleConfirm"
           >
-            确认使用
+            {{ $t({ en: 'Confirm Use', zh: '确认使用' }) }}
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 错误提示弹窗 -->
+    <div 
+      v-if="showErrorModal" 
+      class="error-modal-overlay"
+      @click="closeErrorModal"
+    >
+      <div 
+        class="error-modal-content"
+        @click.stop
+      >
+        <div class="error-modal-header">
+          <div class="error-icon">⚠️</div>
+          <h3 class="error-title">{{ $t({ en: 'Generation Failed', zh: '生成失败' }) }}</h3>
+          <button 
+            class="error-close-btn"
+            @click="closeErrorModal"
+          >
+            ×
+          </button>
+        </div>
+        
+        <div class="error-modal-body">
+          <p class="error-message">
+            {{ errorType === 'timeout' ? $t({ en: 'Generation timeout, please try simplifying the description or try again later', zh: '生成超时，请尝试简化描述或稍后重试' }) : 
+               errorType === 'network' ? $t({ en: 'Network connection error, please check your network connection', zh: '网络连接异常，请检查网络连接' }) :
+               errorType === 'params' ? $t({ en: 'Request parameter error, please check the prompt length (at least 3 characters)', zh: '请求参数错误，请检查提示词长度（至少3个字符）' }) :
+               errorType === 'server' ? $t({ en: 'Server internal error, please try again later', zh: '服务器内部错误，请稍后重试' }) :
+               $t({ en: 'Image generation failed, please try again later', zh: '图片生成失败，请稍后重试' }) }}
+          </p>
+          <div class="error-suggestions">
+            <h4 class="suggestions-title">{{ $t({ en: 'Suggestions:', zh: '建议：' }) }}</h4>
+            <ul class="suggestions-list">
+              <li v-if="errorType === 'timeout'">{{ $t({ en: 'Try simplifying your description', zh: '尝试简化您的描述' }) }}</li>
+              <li v-if="errorType === 'network'">{{ $t({ en: 'Check your network connection', zh: '检查网络连接状态' }) }}</li>
+              <li v-if="errorType === 'params'">{{ $t({ en: 'Ensure prompt is at least 3 characters', zh: '确保提示词至少3个字符' }) }}</li>
+              <li v-if="errorType === 'default' || errorType === 'server'">{{ $t({ en: 'Try again in a few moments', zh: '稍后再试' }) }}</li>
+              <li>{{ $t({ en: 'Contact support if the problem persists', zh: '如问题持续存在，请联系技术支持' }) }}</li>
+            </ul>
+          </div>
+        </div>
+        
+        <div class="error-modal-footer">
+          <button 
+            class="btn btn-secondary"
+            @click="closeErrorModal"
+          >
+            {{ $t({ en: 'Close', zh: '关闭' }) }}
+          </button>
+          <button 
+            class="btn btn-primary"
+            @click="retryGeneration"
+          >
+            {{ $t({ en: 'Retry', zh: '重试' }) }}
           </button>
         </div>
       </div>
@@ -169,6 +227,11 @@ const imageSize = ref('')
 // 存储SVG原始代码
 const svgRawContent = ref('')
 
+// 错误处理相关状态
+const showErrorModal = ref(false)
+const errorMessage = ref('')
+const errorType = ref('')
+
 // 方法
 const handleGenerate = async () => {
   if (!prompt.value.trim()) return
@@ -177,21 +240,13 @@ const handleGenerate = async () => {
   previewUrl.value = ''
   
   try {
-    // TODO: 这里需要调用实际的AI生成API
-    // 目前使用模拟数据
-    // await simulateGeneration()
-
-    // // 模拟生成结果
-    // previewUrl.value = generateMockImageUrl()
-    // imageSize.value = selectedModel.value === 'png' ? '512x512' : '矢量图'
 
     await handleRealGenerate()
     // previewUrl 在 handleRealGenerate 中已经设置
     // imageSize 在 handleRealGenerate 中已经设置
     
   } catch (error) {
-    console.error('生成图片失败:', error)
-    // TODO: 显示错误提示
+    console.error('failed to generate image1:', error)
   } finally {
     isGenerating.value = false
   }
@@ -239,17 +294,29 @@ const handleImageLoad = () => {
 }
 
 const handleImageError = () => {
-  console.error('图片加载失败')
+  console.error('failed to load image')
   previewUrl.value = ''
 }
 
-// 模拟生成过程
-const simulateGeneration = () => {
-  return new Promise(resolve => {
-    setTimeout(resolve, 2000) // 模拟2秒生成时间
-  })
+// 错误处理方法
+const showError = (message: string, type: string = 'default') => {
+  errorMessage.value = message
+  errorType.value = type
+  showErrorModal.value = true
 }
 
+const closeErrorModal = () => {
+  showErrorModal.value = false
+  errorMessage.value = ''
+  errorType.value = ''
+}
+
+const retryGeneration = () => {
+  closeErrorModal()
+  handleGenerate()
+}
+
+
 // 实际的AI图片生成函数
 const handleRealGenerate = async () => {
   if (!prompt.value.trim()) return
@@ -283,22 +350,34 @@ const handleRealGenerate = async () => {
     }
     
   } catch (error) {
-    console.error('生成图片失败:', error)
+    console.error('failed to generate image:', error)
+    
+    let errorType = 'default'
+    let errorKey = 'default'
     
-    let errorMessage = '图片生成失败，请稍后重试'
     if (error instanceof Error) {
       if (error.message.includes('timeout')) {
-        errorMessage = '生成超时，请尝试简化描述或稍后重试'
+        errorType = 'timeout'
+        errorKey = 'timeout'
       } else if (error.message.includes('network')) {
-        errorMessage = '网络连接异常，请检查网络连接'
+        errorType = 'network' 
+        errorKey = 'network'
       } else if (error.message.includes('400')) {
-        errorMessage = '请求参数错误，请检查提示词长度（至少3个字符）'
+        errorType = 'params'
+        errorKey = 'params'
       } else if (error.message.includes('500')) {
-        errorMessage = '服务器内部错误，请稍后重试'
+        errorType = 'server'
+        errorKey = 'server'
       }
     }
+    if (String(error).includes('fetch') || String(error).includes('net')) {
+      errorType = 'network'
+      errorKey = 'network'
+    }
     
-    alert(errorMessage)
+    // Use a simple fallback message for script context, real i18n will be handled in template
+    const fallbackMessage = '图片生成失败，请稍后重试'
+    showError(fallbackMessage, errorType)
     
   } finally {
     isGenerating.value = false
@@ -673,6 +752,160 @@ watch(() => props.visible, (newVal) => {
   cursor: not-allowed;
 }
 
+/* 错误弹窗样式 */
+.error-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1100;
+  animation: fadeIn 0.2s ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.error-modal-content {
+  background: white;
+  border-radius: 12px;
+  width: 90%;
+  max-width: 480px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  animation: errorModalSlideIn 0.3s ease-out;
+  overflow: hidden;
+}
+
+@keyframes errorModalSlideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-30px) scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.error-modal-header {
+  display: flex;
+  align-items: center;
+  padding: 20px 24px 16px;
+  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
+  border-bottom: 1px solid #fecaca;
+}
+
+.error-icon {
+  font-size: 24px;
+  margin-right: 12px;
+  filter: drop-shadow(0 2px 4px rgba(239, 68, 68, 0.2));
+}
+
+.error-title {
+  flex: 1;
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: #dc2626;
+}
+
+.error-close-btn {
+  background: none;
+  border: none;
+  font-size: 24px;
+  color: #dc2626;
+  cursor: pointer;
+  padding: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  transition: all 0.2s;
+  opacity: 0.7;
+}
+
+.error-close-btn:hover {
+  background: rgba(220, 38, 38, 0.1);
+  opacity: 1;
+}
+
+.error-modal-body {
+  padding: 20px 24px;
+}
+
+.error-message {
+  margin: 0 0 20px 0;
+  font-size: 16px;
+  color: #374151;
+  line-height: 1.5;
+  font-weight: 500;
+}
+
+.error-suggestions {
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.suggestions-title {
+  margin: 0 0 12px 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: #475569;
+}
+
+.suggestions-list {
+  margin: 0;
+  padding-left: 16px;
+  list-style: none;
+}
+
+.suggestions-list li {
+  position: relative;
+  margin-bottom: 8px;
+  font-size: 14px;
+  color: #64748b;
+  line-height: 1.4;
+}
+
+.suggestions-list li:before {
+  content: '•';
+  color: #3b82f6;
+  font-weight: bold;
+  position: absolute;
+  left: -12px;
+}
+
+.suggestions-list li:last-child {
+  margin-bottom: 0;
+}
+
+.error-modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  padding: 16px 24px 20px;
+  background: #f9fafb;
+  border-top: 1px solid #e5e7eb;
+}
+
+.error-modal-footer .btn {
+  min-width: 80px;
+}
+
 /* 响应式设计 */
 @media (max-width: 768px) {
   .dialog-content {
@@ -693,5 +926,18 @@ watch(() => props.visible, (newVal) => {
   .preview-container {
     min-height: 200px;
   }
+
+  .error-modal-content {
+    max-width: 95%;
+    margin: 20px;
+  }
+  
+  .error-modal-footer {
+    flex-direction: column-reverse;
+  }
+  
+  .error-modal-footer .btn {
+    width: 100%;
+  }
 }
 </style>
diff --git a/spx-gui/src/components/editor/common/painter/painter.vue b/spx-gui/src/components/editor/common/painter/painter.vue
index eb621b132..5ef4223dc 100644
--- a/spx-gui/src/components/editor/common/painter/painter.vue
+++ b/spx-gui/src/components/editor/common/painter/painter.vue
@@ -3,46 +3,46 @@
     <!-- 左侧工具栏 -->
     <div class="toolbar">
       <div class="tool-section">
-        <h3 class="tool-title">绘图工具</h3>
+        <h3 class="tool-title">{{ $t({ en: 'Drawing Tools', zh: '绘图工具' }) }}</h3>
         <button 
           :class="['tool-btn', { active: currentTool === 'line' }]"
           @click="selectTool('line')"
-          title="直线工具"
+          :title="$t({ en: 'Line Tool', zh: '直线工具' })"
         >
           <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <line x1="7" y1="17" x2="17" y2="7"></line>
           </svg>
-          <span>直线</span>
+          <span>{{ $t({ en: 'Line', zh: '直线' }) }}</span>
         </button>
         
         <button 
           :class="['tool-btn', { active: currentTool === 'brush' }]"
           @click="selectTool('brush')"
-          title="笔刷工具"
+          :title="$t({ en: 'Brush Tool', zh: '笔刷工具' })"
         >
           <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <path d="m9.06 11.9 8.07-8.06a2.85 2.85 0 1 1 4.03 4.03l-8.06 8.08"></path>
             <path d="m7.07 14.94c-1.66 0-3 1.35-3 3.02 0 1.33-2.5 1.52-2 2.02 1.08-2 2.51-2 2.68-2.02 0.44 0 3.34-1.66 3.34-3.02z"></path>
           </svg>
-          <span>笔刷</span>
+          <span>{{ $t({ en: 'Brush', zh: '笔刷' }) }}</span>
         </button>
         
         <button 
           :class="['tool-btn', { active: currentTool === 'reshape' }]"
           @click="selectTool('reshape')"
-          title="变形工具"
+          :title="$t({ en: 'Reshape Tool', zh: '变形工具' })"
         >
           <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <path d="m3 3 7.07 16.97 2.51-7.39 7.39-2.51L3 3z"></path>
             <path d="m13 13 6 6"></path>
           </svg>
-          <span>变形</span>
+          <span>{{ $t({ en: 'Reshape', zh: '变形' }) }}</span>
         </button>
       </div>
       
       <div class="tool-section">
-        <h3 class="tool-title">AI工具</h3>
-        <button class="tool-btn ai-btn" @click="showAiDialog" title="AI生成图片">
+        <h3 class="tool-title">{{ $t({ en: 'AI Tools', zh: 'AI工具' }) }}</h3>
+        <button class="tool-btn ai-btn" @click="showAiDialog" :title="$t({ en: 'AI Generate Image', zh: 'AI生成图片' })">
           <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <path d="M9 12l2 2 4-4"></path>
             <path d="M21 12c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1z"></path>
@@ -54,18 +54,18 @@
             <path d="M18.364 5.636c.39-.39.39-1.024 0-1.414s-1.024-.39-1.414 0-.39 1.024 0 1.414 1.024.39 1.414 0z"></path>
             <path d="M4.222 19.778c.39-.39.39-1.024 0-1.414s-1.024-.39-1.414 0-.39 1.024 0 1.414 1.024.39 1.414 0z"></path>
           </svg>
-          <span>AI生成</span>
+          <span>{{ $t({ en: 'AI Generate', zh: 'AI生成' }) }}</span>
         </button>
       </div>
       
       <div class="tool-section">
-        <h3 class="tool-title">操作</h3>
-        <button class="tool-btn action-btn" @click="clearCanvas" title="清空画布">
+        <h3 class="tool-title">{{ $t({ en: 'Actions', zh: '操作' }) }}</h3>
+        <button class="tool-btn action-btn" @click="clearCanvas" :title="$t({ en: 'Clear Canvas', zh: '清空画布' })">
           <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <polyline points="3,6 5,6 21,6"></polyline>
             <path d="m19,6v14a2,2 0 0,1 -2,2H7a2,2 0 0,1 -2,-2V6m3,0V4a2,2 0 0,1 2,-2h4a2,2 0 0,1 2,2v2"></path>
           </svg>
-          <span>清空</span>
+          <span>{{ $t({ en: 'Clear', zh: '清空' }) }}</span>
         </button>
       </div>
     </div>
@@ -196,20 +196,14 @@ const loadImageToCanvas = (imageSrc: string): void => {
   const raster = new paper.Raster(imageSrc)
   
   raster.onLoad = () => {
-    // 图片加载完成后的处理
-    // 设置图片位置到画布中心
     raster.position = paper.view.center
     
-    // 保持原始尺寸，不进行自动缩放
-    // 如果需要缩放，用户可以手动调整
+
     
     // 将图片放到最底层，作为背景
     raster.sendToBack()
     
-    // 保存引用
     backgroundImage.value = raster
-    
-    // 更新视图
     paper.view.update()
   }
 
@@ -292,12 +286,12 @@ const initPaper = (): void => {
 const selectTool = (tool: ToolType): void => {
   currentTool.value = tool
   
-  // 重置直线绘制状态
+
   if (drawLineRef.value) {
     drawLineRef.value.resetDrawing()
   }
   
-  // 重置笔刷绘制状态
+
   if (drawBrushRef.value) {
     drawBrushRef.value.resetDrawing()
   }
@@ -769,12 +763,9 @@ const handleAiCancel = (): void => {
 const importImageToCanvas = (imageUrl: string): void => {
   if (!paper.project) return
   
-  // 创建新的光栅图像
   const raster = new paper.Raster(imageUrl)
   
   raster.onLoad = () => {
-    // 图片加载完成后的处理
-    // 设置图片位置到画布中心
     raster.position = paper.view.center
     
     // 保持原始尺寸，不进行自动缩放
@@ -788,8 +779,7 @@ const importImageToCanvas = (imageUrl: string): void => {
     //     paper.view.update()
     //   }
     // }
-    
-    // 更新视图
+
     paper.view.update()
     // console.log('PNG图片已导入到画布')
 
@@ -797,7 +787,7 @@ const importImageToCanvas = (imageUrl: string): void => {
   }
   
   raster.onError = () => {
-    console.error('图片加载失败')
+    console.error('failed to load image')
   }
 }
 
@@ -813,7 +803,7 @@ const importSvgToCanvas = (svgContent: string): void => {
     
     // 检查是否解析成功
     if (svgElement.nodeName !== 'svg') {
-      console.error('无效的SVG内容')
+      console.error('invalid svg content')
       return
     }
     
@@ -821,11 +811,8 @@ const importSvgToCanvas = (svgContent: string): void => {
     const importedItem = paper.project.importSVG(svgElement as unknown as SVGElement)
     
     if (importedItem) {
-      // 设置位置到画布中心
       importedItem.position = paper.view.center
       
-      // 保持原始尺寸，不进行自动缩放
-      // 如果需要缩放，用户可以手动调整
       
       // 收集所有可编辑的路径
       const collectPaths = (item: paper.Item): void => {
@@ -859,27 +846,10 @@ const importSvgToCanvas = (svgContent: string): void => {
       else isImportingFromProps.value = false
     }
   } catch (error) {
-    console.error('SVG导入失败:', error)
+    console.error('failed to import svg:', error)
   }
 }
 
-// 辅助函数：计算新导入的路径数量
-// const countNewPaths = (item: paper.Item): number => {
-//   let count = 0
-  
-//   const countPathsRecursive = (item: paper.Item): void => {
-//     if (item instanceof paper.Path && item.segments && item.segments.length > 0) {
-//       count++
-//     } else if (item instanceof paper.Group || item instanceof paper.CompoundPath) {
-//       if (item.children) {
-//         item.children.forEach(child => countPathsRecursive(child))
-//       }
-//     }
-//   }
-  
-//   countPathsRecursive(item)
-//   return count
-// }
 
 
 
@@ -996,9 +966,9 @@ onMounted(() => {
 
 // 导出当前画布为 SVG 并上报父组件
 const exportSvgAndEmit = (): void => {
-  console.log('exportSvgAndEmit 被调用')
+  // console.log('exportSvgAndEmit 被调用')
   if (!paper.project) {
-    console.log('paper.project 不存在')
+    console.log('paper.project does not exist')
     return
   }
   
@@ -1021,13 +991,13 @@ const exportSvgAndEmit = (): void => {
       embedImages: true,
       bounds: paper.view.bounds // 使用视图边界确保尺寸正确
     }) as string
-    console.log('导出的 SVG 长度:', svgStr?.length)
+    // console.log('exported svg length:', svgStr?.length)
     if (typeof svgStr === 'string') {
-      console.log('发送 svg-change 事件')
+      // console.log('send svg-change event')
       emit('svg-change', svgStr)
     }
   } catch (e) {
-    console.error('导出 SVG 失败:', e)
+    console.error('failed to export svg:', e)
   } finally {
     if (backgroundRect.value) backgroundRect.value.visible = prevVisible
   }

From 61e68202f96ed3cbd4a431d5359965e952da06dc Mon Sep 17 00:00:00 2001
From: petezhuang <petezhuang13@163.com>
Date: Thu, 14 Aug 2025 14:45:24 +0800
Subject: [PATCH 16/49] fix(spx-gui):wrong aigc model closing logic

---
 .../components/editor/common/painter/components/ai_generate.vue  | 1 -
 1 file changed, 1 deletion(-)

diff --git a/spx-gui/src/components/editor/common/painter/components/ai_generate.vue b/spx-gui/src/components/editor/common/painter/components/ai_generate.vue
index 8a5ea65ec..1b0af2458 100644
--- a/spx-gui/src/components/editor/common/painter/components/ai_generate.vue
+++ b/spx-gui/src/components/editor/common/painter/components/ai_generate.vue
@@ -4,7 +4,6 @@
     <div 
       v-if="visible" 
       class="dialog-overlay"
-      @click="handleCancel"
     >
       <!-- 弹窗主体 -->
       <div 

From 2abc810cf2b4701dd7dc2b96039a07f7f9b828ce Mon Sep 17 00:00:00 2001
From: AvenJi0320 <pychi0320@gmail.com>
Date: Thu, 14 Aug 2025 16:53:52 +0800
Subject: [PATCH 17/49] fix(painter):fix painter editor flash & privew item
 flash

---
 .../editor/common/painter/painter.vue         |  9 ++++
 .../editor/sprite/CostumeDetail.vue           | 10 ++--
 .../components/editor/sprite/CostumeItem.vue  |  4 +-
 spx-gui/src/utils/file.ts                     | 48 +++++++++++++++++++
 4 files changed, 64 insertions(+), 7 deletions(-)

diff --git a/spx-gui/src/components/editor/common/painter/painter.vue b/spx-gui/src/components/editor/common/painter/painter.vue
index 5ef4223dc..5727150ef 100644
--- a/spx-gui/src/components/editor/common/painter/painter.vue
+++ b/spx-gui/src/components/editor/common/painter/painter.vue
@@ -158,6 +158,8 @@ const backgroundImage = ref<paper.Raster | null>(null)
 const backgroundRect = ref<paper.Path | null>(null)
 // 标记：当前是否由 props.imgSrc 触发的导入过程（用于避免导入→导出→再次导入循环）
 const isImportingFromProps = ref<boolean>(false)
+// 标记：是否是第一次挂载（用于控制只在第一次挂载时导入图片）
+const isFirstMount = ref<boolean>(true)
 // 保存当前选中的路径，用于导入后恢复控制点显示
 const selectedPathForRestore = ref<paper.Path | null>(null)
 
@@ -897,6 +899,12 @@ watch(
   () => props.imgSrc,
   async (newImgSrc) => {
     if (!newImgSrc) return
+    
+    // 只在第一次挂载时导入图片
+    if (!isFirstMount.value) {
+      return
+    }
+    
     isImportingFromProps.value = true
     
     // 每次外部传入图片时，清空当前项目并重新导入，避免叠加
@@ -921,6 +929,7 @@ watch(
     setTimeout(() => {
       selectedPathForRestore.value = null
       isImportingFromProps.value = false
+      isFirstMount.value = false // 标记第一次挂载已完成
     }, 200)
   },
   { immediate: true }
diff --git a/spx-gui/src/components/editor/sprite/CostumeDetail.vue b/spx-gui/src/components/editor/sprite/CostumeDetail.vue
index df8f21477..253310a69 100644
--- a/spx-gui/src/components/editor/sprite/CostumeDetail.vue
+++ b/spx-gui/src/components/editor/sprite/CostumeDetail.vue
@@ -36,12 +36,12 @@ const [imgSrc, imgLoading] = useFileUrl(() => props.costume.img)
 const editorCtx = useEditorCtx()
 
 async function handleSvgChange(svg: string) {
-  console.log('handleSvgChange 被调用，SVG 长度:', svg?.length)
+  // console.log('handleSvgChange 被调用，SVG 长度:', svg?.length)
   // 用导出的 SVG 替换 costume.img
   // 继承原文件名的基础名，改后缀为 .svg
   const name = props.costume.name.replace(/[\\/\\:*?\"<>|]/g, '-') + '.svg'
   const file = fromText(name, svg, { type: 'image/svg+xml' })
-  console.log('创建新文件:', name, '类型:', file.type)
+  // console.log('创建新文件:', name, '类型:', file.type)
   
   // 保存原始的分辨率设置
   const originalBitmapResolution = props.costume.bitmapResolution
@@ -50,14 +50,14 @@ async function handleSvgChange(svg: string) {
   await editorCtx.project.history.doAction(
     { name: { en: 'Update costume image', zh: '更新造型图片' } },
     () => {
-      console.log('执行 setImg')
+      // console.log('执行 setImg')
       props.costume.setImg(file)
       // 保持原始分辨率，不要强制改为1
       props.costume.setBitmapResolution(originalBitmapResolution)
-      console.log('setImg 完成')
+      // console.log('setImg 完成')
     }
   )
-  console.log('handleSvgChange 完成')
+  // console.log('handleSvgChange 完成')
 }
 </script>
 
diff --git a/spx-gui/src/components/editor/sprite/CostumeItem.vue b/spx-gui/src/components/editor/sprite/CostumeItem.vue
index 6e1711014..4bab8af20 100644
--- a/spx-gui/src/components/editor/sprite/CostumeItem.vue
+++ b/spx-gui/src/components/editor/sprite/CostumeItem.vue
@@ -16,7 +16,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { UIImg, UICornerIcon, UIEditorSpriteItem } from '@/components/ui'
-import { useFileUrl } from '@/utils/file'
+import { useFileUrlSmooth } from '@/utils/file'
 import type { Costume } from '@/models/costume'
 import { useEditorCtx } from '../EditorContextProvider.vue'
 import { useMessageHandle } from '@/utils/exception'
@@ -38,7 +38,7 @@ const props = withDefaults(
 )
 
 const editorCtx = useEditorCtx()
-const [imgSrc, imgLoading] = useFileUrl(() => props.costume.img)
+const [imgSrc, imgLoading] = useFileUrlSmooth(() => props.costume.img)
 
 const radarNodeMeta = computed(() => {
   const name = `Costume item "${props.costume.name}"`
diff --git a/spx-gui/src/utils/file.ts b/spx-gui/src/utils/file.ts
index 69d0ccb05..7f27dcb32 100644
--- a/spx-gui/src/utils/file.ts
+++ b/spx-gui/src/utils/file.ts
@@ -153,6 +153,54 @@ export function useFileUrl(fileSource: WatchSource<File | undefined | null>) {
   return [urlRef, loadingRef] as const
 }
 
+/** 
+ * Get url for File with smooth transition (no flickering)
+ * This version keeps the old URL until the new one is ready
+ */
+export function useFileUrlSmooth(fileSource: WatchSource<File | undefined | null>) {
+  const urlRef = ref<string | null>(null)
+  const loadingRef = ref(false)
+  watch(
+    fileSource,
+    (file, _, onCleanup) => {
+      if (file == null) {
+        urlRef.value = null
+        return
+      }
+      loadingRef.value = true
+      let cancelled = false
+      let fileUrlCleanup: (() => void) | null = null
+      onCleanup(() => {
+        cancelled = true
+        // Don't clear urlRef.value here - keep old URL until component unmounts
+        fileUrlCleanup?.()
+      })
+      file
+        .url((cleanup) => {
+          if (cancelled) {
+            cleanup()
+            return
+          }
+          fileUrlCleanup = cleanup
+        })
+        .then((url) => {
+          if (cancelled) return
+          // Only update URL when new URL is ready
+          urlRef.value = url
+        })
+        .catch((e) => {
+          if (e instanceof Cancelled) return
+          throw e
+        })
+        .finally(() => {
+          loadingRef.value = false
+        })
+    },
+    { immediate: true }
+  )
+  return [urlRef, loadingRef] as const
+}
+
 /**
  * Get image element (HTMLImageElement) based on given (image) file.
  * The image element is guaranteed to be loaded when set to ref.

From a8a9ee66efce731b7118ce491fab3d40c894fe65 Mon Sep 17 00:00:00 2001
From: petezhuang <petezhuang13@163.com>
Date: Thu, 14 Aug 2025 17:54:34 +0800
Subject: [PATCH 18/49] feat(spx-gui):init code splitting

---
 .../components/editor/common/painter/components/aigc/error.vue    | 0
 .../editor/common/painter/components/aigc/generator.vue           | 0
 .../src/components/editor/common/painter/components/reshape.vue   | 0
 spx-gui/src/components/editor/common/painter/utils/loader.vue     | 0
 4 files changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 spx-gui/src/components/editor/common/painter/components/aigc/error.vue
 create mode 100644 spx-gui/src/components/editor/common/painter/components/aigc/generator.vue
 create mode 100644 spx-gui/src/components/editor/common/painter/components/reshape.vue
 create mode 100644 spx-gui/src/components/editor/common/painter/utils/loader.vue

diff --git a/spx-gui/src/components/editor/common/painter/components/aigc/error.vue b/spx-gui/src/components/editor/common/painter/components/aigc/error.vue
new file mode 100644
index 000000000..e69de29bb
diff --git a/spx-gui/src/components/editor/common/painter/components/aigc/generator.vue b/spx-gui/src/components/editor/common/painter/components/aigc/generator.vue
new file mode 100644
index 000000000..e69de29bb
diff --git a/spx-gui/src/components/editor/common/painter/components/reshape.vue b/spx-gui/src/components/editor/common/painter/components/reshape.vue
new file mode 100644
index 000000000..e69de29bb
diff --git a/spx-gui/src/components/editor/common/painter/utils/loader.vue b/spx-gui/src/components/editor/common/painter/utils/loader.vue
new file mode 100644
index 000000000..e69de29bb

From 71afa18f5518aa3a239d50abb295dc992ea79d8f Mon Sep 17 00:00:00 2001
From: petezhuang <petezhuang13@163.com>
Date: Fri, 15 Aug 2025 11:34:32 +0800
Subject: [PATCH 19/49] fix(spx-gui):migrate image and svg loading function

---
 .../editor/common/painter/painter.vue         | 270 ++++++------------
 .../editor/common/painter/utils/loader.vue    | 232 +++++++++++++++
 2 files changed, 321 insertions(+), 181 deletions(-)

diff --git a/spx-gui/src/components/editor/common/painter/painter.vue b/spx-gui/src/components/editor/common/painter/painter.vue
index 5727150ef..062f316b4 100644
--- a/spx-gui/src/components/editor/common/painter/painter.vue
+++ b/spx-gui/src/components/editor/common/painter/painter.vue
@@ -116,6 +116,7 @@ import paper from 'paper'
 import DrawLine from './components/draw_line.vue'
 import DrawBrush from './components/draw_brush.vue'
 import AiGenerate from './components/ai_generate.vue'
+import { useImageLoader } from './utils/loader.vue'
 
 // 工具类型
 type ToolType = 'line' | 'brush' | 'reshape'
@@ -166,6 +167,9 @@ const selectedPathForRestore = ref<paper.Path | null>(null)
 // AI生成弹窗状态
 const aiDialogVisible = ref<boolean>(false)
 
+// 初始化图片加载器
+const { loadFileToCanvas, importSvgToCanvas, loadImageToCanvas, removeBackgroundImage } = useImageLoader()
+
 const props = defineProps<{
   imgSrc: string | null
   imgLoading: boolean
@@ -185,85 +189,9 @@ const selectPathExclusive = (path: paper.Path | null): void => {
   }
 }
 
-// 加载位图图片到画布（PNG/JPG/...）
-const loadImageToCanvas = (imageSrc: string): void => {
-  if (!paper.project) return
-  
-  // 如果已有背景图片，先移除
-  if (backgroundImage.value) {
-    backgroundImage.value.remove()
-  }
-  
-  // 创建新的光栅图像
-  const raster = new paper.Raster(imageSrc)
-  
-  raster.onLoad = () => {
-    raster.position = paper.view.center
-    
-
-    
-    // 将图片放到最底层，作为背景
-    raster.sendToBack()
-    
-    backgroundImage.value = raster
-    paper.view.update()
-  }
-
-  // raster.onMouseDown = (event: paper.MouseEvent) => {
-    // if (currentTool.value === 'reshape') {
-    //   selectPathExclusive(null) // 清除路径选择
-    //   raster.selected = true
-    //   paper.view.update()
-    // }
-  // }
-}
 
-// 根据 url 自动判断并导入到画布（优先解析为 SVG，其次作为位图 Raster）
-const loadFileToCanvas = async (imageSrc: string): Promise<void> => {
-  if (!paper.project) return
-  try {
-    const resp = await fetch(imageSrc)
-    // 先尝试从响应体的 blob.type 判断（对 blob: URL 更可靠）
-    let isSvg = false
-    let svgText: string | null = null
-    try {
-      const blob = await resp.clone().blob()
-      if (blob && typeof blob.type === 'string' && blob.type.includes('image/svg')) {
-        isSvg = true
-        svgText = await blob.text()
-      }
-    } catch {}
-
-    // 退化到 header 判断
-    if (!isSvg) {
-      const contentType = resp.headers.get('content-type') || ''
-      if (contentType.includes('image/svg')) {
-        isSvg = true
-        svgText = await resp.clone().text()
-      }
-    }
 
-    // 最后尝试直接将文本解析为 SVG（针对部分 blob: 无类型场景）
-    if (!isSvg) {
-      try {
-        const text = await resp.clone().text()
-        if (/^\s*<svg[\s\S]*<\/svg>\s*$/i.test(text)) {
-          isSvg = true
-          svgText = text
-        }
-      } catch {}
-    }
 
-    if (isSvg && svgText != null) {
-      importSvgToCanvas(svgText)
-    } else {
-      loadImageToCanvas(imageSrc)
-    }
-  } catch {
-    // 回退策略：按位图处理
-    loadImageToCanvas(imageSrc)
-  }
-}
 
 // 初始化 Paper.js
 const initPaper = (): void => {
@@ -736,20 +664,55 @@ const showAiDialog = (): void => {
 }
 
 // 处理AI生成确认
-const handleAiConfirm = (data: { 
+const handleAiConfirm = async (data: { 
   model: string; 
   prompt: string; 
   url?: string; 
   svgContent?: string;
-}): void => {
+}): Promise<void> => {
   // console.log('AI生成确认:', data)
   
-  if (data.model === 'svg' && data.svgContent) {
-    // 处理SVG导入
-    importSvgToCanvas(data.svgContent)
-  } else if (data.model === 'png' && data.url) {
-    // 处理PNG图片导入
-    importImageToCanvas(data.url)
+  try {
+    if (data.model === 'svg' && data.svgContent) {
+      // 处理SVG导入
+      await importSvgToCanvas(data.svgContent, {
+        onPathCreated: (path: paper.Path) => {
+          // 添加到可编辑路径列表
+          allPaths.value.push(path)
+          
+          // 添加鼠标事件处理
+          path.onMouseDown = (event: paper.MouseEvent) => {
+            if (currentTool.value === 'reshape') {
+              showControlPoints(path)
+              paper.view.update()
+            }
+          }
+        },
+        onLoadComplete: () => {
+          // 导入来源于 props 时不导出，避免循环
+          if (!isImportingFromProps.value) exportSvgAndEmit()
+          else isImportingFromProps.value = false
+        },
+        onError: (error) => {
+          console.error('Failed to import SVG:', error)
+        }
+      })
+    } else if (data.model === 'png' && data.url) {
+      // 处理PNG图片导入
+      await loadImageToCanvas(data.url, {
+        onImageLoaded: (raster: paper.Raster) => {
+          backgroundImage.value = raster
+        },
+        onLoadComplete: () => {
+          exportSvgAndEmit()
+        },
+        onError: (error) => {
+          console.error('Failed to load image:', error)
+        }
+      })
+    }
+  } catch (error) {
+    console.error('AI生成处理失败:', error)
   }
   
   aiDialogVisible.value = false
@@ -761,96 +724,9 @@ const handleAiCancel = (): void => {
   aiDialogVisible.value = false
 }
 
-// 导入PNG图片到画布
-const importImageToCanvas = (imageUrl: string): void => {
-  if (!paper.project) return
-  
-  const raster = new paper.Raster(imageUrl)
-  
-  raster.onLoad = () => {
-    raster.position = paper.view.center
-    
-    // 保持原始尺寸，不进行自动缩放
-    // 如果需要缩放，用户可以手动调整
-    
-    // 添加点击事件处理
-    // raster.onMouseDown = (event: paper.MouseEvent) => {
-    //   if (currentTool.value === 'reshape') {
-    //     selectPathExclusive(null) // 清除路径选择
-    //     raster.selected = true
-    //     paper.view.update()
-    //   }
-    // }
 
-    paper.view.update()
-    // console.log('PNG图片已导入到画布')
 
-    exportSvgAndEmit()
-  }
-  
-  raster.onError = () => {
-    console.error('failed to load image')
-  }
-}
 
-// 导入SVG到画布并转换为可编辑的路径
-const importSvgToCanvas = (svgContent: string): void => {
-  if (!paper.project) return
-  
-  try {
-    // 创建一个临时的SVG元素来解析SVG内容
-    const parser = new DOMParser()
-    const svgDoc = parser.parseFromString(svgContent, 'image/svg+xml')
-    const svgElement = svgDoc.documentElement
-    
-    // 检查是否解析成功
-    if (svgElement.nodeName !== 'svg') {
-      console.error('invalid svg content')
-      return
-    }
-    
-    // 使用Paper.js导入SVG
-    const importedItem = paper.project.importSVG(svgElement as unknown as SVGElement)
-    
-    if (importedItem) {
-      importedItem.position = paper.view.center
-      
-      
-      // 收集所有可编辑的路径
-      const collectPaths = (item: paper.Item): void => {
-        if (item instanceof paper.Path && item.segments && item.segments.length > 0) {
-          // 添加到可编辑路径列表
-          allPaths.value.push(item)
-          
-          // 添加鼠标事件处理
-          item.onMouseDown = (event: paper.MouseEvent) => {
-            if (currentTool.value === 'reshape') {
-              showControlPoints(item)
-              paper.view.update()
-            }
-          }
-        } else if (item instanceof paper.Group || item instanceof paper.CompoundPath) {
-          // 递归处理子项
-          if (item.children) {
-            item.children.forEach(child => collectPaths(child))
-          }
-        }
-      }
-      
-      // 收集导入的所有路径
-      collectPaths(importedItem)
-      
-      // 更新视图
-      paper.view.update()
-      // console.log(`SVG已导入到画布，共${allPaths.value.length - (allPaths.value.length - countNewPaths(importedItem))}条可编辑路径`)
-      // 导入来源于 props 时不导出，避免循环
-      if (!isImportingFromProps.value) exportSvgAndEmit()
-      else isImportingFromProps.value = false
-    }
-  } catch (error) {
-    console.error('failed to import svg:', error)
-  }
-}
 
 
 
@@ -917,20 +793,52 @@ watch(
       })
       backgroundRect.value = background
       allPaths.value = []
-      backgroundImage.value = null
+      
+      // 如果已有背景图片，先移除
+      if (backgroundImage.value) {
+        removeBackgroundImage(backgroundImage.value)
+        backgroundImage.value = null
+      }
+      
       paper.view.update()
     }
     
-    // 加载新内容
-    await loadFileToCanvas(newImgSrc)
-    
-    // 导入完成后清理状态，不自动恢复控制点显示
-    // 让用户主动点击路径来显示控制点，避免干扰绘制体验
-    setTimeout(() => {
-      selectedPathForRestore.value = null
+    try {
+      // 加载新内容
+      await loadFileToCanvas(newImgSrc, {
+        onPathCreated: (path: paper.Path) => {
+          // 添加到可编辑路径列表
+          allPaths.value.push(path)
+          
+          // 添加鼠标事件处理
+          path.onMouseDown = (event: paper.MouseEvent) => {
+            if (currentTool.value === 'reshape') {
+              showControlPoints(path)
+              paper.view.update()
+            }
+          }
+        },
+        onImageLoaded: (raster: paper.Raster) => {
+          backgroundImage.value = raster
+        },
+        onLoadComplete: () => {
+          // 导入完成后清理状态，不自动恢复控制点显示
+          // 让用户主动点击路径来显示控制点，避免干扰绘制体验
+          setTimeout(() => {
+            selectedPathForRestore.value = null
+            isImportingFromProps.value = false
+            isFirstMount.value = false // 标记第一次挂载已完成
+          }, 200)
+        },
+        onError: (error) => {
+          console.error('Failed to load file:', error)
+          isImportingFromProps.value = false
+        }
+      })
+    } catch (error) {
+      console.error('Props图片加载失败:', error)
       isImportingFromProps.value = false
-      isFirstMount.value = false // 标记第一次挂载已完成
-    }, 200)
+    }
   },
   { immediate: true }
 )
diff --git a/spx-gui/src/components/editor/common/painter/utils/loader.vue b/spx-gui/src/components/editor/common/painter/utils/loader.vue
index e69de29bb..35502e907 100644
--- a/spx-gui/src/components/editor/common/painter/utils/loader.vue
+++ b/spx-gui/src/components/editor/common/painter/utils/loader.vue
@@ -0,0 +1,232 @@
+<script lang="ts">
+import { ref } from 'vue'
+import paper from 'paper'
+
+// 类型定义
+export interface LoaderOptions {
+  onPathCreated?: (path: paper.Path) => void
+  onImageLoaded?: (raster: paper.Raster) => void
+  onLoadComplete?: () => void
+  onError?: (error: Error) => void
+}
+
+// 导出的工具函数
+export const useImageLoader = () => {
+  const isLoading = ref(false)
+  
+  /**
+   * 加载位图图片到画布（PNG/JPG/...）
+   * @param imageSrc 图片源URL
+   * @param options 加载选项
+   * @returns Promise<paper.Raster | null>
+   */
+  const loadImageToCanvas = (imageSrc: string, options: LoaderOptions = {}): Promise<paper.Raster | null> => {
+    return new Promise((resolve, reject) => {
+      if (!paper.project) {
+        const error = new Error('Paper.js project not initialized')
+        options.onError?.(error)
+        reject(error)
+        return
+      }
+      
+      isLoading.value = true
+      
+      // 创建新的光栅图像
+      const raster = new paper.Raster(imageSrc)
+      
+      raster.onLoad = () => {
+        try {
+          raster.position = paper.view.center
+          
+          // 将图片放到最底层，作为背景
+          raster.sendToBack()
+          
+          paper.view.update()
+          
+          options.onImageLoaded?.(raster)
+          options.onLoadComplete?.()
+          
+          isLoading.value = false
+          resolve(raster)
+        } catch (error) {
+          const err = error instanceof Error ? error : new Error('Failed to process loaded image')
+          options.onError?.(err)
+          isLoading.value = false
+          reject(err)
+        }
+      }
+      
+      raster.onError = () => {
+        const error = new Error('Failed to load image')
+        options.onError?.(error)
+        isLoading.value = false
+        reject(error)
+      }
+    })
+  }
+  
+  /**
+   * 导入SVG到画布并转换为可编辑的路径
+   * @param svgContent SVG内容字符串
+   * @param options 加载选项
+   * @returns Promise<paper.Item | null>
+   */
+  const importSvgToCanvas = (svgContent: string, options: LoaderOptions = {}): Promise<paper.Item | null> => {
+    return new Promise((resolve, reject) => {
+      if (!paper.project) {
+        const error = new Error('Paper.js project not initialized')
+        options.onError?.(error)
+        reject(error)
+        return
+      }
+      
+      try {
+        isLoading.value = true
+        
+        // 创建一个临时的SVG元素来解析SVG内容
+        const parser = new DOMParser()
+        const svgDoc = parser.parseFromString(svgContent, 'image/svg+xml')
+        const svgElement = svgDoc.documentElement
+        
+        // 检查是否解析成功
+        if (svgElement.nodeName !== 'svg') {
+          throw new Error('Invalid SVG content')
+        }
+        
+        // 使用Paper.js导入SVG
+        const importedItem = paper.project.importSVG(svgElement as unknown as SVGElement)
+        
+        if (importedItem) {
+          importedItem.position = paper.view.center
+          
+          // 收集所有可编辑的路径
+          const paths: paper.Path[] = []
+          
+          const collectPaths = (item: paper.Item): void => {
+            if (item instanceof paper.Path && item.segments && item.segments.length > 0) {
+              paths.push(item)
+              options.onPathCreated?.(item)
+            } else if (item instanceof paper.Group || item instanceof paper.CompoundPath) {
+              // 递归处理子项
+              if (item.children) {
+                item.children.forEach(child => collectPaths(child))
+              }
+            }
+          }
+          
+          // 收集导入的所有路径
+          collectPaths(importedItem)
+          
+          // 更新视图
+          paper.view.update()
+          
+          options.onLoadComplete?.()
+          isLoading.value = false
+          resolve(importedItem)
+        } else {
+          throw new Error('Failed to import SVG')
+        }
+      } catch (error) {
+        const err = error instanceof Error ? error : new Error('Failed to import SVG')
+        options.onError?.(err)
+        isLoading.value = false
+        reject(err)
+      }
+    })
+  }
+  
+  /**
+   * 根据URL自动判断并导入到画布（优先解析为SVG，其次作为位图Raster）
+   * @param imageSrc 图片源URL
+   * @param options 加载选项
+   * @returns Promise<paper.Item | paper.Raster | null>
+   */
+  const loadFileToCanvas = async (imageSrc: string, options: LoaderOptions = {}): Promise<paper.Item | paper.Raster | null> => {
+    if (!paper.project) {
+      const error = new Error('Paper.js project not initialized')
+      options.onError?.(error)
+      throw error
+    }
+    
+    try {
+      isLoading.value = true
+      
+      const resp = await fetch(imageSrc)
+      
+      // 先尝试从响应体的blob.type判断（对blob: URL更可靠）
+      let isSvg = false
+      let svgText: string | null = null
+      
+      try {
+        const blob = await resp.clone().blob()
+        if (blob && typeof blob.type === 'string' && blob.type.includes('image/svg')) {
+          isSvg = true
+          svgText = await blob.text()
+        }
+      } catch {}
+      
+      // 退化到header判断
+      if (!isSvg) {
+        const contentType = resp.headers.get('content-type') || ''
+        if (contentType.includes('image/svg')) {
+          isSvg = true
+          svgText = await resp.clone().text()
+        }
+      }
+      
+      // 最后尝试直接将文本解析为SVG（针对部分blob:无类型场景）
+      if (!isSvg) {
+        try {
+          const text = await resp.clone().text()
+          if (/^\s*<svg[\s\S]*<\/svg>\s*$/i.test(text)) {
+            isSvg = true
+            svgText = text
+          }
+        } catch {}
+      }
+      
+      if (isSvg && svgText != null) {
+        return await importSvgToCanvas(svgText, options)
+      } else {
+        return await loadImageToCanvas(imageSrc, options)
+      }
+    } catch (error) {
+      // 回退策略：按位图处理
+      try {
+        return await loadImageToCanvas(imageSrc, options)
+      } catch (fallbackError) {
+        const err = fallbackError instanceof Error ? fallbackError : new Error('Failed to load file')
+        options.onError?.(err)
+        throw err
+      }
+    }
+  }
+  
+  /**
+   * 移除背景图片
+   * @param backgroundImage 要移除的背景图片引用
+   */
+  const removeBackgroundImage = (backgroundImage: paper.Raster | null): void => {
+    if (backgroundImage) {
+      backgroundImage.remove()
+    }
+  }
+  
+  return {
+    isLoading,
+    loadImageToCanvas,
+    importSvgToCanvas,
+    loadFileToCanvas,
+    removeBackgroundImage
+  }
+}
+
+// Vue组件默认导出（虽然这个文件主要用作工具模块）
+export default {
+  name: 'ImageLoader'
+}
+</script>
+
+<template>
+  <!-- 这是一个工具模块，不需要渲染内容 -->
+</template>

From 760109743b25088c4d7b231e4a2365fe9571010a Mon Sep 17 00:00:00 2001
From: petezhuang <petezhuang13@163.com>
Date: Fri, 15 Aug 2025 12:03:03 +0800
Subject: [PATCH 20/49] fix(spx-gui):migrate and decouple ai generate pic and
 svg function

---
 .../common/painter/components/ai_generate.vue | 942 ------------------
 .../common/painter/components/aigc/error.vue  | 316 ++++++
 .../painter/components/aigc/generator.vue     | 732 ++++++++++++++
 .../editor/common/painter/painter.vue         |   2 +-
 4 files changed, 1049 insertions(+), 943 deletions(-)
 delete mode 100644 spx-gui/src/components/editor/common/painter/components/ai_generate.vue

diff --git a/spx-gui/src/components/editor/common/painter/components/ai_generate.vue b/spx-gui/src/components/editor/common/painter/components/ai_generate.vue
deleted file mode 100644
index 1b0af2458..000000000
--- a/spx-gui/src/components/editor/common/painter/components/ai_generate.vue
+++ /dev/null
@@ -1,942 +0,0 @@
-<template>
-  <div class="ai-generate-dialog">
-    <!-- 遮罩层 -->
-    <div 
-      v-if="visible" 
-      class="dialog-overlay"
-    >
-      <!-- 弹窗主体 -->
-      <div 
-        class="dialog-content"
-        @click.stop
-      >
-        <!-- 标题栏 -->
-        <div class="dialog-header">
-          <h3 class="dialog-title">{{ $t({ en: 'AI Generate Image', zh: 'AI生成图片' }) }}</h3>
-          <button 
-            class="close-btn"
-            @click="handleCancel"
-          >
-            ×
-          </button>
-        </div>
-
-        <!-- 内容区域 -->
-        <div class="dialog-body">
-          <div class="dialog-content-wrapper">
-            <!-- 左侧表单区域 -->
-            <div class="form-section">
-              <!-- 模型选择 -->
-              <div class="form-group">
-                <label class="form-label">{{ $t({ en: 'Select Generation Model', zh: '选择生成模型' }) }}</label>
-                <div class="model-selector">
-                  <div 
-                    class="model-option"
-                    :class="{ active: selectedModel === 'png' }"
-                    @click="selectedModel = 'png'"
-                  >
-                    <div class="model-icon">🖼️</div>
-                    <div class="model-info">
-                      <div class="model-name">{{ $t({ en: 'PNG Image', zh: 'PNG图片' }) }}</div>
-                      <div class="model-desc">{{ $t({ en: 'Generate high-quality bitmap images', zh: '生成高质量位图图片' }) }}</div>
-                    </div>
-                  </div>
-                  <div 
-                    class="model-option"
-                    :class="{ active: selectedModel === 'svg' }"
-                    @click="selectedModel = 'svg'"
-                  >
-                    <div class="model-icon">📐</div>
-                    <div class="model-info">
-                      <div class="model-name">{{ $t({ en: 'SVG Vector', zh: 'SVG矢量' }) }}</div>
-                      <div class="model-desc">{{ $t({ en: 'Generate scalable vector graphics', zh: '生成可缩放矢量图形' }) }}</div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <!-- 提示词输入 -->
-              <div class="form-group">
-                <label class="form-label">{{ $t({ en: 'Describe the image you want', zh: '描述您想要的图片' }) }}</label>
-                <textarea
-                  v-model="prompt"
-                  class="prompt-input"
-                  :placeholder="$t({ en: 'Please describe in detail the image content you want to generate, for example: a cute cartoon cat sitting on a rainbow with blue sky and white clouds in the background...', zh: '请详细描述您想要生成的图片内容，例如：一只可爱的卡通猫咪，坐在彩虹上，背景是蓝天白云...' })"
-                  rows="4"
-                ></textarea>
-                <div class="input-hint">
-                  {{ $t({ en: 'Tip: The more detailed the description, the better the generated image effect', zh: '提示：描述越详细，生成的图片效果越好' }) }}
-                </div>
-              </div>
-
-              <!-- 生成按钮 -->
-              <div class="form-group">
-                <button 
-                  class="generate-btn"
-                  :disabled="!prompt.trim() || isGenerating"
-                  @click="handleGenerate"
-                >
-                  <span v-if="isGenerating" class="loading-spinner"></span>
-                  {{ isGenerating ? $t({ en: 'Generating...', zh: '生成中...' }) : $t({ en: 'Generate Image', zh: '生成图片' }) }}
-                </button>
-              </div>
-            </div>
-
-            <!-- 右侧预览区域 -->
-            <div class="preview-section" :class="{ visible: previewUrl || isGenerating }">
-              <label class="form-label">{{ $t({ en: 'Preview', zh: '预览效果' }) }}</label>
-              <div class="preview-container">
-                <div v-if="isGenerating" class="preview-loading">
-                  <div class="loading-spinner large"></div>
-                  <div class="loading-text">{{ $t({ en: 'AI is generating images for you...', zh: 'AI正在为您生成图片...' }) }}</div>
-                </div>
-                <div v-else-if="previewUrl" class="preview-image-wrapper">
-                  <img 
-                    :src="previewUrl" 
-                    :alt="$t({ en: 'AI generated image preview', zh: 'AI生成的图片预览' })"
-                    class="preview-image"
-                    @load="handleImageLoad"
-                    @error="handleImageError"
-                  />
-                  <!-- <div class="preview-info">
-                    <span class="model-tag">{{ selectedModel.toUpperCase() }}</span>
-                    <span class="size-info">{{ imageSize }}</span>
-                  </div> -->
-                </div>
-                <div v-else class="preview-placeholder">
-                  <div class="placeholder-icon">🖼️</div>
-                  <div class="placeholder-text">{{ $t({ en: 'Generated images will be previewed here', zh: '生成的图片将在这里预览' }) }}</div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- 底部按钮 -->
-        <div class="dialog-footer">
-          <button 
-            class="btn btn-secondary"
-            @click="handleCancel"
-          >
-            {{ $t({ en: 'Cancel', zh: '取消' }) }}
-          </button>
-          <button 
-            class="btn btn-primary"
-            :disabled="!previewUrl || isGenerating"
-            @click="handleConfirm"
-          >
-            {{ $t({ en: 'Confirm Use', zh: '确认使用' }) }}
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <!-- 错误提示弹窗 -->
-    <div 
-      v-if="showErrorModal" 
-      class="error-modal-overlay"
-      @click="closeErrorModal"
-    >
-      <div 
-        class="error-modal-content"
-        @click.stop
-      >
-        <div class="error-modal-header">
-          <div class="error-icon">⚠️</div>
-          <h3 class="error-title">{{ $t({ en: 'Generation Failed', zh: '生成失败' }) }}</h3>
-          <button 
-            class="error-close-btn"
-            @click="closeErrorModal"
-          >
-            ×
-          </button>
-        </div>
-        
-        <div class="error-modal-body">
-          <p class="error-message">
-            {{ errorType === 'timeout' ? $t({ en: 'Generation timeout, please try simplifying the description or try again later', zh: '生成超时，请尝试简化描述或稍后重试' }) : 
-               errorType === 'network' ? $t({ en: 'Network connection error, please check your network connection', zh: '网络连接异常，请检查网络连接' }) :
-               errorType === 'params' ? $t({ en: 'Request parameter error, please check the prompt length (at least 3 characters)', zh: '请求参数错误，请检查提示词长度（至少3个字符）' }) :
-               errorType === 'server' ? $t({ en: 'Server internal error, please try again later', zh: '服务器内部错误，请稍后重试' }) :
-               $t({ en: 'Image generation failed, please try again later', zh: '图片生成失败，请稍后重试' }) }}
-          </p>
-          <div class="error-suggestions">
-            <h4 class="suggestions-title">{{ $t({ en: 'Suggestions:', zh: '建议：' }) }}</h4>
-            <ul class="suggestions-list">
-              <li v-if="errorType === 'timeout'">{{ $t({ en: 'Try simplifying your description', zh: '尝试简化您的描述' }) }}</li>
-              <li v-if="errorType === 'network'">{{ $t({ en: 'Check your network connection', zh: '检查网络连接状态' }) }}</li>
-              <li v-if="errorType === 'params'">{{ $t({ en: 'Ensure prompt is at least 3 characters', zh: '确保提示词至少3个字符' }) }}</li>
-              <li v-if="errorType === 'default' || errorType === 'server'">{{ $t({ en: 'Try again in a few moments', zh: '稍后再试' }) }}</li>
-              <li>{{ $t({ en: 'Contact support if the problem persists', zh: '如问题持续存在，请联系技术支持' }) }}</li>
-            </ul>
-          </div>
-        </div>
-        
-        <div class="error-modal-footer">
-          <button 
-            class="btn btn-secondary"
-            @click="closeErrorModal"
-          >
-            {{ $t({ en: 'Close', zh: '关闭' }) }}
-          </button>
-          <button 
-            class="btn btn-primary"
-            @click="retryGeneration"
-          >
-            {{ $t({ en: 'Retry', zh: '重试' }) }}
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, watch } from 'vue'
-import { generateImage, generateSvgDirect } from '@/apis/picgc'
-
-// Props
-interface Props {
-  visible: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  visible: false
-})
-
-// Emits
-const emit = defineEmits<{
-  'update:visible': [value: boolean]
-  'confirm': [data: { 
-    model: string; 
-    prompt: string; 
-    url?: string; 
-    svgContent?: string;
-  }]
-  'cancel': []
-}>()
-
-// 响应式数据
-const selectedModel = ref<'png' | 'svg'>('png')
-const prompt = ref('')
-const previewUrl = ref('')
-const isGenerating = ref(false)
-const imageSize = ref('')
-
-// 存储SVG原始代码
-const svgRawContent = ref('')
-
-// 错误处理相关状态
-const showErrorModal = ref(false)
-const errorMessage = ref('')
-const errorType = ref('')
-
-// 方法
-const handleGenerate = async () => {
-  if (!prompt.value.trim()) return
-  
-  isGenerating.value = true
-  previewUrl.value = ''
-  
-  try {
-
-    await handleRealGenerate()
-    // previewUrl 在 handleRealGenerate 中已经设置
-    // imageSize 在 handleRealGenerate 中已经设置
-    
-  } catch (error) {
-    console.error('failed to generate image1:', error)
-  } finally {
-    isGenerating.value = false
-  }
-}
-
-const handleConfirm = () => {
-  if (!previewUrl.value) return
-  
-  const confirmData: any = {
-    model: selectedModel.value,
-    prompt: prompt.value
-  }
-  
-  if (selectedModel.value === 'svg') {
-    // SVG模式：传递原始SVG代码
-    confirmData.svgContent = svgRawContent.value
-    confirmData.url = previewUrl.value // 用于预览的blob URL
-    // console.log('SVG确认数据:', { svgContent: svgRawContent.value })
-  } else {
-    // PNG模式：传递图片URL
-    confirmData.url = previewUrl.value
-    // console.log('PNG确认数据:', { url: previewUrl.value })
-  }
-  
-  emit('confirm', confirmData)
-  
-  handleCancel()
-}
-
-const handleCancel = () => {
-  emit('update:visible', false)
-  emit('cancel')
-  
-  // 重置状态
-  setTimeout(() => {
-    prompt.value = ''
-    previewUrl.value = ''
-    isGenerating.value = false
-    selectedModel.value = 'png'
-  }, 300)
-}
-
-const handleImageLoad = () => {
-//   console.log('图片加载成功')
-}
-
-const handleImageError = () => {
-  console.error('failed to load image')
-  previewUrl.value = ''
-}
-
-// 错误处理方法
-const showError = (message: string, type: string = 'default') => {
-  errorMessage.value = message
-  errorType.value = type
-  showErrorModal.value = true
-}
-
-const closeErrorModal = () => {
-  showErrorModal.value = false
-  errorMessage.value = ''
-  errorType.value = ''
-}
-
-const retryGeneration = () => {
-  closeErrorModal()
-  handleGenerate()
-}
-
-
-// 实际的AI图片生成函数
-const handleRealGenerate = async () => {
-  if (!prompt.value.trim()) return
-  
-  isGenerating.value = true
-  previewUrl.value = ''
-  svgRawContent.value = ''
-  
-  try {
-    if (selectedModel.value === 'svg') {
-      const svgResult = await generateSvgDirect(prompt.value, {
-        style: 'FLAT_VECTOR' // developing
-      })
-      
-      // 直接获得SVG内容
-      svgRawContent.value = svgResult.svgContent
-      
-      // 创建blob URL用于预览 - 参照mock方式处理
-      const blob = new Blob([svgResult.svgContent], { type: 'image/svg+xml' })
-      previewUrl.value = URL.createObjectURL(blob)
-      
-      imageSize.value = `${svgResult.width}x${svgResult.height} (矢量图)`
-    } else {
-      // PNG mod
-      const result = await generateImage(prompt.value, {
-        style: 'FLAT_VECTOR' // developing
-      })
-      
-      previewUrl.value = result.png_url
-      imageSize.value = `${result.width}x${result.height}`
-    }
-    
-  } catch (error) {
-    console.error('failed to generate image:', error)
-    
-    let errorType = 'default'
-    let errorKey = 'default'
-    
-    if (error instanceof Error) {
-      if (error.message.includes('timeout')) {
-        errorType = 'timeout'
-        errorKey = 'timeout'
-      } else if (error.message.includes('network')) {
-        errorType = 'network' 
-        errorKey = 'network'
-      } else if (error.message.includes('400')) {
-        errorType = 'params'
-        errorKey = 'params'
-      } else if (error.message.includes('500')) {
-        errorType = 'server'
-        errorKey = 'server'
-      }
-    }
-    if (String(error).includes('fetch') || String(error).includes('net')) {
-      errorType = 'network'
-      errorKey = 'network'
-    }
-    
-    // Use a simple fallback message for script context, real i18n will be handled in template
-    const fallbackMessage = '图片生成失败，请稍后重试'
-    showError(fallbackMessage, errorType)
-    
-  } finally {
-    isGenerating.value = false
-  }
-}
-
-// 监听visible变化
-watch(() => props.visible, (newVal) => {
-  if (!newVal) {
-    // 弹窗关闭时重置状态
-    setTimeout(() => {
-      prompt.value = ''
-      previewUrl.value = ''
-      isGenerating.value = false
-    }, 300)
-  }
-})
-</script>
-
-<style scoped>
-.ai-generate-dialog {
-  position: relative;
-  z-index: 1000;
-}
-
-.dialog-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-}
-
-.dialog-content {
-  background: white;
-  border-radius: 12px;
-  width: 90%;
-  max-width: 900px;
-  max-height: 90vh;
-  overflow-y: auto;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
-  animation: dialogSlideIn 0.3s ease-out;
-}
-
-@keyframes dialogSlideIn {
-  from {
-    opacity: 0;
-    transform: translateY(-20px) scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
-
-.dialog-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 20px 24px;
-  border-bottom: 1px solid #e5e7eb;
-}
-
-.dialog-title {
-  margin: 0;
-  font-size: 18px;
-  font-weight: 600;
-  color: #1f2937;
-}
-
-.close-btn {
-  background: none;
-  border: none;
-  font-size: 24px;
-  color: #6b7280;
-  cursor: pointer;
-  padding: 0;
-  width: 32px;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 6px;
-  transition: all 0.2s;
-}
-
-.close-btn:hover {
-  background: #f3f4f6;
-  color: #374151;
-}
-
-.dialog-body {
-  padding: 24px;
-}
-
-.dialog-content-wrapper {
-  display: flex;
-  gap: 24px;
-  min-height: 400px;
-}
-
-.form-section {
-  flex: 1;
-  min-width: 0;
-}
-
-.preview-section {
-  flex: 1;
-  min-width: 300px;
-  display: flex;
-  flex-direction: column;
-}
-
-.form-group {
-  margin-bottom: 24px;
-}
-
-.form-label {
-  display: block;
-  margin-bottom: 8px;
-  font-weight: 500;
-  color: #374151;
-  font-size: 14px;
-}
-
-.model-selector {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 12px;
-}
-
-.model-option {
-  border: 2px solid #e5e7eb;
-  border-radius: 8px;
-  padding: 16px;
-  cursor: pointer;
-  transition: all 0.2s;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.model-option:hover {
-  border-color: #d1d5db;
-  background: #f9fafb;
-}
-
-.model-option.active {
-  border-color: #3b82f6;
-  background: #eff6ff;
-}
-
-.model-icon {
-  font-size: 24px;
-  flex-shrink: 0;
-}
-
-.model-info {
-  flex: 1;
-}
-
-.model-name {
-  font-weight: 500;
-  color: #1f2937;
-  margin-bottom: 4px;
-}
-
-.model-desc {
-  font-size: 12px;
-  color: #6b7280;
-}
-
-.prompt-input {
-  width: 100%;
-  border: 2px solid #e5e7eb;
-  border-radius: 8px;
-  padding: 12px;
-  font-size: 14px;
-  line-height: 1.5;
-  resize: vertical;
-  min-height: 100px;
-  transition: border-color 0.2s;
-}
-
-.prompt-input:focus {
-  outline: none;
-  border-color: #3b82f6;
-}
-
-.input-hint {
-  margin-top: 6px;
-  font-size: 12px;
-  color: #6b7280;
-}
-
-.generate-btn {
-  width: 100%;
-  background: #3b82f6;
-  color: white;
-  border: none;
-  border-radius: 8px;
-  padding: 12px 24px;
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-}
-
-.generate-btn:hover:not(:disabled) {
-  background: #2563eb;
-}
-
-.generate-btn:disabled {
-  background: #d1d5db;
-  cursor: not-allowed;
-}
-
-.preview-section .form-label {
-  margin-bottom: 12px;
-}
-
-.preview-container {
-  border: 2px dashed #d1d5db;
-  border-radius: 8px;
-  padding: 24px;
-  text-align: center;
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 300px;
-}
-
-.preview-placeholder {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 16px;
-  color: #9ca3af;
-}
-
-.placeholder-icon {
-  font-size: 48px;
-  opacity: 0.5;
-}
-
-.placeholder-text {
-  font-size: 14px;
-  color: #6b7280;
-}
-
-.preview-loading {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 16px;
-  color: #6b7280;
-}
-
-.loading-text {
-  font-size: 14px;
-}
-
-.preview-image-wrapper {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-  width: 100%;
-}
-
-.preview-image {
-  max-width: 100%;
-  max-height: 250px;
-  border-radius: 8px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  object-fit: contain;
-}
-
-.preview-info {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-}
-
-.model-tag {
-  background: #3b82f6;
-  color: white;
-  padding: 4px 8px;
-  border-radius: 4px;
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.size-info {
-  color: #6b7280;
-  font-size: 12px;
-}
-
-.loading-spinner {
-  width: 16px;
-  height: 16px;
-  border: 2px solid #e5e7eb;
-  border-top: 2px solid #3b82f6;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-
-.loading-spinner.large {
-  width: 32px;
-  height: 32px;
-  border-width: 3px;
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.dialog-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-  padding: 20px 24px;
-  border-top: 1px solid #e5e7eb;
-  background: #f9fafb;
-  border-radius: 0 0 12px 12px;
-}
-
-.btn {
-  padding: 10px 20px;
-  border-radius: 6px;
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s;
-  border: none;
-}
-
-.btn-secondary {
-  background: #f3f4f6;
-  color: #374151;
-}
-
-.btn-secondary:hover {
-  background: #e5e7eb;
-}
-
-.btn-primary {
-  background: #3b82f6;
-  color: white;
-}
-
-.btn-primary:hover:not(:disabled) {
-  background: #2563eb;
-}
-
-.btn-primary:disabled {
-  background: #d1d5db;
-  cursor: not-allowed;
-}
-
-/* 错误弹窗样式 */
-.error-modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.6);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1100;
-  animation: fadeIn 0.2s ease-out;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-.error-modal-content {
-  background: white;
-  border-radius: 12px;
-  width: 90%;
-  max-width: 480px;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
-  animation: errorModalSlideIn 0.3s ease-out;
-  overflow: hidden;
-}
-
-@keyframes errorModalSlideIn {
-  from {
-    opacity: 0;
-    transform: translateY(-30px) scale(0.9);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
-
-.error-modal-header {
-  display: flex;
-  align-items: center;
-  padding: 20px 24px 16px;
-  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
-  border-bottom: 1px solid #fecaca;
-}
-
-.error-icon {
-  font-size: 24px;
-  margin-right: 12px;
-  filter: drop-shadow(0 2px 4px rgba(239, 68, 68, 0.2));
-}
-
-.error-title {
-  flex: 1;
-  margin: 0;
-  font-size: 18px;
-  font-weight: 600;
-  color: #dc2626;
-}
-
-.error-close-btn {
-  background: none;
-  border: none;
-  font-size: 24px;
-  color: #dc2626;
-  cursor: pointer;
-  padding: 0;
-  width: 32px;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 6px;
-  transition: all 0.2s;
-  opacity: 0.7;
-}
-
-.error-close-btn:hover {
-  background: rgba(220, 38, 38, 0.1);
-  opacity: 1;
-}
-
-.error-modal-body {
-  padding: 20px 24px;
-}
-
-.error-message {
-  margin: 0 0 20px 0;
-  font-size: 16px;
-  color: #374151;
-  line-height: 1.5;
-  font-weight: 500;
-}
-
-.error-suggestions {
-  background: #f8fafc;
-  border: 1px solid #e2e8f0;
-  border-radius: 8px;
-  padding: 16px;
-}
-
-.suggestions-title {
-  margin: 0 0 12px 0;
-  font-size: 14px;
-  font-weight: 600;
-  color: #475569;
-}
-
-.suggestions-list {
-  margin: 0;
-  padding-left: 16px;
-  list-style: none;
-}
-
-.suggestions-list li {
-  position: relative;
-  margin-bottom: 8px;
-  font-size: 14px;
-  color: #64748b;
-  line-height: 1.4;
-}
-
-.suggestions-list li:before {
-  content: '•';
-  color: #3b82f6;
-  font-weight: bold;
-  position: absolute;
-  left: -12px;
-}
-
-.suggestions-list li:last-child {
-  margin-bottom: 0;
-}
-
-.error-modal-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-  padding: 16px 24px 20px;
-  background: #f9fafb;
-  border-top: 1px solid #e5e7eb;
-}
-
-.error-modal-footer .btn {
-  min-width: 80px;
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .dialog-content {
-    max-width: 95%;
-    margin: 20px;
-  }
-  
-  .dialog-content-wrapper {
-    flex-direction: column;
-    min-height: auto;
-  }
-  
-  .preview-section {
-    min-width: auto;
-    margin-top: 20px;
-  }
-  
-  .preview-container {
-    min-height: 200px;
-  }
-
-  .error-modal-content {
-    max-width: 95%;
-    margin: 20px;
-  }
-  
-  .error-modal-footer {
-    flex-direction: column-reverse;
-  }
-  
-  .error-modal-footer .btn {
-    width: 100%;
-  }
-}
-</style>
diff --git a/spx-gui/src/components/editor/common/painter/components/aigc/error.vue b/spx-gui/src/components/editor/common/painter/components/aigc/error.vue
index e69de29bb..858233d98 100644
--- a/spx-gui/src/components/editor/common/painter/components/aigc/error.vue
+++ b/spx-gui/src/components/editor/common/painter/components/aigc/error.vue
@@ -0,0 +1,316 @@
+<template>
+  <!-- 错误提示弹窗 -->
+  <div 
+    v-if="visible" 
+    class="error-modal-overlay"
+    @click="handleClose"
+  >
+    <div 
+      class="error-modal-content"
+      @click.stop
+    >
+      <div class="error-modal-header">
+        <div class="error-icon">⚠️</div>
+        <h3 class="error-title">{{ $t({ en: 'Generation Failed', zh: '生成失败' }) }}</h3>
+        <button 
+          class="error-close-btn"
+          @click="handleClose"
+        >
+          ×
+        </button>
+      </div>
+      
+      <div class="error-modal-body">
+        <p class="error-message">
+          {{ getErrorMessage() }}
+        </p>
+        <div class="error-suggestions">
+          <h4 class="suggestions-title">{{ $t({ en: 'Suggestions:', zh: '建议：' }) }}</h4>
+          <ul class="suggestions-list">
+            <li v-if="errorType === 'timeout'">{{ $t({ en: 'Try simplifying your description', zh: '尝试简化您的描述' }) }}</li>
+            <li v-if="errorType === 'network'">{{ $t({ en: 'Check your network connection', zh: '检查网络连接状态' }) }}</li>
+            <li v-if="errorType === 'params'">{{ $t({ en: 'Ensure prompt is at least 3 characters', zh: '确保提示词至少3个字符' }) }}</li>
+            <li v-if="errorType === 'default' || errorType === 'server'">{{ $t({ en: 'Try again in a few moments', zh: '稍后再试' }) }}</li>
+            <li>{{ $t({ en: 'Contact support if the problem persists', zh: '如问题持续存在，请联系技术支持' }) }}</li>
+          </ul>
+        </div>
+      </div>
+      
+      <div class="error-modal-footer">
+        <button 
+          class="btn btn-secondary"
+          @click="handleClose"
+        >
+          {{ $t({ en: 'Close', zh: '关闭' }) }}
+        </button>
+        <button 
+          class="btn btn-primary"
+          @click="handleRetry"
+        >
+          {{ $t({ en: 'Retry', zh: '重试' }) }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// Props
+interface Props {
+  visible: boolean
+  errorType?: string
+  errorMessage?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  visible: false,
+  errorType: 'default',
+  errorMessage: ''
+})
+
+// Emits
+const emit = defineEmits<{
+  'update:visible': [value: boolean]
+  'close': []
+  'retry': []
+}>()
+
+// 方法
+const handleClose = () => {
+  emit('update:visible', false)
+  emit('close')
+}
+
+const handleRetry = () => {
+  emit('update:visible', false)
+  emit('retry')
+}
+
+const getErrorMessage = () => {
+  if (props.errorMessage) {
+    return props.errorMessage
+  }
+  
+  // 根据错误类型返回对应的错误信息
+  switch (props.errorType) {
+    case 'timeout':
+      return $t({ en: 'Generation timeout, please try simplifying the description or try again later', zh: '生成超时，请尝试简化描述或稍后重试' })
+    case 'network':
+      return $t({ en: 'Network connection error, please check your network connection', zh: '网络连接异常，请检查网络连接' })
+    case 'params':
+      return $t({ en: 'Request parameter error, please check the prompt length (at least 3 characters)', zh: '请求参数错误，请检查提示词长度（至少3个字符）' })
+    case 'server':
+      return $t({ en: 'Server internal error, please try again later', zh: '服务器内部错误，请稍后重试' })
+    default:
+      return $t({ en: 'Image generation failed, please try again later', zh: '图片生成失败，请稍后重试' })
+  }
+}
+
+// 全局函数，用于在模板中使用
+// 注意：这里应该使用实际的国际化函数，暂时返回中文
+const $t = (options: { en: string; zh: string }) => {
+  return options.zh
+}
+</script>
+
+<style scoped>
+/* 错误弹窗样式 */
+.error-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1100;
+  animation: fadeIn 0.2s ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.error-modal-content {
+  background: white;
+  border-radius: 12px;
+  width: 90%;
+  max-width: 480px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  animation: errorModalSlideIn 0.3s ease-out;
+  overflow: hidden;
+}
+
+@keyframes errorModalSlideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-30px) scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.error-modal-header {
+  display: flex;
+  align-items: center;
+  padding: 20px 24px 16px;
+  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
+  border-bottom: 1px solid #fecaca;
+}
+
+.error-icon {
+  font-size: 24px;
+  margin-right: 12px;
+  filter: drop-shadow(0 2px 4px rgba(239, 68, 68, 0.2));
+}
+
+.error-title {
+  flex: 1;
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: #dc2626;
+}
+
+.error-close-btn {
+  background: none;
+  border: none;
+  font-size: 24px;
+  color: #dc2626;
+  cursor: pointer;
+  padding: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  transition: all 0.2s;
+  opacity: 0.7;
+}
+
+.error-close-btn:hover {
+  background: rgba(220, 38, 38, 0.1);
+  opacity: 1;
+}
+
+.error-modal-body {
+  padding: 20px 24px;
+}
+
+.error-message {
+  margin: 0 0 20px 0;
+  font-size: 16px;
+  color: #374151;
+  line-height: 1.5;
+  font-weight: 500;
+}
+
+.error-suggestions {
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.suggestions-title {
+  margin: 0 0 12px 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: #475569;
+}
+
+.suggestions-list {
+  margin: 0;
+  padding-left: 16px;
+  list-style: none;
+}
+
+.suggestions-list li {
+  position: relative;
+  margin-bottom: 8px;
+  font-size: 14px;
+  color: #64748b;
+  line-height: 1.4;
+}
+
+.suggestions-list li:before {
+  content: '•';
+  color: #3b82f6;
+  font-weight: bold;
+  position: absolute;
+  left: -12px;
+}
+
+.suggestions-list li:last-child {
+  margin-bottom: 0;
+}
+
+.error-modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  padding: 16px 24px 20px;
+  background: #f9fafb;
+  border-top: 1px solid #e5e7eb;
+}
+
+.error-modal-footer .btn {
+  min-width: 80px;
+  padding: 10px 20px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  border: none;
+}
+
+.btn-secondary {
+  background: #f3f4f6;
+  color: #374151;
+}
+
+.btn-secondary:hover {
+  background: #e5e7eb;
+}
+
+.btn-primary {
+  background: #3b82f6;
+  color: white;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: #2563eb;
+}
+
+.btn-primary:disabled {
+  background: #d1d5db;
+  cursor: not-allowed;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .error-modal-content {
+    max-width: 95%;
+    margin: 20px;
+  }
+  
+  .error-modal-footer {
+    flex-direction: column-reverse;
+  }
+  
+  .error-modal-footer .btn {
+    width: 100%;
+  }
+}
+</style>
diff --git a/spx-gui/src/components/editor/common/painter/components/aigc/generator.vue b/spx-gui/src/components/editor/common/painter/components/aigc/generator.vue
index e69de29bb..0deb543cb 100644
--- a/spx-gui/src/components/editor/common/painter/components/aigc/generator.vue
+++ b/spx-gui/src/components/editor/common/painter/components/aigc/generator.vue
@@ -0,0 +1,732 @@
+<template>
+    <div class="ai-generate-dialog">
+      <!-- 遮罩层 -->
+      <div 
+        v-if="visible" 
+        class="dialog-overlay"
+      >
+        <!-- 弹窗主体 -->
+        <div 
+          class="dialog-content"
+          @click.stop
+        >
+          <!-- 标题栏 -->
+          <div class="dialog-header">
+            <h3 class="dialog-title">{{ $t({ en: 'AI Generate Image', zh: 'AI生成图片' }) }}</h3>
+            <button 
+              class="close-btn"
+              @click="handleCancel"
+            >
+              ×
+            </button>
+          </div>
+  
+          <!-- 内容区域 -->
+          <div class="dialog-body">
+            <div class="dialog-content-wrapper">
+              <!-- 左侧表单区域 -->
+              <div class="form-section">
+                <!-- 模型选择 -->
+                <div class="form-group">
+                  <label class="form-label">{{ $t({ en: 'Select Generation Model', zh: '选择生成模型' }) }}</label>
+                  <div class="model-selector">
+                    <div 
+                      class="model-option"
+                      :class="{ active: selectedModel === 'png' }"
+                      @click="selectedModel = 'png'"
+                    >
+                      <div class="model-icon">🖼️</div>
+                      <div class="model-info">
+                        <div class="model-name">{{ $t({ en: 'PNG Image', zh: 'PNG图片' }) }}</div>
+                        <div class="model-desc">{{ $t({ en: 'Generate high-quality bitmap images', zh: '生成高质量位图图片' }) }}</div>
+                      </div>
+                    </div>
+                    <div 
+                      class="model-option"
+                      :class="{ active: selectedModel === 'svg' }"
+                      @click="selectedModel = 'svg'"
+                    >
+                      <div class="model-icon">📐</div>
+                      <div class="model-info">
+                        <div class="model-name">{{ $t({ en: 'SVG Vector', zh: 'SVG矢量' }) }}</div>
+                        <div class="model-desc">{{ $t({ en: 'Generate scalable vector graphics', zh: '生成可缩放矢量图形' }) }}</div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+  
+                <!-- 提示词输入 -->
+                <div class="form-group">
+                  <label class="form-label">{{ $t({ en: 'Describe the image you want', zh: '描述您想要的图片' }) }}</label>
+                  <textarea
+                    v-model="prompt"
+                    class="prompt-input"
+                    :placeholder="$t({ en: 'Please describe in detail the image content you want to generate, for example: a cute cartoon cat sitting on a rainbow with blue sky and white clouds in the background...', zh: '请详细描述您想要生成的图片内容，例如：一只可爱的卡通猫咪，坐在彩虹上，背景是蓝天白云...' })"
+                    rows="4"
+                  ></textarea>
+                  <div class="input-hint">
+                    {{ $t({ en: 'Tip: The more detailed the description, the better the generated image effect', zh: '提示：描述越详细，生成的图片效果越好' }) }}
+                  </div>
+                </div>
+  
+                <!-- 生成按钮 -->
+                <div class="form-group">
+                  <button 
+                    class="generate-btn"
+                    :disabled="!prompt.trim() || isGenerating"
+                    @click="handleGenerate"
+                  >
+                    <span v-if="isGenerating" class="loading-spinner"></span>
+                    {{ isGenerating ? $t({ en: 'Generating...', zh: '生成中...' }) : $t({ en: 'Generate Image', zh: '生成图片' }) }}
+                  </button>
+                </div>
+              </div>
+  
+              <!-- 右侧预览区域 -->
+              <div class="preview-section" :class="{ visible: previewUrl || isGenerating }">
+                <label class="form-label">{{ $t({ en: 'Preview', zh: '预览效果' }) }}</label>
+                <div class="preview-container">
+                  <div v-if="isGenerating" class="preview-loading">
+                    <div class="loading-spinner large"></div>
+                    <div class="loading-text">{{ $t({ en: 'AI is generating images for you...', zh: 'AI正在为您生成图片...' }) }}</div>
+                  </div>
+                  <div v-else-if="previewUrl" class="preview-image-wrapper">
+                    <img 
+                      :src="previewUrl" 
+                      :alt="$t({ en: 'AI generated image preview', zh: 'AI生成的图片预览' })"
+                      class="preview-image"
+                      @load="handleImageLoad"
+                      @error="handleImageError"
+                    />
+                    <!-- <div class="preview-info">
+                      <span class="model-tag">{{ selectedModel.toUpperCase() }}</span>
+                      <span class="size-info">{{ imageSize }}</span>
+                    </div> -->
+                  </div>
+                  <div v-else class="preview-placeholder">
+                    <div class="placeholder-icon">🖼️</div>
+                    <div class="placeholder-text">{{ $t({ en: 'Generated images will be previewed here', zh: '生成的图片将在这里预览' }) }}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+  
+          <!-- 底部按钮 -->
+          <div class="dialog-footer">
+            <button 
+              class="btn btn-secondary"
+              @click="handleCancel"
+            >
+              {{ $t({ en: 'Cancel', zh: '取消' }) }}
+            </button>
+            <button 
+              class="btn btn-primary"
+              :disabled="!previewUrl || isGenerating"
+              @click="handleConfirm"
+            >
+              {{ $t({ en: 'Confirm Use', zh: '确认使用' }) }}
+            </button>
+          </div>
+        </div>
+      </div>
+  
+      <!-- 错误提示弹窗组件 -->
+      <ErrorModal
+        v-model:visible="showErrorModal"
+        :error-type="errorType"
+        :error-message="errorMessage"
+        @close="closeErrorModal"
+        @retry="retryGeneration"
+      />
+    </div>
+  </template>
+  
+  <script setup lang="ts">
+import { ref, watch } from 'vue'
+import { generateImage, generateSvgDirect } from '@/apis/picgc'
+import ErrorModal from './error.vue'
+  
+  // Props
+  interface Props {
+    visible: boolean
+  }
+  
+  const props = withDefaults(defineProps<Props>(), {
+    visible: false
+  })
+  
+  // Emits
+  const emit = defineEmits<{
+    'update:visible': [value: boolean]
+    'confirm': [data: { 
+      model: string; 
+      prompt: string; 
+      url?: string; 
+      svgContent?: string;
+    }]
+    'cancel': []
+  }>()
+  
+  // 响应式数据
+  const selectedModel = ref<'png' | 'svg'>('png')
+  const prompt = ref('')
+  const previewUrl = ref('')
+  const isGenerating = ref(false)
+  const imageSize = ref('')
+  
+  // 存储SVG原始代码
+  const svgRawContent = ref('')
+  
+  // 错误处理相关状态
+  const showErrorModal = ref(false)
+  const errorMessage = ref('')
+  const errorType = ref('')
+  
+  // 方法
+  const handleGenerate = async () => {
+    if (!prompt.value.trim()) return
+    
+    isGenerating.value = true
+    previewUrl.value = ''
+    
+    try {
+  
+      await handleRealGenerate()
+      // previewUrl 在 handleRealGenerate 中已经设置
+      // imageSize 在 handleRealGenerate 中已经设置
+      
+    } catch (error) {
+      console.error('failed to generate image1:', error)
+    } finally {
+      isGenerating.value = false
+    }
+  }
+  
+  const handleConfirm = () => {
+    if (!previewUrl.value) return
+    
+    const confirmData: any = {
+      model: selectedModel.value,
+      prompt: prompt.value
+    }
+    
+    if (selectedModel.value === 'svg') {
+      // SVG模式：传递原始SVG代码
+      confirmData.svgContent = svgRawContent.value
+      confirmData.url = previewUrl.value // 用于预览的blob URL
+      // console.log('SVG确认数据:', { svgContent: svgRawContent.value })
+    } else {
+      // PNG模式：传递图片URL
+      confirmData.url = previewUrl.value
+      // console.log('PNG确认数据:', { url: previewUrl.value })
+    }
+    
+    emit('confirm', confirmData)
+    
+    handleCancel()
+  }
+  
+  const handleCancel = () => {
+    emit('update:visible', false)
+    emit('cancel')
+    
+    // 重置状态
+    setTimeout(() => {
+      prompt.value = ''
+      previewUrl.value = ''
+      isGenerating.value = false
+      selectedModel.value = 'png'
+    }, 300)
+  }
+  
+  const handleImageLoad = () => {
+  //   console.log('图片加载成功')
+  }
+  
+  const handleImageError = () => {
+    console.error('failed to load image')
+    previewUrl.value = ''
+  }
+  
+  // 错误处理方法
+  const showError = (message: string, type: string = 'default') => {
+    errorMessage.value = message
+    errorType.value = type
+    showErrorModal.value = true
+  }
+  
+  const closeErrorModal = () => {
+    showErrorModal.value = false
+    errorMessage.value = ''
+    errorType.value = ''
+  }
+  
+  const retryGeneration = () => {
+    closeErrorModal()
+    handleGenerate()
+  }
+  
+  
+  // 实际的AI图片生成函数
+  const handleRealGenerate = async () => {
+    if (!prompt.value.trim()) return
+    
+    isGenerating.value = true
+    previewUrl.value = ''
+    svgRawContent.value = ''
+    
+    try {
+      if (selectedModel.value === 'svg') {
+        const svgResult = await generateSvgDirect(prompt.value, {
+          style: 'FLAT_VECTOR' // developing
+        })
+        
+        // 直接获得SVG内容
+        svgRawContent.value = svgResult.svgContent
+        
+        // 创建blob URL用于预览 - 参照mock方式处理
+        const blob = new Blob([svgResult.svgContent], { type: 'image/svg+xml' })
+        previewUrl.value = URL.createObjectURL(blob)
+        
+        imageSize.value = `${svgResult.width}x${svgResult.height} (矢量图)`
+      } else {
+        // PNG mod
+        const result = await generateImage(prompt.value, {
+          style: 'FLAT_VECTOR' // developing
+        })
+        
+        previewUrl.value = result.png_url
+        imageSize.value = `${result.width}x${result.height}`
+      }
+      
+    } catch (error) {
+      console.error('failed to generate image:', error)
+      
+      let errorType = 'default'
+      let errorKey = 'default'
+      
+      if (error instanceof Error) {
+        if (error.message.includes('timeout')) {
+          errorType = 'timeout'
+          errorKey = 'timeout'
+        } else if (error.message.includes('network')) {
+          errorType = 'network' 
+          errorKey = 'network'
+        } else if (error.message.includes('400')) {
+          errorType = 'params'
+          errorKey = 'params'
+        } else if (error.message.includes('500')) {
+          errorType = 'server'
+          errorKey = 'server'
+        }
+      }
+      if (String(error).includes('fetch') || String(error).includes('net')) {
+        errorType = 'network'
+        errorKey = 'network'
+      }
+      
+      // Use a simple fallback message for script context, real i18n will be handled in template
+      const fallbackMessage = '图片生成失败，请稍后重试'
+      showError(fallbackMessage, errorType)
+      
+    } finally {
+      isGenerating.value = false
+    }
+  }
+  
+  // 监听visible变化
+  watch(() => props.visible, (newVal) => {
+    if (!newVal) {
+      // 弹窗关闭时重置状态
+      setTimeout(() => {
+        prompt.value = ''
+        previewUrl.value = ''
+        isGenerating.value = false
+      }, 300)
+    }
+  })
+  </script>
+  
+  <style scoped>
+  .ai-generate-dialog {
+    position: relative;
+    z-index: 1000;
+  }
+  
+  .dialog-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+  }
+  
+  .dialog-content {
+    background: white;
+    border-radius: 12px;
+    width: 90%;
+    max-width: 900px;
+    max-height: 90vh;
+    overflow-y: auto;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
+    animation: dialogSlideIn 0.3s ease-out;
+  }
+  
+  @keyframes dialogSlideIn {
+    from {
+      opacity: 0;
+      transform: translateY(-20px) scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+  
+  .dialog-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20px 24px;
+    border-bottom: 1px solid #e5e7eb;
+  }
+  
+  .dialog-title {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+    color: #1f2937;
+  }
+  
+  .close-btn {
+    background: none;
+    border: none;
+    font-size: 24px;
+    color: #6b7280;
+    cursor: pointer;
+    padding: 0;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 6px;
+    transition: all 0.2s;
+  }
+  
+  .close-btn:hover {
+    background: #f3f4f6;
+    color: #374151;
+  }
+  
+  .dialog-body {
+    padding: 24px;
+  }
+  
+  .dialog-content-wrapper {
+    display: flex;
+    gap: 24px;
+    min-height: 400px;
+  }
+  
+  .form-section {
+    flex: 1;
+    min-width: 0;
+  }
+  
+  .preview-section {
+    flex: 1;
+    min-width: 300px;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .form-group {
+    margin-bottom: 24px;
+  }
+  
+  .form-label {
+    display: block;
+    margin-bottom: 8px;
+    font-weight: 500;
+    color: #374151;
+    font-size: 14px;
+  }
+  
+  .model-selector {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 12px;
+  }
+  
+  .model-option {
+    border: 2px solid #e5e7eb;
+    border-radius: 8px;
+    padding: 16px;
+    cursor: pointer;
+    transition: all 0.2s;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+  
+  .model-option:hover {
+    border-color: #d1d5db;
+    background: #f9fafb;
+  }
+  
+  .model-option.active {
+    border-color: #3b82f6;
+    background: #eff6ff;
+  }
+  
+  .model-icon {
+    font-size: 24px;
+    flex-shrink: 0;
+  }
+  
+  .model-info {
+    flex: 1;
+  }
+  
+  .model-name {
+    font-weight: 500;
+    color: #1f2937;
+    margin-bottom: 4px;
+  }
+  
+  .model-desc {
+    font-size: 12px;
+    color: #6b7280;
+  }
+  
+  .prompt-input {
+    width: 100%;
+    border: 2px solid #e5e7eb;
+    border-radius: 8px;
+    padding: 12px;
+    font-size: 14px;
+    line-height: 1.5;
+    resize: vertical;
+    min-height: 100px;
+    transition: border-color 0.2s;
+  }
+  
+  .prompt-input:focus {
+    outline: none;
+    border-color: #3b82f6;
+  }
+  
+  .input-hint {
+    margin-top: 6px;
+    font-size: 12px;
+    color: #6b7280;
+  }
+  
+  .generate-btn {
+    width: 100%;
+    background: #3b82f6;
+    color: white;
+    border: none;
+    border-radius: 8px;
+    padding: 12px 24px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+  }
+  
+  .generate-btn:hover:not(:disabled) {
+    background: #2563eb;
+  }
+  
+  .generate-btn:disabled {
+    background: #d1d5db;
+    cursor: not-allowed;
+  }
+  
+  .preview-section .form-label {
+    margin-bottom: 12px;
+  }
+  
+  .preview-container {
+    border: 2px dashed #d1d5db;
+    border-radius: 8px;
+    padding: 24px;
+    text-align: center;
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 300px;
+  }
+  
+  .preview-placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+    color: #9ca3af;
+  }
+  
+  .placeholder-icon {
+    font-size: 48px;
+    opacity: 0.5;
+  }
+  
+  .placeholder-text {
+    font-size: 14px;
+    color: #6b7280;
+  }
+  
+  .preview-loading {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+    color: #6b7280;
+  }
+  
+  .loading-text {
+    font-size: 14px;
+  }
+  
+  .preview-image-wrapper {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+    width: 100%;
+  }
+  
+  .preview-image {
+    max-width: 100%;
+    max-height: 250px;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    object-fit: contain;
+  }
+  
+  .preview-info {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+  }
+  
+  .model-tag {
+    background: #3b82f6;
+    color: white;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: 500;
+  }
+  
+  .size-info {
+    color: #6b7280;
+    font-size: 12px;
+  }
+  
+  .loading-spinner {
+    width: 16px;
+    height: 16px;
+    border: 2px solid #e5e7eb;
+    border-top: 2px solid #3b82f6;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+  }
+  
+  .loading-spinner.large {
+    width: 32px;
+    height: 32px;
+    border-width: 3px;
+  }
+  
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  
+  .dialog-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+    padding: 20px 24px;
+    border-top: 1px solid #e5e7eb;
+    background: #f9fafb;
+    border-radius: 0 0 12px 12px;
+  }
+  
+  .btn {
+    padding: 10px 20px;
+    border-radius: 6px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+    border: none;
+  }
+  
+  .btn-secondary {
+    background: #f3f4f6;
+    color: #374151;
+  }
+  
+  .btn-secondary:hover {
+    background: #e5e7eb;
+  }
+  
+  .btn-primary {
+    background: #3b82f6;
+    color: white;
+  }
+  
+  .btn-primary:hover:not(:disabled) {
+    background: #2563eb;
+  }
+  
+  .btn-primary:disabled {
+    background: #d1d5db;
+    cursor: not-allowed;
+  }
+  
+
+  
+  /* 响应式设计 */
+  @media (max-width: 768px) {
+    .dialog-content {
+      max-width: 95%;
+      margin: 20px;
+    }
+    
+    .dialog-content-wrapper {
+      flex-direction: column;
+      min-height: auto;
+    }
+    
+    .preview-section {
+      min-width: auto;
+      margin-top: 20px;
+    }
+    
+    .preview-container {
+      min-height: 200px;
+    }
+  
+
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/spx-gui/src/components/editor/common/painter/painter.vue b/spx-gui/src/components/editor/common/painter/painter.vue
index 062f316b4..ecaf73d75 100644
--- a/spx-gui/src/components/editor/common/painter/painter.vue
+++ b/spx-gui/src/components/editor/common/painter/painter.vue
@@ -115,7 +115,7 @@ import { ref, onMounted, onUnmounted, watch } from 'vue'
 import paper from 'paper'
 import DrawLine from './components/draw_line.vue'
 import DrawBrush from './components/draw_brush.vue'
-import AiGenerate from './components/ai_generate.vue'
+import AiGenerate from './components/aigc/generator.vue'
 import { useImageLoader } from './utils/loader.vue'
 
 // 工具类型

From df7ceabaffa7210610f57f48720164a609592020 Mon Sep 17 00:00:00 2001
From: AvenJi0320 <pychi0320@gmail.com>
Date: Fri, 15 Aug 2025 13:44:52 +0800
Subject: [PATCH 21/49] refactor(painter):extract reshape tool into standalone
 component

---
 .../common/painter/components/reshape.vue     | 397 ++++++++++
 .../editor/common/painter/painter.vue         | 695 ++++++------------
 2 files changed, 623 insertions(+), 469 deletions(-)

diff --git a/spx-gui/src/components/editor/common/painter/components/reshape.vue b/spx-gui/src/components/editor/common/painter/components/reshape.vue
index e69de29bb..01b7dfbdd 100644
--- a/spx-gui/src/components/editor/common/painter/components/reshape.vue
+++ b/spx-gui/src/components/editor/common/painter/components/reshape.vue
@@ -0,0 +1,397 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import paper from 'paper'
+
+// 接口定义
+interface ExtendedItem extends paper.Item {
+  isControlPoint?: boolean
+  isTemporaryControlPoint?: boolean
+  segmentIndex?: number
+  parentPath?: paper.Path
+}
+
+// Props定义
+const props = defineProps<{
+  isActive: boolean
+  allPaths: paper.Path[]
+}>()
+
+// Emits定义
+const emit = defineEmits<{
+  (e: 'paths-update', paths: paper.Path[]): void
+  (e: 'svg-export'): void
+}>()
+
+// 状态管理
+const isDragging = ref<boolean>(false)
+const selectedPoint = ref<ExtendedItem | null>(null)
+const controlPoints = ref<ExtendedItem[]>([])
+const mouseDownPath = ref<paper.Path | null>(null)
+const mouseDownPos = ref<paper.Point | null>(null)
+
+// 选中路径（独占选择）
+const selectPathExclusive = (path: paper.Path | null): void => {
+  props.allPaths.forEach((p: paper.Path) => {
+    p.selected = false
+  })
+  if (path) {
+    path.selected = true
+  }
+}
+
+// 创建控制点
+const createControlPoint = (position: paper.Point): ExtendedItem => {
+  const point = new paper.Path.Circle({
+    center: position,
+    radius: 8,
+    fillColor: '#ff4444',
+    strokeColor: '#cc0000',
+    strokeWidth: 2
+  }) as ExtendedItem
+  
+  point.isControlPoint = true
+  
+  // 添加悬停效果
+  point.onMouseEnter = () => {
+    point.fillColor = new paper.Color('#ff6666')
+    point.scale(1.25)
+    paper.view.update()
+  }
+  
+  point.onMouseLeave = () => {
+    point.fillColor = new paper.Color('#ff4444')
+    point.scale(0.8)
+    paper.view.update()
+  }
+  
+  return point
+}
+
+// 显示路径的控制点
+const showControlPoints = (path: paper.Path): void => {
+  hideControlPoints()
+  selectPathExclusive(path)
+  
+  if (path && path.segments) {
+    path.segments.forEach((segment: paper.Segment, index: number) => {
+      const controlPoint = createControlPoint(segment.point)
+      controlPoint.segmentIndex = index
+      controlPoint.parentPath = path
+      controlPoints.value.push(controlPoint)
+    })
+  } else if (path instanceof paper.CompoundPath) {
+    path.children.forEach((child: paper.Item) => {
+      if (child instanceof paper.Path && child.segments) {
+        child.segments.forEach((segment: paper.Segment, segIndex: number) => {
+          const controlPoint = createControlPoint(segment.point)
+          controlPoint.segmentIndex = segIndex
+          controlPoint.parentPath = child as paper.Path
+          controlPoints.value.push(controlPoint)
+        })
+      }
+    })
+  }
+}
+
+// 隐藏控制点
+const hideControlPoints = (): void => {
+  controlPoints.value.forEach((point: ExtendedItem) => {
+    if (point && point.parent) {
+      point.remove()
+    }
+  })
+  controlPoints.value = []
+  props.allPaths.forEach((p: paper.Path) => {
+    p.selected = false
+  })
+  if (paper.project) {
+    paper.project.deselectAll()
+  }
+  paper.view.update()
+}
+
+// 检测点击的路径
+const getPathAtPoint = (point: paper.Point): paper.Path | null => {
+  const hitResult = paper.project.hitTest(point, {
+    segments: false,
+    stroke: true,
+    fill: true,
+    tolerance: 15
+  })
+  
+  if (hitResult && hitResult.item && !(hitResult.item as ExtendedItem).isControlPoint) {
+    let targetItem = hitResult.item
+    
+    while (targetItem.parent && targetItem.parent !== paper.project.activeLayer) {
+      targetItem = targetItem.parent
+    }
+    
+    const pathInArray = props.allPaths.find(path => path === targetItem || path === hitResult.item)
+    if (pathInArray) {
+      return pathInArray
+    }
+    
+    if (hitResult.item instanceof paper.Path || hitResult.item instanceof paper.CompoundPath) {
+      return hitResult.item as paper.Path
+    }
+  }
+  return null
+}
+
+// 检测点击的控制点
+const getControlPointAtPoint = (point: paper.Point): ExtendedItem | null => {
+  const hitResult = paper.project.hitTest(point, {
+    segments: false,
+    stroke: false,
+    fill: true,
+    tolerance: 15
+  })
+  
+  if (hitResult && hitResult.item && (hitResult.item as ExtendedItem).isControlPoint) {
+    return hitResult.item as ExtendedItem
+  }
+  return null
+}
+
+// 局部平滑函数
+const smoothLocalSegments = (path: paper.Path, segmentIndex: number): void => {
+  const segments = path.segments
+  const currentSegment = segments[segmentIndex]
+  
+  if (!currentSegment) return
+  
+  const prevIndex = Math.max(0, segmentIndex - 1)
+  const nextIndex = Math.min(segments.length - 1, segmentIndex + 1)
+  
+  if (segmentIndex === 0 || segmentIndex === segments.length - 1) {
+    if (segmentIndex === 0 && segments.length > 1) {
+      const nextSeg = segments[1]
+      calculateLocalHandles(currentSegment, nextSeg, null)
+    } else if (segmentIndex === segments.length - 1 && segments.length > 1) {
+      const prevSeg = segments[segments.length - 2]
+      calculateLocalHandles(currentSegment, null, prevSeg)
+    }
+  } else {
+    const prevSeg = segments[prevIndex]
+    const nextSeg = segments[nextIndex]
+    calculateLocalHandles(currentSegment, nextSeg, prevSeg)
+  }
+}
+
+// 计算局部贝塞尔曲线控制点
+const calculateLocalHandles = (
+  currentSeg: paper.Segment, 
+  nextSeg: paper.Segment | null, 
+  prevSeg: paper.Segment | null
+): void => {
+  currentSeg.clearHandles()
+  
+  if (nextSeg && prevSeg) {
+    const vector1 = currentSeg.point.subtract(prevSeg.point)
+    const vector2 = nextSeg.point.subtract(currentSeg.point)
+    
+    const angle1 = vector1.angle
+    const angle2 = vector2.angle
+    const avgAngle = (angle1 + angle2) / 2
+    
+    const length1 = vector1.length * 0.3
+    const length2 = vector2.length * 0.3
+    
+    currentSeg.handleIn = new paper.Point({
+      angle: avgAngle + 180,
+      length: length1
+    })
+    currentSeg.handleOut = new paper.Point({
+      angle: avgAngle,
+      length: length2
+    })
+  } else if (nextSeg) {
+    const vector = nextSeg.point.subtract(currentSeg.point)
+    currentSeg.handleOut = vector.multiply(0.3)
+  } else if (prevSeg) {
+    const vector = currentSeg.point.subtract(prevSeg.point)
+    currentSeg.handleIn = vector.multiply(0.3)
+  }
+}
+
+// 在路径上添加新的控制点
+const addControlPointOnPath = (path: paper.Path, clickPoint: paper.Point): ExtendedItem | null => {
+  const location = path.getNearestLocation(clickPoint)
+  if (location) {
+    const insertIndex = location.index + 1
+    path.insert(insertIndex, location.point)
+
+    smoothLocalSegments(path, insertIndex)
+
+    showControlPoints(path)
+    
+    const created = controlPoints.value.find((p: ExtendedItem) => p.parentPath === path && p.segmentIndex === insertIndex) || null
+    paper.view.update()
+    return created
+  }
+  return null
+}
+
+// 处理鼠标按下
+const handleMouseDown = (point: paper.Point): void => {
+  if (!props.isActive) return
+  
+  const controlPoint = getControlPointAtPoint(point)
+  if (controlPoint) {
+    isDragging.value = true
+    selectedPoint.value = controlPoint
+    return
+  }
+
+  const clickedPath = getPathAtPoint(point)
+  if (clickedPath) {
+    mouseDownPath.value = clickedPath
+    mouseDownPos.value = point
+  } else {
+    mouseDownPath.value = null
+    mouseDownPos.value = null
+  }
+}
+
+// 处理鼠标移动
+const handleMouseMove = (point: paper.Point): void => {
+  if (!props.isActive) return
+  
+  if (
+    !isDragging.value &&
+    mouseDownPath.value &&
+    mouseDownPos.value
+  ) {
+    const dx = point.x - mouseDownPos.value.x
+    const dy = point.y - mouseDownPos.value.y
+    const dist2 = dx * dx + dy * dy
+    const threshold2 = 3 * 3
+    if (dist2 >= threshold2) {
+      const tempPoint = addControlPointOnPath(mouseDownPath.value, mouseDownPos.value)
+      if (tempPoint) {
+        tempPoint.isTemporaryControlPoint = true
+        isDragging.value = true
+        selectedPoint.value = tempPoint
+      }
+    }
+  }
+
+  if (isDragging.value && selectedPoint.value) {
+    selectedPoint.value.position = point
+    
+    if (selectedPoint.value.parentPath && selectedPoint.value.segmentIndex !== undefined) {
+      const segment = selectedPoint.value.parentPath.segments[selectedPoint.value.segmentIndex]
+      if (segment) {
+        segment.point = point
+        smoothLocalSegments(selectedPoint.value.parentPath, selectedPoint.value.segmentIndex)
+      }
+    }
+    
+    paper.view.update()
+  }
+}
+
+// 处理鼠标释放
+const handleMouseUp = (): void => {
+  if (!props.isActive) return
+  
+  const prevSelected = selectedPoint.value
+  const wasDragging = isDragging.value
+  
+  if (isDragging.value) {
+    isDragging.value = false
+    selectedPoint.value = null
+  }
+
+  const prevMouseDownPath = mouseDownPath.value
+  mouseDownPath.value = null
+  mouseDownPos.value = null
+
+  if (prevSelected && (prevSelected as ExtendedItem).isTemporaryControlPoint) {
+    if (prevSelected.parent) {
+      prevSelected.remove()
+    }
+    controlPoints.value = controlPoints.value.filter((p: ExtendedItem) => p !== prevSelected)
+
+    if (prevSelected.parentPath) {
+      showControlPoints(prevSelected.parentPath)
+    } else if (prevMouseDownPath) {
+      showControlPoints(prevMouseDownPath)
+    }
+    paper.view.update()
+  }
+
+  if (wasDragging) {
+    emit('svg-export')
+  }
+}
+
+// 处理点击
+const handleClick = (point: paper.Point): void => {
+  if (!props.isActive) return
+  
+  const controlPoint = getControlPointAtPoint(point)
+  if (controlPoint) {
+    return
+  }
+  
+  const clickedPath = getPathAtPoint(point)
+  if (clickedPath) {
+    showControlPoints(clickedPath)
+    paper.view.update()
+    return
+  }
+  
+  hideControlPoints()
+  paper.view.update()
+}
+
+// 删除选中的路径
+const deleteSelectedPath = (): void => {
+  if (controlPoints.value.length > 0 && controlPoints.value[0].parentPath) {
+    const pathToDelete = controlPoints.value[0].parentPath
+    pathToDelete.remove()
+    const updatedPaths = props.allPaths.filter((path: paper.Path) => path !== pathToDelete)
+    hideControlPoints()
+    paper.view.update()
+    emit('paths-update', updatedPaths)
+    emit('svg-export')
+  }
+}
+
+// 键盘事件处理
+const handleKeyDown = (event: KeyboardEvent): void => {
+  if (!props.isActive) return
+  
+  if (event.key === 'Escape') {
+    hideControlPoints()
+    paper.view.update()
+  } else if (event.key === 'Delete' || event.key === 'Backspace') {
+    deleteSelectedPath()
+  }
+}
+
+// 监听工具激活状态
+watch(() => props.isActive, (isActive) => {
+  if (!isActive) {
+    hideControlPoints()
+  }
+})
+
+// 暴露方法给父组件
+defineExpose({
+  hideControlPoints,
+  showControlPoints,
+  handleMouseDown,
+  handleMouseMove,
+  handleMouseUp,
+  handleClick,
+  handleKeyDown
+})
+</script>
+
+<template>
+  <div style="display: none;">
+    <!-- 这个组件不渲染任何视觉内容，只提供逻辑 -->
+  </div>
+</template>
\ No newline at end of file
diff --git a/spx-gui/src/components/editor/common/painter/painter.vue b/spx-gui/src/components/editor/common/painter/painter.vue
index ecaf73d75..620beb28a 100644
--- a/spx-gui/src/components/editor/common/painter/painter.vue
+++ b/spx-gui/src/components/editor/common/painter/painter.vue
@@ -99,6 +99,15 @@
         :is-active="currentTool === 'brush'"
         @path-created="handlePathCreated"
       />
+      
+      <!-- 变形工具组件 -->
+      <Reshape
+        ref="reshapeRef"
+        :is-active="currentTool === 'reshape'"
+        :all-paths="allPaths"
+        @paths-update="handlePathsUpdate"
+        @svg-export="exportSvgAndEmit"
+      />
     </div>
     
     <!-- AI生成弹窗 -->
@@ -115,24 +124,12 @@ import { ref, onMounted, onUnmounted, watch } from 'vue'
 import paper from 'paper'
 import DrawLine from './components/draw_line.vue'
 import DrawBrush from './components/draw_brush.vue'
+import Reshape from './components/reshape.vue'
 import AiGenerate from './components/aigc/generator.vue'
-import { useImageLoader } from './utils/loader.vue'
 
 // 工具类型
 type ToolType = 'line' | 'brush' | 'reshape'
 
-// TypeScript 接口定义
-interface ExtendedItem extends paper.Item {
-  isControlPoint?: boolean
-  isTemporaryControlPoint?: boolean
-  segmentIndex?: number
-  parentPath?: paper.Path
-}
-
-interface Point {
-  x: number
-  y: number
-}
 
 // 响应式变量
 const canvasRef = ref<HTMLCanvasElement | null>(null)
@@ -143,15 +140,9 @@ const canvasHeight = ref<number>(600)
 const currentTool = ref<ToolType | null>(null)
 const drawLineRef = ref<InstanceType<typeof DrawLine> | null>(null)
 const drawBrushRef = ref<InstanceType<typeof DrawBrush> | null>(null)
+const reshapeRef = ref<InstanceType<typeof Reshape> | null>(null)
 // 状态管理
-const isDragging = ref<boolean>(false)
-const selectedPoint = ref<ExtendedItem | null>(null)
 const allPaths = ref<paper.Path[]>([])
-const controlPoints = ref<ExtendedItem[]>([])
-const mouseDownPath = ref<paper.Path | null>(null)
-const mouseDownPos = ref<paper.Point | null>(null)
-const imgSrc = ref<string | null>(null)
-const imgLoading = ref<boolean>(true)
 
 // 存储背景图片的引用
 const backgroundImage = ref<paper.Raster | null>(null)
@@ -167,9 +158,6 @@ const selectedPathForRestore = ref<paper.Path | null>(null)
 // AI生成弹窗状态
 const aiDialogVisible = ref<boolean>(false)
 
-// 初始化图片加载器
-const { loadFileToCanvas, importSvgToCanvas, loadImageToCanvas, removeBackgroundImage } = useImageLoader()
-
 const props = defineProps<{
   imgSrc: string | null
   imgLoading: boolean
@@ -179,19 +167,86 @@ const emit = defineEmits<{
   (e: 'svg-change', svg: string): void
 }>()
 
-// 选中路径（独占选择）
-const selectPathExclusive = (path: paper.Path | null): void => {
-  allPaths.value.forEach((p: paper.Path) => {
-    p.selected = false
-  })
-  if (path) {
-    path.selected = true
+
+// 加载位图图片到画布（PNG/JPG/...）
+const loadImageToCanvas = (imageSrc: string): void => {
+  if (!paper.project) return
+  
+  // 如果已有背景图片，先移除
+  if (backgroundImage.value) {
+    backgroundImage.value.remove()
   }
-}
+  
+  // 创建新的光栅图像
+  const raster = new paper.Raster(imageSrc)
+  
+  raster.onLoad = () => {
+    raster.position = paper.view.center
+    
 
+    
+    // 将图片放到最底层，作为背景
+    raster.sendToBack()
+    
+    backgroundImage.value = raster
+    paper.view.update()
+  }
 
+  // raster.onMouseDown = (event: paper.MouseEvent) => {
+    // if (currentTool.value === 'reshape') {
+    //   selectPathExclusive(null) // 清除路径选择
+    //   raster.selected = true
+    //   paper.view.update()
+    // }
+  // }
+}
 
+// 根据 url 自动判断并导入到画布（优先解析为 SVG，其次作为位图 Raster）
+const loadFileToCanvas = async (imageSrc: string): Promise<void> => {
+  if (!paper.project) return
+  try {
+    const resp = await fetch(imageSrc)
+    // 先尝试从响应体的 blob.type 判断（对 blob: URL 更可靠）
+    let isSvg = false
+    let svgText: string | null = null
+    try {
+      const blob = await resp.clone().blob()
+      if (blob && typeof blob.type === 'string' && blob.type.includes('image/svg')) {
+        isSvg = true
+        svgText = await blob.text()
+      }
+    } catch {}
+
+    // 退化到 header 判断
+    if (!isSvg) {
+      const contentType = resp.headers.get('content-type') || ''
+      if (contentType.includes('image/svg')) {
+        isSvg = true
+        svgText = await resp.clone().text()
+      }
+    }
 
+    // 最后尝试直接将文本解析为 SVG（针对部分 blob: 无类型场景）
+    if (!isSvg) {
+      try {
+        const text = await resp.clone().text()
+        if (/^\s*<svg[\s\S]*<\/svg>\s*$/i.test(text)) {
+          isSvg = true
+          svgText = text
+        }
+      } catch {}
+    }
+
+    if (isSvg && svgText != null) {
+      importSvgToCanvas(svgText)
+    } else {
+      loadImageToCanvas(imageSrc)
+    }
+  } catch {
+    // 回退策略：按位图处理
+    loadImageToCanvas(imageSrc)
+  }
+}
 
 // 初始化 Paper.js
 const initPaper = (): void => {
@@ -227,7 +282,9 @@ const selectTool = (tool: ToolType): void => {
   }
   
   // 切换工具时总是隐藏控制点
-  hideControlPoints()
+  if (reshapeRef.value) {
+    reshapeRef.value.hideControlPoints()
+  }
 }
 
 // 处理直线创建
@@ -244,231 +301,14 @@ const handlePathCreated = (path: paper.Path): void => {
   exportSvgAndEmit()
 }
 
-// 创建控制点
-const createControlPoint = (position: paper.Point): ExtendedItem => {
-  const point = new paper.Path.Circle({
-    center: position,
-    radius: 8,
-    fillColor: '#ff4444',
-    strokeColor: '#cc0000',
-    strokeWidth: 2
-  }) as ExtendedItem
-  
-  point.isControlPoint = true
-  
-  // 添加悬停效果
-  point.onMouseEnter = () => {
-    point.fillColor = new paper.Color('#ff6666')
-    point.scale(1.25) // 放大控制点
-    paper.view.update()
-  }
-  
-  point.onMouseLeave = () => {
-    point.fillColor = new paper.Color('#ff4444')
-    point.scale(0.8) // 恢复原始大小
-    paper.view.update()
-  }
-  
-  return point
-}
-
-// 显示路径的控制点
-const showControlPoints = (path: paper.Path): void => {
-  hideControlPoints()
-  selectPathExclusive(path)
-  
-  // console.log('显示控制点 - 路径类型:', path.constructor.name, '路径:', path)
-  
-  if (path && path.segments) {
-    // console.log('路径段数:', path.segments.length)
-    path.segments.forEach((segment: paper.Segment, index: number) => {
-      const controlPoint = createControlPoint(segment.point)
-      controlPoint.segmentIndex = index
-      controlPoint.parentPath = path
-      controlPoints.value.push(controlPoint)
-    })
-  } else if (path instanceof paper.CompoundPath) {
-    // 处理复合路径
-    // console.log('处理复合路径')
-    path.children.forEach((child: paper.Item, childIndex: number) => {
-      if (child instanceof paper.Path && child.segments) {
-        child.segments.forEach((segment: paper.Segment, segIndex: number) => {
-          const controlPoint = createControlPoint(segment.point)
-          controlPoint.segmentIndex = segIndex
-          controlPoint.parentPath = child as paper.Path
-          controlPoints.value.push(controlPoint)
-        })
-      }
-    })
-  } else {
-    // console.warn('路径对象没有segments属性:', path)
-  }
-}
-
-// 隐藏控制点
-const hideControlPoints = (): void => {
-  controlPoints.value.forEach((point: ExtendedItem) => {
-    if (point && point.parent) {
-      point.remove()
-    }
-  })
-  controlPoints.value = []
-  // 同时取消路径高亮
-  allPaths.value.forEach((p: paper.Path) => {
-    p.selected = false
-  })
-  if (paper.project) {
-    paper.project.deselectAll()
-  }
-  // 强制更新视图
-  paper.view.update()
-}
-
-// 检测点击的路径
-const getPathAtPoint = (point: paper.Point): paper.Path | null => {
-  // 扩大检测范围，同时检测填充和描边
-  const hitResult = paper.project.hitTest(point, {
-    segments: false,
-    stroke: true,
-    fill: true, // 也检测填充区域
-    tolerance: 15 // 增加容差
-  })
-  
-  if (hitResult && hitResult.item && !(hitResult.item as ExtendedItem).isControlPoint) {
-    let targetItem = hitResult.item
-    
-    // 如果点击的是组内的对象，需要找到实际的路径对象
-    while (targetItem.parent && targetItem.parent !== paper.project.activeLayer) {
-      targetItem = targetItem.parent
-    }
-    
-    // 检查是否在allPaths数组中
-    const pathInArray = allPaths.value.find(path => path === targetItem || path === hitResult.item)
-    if (pathInArray) {
-      return pathInArray
-    }
-    
-    // 如果是Path或CompoundPath类型，返回原始点击的对象
-    if (hitResult.item instanceof paper.Path || hitResult.item instanceof paper.CompoundPath) {
-      return hitResult.item as paper.Path
-    }
-  }
-  return null
+// 处理路径更新（由reshape组件触发）
+const handlePathsUpdate = (paths: paper.Path[]): void => {
+  allPaths.value = paths
 }
 
-// 检测点击的控制点
-const getControlPointAtPoint = (point: paper.Point): ExtendedItem | null => {
-  const hitResult = paper.project.hitTest(point, {
-    segments: false,
-    stroke: false,
-    fill: true,
-    tolerance: 15
-  })
-  
-  if (hitResult && hitResult.item && (hitResult.item as ExtendedItem).isControlPoint) {
-    return hitResult.item as ExtendedItem
-  }
-  return null
-}
 
-// 局部平滑函数：只影响当前点及其相邻的线段
-const smoothLocalSegments = (path: paper.Path, segmentIndex: number): void => {
-  const segments = path.segments
-  const currentSegment = segments[segmentIndex]
-  
-  if (!currentSegment) return
-  
-  // 计算影响范围：前一个点到后一个点
-  const prevIndex = Math.max(0, segmentIndex - 1)
-  const nextIndex = Math.min(segments.length - 1, segmentIndex + 1)
-  
-  // 如果是端点，使用不同的处理方式
-  if (segmentIndex === 0 || segmentIndex === segments.length - 1) {
-    // 端点：只影响连接的那一段
-    if (segmentIndex === 0 && segments.length > 1) {
-      // 起始端点
-      const nextSeg = segments[1]
-      calculateLocalHandles(currentSegment, nextSeg, null)
-    } else if (segmentIndex === segments.length - 1 && segments.length > 1) {
-      // 结束端点
-      const prevSeg = segments[segments.length - 2]
-      calculateLocalHandles(currentSegment, null, prevSeg)
-    }
-  } else {
-    // 中间点：影响前后两段
-    const prevSeg = segments[prevIndex]
-    const nextSeg = segments[nextIndex]
-    calculateLocalHandles(currentSegment, nextSeg, prevSeg)
-  }
-}
-
-// 计算局部贝塞尔曲线控制点
-const calculateLocalHandles = (
-  currentSeg: paper.Segment, 
-  nextSeg: paper.Segment | null, 
-  prevSeg: paper.Segment | null
-): void => {
-  // 清除现有的控制点
-  currentSeg.clearHandles()
-  
-  if (nextSeg && prevSeg) {
-    // 中间点：计算平滑的控制点
-    const vector1 = currentSeg.point.subtract(prevSeg.point)
-    const vector2 = nextSeg.point.subtract(currentSeg.point)
-    
-    // 计算控制点方向和长度
-    const angle1 = vector1.angle
-    const angle2 = vector2.angle
-    const avgAngle = (angle1 + angle2) / 2
-    
-    const length1 = vector1.length * 0.3
-    const length2 = vector2.length * 0.3
-    
-    // 设置控制点
-    currentSeg.handleIn = new paper.Point({
-      angle: avgAngle + 180,
-      length: length1
-    })
-    currentSeg.handleOut = new paper.Point({
-      angle: avgAngle,
-      length: length2
-    })
-  } else if (nextSeg) {
-    // 起始点：只设置出控制点
-    const vector = nextSeg.point.subtract(currentSeg.point)
-    currentSeg.handleOut = vector.multiply(0.3)
-  } else if (prevSeg) {
-    // 结束点：只设置入控制点
-    const vector = currentSeg.point.subtract(prevSeg.point)
-    currentSeg.handleIn = vector.multiply(0.3)
-  }
-}
-
-// 在路径上添加新的控制点，并返回对应的控制点实例
-const addControlPointOnPath = (path: paper.Path, clickPoint: paper.Point): ExtendedItem | null => {
-  const location = path.getNearestLocation(clickPoint)
-  if (location) {
-    // 在最近的位置分割路径，创建新的段点
-    const insertIndex = location.index + 1
-    path.insert(insertIndex, location.point)
-
-    // 局部平滑新添加的点及其相邻区域
-    smoothLocalSegments(path, insertIndex)
-
-    // 重新显示控制点
-    showControlPoints(path)
-    
-    // 返回新创建段点对应的控制点实例
-    const created = controlPoints.value.find((p: ExtendedItem) => p.parentPath === path && p.segmentIndex === insertIndex) || null
-    paper.view.update()
-    return created
-  }
-  return null
-}
-
-// 鼠标按下事件（变形-用于开始拖拽控制点）
+// 鼠标按下事件
 const handleMouseDown = (event: MouseEvent): void => {
-  // console.log('handleMouseDown')
   const rect = canvasRef.value?.getBoundingClientRect()
   if (!rect) return
   
@@ -483,25 +323,11 @@ const handleMouseDown = (event: MouseEvent): void => {
     return
   }
   
-  if (currentTool.value !== 'reshape') return
-  
-  // 检查是否点击了控制点
-  const controlPoint = getControlPointAtPoint(point)
-  if (controlPoint) {
-    isDragging.value = true
-    selectedPoint.value = controlPoint
+  // 处理变形工具
+  if (currentTool.value === 'reshape' && reshapeRef.value) {
+    reshapeRef.value.handleMouseDown(point)
     return
   }
-
-  // 若未点到控制点，则检测是否按在某个路径上（不立即创建临时点，等拖拽阈值触发）
-  const clickedPath = getPathAtPoint(point)
-  if (clickedPath) {
-    mouseDownPath.value = clickedPath
-    mouseDownPos.value = point
-  } else {
-    mouseDownPath.value = null
-    mouseDownPos.value = null
-  }
 }
 
 // 画布点击事件
@@ -520,25 +346,10 @@ const handleCanvasClick = (event: MouseEvent): void => {
       drawLineRef.value.handleCanvasClick({ x: point.x, y: point.y })
     }
   } else if (currentTool.value === 'reshape') {
-    // 检查是否点击了控制点（优先级最高）
-    const controlPoint = getControlPointAtPoint(point)
-    if (controlPoint) {
-      // 不在这里设置拖拽状态，由 mousedown 处理
-      return
-    }
-    
-    // 检查是否点击了现有路径
-    const clickedPath = getPathAtPoint(point)
-    if (clickedPath) {
-      // 仅选中并显示端点（不新增控制点）
-      showControlPoints(clickedPath)
-      paper.view.update()
-      return
+    // 委托给 Reshape 组件处理
+    if (reshapeRef.value) {
+      reshapeRef.value.handleClick(point)
     }
-    
-    // 点击空白区域，隐藏控制点
-    hideControlPoints()
-    paper.view.update()
   }
 }
 
@@ -562,43 +373,9 @@ const handleMouseMove = (event: MouseEvent): void => {
     drawBrushRef.value.handleMouseDrag({ x: point.x, y: point.y })
   }
   
-  // 若按在路径上且尚未开始拖拽，当移动超过阈值时，创建临时控制点并进入拖拽
-  if (
-    currentTool.value === 'reshape' &&
-    !isDragging.value &&
-    mouseDownPath.value &&
-    mouseDownPos.value
-  ) {
-    const dx = point.x - mouseDownPos.value.x
-    const dy = point.y - mouseDownPos.value.y
-    const dist2 = dx * dx + dy * dy
-    const threshold2 = 3 * 3
-    if (dist2 >= threshold2) {
-      const tempPoint = addControlPointOnPath(mouseDownPath.value, mouseDownPos.value)
-      if (tempPoint) {
-        tempPoint.isTemporaryControlPoint = true
-        isDragging.value = true
-        selectedPoint.value = tempPoint
-      }
-    }
-  }
-
-  // 拖拽控制点
-  if (isDragging.value && selectedPoint.value) {
-    selectedPoint.value.position = point
-    
-    // 更新对应的路径段点
-    if (selectedPoint.value.parentPath && selectedPoint.value.segmentIndex !== undefined) {
-      const segment = selectedPoint.value.parentPath.segments[selectedPoint.value.segmentIndex]
-      if (segment) {
-        segment.point = point
-        
-        // 局部平滑：只影响相邻的线段
-        smoothLocalSegments(selectedPoint.value.parentPath, selectedPoint.value.segmentIndex)
-      }
-    }
-    
-    paper.view.update()
+  // 委托给 Reshape 组件处理拖拽
+  if (currentTool.value === 'reshape' && reshapeRef.value) {
+    reshapeRef.value.handleMouseMove(point)
   }
 }
 
@@ -619,100 +396,34 @@ const handleCanvasMouseUp = (event: MouseEvent): void => {
   }
 }
 
-// 鼠标释放事件（用于结束拖拽）
+// 全局鼠标释放事件（用于reshape工具）
 const handleMouseUp = (): void => {
-  const prevSelected = selectedPoint.value
-  const wasDragging = isDragging.value
-  if (isDragging.value) {
-    isDragging.value = false
-    selectedPoint.value = null
-  }
-
-  // 清理按下状态
-  const prevMouseDownPath = mouseDownPath.value
-  mouseDownPath.value = null
-  mouseDownPos.value = null
-
-  // 若为临时控制点，则在松开时删除该控制点，并刷新端点显示
-  if (prevSelected && (prevSelected as ExtendedItem).isTemporaryControlPoint) {
-    if (prevSelected.parent) {
-      prevSelected.remove()
-    }
-    controlPoints.value = controlPoints.value.filter((p: ExtendedItem) => p !== prevSelected)
-
-    // 重新显示该路径的所有端点（包含新插入的段点）
-    if (prevSelected.parentPath) {
-      showControlPoints(prevSelected.parentPath)
-    } else if (prevMouseDownPath) {
-      showControlPoints(prevMouseDownPath)
-    }
-    paper.view.update()
-  }
-
-  if (wasDragging) {
-    // props 驱动的导入不触发导出，避免循环
-    if (!isImportingFromProps.value) exportSvgAndEmit()
-    else {
-      isImportingFromProps.value = false
-    }
+  if (currentTool.value === 'reshape' && reshapeRef.value) {
+    reshapeRef.value.handleMouseUp()
   }
 }
 
+
 // 显示AI生成弹窗
 const showAiDialog = (): void => {
   aiDialogVisible.value = true
 }
 
 // 处理AI生成确认
-const handleAiConfirm = async (data: { 
+const handleAiConfirm = (data: { 
   model: string; 
   prompt: string; 
   url?: string; 
   svgContent?: string;
-}): Promise<void> => {
+}): void => {
   // console.log('AI生成确认:', data)
   
-  try {
-    if (data.model === 'svg' && data.svgContent) {
-      // 处理SVG导入
-      await importSvgToCanvas(data.svgContent, {
-        onPathCreated: (path: paper.Path) => {
-          // 添加到可编辑路径列表
-          allPaths.value.push(path)
-          
-          // 添加鼠标事件处理
-          path.onMouseDown = (event: paper.MouseEvent) => {
-            if (currentTool.value === 'reshape') {
-              showControlPoints(path)
-              paper.view.update()
-            }
-          }
-        },
-        onLoadComplete: () => {
-          // 导入来源于 props 时不导出，避免循环
-          if (!isImportingFromProps.value) exportSvgAndEmit()
-          else isImportingFromProps.value = false
-        },
-        onError: (error) => {
-          console.error('Failed to import SVG:', error)
-        }
-      })
-    } else if (data.model === 'png' && data.url) {
-      // 处理PNG图片导入
-      await loadImageToCanvas(data.url, {
-        onImageLoaded: (raster: paper.Raster) => {
-          backgroundImage.value = raster
-        },
-        onLoadComplete: () => {
-          exportSvgAndEmit()
-        },
-        onError: (error) => {
-          console.error('Failed to load image:', error)
-        }
-      })
-    }
-  } catch (error) {
-    console.error('AI生成处理失败:', error)
+  if (data.model === 'svg' && data.svgContent) {
+    // 处理SVG导入
+    importSvgToCanvas(data.svgContent)
+  } else if (data.model === 'png' && data.url) {
+    // 处理PNG图片导入
+    importImageToCanvas(data.url)
   }
   
   aiDialogVisible.value = false
@@ -724,16 +435,102 @@ const handleAiCancel = (): void => {
   aiDialogVisible.value = false
 }
 
+// 导入PNG图片到画布
+const importImageToCanvas = (imageUrl: string): void => {
+  if (!paper.project) return
+  
+  const raster = new paper.Raster(imageUrl)
+  
+  raster.onLoad = () => {
+    raster.position = paper.view.center
+    
+    // 保持原始尺寸，不进行自动缩放
+    // 如果需要缩放，用户可以手动调整
+    
+    // 添加点击事件处理
+    // raster.onMouseDown = (event: paper.MouseEvent) => {
+    //   if (currentTool.value === 'reshape') {
+    //     selectPathExclusive(null) // 清除路径选择
+    //     raster.selected = true
+    //     paper.view.update()
+    //   }
+    // }
 
+    paper.view.update()
+    // console.log('PNG图片已导入到画布')
 
+    exportSvgAndEmit()
+  }
+  
+  raster.onError = () => {
+    console.error('failed to load image')
+  }
+}
 
-
-
-
+// 导入SVG到画布并转换为可编辑的路径
+const importSvgToCanvas = (svgContent: string): void => {
+  if (!paper.project) return
+  
+  try {
+    // 创建一个临时的SVG元素来解析SVG内容
+    const parser = new DOMParser()
+    const svgDoc = parser.parseFromString(svgContent, 'image/svg+xml')
+    const svgElement = svgDoc.documentElement
+    
+    // 检查是否解析成功
+    if (svgElement.nodeName !== 'svg') {
+      console.error('invalid svg content')
+      return
+    }
+    
+    // 使用Paper.js导入SVG
+    const importedItem = paper.project.importSVG(svgElement as unknown as SVGElement)
+    
+    if (importedItem) {
+      importedItem.position = paper.view.center
+      
+      
+      // 收集所有可编辑的路径
+      const collectPaths = (item: paper.Item): void => {
+        if (item instanceof paper.Path && item.segments && item.segments.length > 0) {
+          // 添加到可编辑路径列表
+          allPaths.value.push(item)
+          
+          // 添加鼠标事件处理
+          item.onMouseDown = () => {
+            if (currentTool.value === 'reshape' && reshapeRef.value) {
+              reshapeRef.value.showControlPoints(item)
+              paper.view.update()
+            }
+          }
+        } else if (item instanceof paper.Group || item instanceof paper.CompoundPath) {
+          // 递归处理子项
+          if (item.children) {
+            item.children.forEach(child => collectPaths(child))
+          }
+        }
+      }
+      
+      // 收集导入的所有路径
+      collectPaths(importedItem)
+      
+      // 更新视图
+      paper.view.update()
+      // console.log(`SVG已导入到画布，共${allPaths.value.length - (allPaths.value.length - countNewPaths(importedItem))}条可编辑路径`)
+      // 导入来源于 props 时不导出，避免循环
+      if (!isImportingFromProps.value) exportSvgAndEmit()
+      else isImportingFromProps.value = false
+    }
+  } catch (error) {
+    console.error('failed to import svg:', error)
+  }
+}
 
 // 清空画布
 const clearCanvas = (): void => {
-  hideControlPoints()
+  if (reshapeRef.value) {
+    reshapeRef.value.hideControlPoints()
+  }
   allPaths.value.forEach((path: paper.Path) => {
     if (path && path.parent) {
       path.remove()
@@ -793,52 +590,20 @@ watch(
       })
       backgroundRect.value = background
       allPaths.value = []
-      
-      // 如果已有背景图片，先移除
-      if (backgroundImage.value) {
-        removeBackgroundImage(backgroundImage.value)
-        backgroundImage.value = null
-      }
-      
+      backgroundImage.value = null
       paper.view.update()
     }
     
-    try {
-      // 加载新内容
-      await loadFileToCanvas(newImgSrc, {
-        onPathCreated: (path: paper.Path) => {
-          // 添加到可编辑路径列表
-          allPaths.value.push(path)
-          
-          // 添加鼠标事件处理
-          path.onMouseDown = (event: paper.MouseEvent) => {
-            if (currentTool.value === 'reshape') {
-              showControlPoints(path)
-              paper.view.update()
-            }
-          }
-        },
-        onImageLoaded: (raster: paper.Raster) => {
-          backgroundImage.value = raster
-        },
-        onLoadComplete: () => {
-          // 导入完成后清理状态，不自动恢复控制点显示
-          // 让用户主动点击路径来显示控制点，避免干扰绘制体验
-          setTimeout(() => {
-            selectedPathForRestore.value = null
-            isImportingFromProps.value = false
-            isFirstMount.value = false // 标记第一次挂载已完成
-          }, 200)
-        },
-        onError: (error) => {
-          console.error('Failed to load file:', error)
-          isImportingFromProps.value = false
-        }
-      })
-    } catch (error) {
-      console.error('Props图片加载失败:', error)
+    // 加载新内容
+    await loadFileToCanvas(newImgSrc)
+    
+    // 导入完成后清理状态，不自动恢复控制点显示
+    // 让用户主动点击路径来显示控制点，避免干扰绘制体验
+    setTimeout(() => {
+      selectedPathForRestore.value = null
       isImportingFromProps.value = false
-    }
+      isFirstMount.value = false // 标记第一次挂载已完成
+    }, 200)
   },
   { immediate: true }
 )
@@ -849,7 +614,9 @@ onMounted(() => {
   // 添加键盘事件监听
   const handleKeyDown = (event: KeyboardEvent): void => {
     if (event.key === 'Escape') {
-      hideControlPoints()
+      if (reshapeRef.value) {
+        reshapeRef.value.hideControlPoints()
+      }
       if (drawLineRef.value) {
         drawLineRef.value.resetDrawing()
       }
@@ -857,20 +624,15 @@ onMounted(() => {
         drawBrushRef.value.resetDrawing()
       }
       paper.view.update()
-    } else if (event.key === 'Delete' || event.key === 'Backspace') {
-      // 删除选中的路径
-      if (controlPoints.value.length > 0 && controlPoints.value[0].parentPath) {
-        const pathToDelete = controlPoints.value[0].parentPath
-        pathToDelete.remove()
-        allPaths.value = allPaths.value.filter((path: paper.Path) => path !== pathToDelete)
-        hideControlPoints()
-        paper.view.update()
-        exportSvgAndEmit()
+    } else {
+      // 委托给reshape组件处理其他键盘事件
+      if (reshapeRef.value) {
+        reshapeRef.value.handleKeyDown(event)
       }
     }
   }
   
-  // 添加鼠标释放事件监听
+  // 添加键盘和鼠标事件监听
   window.addEventListener('keydown', handleKeyDown)
   window.addEventListener('mouseup', handleMouseUp)
   
@@ -885,19 +647,14 @@ onMounted(() => {
 const exportSvgAndEmit = (): void => {
   // console.log('exportSvgAndEmit 被调用')
   if (!paper.project) {
-    console.log('paper.project does not exist')
+    // paper.project does not exist
     return
   }
   
-  // 保存当前选中的路径（如果有控制点显示）
-  if (controlPoints.value.length > 0 && controlPoints.value[0].parentPath) {
-    selectedPathForRestore.value = controlPoints.value[0].parentPath
-  } else {
-    selectedPathForRestore.value = null
-  }
-  
   // 在导出SVG之前隐藏所有控制点，避免控制点被包含在SVG中
-  hideControlPoints()
+  if (reshapeRef.value) {
+    reshapeRef.value.hideControlPoints()
+  }
   
   const prevVisible = backgroundRect.value?.visible ?? true
   if (backgroundRect.value) backgroundRect.value.visible = false

From 12e19383835de9a1df7af59f5ab09ba6b52281ab Mon Sep 17 00:00:00 2001
From: AvenJi0320 <pychi0320@gmail.com>
Date: Fri, 15 Aug 2025 15:05:38 +0800
Subject: [PATCH 22/49] feat(painter): add 5 placeholder tools with improved
 layout

---
 .../common/painter/components/circle_tool.vue |  15 ++
 .../common/painter/components/eraser_tool.vue |  15 ++
 .../common/painter/components/fill_tool.vue   |  15 ++
 .../painter/components/rectangle_tool.vue     |  15 ++
 .../common/painter/components/text_tool.vue   |  15 ++
 .../editor/common/painter/painter.vue         | 200 ++++++++++++++----
 6 files changed, 236 insertions(+), 39 deletions(-)
 create mode 100644 spx-gui/src/components/editor/common/painter/components/circle_tool.vue
 create mode 100644 spx-gui/src/components/editor/common/painter/components/eraser_tool.vue
 create mode 100644 spx-gui/src/components/editor/common/painter/components/fill_tool.vue
 create mode 100644 spx-gui/src/components/editor/common/painter/components/rectangle_tool.vue
 create mode 100644 spx-gui/src/components/editor/common/painter/components/text_tool.vue

diff --git a/spx-gui/src/components/editor/common/painter/components/circle_tool.vue b/spx-gui/src/components/editor/common/painter/components/circle_tool.vue
new file mode 100644
index 000000000..033e63b27
--- /dev/null
+++ b/spx-gui/src/components/editor/common/painter/components/circle_tool.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="circle-tool">
+    <!-- TODO: 实现圆形工具功能 -->
+  </div>
+</template>
+
+<script setup lang="ts">
+// TODO: 实现圆形工具逻辑
+</script>
+
+<style scoped>
+.circle-tool {
+  /* TODO: 添加圆形工具样式 */
+}
+</style>
\ No newline at end of file
diff --git a/spx-gui/src/components/editor/common/painter/components/eraser_tool.vue b/spx-gui/src/components/editor/common/painter/components/eraser_tool.vue
new file mode 100644
index 000000000..c10e929a7
--- /dev/null
+++ b/spx-gui/src/components/editor/common/painter/components/eraser_tool.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="eraser-tool">
+    <!-- TODO: 实现橡皮工具功能 -->
+  </div>
+</template>
+
+<script setup lang="ts">
+// TODO: 实现橡皮工具逻辑
+</script>
+
+<style scoped>
+.eraser-tool {
+  /* TODO: 添加橡皮工具样式 */
+}
+</style>
\ No newline at end of file
diff --git a/spx-gui/src/components/editor/common/painter/components/fill_tool.vue b/spx-gui/src/components/editor/common/painter/components/fill_tool.vue
new file mode 100644
index 000000000..ac36c9536
--- /dev/null
+++ b/spx-gui/src/components/editor/common/painter/components/fill_tool.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="fill-tool">
+    <!-- TODO: 实现填充颜色工具功能 -->
+  </div>
+</template>
+
+<script setup lang="ts">
+// TODO: 实现填充颜色工具逻辑
+</script>
+
+<style scoped>
+.fill-tool {
+  /* TODO: 添加填充颜色工具样式 */
+}
+</style>
\ No newline at end of file
diff --git a/spx-gui/src/components/editor/common/painter/components/rectangle_tool.vue b/spx-gui/src/components/editor/common/painter/components/rectangle_tool.vue
new file mode 100644
index 000000000..7a13a80a5
--- /dev/null
+++ b/spx-gui/src/components/editor/common/painter/components/rectangle_tool.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="rectangle-tool">
+    <!-- TODO: 实现矩形工具功能 -->
+  </div>
+</template>
+
+<script setup lang="ts">
+// TODO: 实现矩形工具逻辑
+</script>
+
+<style scoped>
+.rectangle-tool {
+  /* TODO: 添加矩形工具样式 */
+}
+</style>
\ No newline at end of file
diff --git a/spx-gui/src/components/editor/common/painter/components/text_tool.vue b/spx-gui/src/components/editor/common/painter/components/text_tool.vue
new file mode 100644
index 000000000..af27dc491
--- /dev/null
+++ b/spx-gui/src/components/editor/common/painter/components/text_tool.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="text-tool">
+    <!-- TODO: 实现插入文本工具功能 -->
+  </div>
+</template>
+
+<script setup lang="ts">
+// TODO: 实现插入文本工具逻辑
+</script>
+
+<style scoped>
+.text-tool {
+  /* TODO: 添加插入文本工具样式 */
+}
+</style>
\ No newline at end of file
diff --git a/spx-gui/src/components/editor/common/painter/painter.vue b/spx-gui/src/components/editor/common/painter/painter.vue
index 620beb28a..5aefbeb96 100644
--- a/spx-gui/src/components/editor/common/painter/painter.vue
+++ b/spx-gui/src/components/editor/common/painter/painter.vue
@@ -4,40 +4,105 @@
     <div class="toolbar">
       <div class="tool-section">
         <h3 class="tool-title">{{ $t({ en: 'Drawing Tools', zh: '绘图工具' }) }}</h3>
-        <button 
-          :class="['tool-btn', { active: currentTool === 'line' }]"
-          @click="selectTool('line')"
-          :title="$t({ en: 'Line Tool', zh: '直线工具' })"
-        >
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <line x1="7" y1="17" x2="17" y2="7"></line>
-          </svg>
-          <span>{{ $t({ en: 'Line', zh: '直线' }) }}</span>
-        </button>
-        
-        <button 
-          :class="['tool-btn', { active: currentTool === 'brush' }]"
-          @click="selectTool('brush')"
-          :title="$t({ en: 'Brush Tool', zh: '笔刷工具' })"
-        >
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="m9.06 11.9 8.07-8.06a2.85 2.85 0 1 1 4.03 4.03l-8.06 8.08"></path>
-            <path d="m7.07 14.94c-1.66 0-3 1.35-3 3.02 0 1.33-2.5 1.52-2 2.02 1.08-2 2.51-2 2.68-2.02 0.44 0 3.34-1.66 3.34-3.02z"></path>
-          </svg>
-          <span>{{ $t({ en: 'Brush', zh: '笔刷' }) }}</span>
-        </button>
-        
-        <button 
-          :class="['tool-btn', { active: currentTool === 'reshape' }]"
-          @click="selectTool('reshape')"
-          :title="$t({ en: 'Reshape Tool', zh: '变形工具' })"
-        >
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="m3 3 7.07 16.97 2.51-7.39 7.39-2.51L3 3z"></path>
-            <path d="m13 13 6 6"></path>
-          </svg>
-          <span>{{ $t({ en: 'Reshape', zh: '变形' }) }}</span>
-        </button>
+        <div class="tool-grid">
+          <button 
+            :class="['tool-btn', { active: currentTool === 'line' }]"
+            @click="selectTool('line')"
+            :title="$t({ en: 'Line Tool', zh: '直线工具' })"
+          >
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <line x1="7" y1="17" x2="17" y2="7"></line>
+            </svg>
+            <span>{{ $t({ en: 'Line', zh: '直线' }) }}</span>
+          </button>
+          
+          <button 
+            :class="['tool-btn', { active: currentTool === 'brush' }]"
+            @click="selectTool('brush')"
+            :title="$t({ en: 'Brush Tool', zh: '笔刷工具' })"
+          >
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="m9.06 11.9 8.07-8.06a2.85 2.85 0 1 1 4.03 4.03l-8.06 8.08"></path>
+              <path d="m7.07 14.94c-1.66 0-3 1.35-3 3.02 0 1.33-2.5 1.52-2 2.02 1.08-2 2.51-2 2.68-2.02 0.44 0 3.34-1.66 3.34-3.02z"></path>
+            </svg>
+            <span>{{ $t({ en: 'Brush', zh: '笔刷' }) }}</span>
+          </button>
+          
+          <button 
+            :class="['tool-btn', { active: currentTool === 'reshape' }]"
+            @click="selectTool('reshape')"
+            :title="$t({ en: 'Reshape Tool', zh: '变形工具' })"
+          >
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="m3 3 7.07 16.97 2.51-7.39 7.39-2.51L3 3z"></path>
+              <path d="m13 13 6 6"></path>
+            </svg>
+            <span>{{ $t({ en: 'Reshape', zh: '变形' }) }}</span>
+          </button>
+          
+          <button 
+            :class="['tool-btn', { active: currentTool === 'eraser' }]"
+            @click="selectTool('eraser')"
+            :title="$t({ en: 'Eraser Tool', zh: '橡皮工具' })"
+          >
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21"></path>
+              <path d="M22 21H7"></path>
+              <path d="m5 11 9 9"></path>
+            </svg>
+            <span>{{ $t({ en: 'Eraser', zh: '橡皮' }) }}</span>
+          </button>
+          
+          <button 
+            :class="['tool-btn', { active: currentTool === 'rectangle' }]"
+            @click="selectTool('rectangle')"
+            :title="$t({ en: 'Rectangle Tool', zh: '矩形工具' })"
+          >
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <rect width="18" height="12" x="3" y="6" rx="2"></rect>
+            </svg>
+            <span>{{ $t({ en: 'Rectangle', zh: '矩形' }) }}</span>
+          </button>
+          
+          <button 
+            :class="['tool-btn', { active: currentTool === 'circle' }]"
+            @click="selectTool('circle')"
+            :title="$t({ en: 'Circle Tool', zh: '圆形工具' })"
+          >
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <circle cx="12" cy="12" r="9"></circle>
+            </svg>
+            <span>{{ $t({ en: 'Circle', zh: '圆形' }) }}</span>
+          </button>
+          
+          <button 
+            :class="['tool-btn', { active: currentTool === 'fill' }]"
+            @click="selectTool('fill')"
+            :title="$t({ en: 'Fill Tool', zh: '填充颜色工具' })"
+          >
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M9 12l2 2 4-4"></path>
+              <path d="M21 12c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1z"></path>
+              <path d="M3 12c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1z"></path>
+              <path d="M12 21c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1z"></path>
+              <path d="M12 3c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1z"></path>
+            </svg>
+            <span>{{ $t({ en: 'Fill', zh: '填充' }) }}</span>
+          </button>
+          
+          <button 
+            :class="['tool-btn', { active: currentTool === 'text' }]"
+            @click="selectTool('text')"
+            :title="$t({ en: 'Text Tool', zh: '插入文本工具' })"
+          >
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M4 7V4h16v3"></path>
+              <path d="M9 20h6"></path>
+              <path d="M12 4v16"></path>
+            </svg>
+            <span>{{ $t({ en: 'Text', zh: '文本' }) }}</span>
+          </button>
+        </div>
       </div>
       
       <div class="tool-section">
@@ -108,6 +173,41 @@
         @paths-update="handlePathsUpdate"
         @svg-export="exportSvgAndEmit"
       />
+      
+      <!-- 橡皮工具组件 -->
+      <EraserTool
+        :is-active="currentTool === 'eraser'"
+        :canvas-width="canvasWidth"
+        :canvas-height="canvasHeight"
+      />
+      
+      <!-- 矩形工具组件 -->
+      <RectangleTool
+        :is-active="currentTool === 'rectangle'"
+        :canvas-width="canvasWidth"
+        :canvas-height="canvasHeight"
+      />
+      
+      <!-- 圆形工具组件 -->
+      <CircleTool
+        :is-active="currentTool === 'circle'"
+        :canvas-width="canvasWidth"
+        :canvas-height="canvasHeight"
+      />
+      
+      <!-- 填充颜色工具组件 -->
+      <FillTool
+        :is-active="currentTool === 'fill'"
+        :canvas-width="canvasWidth"
+        :canvas-height="canvasHeight"
+      />
+      
+      <!-- 插入文本工具组件 -->
+      <TextTool
+        :is-active="currentTool === 'text'"
+        :canvas-width="canvasWidth"
+        :canvas-height="canvasHeight"
+      />
     </div>
     
     <!-- AI生成弹窗 -->
@@ -125,10 +225,15 @@ import paper from 'paper'
 import DrawLine from './components/draw_line.vue'
 import DrawBrush from './components/draw_brush.vue'
 import Reshape from './components/reshape.vue'
+import EraserTool from './components/eraser_tool.vue'
+import RectangleTool from './components/rectangle_tool.vue'
+import CircleTool from './components/circle_tool.vue'
+import FillTool from './components/fill_tool.vue'
+import TextTool from './components/text_tool.vue'
 import AiGenerate from './components/aigc/generator.vue'
 
 // 工具类型
-type ToolType = 'line' | 'brush' | 'reshape'
+type ToolType = 'line' | 'brush' | 'reshape' | 'eraser' | 'rectangle' | 'circle' | 'fill' | 'text'
 
 
 // 响应式变量
@@ -704,6 +809,12 @@ const exportSvgAndEmit = (): void => {
   gap: 8px;
 }
 
+.tool-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+
 .tool-title {
   font-size: 14px;
   font-weight: 600;
@@ -715,17 +826,20 @@ const exportSvgAndEmit = (): void => {
 
 .tool-btn {
   display: flex;
+  flex-direction: column;
   align-items: center;
-  gap: 8px;
-  padding: 12px 16px;
+  justify-content: center;
+  gap: 4px;
+  padding: 8px 6px;
   border: 1px solid #e0e0e0;
   border-radius: 8px;
   background-color: #fff;
   color: #666;
   cursor: pointer;
-  font-size: 14px;
+  font-size: 12px;
   transition: all 0.2s ease;
-  text-align: left;
+  text-align: center;
+  min-height: 48px;
 }
 
 .tool-btn:hover {
@@ -740,6 +854,11 @@ const exportSvgAndEmit = (): void => {
   color: #2196f3;
 }
 
+.tool-btn:focus {
+  outline: none;
+  box-shadow: none;
+}
+
 .tool-btn.action-btn {
   background-color: #fff3e0;
   border-color: #ff9800;
@@ -770,6 +889,9 @@ const exportSvgAndEmit = (): void => {
 
 .tool-btn span {
   font-weight: 500;
+  font-size: 11px;
+  line-height: 1.2;
+  white-space: nowrap;
 }
 
 /* 画布区域样式 */

From a4d704acc184342b2d25b625ebb67328d5dec793 Mon Sep 17 00:00:00 2001
From: petezhuang <petezhuang13@163.com>
Date: Fri, 15 Aug 2025 16:52:32 +0800
Subject: [PATCH 23/49] feat(spx-gui):select different text to svg provider and
 several bug fixs

---
 spx-gui/src/apis/picgc.ts                     | 61 +++++++++++++------
 .../common/painter/components/aigc/error.vue  | 42 ++++++++-----
 .../painter/components/aigc/generator.vue     | 45 ++++++--------
 .../editor/common/painter/painter.vue         |  7 ++-
 4 files changed, 93 insertions(+), 62 deletions(-)

diff --git a/spx-gui/src/apis/picgc.ts b/spx-gui/src/apis/picgc.ts
index 5b2a9c82e..1965ee072 100644
--- a/spx-gui/src/apis/picgc.ts
+++ b/spx-gui/src/apis/picgc.ts
@@ -28,20 +28,11 @@ async function picgcRequest(path: string, options: RequestInit = {}) {
 /** Image generation model types */
 export type ImageModel = 'png' | 'svg'
 
-/** 可用的样式选项 */
-export type StyleOption = 
-  | 'FLAT_VECTOR'
-  | 'FLAT_VECTOR_OUTLINE'
-  | 'FLAT_VECTOR_SILHOUETTE'
-  | 'FLAT_VECTOR_ONE_LINE_ART'
-  | 'FLAT_VECTOR_LINE_ART'
-
 /** Request payload for image generation */
 export interface GenerateImageRequest {
   /** The text prompt describing the desired image */
   prompt: string
   negative_prompt?: string
-  style?: StyleOption
   format?: string
 }
 
@@ -58,19 +49,17 @@ export interface GenerateImageResponse {
   created_at: string
 }
 
-
+//todo：弃用
 export async function generateImage(
   prompt: string, 
   options?: {
     negative_prompt?: string
-    style?: StyleOption
     format?: string
   }
 ): Promise<GenerateImageResponse> {
   const payload: GenerateImageRequest = {
     prompt,
     negative_prompt: options?.negative_prompt || 'text, watermark',
-    style: options?.style || 'FLAT_VECTOR',
     format: options?.format
   }
 
@@ -87,10 +76,10 @@ export async function generateImage(
  * 直接生成并返回SVG内容
  */
 export async function generateSvgDirect(
+  provider: string,//通过这个参数选择供应商:claude,recraft
   prompt: string,
   options?: {
     negative_prompt?: string
-    style?: StyleOption
     format?: string
   }
 ): Promise<{
@@ -102,12 +91,20 @@ export async function generateSvgDirect(
   const payload: GenerateImageRequest = {
     prompt,
     negative_prompt: options?.negative_prompt || 'text, watermark',
-    style: options?.style || 'FLAT_VECTOR',
     format: options?.format
   }
 
-  const url = PICGC_BASE_URL + '/v1/images/svg'
-  
+  let url = ''
+  switch (provider) {
+    case 'claude':
+      url = PICGC_BASE_URL + '/v1/images/claude/svg'
+      break
+    case 'recraft':
+      url = PICGC_BASE_URL + '/v1/images/recraft/svg'
+      break
+    default:
+      throw new Error('Invalid provider')
+  }
   const response = await fetch(url, {
     method: 'POST',
     headers: {
@@ -126,14 +123,38 @@ export async function generateSvgDirect(
   console.log('svgContent', svgContent)
   // 从响应头获取元数据
   const id = response.headers.get('X-Image-Id') || 'unknown'
-  const width = parseInt(response.headers.get('X-Image-Width') || '512')
-  const height = parseInt(response.headers.get('X-Image-Height') || '512')
+  const width = parseInt('512')
+  const height = parseInt('512')
+
+  // 修改SVG内容的尺寸：大小为512*512
+  const modifiedSvgContent = svgContent.replace(
+    /<svg([^>]*?)>/,
+    (match: string, attributes: string) => {
+      // 解析现有属性
+      let newAttributes = attributes
+      
+      // 更新或添加width属性
+      if (newAttributes.includes('width=')) {
+        newAttributes = newAttributes.replace(/width="[^"]*"/, `width="${width}"`)
+      } else {
+        newAttributes += ` width="${width}"`
+      }
+      
+      // 更新或添加height属性
+      if (newAttributes.includes('height=')) {
+        newAttributes = newAttributes.replace(/height="[^"]*"/, `height="${height}"`)
+      } else {
+        newAttributes += ` height="${height}"`
+      }
+      console.log('newAttributes',newAttributes) 
+      return `<svg${newAttributes}>`
+    }
+  )
 
   return {
-    svgContent,
+    svgContent: modifiedSvgContent,
     id,
     width,
     height
   }
 }
-
diff --git a/spx-gui/src/components/editor/common/painter/components/aigc/error.vue b/spx-gui/src/components/editor/common/painter/components/aigc/error.vue
index 858233d98..979cba801 100644
--- a/spx-gui/src/components/editor/common/painter/components/aigc/error.vue
+++ b/spx-gui/src/components/editor/common/painter/components/aigc/error.vue
@@ -22,7 +22,7 @@
       
       <div class="error-modal-body">
         <p class="error-message">
-          {{ getErrorMessage() }}
+          {{ errorMessage }}
         </p>
         <div class="error-suggestions">
           <h4 class="suggestions-title">{{ $t({ en: 'Suggestions:', zh: '建议：' }) }}</h4>
@@ -55,17 +55,17 @@
 </template>
 
 <script setup lang="ts">
+import { computed, getCurrentInstance } from 'vue'
+
 // Props
 interface Props {
   visible: boolean
   errorType?: string
-  errorMessage?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
   visible: false,
   errorType: 'default',
-  errorMessage: ''
 })
 
 // Emits
@@ -75,6 +75,10 @@ const emit = defineEmits<{
   'retry': []
 }>()
 
+// 获取全局属性
+const instance = getCurrentInstance()
+const $t = instance?.appContext.config.globalProperties.$t
+
 // 方法
 const handleClose = () => {
   emit('update:visible', false)
@@ -86,11 +90,27 @@ const handleRetry = () => {
   emit('retry')
 }
 
-const getErrorMessage = () => {
-  if (props.errorMessage) {
-    return props.errorMessage
-  }
+// 错误消息计算属性
+const errorMessage = computed(() => {
+
   
+  // 如果 $t 不可用，默认返回英文
+  if (!$t) {
+    switch (props.errorType) {
+      case 'timeout':
+        return 'Generation timeout, please try simplifying the description or try again later'
+      case 'network':
+        return 'Network connection error, please check your network connection'
+      case 'params':
+        return 'Request parameter error, please check the prompt length (at least 3 characters)'
+      case 'server':
+        return 'Server internal error, please try again later'
+      default:
+        return 'Image generation failed, please try again later'
+    }
+  }
+  console.log($t)
+  console.log(props.errorType)
   // 根据错误类型返回对应的错误信息
   switch (props.errorType) {
     case 'timeout':
@@ -104,13 +124,7 @@ const getErrorMessage = () => {
     default:
       return $t({ en: 'Image generation failed, please try again later', zh: '图片生成失败，请稍后重试' })
   }
-}
-
-// 全局函数，用于在模板中使用
-// 注意：这里应该使用实际的国际化函数，暂时返回中文
-const $t = (options: { en: string; zh: string }) => {
-  return options.zh
-}
+})
 </script>
 
 <style scoped>
diff --git a/spx-gui/src/components/editor/common/painter/components/aigc/generator.vue b/spx-gui/src/components/editor/common/painter/components/aigc/generator.vue
index 0deb543cb..544bb80f2 100644
--- a/spx-gui/src/components/editor/common/painter/components/aigc/generator.vue
+++ b/spx-gui/src/components/editor/common/painter/components/aigc/generator.vue
@@ -32,24 +32,24 @@
                   <div class="model-selector">
                     <div 
                       class="model-option"
-                      :class="{ active: selectedModel === 'png' }"
-                      @click="selectedModel = 'png'"
+                      :class="{ active: selectedModel === 'claude' }"
+                      @click="selectedModel = 'claude'"
                     >
                       <div class="model-icon">🖼️</div>
                       <div class="model-info">
-                        <div class="model-name">{{ $t({ en: 'PNG Image', zh: 'PNG图片' }) }}</div>
-                        <div class="model-desc">{{ $t({ en: 'Generate high-quality bitmap images', zh: '生成高质量位图图片' }) }}</div>
+                        <div class="model-name">{{ $t({ en: 'Claude Vector', zh: 'Claude矢量图' }) }}</div>
+                        <div class="model-desc">{{ $t({ en: 'Generate simple, accurate vector images', zh: '生成简单，精确的矢量图' }) }}</div>
                       </div>
                     </div>
                     <div 
                       class="model-option"
-                      :class="{ active: selectedModel === 'svg' }"
-                      @click="selectedModel = 'svg'"
+                      :class="{ active: selectedModel === 'recraft' }"
+                      @click="selectedModel = 'recraft'"
                     >
                       <div class="model-icon">📐</div>
                       <div class="model-info">
-                        <div class="model-name">{{ $t({ en: 'SVG Vector', zh: 'SVG矢量' }) }}</div>
-                        <div class="model-desc">{{ $t({ en: 'Generate scalable vector graphics', zh: '生成可缩放矢量图形' }) }}</div>
+                        <div class="model-name">{{ $t({ en: 'Recraft SVG Vector', zh: 'Recraft SVG矢量' }) }}</div>
+                        <div class="model-desc">{{ $t({ en: 'Generate fabulous editable vector graphics', zh: '生成精美的可编辑矢量图形' }) }}</div>
                       </div>
                     </div>
                   </div>
@@ -135,7 +135,6 @@
       <ErrorModal
         v-model:visible="showErrorModal"
         :error-type="errorType"
-        :error-message="errorMessage"
         @close="closeErrorModal"
         @retry="retryGeneration"
       />
@@ -169,7 +168,7 @@ import ErrorModal from './error.vue'
   }>()
   
   // 响应式数据
-  const selectedModel = ref<'png' | 'svg'>('png')
+  const selectedModel = ref<'claude' | 'recraft'>('claude')
   const prompt = ref('')
   const previewUrl = ref('')
   const isGenerating = ref(false)
@@ -180,7 +179,6 @@ import ErrorModal from './error.vue'
   
   // 错误处理相关状态
   const showErrorModal = ref(false)
-  const errorMessage = ref('')
   const errorType = ref('')
   
   // 方法
@@ -211,7 +209,7 @@ import ErrorModal from './error.vue'
       prompt: prompt.value
     }
     
-    if (selectedModel.value === 'svg') {
+    if (selectedModel.value === 'recraft' || selectedModel.value === 'claude') {
       // SVG模式：传递原始SVG代码
       confirmData.svgContent = svgRawContent.value
       confirmData.url = previewUrl.value // 用于预览的blob URL
@@ -236,7 +234,7 @@ import ErrorModal from './error.vue'
       prompt.value = ''
       previewUrl.value = ''
       isGenerating.value = false
-      selectedModel.value = 'png'
+      selectedModel.value = 'claude'
     }, 300)
   }
   
@@ -250,15 +248,13 @@ import ErrorModal from './error.vue'
   }
   
   // 错误处理方法
-  const showError = (message: string, type: string = 'default') => {
-    errorMessage.value = message
+  const showError = (type: string = 'default') => {
     errorType.value = type
     showErrorModal.value = true
   }
   
   const closeErrorModal = () => {
     showErrorModal.value = false
-    errorMessage.value = ''
     errorType.value = ''
   }
   
@@ -277,24 +273,20 @@ import ErrorModal from './error.vue'
     svgRawContent.value = ''
     
     try {
-      if (selectedModel.value === 'svg') {
-        const svgResult = await generateSvgDirect(prompt.value, {
-          style: 'FLAT_VECTOR' // developing
-        })
+      if (selectedModel.value === 'recraft' || selectedModel.value === 'claude') {
+        const svgResult = await generateSvgDirect(selectedModel.value, prompt.value)
         
         // 直接获得SVG内容
         svgRawContent.value = svgResult.svgContent
         
-        // 创建blob URL用于预览 - 参照mock方式处理
+        // 创建blob URL用于预览
         const blob = new Blob([svgResult.svgContent], { type: 'image/svg+xml' })
         previewUrl.value = URL.createObjectURL(blob)
         
-        imageSize.value = `${svgResult.width}x${svgResult.height} (矢量图)`
+        imageSize.value = `${svgResult.width}x${svgResult.height}`
       } else {
         // PNG mod
-        const result = await generateImage(prompt.value, {
-          style: 'FLAT_VECTOR' // developing
-        })
+        const result = await generateImage(prompt.value)
         
         previewUrl.value = result.png_url
         imageSize.value = `${result.width}x${result.height}`
@@ -327,8 +319,7 @@ import ErrorModal from './error.vue'
       }
       
       // Use a simple fallback message for script context, real i18n will be handled in template
-      const fallbackMessage = '图片生成失败，请稍后重试'
-      showError(fallbackMessage, errorType)
+      showError(errorType)
       
     } finally {
       isGenerating.value = false
diff --git a/spx-gui/src/components/editor/common/painter/painter.vue b/spx-gui/src/components/editor/common/painter/painter.vue
index 5aefbeb96..4d16910b3 100644
--- a/spx-gui/src/components/editor/common/painter/painter.vue
+++ b/spx-gui/src/components/editor/common/painter/painter.vue
@@ -522,7 +522,12 @@ const handleAiConfirm = (data: {
   svgContent?: string;
 }): void => {
   // console.log('AI生成确认:', data)
-  
+  if(data.model === 'claude' || data.model === 'recraft'){
+    data.model = 'svg'
+  }else{
+    data.model = 'png'
+  }
+
   if (data.model === 'svg' && data.svgContent) {
     // 处理SVG导入
     importSvgToCanvas(data.svgContent)

From fe368ddb6bff486fa28795aab6faaa9b89f3e9a1 Mon Sep 17 00:00:00 2001
From: petezhuang <petezhuang13@163.com>
Date: Wed, 20 Aug 2025 14:19:19 +0800
Subject: [PATCH 24/49] refactor(spx-gui):init allpath interface

---
 .../src/components/editor/common/painter/painter.vue | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/spx-gui/src/components/editor/common/painter/painter.vue b/spx-gui/src/components/editor/common/painter/painter.vue
index 4d16910b3..70a1e7c24 100644
--- a/spx-gui/src/components/editor/common/painter/painter.vue
+++ b/spx-gui/src/components/editor/common/painter/painter.vue
@@ -393,12 +393,24 @@ const selectTool = (tool: ToolType): void => {
 }
 
 // 处理直线创建
+//todo:逻辑迁移到draw_line组件内部
 const handleLineCreated = (line: paper.Path): void => {
   allPaths.value.push(line)
   paper.view.update()
   exportSvgAndEmit()
 }
 
+
+//painter提供allPath接口给直线组件
+const getAllPathsValue = (): paper.Path[] => {
+  return allPaths.value
+}
+const setAllPathsValue = (paths: paper.Path[]): void => {
+  allPaths.value = paths
+}
+export { getAllPathsValue, setAllPathsValue }
+
+
 // 处理笔刷路径创建
 const handlePathCreated = (path: paper.Path): void => {
   allPaths.value.push(path)

From e2be90491b9a245de3406fceadad1aecb74d652e Mon Sep 17 00:00:00 2001
From: petezhuang <petezhuang13@163.com>
Date: Wed, 20 Aug 2025 15:14:03 +0800
Subject: [PATCH 25/49] fix(spx-gui):wrong interface export method

---
 spx-gui/src/components/editor/common/painter/painter.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/spx-gui/src/components/editor/common/painter/painter.vue b/spx-gui/src/components/editor/common/painter/painter.vue
index 70a1e7c24..0ae466bad 100644
--- a/spx-gui/src/components/editor/common/painter/painter.vue
+++ b/spx-gui/src/components/editor/common/painter/painter.vue
@@ -220,7 +220,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from 'vue'
+import { ref, onMounted, onUnmounted, watch, provide } from 'vue'
 import paper from 'paper'
 import DrawLine from './components/draw_line.vue'
 import DrawBrush from './components/draw_brush.vue'
@@ -408,7 +408,9 @@ const getAllPathsValue = (): paper.Path[] => {
 const setAllPathsValue = (paths: paper.Path[]): void => {
   allPaths.value = paths
 }
-export { getAllPathsValue, setAllPathsValue }
+
+provide('getAllPathsValue',getAllPathsValue)
+provide('setAllPathsValue',setAllPathsValue)
 
 
 // 处理笔刷路径创建

From d435f573bbd3ef79fb83013787efe868aaa1ba17 Mon Sep 17 00:00:00 2001
From: AvenJi0320 <pychi0320@gmail.com>
Date: Wed, 20 Aug 2025 17:07:07 +0800
Subject: [PATCH 26/49] refactor(spx-gui):move importSvgToCanvas method out of
 painter component

---
 .../editor/common/painter/painter.vue         |  69 ++----
 .../editor/common/painter/utils/loader.vue    | 232 ------------------
 .../common/painter/utils/svg-importer.vue     |  92 +++++++
 3 files changed, 106 insertions(+), 287 deletions(-)
 delete mode 100644 spx-gui/src/components/editor/common/painter/utils/loader.vue
 create mode 100644 spx-gui/src/components/editor/common/painter/utils/svg-importer.vue

diff --git a/spx-gui/src/components/editor/common/painter/painter.vue b/spx-gui/src/components/editor/common/painter/painter.vue
index 0ae466bad..97489bc49 100644
--- a/spx-gui/src/components/editor/common/painter/painter.vue
+++ b/spx-gui/src/components/editor/common/painter/painter.vue
@@ -208,6 +208,9 @@
         :canvas-width="canvasWidth"
         :canvas-height="canvasHeight"
       />
+      
+      <!-- SVG导入工具组件 -->
+      <SvgImporter ref="svgImporterRef" />
     </div>
     
     <!-- AI生成弹窗 -->
@@ -231,6 +234,7 @@ import CircleTool from './components/circle_tool.vue'
 import FillTool from './components/fill_tool.vue'
 import TextTool from './components/text_tool.vue'
 import AiGenerate from './components/aigc/generator.vue'
+import SvgImporter from './utils/svg-importer.vue'
 
 // 工具类型
 type ToolType = 'line' | 'brush' | 'reshape' | 'eraser' | 'rectangle' | 'circle' | 'fill' | 'text'
@@ -246,6 +250,7 @@ const currentTool = ref<ToolType | null>(null)
 const drawLineRef = ref<InstanceType<typeof DrawLine> | null>(null)
 const drawBrushRef = ref<InstanceType<typeof DrawBrush> | null>(null)
 const reshapeRef = ref<InstanceType<typeof Reshape> | null>(null)
+const svgImporterRef = ref<InstanceType<typeof SvgImporter> | null>(null)
 // 状态管理
 const allPaths = ref<paper.Path[]>([])
 
@@ -591,62 +596,10 @@ const importImageToCanvas = (imageUrl: string): void => {
   }
 }
 
-// 导入SVG到画布并转换为可编辑的路径
+// 导入SVG到画布并转换为可编辑的路径（通过SVG导入组件）
 const importSvgToCanvas = (svgContent: string): void => {
-  if (!paper.project) return
-  
-  try {
-    // 创建一个临时的SVG元素来解析SVG内容
-    const parser = new DOMParser()
-    const svgDoc = parser.parseFromString(svgContent, 'image/svg+xml')
-    const svgElement = svgDoc.documentElement
-    
-    // 检查是否解析成功
-    if (svgElement.nodeName !== 'svg') {
-      console.error('invalid svg content')
-      return
-    }
-    
-    // 使用Paper.js导入SVG
-    const importedItem = paper.project.importSVG(svgElement as unknown as SVGElement)
-    
-    if (importedItem) {
-      importedItem.position = paper.view.center
-      
-      
-      // 收集所有可编辑的路径
-      const collectPaths = (item: paper.Item): void => {
-        if (item instanceof paper.Path && item.segments && item.segments.length > 0) {
-          // 添加到可编辑路径列表
-          allPaths.value.push(item)
-          
-          // 添加鼠标事件处理
-          item.onMouseDown = () => {
-            if (currentTool.value === 'reshape' && reshapeRef.value) {
-              reshapeRef.value.showControlPoints(item)
-              paper.view.update()
-            }
-          }
-        } else if (item instanceof paper.Group || item instanceof paper.CompoundPath) {
-          // 递归处理子项
-          if (item.children) {
-            item.children.forEach(child => collectPaths(child))
-          }
-        }
-      }
-      
-      // 收集导入的所有路径
-      collectPaths(importedItem)
-      
-      // 更新视图
-      paper.view.update()
-      // console.log(`SVG已导入到画布，共${allPaths.value.length - (allPaths.value.length - countNewPaths(importedItem))}条可编辑路径`)
-      // 导入来源于 props 时不导出，避免循环
-      if (!isImportingFromProps.value) exportSvgAndEmit()
-      else isImportingFromProps.value = false
-    }
-  } catch (error) {
-    console.error('failed to import svg:', error)
+  if (svgImporterRef.value) {
+    svgImporterRef.value.importSvgToCanvas(svgContent)
   }
 }
 
@@ -800,6 +753,12 @@ const exportSvgAndEmit = (): void => {
     if (backgroundRect.value) backgroundRect.value.visible = prevVisible
   }
 }
+
+// 为SVG导入组件提供必要的依赖（在函数定义之后）
+provide('currentTool', currentTool)
+provide('reshapeRef', reshapeRef)
+provide('isImportingFromProps', isImportingFromProps)
+provide('exportSvgAndEmit', exportSvgAndEmit)
 </script>
 
 <style scoped>
diff --git a/spx-gui/src/components/editor/common/painter/utils/loader.vue b/spx-gui/src/components/editor/common/painter/utils/loader.vue
deleted file mode 100644
index 35502e907..000000000
--- a/spx-gui/src/components/editor/common/painter/utils/loader.vue
+++ /dev/null
@@ -1,232 +0,0 @@
-<script lang="ts">
-import { ref } from 'vue'
-import paper from 'paper'
-
-// 类型定义
-export interface LoaderOptions {
-  onPathCreated?: (path: paper.Path) => void
-  onImageLoaded?: (raster: paper.Raster) => void
-  onLoadComplete?: () => void
-  onError?: (error: Error) => void
-}
-
-// 导出的工具函数
-export const useImageLoader = () => {
-  const isLoading = ref(false)
-  
-  /**
-   * 加载位图图片到画布（PNG/JPG/...）
-   * @param imageSrc 图片源URL
-   * @param options 加载选项
-   * @returns Promise<paper.Raster | null>
-   */
-  const loadImageToCanvas = (imageSrc: string, options: LoaderOptions = {}): Promise<paper.Raster | null> => {
-    return new Promise((resolve, reject) => {
-      if (!paper.project) {
-        const error = new Error('Paper.js project not initialized')
-        options.onError?.(error)
-        reject(error)
-        return
-      }
-      
-      isLoading.value = true
-      
-      // 创建新的光栅图像
-      const raster = new paper.Raster(imageSrc)
-      
-      raster.onLoad = () => {
-        try {
-          raster.position = paper.view.center
-          
-          // 将图片放到最底层，作为背景
-          raster.sendToBack()
-          
-          paper.view.update()
-          
-          options.onImageLoaded?.(raster)
-          options.onLoadComplete?.()
-          
-          isLoading.value = false
-          resolve(raster)
-        } catch (error) {
-          const err = error instanceof Error ? error : new Error('Failed to process loaded image')
-          options.onError?.(err)
-          isLoading.value = false
-          reject(err)
-        }
-      }
-      
-      raster.onError = () => {
-        const error = new Error('Failed to load image')
-        options.onError?.(error)
-        isLoading.value = false
-        reject(error)
-      }
-    })
-  }
-  
-  /**
-   * 导入SVG到画布并转换为可编辑的路径
-   * @param svgContent SVG内容字符串
-   * @param options 加载选项
-   * @returns Promise<paper.Item | null>
-   */
-  const importSvgToCanvas = (svgContent: string, options: LoaderOptions = {}): Promise<paper.Item | null> => {
-    return new Promise((resolve, reject) => {
-      if (!paper.project) {
-        const error = new Error('Paper.js project not initialized')
-        options.onError?.(error)
-        reject(error)
-        return
-      }
-      
-      try {
-        isLoading.value = true
-        
-        // 创建一个临时的SVG元素来解析SVG内容
-        const parser = new DOMParser()
-        const svgDoc = parser.parseFromString(svgContent, 'image/svg+xml')
-        const svgElement = svgDoc.documentElement
-        
-        // 检查是否解析成功
-        if (svgElement.nodeName !== 'svg') {
-          throw new Error('Invalid SVG content')
-        }
-        
-        // 使用Paper.js导入SVG
-        const importedItem = paper.project.importSVG(svgElement as unknown as SVGElement)
-        
-        if (importedItem) {
-          importedItem.position = paper.view.center
-          
-          // 收集所有可编辑的路径
-          const paths: paper.Path[] = []
-          
-          const collectPaths = (item: paper.Item): void => {
-            if (item instanceof paper.Path && item.segments && item.segments.length > 0) {
-              paths.push(item)
-              options.onPathCreated?.(item)
-            } else if (item instanceof paper.Group || item instanceof paper.CompoundPath) {
-              // 递归处理子项
-              if (item.children) {
-                item.children.forEach(child => collectPaths(child))
-              }
-            }
-          }
-          
-          // 收集导入的所有路径
-          collectPaths(importedItem)
-          
-          // 更新视图
-          paper.view.update()
-          
-          options.onLoadComplete?.()
-          isLoading.value = false
-          resolve(importedItem)
-        } else {
-          throw new Error('Failed to import SVG')
-        }
-      } catch (error) {
-        const err = error instanceof Error ? error : new Error('Failed to import SVG')
-        options.onError?.(err)
-        isLoading.value = false
-        reject(err)
-      }
-    })
-  }
-  
-  /**
-   * 根据URL自动判断并导入到画布（优先解析为SVG，其次作为位图Raster）
-   * @param imageSrc 图片源URL
-   * @param options 加载选项
-   * @returns Promise<paper.Item | paper.Raster | null>
-   */
-  const loadFileToCanvas = async (imageSrc: string, options: LoaderOptions = {}): Promise<paper.Item | paper.Raster | null> => {
-    if (!paper.project) {
-      const error = new Error('Paper.js project not initialized')
-      options.onError?.(error)
-      throw error
-    }
-    
-    try {
-      isLoading.value = true
-      
-      const resp = await fetch(imageSrc)
-      
-      // 先尝试从响应体的blob.type判断（对blob: URL更可靠）
-      let isSvg = false
-      let svgText: string | null = null
-      
-      try {
-        const blob = await resp.clone().blob()
-        if (blob && typeof blob.type === 'string' && blob.type.includes('image/svg')) {
-          isSvg = true
-          svgText = await blob.text()
-        }
-      } catch {}
-      
-      // 退化到header判断
-      if (!isSvg) {
-        const contentType = resp.headers.get('content-type') || ''
-        if (contentType.includes('image/svg')) {
-          isSvg = true
-          svgText = await resp.clone().text()
-        }
-      }
-      
-      // 最后尝试直接将文本解析为SVG（针对部分blob:无类型场景）
-      if (!isSvg) {
-        try {
-          const text = await resp.clone().text()
-          if (/^\s*<svg[\s\S]*<\/svg>\s*$/i.test(text)) {
-            isSvg = true
-            svgText = text
-          }
-        } catch {}
-      }
-      
-      if (isSvg && svgText != null) {
-        return await importSvgToCanvas(svgText, options)
-      } else {
-        return await loadImageToCanvas(imageSrc, options)
-      }
-    } catch (error) {
-      // 回退策略：按位图处理
-      try {
-        return await loadImageToCanvas(imageSrc, options)
-      } catch (fallbackError) {
-        const err = fallbackError instanceof Error ? fallbackError : new Error('Failed to load file')
-        options.onError?.(err)
-        throw err
-      }
-    }
-  }
-  
-  /**
-   * 移除背景图片
-   * @param backgroundImage 要移除的背景图片引用
-   */
-  const removeBackgroundImage = (backgroundImage: paper.Raster | null): void => {
-    if (backgroundImage) {
-      backgroundImage.remove()
-    }
-  }
-  
-  return {
-    isLoading,
-    loadImageToCanvas,
-    importSvgToCanvas,
-    loadFileToCanvas,
-    removeBackgroundImage
-  }
-}
-
-// Vue组件默认导出（虽然这个文件主要用作工具模块）
-export default {
-  name: 'ImageLoader'
-}
-</script>
-
-<template>
-  <!-- 这是一个工具模块，不需要渲染内容 -->
-</template>
diff --git a/spx-gui/src/components/editor/common/painter/utils/svg-importer.vue b/spx-gui/src/components/editor/common/painter/utils/svg-importer.vue
new file mode 100644
index 000000000..3c51f865b
--- /dev/null
+++ b/spx-gui/src/components/editor/common/painter/utils/svg-importer.vue
@@ -0,0 +1,92 @@
+<template>
+  <div style="display: none;">
+    <!-- 隐藏的工具组件，只提供方法 -->
+  </div>
+</template>
+
+<script setup lang="ts">
+import { inject } from 'vue'
+import paper from 'paper'
+
+// 从父组件注入的接口
+const getAllPathsValue = inject<() => paper.Path[]>('getAllPathsValue')
+const setAllPathsValue = inject<(paths: paper.Path[]) => void>('setAllPathsValue')
+
+// 从父组件注入的其他必要方法和状态
+const currentTool = inject<{ value: string }>('currentTool')
+const reshapeRef = inject<{ value: any }>('reshapeRef')
+const isImportingFromProps = inject<{ value: boolean }>('isImportingFromProps')
+const exportSvgAndEmit = inject<() => void>('exportSvgAndEmit')
+
+// 导入SVG到画布并转换为可编辑的路径
+const importSvgToCanvas = (svgContent: string): void => {
+  if (!paper.project) return
+  
+  try {
+    // 创建一个临时的SVG元素来解析SVG内容
+    const parser = new DOMParser()
+    const svgDoc = parser.parseFromString(svgContent, 'image/svg+xml')
+    const svgElement = svgDoc.documentElement
+    
+    // 检查是否解析成功
+    if (svgElement.nodeName !== 'svg') {
+      console.error('invalid svg content')
+      return
+    }
+    
+    // 使用Paper.js导入SVG
+    const importedItem = paper.project.importSVG(svgElement as unknown as SVGElement)
+    
+    if (importedItem) {
+      importedItem.position = paper.view.center
+      
+      // 获取当前allPaths
+      const allPaths = getAllPathsValue?.() || []
+      
+      // 收集所有可编辑的路径
+      const collectPaths = (item: paper.Item): void => {
+        if (item instanceof paper.Path && item.segments && item.segments.length > 0) {
+          // 添加到可编辑路径列表
+          allPaths.push(item)
+          
+          // 添加鼠标事件处理
+          item.onMouseDown = () => {
+            if (currentTool?.value === 'reshape' && reshapeRef?.value) {
+              reshapeRef.value.showControlPoints(item)
+              paper.view.update()
+            }
+          }
+        } else if (item instanceof paper.Group || item instanceof paper.CompoundPath) {
+          // 递归处理子项
+          if (item.children) {
+            item.children.forEach(child => collectPaths(child))
+          }
+        }
+      }
+      
+      // 收集导入的所有路径
+      collectPaths(importedItem)
+      
+      // 更新allPaths
+      setAllPathsValue?.(allPaths)
+      
+      // 更新视图
+      paper.view.update()
+      
+      // 导入来源于 props 时不导出，避免循环
+      if (!isImportingFromProps?.value && exportSvgAndEmit) {
+        exportSvgAndEmit()
+      } else if (isImportingFromProps?.value) {
+        isImportingFromProps.value = false
+      }
+    }
+  } catch (error) {
+    console.error('failed to import svg:', error)
+  }
+}
+
+// 暴露方法给父组件
+defineExpose({
+  importSvgToCanvas
+})
+</script>
\ No newline at end of file

From bbd893779711535ca48e1f656bc7d948a5e90388 Mon Sep 17 00:00:00 2001
From: AvenJi0320 <pychi0320@gmail.com>
Date: Thu, 21 Aug 2025 10:34:29 +0800
Subject: [PATCH 27/49] refactor(spx-gui): move loadimage function out of
 painter component

---
 .../editor/common/painter/painter.vue         | 40 +++++------------
 .../common/painter/utils/ImageLoader.vue      | 43 +++++++++++++++++++
 .../{svg-importer.vue => SvgImporter.vue}     |  0
 3 files changed, 54 insertions(+), 29 deletions(-)
 create mode 100644 spx-gui/src/components/editor/common/painter/utils/ImageLoader.vue
 rename spx-gui/src/components/editor/common/painter/utils/{svg-importer.vue => SvgImporter.vue} (100%)

diff --git a/spx-gui/src/components/editor/common/painter/painter.vue b/spx-gui/src/components/editor/common/painter/painter.vue
index 97489bc49..8b124d77a 100644
--- a/spx-gui/src/components/editor/common/painter/painter.vue
+++ b/spx-gui/src/components/editor/common/painter/painter.vue
@@ -211,6 +211,9 @@
       
       <!-- SVG导入工具组件 -->
       <SvgImporter ref="svgImporterRef" />
+      
+      <!-- 图片加载工具组件 -->
+      <ImageLoader ref="imageLoaderRef" />
     </div>
     
     <!-- AI生成弹窗 -->
@@ -234,7 +237,8 @@ import CircleTool from './components/circle_tool.vue'
 import FillTool from './components/fill_tool.vue'
 import TextTool from './components/text_tool.vue'
 import AiGenerate from './components/aigc/generator.vue'
-import SvgImporter from './utils/svg-importer.vue'
+import SvgImporter from './utils/SvgImporter.vue'
+import ImageLoader from './utils/ImageLoader.vue'
 
 // 工具类型
 type ToolType = 'line' | 'brush' | 'reshape' | 'eraser' | 'rectangle' | 'circle' | 'fill' | 'text'
@@ -251,6 +255,7 @@ const drawLineRef = ref<InstanceType<typeof DrawLine> | null>(null)
 const drawBrushRef = ref<InstanceType<typeof DrawBrush> | null>(null)
 const reshapeRef = ref<InstanceType<typeof Reshape> | null>(null)
 const svgImporterRef = ref<InstanceType<typeof SvgImporter> | null>(null)
+const imageLoaderRef = ref<InstanceType<typeof ImageLoader> | null>(null)
 // 状态管理
 const allPaths = ref<paper.Path[]>([])
 
@@ -280,35 +285,9 @@ const emit = defineEmits<{
 
 // 加载位图图片到画布（PNG/JPG/...）
 const loadImageToCanvas = (imageSrc: string): void => {
-  if (!paper.project) return
-  
-  // 如果已有背景图片，先移除
-  if (backgroundImage.value) {
-    backgroundImage.value.remove()
-  }
-  
-  // 创建新的光栅图像
-  const raster = new paper.Raster(imageSrc)
-  
-  raster.onLoad = () => {
-    raster.position = paper.view.center
-    
-
-    
-    // 将图片放到最底层，作为背景
-    raster.sendToBack()
-    
-    backgroundImage.value = raster
-    paper.view.update()
+  if (imageLoaderRef.value) {
+    imageLoaderRef.value.loadImageToCanvas(imageSrc)
   }
-
-  // raster.onMouseDown = (event: paper.MouseEvent) => {
-    // if (currentTool.value === 'reshape') {
-    //   selectPathExclusive(null) // 清除路径选择
-    //   raster.selected = true
-    //   paper.view.update()
-    // }
-  // }
 }
 
 // 根据 url 自动判断并导入到画布（优先解析为 SVG，其次作为位图 Raster）
@@ -759,6 +738,9 @@ provide('currentTool', currentTool)
 provide('reshapeRef', reshapeRef)
 provide('isImportingFromProps', isImportingFromProps)
 provide('exportSvgAndEmit', exportSvgAndEmit)
+
+// 为图片加载组件提供必要的依赖
+provide('backgroundImage', backgroundImage)
 </script>
 
 <style scoped>
diff --git a/spx-gui/src/components/editor/common/painter/utils/ImageLoader.vue b/spx-gui/src/components/editor/common/painter/utils/ImageLoader.vue
new file mode 100644
index 000000000..9ddc98fdf
--- /dev/null
+++ b/spx-gui/src/components/editor/common/painter/utils/ImageLoader.vue
@@ -0,0 +1,43 @@
+<template>
+  <div style="display: none;">
+    <!-- 隐藏的工具组件，只提供方法 -->
+  </div>
+</template>
+
+<script setup lang="ts">
+import { inject } from 'vue'
+import paper from 'paper'
+
+// 从父组件注入的背景图片状态
+const backgroundImage = inject<{ value: paper.Raster | null }>('backgroundImage')
+
+// 加载位图图片到画布（PNG/JPG/...）
+const loadImageToCanvas = (imageSrc: string): void => {
+  if (!paper.project) return
+  
+  // 如果已有背景图片，先移除
+  if (backgroundImage?.value) {
+    backgroundImage.value.remove()
+  }
+  
+  // 创建新的光栅图像
+  const raster = new paper.Raster(imageSrc)
+  
+  raster.onLoad = () => {
+    raster.position = paper.view.center
+    
+    // 将图片放到最底层，作为背景
+    raster.sendToBack()
+    
+    if (backgroundImage) {
+      backgroundImage.value = raster
+    }
+    paper.view.update()
+  }
+}
+
+// 暴露方法给父组件
+defineExpose({
+  loadImageToCanvas
+})
+</script>
\ No newline at end of file
diff --git a/spx-gui/src/components/editor/common/painter/utils/svg-importer.vue b/spx-gui/src/components/editor/common/painter/utils/SvgImporter.vue
similarity index 100%
rename from spx-gui/src/components/editor/common/painter/utils/svg-importer.vue
rename to spx-gui/src/components/editor/common/painter/utils/SvgImporter.vue

From 9b3b17e7c619c16018113914cef785771870e8c4 Mon Sep 17 00:00:00 2001
From: petezhuang <petezhuang13@163.com>
Date: Thu, 21 Aug 2025 11:34:46 +0800
Subject: [PATCH 28/49] refactor(spx-gui):Rewrite export function into
 useSvgExporter and decoupling

---
 .../editor/common/painter/painter.vue         | 39 +++-----------
 .../common/painter/utils/svg-exporter.ts      | 52 +++++++++++++++++++
 2 files changed, 58 insertions(+), 33 deletions(-)
 create mode 100644 spx-gui/src/components/editor/common/painter/utils/svg-exporter.ts

diff --git a/spx-gui/src/components/editor/common/painter/painter.vue b/spx-gui/src/components/editor/common/painter/painter.vue
index 8b124d77a..3cdec21ed 100644
--- a/spx-gui/src/components/editor/common/painter/painter.vue
+++ b/spx-gui/src/components/editor/common/painter/painter.vue
@@ -238,6 +238,7 @@ import FillTool from './components/fill_tool.vue'
 import TextTool from './components/text_tool.vue'
 import AiGenerate from './components/aigc/generator.vue'
 import SvgImporter from './utils/SvgImporter.vue'
+import { useSvgExporter } from './utils/svg-exporter'
 import ImageLoader from './utils/ImageLoader.vue'
 
 // 工具类型
@@ -700,40 +701,12 @@ onMounted(() => {
 })
 
 // 导出当前画布为 SVG 并上报父组件
-const exportSvgAndEmit = (): void => {
-  // console.log('exportSvgAndEmit 被调用')
-  if (!paper.project) {
-    // paper.project does not exist
-    return
-  }
-  
-  // 在导出SVG之前隐藏所有控制点，避免控制点被包含在SVG中
-  if (reshapeRef.value) {
-    reshapeRef.value.hideControlPoints()
-  }
-  
-  const prevVisible = backgroundRect.value?.visible ?? true
-  if (backgroundRect.value) backgroundRect.value.visible = false
-  try {
-    // 导出SVG时保持原始尺寸和viewBox
-    const svgStr = (paper.project as any).exportSVG({ 
-      asString: true, 
-      embedImages: true,
-      bounds: paper.view.bounds // 使用视图边界确保尺寸正确
-    }) as string
-    // console.log('exported svg length:', svgStr?.length)
-    if (typeof svgStr === 'string') {
-      // console.log('send svg-change event')
-      emit('svg-change', svgStr)
-    }
-  } catch (e) {
-    console.error('failed to export svg:', e)
-  } finally {
-    if (backgroundRect.value) backgroundRect.value.visible = prevVisible
-  }
-}
+const { exportSvgAndEmit } = useSvgExporter({
+  reshapeRef,
+  backgroundRect,
+  emit: (svg: string) => emit('svg-change', svg)
+})
 
-// 为SVG导入组件提供必要的依赖（在函数定义之后）
 provide('currentTool', currentTool)
 provide('reshapeRef', reshapeRef)
 provide('isImportingFromProps', isImportingFromProps)
diff --git a/spx-gui/src/components/editor/common/painter/utils/svg-exporter.ts b/spx-gui/src/components/editor/common/painter/utils/svg-exporter.ts
new file mode 100644
index 000000000..86c917d8a
--- /dev/null
+++ b/spx-gui/src/components/editor/common/painter/utils/svg-exporter.ts
@@ -0,0 +1,52 @@
+import type { Ref } from 'vue'
+import paper from 'paper'
+
+// 定义依赖接口
+interface SvgExportDependencies {
+  reshapeRef: Ref<any> | null
+  backgroundRect: Ref<paper.Path | null>
+  emit: (svg: string) => void
+}
+
+// 导出SVG功能的组合式函数
+export const useSvgExporter = (dependencies: SvgExportDependencies) => {
+  const { reshapeRef, backgroundRect, emit } = dependencies
+
+  // 导出当前画布为 SVG 并上报父组件
+  const exportSvgAndEmit = (): void => {
+    // console.log('exportSvgAndEmit 被调用')
+    if (!paper.project) {
+      // paper.project does not exist
+      return
+    }
+    
+    // 在导出SVG之前隐藏所有控制点，避免控制点被包含在SVG中
+    if (reshapeRef?.value) {
+      reshapeRef.value.hideControlPoints()
+    }
+    
+    const prevVisible = backgroundRect.value?.visible ?? true
+    if (backgroundRect.value) backgroundRect.value.visible = false
+    try {
+      // 导出SVG时保持原始尺寸和viewBox
+      const svgStr = (paper.project as any).exportSVG({ 
+        asString: true, 
+        embedImages: true,
+        bounds: paper.view.bounds // 使用视图边界确保尺寸正确
+      }) as string
+      // console.log('exported svg length:', svgStr?.length)
+      if (typeof svgStr === 'string') {
+        // console.log('send svg-change event')
+        emit(svgStr)
+      }
+    } catch (e) {
+      console.error('failed to export svg:', e)
+    } finally {
+      if (backgroundRect.value) backgroundRect.value.visible = prevVisible
+    }
+  }
+
+  return {
+    exportSvgAndEmit
+  }
+}
\ No newline at end of file

From 2d3abb0ae0934f92561a414163c78a408d9e7058 Mon Sep 17 00:00:00 2001
From: spf <s17625514371@163.com>
Date: Wed, 20 Aug 2025 16:55:39 +0800
Subject: [PATCH 29/49] feat(spx-backend):add health

---
 spx-backend/cmd/spx-backend/get_health.yap | 13 ++++
 spx-backend/cmd/spx-backend/xgo_autogen.go | 89 ++++++++++++++--------
 spx-backend/internal/controller/health.go  | 20 +++++
 3 files changed, 92 insertions(+), 30 deletions(-)
 create mode 100644 spx-backend/cmd/spx-backend/get_health.yap
 create mode 100644 spx-backend/internal/controller/health.go

diff --git a/spx-backend/cmd/spx-backend/get_health.yap b/spx-backend/cmd/spx-backend/get_health.yap
new file mode 100644
index 000000000..b200cefaf
--- /dev/null
+++ b/spx-backend/cmd/spx-backend/get_health.yap
@@ -0,0 +1,13 @@
+// test health.
+//
+// Request:
+//   GET /health
+
+ctx := &Context
+
+result, err := ctrl.Health(ctx.Context())
+if err != nil {
+	replyWithInnerError(ctx, err)
+	return
+}
+json result
\ No newline at end of file
diff --git a/spx-backend/cmd/spx-backend/xgo_autogen.go b/spx-backend/cmd/spx-backend/xgo_autogen.go
index 8313931f8..517148434 100644
--- a/spx-backend/cmd/spx-backend/xgo_autogen.go
+++ b/spx-backend/cmd/spx-backend/xgo_autogen.go
@@ -76,6 +76,10 @@ type get_courses_list struct {
 	yap.Handler
 	*AppV2
 }
+type get_health struct {
+	yap.Handler
+	*AppV2
+}
 type get_project_release_owner_project_release struct {
 	yap.Handler
 	*AppV2
@@ -295,36 +299,37 @@ func (this *AppV2) Main() {
 	_xgo_obj9 := &get_course_serieses_list{AppV2: this}
 	_xgo_obj10 := &get_course_id{AppV2: this}
 	_xgo_obj11 := &get_courses_list{AppV2: this}
-	_xgo_obj12 := &get_project_release_owner_project_release{AppV2: this}
-	_xgo_obj13 := &get_project_releases_list{AppV2: this}
-	_xgo_obj14 := &get_project_owner_name{AppV2: this}
-	_xgo_obj15 := &get_project_owner_name_liking{AppV2: this}
-	_xgo_obj16 := &get_projects_list{AppV2: this}
-	_xgo_obj17 := &get_user{AppV2: this}
-	_xgo_obj18 := &get_user_username{AppV2: this}
-	_xgo_obj19 := &get_user_username_following{AppV2: this}
-	_xgo_obj20 := &get_users_list{AppV2: this}
-	_xgo_obj21 := &get_util_upinfo{AppV2: this}
-	_xgo_obj22 := &post_ai_interaction_turn{AppV2: this}
-	_xgo_obj23 := &post_aigc_matting{AppV2: this}
-	_xgo_obj24 := &post_asset{AppV2: this}
-	_xgo_obj25 := &post_copilot_message{AppV2: this}
-	_xgo_obj26 := &post_copilot_stream_message{AppV2: this}
-	_xgo_obj27 := &post_course_series{AppV2: this}
-	_xgo_obj28 := &post_course{AppV2: this}
-	_xgo_obj29 := &post_project_release{AppV2: this}
-	_xgo_obj30 := &post_project{AppV2: this}
-	_xgo_obj31 := &post_project_owner_name_liking{AppV2: this}
-	_xgo_obj32 := &post_project_owner_name_view{AppV2: this}
-	_xgo_obj33 := &post_user_username_following{AppV2: this}
-	_xgo_obj34 := &post_util_fileurls{AppV2: this}
-	_xgo_obj35 := &post_workflow_stream_message{AppV2: this}
-	_xgo_obj36 := &put_asset_id{AppV2: this}
-	_xgo_obj37 := &put_course_series_id{AppV2: this}
-	_xgo_obj38 := &put_course_id{AppV2: this}
-	_xgo_obj39 := &put_project_owner_name{AppV2: this}
-	_xgo_obj40 := &put_user{AppV2: this}
-	yap.Gopt_AppV2_Main(this, _xgo_obj0, _xgo_obj1, _xgo_obj2, _xgo_obj3, _xgo_obj4, _xgo_obj5, _xgo_obj6, _xgo_obj7, _xgo_obj8, _xgo_obj9, _xgo_obj10, _xgo_obj11, _xgo_obj12, _xgo_obj13, _xgo_obj14, _xgo_obj15, _xgo_obj16, _xgo_obj17, _xgo_obj18, _xgo_obj19, _xgo_obj20, _xgo_obj21, _xgo_obj22, _xgo_obj23, _xgo_obj24, _xgo_obj25, _xgo_obj26, _xgo_obj27, _xgo_obj28, _xgo_obj29, _xgo_obj30, _xgo_obj31, _xgo_obj32, _xgo_obj33, _xgo_obj34, _xgo_obj35, _xgo_obj36, _xgo_obj37, _xgo_obj38, _xgo_obj39, _xgo_obj40)
+	_xgo_obj12 := &get_health{AppV2: this}
+	_xgo_obj13 := &get_project_release_owner_project_release{AppV2: this}
+	_xgo_obj14 := &get_project_releases_list{AppV2: this}
+	_xgo_obj15 := &get_project_owner_name{AppV2: this}
+	_xgo_obj16 := &get_project_owner_name_liking{AppV2: this}
+	_xgo_obj17 := &get_projects_list{AppV2: this}
+	_xgo_obj18 := &get_user{AppV2: this}
+	_xgo_obj19 := &get_user_username{AppV2: this}
+	_xgo_obj20 := &get_user_username_following{AppV2: this}
+	_xgo_obj21 := &get_users_list{AppV2: this}
+	_xgo_obj22 := &get_util_upinfo{AppV2: this}
+	_xgo_obj23 := &post_ai_interaction_turn{AppV2: this}
+	_xgo_obj24 := &post_aigc_matting{AppV2: this}
+	_xgo_obj25 := &post_asset{AppV2: this}
+	_xgo_obj26 := &post_copilot_message{AppV2: this}
+	_xgo_obj27 := &post_copilot_stream_message{AppV2: this}
+	_xgo_obj28 := &post_course_series{AppV2: this}
+	_xgo_obj29 := &post_course{AppV2: this}
+	_xgo_obj30 := &post_project_release{AppV2: this}
+	_xgo_obj31 := &post_project{AppV2: this}
+	_xgo_obj32 := &post_project_owner_name_liking{AppV2: this}
+	_xgo_obj33 := &post_project_owner_name_view{AppV2: this}
+	_xgo_obj34 := &post_user_username_following{AppV2: this}
+	_xgo_obj35 := &post_util_fileurls{AppV2: this}
+	_xgo_obj36 := &post_workflow_stream_message{AppV2: this}
+	_xgo_obj37 := &put_asset_id{AppV2: this}
+	_xgo_obj38 := &put_course_series_id{AppV2: this}
+	_xgo_obj39 := &put_course_id{AppV2: this}
+	_xgo_obj40 := &put_project_owner_name{AppV2: this}
+	_xgo_obj41 := &put_user{AppV2: this}
+	yap.Gopt_AppV2_Main(this, _xgo_obj0, _xgo_obj1, _xgo_obj2, _xgo_obj3, _xgo_obj4, _xgo_obj5, _xgo_obj6, _xgo_obj7, _xgo_obj8, _xgo_obj9, _xgo_obj10, _xgo_obj11, _xgo_obj12, _xgo_obj13, _xgo_obj14, _xgo_obj15, _xgo_obj16, _xgo_obj17, _xgo_obj18, _xgo_obj19, _xgo_obj20, _xgo_obj21, _xgo_obj22, _xgo_obj23, _xgo_obj24, _xgo_obj25, _xgo_obj26, _xgo_obj27, _xgo_obj28, _xgo_obj29, _xgo_obj30, _xgo_obj31, _xgo_obj32, _xgo_obj33, _xgo_obj34, _xgo_obj35, _xgo_obj36, _xgo_obj37, _xgo_obj38, _xgo_obj39, _xgo_obj40, _xgo_obj41)
 }
 //line cmd/spx-backend/delete_asset_#id.yap:6
 func (this *delete_asset_id) Main(_xgo_arg0 *yap.Context) {
@@ -893,6 +898,30 @@ func (this *get_courses_list) Classclone() yap.HandlerProto {
 	_xgo_ret := *this
 	return &_xgo_ret
 }
+//line cmd/spx-backend/get_health.yap:6
+func (this *get_health) Main(_xgo_arg0 *yap.Context) {
+	this.Handler.Main(_xgo_arg0)
+//line cmd/spx-backend/get_health.yap:6:1
+	ctx := &this.Context
+//line cmd/spx-backend/get_health.yap:8:1
+	result, err := this.ctrl.Health(ctx.Context())
+//line cmd/spx-backend/get_health.yap:9:1
+	if err != nil {
+//line cmd/spx-backend/get_health.yap:10:1
+		replyWithInnerError(ctx, err)
+//line cmd/spx-backend/get_health.yap:11:1
+		return
+	}
+//line cmd/spx-backend/get_health.yap:13:1
+	this.Json__1(result)
+}
+func (this *get_health) Classfname() string {
+	return "get_health"
+}
+func (this *get_health) Classclone() yap.HandlerProto {
+	_xgo_ret := *this
+	return &_xgo_ret
+}
 //line cmd/spx-backend/get_project-release_#owner_#project_#release.yap:10
 func (this *get_project_release_owner_project_release) Main(_xgo_arg0 *yap.Context) {
 	this.Handler.Main(_xgo_arg0)
diff --git a/spx-backend/internal/controller/health.go b/spx-backend/internal/controller/health.go
new file mode 100644
index 000000000..5a066d68f
--- /dev/null
+++ b/spx-backend/internal/controller/health.go
@@ -0,0 +1,20 @@
+package controller
+
+import (
+	"context"
+	"time"
+)
+
+// HealthResult is the result of the health check.
+type HealthResult struct {
+	Status string `json:"status"`
+	Time   string `json:"time"`
+}
+
+// Health performs a health check.
+func (ctrl *Controller) Health(ctx context.Context) (*HealthResult, error) {
+	return &HealthResult{
+		Status: "ok",
+		Time:   time.Now().Format(time.RFC3339),
+	}, nil
+}

From 5ac9451de146d4883fd3ef53f10d61dcfb04a3f2 Mon Sep 17 00:00:00 2001
From: linjc <linjc040204@outlook.com>
Date: Thu, 21 Aug 2025 12:46:51 +0800
Subject: [PATCH 30/49] feat(spx-backend):add svg-service to spx-backend

---
 spx-backend/.env.dev                          | 105 ++++---
 spx-backend/SVG_GENERATION_CONFIG.md          | 217 ++++++++++++++
 spx-backend/cmd/spx-backend/post_image.yap    |  27 ++
 .../cmd/spx-backend/post_image_svg.yap        |  34 +++
 spx-backend/cmd/spx-backend/xgo_autogen.go    | 124 +++++++-
 spx-backend/internal/config/config.go         | 115 +++++++-
 spx-backend/internal/config/loader.go         | 103 +++++++
 spx-backend/internal/controller/controller.go |   7 +
 spx-backend/internal/controller/svg.go        | 230 +++++++++++++++
 spx-backend/internal/controller/svg_test.go   | 137 +++++++++
 spx-backend/internal/svggen/example_usage.md  | 156 ++++++++++
 spx-backend/internal/svggen/openai.go         | 267 ++++++++++++++++++
 spx-backend/internal/svggen/recraft.go        | 258 +++++++++++++++++
 spx-backend/internal/svggen/svggen.go         | 107 +++++++
 spx-backend/internal/svggen/svggen_test.go    | 119 ++++++++
 spx-backend/internal/svggen/svgio.go          | 145 ++++++++++
 spx-backend/internal/svggen/types.go          | 141 +++++++++
 spx-backend/internal/svggen/utils.go          |  59 ++++
 18 files changed, 2283 insertions(+), 68 deletions(-)
 create mode 100644 spx-backend/SVG_GENERATION_CONFIG.md
 create mode 100644 spx-backend/cmd/spx-backend/post_image.yap
 create mode 100644 spx-backend/cmd/spx-backend/post_image_svg.yap
 create mode 100644 spx-backend/internal/controller/svg.go
 create mode 100644 spx-backend/internal/controller/svg_test.go
 create mode 100644 spx-backend/internal/svggen/example_usage.md
 create mode 100644 spx-backend/internal/svggen/openai.go
 create mode 100644 spx-backend/internal/svggen/recraft.go
 create mode 100644 spx-backend/internal/svggen/svggen.go
 create mode 100644 spx-backend/internal/svggen/svggen_test.go
 create mode 100644 spx-backend/internal/svggen/svgio.go
 create mode 100644 spx-backend/internal/svggen/types.go
 create mode 100644 spx-backend/internal/svggen/utils.go

diff --git a/spx-backend/.env.dev b/spx-backend/.env.dev
index 907a90944..c431042e4 100644
--- a/spx-backend/.env.dev
+++ b/spx-backend/.env.dev
@@ -1,65 +1,76 @@
-PORT=:8080
-ALLOWED_ORIGIN=*
+PORT=
+ALLOWED_ORIGIN=
 # Use local DB by default for dev
-GOP_SPX_DSN=root:123456@tcp(127.0.0.1:3306)/builder?charset=utf8mb4&parseTime=True&loc=UTC
+GOP_SPX_DSN=
 # AIGC Service
-AIGC_ENDPOINT=http://36.213.14.15:8888
+AIGC_ENDPOINT=
 
-# Redis
-REDIS_ADDR=
-REDIS_PASSWORD=
-REDIS_DB=
-REDIS_POOL_SIZE=
-
-# Qiniu Kodo
+# AK & SK for Qiniu (Kodo)
 KODO_AK=
 KODO_SK=
+# Kodo Bucket Name
 KODO_BUCKET=
+# Kodo Bucket Region
 KODO_BUCKET_REGION=
+# Base URL to read file from Kodo
 KODO_BASE_URL=
 
-# Use casdoor service of test env for quick start
-GOP_CASDOOR_ENDPOINT="https://goplus-casdoor.qiniu.io"
-GOP_CASDOOR_CLIENTID="389313df51ffd2093b2f"
-GOP_CASDOOR_CLIENTSECRET="bd22db46e4ab52ab0d0ac9cbd771a21775039409"
-GOP_CASDOOR_CERTIFICATE="-----BEGIN CERTIFICATE-----
-MIIE3TCCAsWgAwIBAgIDAeJAMA0GCSqGSIb3DQEBCwUAMCgxDjAMBgNVBAoTBWFk
-bWluMRYwFAYDVQQDEw1jZXJ0LWJ1aWx0LWluMB4XDTI0MDEyMjAxMjcyM1oXDTQ0
-MDEyMjAxMjcyM1owKDEOMAwGA1UEChMFYWRtaW4xFjAUBgNVBAMTDWNlcnQtYnVp
-bHQtaW4wggIiMA0GCSqGSIb3DQEBAQUAA4ICDwAwggIKAoICAQC4Qfq85ynOMFbV
-vAk+IDnt7B+3N2ntw5udQptjlVMDptDmL2s5J7uguWzf+QcjIYZMR7r8PaSugybf
-k5AVaQgHgvM3L8uUhSdLJGRBCfxSUZCAvVV8QbnP1h4oqOn1r1ZEGUvLGUD1WG+0
-fCNLhG1xYZE9yOyiJ6uEa/aMavgSswYSay9sc0gCJ0FE0gldFt+T3r3RNxQK3hl9
-3i7ifYbvCrdvTHbdVwciUWD9xC6JD2gL7KkNwCmL+PB4+XLZ+6/v4XGfK+OZ6/dN
-JuEJg+KR/v5eV7am5vp35mk/9evLYm7cjHHNZ49VIoz1wwHaApDVmRTE/ilGVcZy
-Ynxq/mI3bl3PLd/yK6gB1itD97XRf3JUXRjFlvhCZITYPhhMliiGi2cQzp++sxGU
-osciNI+CkQRkMOOfJa+2bwexNocfr1d01xkNw02PpRqBKGG2eJVN1pmXQH122bfT
-ReLWYQGUOIvwJSX/nqPZU+OI9wQOUOJkA49G/652AOTSphidPY83qiJ1xQ6Qsftj
-KHDT7XrN7l00FY7D2L++CwYybpwcfva9VsAsMsd2X+/r9+Qpla1USSfxFuaNFLYI
-qZKlHNgqNl7YY+uThzzFjL8x96u2ar8emRDqpE2HCirnqfYmZ5VldWkwJ9wKqRIv
-IYaqZAmSs4hJovB+sujgLOKNeTCOkwIDAQABoxAwDjAMBgNVHRMBAf8EAjAAMA0G
-CSqGSIb3DQEBCwUAA4ICAQCo3+PvCMnGpY28v+JLFxrxC2aP/ZipUGsBnWGU5Czc
-/J2gs7MdNLny0QDVvjEBCIWGu2YkNkii7Z8WskGGDmJCClN6N91aFizfDK+f49LW
-7KXnqUztATf848ypPDcbhjcTwtvU8ABo7BLAfNO9TVc4nPLNjXMetojAj8S+n56o
-qghbE7UaHd2d2q/ETFqunb8BbBPjw0Fv8VcpuIFrgKFEt+5nq8miYoGrBySPx/CZ
-Whm4PZ1HIobFXkfN0FhoX++sArL4FAacisBxqX9HYYnwGYvXzUtmdFNfqctKH2Gt
-YiSxoI1Jf9YysAroiIRxWNNr+O+Nkn0iIhkScKhvpXhLMnv1b2MIxwURUUnxehE1
-X4OALKxIZNyDvQUHZukzbVNQRJUorg+g4wPuCOkfvbNlHAFZerLxbigN1rafqH1j
-Pt/ORY44z+IeU7zc3zW0Gug5ws5X6IWgYwlZODhEVd8jELk180SF0jEMqmbFud0I
-SqmP0/koI7IzNhwqLilLWa3pUKs8AOxW4MCff/1fLB9IhR6c5+SG2S7ZbupuxXZS
-hLX23sQstIcgUKEhMTger6IyFreuQY3kXDKSSReE6IA9HLUtYdykfUR0oL7pQwMx
-ZNIZlCk3CrqUzVnAln07K9++5egCisZ0XADLp1cgCZk0NRM7a2LuMDx/iZXw1QaQ
-Iw==
------END CERTIFICATE-----"
-GOP_CASDOOR_ORGANIZATIONNAME="GoPlus"
-GOP_CASDOOR_APPLICATIONNAME="application_x8aevk"
+# Casdoor config
+GOP_CASDOOR_ENDPOINT=
+GOP_CASDOOR_CLIENTID=
+GOP_CASDOOR_CLIENTSECRET=
+GOP_CASDOOR_CERTIFICATE=
+GOP_CASDOOR_ORGANIZATIONNAME=
+GOP_CASDOOR_APPLICATIONNAME=
 
-# OpenAI
+# OpenAI compatible
 OPENAI_API_KEY=
 OPENAI_API_ENDPOINT=
 OPENAI_MODEL_ID=
 
+
+
 # OpenAI (PREMIUM)
 OPENAI_PREMIUM_API_KEY=
 OPENAI_PREMIUM_API_ENDPOINT=
 OPENAI_PREMIUM_MODEL_ID=
+
+# SVG Generation Providers
+
+# SVG.IO Provider
+SVGIO_ENABLED=
+SVGIO_BASE_URL=
+SVGIO_GENERATE_ENDPOINT=
+SVGIO_TIMEOUT=
+SVGIO_MAX_RETRIES=
+SVGIO_API_KEY=
+
+# Recraft Provider
+RECRAFT_ENABLED=
+RECRAFT_BASE_URL=
+RECRAFT_GENERATE_ENDPOINT=
+RECRAFT_VECTORIZE_ENDPOINT=
+RECRAFT_DEFAULT_MODEL=
+RECRAFT_SUPPORTED_MODELS=
+RECRAFT_TIMEOUT=
+RECRAFT_MAX_RETRIES=
+RECRAFT_API_KEY=
+
+# OpenAI Provider for SVG Generation (supports all OpenAI compatible models)
+SVG_OPENAI_ENABLED=
+SVG_OPENAI_BASE_URL=
+SVG_OPENAI_DEFAULT_MODEL=
+SVG_OPENAI_MAX_TOKENS=
+SVG_OPENAI_TEMPERATURE=
+SVG_OPENAI_TIMEOUT=
+SVG_OPENAI_MAX_RETRIES=
+SVG_OPENAI_API_KEY=
+
+# Translation Service for SVG Generation
+TRANSLATION_ENABLED=
+TRANSLATION_SERVICE_URL=
+TRANSLATION_DEFAULT_MODEL=
+TRANSLATION_TIMEOUT=
+TRANSLATION_MAX_RETRIES=
+TRANSLATION_API_KEY=
+
diff --git a/spx-backend/SVG_GENERATION_CONFIG.md b/spx-backend/SVG_GENERATION_CONFIG.md
new file mode 100644
index 000000000..5b7085744
--- /dev/null
+++ b/spx-backend/SVG_GENERATION_CONFIG.md
@@ -0,0 +1,217 @@
+# SVG Generation Configuration Guide
+
+This document explains how to configure the SVG generation services in spx-backend.
+
+## Environment Variables
+
+The following environment variables have been added to support SVG generation functionality:
+
+### SVG.IO Provider
+
+SVG.IO is a direct SVG generation service that provides high-quality vector graphics.
+
+```bash
+# Enable/disable the SVG.IO provider
+SVGIO_ENABLED=true
+
+# SVG.IO API base URL
+SVGIO_BASE_URL=https://api.svg.io
+
+# API endpoint for image generation
+SVGIO_GENERATE_ENDPOINT=/v1/generate-image
+
+# Request timeout
+SVGIO_TIMEOUT=60s
+
+# Maximum retry attempts
+SVGIO_MAX_RETRIES=3
+
+# API key (required for production use)
+# SVGIO_API_KEY=your_svgio_api_key_here
+```
+
+### Recraft Provider
+
+Recraft is an AI-powered image generation service that can create high-quality images and convert them to SVG format.
+
+```bash
+# Enable/disable the Recraft provider
+RECRAFT_ENABLED=true
+
+# Recraft API base URL
+RECRAFT_BASE_URL=https://external.api.recraft.ai
+
+# API endpoints
+RECRAFT_GENERATE_ENDPOINT=/v1/images/generations
+RECRAFT_VECTORIZE_ENDPOINT=/v1/images/vectorize
+
+# Default model to use
+RECRAFT_DEFAULT_MODEL=recraftv3
+
+# Supported models (comma-separated)
+RECRAFT_SUPPORTED_MODELS=recraftv3,recraftv2
+
+# Request timeout
+RECRAFT_TIMEOUT=60s
+
+# Maximum retry attempts
+RECRAFT_MAX_RETRIES=3
+
+# API key (required for production use)
+# RECRAFT_API_KEY=your_recraft_api_key_here
+```
+
+### OpenAI Compatible Provider for SVG Generation
+
+This provider uses OpenAI-compatible APIs to generate SVG code directly using large language models.
+
+```bash
+# Enable/disable the OpenAI SVG provider
+SVG_OPENAI_ENABLED=true
+
+# API base URL (supports OpenAI, Claude, and other compatible services)
+SVG_OPENAI_BASE_URL=https://api.qnaigc.com/v1/
+
+# Default model to use for SVG generation
+SVG_OPENAI_DEFAULT_MODEL=claude-4.0-sonnet
+
+# Maximum tokens for generation
+SVG_OPENAI_MAX_TOKENS=4000
+
+# Temperature for generation (0.0 - 1.0)
+SVG_OPENAI_TEMPERATURE=0.7
+
+# Request timeout
+SVG_OPENAI_TIMEOUT=60s
+
+# Maximum retry attempts
+SVG_OPENAI_MAX_RETRIES=3
+
+# API key (required for production use)
+# SVG_OPENAI_API_KEY=your_openai_compatible_api_key_here
+```
+
+### Translation Service
+
+The translation service is used to translate prompts from Chinese to English when using providers that don't support Chinese input.
+
+```bash
+# Enable/disable translation service
+TRANSLATION_ENABLED=true
+
+# Translation service URL
+TRANSLATION_SERVICE_URL=https://api.qnaigc.com/v1/chat/completions
+
+# Model to use for translation
+TRANSLATION_DEFAULT_MODEL=claude-4.0-sonnet
+
+# Request timeout
+TRANSLATION_TIMEOUT=45s
+
+# Maximum retry attempts
+TRANSLATION_MAX_RETRIES=2
+
+# API key for translation service
+# TRANSLATION_API_KEY=your_translation_api_key_here
+```
+
+## API Endpoints
+
+The following API endpoints are now available:
+
+### POST /image/svg
+Generates and returns SVG content directly.
+
+**Request Body:**
+```json
+{
+  "prompt": "A cute cartoon cat sitting on a cloud",
+  "style": "vector_illustration",
+  "provider": "svgio",
+  "negative_prompt": "ugly, blurred",
+  "skip_translate": false,
+  "model": "recraftv3",
+  "size": "1024x1024",
+  "substyle": "flat",
+  "n": 1
+}
+```
+
+**Response:**
+- Content-Type: `image/svg+xml`
+- Body: SVG file content
+- Headers include metadata (ID, dimensions, provider, etc.)
+
+### POST /image
+Generates an image and returns metadata information.
+
+**Request Body:** Same as above
+
+**Response:**
+```json
+{
+  "id": "svgio_1234567890",
+  "svg_url": "https://example.com/generated.svg",
+  "png_url": "https://example.com/generated.png",
+  "width": 1024,
+  "height": 1024,
+  "provider": "svgio",
+  "original_prompt": "一只可爱的猫",
+  "translated_prompt": "A cute cat",
+  "was_translated": true,
+  "created_at": "2025-01-01T12:00:00Z"
+}
+```
+
+## Provider Selection
+
+You can specify which provider to use in the request:
+
+- `"svgio"` - SVG.IO service (default)
+- `"recraft"` - Recraft AI service
+- `"openai"` - OpenAI-compatible LLM service
+
+Each provider has different strengths:
+
+- **SVG.IO**: Direct SVG generation, good for simple vector graphics
+- **Recraft**: High-quality AI image generation with vectorization
+- **OpenAI**: LLM-powered SVG code generation, highly customizable
+
+## Development Setup
+
+1. Copy the environment variables from `.env.dev` to your local environment
+2. Uncomment and set the API keys for the providers you want to use
+3. Adjust the base URLs and models as needed for your setup
+4. Start the server and test the endpoints
+
+## Production Considerations
+
+1. **API Keys**: Ensure all production API keys are properly secured
+2. **Rate Limiting**: Consider implementing rate limiting for the SVG generation endpoints
+3. **Caching**: Consider caching generated SVGs to reduce API costs
+4. **Monitoring**: Monitor API usage and costs for each provider
+5. **Fallbacks**: Configure multiple providers for redundancy
+
+## Example Usage
+
+```bash
+# Generate SVG directly
+curl -X POST http://localhost:8080/image/svg \
+  -H "Content-Type: application/json" \
+  -d '{
+    "prompt": "A minimalist mountain landscape",
+    "style": "flat_vector",
+    "provider": "svgio"
+  }' \
+  -o generated.svg
+
+# Get image metadata
+curl -X POST http://localhost:8080/image \
+  -H "Content-Type: application/json" \
+  -d '{
+    "prompt": "A futuristic city skyline",
+    "provider": "recraft",
+    "model": "recraftv3",
+    "size": "1024x1024"
+  }'
+```
\ No newline at end of file
diff --git a/spx-backend/cmd/spx-backend/post_image.yap b/spx-backend/cmd/spx-backend/post_image.yap
new file mode 100644
index 000000000..b51e7c163
--- /dev/null
+++ b/spx-backend/cmd/spx-backend/post_image.yap
@@ -0,0 +1,27 @@
+// Generate image and return metadata.
+//
+// Request:
+//   POST /image
+
+import (
+	"github.com/goplus/builder/spx-backend/internal/controller"
+)
+
+ctx := &Context
+
+params := &controller.GenerateImageParams{}
+if !parseJSON(ctx, params) {
+	return
+}
+if ok, msg := params.Validate(); !ok {
+	replyWithCodeMsg(ctx, errorInvalidArgs, msg)
+	return
+}
+
+result, err := ctrl.GenerateImage(ctx.Context(), params)
+if err != nil {
+	replyWithInnerError(ctx, err)
+	return
+}
+
+json result
\ No newline at end of file
diff --git a/spx-backend/cmd/spx-backend/post_image_svg.yap b/spx-backend/cmd/spx-backend/post_image_svg.yap
new file mode 100644
index 000000000..8a7bf4107
--- /dev/null
+++ b/spx-backend/cmd/spx-backend/post_image_svg.yap
@@ -0,0 +1,34 @@
+// Generate SVG image directly.
+//
+// Request:
+//   POST /image/svg
+
+import (
+	"github.com/goplus/builder/spx-backend/internal/controller"
+)
+
+ctx := &Context
+
+params := &controller.GenerateSVGParams{}
+if !parseJSON(ctx, params) {
+	return
+}
+if ok, msg := params.Validate(); !ok {
+	replyWithCodeMsg(ctx, errorInvalidArgs, msg)
+	return
+}
+
+result, err := ctrl.GenerateSVG(ctx.Context(), params)
+if err != nil {
+	replyWithInnerError(ctx, err)
+	return
+}
+
+// Set response headers
+for key, value := range result.Headers {
+	ctx.ResponseWriter.Header().Set(key, value)
+}
+
+// Write SVG content directly
+ctx.ResponseWriter.WriteHeader(200)
+ctx.ResponseWriter.Write(result.Data)
\ No newline at end of file
diff --git a/spx-backend/cmd/spx-backend/xgo_autogen.go b/spx-backend/cmd/spx-backend/xgo_autogen.go
index 517148434..6c9041616 100644
--- a/spx-backend/cmd/spx-backend/xgo_autogen.go
+++ b/spx-backend/cmd/spx-backend/xgo_autogen.go
@@ -152,6 +152,14 @@ type post_course struct {
 	yap.Handler
 	*AppV2
 }
+type post_image struct {
+	yap.Handler
+	*AppV2
+}
+type post_image_svg struct {
+	yap.Handler
+	*AppV2
+}
 type post_project_release struct {
 	yap.Handler
 	*AppV2
@@ -317,19 +325,21 @@ func (this *AppV2) Main() {
 	_xgo_obj27 := &post_copilot_stream_message{AppV2: this}
 	_xgo_obj28 := &post_course_series{AppV2: this}
 	_xgo_obj29 := &post_course{AppV2: this}
-	_xgo_obj30 := &post_project_release{AppV2: this}
-	_xgo_obj31 := &post_project{AppV2: this}
-	_xgo_obj32 := &post_project_owner_name_liking{AppV2: this}
-	_xgo_obj33 := &post_project_owner_name_view{AppV2: this}
-	_xgo_obj34 := &post_user_username_following{AppV2: this}
-	_xgo_obj35 := &post_util_fileurls{AppV2: this}
-	_xgo_obj36 := &post_workflow_stream_message{AppV2: this}
-	_xgo_obj37 := &put_asset_id{AppV2: this}
-	_xgo_obj38 := &put_course_series_id{AppV2: this}
-	_xgo_obj39 := &put_course_id{AppV2: this}
-	_xgo_obj40 := &put_project_owner_name{AppV2: this}
-	_xgo_obj41 := &put_user{AppV2: this}
-	yap.Gopt_AppV2_Main(this, _xgo_obj0, _xgo_obj1, _xgo_obj2, _xgo_obj3, _xgo_obj4, _xgo_obj5, _xgo_obj6, _xgo_obj7, _xgo_obj8, _xgo_obj9, _xgo_obj10, _xgo_obj11, _xgo_obj12, _xgo_obj13, _xgo_obj14, _xgo_obj15, _xgo_obj16, _xgo_obj17, _xgo_obj18, _xgo_obj19, _xgo_obj20, _xgo_obj21, _xgo_obj22, _xgo_obj23, _xgo_obj24, _xgo_obj25, _xgo_obj26, _xgo_obj27, _xgo_obj28, _xgo_obj29, _xgo_obj30, _xgo_obj31, _xgo_obj32, _xgo_obj33, _xgo_obj34, _xgo_obj35, _xgo_obj36, _xgo_obj37, _xgo_obj38, _xgo_obj39, _xgo_obj40, _xgo_obj41)
+	_xgo_obj30 := &post_image{AppV2: this}
+	_xgo_obj31 := &post_image_svg{AppV2: this}
+	_xgo_obj32 := &post_project_release{AppV2: this}
+	_xgo_obj33 := &post_project{AppV2: this}
+	_xgo_obj34 := &post_project_owner_name_liking{AppV2: this}
+	_xgo_obj35 := &post_project_owner_name_view{AppV2: this}
+	_xgo_obj36 := &post_user_username_following{AppV2: this}
+	_xgo_obj37 := &post_util_fileurls{AppV2: this}
+	_xgo_obj38 := &post_workflow_stream_message{AppV2: this}
+	_xgo_obj39 := &put_asset_id{AppV2: this}
+	_xgo_obj40 := &put_course_series_id{AppV2: this}
+	_xgo_obj41 := &put_course_id{AppV2: this}
+	_xgo_obj42 := &put_project_owner_name{AppV2: this}
+	_xgo_obj43 := &put_user{AppV2: this}
+	yap.Gopt_AppV2_Main(this, _xgo_obj0, _xgo_obj1, _xgo_obj2, _xgo_obj3, _xgo_obj4, _xgo_obj5, _xgo_obj6, _xgo_obj7, _xgo_obj8, _xgo_obj9, _xgo_obj10, _xgo_obj11, _xgo_obj12, _xgo_obj13, _xgo_obj14, _xgo_obj15, _xgo_obj16, _xgo_obj17, _xgo_obj18, _xgo_obj19, _xgo_obj20, _xgo_obj21, _xgo_obj22, _xgo_obj23, _xgo_obj24, _xgo_obj25, _xgo_obj26, _xgo_obj27, _xgo_obj28, _xgo_obj29, _xgo_obj30, _xgo_obj31, _xgo_obj32, _xgo_obj33, _xgo_obj34, _xgo_obj35, _xgo_obj36, _xgo_obj37, _xgo_obj38, _xgo_obj39, _xgo_obj40, _xgo_obj41, _xgo_obj42, _xgo_obj43)
 }
 //line cmd/spx-backend/delete_asset_#id.yap:6
 func (this *delete_asset_id) Main(_xgo_arg0 *yap.Context) {
@@ -1857,6 +1867,94 @@ func (this *post_course) Classclone() yap.HandlerProto {
 	_xgo_ret := *this
 	return &_xgo_ret
 }
+//line cmd/spx-backend/post_image.yap:10
+func (this *post_image) Main(_xgo_arg0 *yap.Context) {
+	this.Handler.Main(_xgo_arg0)
+//line cmd/spx-backend/post_image.yap:10:1
+	ctx := &this.Context
+//line cmd/spx-backend/post_image.yap:12:1
+	params := &controller.GenerateImageParams{}
+//line cmd/spx-backend/post_image.yap:13:1
+	if !parseJSON(ctx, params) {
+//line cmd/spx-backend/post_image.yap:14:1
+		return
+	}
+//line cmd/spx-backend/post_image.yap:16:1
+	if
+//line cmd/spx-backend/post_image.yap:16:1
+	ok, msg := params.Validate(); !ok {
+//line cmd/spx-backend/post_image.yap:17:1
+		replyWithCodeMsg(ctx, errorInvalidArgs, msg)
+//line cmd/spx-backend/post_image.yap:18:1
+		return
+	}
+//line cmd/spx-backend/post_image.yap:21:1
+	result, err := this.ctrl.GenerateImage(ctx.Context(), params)
+//line cmd/spx-backend/post_image.yap:22:1
+	if err != nil {
+//line cmd/spx-backend/post_image.yap:23:1
+		replyWithInnerError(ctx, err)
+//line cmd/spx-backend/post_image.yap:24:1
+		return
+	}
+//line cmd/spx-backend/post_image.yap:27:1
+	this.Json__1(result)
+}
+func (this *post_image) Classfname() string {
+	return "post_image"
+}
+func (this *post_image) Classclone() yap.HandlerProto {
+	_xgo_ret := *this
+	return &_xgo_ret
+}
+//line cmd/spx-backend/post_image_svg.yap:10
+func (this *post_image_svg) Main(_xgo_arg0 *yap.Context) {
+	this.Handler.Main(_xgo_arg0)
+//line cmd/spx-backend/post_image_svg.yap:10:1
+	ctx := &this.Context
+//line cmd/spx-backend/post_image_svg.yap:12:1
+	params := &controller.GenerateSVGParams{}
+//line cmd/spx-backend/post_image_svg.yap:13:1
+	if !parseJSON(ctx, params) {
+//line cmd/spx-backend/post_image_svg.yap:14:1
+		return
+	}
+//line cmd/spx-backend/post_image_svg.yap:16:1
+	if
+//line cmd/spx-backend/post_image_svg.yap:16:1
+	ok, msg := params.Validate(); !ok {
+//line cmd/spx-backend/post_image_svg.yap:17:1
+		replyWithCodeMsg(ctx, errorInvalidArgs, msg)
+//line cmd/spx-backend/post_image_svg.yap:18:1
+		return
+	}
+//line cmd/spx-backend/post_image_svg.yap:21:1
+	result, err := this.ctrl.GenerateSVG(ctx.Context(), params)
+//line cmd/spx-backend/post_image_svg.yap:22:1
+	if err != nil {
+//line cmd/spx-backend/post_image_svg.yap:23:1
+		replyWithInnerError(ctx, err)
+//line cmd/spx-backend/post_image_svg.yap:24:1
+		return
+	}
+	for
+//line cmd/spx-backend/post_image_svg.yap:28:1
+	key, value := range result.Headers {
+//line cmd/spx-backend/post_image_svg.yap:29:1
+		ctx.ResponseWriter.Header().Set(key, value)
+	}
+//line cmd/spx-backend/post_image_svg.yap:33:1
+	ctx.ResponseWriter.WriteHeader(200)
+//line cmd/spx-backend/post_image_svg.yap:34:1
+	ctx.ResponseWriter.Write(result.Data)
+}
+func (this *post_image_svg) Classfname() string {
+	return "post_image_svg"
+}
+func (this *post_image_svg) Classclone() yap.HandlerProto {
+	_xgo_ret := *this
+	return &_xgo_ret
+}
 //line cmd/spx-backend/post_project-release.yap:10
 func (this *post_project_release) Main(_xgo_arg0 *yap.Context) {
 	this.Handler.Main(_xgo_arg0)
diff --git a/spx-backend/internal/config/config.go b/spx-backend/internal/config/config.go
index ca850f717..e7a2a8450 100644
--- a/spx-backend/internal/config/config.go
+++ b/spx-backend/internal/config/config.go
@@ -1,19 +1,30 @@
 package config
 
+import (
+
+	"time"
+)
+
 // Config holds all configuration for the application.
 type Config struct {
-	Server   ServerConfig
-	Database DatabaseConfig
-	Redis    RedisConfig
-	Kodo     KodoConfig
-	Casdoor  CasdoorConfig
-	OpenAI   OpenAIConfig
-	AIGC     AIGCConfig
+	Server      ServerConfig
+	Database    DatabaseConfig
+	Redis       RedisConfig
+	Kodo        KodoConfig
+	Casdoor     CasdoorConfig
+	OpenAI      OpenAIConfig
+	AIGC        AIGCConfig
+	Providers   ProvidersConfig
+	Translation TranslationConfig
 }
 
 // ServerConfig holds server configuration.
 type ServerConfig struct {
-	Port string
+	Port         string
+	Host         string
+	Timeout      time.Duration
+	ReadTimeout  time.Duration
+	WriteTimeout time.Duration
 }
 
 // GetPort returns the server port, defaulting to ":8080" if not set.
@@ -24,6 +35,22 @@ func (c *ServerConfig) GetPort() string {
 	return ":8080"
 }
 
+// GetServerAddr returns the server listen address.
+func (c *ServerConfig) GetServerAddr() string {
+	host := c.Host
+	if host == "" {
+		host = "0.0.0.0"
+	}
+	port := c.Port
+	if port == "" {
+		port = ":8080"
+	}
+	if port[0] != ':' {
+		port = ":" + port
+	}
+	return host + port
+}
+
 // DatabaseConfig holds database configuration.
 type DatabaseConfig struct {
 	DSN string
@@ -111,3 +138,75 @@ func (c *OpenAIConfig) GetPremiumModelID() string {
 type AIGCConfig struct {
 	Endpoint string
 }
+
+// ProvidersConfig holds provider configurations for SVG generation.
+type ProvidersConfig struct {
+	SVGIO   SVGIOConfig
+	Recraft RecraftConfig
+	SVGOpenAI OpenAISVGConfig
+}
+
+// SVGIOConfig holds SVG.IO provider configuration.
+type SVGIOConfig struct {
+	BaseURL    string
+	Timeout    time.Duration
+	MaxRetries int
+	Enabled    bool
+	Endpoints  SVGIOEndpoints
+}
+
+// SVGIOEndpoints holds SVG.IO API endpoint configuration.
+type SVGIOEndpoints struct {
+	Generate string
+}
+
+// RecraftConfig holds Recraft provider configuration.
+type RecraftConfig struct {
+	BaseURL         string
+	Timeout         time.Duration
+	MaxRetries      int
+	Enabled         bool
+	DefaultModel    string
+	SupportedModels []string
+	Endpoints       RecraftEndpoints
+}
+
+// RecraftEndpoints holds Recraft API endpoint configuration.
+type RecraftEndpoints struct {
+	Generate   string
+	Vectorize  string
+}
+
+// OpenAISVGConfig holds OpenAI provider configuration for SVG generation (supports all OpenAI compatible models).
+type OpenAISVGConfig struct {
+	BaseURL      string
+	Timeout      time.Duration
+	MaxRetries   int
+	Enabled      bool
+	DefaultModel string
+	MaxTokens    int
+	Temperature  float64
+}
+
+// TranslationConfig holds translation service configuration.
+type TranslationConfig struct {
+	Enabled      bool
+	ServiceURL   string
+	DefaultModel string
+	Timeout      time.Duration
+	MaxRetries   int
+}
+
+// IsProviderEnabled checks if a provider is enabled.
+func (c *Config) IsProviderEnabled(provider string) bool {
+	switch provider {
+	case "svgio":
+		return c.Providers.SVGIO.Enabled
+	case "recraft":
+		return c.Providers.Recraft.Enabled
+	case "openai":
+		return c.Providers.SVGOpenAI.Enabled
+	default:
+		return false
+	}
+}
diff --git a/spx-backend/internal/config/loader.go b/spx-backend/internal/config/loader.go
index 2aeb63b0a..4b748f864 100644
--- a/spx-backend/internal/config/loader.go
+++ b/spx-backend/internal/config/loader.go
@@ -5,6 +5,8 @@ import (
 	"io/fs"
 	"os"
 	"strconv"
+	"strings"
+	"time"
 
 	"github.com/joho/godotenv"
 	"github.com/qiniu/x/log"
@@ -57,6 +59,47 @@ func Load(logger *log.Logger) (*Config, error) {
 		AIGC: AIGCConfig{
 			Endpoint: mustGetEnv(logger, "AIGC_ENDPOINT"),
 		},
+
+		
+		Providers: ProvidersConfig{
+			SVGIO: SVGIOConfig{
+				BaseURL:    getEnvAsString("SVGIO_BASE_URL", "https://api.svg.io"),
+				Timeout:    getEnvAsDuration("SVGIO_TIMEOUT", "60s"),
+				MaxRetries: getEnvAsInt("SVGIO_MAX_RETRIES", 3),
+				Enabled:    getEnvAsBool("SVGIO_ENABLED", true),
+				Endpoints: SVGIOEndpoints{
+					Generate: getEnvAsString("SVGIO_GENERATE_ENDPOINT", "/v1/generate-image"),
+				},
+			},
+			Recraft: RecraftConfig{
+				BaseURL:         getEnvAsString("RECRAFT_BASE_URL", "https://external.api.recraft.ai"),
+				Timeout:         getEnvAsDuration("RECRAFT_TIMEOUT", "60s"),
+				MaxRetries:      getEnvAsInt("RECRAFT_MAX_RETRIES", 3),
+				Enabled:         getEnvAsBool("RECRAFT_ENABLED", true),
+				DefaultModel:    getEnvAsString("RECRAFT_DEFAULT_MODEL", "recraftv3"),
+				SupportedModels: getEnvAsStringSlice("RECRAFT_SUPPORTED_MODELS", "recraftv3,recraftv2"),
+				Endpoints: RecraftEndpoints{
+					Generate:  getEnvAsString("RECRAFT_GENERATE_ENDPOINT", "/v1/images/generations"),
+					Vectorize: getEnvAsString("RECRAFT_VECTORIZE_ENDPOINT", "/v1/images/vectorize"),
+				},
+			},
+			SVGOpenAI: OpenAISVGConfig{
+				BaseURL:      getEnvAsString("SVG_OPENAI_BASE_URL", "https://api.qnaigc.com/v1/"),
+				Timeout:      getEnvAsDuration("SVG_OPENAI_TIMEOUT", "60s"),
+				MaxRetries:   getEnvAsInt("SVG_OPENAI_MAX_RETRIES", 3),
+				Enabled:      getEnvAsBool("SVG_OPENAI_ENABLED", true),
+				DefaultModel: getEnvAsString("SVG_OPENAI_DEFAULT_MODEL", "claude-4.0-sonnet"),
+				MaxTokens:    getEnvAsInt("SVG_OPENAI_MAX_TOKENS", 4000),
+				Temperature:  getEnvAsFloat("SVG_OPENAI_TEMPERATURE", 0.7),
+			},
+		},
+		Translation: TranslationConfig{
+			Enabled:      getEnvAsBool("TRANSLATION_ENABLED", true),
+			ServiceURL:   getEnvAsString("TRANSLATION_SERVICE_URL", "https://api.qnaigc.com/v1/chat/completions"),
+			DefaultModel: getEnvAsString("TRANSLATION_DEFAULT_MODEL", "claude-4.0-sonnet"),
+			Timeout:      getEnvAsDuration("TRANSLATION_TIMEOUT", "45s"),
+			MaxRetries:   getEnvAsInt("TRANSLATION_MAX_RETRIES", 2),
+		},
 	}
 	return config, nil
 }
@@ -79,3 +122,63 @@ func getIntEnv(key string) int {
 	intValue, _ := strconv.Atoi(value)
 	return intValue
 }
+
+// getEnvAsString gets the environment variable value or returns default value.
+func getEnvAsString(key, defaultValue string) string {
+	if value := os.Getenv(key); value != "" {
+		return value
+	}
+	return defaultValue
+}
+
+// getEnvAsInt gets an integer environment variable value or returns default value.
+func getEnvAsInt(key string, defaultValue int) int {
+	if value := os.Getenv(key); value != "" {
+		if intValue, err := strconv.Atoi(value); err == nil {
+			return intValue
+		}
+	}
+	return defaultValue
+}
+
+// getEnvAsFloat gets a float environment variable value or returns default value.
+func getEnvAsFloat(key string, defaultValue float64) float64 {
+	if value := os.Getenv(key); value != "" {
+		if floatValue, err := strconv.ParseFloat(value, 64); err == nil {
+			return floatValue
+		}
+	}
+	return defaultValue
+}
+
+// getEnvAsBool gets a boolean environment variable value or returns default value.
+func getEnvAsBool(key string, defaultValue bool) bool {
+	if value := os.Getenv(key); value != "" {
+		if boolValue, err := strconv.ParseBool(value); err == nil {
+			return boolValue
+		}
+	}
+	return defaultValue
+}
+
+// getEnvAsDuration gets a duration environment variable value or returns default value.
+func getEnvAsDuration(key, defaultValue string) time.Duration {
+	if value := os.Getenv(key); value != "" {
+		if duration, err := time.ParseDuration(value); err == nil {
+			return duration
+		}
+	}
+	if duration, err := time.ParseDuration(defaultValue); err == nil {
+		return duration
+	}
+	return 30 * time.Second // fallback default
+}
+
+// getEnvAsStringSlice gets a comma-separated string environment variable value or returns default value.
+func getEnvAsStringSlice(key, defaultValue string) []string {
+	value := getEnvAsString(key, defaultValue)
+	if value == "" {
+		return []string{}
+	}
+	return strings.Split(value, ",")
+}
diff --git a/spx-backend/internal/controller/controller.go b/spx-backend/internal/controller/controller.go
index ab4954ce6..cff781d0f 100644
--- a/spx-backend/internal/controller/controller.go
+++ b/spx-backend/internal/controller/controller.go
@@ -12,7 +12,9 @@ import (
 	"github.com/goplus/builder/spx-backend/internal/aiinteraction"
 	"github.com/goplus/builder/spx-backend/internal/config"
 	"github.com/goplus/builder/spx-backend/internal/copilot"
+	"github.com/goplus/builder/spx-backend/internal/log"
 	"github.com/goplus/builder/spx-backend/internal/model"
+	"github.com/goplus/builder/spx-backend/internal/svggen"
 	"github.com/goplus/builder/spx-backend/internal/workflow"
 	"github.com/openai/openai-go"
 	"github.com/openai/openai-go/option"
@@ -34,6 +36,7 @@ type Controller struct {
 	workflow      *workflow.Workflow
 	aiInteraction *aiinteraction.AIInteraction
 	aigc          *aigc.AigcClient
+	svggen        *svggen.ServiceManager
 }
 
 // New creates a new controller.
@@ -64,6 +67,9 @@ func New(ctx context.Context, db *gorm.DB, cfg *config.Config) (*Controller, err
 
 	aigcClient := aigc.NewAigcClient(cfg.AIGC.Endpoint)
 
+	// Initialize SVG generation service manager
+	svggenManager := svggen.NewServiceManager(cfg, log.GetLogger())
+
 	return &Controller{
 		db:            db,
 		kodo:          kodoClient,
@@ -71,6 +77,7 @@ func New(ctx context.Context, db *gorm.DB, cfg *config.Config) (*Controller, err
 		workflow:      stdflow,
 		aiInteraction: aiInteraction,
 		aigc:          aigcClient,
+		svggen:        svggenManager,
 	}, nil
 }
 
diff --git a/spx-backend/internal/controller/svg.go b/spx-backend/internal/controller/svg.go
new file mode 100644
index 000000000..655d4125c
--- /dev/null
+++ b/spx-backend/internal/controller/svg.go
@@ -0,0 +1,230 @@
+package controller
+
+import (
+	"context"
+	"encoding/base64"
+	"errors"
+	"fmt"
+	"strconv"
+	"strings"
+	"time"
+
+	"github.com/goplus/builder/spx-backend/internal/log"
+	"github.com/goplus/builder/spx-backend/internal/svggen"
+)
+
+// GenerateSVGParams represents parameters for SVG generation.
+type GenerateSVGParams struct {
+	Prompt         string            `json:"prompt"`
+	NegativePrompt string            `json:"negative_prompt,omitempty"`
+	Style          string            `json:"style,omitempty"`
+	Provider       svggen.Provider   `json:"provider,omitempty"`
+	Format         string            `json:"format,omitempty"`
+	SkipTranslate  bool              `json:"skip_translate,omitempty"`
+	Model          string            `json:"model,omitempty"`
+	Size           string            `json:"size,omitempty"`
+	Substyle       string            `json:"substyle,omitempty"`
+	NumImages      int               `json:"n,omitempty"`
+}
+
+// Validate validates the SVG generation parameters.
+func (p *GenerateSVGParams) Validate() (bool, string) {
+	if len(p.Prompt) < 3 {
+		return false, "prompt must be at least 3 characters"
+	}
+
+	if p.Provider == "" {
+		p.Provider = svggen.ProviderSVGIO // Default to SVGIO
+	}
+
+	// Validate provider
+	validProviders := []svggen.Provider{
+		svggen.ProviderSVGIO,
+		svggen.ProviderRecraft,
+		svggen.ProviderOpenAI,
+	}
+	isValid := false
+	for _, vp := range validProviders {
+		if p.Provider == vp {
+			isValid = true
+			break
+		}
+	}
+	if !isValid {
+		return false, "provider must be one of: svgio, recraft, openai"
+	}
+
+	return true, ""
+}
+
+// GenerateImageParams represents parameters for image generation (metadata only).
+type GenerateImageParams struct {
+	GenerateSVGParams
+}
+
+// SVGResponse represents the response for direct SVG requests.
+type SVGResponse struct {
+	Data   []byte            `json:"-"` // SVG content
+	Headers map[string]string `json:"-"` // Response headers
+}
+
+// ImageResponse represents the response for image metadata requests.
+type ImageResponse struct {
+	ID               string            `json:"id"`
+	SVGURL           string            `json:"svg_url"`
+	PNGURL           string            `json:"png_url,omitempty"`
+	Width            int               `json:"width"`
+	Height           int               `json:"height"`
+	Provider         svggen.Provider   `json:"provider"`
+	OriginalPrompt   string            `json:"original_prompt,omitempty"`
+	TranslatedPrompt string            `json:"translated_prompt,omitempty"`
+	WasTranslated    bool              `json:"was_translated"`
+	CreatedAt        time.Time         `json:"created_at"`
+}
+
+// GenerateSVG generates an SVG image and returns the SVG content directly.
+func (ctrl *Controller) GenerateSVG(ctx context.Context, params *GenerateSVGParams) (*SVGResponse, error) {
+	logger := log.GetReqLogger(ctx)
+	logger.Printf("GenerateSVG request - provider: %s, prompt: %q", params.Provider, params.Prompt)
+
+	// Convert to svggen request
+	req := svggen.GenerateRequest{
+		Prompt:         params.Prompt,
+		NegativePrompt: params.NegativePrompt,
+		Style:          params.Style,
+		Provider:       params.Provider,
+		Format:         params.Format,
+		SkipTranslate:  params.SkipTranslate,
+		Model:          params.Model,
+		Size:           params.Size,
+		Substyle:       params.Substyle,
+		NumImages:      params.NumImages,
+	}
+
+	// Generate image
+	result, err := ctrl.svggen.GenerateImage(ctx, req)
+	if err != nil {
+		logger.Printf("SVG generation failed: %v", err)
+		return nil, fmt.Errorf("failed to generate SVG: %w", err)
+	}
+
+	logger.Printf("SVG generation successful - ID: %s", result.ID)
+
+	// Download or parse SVG content
+	svgBytes, err := ctrl.getSVGContent(ctx, result.SVGURL)
+	if err != nil {
+		logger.Printf("Failed to get SVG content: %v", err)
+		return nil, fmt.Errorf("failed to get SVG content: %w", err)
+	}
+
+	// Prepare response headers
+	headers := map[string]string{
+		"Content-Type":        "image/svg+xml",
+		"Content-Disposition": fmt.Sprintf("attachment; filename=\"%s.svg\"", result.ID),
+		"X-Image-Id":          result.ID,
+		"X-Image-Width":       strconv.Itoa(result.Width),
+		"X-Image-Height":      strconv.Itoa(result.Height),
+		"X-Provider":          string(result.Provider),
+	}
+
+	// Add translation info if available
+	if result.WasTranslated {
+		headers["X-Original-Prompt"] = result.OriginalPrompt
+		headers["X-Translated-Prompt"] = result.TranslatedPrompt
+		headers["X-Was-Translated"] = "true"
+	}
+
+	return &SVGResponse{
+		Data:    svgBytes,
+		Headers: headers,
+	}, nil
+}
+
+// GenerateImage generates an image and returns metadata information.
+func (ctrl *Controller) GenerateImage(ctx context.Context, params *GenerateImageParams) (*ImageResponse, error) {
+	logger := log.GetReqLogger(ctx)
+	logger.Printf("GenerateImage request - provider: %s, prompt: %q", params.Provider, params.Prompt)
+
+	// Convert to svggen request
+	req := svggen.GenerateRequest{
+		Prompt:         params.Prompt,
+		NegativePrompt: params.NegativePrompt,
+		Style:          params.Style,
+		Provider:       params.Provider,
+		Format:         params.Format,
+		SkipTranslate:  params.SkipTranslate,
+		Model:          params.Model,
+		Size:           params.Size,
+		Substyle:       params.Substyle,
+		NumImages:      params.NumImages,
+	}
+
+	// Generate image
+	result, err := ctrl.svggen.GenerateImage(ctx, req)
+	if err != nil {
+		logger.Printf("Image generation failed: %v", err)
+		return nil, fmt.Errorf("failed to generate image: %w", err)
+	}
+
+	logger.Printf("Image generation successful - ID: %s", result.ID)
+
+	return &ImageResponse{
+		ID:               result.ID,
+		SVGURL:           result.SVGURL,
+		PNGURL:           result.PNGURL,
+		Width:            result.Width,
+		Height:           result.Height,
+		Provider:         result.Provider,
+		OriginalPrompt:   result.OriginalPrompt,
+		TranslatedPrompt: result.TranslatedPrompt,
+		WasTranslated:    result.WasTranslated,
+		CreatedAt:        result.CreatedAt,
+	}, nil
+}
+
+// getSVGContent retrieves SVG content from URL or data URL.
+func (ctrl *Controller) getSVGContent(ctx context.Context, svgURL string) ([]byte, error) {
+	if strings.HasPrefix(svgURL, "data:") {
+		// Parse data URL
+		return ctrl.parseDataURL(svgURL)
+	}
+
+	// Download from HTTP URL
+	return svggen.DownloadFile(ctx, svgURL)
+}
+
+// parseDataURL parses a data URL and returns the decoded content.
+func (ctrl *Controller) parseDataURL(dataURL string) ([]byte, error) {
+	// data URL format: data:[<mediatype>][;base64],<data>
+	// e.g., data:image/svg+xml;base64,<base64-encoded-data>
+
+	if !strings.HasPrefix(dataURL, "data:") {
+		return nil, errors.New("invalid data URL: missing data: prefix")
+	}
+
+	// Remove "data:" prefix
+	dataURL = dataURL[5:]
+
+	// Find comma separator
+	commaIndex := strings.Index(dataURL, ",")
+	if commaIndex == -1 {
+		return nil, errors.New("invalid data URL: missing comma separator")
+	}
+
+	// Get media type and encoding info
+	mediaType := dataURL[:commaIndex]
+	data := dataURL[commaIndex+1:]
+
+	// Check if it's base64 encoded
+	if strings.Contains(mediaType, "base64") {
+		// Base64 decode
+		decoded, err := base64.StdEncoding.DecodeString(data)
+		if err != nil {
+			return nil, fmt.Errorf("failed to decode base64 data: %w", err)
+		}
+		return decoded, nil
+	}
+
+	// Not base64 encoded, return string bytes directly
+	return []byte(data), nil
+}
\ No newline at end of file
diff --git a/spx-backend/internal/controller/svg_test.go b/spx-backend/internal/controller/svg_test.go
new file mode 100644
index 000000000..d5a1c0e07
--- /dev/null
+++ b/spx-backend/internal/controller/svg_test.go
@@ -0,0 +1,137 @@
+package controller
+
+import (
+	"testing"
+
+	"github.com/goplus/builder/spx-backend/internal/svggen"
+)
+
+func TestGenerateSVGParams_Validate(t *testing.T) {
+	tests := []struct {
+		name     string
+		params   GenerateSVGParams
+		wantOK   bool
+		wantMsg  string
+	}{
+		{
+			name: "valid parameters",
+			params: GenerateSVGParams{
+				Prompt:   "A cute cat",
+				Provider: svggen.ProviderSVGIO,
+			},
+			wantOK:  true,
+			wantMsg: "",
+		},
+		{
+			name: "prompt too short",
+			params: GenerateSVGParams{
+				Prompt: "hi",
+			},
+			wantOK:  false,
+			wantMsg: "prompt must be at least 3 characters",
+		},
+		{
+			name: "invalid provider",
+			params: GenerateSVGParams{
+				Prompt:   "A cute cat",
+				Provider: "invalid",
+			},
+			wantOK:  false,
+			wantMsg: "provider must be one of: svgio, recraft, openai",
+		},
+		{
+			name: "default provider",
+			params: GenerateSVGParams{
+				Prompt: "A cute cat",
+				// Provider not set - should default to SVGIO
+			},
+			wantOK:  true,
+			wantMsg: "",
+		},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			gotOK, gotMsg := tt.params.Validate()
+			if gotOK != tt.wantOK {
+				t.Errorf("Validate() gotOK = %v, want %v", gotOK, tt.wantOK)
+			}
+			if gotMsg != tt.wantMsg {
+				t.Errorf("Validate() gotMsg = %v, want %v", gotMsg, tt.wantMsg)
+			}
+			
+			// Check that default provider is set when not specified
+			if tt.params.Provider == "" && gotOK {
+				if tt.params.Provider != svggen.ProviderSVGIO {
+					t.Errorf("Default provider should be set to SVGIO, got %v", tt.params.Provider)
+				}
+			}
+		})
+	}
+}
+
+func TestGenerateImageParams_Validate(t *testing.T) {
+	params := GenerateImageParams{
+		GenerateSVGParams: GenerateSVGParams{
+			Prompt:   "A beautiful landscape",
+			Provider: svggen.ProviderRecraft,
+		},
+	}
+
+	ok, msg := params.Validate()
+	if !ok {
+		t.Errorf("GenerateImageParams validation failed: %s", msg)
+	}
+}
+
+func TestController_parseDataURL(t *testing.T) {
+	ctrl := &Controller{}
+
+	tests := []struct {
+		name     string
+		dataURL  string
+		wantErr  bool
+		wantData string
+	}{
+		{
+			name:     "valid base64 data URL",
+			dataURL:  "data:image/svg+xml;base64,PHN2Zz48L3N2Zz4=", // <svg></svg>
+			wantErr:  false,
+			wantData: "<svg></svg>",
+		},
+		{
+			name:     "valid plain data URL",
+			dataURL:  "data:image/svg+xml,<svg></svg>",
+			wantErr:  false,
+			wantData: "<svg></svg>",
+		},
+		{
+			name:    "invalid data URL - missing prefix",
+			dataURL: "image/svg+xml;base64,PHN2Zz48L3N2Zz4=",
+			wantErr: true,
+		},
+		{
+			name:    "invalid data URL - missing comma",
+			dataURL: "data:image/svg+xml;base64PHN2Zz48L3N2Zz4=",
+			wantErr: true,
+		},
+		{
+			name:    "invalid base64",
+			dataURL: "data:image/svg+xml;base64,invalid!!!",
+			wantErr: true,
+		},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			got, err := ctrl.parseDataURL(tt.dataURL)
+			if (err != nil) != tt.wantErr {
+				t.Errorf("parseDataURL() error = %v, wantErr %v", err, tt.wantErr)
+				return
+			}
+			if !tt.wantErr && string(got) != tt.wantData {
+				t.Errorf("parseDataURL() = %v, want %v", string(got), tt.wantData)
+			}
+		})
+	}
+}
\ No newline at end of file
diff --git a/spx-backend/internal/svggen/example_usage.md b/spx-backend/internal/svggen/example_usage.md
new file mode 100644
index 000000000..1f1571eaa
--- /dev/null
+++ b/spx-backend/internal/svggen/example_usage.md
@@ -0,0 +1,156 @@
+# SVG Generation Service Usage
+
+This document shows how to use the migrated SVG generation services in spx-backend.
+
+## Quick Start
+
+```go
+package main
+
+import (
+    "context"
+    "log"
+    
+    "github.com/goplus/builder/spx-backend/internal/config"
+    "github.com/goplus/builder/spx-backend/internal/svggen"
+    qlog "github.com/qiniu/x/log"
+)
+
+func main() {
+    // Load configuration
+    cfg, err := config.Load(qlog.Std)
+    if err != nil {
+        log.Fatal(err)
+    }
+    
+    // Create service manager
+    sm := svggen.NewServiceManager(cfg, qlog.Std)
+    
+    // Create generation request
+    req := svggen.GenerateRequest{
+        Prompt:   "A cute cartoon cat sitting on a cloud",
+        Style:    "vector_illustration",
+        Provider: svggen.ProviderSVGIO, // or ProviderRecraft, ProviderOpenAI
+        Format:   "svg",
+    }
+    
+    // Generate image
+    ctx := context.Background()
+    response, err := sm.GenerateImage(ctx, req)
+    if err != nil {
+        log.Fatal(err)
+    }
+    
+    // Use the response
+    fmt.Printf("Generated SVG ID: %s\n", response.ID)
+    fmt.Printf("SVG URL: %s\n", response.SVGURL)
+    fmt.Printf("PNG URL: %s\n", response.PNGURL)
+}
+```
+
+## Configuration
+
+The SVG generation services use the configuration from the main spx-backend config system. Make sure to set up the following environment variables:
+
+### SVGIO Provider
+```bash
+SVGIO_ENABLED=true
+SVGIO_BASE_URL=https://api.svg.io
+SVGIO_GENERATE_ENDPOINT=/v1/generate-image
+SVGIO_TIMEOUT=60s
+SVGIO_MAX_RETRIES=3
+```
+
+### Recraft Provider
+```bash
+RECRAFT_ENABLED=true
+RECRAFT_BASE_URL=https://external.api.recraft.ai
+RECRAFT_GENERATE_ENDPOINT=/v1/images/generations
+RECRAFT_VECTORIZE_ENDPOINT=/v1/images/vectorize
+RECRAFT_DEFAULT_MODEL=recraftv3
+RECRAFT_SUPPORTED_MODELS=recraftv3,recraftv2
+RECRAFT_TIMEOUT=60s
+RECRAFT_MAX_RETRIES=3
+```
+
+### OpenAI Provider (SVG Generation)
+```bash
+SVG_OPENAI_ENABLED=true
+SVG_OPENAI_BASE_URL=https://api.qnaigc.com/v1/
+SVG_OPENAI_DEFAULT_MODEL=claude-4.0-sonnet
+SVG_OPENAI_MAX_TOKENS=4000
+SVG_OPENAI_TEMPERATURE=0.7
+SVG_OPENAI_TIMEOUT=60s
+SVG_OPENAI_MAX_RETRIES=3
+```
+
+## API Integration
+
+To integrate this into the spx-backend HTTP API, you can create a new controller:
+
+```go
+// In internal/controller/svg.go
+package controller
+
+import (
+    "net/http"
+    
+    "github.com/goplus/builder/spx-backend/internal/svggen"
+    "github.com/gin-gonic/gin"
+)
+
+func (ctrl *Controller) GenerateSVG(c *gin.Context) {
+    var req svggen.GenerateRequest
+    if err := c.ShouldBindJSON(&req); err != nil {
+        c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
+        return
+    }
+    
+    response, err := ctrl.svgManager.GenerateImage(c.Request.Context(), req)
+    if err != nil {
+        c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
+        return
+    }
+    
+    c.JSON(http.StatusOK, response)
+}
+```
+
+## Provider Features
+
+### SVGIO
+- Direct SVG generation
+- Built-in PNG export
+- Style customization
+- Negative prompt support
+
+### Recraft  
+- High-quality image generation
+- Automatic vectorization for SVG
+- Multiple model support (recraftv3, recraftv2)
+- Style and substyle options
+
+### OpenAI
+- AI-powered SVG code generation  
+- Highly customizable prompts
+- Compatible with OpenAI API format
+- Supports various models (GPT-4, Claude, etc.)
+
+## Error Handling
+
+All services implement proper error handling and logging. Errors are returned with descriptive messages and logged with appropriate context.
+
+```go
+response, err := sm.GenerateImage(ctx, req)
+if err != nil {
+    // Handle specific errors
+    switch {
+    case strings.Contains(err.Error(), "provider not configured"):
+        // Provider is disabled or not set up
+    case strings.Contains(err.Error(), "http request"):
+        // Network or API errors
+    default:
+        // Other errors
+    }
+}
+```
\ No newline at end of file
diff --git a/spx-backend/internal/svggen/openai.go b/spx-backend/internal/svggen/openai.go
new file mode 100644
index 000000000..07b55fcd3
--- /dev/null
+++ b/spx-backend/internal/svggen/openai.go
@@ -0,0 +1,267 @@
+package svggen
+
+import (
+	"bytes"
+	"context"
+	"encoding/base64"
+	"encoding/json"
+	"fmt"
+	"net/http"
+	"os"
+	"regexp"
+	"strings"
+	"time"
+
+	"github.com/goplus/builder/spx-backend/internal/config"
+	"github.com/goplus/builder/spx-backend/internal/log"
+	qlog "github.com/qiniu/x/log"
+)
+
+// OpenAIService implements OpenAI compatible API calls.
+type OpenAIService struct {
+	config     *config.OpenAISVGConfig
+	httpClient *http.Client
+	logger     *qlog.Logger
+}
+
+// NewOpenAIService creates a new OpenAI service instance.
+func NewOpenAIService(cfg *config.Config, httpClient *http.Client, logger *qlog.Logger) *OpenAIService {
+	return &OpenAIService{
+		config:     &cfg.Providers.SVGOpenAI,
+		httpClient: httpClient,
+		logger:     logger,
+	}
+}
+
+// GenerateImage generates SVG code using OpenAI compatible models.
+func (s *OpenAIService) GenerateImage(ctx context.Context, req GenerateRequest) (*ImageResponse, error) {
+	logger := log.GetReqLogger(ctx)
+	logger.Printf("[OPENAI] Starting SVG generation request...")
+
+	// Build OpenAI prompt
+	prompt := s.buildSVGPrompt(req.Prompt, req.Style, req.NegativePrompt)
+
+	// Build OpenAI API request
+	openaiReq := OpenAIGenerateReq{
+		Model:       s.getModelFromConfig(req.Model),
+		MaxTokens:   s.config.MaxTokens,
+		Temperature: s.config.Temperature,
+		Messages: []OpenAIMessage{
+			{
+				Role: "system",
+				Content: `You are a world-class SVG graphics designer and vector artist with expertise in creating stunning, precise, and semantically meaningful SVG illustrations. Your specialties include:
+
+1. **Technical Excellence**: You create perfectly valid, optimized SVG code that renders flawlessly across all browsers and devices
+2. **Visual Design**: You have an exceptional eye for composition, color theory, typography, and visual hierarchy
+3. **Style Adaptation**: You can seamlessly adapt to any artistic style - from minimalist line art to detailed illustrations, from cartoon to realistic, from modern flat design to vintage aesthetics
+4. **Semantic Structure**: You use meaningful element IDs, proper grouping, and clean hierarchical structure in your SVG code
+5. **Optimization**: Your SVG code is clean, efficient, and follows best practices for file size and performance
+
+When creating SVG graphics, you:
+- Pay careful attention to the exact subject, style, and mood requested
+- Use appropriate colors, gradients, and visual effects to match the desired aesthetic
+- Ensure proper proportions, perspective, and composition
+- Add fine details that enhance the overall quality and realism
+- Create scalable graphics that look crisp at any size
+- Follow accessibility best practices when relevant
+
+You respond ONLY with clean, valid SVG code - no explanations, no code blocks, just the pure SVG markup ready to render.`,
+			},
+			{
+				Role:    "user",
+				Content: prompt,
+			},
+		},
+	}
+
+	body, err := json.Marshal(openaiReq)
+	if err != nil {
+		return nil, fmt.Errorf("marshal request: %w", err)
+	}
+
+	url := s.config.BaseURL + "chat/completions"
+	logger.Printf("[OPENAI] Sending request to %s", url)
+
+	httpReq, err := http.NewRequestWithContext(ctx, http.MethodPost, url, bytes.NewReader(body))
+	if err != nil {
+		return nil, fmt.Errorf("create request: %w", err)
+	}
+
+	httpReq.Header.Set("Content-Type", "application/json")
+	httpReq.Header.Set("Authorization", "Bearer "+s.getAPIKey())
+
+	resp, err := s.httpClient.Do(httpReq)
+	if err != nil {
+		logger.Printf("[OPENAI] HTTP request failed: %v", err)
+		return nil, fmt.Errorf("http request: %w", err)
+	}
+	defer resp.Body.Close()
+
+	logger.Printf("[OPENAI] Received response with status: %s", resp.Status)
+
+	if resp.StatusCode >= 300 {
+		var errResp map[string]interface{}
+		_ = json.NewDecoder(resp.Body).Decode(&errResp)
+		logger.Printf("[OPENAI] Error response body: %+v", errResp)
+		return nil, fmt.Errorf("openai API error: %s", resp.Status)
+	}
+
+	var openaiResp OpenAIGenerateResp
+	if err := json.NewDecoder(resp.Body).Decode(&openaiResp); err != nil {
+		logger.Printf("[OPENAI] Failed to decode response: %v", err)
+		return nil, fmt.Errorf("decode openai response: %w", err)
+	}
+
+	// Add debug information
+	logger.Printf("[OPENAI] Response structure: ID=%s, Object=%s, Model=%s, Choices length=%d",
+		openaiResp.ID, openaiResp.Object, openaiResp.Model, len(openaiResp.Choices))
+
+	// If there's content, print the first choice's content
+	if len(openaiResp.Choices) > 0 {
+		firstChoice := openaiResp.Choices[0]
+		logger.Printf("[OPENAI] First choice: Role=%s, Content prefix=%s",
+			firstChoice.Message.Role, s.truncateString(firstChoice.Message.Content, 100))
+	}
+
+	if len(openaiResp.Choices) == 0 {
+		logger.Printf("[OPENAI] Choices array is empty, response: %+v", openaiResp)
+		return nil, fmt.Errorf("no choices in openai response")
+	}
+
+	// Extract SVG code
+	svgContent := openaiResp.Choices[0].Message.Content
+	svgCode := s.extractSVGCode(svgContent)
+
+	if svgCode == "" {
+		logger.Printf("[OPENAI] No valid SVG found in response")
+		return nil, fmt.Errorf("no valid SVG generated")
+	}
+
+	// Generate temporary SVG file URL (in actual application, might need to save to file service)
+	imageID := GenerateImageID(ProviderOpenAI)
+	svgURL := s.createSVGDataURL(svgCode)
+
+	logger.Printf("[OPENAI] Successfully generated SVG - ID: %s", imageID)
+
+	return &ImageResponse{
+		ID:             imageID,
+		Prompt:         req.Prompt,
+		NegativePrompt: req.NegativePrompt,
+		Style:          req.Style,
+		SVGURL:         svgURL,
+		PNGURL:         svgURL, // OpenAI generates SVG code, both URLs are the same
+		Width:          1024,   // Default size
+		Height:         1024,
+		CreatedAt:      time.Now(),
+		Provider:       ProviderOpenAI,
+	}, nil
+}
+
+// buildSVGPrompt builds a prompt for generating SVG.
+func (s *OpenAIService) buildSVGPrompt(prompt, style, negativePrompt string) string {
+	var promptBuilder strings.Builder
+
+	promptBuilder.WriteString("Create a high-quality SVG illustration of: ")
+	promptBuilder.WriteString(prompt)
+
+	if style != "" {
+		promptBuilder.WriteString(fmt.Sprintf("\n\nArtistic style and visual requirements: %s", style))
+	}
+
+	if negativePrompt != "" {
+		promptBuilder.WriteString(fmt.Sprintf("\n\nIMPORTANT - Do NOT include these elements: %s", negativePrompt))
+	}
+
+	promptBuilder.WriteString(`
+
+Technical Requirements:
+• Use viewBox="0 0 1024 1024" for consistent sizing
+• Ensure the SVG is completely self-contained and valid
+• Use semantic and descriptive element IDs (e.g., id="main-character", id="background-sky")
+• Organize elements in logical groups using <g> tags
+• Use appropriate colors that match the subject and style
+• Include gradients, shadows, or other effects when they enhance the design
+• Ensure the illustration is centered and well-composed within the viewBox
+• Make it scalable and crisp at any resolution
+
+Visual Quality Standards:
+• Pay attention to proper proportions and anatomy
+• Use appropriate line weights and stroke styles
+• Include relevant details that make the illustration engaging
+• Ensure good contrast and readability
+• Follow the specified artistic style consistently
+• Create depth and dimension through layering and visual effects
+
+Output Format:
+Return ONLY the complete SVG code starting with <svg> and ending with </svg>. No explanations, no code blocks, no additional text.
+In SVG, do not use elements like rect; all drawing should be implemented via the path element.
+
+`)
+
+	return promptBuilder.String()
+}
+
+// extractSVGCode extracts SVG code from the response.
+func (s *OpenAIService) extractSVGCode(content string) string {
+	// Look for SVG tags
+	svgRegex := regexp.MustCompile(`(?s)<svg[^>]*>.*?</svg>`)
+	matches := svgRegex.FindString(content)
+
+	if matches != "" {
+		return matches
+	}
+
+	// If no complete SVG found, try to look for SVG code blocks
+	codeBlockRegex := regexp.MustCompile("(?s)```(?:svg|xml)?\n?(.*?)\n?```")
+	codeMatches := codeBlockRegex.FindStringSubmatch(content)
+
+	if len(codeMatches) > 1 {
+		svgCode := strings.TrimSpace(codeMatches[1])
+		if strings.Contains(svgCode, "<svg") {
+			return svgCode
+		}
+	}
+
+	// Finally try to see if the entire content is SVG
+	if strings.Contains(content, "<svg") && strings.Contains(content, "</svg>") {
+		return strings.TrimSpace(content)
+	}
+
+	return ""
+}
+
+// createSVGDataURL creates an SVG Data URL.
+func (s *OpenAIService) createSVGDataURL(svgCode string) string {
+	// For demonstration, we return a data URL
+	// In actual production environment, you might want to save to file service and return real URL
+	return fmt.Sprintf("data:image/svg+xml;base64,%s",
+		s.encodeSVGToBase64(svgCode))
+}
+
+// encodeSVGToBase64 encodes SVG to Base64.
+func (s *OpenAIService) encodeSVGToBase64(svgCode string) string {
+	return base64.StdEncoding.EncodeToString([]byte(svgCode))
+}
+
+// truncateString truncates string for logging.
+func (s *OpenAIService) truncateString(str string, maxLen int) string {
+	if len(str) <= maxLen {
+		return str
+	}
+	return str[:maxLen] + "..."
+}
+
+// getModelFromConfig gets model name from configuration or request.
+func (s *OpenAIService) getModelFromConfig(requestModel string) string {
+	if requestModel != "" {
+		return requestModel
+	}
+	return s.config.DefaultModel
+}
+
+// getAPIKey gets the API key from environment or configuration.
+func (s *OpenAIService) getAPIKey() string {
+	// Get API key from environment variable
+	// In production, consider using a more secure method like AWS Secrets Manager
+	return os.Getenv("SVG_OPENAI_API_KEY")
+}
diff --git a/spx-backend/internal/svggen/recraft.go b/spx-backend/internal/svggen/recraft.go
new file mode 100644
index 000000000..b2f486ef4
--- /dev/null
+++ b/spx-backend/internal/svggen/recraft.go
@@ -0,0 +1,258 @@
+package svggen
+
+import (
+	"bytes"
+	"context"
+	"encoding/json"
+	"errors"
+	"fmt"
+	"mime/multipart"
+	"net/http"
+	"os"
+	"strconv"
+	"strings"
+	"time"
+
+	"github.com/goplus/builder/spx-backend/internal/config"
+	"github.com/goplus/builder/spx-backend/internal/log"
+	qlog "github.com/qiniu/x/log"
+)
+
+// RecraftService implements Recraft API calls.
+type RecraftService struct {
+	config     *config.RecraftConfig
+	httpClient *http.Client
+	logger     *qlog.Logger
+}
+
+// NewRecraftService creates a new Recraft service instance.
+func NewRecraftService(cfg *config.Config, httpClient *http.Client, logger *qlog.Logger) *RecraftService {
+	return &RecraftService{
+		config:     &cfg.Providers.Recraft,
+		httpClient: httpClient,
+		logger:     logger,
+	}
+}
+
+// GenerateImage generates an image using Recraft API.
+func (s *RecraftService) GenerateImage(ctx context.Context, req GenerateRequest) (*ImageResponse, error) {
+	logger := log.GetReqLogger(ctx)
+	logger.Printf("[RECRAFT] Starting generation request...")
+
+	// Build optimized prompt (add transparent background requirement)
+	enhancedPrompt, enhancedNegativePrompt := s.buildRecraftPrompt(req.Prompt, req.Style, req.NegativePrompt)
+
+	logger.Printf("[RECRAFT] Original prompt: %s", req.Prompt)
+	logger.Printf("[RECRAFT] Enhanced prompt: %s", enhancedPrompt)
+	logger.Printf("[RECRAFT] Enhanced negative prompt: %s", enhancedNegativePrompt)
+
+	// Build Recraft API request
+	recraftReq := RecraftGenerateReq{
+		Prompt:         enhancedPrompt,
+		NegativePrompt: enhancedNegativePrompt,
+		Style:          req.Style,
+		Substyle:       req.Substyle,
+		Model:          req.Model,
+		Size:           req.Size,
+		N:              req.NumImages,
+		ResponseFormat: "url", // Fixed to use URL format
+	}
+
+	// Set default values
+	if recraftReq.Model == "" {
+		recraftReq.Model = s.config.DefaultModel
+	}
+	if recraftReq.Size == "" {
+		recraftReq.Size = "1024x1024"
+	}
+	if recraftReq.Style == "" {
+		recraftReq.Style = "vector_illustration"
+	}
+	if recraftReq.N == 0 {
+		recraftReq.N = 1
+	}
+
+	body, err := json.Marshal(recraftReq)
+	if err != nil {
+		return nil, fmt.Errorf("marshal request: %w", err)
+	}
+
+	url := s.config.BaseURL + s.config.Endpoints.Generate
+	logger.Printf("[RECRAFT] Sending request to %s with payload size: %d bytes", url, len(body))
+
+	httpReq, err := http.NewRequestWithContext(ctx, http.MethodPost, url, bytes.NewReader(body))
+	if err != nil {
+		return nil, fmt.Errorf("create request: %w", err)
+	}
+
+	httpReq.Header.Set("Content-Type", "application/json")
+	httpReq.Header.Set("Authorization", "Bearer "+s.getAPIKey())
+
+	resp, err := s.httpClient.Do(httpReq)
+	if err != nil {
+		logger.Printf("[RECRAFT] HTTP request failed: %v", err)
+		return nil, fmt.Errorf("http request: %w", err)
+	}
+	defer resp.Body.Close()
+
+	logger.Printf("[RECRAFT] Received response with status: %s", resp.Status)
+
+	if resp.StatusCode >= 300 {
+		var errResp map[string]interface{}
+		_ = json.NewDecoder(resp.Body).Decode(&errResp)
+		logger.Printf("[RECRAFT] Error response body: %+v", errResp)
+		return nil, fmt.Errorf("recraft API error: %s", resp.Status)
+	}
+
+	var recraftResp RecraftGenerateResp
+	if err := json.NewDecoder(resp.Body).Decode(&recraftResp); err != nil {
+		logger.Printf("[RECRAFT] Failed to decode response: %v", err)
+		return nil, fmt.Errorf("decode response: %w", err)
+	}
+
+	if len(recraftResp.Data) == 0 {
+		logger.Printf("[RECRAFT] No images in response")
+		return nil, errors.New("no images generated")
+	}
+
+	imageData := recraftResp.Data[0] // Take the first image
+	logger.Printf("[RECRAFT] Successfully parsed response - URL: %s", imageData.URL)
+
+	// Parse image dimensions
+	width, height := s.parseSizeFromString(recraftReq.Size)
+
+	// Generate a simple ID (Recraft doesn't provide one)
+	imageID := GenerateImageID(ProviderRecraft)
+
+	// For Recraft, we need to convert the image to SVG
+	// Here we can use Recraft's vectorize API
+	svgURL := imageData.URL // Default to original image
+
+	// If SVG is needed, call vectorize API
+	if req.Format == "svg" || strings.Contains(req.Style, "vector") {
+		vectorizedURL, err := s.vectorizeImage(ctx, imageData.URL)
+		if err != nil {
+			logger.Printf("[RECRAFT] Vectorization failed: %v", err)
+			// Continue with original image on failure
+		} else {
+			svgURL = vectorizedURL
+		}
+	}
+
+	return &ImageResponse{
+		ID:             imageID,
+		Prompt:         req.Prompt,
+		NegativePrompt: req.NegativePrompt,
+		Style:          recraftReq.Style,
+		SVGURL:         svgURL,
+		PNGURL:         imageData.URL,
+		Width:          width,
+		Height:         height,
+		CreatedAt:      time.Unix(int64(recraftResp.Created), 0),
+		Provider:       ProviderRecraft,
+	}, nil
+}
+
+// vectorizeImage uses Recraft's vectorization API to convert image to SVG.
+func (s *RecraftService) vectorizeImage(ctx context.Context, imageURL string) (string, error) {
+	logger := log.GetReqLogger(ctx)
+	logger.Printf("[RECRAFT] Vectorizing image: %s", imageURL)
+
+	// Download image
+	imageBytes, err := DownloadFile(ctx, imageURL)
+	if err != nil {
+		return "", fmt.Errorf("download image: %w", err)
+	}
+
+	// Create multipart form
+	var buf bytes.Buffer
+	writer := multipart.NewWriter(&buf)
+
+	// Add image file
+	part, err := writer.CreateFormFile("file", "image.png")
+	if err != nil {
+		return "", fmt.Errorf("create form file: %w", err)
+	}
+	_, err = part.Write(imageBytes)
+	if err != nil {
+		return "", fmt.Errorf("write image data: %w", err)
+	}
+
+	// Add response_format parameter
+	writer.WriteField("response_format", "url")
+	writer.Close()
+
+	url := s.config.BaseURL + s.config.Endpoints.Vectorize
+	httpReq, err := http.NewRequestWithContext(ctx, http.MethodPost, url, &buf)
+	if err != nil {
+		return "", fmt.Errorf("create vectorize request: %w", err)
+	}
+
+	httpReq.Header.Set("Content-Type", writer.FormDataContentType())
+	httpReq.Header.Set("Authorization", "Bearer "+s.getAPIKey())
+
+	resp, err := s.httpClient.Do(httpReq)
+	if err != nil {
+		return "", fmt.Errorf("vectorize request: %w", err)
+	}
+	defer resp.Body.Close()
+
+	if resp.StatusCode >= 300 {
+		return "", fmt.Errorf("vectorize API error: %s", resp.Status)
+	}
+
+	var vectorizeResp RecraftVectorizeResp
+	if err := json.NewDecoder(resp.Body).Decode(&vectorizeResp); err != nil {
+		return "", fmt.Errorf("decode vectorize response: %w", err)
+	}
+
+	logger.Printf("[RECRAFT] Vectorization successful - SVG URL: %s", vectorizeResp.Image.URL)
+	return vectorizeResp.Image.URL, nil
+}
+
+// parseSizeFromString parses size string like "1024x1024".
+func (s *RecraftService) parseSizeFromString(size string) (width, height int) {
+	parts := strings.Split(size, "x")
+	if len(parts) != 2 {
+		return 1024, 1024 // Default value
+	}
+
+	width, _ = strconv.Atoi(parts[0])
+	height, _ = strconv.Atoi(parts[1])
+
+	if width <= 0 {
+		width = 1024
+	}
+	if height <= 0 {
+		height = 1024
+	}
+
+	return width, height
+}
+
+// buildRecraftPrompt builds Recraft prompt, automatically adding transparent background requirement.
+func (s *RecraftService) buildRecraftPrompt(prompt, style, negativePrompt string) (string, string) {
+	var promptBuilder strings.Builder
+	var negativeBuilder strings.Builder
+
+	// Build main prompt
+	promptBuilder.WriteString(prompt)
+	promptBuilder.WriteString(", 背景色为透明色，不要背景边框")
+
+	// Build negative prompt
+	if negativePrompt != "" {
+		negativeBuilder.WriteString(negativePrompt)
+		negativeBuilder.WriteString(", ")
+	}
+
+	// Add default background-related negative prompts
+
+	return promptBuilder.String(), negativeBuilder.String()
+}
+
+// getAPIKey gets the API key from environment or configuration.
+func (s *RecraftService) getAPIKey() string {
+	// Get API key from environment variable
+	// In production, consider using a more secure method like AWS Secrets Manager
+	return os.Getenv("RECRAFT_API_KEY")
+}
\ No newline at end of file
diff --git a/spx-backend/internal/svggen/svggen.go b/spx-backend/internal/svggen/svggen.go
new file mode 100644
index 000000000..30e23e040
--- /dev/null
+++ b/spx-backend/internal/svggen/svggen.go
@@ -0,0 +1,107 @@
+package svggen
+
+import (
+	"context"
+	"errors"
+	"net/http"
+	"time"
+
+	"github.com/goplus/builder/spx-backend/internal/config"
+	"github.com/goplus/builder/spx-backend/internal/log"
+	qlog "github.com/qiniu/x/log"
+)
+
+// Provider interface defines the contract for image generation providers.
+type ProviderService interface {
+	GenerateImage(ctx context.Context, req GenerateRequest) (*ImageResponse, error)
+}
+
+// ServiceManager manages multiple upstream services.
+type ServiceManager struct {
+	svgioService   ProviderService
+	recraftService ProviderService
+	openaiService  ProviderService
+	httpClient     *http.Client
+	logger         *qlog.Logger
+}
+
+// NewServiceManager creates a new service manager.
+func NewServiceManager(cfg *config.Config, logger *qlog.Logger) *ServiceManager {
+	httpClient := &http.Client{
+		Timeout: 60 * time.Second,
+	}
+
+	sm := &ServiceManager{
+		httpClient: httpClient,
+		logger:     logger,
+	}
+
+	// Initialize providers based on configuration
+	if cfg.Providers.SVGIO.Enabled {
+		sm.svgioService = NewSVGIOService(cfg, httpClient, logger)
+	}
+
+	if cfg.Providers.Recraft.Enabled {
+		sm.recraftService = NewRecraftService(cfg, httpClient, logger)
+	}
+
+	if cfg.Providers.SVGOpenAI.Enabled {
+		sm.openaiService = NewOpenAIService(cfg, httpClient, logger)
+	}
+
+	return sm
+}
+
+// RegisterProvider registers a new provider.
+func (sm *ServiceManager) RegisterProvider(providerType Provider, provider ProviderService) {
+	switch providerType {
+	case ProviderSVGIO:
+		sm.svgioService = provider
+	case ProviderRecraft:
+		sm.recraftService = provider
+	case ProviderOpenAI:
+		sm.openaiService = provider
+	}
+}
+
+// GetProvider gets the specified provider.
+func (sm *ServiceManager) GetProvider(providerType Provider) ProviderService {
+	switch providerType {
+	case ProviderSVGIO:
+		return sm.svgioService
+	case ProviderRecraft:
+		return sm.recraftService
+	case ProviderOpenAI:
+		return sm.openaiService
+	default:
+		return sm.svgioService // Default to SVGIO
+	}
+}
+
+// GenerateImage generates an image using the specified provider.
+func (sm *ServiceManager) GenerateImage(ctx context.Context, req GenerateRequest) (*ImageResponse, error) {
+	logger := log.GetReqLogger(ctx)
+	
+	provider := sm.GetProvider(req.Provider)
+	if provider == nil {
+		logger.Printf("provider not configured: %s", string(req.Provider))
+		return nil, errors.New("provider not configured: " + string(req.Provider))
+	}
+	
+	logger.Printf("generating image with provider: %s", string(req.Provider))
+	return provider.GenerateImage(ctx, req)
+}
+
+// IsProviderEnabled checks if a provider is enabled.
+func (sm *ServiceManager) IsProviderEnabled(provider Provider) bool {
+	switch provider {
+	case ProviderSVGIO:
+		return sm.svgioService != nil
+	case ProviderRecraft:
+		return sm.recraftService != nil
+	case ProviderOpenAI:
+		return sm.openaiService != nil
+	default:
+		return false
+	}
+}
\ No newline at end of file
diff --git a/spx-backend/internal/svggen/svggen_test.go b/spx-backend/internal/svggen/svggen_test.go
new file mode 100644
index 000000000..a63c85bab
--- /dev/null
+++ b/spx-backend/internal/svggen/svggen_test.go
@@ -0,0 +1,119 @@
+package svggen
+
+import (
+	"context"
+	"testing"
+
+	"github.com/goplus/builder/spx-backend/internal/config"
+	qlog "github.com/qiniu/x/log"
+)
+
+func TestServiceManager_NewServiceManager(t *testing.T) {
+	cfg := &config.Config{
+		Providers: config.ProvidersConfig{
+			SVGIO: config.SVGIOConfig{
+				Enabled: true,
+				BaseURL: "https://api.svg.io",
+				Endpoints: config.SVGIOEndpoints{
+					Generate: "/v1/generate",
+				},
+			},
+			Recraft: config.RecraftConfig{
+				Enabled:      true,
+				BaseURL:      "https://api.recraft.ai",
+				DefaultModel: "recraftv3",
+				Endpoints: config.RecraftEndpoints{
+					Generate:  "/v1/images/generations",
+					Vectorize: "/v1/images/vectorize",
+				},
+			},
+			SVGOpenAI: config.OpenAISVGConfig{
+				Enabled:      true,
+				BaseURL:      "https://api.openai.com/v1",
+				DefaultModel: "gpt-4",
+				MaxTokens:    4000,
+				Temperature:  0.7,
+			},
+		},
+	}
+
+	logger := qlog.Std
+	sm := NewServiceManager(cfg, logger)
+
+	if sm == nil {
+		t.Fatal("ServiceManager should not be nil")
+	}
+
+	// Test provider availability
+	if !sm.IsProviderEnabled(ProviderSVGIO) {
+		t.Error("SVGIO provider should be enabled")
+	}
+
+	if !sm.IsProviderEnabled(ProviderRecraft) {
+		t.Error("Recraft provider should be enabled")
+	}
+
+	if !sm.IsProviderEnabled(ProviderOpenAI) {
+		t.Error("OpenAI provider should be enabled")
+	}
+}
+
+func TestServiceManager_GenerateImage(t *testing.T) {
+	cfg := &config.Config{
+		Providers: config.ProvidersConfig{
+			SVGIO: config.SVGIOConfig{
+				Enabled: false, // Disabled for test
+			},
+		},
+	}
+
+	logger := qlog.Std
+	sm := NewServiceManager(cfg, logger)
+
+	req := GenerateRequest{
+		Prompt:   "test prompt",
+		Provider: ProviderSVGIO,
+	}
+
+	ctx := context.Background()
+	_, err := sm.GenerateImage(ctx, req)
+
+	// Should return error since provider is not configured
+	if err == nil {
+		t.Error("Should return error for unconfigured provider")
+	}
+}
+
+func TestGenerateImageID(t *testing.T) {
+	id1 := GenerateImageID(ProviderSVGIO)
+	id2 := GenerateImageID(ProviderRecraft)
+
+	if id1 == id2 {
+		t.Error("Generated IDs should be different")
+	}
+
+	if id1 == "" || id2 == "" {
+		t.Error("Generated IDs should not be empty")
+	}
+}
+
+func TestParseSizeFromString(t *testing.T) {
+	tests := []struct {
+		input  string
+		width  int
+		height int
+	}{
+		{"512x512", 512, 512},
+		{"1024x1024", 1024, 1024},
+		{"", 1024, 1024},
+		{"invalid", 1024, 1024},
+	}
+
+	for _, test := range tests {
+		w, h := ParseSizeFromString(test.input)
+		if w != test.width || h != test.height {
+			t.Errorf("ParseSizeFromString(%s) = (%d, %d), want (%d, %d)",
+				test.input, w, h, test.width, test.height)
+		}
+	}
+}
\ No newline at end of file
diff --git a/spx-backend/internal/svggen/svgio.go b/spx-backend/internal/svggen/svgio.go
new file mode 100644
index 000000000..75d811973
--- /dev/null
+++ b/spx-backend/internal/svggen/svgio.go
@@ -0,0 +1,145 @@
+package svggen
+
+import (
+	"bytes"
+	"context"
+	"encoding/json"
+	"errors"
+	"net/http"
+	"os"
+	"time"
+
+	"github.com/goplus/builder/spx-backend/internal/config"
+	"github.com/goplus/builder/spx-backend/internal/log"
+	qlog "github.com/qiniu/x/log"
+)
+
+// SVGIOService implements SVG.IO API calls.
+type SVGIOService struct {
+	config     *config.SVGIOConfig
+	httpClient *http.Client
+	logger     *qlog.Logger
+}
+
+// NewSVGIOService creates a new SVG.IO service instance.
+func NewSVGIOService(cfg *config.Config, httpClient *http.Client, logger *qlog.Logger) *SVGIOService {
+	return &SVGIOService{
+		config:     &cfg.Providers.SVGIO,
+		httpClient: httpClient,
+		logger:     logger,
+	}
+}
+
+// svgioGenerateReq represents SVG.IO API generation request.
+type svgioGenerateReq struct {
+	Prompt         string  `json:"prompt"`
+	NegativePrompt *string `json:"negativePrompt,omitempty"`
+	Style          *string `json:"style,omitempty"`
+}
+
+// svgioGenerateResp represents SVG.IO API generation response.
+type svgioGenerateResp struct {
+	Success bool `json:"success"`
+	Data    []struct {
+		ID             string `json:"id"`
+		Prompt         string `json:"prompt"`
+		NegativePrompt string `json:"negativePrompt"`
+		Style          string `json:"style"`
+		SVGURL         string `json:"svgUrl"`
+		PNGURL         string `json:"pngUrl"`
+		Width          int    `json:"width"`
+		Height         int    `json:"height"`
+		CreatedAt      string `json:"createdAt"`
+	} `json:"data"`
+}
+
+// GenerateImage generates an image using SVG.IO API.
+func (s *SVGIOService) GenerateImage(ctx context.Context, req GenerateRequest) (*ImageResponse, error) {
+	logger := log.GetReqLogger(ctx)
+	logger.Printf("[SVGIO] Starting generation request...")
+
+	upReq := svgioGenerateReq{
+		Prompt:         req.Prompt,
+		NegativePrompt: &req.NegativePrompt,
+		Style:          &req.Style,
+	}
+	
+	if req.NegativePrompt == "" {
+		defaultNegativePrompt := "NULL"
+		upReq.NegativePrompt = &defaultNegativePrompt
+	}
+	
+	if req.Style == "" {
+		defaultStyle := "FLAT_VECTOR"
+		upReq.Style = &defaultStyle
+	}
+
+	body, err := json.Marshal(upReq)
+	if err != nil {
+		logger.Printf("[SVGIO] Failed to marshal request: %v", err)
+		return nil, err
+	}
+
+	apiURL := s.config.BaseURL + s.config.Endpoints.Generate
+	logger.Printf("[SVGIO] Sending request to %s with payload size: %d bytes", apiURL, len(body))
+
+	httpReq, err := http.NewRequestWithContext(ctx, http.MethodPost, apiURL, bytes.NewReader(body))
+	if err != nil {
+		logger.Printf("[SVGIO] Failed to create request: %v", err)
+		return nil, err
+	}
+
+	httpReq.Header.Set("Content-Type", "application/json")
+	httpReq.Header.Set("Authorization", "Bearer "+s.getAPIKey())
+
+	resp, err := s.httpClient.Do(httpReq)
+	if err != nil {
+		logger.Printf("[SVGIO] HTTP request failed: %v", err)
+		return nil, err
+	}
+	defer resp.Body.Close()
+
+	logger.Printf("[SVGIO] Received response with status: %s", resp.Status)
+
+	if resp.StatusCode >= 300 {
+		var raw interface{}
+		_ = json.NewDecoder(resp.Body).Decode(&raw)
+		logger.Printf("[SVGIO] Error response body: %+v", raw)
+		return nil, errors.New("upstream status: " + resp.Status)
+	}
+
+	var upResp svgioGenerateResp
+	if err := json.NewDecoder(resp.Body).Decode(&upResp); err != nil {
+		logger.Printf("[SVGIO] Failed to decode response: %v", err)
+		return nil, err
+	}
+	
+	if !upResp.Success || len(upResp.Data) == 0 {
+		logger.Printf("[SVGIO] Invalid response: success=%v, data_count=%d", upResp.Success, len(upResp.Data))
+		return nil, errors.New("upstream no data")
+	}
+	
+	it := upResp.Data[0]
+	logger.Printf("[SVGIO] Successfully parsed response - ID: %s, SVG: %s, PNG: %s", it.ID, it.SVGURL, it.PNGURL)
+
+	createdAt, _ := time.Parse(time.RFC3339, it.CreatedAt)
+	return &ImageResponse{
+		ID:             it.ID,
+		Prompt:         it.Prompt,
+		NegativePrompt: it.NegativePrompt,
+		Style:          it.Style,
+		SVGURL:         it.SVGURL,
+		PNGURL:         it.PNGURL,
+		Width:          it.Width,
+		Height:         it.Height,
+		CreatedAt:      createdAt,
+		Provider:       ProviderSVGIO,
+	}, nil
+}
+
+// getAPIKey gets the API key from environment or configuration.
+func (s *SVGIOService) getAPIKey() string {
+	// Get API key from environment variable
+	// In production, consider using a more secure method like AWS Secrets Manager
+	return os.Getenv("SVGIO_API_KEY")
+}
\ No newline at end of file
diff --git a/spx-backend/internal/svggen/types.go b/spx-backend/internal/svggen/types.go
new file mode 100644
index 000000000..16469d5a0
--- /dev/null
+++ b/spx-backend/internal/svggen/types.go
@@ -0,0 +1,141 @@
+package svggen
+
+import "time"
+
+// Provider defines different image generation providers.
+type Provider string
+
+const (
+	ProviderSVGIO   Provider = "svgio"
+	ProviderRecraft Provider = "recraft"
+	ProviderOpenAI  Provider = "openai"
+)
+
+// GenerateRequest represents a request to generate an SVG image.
+type GenerateRequest struct {
+	Prompt         string   `json:"prompt"`
+	NegativePrompt string   `json:"negative_prompt,omitempty"`
+	Style          string   `json:"style,omitempty"`
+	Provider       Provider `json:"provider,omitempty"`
+	Format         string   `json:"format,omitempty"`
+	SkipTranslate  bool     `json:"skip_translate,omitempty"`
+
+	// Recraft specific parameters
+	Model     string `json:"model,omitempty"`
+	Size      string `json:"size,omitempty"`
+	Substyle  string `json:"substyle,omitempty"`
+	NumImages int    `json:"n,omitempty"`
+}
+
+// ImageResponse represents the response from image generation.
+type ImageResponse struct {
+	ID             string    `json:"id"`
+	Prompt         string    `json:"prompt"`
+	NegativePrompt string    `json:"negative_prompt"`
+	Style          string    `json:"style"`
+	SVGURL         string    `json:"svg_url"`
+	PNGURL         string    `json:"png_url"`
+	Width          int       `json:"width"`
+	Height         int       `json:"height"`
+	CreatedAt      time.Time `json:"created_at"`
+	Provider       Provider  `json:"provider"`
+
+	// Translation related information
+	OriginalPrompt   string `json:"original_prompt,omitempty"`
+	TranslatedPrompt string `json:"translated_prompt,omitempty"`
+	WasTranslated    bool   `json:"was_translated"`
+}
+
+// SVG.IO upstream API related types
+type SVGIOGenerateReq struct {
+	Prompt         string `json:"prompt"`
+	NegativePrompt string `json:"negativePrompt"`
+	Style          string `json:"style,omitempty"`
+}
+
+type SVGIOGenerateItem struct {
+	ID                  string `json:"id"`
+	Description         string `json:"description"`
+	Height              int    `json:"height"`
+	HasInitialImage     bool   `json:"hasInitialImage"`
+	IsPrivate           bool   `json:"isPrivate"`
+	NSFWTextDetected    bool   `json:"nsfwTextDetected"`
+	NSFWContentDetected bool   `json:"nsfwContentDetected"`
+	PNGURL              string `json:"pngUrl"`
+	SVGURL              string `json:"svgUrl"`
+	Style               string `json:"style"`
+	Prompt              string `json:"prompt"`
+	NegativePrompt      string `json:"negativePrompt"`
+	Width               int    `json:"width"`
+	UpdatedAt           string `json:"updatedAt"`
+	CreatedAt           string `json:"createdAt"`
+}
+
+type SVGIOGenerateResp struct {
+	Success bool                `json:"success"`
+	Data    []SVGIOGenerateItem `json:"data"`
+}
+
+// Recraft API related types
+type RecraftGenerateReq struct {
+	Prompt         string `json:"prompt"`
+	NegativePrompt string `json:"negative_prompt,omitempty"`
+	Style          string `json:"style,omitempty"`
+	Substyle       string `json:"substyle,omitempty"`
+	Model          string `json:"model,omitempty"`
+	Size           string `json:"size,omitempty"`
+	N              int    `json:"n,omitempty"`
+	ResponseFormat string `json:"response_format,omitempty"`
+}
+
+type RecraftImageData struct {
+	URL           string `json:"url"`
+	B64JSON       string `json:"b64_json,omitempty"`
+	RevisedPrompt string `json:"revised_prompt,omitempty"`
+}
+
+type RecraftGenerateResp struct {
+	Created int                `json:"created"`
+	Data    []RecraftImageData `json:"data"`
+}
+
+type RecraftVectorizeReq struct {
+	ResponseFormat string `json:"response_format,omitempty"`
+}
+
+type RecraftVectorizeResp struct {
+	Image RecraftImageData `json:"image"`
+}
+
+// OpenAI API related types (supports all OpenAI compatible models)
+type OpenAIMessage struct {
+	Role    string `json:"role"`
+	Content string `json:"content"`
+}
+
+type OpenAIGenerateReq struct {
+	Model       string          `json:"model"`
+	Messages    []OpenAIMessage `json:"messages"`
+	MaxTokens   int             `json:"max_tokens"`
+	Temperature float64         `json:"temperature,omitempty"`
+	Stream      bool            `json:"stream,omitempty"`
+}
+
+type OpenAIGenerateResp struct {
+	ID      string `json:"id"`
+	Object  string `json:"object"`
+	Model   string `json:"model"`
+	Choices []struct {
+		Index   int `json:"index"`
+		Message struct {
+			Role    string `json:"role"`
+			Content string `json:"content"`
+		} `json:"message"`
+		FinishReason string `json:"finish_reason"`
+	} `json:"choices"`
+	Usage struct {
+		PromptTokens     int `json:"prompt_tokens"`
+		CompletionTokens int `json:"completion_tokens"`
+		TotalTokens      int `json:"total_tokens"`
+	} `json:"usage"`
+}
\ No newline at end of file
diff --git a/spx-backend/internal/svggen/utils.go b/spx-backend/internal/svggen/utils.go
new file mode 100644
index 000000000..48dc04cb4
--- /dev/null
+++ b/spx-backend/internal/svggen/utils.go
@@ -0,0 +1,59 @@
+package svggen
+
+import (
+	"context"
+	"fmt"
+	"io"
+	"net/http"
+	"time"
+)
+
+// DownloadFile downloads a file from the given URL.
+func DownloadFile(ctx context.Context, url string) ([]byte, error) {
+	client := &http.Client{
+		Timeout: 30 * time.Second,
+	}
+
+	req, err := http.NewRequestWithContext(ctx, http.MethodGet, url, nil)
+	if err != nil {
+		return nil, fmt.Errorf("create request: %w", err)
+	}
+
+	resp, err := client.Do(req)
+	if err != nil {
+		return nil, fmt.Errorf("download file: %w", err)
+	}
+	defer resp.Body.Close()
+
+	if resp.StatusCode != http.StatusOK {
+		return nil, fmt.Errorf("download failed with status: %s", resp.Status)
+	}
+
+	return io.ReadAll(resp.Body)
+}
+
+// ParseSizeFromString parses size string like "1024x1024".
+func ParseSizeFromString(size string) (width, height int) {
+	if size == "" {
+		return 1024, 1024
+	}
+	
+	// Simple parsing for common formats
+	switch size {
+	case "512x512":
+		return 512, 512
+	case "1024x1024":
+		return 1024, 1024
+	case "1536x1536":
+		return 1536, 1536
+	case "2048x2048":
+		return 2048, 2048
+	default:
+		return 1024, 1024
+	}
+}
+
+// GenerateImageID generates a simple image ID.
+func GenerateImageID(provider Provider) string {
+	return fmt.Sprintf("%s_%d", string(provider), time.Now().UnixNano())
+}
\ No newline at end of file

From 6d62842e711f175ff60b074756e11cf6834a9f8d Mon Sep 17 00:00:00 2001
From: linjc <linjc040204@outlook.com>
Date: Thu, 21 Aug 2025 13:58:02 +0800
Subject: [PATCH 31/49] feat(spx-backend):add translate

---
 spx-backend/internal/svggen/openai.go    |   5 +-
 spx-backend/internal/svggen/svggen.go    |  46 ++++++--
 spx-backend/internal/svggen/translate.go | 131 +++++++++++++++++++++++
 3 files changed, 175 insertions(+), 7 deletions(-)
 create mode 100644 spx-backend/internal/svggen/translate.go

diff --git a/spx-backend/internal/svggen/openai.go b/spx-backend/internal/svggen/openai.go
index 07b55fcd3..f3b68a1e9 100644
--- a/spx-backend/internal/svggen/openai.go
+++ b/spx-backend/internal/svggen/openai.go
@@ -38,6 +38,9 @@ func (s *OpenAIService) GenerateImage(ctx context.Context, req GenerateRequest)
 	logger := log.GetReqLogger(ctx)
 	logger.Printf("[OPENAI] Starting SVG generation request...")
 
+	// OpenAI supports Chinese natively, so we use the prompt as-is
+	// Translation is handled at the ServiceManager level if needed
+	
 	// Build OpenAI prompt
 	prompt := s.buildSVGPrompt(req.Prompt, req.Style, req.NegativePrompt)
 
@@ -100,7 +103,7 @@ You respond ONLY with clean, valid SVG code - no explanations, no code blocks, j
 	logger.Printf("[OPENAI] Received response with status: %s", resp.Status)
 
 	if resp.StatusCode >= 300 {
-		var errResp map[string]interface{}
+		var errResp map[string]any
 		_ = json.NewDecoder(resp.Body).Decode(&errResp)
 		logger.Printf("[OPENAI] Error response body: %+v", errResp)
 		return nil, fmt.Errorf("openai API error: %s", resp.Status)
diff --git a/spx-backend/internal/svggen/svggen.go b/spx-backend/internal/svggen/svggen.go
index 30e23e040..61a94238c 100644
--- a/spx-backend/internal/svggen/svggen.go
+++ b/spx-backend/internal/svggen/svggen.go
@@ -18,11 +18,12 @@ type ProviderService interface {
 
 // ServiceManager manages multiple upstream services.
 type ServiceManager struct {
-	svgioService   ProviderService
-	recraftService ProviderService
-	openaiService  ProviderService
-	httpClient     *http.Client
-	logger         *qlog.Logger
+	svgioService     ProviderService
+	recraftService   ProviderService
+	openaiService    ProviderService
+	translateService TranslateService
+	httpClient       *http.Client
+	logger           *qlog.Logger
 }
 
 // NewServiceManager creates a new service manager.
@@ -47,6 +48,8 @@ func NewServiceManager(cfg *config.Config, logger *qlog.Logger) *ServiceManager
 
 	if cfg.Providers.SVGOpenAI.Enabled {
 		sm.openaiService = NewOpenAIService(cfg, httpClient, logger)
+		// Initialize translation service using the same OpenAI configuration
+		sm.translateService = NewOpenAITranslateService(cfg, httpClient, logger)
 	}
 
 	return sm
@@ -88,8 +91,39 @@ func (sm *ServiceManager) GenerateImage(ctx context.Context, req GenerateRequest
 		return nil, errors.New("provider not configured: " + string(req.Provider))
 	}
 	
+	// Handle translation for providers that need it
+	originalPrompt := req.Prompt
+	translatedPrompt := req.Prompt
+	wasTranslated := false
+	
+	// Only translate for SVGIO provider (Recraft and OpenAI support Chinese natively)
+	if !req.SkipTranslate && sm.translateService != nil && req.Provider == ProviderSVGIO {
+		translated, err := sm.translateService.Translate(ctx, req.Prompt)
+		if err != nil {
+			logger.Printf("translation failed: %v", err)
+			// Continue with original prompt if translation fails
+		} else if translated != req.Prompt {
+			translatedPrompt = translated
+			wasTranslated = true
+			req.Prompt = translatedPrompt
+			logger.Printf("prompt translated: %q -> %q", originalPrompt, translatedPrompt)
+		}
+	}
+	
 	logger.Printf("generating image with provider: %s", string(req.Provider))
-	return provider.GenerateImage(ctx, req)
+	resp, err := provider.GenerateImage(ctx, req)
+	if err != nil {
+		return nil, err
+	}
+	
+	// Add translation information to response
+	if wasTranslated {
+		resp.OriginalPrompt = originalPrompt
+		resp.TranslatedPrompt = translatedPrompt
+		resp.WasTranslated = wasTranslated
+	}
+	
+	return resp, nil
 }
 
 // IsProviderEnabled checks if a provider is enabled.
diff --git a/spx-backend/internal/svggen/translate.go b/spx-backend/internal/svggen/translate.go
new file mode 100644
index 000000000..c30dbc2af
--- /dev/null
+++ b/spx-backend/internal/svggen/translate.go
@@ -0,0 +1,131 @@
+package svggen
+
+import (
+	"bytes"
+	"context"
+	"encoding/json"
+	"errors"
+	"fmt"
+	"net/http"
+	"os"
+	"strings"
+
+	"github.com/goplus/builder/spx-backend/internal/config"
+	"github.com/goplus/builder/spx-backend/internal/log"
+	qlog "github.com/qiniu/x/log"
+)
+
+// TranslateService defines the contract for translation services.
+type TranslateService interface {
+	Translate(ctx context.Context, text string) (string, error)
+}
+
+// OpenAITranslateService implements translation using OpenAI compatible APIs.
+type OpenAITranslateService struct {
+	config     *config.OpenAISVGConfig
+	httpClient *http.Client
+	logger     *qlog.Logger
+}
+
+// NewOpenAITranslateService creates a new OpenAI translation service instance.
+func NewOpenAITranslateService(cfg *config.Config, httpClient *http.Client, logger *qlog.Logger) *OpenAITranslateService {
+	return &OpenAITranslateService{
+		config:     &cfg.Providers.SVGOpenAI,
+		httpClient: httpClient,
+		logger:     logger,
+	}
+}
+
+// Translate translates text from Chinese to English for image generation prompts.
+func (s *OpenAITranslateService) Translate(ctx context.Context, text string) (string, error) {
+	logger := log.GetReqLogger(ctx)
+	
+	// Check if text contains Chinese characters
+	if !containsChinese(text) {
+		logger.Printf("[TRANSLATE] Text appears to be English already, skipping translation: %q", text)
+		return text, nil
+	}
+
+	logger.Printf("[TRANSLATE] Translating text: %q", text)
+
+	prompt := fmt.Sprintf(`Please translate the following text to English, maintaining the original meaning and making it suitable for AI image generation prompts. Return only the translation result without any explanation:
+
+%s`, text)
+
+	reqBody := OpenAIGenerateReq{
+		Model: s.config.DefaultModel,
+		Messages: []OpenAIMessage{
+			{
+				Role:    "user",
+				Content: prompt,
+			},
+		},
+		MaxTokens:   150,
+		Temperature: 0.3,
+	}
+
+	jsonData, err := json.Marshal(reqBody)
+	if err != nil {
+		return "", fmt.Errorf("marshal translate request: %w", err)
+	}
+
+	url := s.config.BaseURL + "chat/completions"
+	req, err := http.NewRequestWithContext(ctx, http.MethodPost, url, bytes.NewReader(jsonData))
+	if err != nil {
+		return "", fmt.Errorf("create translate request: %w", err)
+	}
+
+	req.Header.Set("Content-Type", "application/json")
+	req.Header.Set("Authorization", "Bearer "+s.getAPIKey())
+
+	resp, err := s.httpClient.Do(req)
+	if err != nil {
+		logger.Printf("[TRANSLATE] HTTP request failed: %v", err)
+		return "", fmt.Errorf("http translate request: %w", err)
+	}
+	defer resp.Body.Close()
+
+	if resp.StatusCode >= 300 {
+		var errResp map[string]any
+		_ = json.NewDecoder(resp.Body).Decode(&errResp)
+		logger.Printf("[TRANSLATE] Error response body: %+v", errResp)
+		return "", fmt.Errorf("translate API error: %s", resp.Status)
+	}
+
+	var translateResp OpenAIGenerateResp
+	if err := json.NewDecoder(resp.Body).Decode(&translateResp); err != nil {
+		return "", fmt.Errorf("decode translate response: %w", err)
+	}
+
+	if len(translateResp.Choices) == 0 {
+		return "", errors.New("no translation choices returned")
+	}
+
+	translated := strings.TrimSpace(translateResp.Choices[0].Message.Content)
+	logger.Printf("[TRANSLATE] Translation result: %q -> %q", text, translated)
+
+	return translated, nil
+}
+
+// getAPIKey gets the API key from the same source as OpenAI service.
+func (s *OpenAITranslateService) getAPIKey() string {
+	// Use the same API key as OpenAI SVG generation
+	return getOpenAIAPIKey()
+}
+
+// containsChinese checks if text contains Chinese characters.
+func containsChinese(text string) bool {
+	for _, char := range text {
+		if char >= 0x4e00 && char <= 0x9fff {
+			return true
+		}
+	}
+	return false
+}
+
+// getOpenAIAPIKey is a helper function to get OpenAI API key.
+// This should match the implementation in openai.go
+func getOpenAIAPIKey() string {
+	// Implementation matches openai.go getAPIKey method
+	return os.Getenv("SVG_OPENAI_API_KEY")
+}
\ No newline at end of file

From 6fcf64d560a28eb9faf861cd7490467bc5d4f76a Mon Sep 17 00:00:00 2001
From: qiniu <qiniu@qiniudeMacBook-Pro.local>
Date: Thu, 21 Aug 2025 14:45:17 +0800
Subject: [PATCH 32/49] Synchronization

---
 spx-recommend/client/README.md                |  96 ++++++
 spx-recommend/client/image_search_client.py   | 186 +++++++++++
 spx-recommend/client/simple_client.py         | 101 ++++++
 spx-recommend/demo/demo1.py                   |  53 +++
 spx-recommend/demo/demo2.py                   | 115 +++++++
 spx-recommend/demo/demo3.py                   | 146 +++++++++
 spx-recommend/project/.env.example            |  11 +
 spx-recommend/project/.gitignore              | 184 +++++++++++
 spx-recommend/project/Dockerfile              |  33 ++
 spx-recommend/project/README.md               | 309 ++++++++++++++++++
 spx-recommend/project/app/__init__.py         |  52 +++
 spx-recommend/project/app/api/__init__.py     |   0
 spx-recommend/project/app/api/routes.py       | 212 ++++++++++++
 spx-recommend/project/app/config/__init__.py  |   0
 spx-recommend/project/app/config/config.py    |  56 ++++
 .../project/app/services/__init__.py          |   0
 .../app/services/image_search_service.py      | 153 +++++++++
 spx-recommend/project/requirements.txt        |  22 ++
 spx-recommend/project/run.py                  |  31 ++
 spx-recommend/project/tests/__init__.py       |   1 +
 spx-recommend/project/tests/test_api.py       |  83 +++++
 spx-recommend/resource/cute.svg               |   1 +
 spx-recommend/resource/cute2.svg              |   1 +
 spx-recommend/resource/demo.png               | Bin 0 -> 6387 bytes
 spx-recommend/resource/dog.svg                | 213 ++++++++++++
 spx-recommend/resource/image.svg              | 112 +++++++
 spx-recommend/resource/images.jpg             | Bin 0 -> 4760 bytes
 27 files changed, 2171 insertions(+)
 create mode 100644 spx-recommend/client/README.md
 create mode 100644 spx-recommend/client/image_search_client.py
 create mode 100644 spx-recommend/client/simple_client.py
 create mode 100644 spx-recommend/demo/demo1.py
 create mode 100644 spx-recommend/demo/demo2.py
 create mode 100644 spx-recommend/demo/demo3.py
 create mode 100644 spx-recommend/project/.env.example
 create mode 100644 spx-recommend/project/.gitignore
 create mode 100644 spx-recommend/project/Dockerfile
 create mode 100644 spx-recommend/project/README.md
 create mode 100644 spx-recommend/project/app/__init__.py
 create mode 100644 spx-recommend/project/app/api/__init__.py
 create mode 100644 spx-recommend/project/app/api/routes.py
 create mode 100644 spx-recommend/project/app/config/__init__.py
 create mode 100644 spx-recommend/project/app/config/config.py
 create mode 100644 spx-recommend/project/app/services/__init__.py
 create mode 100644 spx-recommend/project/app/services/image_search_service.py
 create mode 100644 spx-recommend/project/requirements.txt
 create mode 100644 spx-recommend/project/run.py
 create mode 100644 spx-recommend/project/tests/__init__.py
 create mode 100644 spx-recommend/project/tests/test_api.py
 create mode 100644 spx-recommend/resource/cute.svg
 create mode 100644 spx-recommend/resource/cute2.svg
 create mode 100644 spx-recommend/resource/demo.png
 create mode 100644 spx-recommend/resource/dog.svg
 create mode 100644 spx-recommend/resource/image.svg
 create mode 100644 spx-recommend/resource/images.jpg

diff --git a/spx-recommend/client/README.md b/spx-recommend/client/README.md
new file mode 100644
index 000000000..4abb43185
--- /dev/null
+++ b/spx-recommend/client/README.md
@@ -0,0 +1,96 @@
+# Image Search API 客户端
+
+这个目录包含了调用Image Search API的客户端示例代码。
+
+## 文件说明
+
+- `image_search_client.py` - 完整的客户端类，包含所有API调用功能
+- `simple_client.py` - 简单的API调用示例
+- `README.md` - 本说明文件
+
+## 使用方法
+
+### 1. 安装依赖
+
+```bash
+pip install requests
+```
+
+### 2. 启动API服务
+
+首先确保API服务正在运行：
+
+```bash
+cd ../project
+python run.py
+```
+
+### 3. 运行客户端
+
+#### 使用完整客户端类：
+
+```bash
+python image_search_client.py
+```
+
+#### 使用简单示例：
+
+```bash
+python simple_client.py
+```
+
+## API调用示例
+
+### 文件上传搜索
+
+```python
+import requests
+
+url = "http://localhost:5000/api/search"
+files = [
+    ('images', open('image1.jpg', 'rb')),
+    ('images', open('image2.png', 'rb')),
+]
+data = {
+    'text': 'a cute cat',
+    'top_k': 3
+}
+
+response = requests.post(url, files=files, data=data)
+result = response.json()
+```
+
+### URL搜索
+
+```python
+import requests
+
+url = "http://localhost:5000/api/search/url"
+data = {
+    "text": "beautiful landscape",
+    "image_urls": [
+        "https://example.com/image1.jpg",
+        "https://example.com/image2.png"
+    ],
+    "top_k": 5
+}
+
+response = requests.post(url, json=data)
+result = response.json()
+```
+
+### 健康检查
+
+```python
+import requests
+
+response = requests.get("http://localhost:5000/api/health")
+health = response.json()
+```
+
+## 注意事项
+
+1. 确保API服务正在运行（默认端口5000）
+2. 文件搜索需要提供实际存在的图片文件路径
+3. URL搜索需要提供可访问的图片URL
+4. 所有API调用都应该包含适当的错误处理
\ No newline at end of file
diff --git a/spx-recommend/client/image_search_client.py b/spx-recommend/client/image_search_client.py
new file mode 100644
index 000000000..26f4a6610
--- /dev/null
+++ b/spx-recommend/client/image_search_client.py
@@ -0,0 +1,186 @@
+#!/usr/bin/env python3
+"""
+Image Search API 客户端
+"""
+import requests
+import json
+from typing import List, Optional, Dict, Any
+import os
+
+
+class ImageSearchClient:
+    """图像搜索API客户端"""
+    
+    def __init__(self, base_url: str = "http://localhost:5000"):
+        """
+        初始化客户端
+        
+        Args:
+            base_url: API服务器地址
+        """
+        self.base_url = base_url.rstrip('/')
+        self.session = requests.Session()
+    
+    def health_check(self) -> Dict[str, Any]:
+        """
+        健康检查
+        
+        Returns:
+            健康状态响应
+        """
+        response = self.session.get(f"{self.base_url}/api/health")
+        response.raise_for_status()
+        return response.json()
+    
+    def search_with_files(
+        self, 
+        text: str, 
+        image_paths: List[str], 
+        top_k: Optional[int] = None
+    ) -> Dict[str, Any]:
+        """
+        使用本地文件进行搜索
+        
+        Args:
+            text: 查询文本
+            image_paths: 本地图片文件路径列表
+            top_k: 返回前k个结果
+            
+        Returns:
+            搜索结果
+        """
+        # 准备文件
+        files = []
+        for path in image_paths:
+            if not os.path.exists(path):
+                raise FileNotFoundError(f"图片文件不存在: {path}")
+            files.append(('images', open(path, 'rb')))
+        
+        # 准备数据
+        data = {'text': text}
+        if top_k is not None:
+            data['top_k'] = top_k
+        
+        try:
+            response = self.session.post(
+                f"{self.base_url}/api/search",
+                files=files,
+                data=data
+            )
+            response.raise_for_status()
+            return response.json()
+        finally:
+            # 关闭文件
+            for _, file in files:
+                file.close()
+    
+    def search_with_urls(
+        self, 
+        text: str, 
+        image_urls: List[str], 
+        top_k: Optional[int] = None
+    ) -> Dict[str, Any]:
+        """
+        使用图片URL进行搜索
+        
+        Args:
+            text: 查询文本
+            image_urls: 图片URL列表
+            top_k: 返回前k个结果
+            
+        Returns:
+            搜索结果
+        """
+        data = {
+            "text": text,
+            "image_urls": image_urls
+        }
+        if top_k is not None:
+            data["top_k"] = top_k
+        
+        response = self.session.post(
+            f"{self.base_url}/api/search/url",
+            json=data,
+            headers={'Content-Type': 'application/json'}
+        )
+        response.raise_for_status()
+        return response.json()
+    
+    def print_results(self, results: Dict[str, Any]):
+        """
+        格式化打印搜索结果
+        
+        Args:
+            results: 搜索结果
+        """
+        print(f"查询文本: '{results['query']}'")
+        print(f"总图片数: {results['total_images']}")
+        print(f"结果数量: {results['results_count']}")
+        print("-" * 60)
+        
+        for result in results['results']:
+            print(f"排名 {result['rank']}: {result.get('filename', result.get('image_path', 'N/A'))}")
+            print(f"相似度: {result['similarity']:.4f}")
+            print("-" * 30)
+
+
+def main():
+    """示例使用"""
+    # 创建客户端
+    client = ImageSearchClient()
+    
+    # 健康检查
+    try:
+        health = client.health_check()
+        print("服务状态:", health)
+        print()
+    except requests.exceptions.RequestException as e:
+        print(f"服务不可用: {e}")
+        return
+    
+    # 示例1: 使用本地文件搜索
+    print("=== 使用本地文件搜索 ===")
+    try:
+        # 这里需要替换为实际的图片路径
+        image_files = [
+            "../dog.svg",
+            "../cute.svg",
+            "../cute2.svg",
+            "../image.svg"
+        ]
+        
+        # 过滤存在的文件
+        existing_files = [f for f in image_files if os.path.exists(f)]
+        
+        if existing_files:
+            results = client.search_with_files(
+                text="a cute cat",
+                image_paths=existing_files,
+                top_k=3
+            )
+            client.print_results(results)
+        else:
+            print("没有找到示例图片文件")
+    except Exception as e:
+        print(f"文件搜索错误: {e}")
+    
+    print()
+    
+    # 示例2: 使用URL搜索
+    print("=== 使用URL搜索 ===")
+    try:
+        results = client.search_with_urls(
+            text="beautiful landscape",
+            image_urls=[
+                "https://via.placeholder.com/300x200.png?text=Landscape1",
+                "https://via.placeholder.com/300x200.png?text=Landscape2"
+            ],
+            top_k=2
+        )
+        client.print_results(results)
+    except Exception as e:
+        print(f"URL搜索错误: {e}")
+
+
+if __name__ == "__main__":
+    main()
\ No newline at end of file
diff --git a/spx-recommend/client/simple_client.py b/spx-recommend/client/simple_client.py
new file mode 100644
index 000000000..3dfc78728
--- /dev/null
+++ b/spx-recommend/client/simple_client.py
@@ -0,0 +1,101 @@
+#!/usr/bin/env python3
+"""
+简单的API调用示例
+"""
+import requests
+import os
+
+
+def search_with_files_example():
+    """文件上传搜索示例"""
+    url = "http://localhost:5000/api/search"
+    
+    # 准备图片文件（请替换为实际的图片路径）
+    image_files = ["../resource/dog.svg", "../resource/cute.svg", "../resource/cute2.svg"]
+    files = []
+    
+    for img_path in image_files:
+        if os.path.exists(img_path):
+            files.append(('images', open(img_path, 'rb')))
+    
+    if not files:
+        print("没有找到图片文件，请确保图片路径正确")
+        return
+    
+    data = {
+        'text': 'a cute cat',
+        'top_k': 3
+    }
+    
+    try:
+        response = requests.post(url, files=files, data=data)
+        if response.status_code == 200:
+            result = response.json()
+            print("文件搜索结果:")
+            print(f"查询: {result['query']}")
+            for item in result['results']:
+                print(f"  排名{item['rank']}: {item['filename']} (相似度: {item['similarity']:.4f})")
+        else:
+            print(f"请求失败: {response.status_code}")
+            print(response.text)
+    except Exception as e:
+        print(f"请求错误: {e}")
+    finally:
+        # 关闭文件
+        for _, file in files:
+            file.close()
+
+
+def search_with_urls_example():
+    """URL搜索示例"""
+    url = "http://localhost:5000/api/search/url"
+    
+    data = {
+        "text": "beautiful sunset",
+        "image_urls": [
+            "https://via.placeholder.com/300x200.png?text=Image1",
+            "https://via.placeholder.com/300x200.png?text=Image2"
+        ],
+        "top_k": 2
+    }
+    
+    try:
+        response = requests.post(url, json=data)
+        if response.status_code == 200:
+            result = response.json()
+            print("URL搜索结果:")
+            print(f"查询: {result['query']}")
+            for item in result['results']:
+                print(f"  排名{item['rank']}: {item['image_path']} (相似度: {item['similarity']:.4f})")
+        else:
+            print(f"请求失败: {response.status_code}")
+            print(response.text)
+    except Exception as e:
+        print(f"请求错误: {e}")
+
+
+def health_check():
+    """健康检查"""
+    url = "http://localhost:5000/api/health"
+    
+    try:
+        response = requests.get(url)
+        if response.status_code == 200:
+            print("服务健康状态:", response.json())
+        else:
+            print(f"健康检查失败: {response.status_code}")
+    except Exception as e:
+        print(f"健康检查错误: {e}")
+
+
+if __name__ == "__main__":
+    print("=== 健康检查 ===")
+    health_check()
+    print()
+    
+    print("=== 文件上传搜索 ===")
+    search_with_files_example()
+    print()
+    
+    print("=== URL搜索 ===")
+    search_with_urls_example()
\ No newline at end of file
diff --git a/spx-recommend/demo/demo1.py b/spx-recommend/demo/demo1.py
new file mode 100644
index 000000000..80522106b
--- /dev/null
+++ b/spx-recommend/demo/demo1.py
@@ -0,0 +1,53 @@
+# import open_clip
+# import torch
+# from PIL import Image
+
+# # 加载模型
+# model, _, preprocess = open_clip.create_model_and_transforms('ViT-B-32', pretrained='laion2b_s34b_b79k')
+# tokenizer = open_clip.get_tokenizer('ViT-B-32')
+
+# # 处理数据
+# image = preprocess(Image.open("images.jpg")).unsqueeze(0)
+# text = tokenizer(["a dog", "a cat", "a white cat", "a grew cat", "a black cat", "a fat cat", "a thin cat"])
+
+# #推理
+# with torch.no_grad():
+#     image_features = model.encode_image(image)
+#     text_features = model.encode_text(text)
+
+#     # 计算相似度
+#     image_features /= image_features.norm(dim=-1, keepdim=True)
+#     text_features /= text_features.norm(dim=-1, keepdim=True)
+#     similarity = (100.0 * image_features @text_features.T).softmax(dim=-1)
+#     print(similarity)
+
+import cairosvg
+from PIL import Image
+import io
+import open_clip
+import torch
+
+def process_svg_with_clip(svg_path, texts):
+    # 转换 SVG
+    png_data = cairosvg.svg2png(url=svg_path, output_width=224, output_height=224)
+    image = Image.open(io.BytesIO(png_data))
+
+    # 加载模型
+    model, _, preprocess = open_clip.create_model_and_transforms('ViT-B-32', pretrained='laion2b_s34b_b79k')
+    tokenizer = open_clip.get_tokenizer('ViT-B-32')
+
+    # 处理
+    processed_image = preprocess(image).unsqueeze(0)
+    processed_text = tokenizer(texts)
+
+    # 推理
+    with torch.no_grad():
+        image_features = model.encode_image(processed_image)
+        text_features = model.encode_text(processed_text)
+        similarity = (image_features @ text_features.T).softmax(dim=-1)
+
+    return similarity
+
+# 使用
+result = process_svg_with_clip("cute2.svg", ["a dog", "a cat", "a white cat", "a grew cat", "a black cat", "a fat cat", "a thin cat"])
+print(result)
\ No newline at end of file
diff --git a/spx-recommend/demo/demo2.py b/spx-recommend/demo/demo2.py
new file mode 100644
index 000000000..f62e87300
--- /dev/null
+++ b/spx-recommend/demo/demo2.py
@@ -0,0 +1,115 @@
+
+import open_clip
+import torch
+from PIL import Image
+import numpy as np
+import cairosvg
+import io
+
+
+# 文本匹配多张图片的代码示例
+
+def text_to_images_search(text_query, image_paths, model_name='ViT-B-32', pretrained='laion2b_s34b_b79k'):
+    """
+    用文本查询匹配多张图片
+    
+    Args:
+        text_query: 查询文本
+        image_paths: 图片路径列表
+        model_name: 模型名称
+        pretrained: 预训练权重
+    
+    Returns:
+        排序后的结果列表，包含图片路径和相似度分数
+    """
+    # 加载模型
+    device = "cuda" if torch.cuda.is_available() else "cpu"
+    model, _, preprocess = open_clip.create_model_and_transforms(model_name, pretrained=pretrained)
+    tokenizer = open_clip.get_tokenizer(model_name)
+
+    model = model.to(device)
+
+    # 处理文本
+    text = tokenizer([text_query]).to(device)
+
+    # 处理所有图片
+    images = []
+    valid_paths = []
+
+    for img_path in image_paths:
+        try:
+            # 转换 SVG
+            png_data = cairosvg.svg2png(url=img_path, output_width=224, output_height=224)
+            image = Image.open(io.BytesIO(png_data))
+            # image = Image.open(img_path).convert('RGB')
+            images.append(preprocess(image))
+            valid_paths.append(img_path)
+        except Exception as e:
+            print(f"无法加载图片 {img_path}: {e}")
+            continue
+
+    if not images:
+        return []
+
+    # 批量处理图片
+    images_tensor = torch.stack(images).to(device)
+
+    with torch.no_grad():
+        # 编码文本和图片
+        text_features = model.encode_text(text)
+        image_features = model.encode_image(images_tensor)
+
+        # 归一化特征
+        text_features /= text_features.norm(dim=-1, keepdim=True)
+        image_features /= image_features.norm(dim=-1, keepdim=True)
+
+        # 计算相似度
+        similarity = (text_features @ image_features.T).squeeze(0)
+
+        # 转换为 numpy 并排序
+        similarity_scores = similarity.cpu().numpy()
+
+    # 创建结果列表
+    results = []
+    for i, score in enumerate(similarity_scores):
+        results.append({
+            'image_path': valid_paths[i],
+            'similarity': float(score),
+            'rank': i + 1
+        })
+
+    # 按相似度降序排序
+    results.sort(key=lambda x: x['similarity'], reverse=True)
+
+    # 更新排名
+    for i, result in enumerate(results):
+        result['rank'] = i + 1
+
+    return results
+
+# 使用示例
+if __name__ == "__main__":
+    # 文本查询
+    query = "a cute cat"
+
+    # 图片路径列表
+    image_list = [
+        "dog.svg",
+        "cute.svg",
+        "cute2.svg",
+        "image.svg"
+    ]
+
+    # 执行搜索
+    results = text_to_images_search(query, image_list)
+
+    # 显示结果
+    print(f"查询文本: '{query}'")
+    print("匹配结果（按相似度排序）:")
+    print("-" * 60)
+
+    for result in results:
+        print(f"排名 {result['rank']}: {result['image_path']}")
+        print(f"相似度: {result['similarity']:.4f}")
+        print("-" * 30)
+
diff --git a/spx-recommend/demo/demo3.py b/spx-recommend/demo/demo3.py
new file mode 100644
index 000000000..50be0be98
--- /dev/null
+++ b/spx-recommend/demo/demo3.py
@@ -0,0 +1,146 @@
+import open_clip
+import torch
+from PIL import Image
+import os
+from pathlib import Path
+import json
+
+
+# 批量图片搜索的高级版本
+
+
+class ImageSearchEngine:
+    def __init__(self, model_name='ViT-B-32', pretrained='laion2b_s34b_b79k'):
+        self.device = "cuda" if torch.cuda.is_available() else "cpu"
+        self.model, _, self.preprocess = open_clip.create_model_and_transforms(
+            model_name, pretrained=pretrained
+        )
+        self.tokenizer = open_clip.get_tokenizer(model_name)
+        self.model = self.model.to(self.device)
+
+        self.image_features_cache = {}
+        self.image_paths = []
+
+    def index_images(self, image_directory, extensions=['.jpg', '.jpeg', '.png', '.bmp']):
+        """
+        为目录中的所有图片建立索引
+        """
+        print("正在索引图片...")
+
+        # 获取所有图片文件
+        image_paths = []
+        for ext in extensions:
+            image_paths.extend(Path(image_directory).glob(f"**/*{ext}"))
+            image_paths.extend(Path(image_directory).glob(f"**/*{ext.upper()}"))
+
+        self.image_paths = [str(p) for p in image_paths]
+        print(f"找到 {len(self.image_paths)} 张图片")
+
+        # 批量提取图片特征
+        batch_size = 32  # 根据显存调整
+        all_features = []
+
+        for i in range(0, len(self.image_paths), batch_size):
+            batch_paths = self.image_paths[i:i+batch_size]
+            batch_images = []
+            valid_paths = []
+
+            for img_path in batch_paths:
+                try:
+                    image = Image.open(img_path).convert('RGB')
+                    batch_images.append(self.preprocess(image))
+                    valid_paths.append(img_path)
+                except Exception as e:
+                    print(f"跳过损坏的图片: {img_path}")
+                    continue
+
+            if batch_images:
+                images_tensor = torch.stack(batch_images).to(self.device)
+
+                with torch.no_grad():
+                    features = self.model.encode_image(images_tensor)
+                    features /= features.norm(dim=-1, keepdim=True)
+
+                all_features.append(features.cpu())
+
+        # 合并所有特征
+        if all_features:
+            self.image_features = torch.cat(all_features, dim=0)
+            print(f"成功索引 {len(self.image_features)} 张图片")
+        else:
+            print("没有找到有效的图片")
+
+    def search(self, query_text, top_k=10):
+        """
+        根据文本查询搜索图片
+        """
+        if not hasattr(self, 'image_features'):
+            raise ValueError("请先使用 index_images() 建立索引")
+
+        # 编码查询文本
+        text = self.tokenizer([query_text]).to(self.device)
+
+        with torch.no_grad():
+            text_features = self.model.encode_text(text)
+            text_features /= text_features.norm(dim=-1, keepdim=True)
+
+            # 计算相似度
+            similarity = (text_features @self.image_features.T).squeeze(0)
+
+            # 获取 top-k 结果
+            top_k = min(top_k, len(self.image_paths))
+            top_indices = similarity.topk(top_k).indices
+            top_scores = similarity.topk(top_k).values
+
+        # 构建结果
+        results = []
+        for i, (idx, score) in enumerate(zip(top_indices, top_scores)):
+            results.append({
+                'rank': i + 1,
+                'image_path': self.image_paths[idx],
+                'similarity': float(score),
+                'filename': os.path.basename(self.image_paths[idx])
+            })
+
+        return results
+
+    def save_index(self, index_path):
+        """保存索引到文件"""
+        index_data = {
+            'image_paths': self.image_paths,
+            'image_features': self.image_features.numpy().tolist()
+        }
+        with open(index_path, 'w') as f:
+            json.dump(index_data, f)
+
+    def load_index(self, index_path):
+        """从文件加载索引"""
+        with open(index_path, 'r') as f:
+            index_data = json.load(f)
+
+        self.image_paths = index_data['image_paths']
+        self.image_features = torch.tensor(index_data['image_features'])
+
+# 使用示例
+if __name__ == "__main__":
+    # 创建搜索引擎
+    search_engine = ImageSearchEngine()
+
+    # 为图片目录建立索引
+    search_engine.index_images("./images")  # 替换为你的图片目录
+
+    # 执行搜索
+    queries = [
+        "a dog playing in the park",
+        "sunset over the ocean",
+        "people eating at a restaurant",
+        "red sports car"
+    ]
+
+    for query in queries:
+        print(f"\n搜索: '{query}'")
+        results = search_engine.search(query, top_k=5)
+
+        for result in results:
+            print(f"{result['rank']}. {result['filename']} (相似度: {result['similarity']:.4f})")
+
diff --git a/spx-recommend/project/.env.example b/spx-recommend/project/.env.example
new file mode 100644
index 000000000..3395fb6ad
--- /dev/null
+++ b/spx-recommend/project/.env.example
@@ -0,0 +1,11 @@
+# Flask环境配置
+FLASK_ENV=development
+SECRET_KEY=your-secret-key-here
+
+# 服务器配置
+HOST=0.0.0.0
+PORT=5000
+
+# CLIP模型配置
+CLIP_MODEL_NAME=ViT-B-32
+CLIP_PRETRAINED=laion2b_s34b_b79k
\ No newline at end of file
diff --git a/spx-recommend/project/.gitignore b/spx-recommend/project/.gitignore
new file mode 100644
index 000000000..5f97e9e3e
--- /dev/null
+++ b/spx-recommend/project/.gitignore
@@ -0,0 +1,184 @@
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+share/python-wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.nox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+*.py,cover
+.hypothesis/
+.pytest_cache/
+cover/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+local_settings.py
+db.sqlite3
+db.sqlite3-journal
+
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+.pybuilder/
+target/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# IPython
+profile_default/
+ipython_config.py
+
+# pyenv
+#   For a library or package, you might want to ignore these files since the code is
+#   intended to run in multiple environments; otherwise, check them in:
+# .python-version
+
+# pipenv
+#   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
+#   However, in case of collaboration, if having platform-specific dependencies or dependencies
+#   having no cross-platform support, pipenv may install dependencies that don't work, or not
+#   install all needed dependencies.
+#Pipfile.lock
+
+# poetry
+#   Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control.
+#   This is especially recommended for binary packages to ensure reproducibility, and is more
+#   commonly ignored for libraries.
+#   https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control
+#poetry.lock
+
+# pdm
+#   Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control.
+#pdm.lock
+#   pdm stores project-wide configurations in .pdm.toml, but it is recommended to not include it
+#   in version control.
+#   https://pdm.fming.dev/#use-with-ide
+.pdm.toml
+
+# PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm
+__pypackages__/
+
+# Celery stuff
+celerybeat-schedule
+celerybeat.pid
+
+# SageMath parsed files
+*.sage.py
+
+# Environments
+.env
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# Spyder project settings
+.spyderproject
+.spyproject
+
+# Rope project settings
+.ropeproject
+
+# mkdocs documentation
+/site
+
+# mypy
+.mypy_cache/
+.dmypy.json
+dmypy.json
+
+# Pyre type checker
+.pyre/
+
+# pytype static type analyzer
+.pytype/
+
+# Cython debug symbols
+cython_debug/
+
+# PyCharm
+#  JetBrains specific template is maintained in a separate JetBrains.gitignore that can
+#  be added to the global gitignore or merged into this project gitignore.  For a PyCharm
+#  project, uncomment below lines:
+#.idea/
+
+# Application specific
+uploads/
+logs/
+*.log
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# OS generated files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+
+# Model cache
+models/
+checkpoints/
\ No newline at end of file
diff --git a/spx-recommend/project/Dockerfile b/spx-recommend/project/Dockerfile
new file mode 100644
index 000000000..2e4c07d8b
--- /dev/null
+++ b/spx-recommend/project/Dockerfile
@@ -0,0 +1,33 @@
+FROM python:3.9-slim
+
+WORKDIR /app
+
+# 安装系统依赖
+RUN apt-get update && apt-get install -y \
+    libcairo2-dev \
+    libgdk-pixbuf2.0-dev \
+    libffi-dev \
+    shared-mime-info \
+    && rm -rf /var/lib/apt/lists/*
+
+# 复制依赖文件
+COPY requirements.txt .
+
+# 安装Python依赖
+RUN pip install --no-cache-dir -r requirements.txt
+
+# 复制应用代码
+COPY . .
+
+# 创建必要的目录
+RUN mkdir -p uploads logs
+
+# 设置环境变量
+ENV FLASK_ENV=production
+ENV PYTHONPATH=/app
+
+# 暴露端口
+EXPOSE 5000
+
+# 启动命令
+CMD ["gunicorn", "--bind", "0.0.0.0:5000", "--workers", "4", "run:app"]
\ No newline at end of file
diff --git a/spx-recommend/project/README.md b/spx-recommend/project/README.md
new file mode 100644
index 000000000..a76567230
--- /dev/null
+++ b/spx-recommend/project/README.md
@@ -0,0 +1,309 @@
+# Image Search API
+
+基于 OpenCLIP 的图像搜索 API，支持通过文本查询在多张图片中进行语义搜索。
+
+## 功能特性
+
+- 🔍 基于 CLIP 模型的文本-图像语义搜索
+- 📁 支持多种图片格式（PNG, JPG, SVG, WebP 等）
+- 🚀 Flask RESTful API 接口
+- 📊 返回相似度排序结果
+- 🔧 支持自定义返回结果数量（top-k）
+- 🐳 Docker 容器化部署
+- 📝 完整的错误处理和日志记录
+
+## 项目结构
+
+```
+project/
+├── app/
+│   ├── __init__.py          # Flask 应用工厂
+│   ├── api/
+│   │   ├── __init__.py
+│   │   └── routes.py        # API 路由
+│   ├── services/
+│   │   ├── __init__.py
+│   │   └── image_search_service.py  # 核心搜索服务
+│   ├── config/
+│   │   ├── __init__.py
+│   │   └── config.py        # 配置管理
+│   └── models/              # 数据模型（预留）
+├── tests/                   # 测试文件
+├── uploads/                 # 上传文件临时目录
+├── logs/                    # 日志文件
+├── static/                  # 静态文件
+├── requirements.txt         # Python 依赖
+├── Dockerfile              # Docker 配置
+├── .env.example            # 环境变量示例
+└── run.py                  # 应用启动文件
+```
+
+## 快速开始
+
+### 环境要求
+
+- Python 3.8+
+- PyTorch
+- 足够的内存运行 CLIP 模型
+
+### 安装依赖
+
+```bash
+# 克隆项目
+cd project
+
+# 创建虚拟环境
+python -m venv venv
+source venv/bin/activate  # Linux/Mac
+# 或 venv\\Scripts\\activate  # Windows
+
+# 安装依赖
+pip install -r requirements.txt
+```
+
+### 配置环境
+
+```bash
+# 复制环境变量配置文件
+cp .env.example .env
+
+# 编辑配置文件
+nano .env
+```
+
+### 启动服务
+
+```bash
+# 开发模式
+python run.py
+
+# 或使用 gunicorn（生产环境）
+gunicorn --bind 0.0.0.0:5000 --workers 4 run:app
+```
+
+## API 接口
+
+### 1. 健康检查
+
+```http
+GET /api/health
+```
+
+**响应示例：**
+```json
+{
+  "status": "healthy",
+  "service": "image-search-api"
+}
+```
+
+### 2. 文件上传搜索
+
+```http
+POST /api/search
+Content-Type: multipart/form-data
+```
+
+**请求参数：**
+- `text` (string, required): 查询文本
+- `images` (files, required): 图片文件列表
+- `top_k` (integer, optional): 返回前 k 个结果
+
+**响应示例：**
+```json
+{
+  "query": "a cute cat",
+  "total_images": 4,
+  "results_count": 2,
+  "results": [
+    {
+      "rank": 1,
+      "similarity": 0.8567,
+      "filename": "cute_cat.jpg"
+    },
+    {
+      "rank": 2,
+      "similarity": 0.7234,
+      "filename": "kitten.png"
+    }
+  ]
+}
+```
+
+### 3. URL 搜索
+
+```http
+POST /api/search/url
+Content-Type: application/json
+```
+
+**请求体：**
+```json
+{
+  "text": "查询文本",
+  "image_urls": [
+    "http://example.com/image1.jpg",
+    "http://example.com/image2.png"
+  ],
+  "top_k": 5
+}
+```
+
+## 使用示例
+
+### Python 客户端示例
+
+```python
+import requests
+
+# 文件上传搜索
+def search_with_files():
+    url = "http://localhost:5000/api/search"
+    
+    files = [
+        ('images', open('image1.jpg', 'rb')),
+        ('images', open('image2.png', 'rb')),
+    ]
+    
+    data = {
+        'text': 'a beautiful sunset',
+        'top_k': 3
+    }
+    
+    response = requests.post(url, files=files, data=data)
+    return response.json()
+
+# URL 搜索
+def search_with_urls():
+    url = "http://localhost:5000/api/search/url"
+    
+    data = {
+        "text": "a cute dog",
+        "image_urls": [
+            "https://example.com/dog1.jpg",
+            "https://example.com/dog2.png"
+        ],
+        "top_k": 2
+    }
+    
+    response = requests.post(url, json=data)
+    return response.json()
+```
+
+### cURL 示例
+
+```bash
+# 文件上传搜索
+curl -X POST http://localhost:5000/api/search \
+  -F "text=a cute cat" \
+  -F "images=@image1.jpg" \
+  -F "images=@image2.png" \
+  -F "top_k=3"
+
+# URL 搜索
+curl -X POST http://localhost:5000/api/search/url \
+  -H "Content-Type: application/json" \
+  -d '{
+    "text": "a beautiful landscape",
+    "image_urls": ["http://example.com/img1.jpg"],
+    "top_k": 5
+  }'
+```
+
+## Docker 部署
+
+```bash
+# 构建镜像
+docker build -t image-search-api .
+
+# 运行容器
+docker run -p 5000:5000 image-search-api
+
+# 或使用 docker-compose
+echo "version: '3.8'
+services:
+  api:
+    build: .
+    ports:
+      - '5000:5000'
+    environment:
+      - FLASK_ENV=production
+    volumes:
+      - ./logs:/app/logs" > docker-compose.yml
+
+docker-compose up -d
+```
+
+## 配置选项
+
+### 环境变量
+
+- `FLASK_ENV`: 运行环境 (development/production)
+- `SECRET_KEY`: Flask 密钥
+- `HOST`: 服务器主机地址
+- `PORT`: 服务器端口
+- `CLIP_MODEL_NAME`: CLIP 模型名称
+- `CLIP_PRETRAINED`: 预训练权重
+
+### 支持的 CLIP 模型
+
+- `ViT-B-32`
+- `ViT-B-16`
+- `ViT-L-14`
+- `RN50`
+- `RN101`
+
+## 错误处理
+
+API 返回标准的 HTTP 状态码和错误信息：
+
+```json
+{
+  "error": "错误描述",
+  "code": "ERROR_CODE",
+  "details": "详细错误信息"
+}
+```
+
+常见错误码：
+- `MISSING_TEXT_QUERY`: 缺少查询文本
+- `NO_FILES_UPLOADED`: 没有上传文件
+- `INVALID_TOP_K`: top_k 参数无效
+- `INTERNAL_ERROR`: 内部服务器错误
+
+## 开发指南
+
+### 运行测试
+
+```bash
+# 安装测试依赖
+pip install pytest pytest-flask
+
+# 运行测试
+pytest tests/
+```
+
+### 代码格式化
+
+```bash
+# 格式化代码
+black app/ tests/
+
+# 检查代码风格
+flake8 app/ tests/
+```
+
+## 性能优化
+
+- 模型只在启动时加载一次
+- 支持批量图片处理
+- 临时文件自动清理
+- 可配置的工作进程数量
+
+## 许可证
+
+MIT License
+
+## 贡献
+
+欢迎提交 Issue 和 Pull Request！
\ No newline at end of file
diff --git a/spx-recommend/project/app/__init__.py b/spx-recommend/project/app/__init__.py
new file mode 100644
index 000000000..f9727a174
--- /dev/null
+++ b/spx-recommend/project/app/__init__.py
@@ -0,0 +1,52 @@
+from flask import Flask
+import os
+import logging
+from logging.handlers import RotatingFileHandler
+
+
+def create_app(config_name='default'):
+    """Application factory function"""
+    app = Flask(__name__)
+    
+    # Configure application
+    from .config.config import config
+    app.config.from_object(config[config_name])
+    
+    # Create necessary directories
+    os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)
+    os.makedirs(app.config['LOG_FOLDER'], exist_ok=True)
+    
+    # Configure logging
+    if not app.debug and not app.testing:
+        if not os.path.exists('logs'):
+            os.mkdir('logs')
+        file_handler = RotatingFileHandler(
+            os.path.join(app.config['LOG_FOLDER'], 'app.log'),
+            maxBytes=10240000, backupCount=10
+        )
+        file_handler.setFormatter(logging.Formatter(
+            '%(asctime)s %(levelname)s: %(message)s [in %(pathname)s:%(lineno)d]'
+        ))
+        file_handler.setLevel(logging.INFO)
+        app.logger.addHandler(file_handler)
+        app.logger.setLevel(logging.INFO)
+        app.logger.info('Image Search API startup')
+    
+    # Register blueprints
+    from .api.routes import api_bp
+    app.register_blueprint(api_bp)
+    
+    # Add root route
+    @app.route('/')
+    def index():
+        return {
+            'message': 'Image Search API',
+            'version': '1.0.0',
+            'endpoints': {
+                'health': '/api/health',
+                'search': '/api/search (POST)',
+                'search_by_url': '/api/search/url (POST)'
+            }
+        }
+    
+    return app
\ No newline at end of file
diff --git a/spx-recommend/project/app/api/__init__.py b/spx-recommend/project/app/api/__init__.py
new file mode 100644
index 000000000..e69de29bb
diff --git a/spx-recommend/project/app/api/routes.py b/spx-recommend/project/app/api/routes.py
new file mode 100644
index 000000000..72fa32b16
--- /dev/null
+++ b/spx-recommend/project/app/api/routes.py
@@ -0,0 +1,212 @@
+from flask import Blueprint, request, jsonify, current_app
+from werkzeug.utils import secure_filename
+import os
+import uuid
+from typing import List
+import logging
+
+from ..services.image_search_service import ImageSearchService
+
+logger = logging.getLogger(__name__)
+
+api_bp = Blueprint('api', __name__, url_prefix='/api')
+
+# 全局服务实例
+search_service = None
+
+
+def init_search_service(model_name: str = 'ViT-B-32', pretrained: str = 'laion2b_s34b_b79k'):
+    """初始化搜索服务"""
+    global search_service
+    if search_service is None:
+        search_service = ImageSearchService(model_name, pretrained)
+
+
+def allowed_file(filename: str) -> bool:
+    """检查文件扩展名是否允许"""
+    ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif', 'bmp', 'svg', 'webp'}
+    return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
+
+
+@api_bp.route('/health', methods=['GET'])
+def health_check():
+    """健康检查接口"""
+    return jsonify({
+        'status': 'healthy',
+        'service': 'image-search-api'
+    })
+
+
+@api_bp.route('/search', methods=['POST'])
+def search_images():
+    """
+    图像搜索接口
+    
+    接受表单数据：
+    - text: 查询文本
+    - images: 多个图片文件
+    - top_k: 返回前k张图片（可选，默认返回所有）
+    """
+    try:
+        # 检查是否有文本查询
+        text_query = request.form.get('text', '').strip()
+        if not text_query:
+            return jsonify({
+                'error': '查询文本不能为空',
+                'code': 'MISSING_TEXT_QUERY'
+            }), 400
+        
+        # 检查是否有上传的文件
+        if 'images' not in request.files:
+            return jsonify({
+                'error': '没有上传图片文件',
+                'code': 'NO_FILES_UPLOADED'
+            }), 400
+        
+        files = request.files.getlist('images')
+        if not files or all(f.filename == '' for f in files):
+            return jsonify({
+                'error': '没有选择有效的图片文件',
+                'code': 'NO_VALID_FILES'
+            }), 400
+        
+        # 获取top_k参数
+        top_k = request.form.get('top_k')
+        if top_k:
+            try:
+                top_k = int(top_k)
+                if top_k <= 0:
+                    top_k = None
+            except ValueError:
+                return jsonify({
+                    'error': 'top_k参数必须是正整数',
+                    'code': 'INVALID_TOP_K'
+                }), 400
+        
+        # 保存上传的文件
+        upload_folder = current_app.config['UPLOAD_FOLDER']
+        session_id = str(uuid.uuid4())
+        session_folder = os.path.join(upload_folder, session_id)
+        os.makedirs(session_folder, exist_ok=True)
+        
+        image_paths = []
+        for file in files:
+            if file and file.filename != '' and allowed_file(file.filename):
+                filename = secure_filename(file.filename)
+                # 添加时间戳避免文件名冲突
+                name, ext = os.path.splitext(filename)
+                filename = f"{name}_{uuid.uuid4().hex[:8]}{ext}"
+                file_path = os.path.join(session_folder, filename)
+                file.save(file_path)
+                image_paths.append(file_path)
+        
+        if not image_paths:
+            return jsonify({
+                'error': '没有有效的图片文件被保存',
+                'code': 'NO_VALID_IMAGES_SAVED'
+            }), 400
+        
+        # 初始化服务（如果还没有初始化）
+        if search_service is None:
+            init_search_service()
+        
+        # 执行搜索
+        results = search_service.search_images(text_query, image_paths, top_k)
+        
+        # 清理临时文件
+        try:
+            for file_path in image_paths:
+                if os.path.exists(file_path):
+                    os.remove(file_path)
+            os.rmdir(session_folder)
+        except Exception as e:
+            logger.warning(f"清理临时文件失败: {e}")
+        
+        # 处理结果，移除绝对路径信息
+        processed_results = []
+        for result in results:
+            processed_results.append({
+                'rank': result['rank'],
+                'similarity': result['similarity'],
+                'filename': os.path.basename(result['image_path'])
+            })
+        
+        return jsonify({
+            'query': text_query,
+            'total_images': len(image_paths),
+            'results_count': len(processed_results),
+            'results': processed_results
+        })
+    
+    except Exception as e:
+        logger.error(f"搜索过程中出现错误: {e}")
+        return jsonify({
+            'error': '内部服务器错误',
+            'code': 'INTERNAL_ERROR',
+            'details': str(e)
+        }), 500
+
+
+@api_bp.route('/search/url', methods=['POST'])
+def search_images_by_url():
+    """
+    通过URL搜索图像接口
+    
+    接受JSON数据：
+    {
+        "text": "查询文本",
+        "image_urls": ["图片URL列表"],
+        "top_k": 5  // 可选
+    }
+    """
+    try:
+        data = request.get_json()
+        if not data:
+            return jsonify({
+                'error': '请求体必须是有效的JSON',
+                'code': 'INVALID_JSON'
+            }), 400
+        
+        text_query = data.get('text', '').strip()
+        if not text_query:
+            return jsonify({
+                'error': '查询文本不能为空',
+                'code': 'MISSING_TEXT_QUERY'
+            }), 400
+        
+        image_urls = data.get('image_urls', [])
+        if not image_urls or not isinstance(image_urls, list):
+            return jsonify({
+                'error': 'image_urls必须是非空的URL列表',
+                'code': 'INVALID_IMAGE_URLS'
+            }), 400
+        
+        top_k = data.get('top_k')
+        if top_k is not None:
+            if not isinstance(top_k, int) or top_k <= 0:
+                return jsonify({
+                    'error': 'top_k参数必须是正整数',
+                    'code': 'INVALID_TOP_K'
+                }), 400
+        
+        # 初始化服务（如果还没有初始化）
+        if search_service is None:
+            init_search_service()
+        
+        # 执行搜索
+        results = search_service.search_images(text_query, image_urls, top_k)
+        
+        return jsonify({
+            'query': text_query,
+            'total_images': len(image_urls),
+            'results_count': len(results),
+            'results': results
+        })
+    
+    except Exception as e:
+        logger.error(f"URL搜索过程中出现错误: {e}")
+        return jsonify({
+            'error': '内部服务器错误',
+            'code': 'INTERNAL_ERROR',
+            'details': str(e)
+        }), 500
\ No newline at end of file
diff --git a/spx-recommend/project/app/config/__init__.py b/spx-recommend/project/app/config/__init__.py
new file mode 100644
index 000000000..e69de29bb
diff --git a/spx-recommend/project/app/config/config.py b/spx-recommend/project/app/config/config.py
new file mode 100644
index 000000000..da75fca67
--- /dev/null
+++ b/spx-recommend/project/app/config/config.py
@@ -0,0 +1,56 @@
+import os
+from pathlib import Path
+
+# 项目根目录
+BASE_DIR = Path(__file__).parent.parent.parent
+
+
+class Config:
+    """基础配置类"""
+    SECRET_KEY = os.environ.get('SECRET_KEY') or 'dev-secret-key-change-in-production'
+    
+    # 文件上传配置
+    UPLOAD_FOLDER = os.path.join(BASE_DIR, 'uploads')
+    MAX_CONTENT_LENGTH = 32 * 1024 * 1024  # 32MB
+    
+    # 日志配置
+    LOG_FOLDER = os.path.join(BASE_DIR, 'logs')
+    
+    # CLIP模型配置
+    CLIP_MODEL_NAME = os.environ.get('CLIP_MODEL_NAME') or 'ViT-B-32'
+    CLIP_PRETRAINED = os.environ.get('CLIP_PRETRAINED') or 'laion2b_s34b_b79k'
+    
+    # API配置
+    JSON_SORT_KEYS = False
+    JSONIFY_PRETTYPRINT_REGULAR = True
+
+
+class DevelopmentConfig(Config):
+    """开发环境配置"""
+    DEBUG = True
+    ENV = 'development'
+
+
+class ProductionConfig(Config):
+    """生产环境配置"""
+    DEBUG = False
+    ENV = 'production'
+    
+    # 生产环境应该使用更强的密钥
+    SECRET_KEY = os.environ.get('SECRET_KEY') or 'production-secret-key-must-be-set'
+
+
+class TestingConfig(Config):
+    """测试环境配置"""
+    TESTING = True
+    DEBUG = True
+    UPLOAD_FOLDER = os.path.join(BASE_DIR, 'test_uploads')
+
+
+# 配置字典
+config = {
+    'development': DevelopmentConfig,
+    'production': ProductionConfig,
+    'testing': TestingConfig,
+    'default': DevelopmentConfig
+}
\ No newline at end of file
diff --git a/spx-recommend/project/app/services/__init__.py b/spx-recommend/project/app/services/__init__.py
new file mode 100644
index 000000000..e69de29bb
diff --git a/spx-recommend/project/app/services/image_search_service.py b/spx-recommend/project/app/services/image_search_service.py
new file mode 100644
index 000000000..4e9c1ed47
--- /dev/null
+++ b/spx-recommend/project/app/services/image_search_service.py
@@ -0,0 +1,153 @@
+import open_clip
+import torch
+from PIL import Image
+import numpy as np
+import cairosvg
+import io
+import os
+from typing import List, Dict, Any, Optional
+import logging
+
+logger = logging.getLogger(__name__)
+
+
+class ImageSearchService:
+    """图像搜索服务类"""
+    
+    def __init__(self, model_name: str = 'ViT-B-32', pretrained: str = 'laion2b_s34b_b79k'):
+        """
+        初始化图像搜索服务
+        
+        Args:
+            model_name: CLIP模型名称
+            pretrained: 预训练权重
+        """
+        self.model_name = model_name
+        self.pretrained = pretrained
+        self.device = "cuda" if torch.cuda.is_available() else "cpu"
+        self.model = None
+        self.preprocess = None
+        self.tokenizer = None
+        self._load_model()
+    
+    def _load_model(self):
+        """加载CLIP模型"""
+        try:
+            self.model, _, self.preprocess = open_clip.create_model_and_transforms(
+                self.model_name, pretrained=self.pretrained
+            )
+            self.tokenizer = open_clip.get_tokenizer(self.model_name)
+            self.model = self.model.to(self.device)
+            logger.info(f"模型加载成功: {self.model_name} on {self.device}")
+        except Exception as e:
+            logger.error(f"模型加载失败: {e}")
+            raise
+    
+    def _process_image(self, image_path: str) -> Optional[torch.Tensor]:
+        """
+        处理单张图片
+        
+        Args:
+            image_path: 图片路径
+            
+        Returns:
+            处理后的图片张量，失败返回None
+        """
+        try:
+            # 检查文件是否存在
+            if not os.path.exists(image_path):
+                logger.warning(f"图片文件不存在: {image_path}")
+                return None
+            
+            # 根据文件扩展名选择处理方式
+            _, ext = os.path.splitext(image_path.lower())
+            
+            if ext == '.svg':
+                # 处理SVG文件
+                png_data = cairosvg.svg2png(url=image_path, output_width=224, output_height=224)
+                image = Image.open(io.BytesIO(png_data))
+            else:
+                # 处理其他格式图片
+                image = Image.open(image_path).convert('RGB')
+            
+            return self.preprocess(image)
+            
+        except Exception as e:
+            logger.error(f"处理图片失败 {image_path}: {e}")
+            return None
+    
+    def search_images(self, text_query: str, image_paths: List[str], top_k: Optional[int] = None) -> List[Dict[str, Any]]:
+        """
+        根据文本查询搜索图片
+        
+        Args:
+            text_query: 查询文本
+            image_paths: 图片路径列表
+            top_k: 返回前k张图片，None则返回所有
+            
+        Returns:
+            排序后的结果列表，包含图片路径和相似度分数
+        """
+        if not text_query.strip():
+            raise ValueError("查询文本不能为空")
+        
+        if not image_paths:
+            raise ValueError("图片路径列表不能为空")
+        
+        # 处理文本
+        text = self.tokenizer([text_query]).to(self.device)
+        
+        # 处理所有图片
+        images = []
+        valid_paths = []
+        
+        for img_path in image_paths:
+            processed_image = self._process_image(img_path)
+            if processed_image is not None:
+                images.append(processed_image)
+                valid_paths.append(img_path)
+        
+        if not images:
+            logger.warning("没有有效的图片可以处理")
+            return []
+        
+        # 批量处理图片
+        images_tensor = torch.stack(images).to(self.device)
+        
+        with torch.no_grad():
+            # 编码文本和图片
+            text_features = self.model.encode_text(text)
+            image_features = self.model.encode_image(images_tensor)
+            
+            # 归一化特征
+            text_features /= text_features.norm(dim=-1, keepdim=True)
+            image_features /= image_features.norm(dim=-1, keepdim=True)
+            
+            # 计算相似度
+            similarity = (text_features @ image_features.T).squeeze(0)
+            
+            # 转换为 numpy 并排序
+            similarity_scores = similarity.cpu().numpy()
+        
+        # 创建结果列表
+        results = []
+        for i, score in enumerate(similarity_scores):
+            results.append({
+                'image_path': valid_paths[i],
+                'similarity': float(score),
+                'rank': i + 1
+            })
+        
+        # 按相似度降序排序
+        results.sort(key=lambda x: x['similarity'], reverse=True)
+        
+        # 更新排名
+        for i, result in enumerate(results):
+            result['rank'] = i + 1
+        
+        # 返回前k个结果
+        if top_k is not None and top_k > 0:
+            results = results[:top_k]
+        
+        logger.info(f"搜索完成，查询: '{text_query}', 找到 {len(results)} 个结果")
+        return results
\ No newline at end of file
diff --git a/spx-recommend/project/requirements.txt b/spx-recommend/project/requirements.txt
new file mode 100644
index 000000000..a3bccb894
--- /dev/null
+++ b/spx-recommend/project/requirements.txt
@@ -0,0 +1,22 @@
+# Web框架
+Flask==2.3.3
+Werkzeug==2.3.7
+
+# 机器学习和计算机视觉
+torch>=1.13.0
+torchvision>=0.14.0
+open_clip_torch>=2.20.0
+Pillow>=9.5.0
+numpy==1.24.0
+
+# SVG处理
+cairosvg>=2.7.0
+
+# 开发和测试工具
+pytest>=7.4.0
+pytest-flask>=1.2.0
+black>=23.0.0
+flake8>=6.0.0
+
+# 生产环境
+gunicorn>=21.2.0
\ No newline at end of file
diff --git a/spx-recommend/project/run.py b/spx-recommend/project/run.py
new file mode 100644
index 000000000..f1f4c9bae
--- /dev/null
+++ b/spx-recommend/project/run.py
@@ -0,0 +1,31 @@
+#!/usr/bin/env python3
+"""
+Image Search API 启动文件
+"""
+import os
+from app import create_app
+from app.api.routes import init_search_service
+
+# 获取配置环境
+config_name = os.getenv('FLASK_ENV', 'development')
+
+# 创建应用实例
+app = create_app(config_name)
+
+# 初始化搜索服务
+with app.app_context():
+    init_search_service(
+        model_name=app.config['CLIP_MODEL_NAME'],
+        pretrained=app.config['CLIP_PRETRAINED']
+    )
+
+if __name__ == '__main__':
+    # 开发环境配置
+    port = int(os.environ.get('PORT', 5000))
+    host = os.environ.get('HOST', '0.0.0.0')
+    
+    app.run(
+        host=host,
+        port=port,
+        debug=app.config['DEBUG']
+    )
\ No newline at end of file
diff --git a/spx-recommend/project/tests/__init__.py b/spx-recommend/project/tests/__init__.py
new file mode 100644
index 000000000..739954cbf
--- /dev/null
+++ b/spx-recommend/project/tests/__init__.py
@@ -0,0 +1 @@
+# Tests package
\ No newline at end of file
diff --git a/spx-recommend/project/tests/test_api.py b/spx-recommend/project/tests/test_api.py
new file mode 100644
index 000000000..3b1698876
--- /dev/null
+++ b/spx-recommend/project/tests/test_api.py
@@ -0,0 +1,83 @@
+import pytest
+import json
+import os
+from app import create_app
+
+
+@pytest.fixture
+def app():
+    """创建测试应用"""
+    app = create_app('testing')
+    return app
+
+
+@pytest.fixture
+def client(app):
+    """创建测试客户端"""
+    return app.test_client()
+
+
+def test_health_check(client):
+    """测试健康检查接口"""
+    response = client.get('/api/health')
+    assert response.status_code == 200
+    
+    data = json.loads(response.data)
+    assert data['status'] == 'healthy'
+    assert data['service'] == 'image-search-api'
+
+
+def test_index_route(client):
+    """测试根路由"""
+    response = client.get('/')
+    assert response.status_code == 200
+    
+    data = json.loads(response.data)
+    assert 'message' in data
+    assert 'endpoints' in data
+
+
+def test_search_missing_text(client):
+    """测试缺少查询文本的情况"""
+    response = client.post('/api/search', data={})
+    assert response.status_code == 400
+    
+    data = json.loads(response.data)
+    assert data['code'] == 'MISSING_TEXT_QUERY'
+
+
+def test_search_no_files(client):
+    """测试没有上传文件的情况"""
+    response = client.post('/api/search', data={'text': 'test query'})
+    assert response.status_code == 400
+    
+    data = json.loads(response.data)
+    assert data['code'] == 'NO_FILES_UPLOADED'
+
+
+def test_search_url_invalid_json(client):
+    """测试无效JSON请求"""
+    response = client.post('/api/search/url', 
+                          data='invalid json',
+                          content_type='application/json')
+    assert response.status_code == 400
+
+
+def test_search_url_missing_text(client):
+    """测试URL搜索缺少文本"""
+    response = client.post('/api/search/url',
+                          json={'image_urls': ['http://example.com/img.jpg']})
+    assert response.status_code == 400
+    
+    data = json.loads(response.data)
+    assert data['code'] == 'MISSING_TEXT_QUERY'
+
+
+def test_search_url_invalid_urls(client):
+    """测试无效的URL列表"""
+    response = client.post('/api/search/url',
+                          json={'text': 'test', 'image_urls': 'not a list'})
+    assert response.status_code == 400
+    
+    data = json.loads(response.data)
+    assert data['code'] == 'INVALID_IMAGE_URLS'
\ No newline at end of file
diff --git a/spx-recommend/resource/cute.svg b/spx-recommend/resource/cute.svg
new file mode 100644
index 000000000..9eac5733d
--- /dev/null
+++ b/spx-recommend/resource/cute.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8" ?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1024" height="1024" viewBox="0 0 1024 1024"><path fill="#FFFFFD" d="M0 0L1024 0L1024 1024L0 1024L0 0Z"/><path fill="#4A333B" d="M551.947 184.681C591.215 135.071 633.561 92.6277 692.101 65.9868C702.733 61.1484 727.847 47.7836 738.283 56.8399C744.97 63.0959 750.141 74.6972 753.551 83.1757C771.683 127.146 777.833 171.032 782.101 217.84C794.034 230.906 793.787 231.588 802.476 246.074C801.525 240.9 797.48 225.258 803.484 222.789C805.949 223.17 807.725 224.953 809.087 226.963C822.522 246.787 828.076 270.923 829.182 294.294C831.186 289.704 839.632 271.029 845.973 273.996C848.411 277.691 846.824 284.613 845.963 288.777C842.546 305.294 835.95 317.42 846.32 333.273C855.551 347.385 869.759 356.154 882.784 366.593C907.209 386.047 931.503 405.027 952.43 428.403C960.761 437.709 967.808 445.532 974.722 456.049C984.781 471.351 984.809 474.38 971.974 488.056C947.177 514.477 916.064 535.578 884.737 553.504C862.783 565.809 836.122 578.474 812.484 586.747C812.685 590.532 812.994 594.325 813.672 598.038C815.35 607.232 819.353 615.696 823.084 624.185C823.58 625.313 823.122 626.365 822.662 627.413C816.285 630.865 799.493 619.052 794.604 614.547C796.91 619.779 797.581 620.829 801.027 625.332C803.845 629.013 809.726 634.447 811.095 638.42C806.759 644.481 785.774 643.742 778.837 642.141C781.495 643.679 785.85 645.732 787.325 648.182C786.594 657.767 755.654 646.687 750.836 644.949C754.231 648.34 760.567 654.026 762.31 658.153C761.434 667.18 715.255 657.232 708.086 655.652C707.512 655.877 707.007 656.021 706.509 656.35C704.102 653.976 684.713 648.904 679.357 647.122C687.12 659.221 696.143 673.361 700.818 687.072C701.634 689.465 701.573 690.118 700.479 692.073C698.844 693.21 698.653 693.156 696.595 693.465L696.04 693.543C697.411 700.38 710.166 716.925 707.158 725.47C705.177 731.097 696.328 723.861 693.721 721.804C699.346 739.853 704.673 755.369 702.925 774.738C702.526 779.161 702.715 783.153 700.972 787.36C699.88 789.996 696.629 791.329 694.296 789.894L694.985 789.579L695.166 789.065C693.289 786.44 691.668 783.662 689.996 780.902C693.22 794.774 692.033 811.364 688.515 825.092C687.709 827.721 686.375 833.125 684.153 834.773C679.141 838.494 675.725 827.41 674.143 824.393C672.044 840.487 667.288 856.44 657.986 869.816C656.662 871.72 656.096 872.93 653.744 873.398C651.738 872.862 651.886 871.942 650.193 870.533L649.197 873.345C645.909 882.786 627.177 916.068 617.095 915.313C615.564 914.531 615.061 913.152 614.176 911.599C607.976 919.749 596.122 930.711 586.431 934.657C582.686 936.182 581.822 935.752 578.717 934.386C576.5 934.914 566.16 944.233 561.496 946.624C549.845 952.598 541.33 954.073 529.01 957.51C520.459 959.895 508.079 966.477 497.75 964.593C495.506 964.184 494.389 961.864 493.503 960.016C441.111 973.953 377.438 970.335 325.237 956.945C312.682 953.725 301.279 948.606 288.993 944.8C286.351 943.982 279.047 943.795 275.55 943.297C263.067 941.52 250.898 938.723 239.218 933.855C236.986 932.925 233.654 931.6 232.997 929.055C232.392 926.71 233.479 925.404 234.746 923.62C223.19 920.863 209.725 917.032 200.886 908.54C198.179 905.688 201.997 902.937 198.497 901.118C189.981 896.69 157.83 885.711 175.506 873.544C164.966 868.191 111.158 835.024 136.051 823.382C126.166 812.884 116.57 803.367 107.715 791.862C84.0105 761.004 63.894 726.267 53.2293 688.647C51.5319 682.66 46.3877 668.666 50.0675 663.264C51.1817 661.628 55.2177 661.479 57.2034 661.23C57.4541 659.314 54.7248 653.63 54.0814 651.512C47.7538 630.684 42.5908 608.454 43.9181 586.56C44.0471 584.432 45.1219 580.649 47.0696 579.678C51.6201 577.41 54.1478 581.412 56.0991 584.255C55.7363 553.673 56.7001 529.221 63.9954 499.098C80.8065 431.143 123.669 365.606 183.893 328.683C189.966 324.96 235.539 301.584 238.74 311.138C238.462 313.006 238.094 313.188 236.754 314.699L236.344 315.153C260.344 304.882 286.931 302.97 309.911 316.861C322.98 324.761 315.431 330.784 311.861 340.888C310.799 343.895 312.242 349.232 310.914 353.128C308.827 359.249 304.146 362.288 300.628 367.412C298.736 374.874 299.421 377.254 294.732 384.642C281.907 404.846 261.441 417.252 243.638 432.514C229.79 444.386 217.038 457.02 206.157 471.691C168.331 522.025 157.242 588.512 165.689 649.995C172.595 700.26 193.334 753.864 225.397 793.571C238.781 810.146 253.072 822.586 269.984 835.295C266.287 827.315 262.713 816.506 260.108 808.027C245.71 761.174 237.982 711.424 215.85 667.255C214.344 664.25 212.723 660.866 211.737 657.663C204.65 634.638 218.083 603.388 241.82 596.042C239.333 583.88 236.31 571.834 232.761 559.938C225.634 536.415 214.583 514.117 225.957 489.867C236.609 467.156 264.708 460.287 286.081 471.689C301.121 479.712 315.281 489.658 323.025 505.177C333.711 525.533 340.527 548.417 347.52 570.087C358.751 559.456 365.68 554.693 378.46 545.933C373.938 543.42 358.77 536.548 358.422 531.527C359.714 528.839 367.355 524.735 370.22 522.995C360.967 517.186 351.06 510.54 345.465 500.96C325.207 495.264 306.72 487.11 292.638 470.796C285.023 462.031 281.244 450.577 282.15 439.001C284.564 407.976 326.581 399.995 351.409 402.763C387.326 406.768 417.013 425.004 443.167 449.09C449.572 454.989 455.925 460.223 461.511 466.848C449.504 440.282 435.18 404.214 428.49 376.221C421.232 345.847 419.427 303.469 422.917 272.598C421.874 271.67 420.463 270.635 419.334 269.761L420.231 269.268L422.621 270.771C423.545 269.458 423.984 265.317 424.227 263.434C425.235 255.611 431.827 225.091 437.651 221.528C442.475 221.505 444.406 230.865 445.651 234.682C447.074 226.892 453.781 199.49 460.061 195.105C461.697 194.916 460.979 194.718 462.286 195.723C463.933 198.899 465.492 206.224 466.36 209.982C467.245 202.57 471.295 175.931 479.655 174.165C482.843 175.015 490.359 185.737 493.893 189.126C493.47 186.605 490.171 166.462 497.016 166.353C500.582 166.297 509.456 174.444 513.288 175.917C525.502 181.389 538.731 184.455 551.947 184.681Z"/><path fill="#FFFFFD" d="M436.482 485.504C451.973 480.774 459.225 482.479 475.109 483.903C487.467 505.968 503.852 528.508 520.055 548.028C525.286 554.33 532.971 561.501 538.805 567.638C506.508 545.004 461.806 540.732 427.891 562.734C417.141 569.708 408.334 580.412 405.783 593.194C403.215 606.063 409.793 617.438 416.78 627.703C429.872 646.822 445.631 654.95 468.116 658.916L468.2 659.511C473.369 694.285 500.882 733.125 538.186 736.729C563.472 739.172 583.558 729.282 602.786 713.759C553.353 736.102 510.721 732.76 483.458 680.019C479.959 673.25 477.126 666.363 473.936 659.463C488.804 659.252 505.771 651.925 511.6 637.389C500.444 645.019 485.457 650.94 471.672 649.666C453.833 648.017 446.546 634.101 458.089 619.454C463.519 612.565 468.727 609.077 475.92 604.249C456.881 606.295 444.578 620.002 444.885 639.21C436.237 634.81 426.254 627.96 422.375 618.708C422.743 611.803 424.867 605.107 428.545 599.251C434.713 589.28 441.09 586.532 452.004 583.922C431.71 579.916 422.251 593.923 416.545 610.803C409.254 589.155 418.81 574.552 437.965 564.118C472.401 545.361 513.666 554.881 542.08 580.123C562.592 598.344 573.755 617.699 586.553 641.369C582.999 616.151 569.75 600.328 555.422 581.306C565.615 588.047 575.728 596.778 586.797 603.903C605.933 616.222 623.501 624.726 643.912 634.282C652.819 638.194 659.885 640.364 668.251 643.788C675.117 654.16 684.252 669.61 688.867 681.082C680.964 676.605 675.94 673.315 667.355 670.451C672.71 680.086 676.902 683.826 683.926 692.312C688.878 698.296 694.221 707.735 697.245 714.902C686.41 708.57 678.185 702.264 666.288 697.292L666.634 697.983C670.346 705.316 676.483 711.527 680.926 718.204C691.132 733.544 694.17 756.388 694.856 774.318C689.159 766.05 676.376 748.021 667.857 742.926L667.106 743.101C666.844 745.629 675.031 761.646 676.649 765.846C678.262 770.013 679.574 774.292 680.572 778.647C683.618 792.096 683.12 806.903 681.764 820.558C678.879 812.31 670.807 794.598 664.531 788.533C664.834 795.671 665.643 802.886 665.982 810.068C666.917 829.834 662.16 842.867 654.795 860.568C655.995 847.36 654.803 830.144 649.298 817.989C647.065 854.575 645.774 870.457 622.293 900.973C630.163 883.933 630.038 874.348 629.321 855.9C622.718 877.811 618.209 894.639 601.505 911.453C596.838 916.15 592.689 920.285 587.211 924.198C595.537 911.5 598.783 903.257 598.422 887.73C586.578 911.797 568.963 935.436 542.559 944.471C541.805 944.729 541.048 944.98 540.289 945.226C548.488 936.183 550.756 928.119 553.39 916.383C549.626 920.916 546.456 925.737 542.665 930.149C532.427 942.066 517.947 952.991 502.159 955.694C509.618 948.22 511.188 943.61 515.328 933.81C512.06 937.172 505.802 943.561 501.355 945.438C478.565 955.054 447.932 956.806 423.49 957.468C414.591 957.709 398.602 957.512 390.396 956.465C369.309 956.291 336.888 949.133 316.503 943.143C310.267 942.144 299.487 935.521 293.78 934.997C276.283 933.39 262.768 933.366 245.726 926.676C258.24 926.454 272.611 925.13 284.124 919.873C255.176 918.737 234.827 918.029 207.78 904.065C220.974 904.624 242.162 905.287 254.977 903.053C250.034 901.589 239.053 900.408 233.416 899.55C212.724 896.402 196.472 891.337 178.43 880.394C192.94 880.761 204.645 883.623 220.319 883.6C187.675 870.754 161.566 858.433 137.687 832.195C143.463 833.664 148.282 836.199 153.727 838.571C162.918 842.573 171.332 846.361 180.938 849.245C174.221 843.473 165.742 837.806 159.173 832.086C147.844 822.221 133.709 808.113 124.524 796.161C126.961 796.181 146.523 804.045 151.973 805.416C148.926 796.999 145.715 788.643 142.342 780.352C149.652 787.358 163.863 798.292 172.128 805.041C172.038 796.461 168.824 782.782 166.977 773.883C174.907 781.212 182.923 788.446 191.025 795.584C191.421 788.795 191.374 781.987 190.884 775.203C190.633 771.472 189.809 764.391 190.203 760.972C208.341 792.827 242.045 835.121 276.078 850.332C279.206 857.192 282.704 863.878 286.555 870.36C301.316 894.777 313.737 904.174 341.498 911.077C328.374 901.571 317.7 895.58 307.476 881.603C259.143 815.535 259.393 728.094 221.434 657.083C215.81 646.562 219.535 634.117 223.539 623.728C244.62 624.175 247.214 633.121 259.908 645.156C255.848 628.668 244.311 618.66 227.079 618.445C233.147 611.265 240.474 603.568 250.877 605.144C265.873 607.416 272.463 619.498 280.866 630.08C276.335 613.78 271.455 605.745 254.533 600.516C270.212 597.617 281.039 597.522 290.275 613.165C291.652 615.498 293.007 619.298 294.995 620.973L295.758 620.767C297.454 616.078 294.164 609.514 291.757 605.521L292.773 606.087C307.089 614.105 308.536 619.831 315.544 634.23C329.533 662.972 336.657 693.561 345.268 724.106C336.941 731.765 330.336 740.975 326.547 751.649C344.517 732.868 364.397 719.713 390.104 714.031C459.678 698.653 517.202 744.24 541.325 806.516C539.364 795.822 535.866 785.468 530.942 775.774C515.381 743.955 487.573 719.813 453.884 708.874C428.424 700.469 400.25 700.454 374.619 708.733C367.861 710.916 360.274 714.948 353.842 718.169C342.9 681.437 335.701 657.23 318.703 622.786C322.461 613.164 330.111 603.669 336.759 595.785C355.817 573.178 378.222 552.877 404.609 539.201C412.969 534.868 420.491 532.954 429.55 531.213C430.655 531 431.052 530.314 431.655 529.502L431.135 528.397C427.537 525.723 422.264 524.372 417.909 523.006C431.949 516.633 443.655 519.693 457.869 523.734C451.709 513.825 437.075 508.483 426.825 502.235C442.053 497.168 454.235 499.821 468.858 506.026C460.913 496.246 448.275 489.387 436.482 485.504Z"/><path fill="#CBC3C2" d="M643.912 634.282C652.819 638.194 659.885 640.364 668.251 643.788C675.117 654.16 684.252 669.61 688.867 681.082C680.964 676.605 675.94 673.315 667.355 670.451C672.71 680.086 676.902 683.826 683.926 692.312C688.878 698.296 694.221 707.735 697.245 714.902C686.41 708.57 678.185 702.264 666.288 697.292L666.634 697.983C670.346 705.316 676.483 711.527 680.926 718.204C691.132 733.544 694.17 756.388 694.856 774.318C689.159 766.05 676.376 748.021 667.857 742.926L667.106 743.101C666.844 745.629 675.031 761.646 676.649 765.846C678.262 770.013 679.574 774.292 680.572 778.647C683.618 792.096 683.12 806.903 681.764 820.558C678.879 812.31 670.807 794.598 664.531 788.533C664.834 795.671 665.643 802.886 665.982 810.068C666.917 829.834 662.16 842.867 654.795 860.568C655.995 847.36 654.803 830.144 649.298 817.989C647.065 854.575 645.774 870.457 622.293 900.973C630.163 883.933 630.038 874.348 629.321 855.9C622.718 877.811 618.209 894.639 601.505 911.453C596.838 916.15 592.689 920.285 587.211 924.198C595.537 911.5 598.783 903.257 598.422 887.73C586.578 911.797 568.963 935.436 542.559 944.471C541.805 944.729 541.048 944.98 540.289 945.226C548.488 936.183 550.756 928.119 553.39 916.383C549.626 920.916 546.456 925.737 542.665 930.149C532.427 942.066 517.947 952.991 502.159 955.694C509.618 948.22 511.188 943.61 515.328 933.81C512.06 937.172 505.802 943.561 501.355 945.438C478.565 955.054 447.932 956.806 423.49 957.468C414.591 957.709 398.602 957.512 390.396 956.465C392.561 955.309 396.742 953.733 399.266 952.53C439.353 933.428 472.369 896.45 491.499 856.807C496.71 846.008 499.76 835.76 503.786 824.675C526.165 824.289 553.186 815.664 566.42 796.397C569.845 791.409 569.568 788.991 563.975 786.388C595.182 759.545 625.43 710.593 636.872 671.043C640.617 658.094 641.329 647.143 643.912 634.282Z"/><path fill="#FFFFFD" d="M726.575 77.4435C732.884 77.4646 735.115 77.6722 741.138 79.4247C747.246 94.3214 751.724 110.755 756.318 126.185C763.274 149.549 767.777 173.48 770.813 197.643C771.371 202.089 771.906 207.007 772.775 211.384C769.163 208.11 758.776 198.584 753.873 198.607C750.796 200.468 752.602 204.099 753.915 206.741C757.296 213.545 761.583 220.002 765.261 226.645C759.488 222.253 734.632 204.098 728.399 211.781C728.098 215.482 738.889 224.093 741.833 227.208C747.685 233.401 752.493 239.523 757.58 246.312C751.383 250.978 744.381 254.986 738.292 259.617C724.55 270.222 709.896 284.915 699.774 299.058C672.255 337.51 649.346 381.965 635.338 427.19C627.821 451.459 628.559 486.516 636.612 510.218C638.114 537.192 682.562 581.337 701.997 600.469C706.406 606.493 721.742 616.618 725.057 622.026C732.346 633.916 740.211 641.623 748.549 651.979C738.136 649.376 722.476 646.839 711.384 644.583C709.656 642.231 705.292 637.733 703.186 635.387C698.544 630.241 694.135 624.889 689.974 619.347C681.3 607.637 675.566 596.142 667.832 585.374C672.519 602.649 692.717 630.229 705.244 643.013C697.946 641.293 679.061 635.135 672.421 632.162C666.953 624.471 661.301 610.907 657.478 602.096C655.696 597.989 654.202 593.519 652.023 589.606C654.928 604.032 661.1 618.314 667.733 631.356C654.533 626.006 639.454 619.925 626.772 613.583C589.892 595.139 553.157 568.894 525.328 538.291C461.987 467.539 428.762 374.858 432.727 279.977L432.676 278.276C433.2 275.984 433.271 273.529 433.427 271.183C434.354 257.269 436.453 243.535 438.382 229.727C442.027 241.519 442.715 247.783 452.277 257.373C453.226 256.319 454.842 233.771 455.43 229.748C456.651 221.893 458.337 214.118 460.479 206.462C464.197 223.591 467.839 232.366 478.969 245.7C471.724 227.965 476.246 200.738 479.639 182.1C482.887 190.283 487.161 195.689 494.754 200.315C503.864 205.865 518.658 210.013 529.236 207.542C527.869 207.007 526.516 206.438 525.177 205.837C512.333 199.968 506.252 191.63 501.462 178.931C518.403 195.739 550.606 197.324 572.427 192.212C595.087 186.904 613.876 179.586 637.268 185.951C627.447 179.041 624.569 176.821 613.078 172.901C617.393 170.925 622.04 169.776 626.779 169.515C639.98 168.763 650.211 173.28 659.807 181.858C657.332 170.856 646.593 161.615 638.302 154.566C655.961 159.852 660.801 167.195 674.64 176.366C668.483 160.939 661.239 153.093 653.172 139.334C670.898 150.015 684.609 171.446 692.443 190.189C692.505 180.639 694.016 159.992 694.962 150.178C695.903 157.734 696.819 165.502 698.076 173.002C699.712 182.752 695.759 190.057 694.719 199.993C709.415 177.952 726.332 124.556 727.389 97.5285C727.647 90.9451 726.541 84.7767 725.639 78.3093L726.575 77.4435Z"/><path fill="#4A333B" d="M432.676 278.276C442.052 282.881 466.644 310.952 469.136 321.757C469.479 323.242 470.236 325.546 470.623 327.166C458.624 307.572 450.03 295.549 432.727 279.977L432.676 278.276Z"/><path fill="#4A333B" d="M587.346 218.207C618.682 213.96 643.838 234.256 640.481 266.918C637.564 295.306 614.39 321.901 592.963 339.461C572.074 356.579 534.797 374.501 514.844 345.981C500.302 325.92 493.546 296.543 496.651 272.457C500.808 280.911 504.82 301.208 508.231 312.181C509.398 308.667 510.641 305.614 512.04 302.182C519.473 284.713 535.924 265.622 551.786 255.398C575.294 240.247 608.444 232.416 626.418 259.828C622.759 241.533 610.681 234.744 592.893 233.388C559.685 230.857 532.824 247.186 508.422 267.872C526.98 236.229 550.902 221.698 587.346 218.207Z"/><path fill="#F4C3BA" d="M558.879 262.562C560.555 263.193 560.492 263.08 561.502 264.539C561.331 267.79 554.352 271.556 551.7 273.69C545.423 278.834 539.706 284.624 534.642 290.966C521.982 306.716 514.468 323.896 533.302 339.752C542.771 347.723 557.106 344.685 566.972 339.329C570.629 337.343 577.018 332.822 581.052 332.359C582.772 333.377 582.194 332.696 583.044 334.283C582.364 337.171 578.695 338.959 576.133 340.615C571.395 343.439 566.454 345.906 561.35 347.998C533.966 358.936 520.184 344.972 510.951 320.274C514.954 300.469 539.381 268.496 558.879 262.562Z"/><path fill="#FFFFFD" d="M598.574 274.167C621.503 273.959 616.357 301.739 592.498 307.505C567.95 309.119 574.103 277.101 598.574 274.167Z"/><path fill="#4A333B" d="M536.262 385.908C538.097 385.952 538.773 386.013 539.895 387.375C539.569 389.616 534.235 394.024 532.981 397.043C526.786 411.951 549.328 423.013 560.186 427.654C564.113 423.59 565.194 422.898 570.435 420.728C568.389 414.402 563.352 390.631 570.825 390.276C582.134 389.325 601.398 413.461 602.514 423.236C604.919 444.292 577.72 411.999 564.585 431.169L564.17 431.784C557.459 446.934 573.614 467.946 589.059 469.23C591.565 469.438 593.29 463.616 595.189 461.757L596.07 461.911C600.78 468.666 594.322 475.665 585.81 473.472C568.194 468.932 554.146 450.019 558.491 431.699C544.569 427.068 521.123 413.764 527.268 394.65C528.678 390.261 532.188 387.773 536.262 385.908Z"/><path fill="#4A333B" d="M635.418 212.697C648.524 213.106 661.356 216.558 672.898 222.78C681.223 227.343 696.91 239.193 699.67 248.586C694.792 245.656 688.905 241.454 683.88 238.289C674.75 232.503 665.25 227.321 655.442 222.776C651.388 220.88 637.327 215.107 635.418 212.697Z"/><defs><linearGradient id="gradient_0" gradientUnits="userSpaceOnUse" x1="463.83868" y1="291.97345" x2="474.2879" y2="288.99164"><stop offset="0" stop-color="#2F2420"/><stop offset="1" stop-color="#50383C"/></linearGradient></defs><path fill="url(#gradient_0)" d="M452.928 258.275C455.964 259.939 463.291 269.874 465.321 272.808C474.161 285.585 483.408 306.28 480.366 322.198C478.694 321.758 477.546 313.846 477.2 311.924C472.928 288.181 466.226 277.204 452.928 258.275Z"/><path fill="#CBC3C2" d="M758.81 206.3L759.493 206.837C773.313 217.8 788.56 236.784 796.626 252.395C800.376 259.654 802.736 268.023 806.361 275.353C806.64 275.358 806.918 275.363 807.197 275.367C810.263 270.191 806.01 238.906 804.343 231.956C819.839 260.782 822.945 279.676 825.901 311.625C831.294 302.28 834.455 292.454 839.921 283.552C834.731 302.825 828.626 319.834 840.345 338.27C853.965 359.698 881.539 378.226 900.596 394.502C924.019 414.507 958.78 446.631 974.264 472.646C966.572 484.204 954.675 494.05 943.644 502.401C903.62 532.701 858.727 555.302 812.673 574.717C814.737 560.986 817.256 555.238 820.329 542.739C866.632 531.145 920.126 506.591 955.585 472.23C959.383 468.55 951.362 463.895 949.056 462.169C936.373 453.137 922.383 446.369 907.636 441.413C888.131 434.858 866.71 431.352 846.123 432.245C842.616 432.398 836.751 432.589 834.371 435.36C834.095 436.505 833.694 437.308 834.643 438.413C839.543 444.121 851.447 448.714 857.885 452.149C861.755 454.17 865.459 456.495 868.962 459.101C864.216 458.544 844.117 455.703 840.904 456.726C840.832 457.943 840.753 457.866 841.754 458.818C850.318 466.969 859.708 474.435 866.001 484.665C860.063 482.897 847.162 477.376 841.961 478.34C841.329 479.034 840.972 479.114 841.163 479.894C842.354 484.751 845.121 489.936 846.664 494.858C848.432 500.673 849.57 506.66 850.058 512.718C847.979 511.679 846.819 511.116 844.905 509.74C842.415 507.949 838.482 502.374 835.791 502.263C833.749 504.434 834.111 510.172 832.971 513.848C830.211 522.742 827.311 530.295 821.671 537.846C822.209 534.281 823.704 526.781 822.655 523.771L821.963 523.745C819.503 526.329 817.014 531.78 815.479 535.069C803.029 561.737 795.598 587.344 808.306 615.294C800.013 608.42 793.202 602.308 786.958 593.251C784.847 590.19 782.626 584.86 780.36 582.376C779.262 583.204 778.782 584.731 778.749 586.025C778.354 601.44 784.807 619.392 794.367 630.977C795.667 632.539 796.996 634.077 798.354 635.59C775.079 636.396 773.962 638.479 756.811 622.332C752.11 617.907 735.556 600.964 731.318 598.371C737.553 615.983 755.186 629.429 767.904 642.091C731.744 630.531 708.956 603.99 683.674 577.001C680.134 573.221 676.355 568.681 673.288 564.529C696.276 577.906 704.71 579.533 728.847 565.764C747.42 555.168 760.648 542.655 771.518 523.977C800.263 475.946 774.408 421.777 714.393 439.086C684.507 447.705 658.206 467.906 642.343 495.072C639.567 500.065 637.642 504.61 636.612 510.218C628.559 486.516 627.821 451.459 635.338 427.19C649.346 381.965 672.255 337.51 699.774 299.058C709.896 284.915 724.55 270.222 738.292 259.617C744.381 254.986 751.383 250.978 757.58 246.312C759.533 249.005 760.907 250.547 763.153 253.013C759.486 241.85 755.088 236.444 748.29 226.984C745.334 223.431 740.901 219.115 737.61 215.725C740.108 216.943 742.777 218.477 745.235 219.821C756.568 226.308 763.121 231.618 771.707 241.907C774.473 245.22 779.415 251.859 782.359 254.577C779.406 246.098 775.259 235.346 771.111 227.459C767.428 220.454 762.68 213.299 758.81 206.3Z"/><path fill="#FFFFFD" d="M737.61 215.725C740.108 216.943 742.777 218.477 745.235 219.821C744.227 224.179 747.431 222.893 748.67 226.273L748.29 226.984C745.334 223.431 740.901 219.115 737.61 215.725Z"/><path fill="#4A333B" d="M783.238 386.807C785.085 387.529 786.692 388.336 787.89 389.979C800.477 407.25 805.546 436.382 803.429 456.795C802.738 456.872 803.18 456.887 802.166 456.39C800.352 453.096 795.568 430.294 794.252 424.82C791.831 414.75 783.992 395.831 783.238 386.807Z"/><path fill="#FFFFFD" d="M224.668 318.02C219.889 321.489 205.954 333.606 205.531 339.53L206.127 339.934C209.28 338.399 211.92 336.151 214.863 334.298C240.802 317.97 279.944 309.08 308.882 322.443C301.964 324.875 282.776 331.972 277.233 336.188C286.17 334.584 304.264 329.057 312.518 325.732C306.769 332.785 300.309 339.228 293.24 344.959C289.943 347.646 284.944 351.178 282.064 353.968C291.335 352.361 296.513 350.639 304.56 345.562C297.719 364.833 275.741 373.652 262.115 384.161C272.37 383.433 282.423 379.506 291.103 374.111C280.49 388.394 274.665 394.803 259.861 405.334C236.867 424.079 217.937 438.717 199.287 461.996C187.368 479.492 181.528 488.251 172.725 507.447C166.044 524.056 160.978 536.958 157.138 554.52C154.09 572.633 152.765 585.984 151.935 604.277C151.166 607.616 151.5 617.286 151.551 621.125C146.148 610.362 138.139 597.791 131.665 587.45C127.868 596.262 125.519 609.221 123.638 618.733C116.611 610.661 108.241 591.234 101.033 582.368C98.4622 587.819 96.0052 597.941 94.4806 604.038C89.2587 592.347 82.5583 578.608 76.1909 567.401C74.4036 571.136 72.5677 576.506 71.0793 580.489C70.9025 576.313 71.6443 569.211 66.8854 568.024C66.6506 544.412 69.5992 520.877 75.6516 498.053C77.2277 485.055 93.9378 445.328 101.154 433.91C102.958 429.597 106.894 423.598 109.395 419.508C119.328 403.263 130.457 389.447 143.349 375.458C151.576 364.732 178.209 343.142 189.834 336.07C197.921 330.002 215.28 321.042 224.668 318.02Z"/><path fill="#FFFFFD" d="M75.6516 498.053C77.2277 485.055 93.9378 445.328 101.154 433.91C101.624 437.256 101.509 440.654 101.553 444.031C101.7 455.172 102.15 466.894 103.71 477.924C107.001 470.295 110.571 461.455 115.71 454.947C120.648 468.522 122.351 484.966 126.46 498.988C129.461 488.34 132.671 478.433 139.439 469.395C142.686 479.021 146.921 492.596 151.136 501.559C153.408 496.21 158.434 483.794 162.352 480.208L163.483 479.981C166.12 481.815 169.223 500.968 172.725 507.447C166.044 524.056 160.978 536.958 157.138 554.52C154.09 572.633 152.765 585.984 151.935 604.277C151.166 607.616 151.5 617.286 151.551 621.125C146.148 610.362 138.139 597.791 131.665 587.45C127.868 596.262 125.519 609.221 123.638 618.733C116.611 610.661 108.241 591.234 101.033 582.368C98.4622 587.819 96.0052 597.941 94.4806 604.038C89.2587 592.347 82.5583 578.608 76.1909 567.401C74.4036 571.136 72.5677 576.506 71.0793 580.489C70.9025 576.313 71.6443 569.211 66.8854 568.024C66.6506 544.412 69.5992 520.877 75.6516 498.053Z"/><path fill="#CBC3C2" d="M75.6516 498.053C77.2277 485.055 93.9378 445.328 101.154 433.91C101.624 437.256 101.509 440.654 101.553 444.031C101.7 455.172 102.15 466.894 103.71 477.924C107.001 470.295 110.571 461.455 115.71 454.947C120.648 468.522 122.351 484.966 126.46 498.988C129.461 488.34 132.671 478.433 139.439 469.395C142.686 479.021 146.921 492.596 151.136 501.559C153.408 496.21 158.434 483.794 162.352 480.208L163.483 479.981C166.12 481.815 169.223 500.968 172.725 507.447C166.044 524.056 160.978 536.958 157.138 554.52C155.781 551.052 154.356 539.323 153.786 535.209C148.838 543.073 145.198 552.187 139.899 560.531C137.491 546.579 136.432 531.59 135.868 517.443C133.849 521.599 122.618 549.782 121.604 550.722C117.962 547.942 111.095 514.826 110.1 508.779C107.279 516.271 103.073 531.787 99.6718 537.96C93.8475 521.807 92.1278 509.538 89.6892 492.825C84.6714 502.812 82.0657 510.338 78.2418 520.714C77.4223 513.233 77.0771 505.828 76.3002 498.568L75.6516 498.053Z"/><path fill="#FFFFFD" d="M224.668 318.02C219.889 321.489 205.954 333.606 205.531 339.53L206.127 339.934C209.28 338.399 211.92 336.151 214.863 334.298C240.802 317.97 279.944 309.08 308.882 322.443C301.964 324.875 282.776 331.972 277.233 336.188C286.17 334.584 304.264 329.057 312.518 325.732C306.769 332.785 300.309 339.228 293.24 344.959C289.943 347.646 284.944 351.178 282.064 353.968C291.335 352.361 296.513 350.639 304.56 345.562C297.719 364.833 275.741 373.652 262.115 384.161C272.37 383.433 282.423 379.506 291.103 374.111C280.49 388.394 274.665 394.803 259.861 405.334C247.855 407.211 232.406 408.182 219.775 409.741C226.344 402.395 236.478 395.894 240.911 388.224C232.699 387.538 217.518 388.85 208.901 389.415C213.605 382.464 218.723 374.925 222.06 367.277C214.28 367.391 204.815 367.967 197.298 369.498C200.168 361.86 206.215 350.82 210.109 343.452C201.607 346.986 193.577 353.186 185.085 357.196C186.105 350.039 187.693 342.975 189.834 336.07C197.921 330.002 215.28 321.042 224.668 318.02Z"/><path fill="#CBC3C2" d="M143.349 375.458C151.576 364.732 178.209 343.142 189.834 336.07C187.693 342.975 186.105 350.039 185.085 357.196C193.577 353.186 201.607 346.986 210.109 343.452C206.215 350.82 200.168 361.86 197.298 369.498C204.815 367.967 214.28 367.391 222.06 367.277C218.723 374.925 213.605 382.464 208.901 389.415C217.518 388.85 232.699 387.538 240.911 388.224C236.478 395.894 226.344 402.395 219.775 409.741C232.406 408.182 247.855 407.211 259.861 405.334C236.867 424.079 217.937 438.717 199.287 461.996C198.677 452.217 204.015 440.077 206.597 430.185C199.338 436.666 189.204 446.793 181.695 452.344C181.455 437.004 183.092 427.035 185.86 412.133C176.948 418.626 167.413 427.567 159.483 435.166C157.561 420.004 161.696 403.227 165.309 388.572C158.468 395.062 150.688 401.569 143.643 408.059C143.198 402.795 142.97 397.515 142.96 392.232C142.965 389.651 143.83 377.02 143.349 375.458Z"/><path fill="#FFFFFD" d="M78.0488 627.438C70.5742 608.36 64.1722 588.877 66.8854 568.024C71.6443 569.211 70.9025 576.313 71.0793 580.489C72.5677 576.506 74.4036 571.136 76.1909 567.401C82.5583 578.608 89.2587 592.347 94.4806 604.038C96.0052 597.941 98.4622 587.819 101.033 582.368C108.241 591.234 116.611 610.661 123.638 618.733C125.519 609.221 127.868 596.262 131.665 587.45C138.139 597.791 146.148 610.362 151.551 621.125C151.5 617.286 151.166 607.616 151.935 604.277C151.981 619.987 152.318 633.828 154.296 649.528C155.281 657.35 156.804 664.911 157.808 672.508C160.857 683.772 163.634 696.125 167.407 707.077C171.717 718.952 176.301 730.324 181.207 741.955C182.813 745.766 189.438 758.335 190.203 760.972C189.809 764.391 190.633 771.472 190.884 775.203C191.374 781.987 191.421 788.795 191.025 795.584C182.923 788.446 174.907 781.212 166.977 773.883C168.824 782.782 172.038 796.461 172.128 805.041C163.863 798.292 149.652 787.358 142.342 780.352C145.715 788.643 148.926 796.999 151.973 805.416C146.523 804.045 126.961 796.181 124.524 796.161C122.636 794.708 117.448 788.256 115.733 786.007C101.92 767.891 89.3529 749.738 79.8121 729.053C70.8658 713.745 62.3406 686.806 55.9748 669.872C58.9242 673.584 65.2417 678.73 68.9156 682.168C76.2611 689.041 83.6079 696.467 91.4141 702.779C77.0083 684.524 66.5458 663.479 60.6878 640.974C55.9943 628.563 51.6577 599.962 51.3214 586.817C60.8322 600.094 68.8913 614.901 78.0488 627.438Z"/><path fill="#CBC3C2" d="M78.0488 627.438C70.5742 608.36 64.1722 588.877 66.8854 568.024C71.6443 569.211 70.9025 576.313 71.0793 580.489C72.5677 576.506 74.4036 571.136 76.1909 567.401C82.5583 578.608 89.2587 592.347 94.4806 604.038C96.0052 597.941 98.4622 587.819 101.033 582.368C108.241 591.234 116.611 610.661 123.638 618.733C125.519 609.221 127.868 596.262 131.665 587.45C138.139 597.791 146.148 610.362 151.551 621.125C151.5 617.286 151.166 607.616 151.935 604.277C151.981 619.987 152.318 633.828 154.296 649.528C155.281 657.35 156.804 664.911 157.808 672.508C149.844 664.638 139.97 651.698 132.794 642.766C133.621 654.349 134.649 661.426 134.54 673.346C126.026 663.53 118.804 652.664 113.052 641.013C112.129 649.112 112.227 661.335 112.107 669.763C103.138 656.418 93.9212 643.242 84.4611 630.24C84.5499 639.933 86.1834 653.103 87.1342 662.897C81.2499 658.662 75.5691 654.15 70.1106 649.379C67.5385 647.124 63.1035 642.441 60.6878 640.974C55.9943 628.563 51.6577 599.962 51.3214 586.817C60.8322 600.094 68.8913 614.901 78.0488 627.438Z"/><path fill="#CBC3C2" d="M167.407 707.077C171.717 718.952 176.301 730.324 181.207 741.955C182.813 745.766 189.438 758.335 190.203 760.972C189.809 764.391 190.633 771.472 190.884 775.203C191.374 781.987 191.421 788.795 191.025 795.584C182.923 788.446 174.907 781.212 166.977 773.883C168.824 782.782 172.038 796.461 172.128 805.041C163.863 798.292 149.652 787.358 142.342 780.352C145.715 788.643 148.926 796.999 151.973 805.416C146.523 804.045 126.961 796.181 124.524 796.161C122.636 794.708 117.448 788.256 115.733 786.007C101.92 767.891 89.3529 749.738 79.8121 729.053C91.9401 734.009 114.641 748.465 126.044 756.055C123.627 746.444 121.121 736.856 118.527 727.291C124.82 731.211 139.804 744.793 146.15 750.363C146.111 741.304 145.705 730.092 146.258 721.274C150.745 724.771 159.515 734.813 163.683 739.458C163.818 732.095 163.111 712.447 167.407 707.077Z"/><path fill="#FFFFFD" d="M332.674 411.207C345.242 410.368 356.096 411.994 368.179 415.078C406.864 424.951 433.149 452.175 463.192 476.698C450.128 475.077 439.055 476.956 429.752 486.998C434.195 489.846 438.746 492.084 443.432 494.487C440.671 494.389 436.849 494.12 434.262 494.782C412.163 500.443 425.223 506.435 435.711 512.448C428.776 512.543 412.347 516.515 408.055 522.141C407.312 525.978 413.585 527.236 416.757 528.454C405.41 531.32 399.236 534.681 388.872 539.885C382.514 538.408 376.21 535.583 370.485 532.492C375.575 528.074 381.69 523.436 386.229 518.665C384.929 517.036 376.517 515.967 373.493 514.523C367.143 511.489 362.161 507.375 357.214 502.585C367.622 502.832 377.835 502.332 385.914 495.036C365.668 494.905 344.16 492.467 326.073 482.897C326.494 481.134 326.976 479.388 327.519 477.659C331.291 465.986 340.641 463.844 349.737 459.235C333.988 459.224 321.478 461.657 320.316 480.361C314.123 476.852 302.752 468.966 299.334 462.774C291.212 448.062 310.742 438.52 320.219 433.548C305.658 432.982 299.17 434.234 291.072 447.207C287.099 420.968 311.583 412.854 332.674 411.207Z"/><path fill="#FFFFFD" d="M264.1 474.083C267.083 473.932 270.235 474.562 273.15 475.16C285.846 477.767 289.517 485.413 295.941 495.246C295.307 489.946 294.638 488.467 292.402 483.849C298.291 487.726 306.633 494.242 310.426 500.072C321.067 516.431 337.111 558.16 341.111 576.597C330.433 589.38 322.051 599.672 314.057 614.268C304.439 604.199 297.264 600.054 284.216 595.025C271.447 590.104 263.892 588.418 250.775 592.134L249.092 584.706C246.694 575.382 244.398 567.122 241.566 557.942C234.461 534.915 225.594 519.078 232.805 494.978C247.02 492.744 253.03 492.989 263.8 504.894C265.597 506.88 267.46 510.244 269.643 511.53L270.047 510.999C270.009 509.974 269.967 508.276 269.641 507.337C264.086 491.308 251.803 485.413 235.779 489.968C249.898 469.729 264.319 478.353 278.888 493.209C280.771 495.129 285.233 502.792 286.947 503.61C287.39 502.64 287.475 502.706 286.998 501.319C282.294 487.628 276.15 480.879 264.1 474.083Z"/><path fill="#F4C3BA" d="M853.398 442.144C879.684 440.932 927.446 456.46 949.389 470.573C943.916 475.872 934.028 482.568 927.692 486.898C907.038 501.009 885.71 512.836 862.75 522.826C853.113 526.503 840.521 531.648 830.869 534.284C836.555 524.846 837.336 524.146 839.549 512.976C851.746 523.14 857.522 518.603 855.864 503.929C855.164 497.737 853.975 492.921 852.196 486.953C853.615 487.521 855.05 488.047 856.5 488.53C860.769 489.915 867.064 492.2 871.139 490.128C875.597 483.963 861.337 469.527 857.074 464.865C862.921 465.456 873.077 467.281 877.61 463.199C880.748 455.565 859.213 444.663 853.398 442.144Z"/><path fill="#F4C3BA" d="M629.553 147.785C651.836 122.652 691.091 91.4894 722.434 79.2383C720.869 101.704 712.382 143.038 702.43 162.979C701.009 158.156 696.607 139.594 690.91 139.993C687.098 142.909 688.78 147.032 689.565 151.152C682.916 144.027 677.829 137.966 668.496 134.377C675.141 142.361 678.662 146.252 683.991 155.18L682.508 157.283C677.423 151.219 671.539 145.873 665.017 141.392C661.64 139.104 651.481 132.768 648.544 137.354C649.049 141.477 657.091 153.347 659.779 157.772C655.259 155.688 652.151 154.299 647.226 153.072C641.032 151.529 636.353 151.372 630.577 148.515L629.553 147.785Z"/><path fill="#CBC3C2" d="M730.64 61.7215C736.668 66.0165 738.736 72.5791 741.138 79.4247C735.115 77.6722 732.884 77.4646 726.575 77.4435L727.558 76.7299C726.493 75.8039 725.356 75.5417 724.014 75.067C674.641 88.2738 623.08 139.263 596.669 181.777C585.718 182.969 574.495 184.849 563.527 185.236C568.557 180.08 573.337 174.347 578.07 168.936C610.631 131.712 648.148 98.4961 692.637 76.2836C704.606 70.3079 717.165 63.523 730.64 61.7215Z"/><path fill="#FFFFFD" d="M761.642 462.898C763.488 464.493 765.246 470.629 765.728 472.927C770.006 493.361 760.581 519.577 748.951 536.185C739.483 549.704 725.711 567.496 708.448 570.29C694.755 572.506 687.105 568.377 676.415 561.023C671.253 557.954 668.417 555.698 663.914 551.76C670.772 555.164 679.559 556.348 687.074 554.97C730.008 547.097 768.062 508.147 761.642 462.898Z"/><path fill="#F4C3BA" d="M669.981 476.84C671.453 477.184 670.916 476.772 671.79 477.844C670.545 480.587 665.06 487.412 662.732 490.272C651.854 503.634 648.258 527.217 667.561 535.389C680.43 540.837 698.048 533.158 709.859 527.894C711.952 526.962 715.405 526.119 717.732 527.116C720.076 530.602 713.175 536.141 710.803 538.234C689.483 553.798 662.542 555.222 648.513 529.695C638.07 510.692 648.183 495.546 662.086 482.25C664.598 479.848 666.872 478.383 669.981 476.84Z"/><path fill="#FFFFFD" d="M718.201 454.682C743.295 454.097 729.095 483.033 705.619 487.403C682.131 489.069 692.901 457.846 718.201 454.682Z"/><path fill="#F4C3BA" d="M629.553 147.785L630.577 148.515C630.153 149.403 630.282 149.199 630.157 150.226C632.028 154.31 641.861 164.007 645.506 167.806C643.559 167.269 641.607 166.753 639.649 166.258C629.221 163.656 621.864 162.924 612.543 168.502C617.925 161.364 623.6 154.453 629.553 147.785Z"/><path fill="#FFFFFD" d="M730.501 506.324C731.895 506.97 731.793 506.943 732.774 508.145C734.174 513.713 726.03 520.024 721.888 522.681C720.201 522.52 721.011 522.778 719.5 521.578C717.916 516.498 726.592 508.844 730.501 506.324Z"/><path fill="#FFFFFD" d="M683.991 155.18C685.543 157.956 687.676 161.543 688.81 164.409C686.002 161.71 684.906 160.381 682.508 157.283L683.991 155.18Z"/><path fill="#4A333B" d="M792.372 666.268C799.314 668.057 822.242 692.773 827.551 699.474C851.09 729.186 873.537 771.263 874.889 809.745C872.702 808.311 868.141 792.289 867.045 788.918C852.404 743.887 825.349 700.229 792.372 666.268Z"/><path fill="#4A333B" d="M761.872 671.431C766.723 673.638 777.763 688.176 781.398 692.941C806.767 726.198 827.685 782.557 820.7 824.696L820.361 825.133C819.415 824.263 814.659 787.266 813.447 781.54C806.739 749.855 795.668 720.031 778.011 692.766C773.142 685.247 768.058 677.943 761.872 671.431Z"/><path fill="#4A333B" d="M323.882 124.932C329.483 125.028 339.722 128.547 344.864 130.69C382.013 146.371 411.552 175.964 427.163 213.142C425.484 211.693 421.279 205.643 419.851 203.593C394.253 166.841 363.727 144.314 323.882 124.932Z"/><path fill="#4A333B" d="M282.061 170.755C323.953 166.448 366.527 190.597 395.371 219.277C398.528 222.417 404.821 228.347 406.702 232.092C383.1 210.151 355.435 193.037 325.264 181.716C314.828 177.864 304.101 174.852 293.185 172.708C290.938 172.277 283.023 171.555 282.061 170.755Z"/><path fill="#4A333B" d="M706.509 656.35C707.007 656.021 707.512 655.877 708.086 655.652C723.817 677.11 734.89 701.316 733.85 728.464C732.603 722.433 732.015 716.838 730.45 710.746C725.707 692.281 717.078 672.222 706.509 656.35Z"/><path fill="#2A2929" d="M372.316 244.689C388.333 250.216 407.074 258.421 420.231 269.268L419.334 269.761C404.859 259.334 388.897 251.145 371.985 245.47L372.316 244.689Z"/><path fill="#8B8B8B" d="M361.51 242.018C365.346 242.696 368.661 243.35 372.316 244.689L371.985 245.47C368.539 244.502 364.916 243.186 361.51 242.018Z"/></svg>
\ No newline at end of file
diff --git a/spx-recommend/resource/cute2.svg b/spx-recommend/resource/cute2.svg
new file mode 100644
index 000000000..411a5835b
--- /dev/null
+++ b/spx-recommend/resource/cute2.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8" ?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1024" height="1024" viewBox="0 0 1024 1024"><path fill="#FEFEFE" d="M0 0L1024 0L1024 1024L0 1024L0 0ZM571.166 204.734C567.114 205.871 563.425 205.193 559.031 206.827C528.605 218.142 500.235 236.677 478.554 260.906C478.54 260.931 478.526 260.957 478.512 260.982L469.767 262.804L469.938 262.276C470.97 259.138 475.441 249.728 474.443 247.591C472.542 246.835 472.919 247.12 470.663 247.932C465.028 249.961 453.296 256.867 448.207 258.026L447.652 257.745C446.559 253.341 450.096 252.279 447.269 250.212C439.091 249.946 429.371 261.406 417.833 262.941C414.554 254.36 416.182 255.246 415.907 246.042C408.363 243.39 390.972 264.379 384.483 267.504C382.873 265.233 384.651 265.516 382.654 263.101C379.927 262.807 364.191 275.685 361.134 278.14C359.645 279.342 358.183 280.577 356.75 281.844C351.975 281.321 354.908 271.981 351.259 270.694C346.235 272.699 337.207 282.75 332.998 286.756C331.436 288.244 325.991 296.222 324.57 296.212C323.013 294.743 323.404 294.626 321.713 294.437C317.932 296.356 304.652 317.645 302.365 322.683C300.449 326.905 297.752 334.603 295.81 339.273C288.294 336.491 281.771 335.743 273.845 334.716C243.092 330.721 209.647 331.76 180.632 343.561C171.903 347.111 174.393 352.082 176.018 360.038C184.133 399.768 200.788 444.043 233.516 469.902C238.908 474.163 246.563 476.851 252.07 480.945C251.772 489.473 250.319 494.412 245.625 501.584C243.518 504.803 237.305 510.397 238.392 514.341C242.119 516.275 250.846 509.144 255.455 507.898L258.734 506.996C256.8 515.419 253.686 542.113 261.676 547.197L262.866 547.265C264.427 545.352 264.59 540.676 266.535 536.989C269.558 531.257 271.896 529.815 275.804 525.23C278.869 536.014 285.835 561.912 295.415 567.993L296.393 568C297.56 566.779 297.71 565.388 297.639 563.752C297.081 550.834 294.165 553.97 300.734 542.553C301.843 545.659 304.292 552.132 305.934 554.745C309.075 559.746 325.323 579.796 331.396 578.216C332.976 575.836 331.071 571.473 331.899 567.427L332.471 567.373C335.43 572.827 333.853 581.079 333.893 587.251C333.996 602.946 332.968 642.329 341.312 654.812L341.149 655.754C341.045 656.376 340.94 656.985 340.812 657.603C339.565 663.601 353.144 698.206 356.299 706.04C335.628 712.828 318.169 722.084 302.142 736.81C299.68 739.071 288.467 756.124 287.455 756.046C265.366 754.355 250.42 757.945 229.593 765.179C225.629 763.987 219.325 761.735 215.352 761.716C207.092 761.678 198.554 765.347 190.41 766.132C179.141 767.135 168.069 766.767 156.823 766.39C154.493 766.312 146.078 768.516 143.496 768.944C136.257 770.145 102.616 773.277 97.679 777.678L97.5967 778.648C98.9939 779.703 100.606 779.288 102.41 778.965C113.848 776.915 125.384 776.303 136.801 774.089C139.082 773.646 143.653 774.908 146.185 774.394C149.589 773.917 154.953 771.711 158.228 771.568C167.062 771.18 174.522 774.629 183.733 773.771C188.893 773.29 195.611 773.953 200.815 773.117C204.986 772.409 210.082 769.882 214.228 769.692C220.926 769.384 228.597 772.582 235.321 771.847C250.51 770.188 264.538 766.362 280.042 769.298C282.206 769.708 281.648 767.801 283.238 768.626C283.356 776.562 282.817 784.164 289.046 790.255C296.489 797.533 306.631 796.187 316.028 796.71C334.883 797.76 353.702 796.45 372.564 797.943C372.593 804.21 371.781 813.588 376.643 817.883C387.558 827.525 407.91 829.479 421.994 828.712C424.876 828.555 436.215 828.161 437.99 827.892C452.354 825.712 482.433 822.11 495.009 816.511C506.169 832.285 505.84 827.294 522.474 830.88C544.357 834.54 600.971 832.659 615.028 813.028C624.242 809.229 638.148 813.142 647.845 813.543C658.201 813.97 669.649 811.183 679.928 810.802C691.098 810.389 702.593 813.421 713.827 811.523C728.617 809.392 744.46 808.277 750.835 792.491C765.659 795.459 764.163 786.005 764.031 774.595C770.534 779.155 772.401 779.467 778.61 773.625C778.602 767.901 776.295 756.91 778.065 753.485C780.448 751.946 782.035 753.095 784.367 754.333C788.294 753.126 792.086 751.628 795.997 750.552C798.92 749.749 805.36 752.245 807.794 751.837C817.555 750.203 825.777 746.487 835.997 748.229C842.17 749.281 847.87 752.872 854.161 752.969C862.771 752.732 871.194 749.085 879.669 747.757C883.677 747.129 891.212 748.602 894.968 748.445C899.249 748.267 920.813 748.887 923.041 746.835C923.603 744.92 923.627 745.836 923.037 743.987C920.82 742.044 918.011 742.485 915.251 742.464C907.213 742.415 898.366 741.844 890.415 740.686C877.586 738.817 867.109 743.703 854.128 742.822C843.782 742.12 834.731 740.188 824.647 738.437C821.058 737.814 814.148 741.042 810.351 741.187C804.153 740.721 797.808 740.426 791.544 740.074C784.833 739.697 776.682 744.605 772.977 741.286C771.229 739.721 768.458 736.459 766.261 734.601C770.546 736.08 774.921 736.751 779.226 735.007C782.736 733.585 780.355 727.472 779.649 724.97C776.998 715.572 772.374 702.204 765.83 694.893C765.086 694.068 764.314 693.268 763.518 692.493C784.837 696.786 767.161 675.347 762.444 669.393C757.944 663.714 753.122 659.666 748.466 654.557C749.834 653.931 752.227 653.004 752.612 651.567C755.468 640.886 736.003 625.566 729.549 620.127C733.145 619.386 734.662 618.292 737.83 616.677C750.664 610.138 756.711 597.663 766.02 587.284C775.06 577.204 786.786 569.786 799.382 564.848C801.707 563.911 805.703 562.467 807.072 560.348C804.769 553.561 777.098 567.67 772.401 570.64C757.086 580.322 746.418 601.889 731.8 611.278C720.603 597.445 702.636 587.801 688.441 577.895C681.213 572.851 665.188 559.784 658.626 553.463C663.569 546.973 670.919 542.868 675.698 536.086C688.385 518.083 686.942 495.141 695.925 475.461C697.467 472.082 699.491 468.847 700.758 465.435L700.528 464.34C694.221 460.345 681.517 492.701 680.268 497.579C677.063 510.104 675.999 524.578 666.912 534.76C663.358 538.527 658.162 542.12 653.601 546.991C646.264 540.33 642.491 534.603 636.037 527.642C617.782 507.953 603.3 495.93 578.501 485.842C579.581 483.247 581.776 477.195 583.356 475.283C588 474.289 594.009 486.315 598.508 481.874C603.594 476.855 597.895 459.755 599.15 456.379L600.02 456.301C602.939 458.838 608.559 464.997 611.617 465.195C615.216 463.356 614.443 458.334 614.868 454.73C616.469 441.137 608.981 430.08 605.292 417.918C610.327 418.543 615.697 418.395 620.531 419.543C625.687 420.767 630.542 425.345 635.909 424.911C637.306 423.48 636.777 424.317 637.295 422.165C635.376 414.155 620.935 397.561 614.427 391.619C612.368 389.739 611.283 389.348 608.8 388.207L608.907 387.695C615.895 385.758 636.195 386.123 640.576 383.161C642.116 375.636 614.205 365.669 608.501 362.918C613.265 361.426 617.53 360.233 620.825 356.208C622.917 353.652 627.423 350.541 626.419 347.044C622.829 344.642 620.432 347.236 616.989 347.503C607.982 348.202 600.215 344.115 593.681 338.473C608.021 302.128 603.081 260.957 589.063 225.29C586.854 219.669 578.838 203.162 571.166 204.734ZM808.09 395.054C792.517 398.996 782.766 410.218 773.721 423.25C772.733 424.673 772.188 426.042 772.035 427.755L772.473 428.698C774.086 429.134 774.292 429.09 775.41 427.662C781.095 420.134 796.566 404.208 805.765 400.651C808.928 399.428 812.373 398.979 812.336 396.532C811.053 394.971 810.032 394.846 808.09 395.054ZM836.868 401.172C834.55 401.535 831.981 402.032 829.704 402.53C824.411 403.688 803.644 411.969 804.663 418.773C806.568 420.137 807.607 418.934 809.196 417.723L810.947 416.397C819.013 411.402 828.746 406.633 838.239 405.349C840.526 405.039 844.333 405.096 845.353 403.289C843.202 400.321 840.078 400.671 836.868 401.172ZM773.417 401.985C764.219 404.508 741.591 432.65 749.247 436.274C754.814 428.506 757.641 419.866 765.02 413.011C766.61 411.534 774.525 404.933 774.976 403.981C774.599 402.323 775.032 403.014 773.417 401.985ZM870.231 411.671C864.055 412.575 846.704 414.644 845.693 422.116L846.46 423.062C848.336 423.118 847.848 423.025 849.752 421.921C857.684 417.977 864.008 417.094 872.591 415.667C873.881 415.452 873.887 415.095 874.364 414.139C873.764 412.381 874.243 413.126 872.815 411.858C871.631 411.692 871.394 411.559 870.231 411.671ZM740.958 425.79C732.093 431.485 727.568 440.192 723.29 449.552C721.083 454.378 715.496 468.027 717.762 472.96L719.563 474.507C722.007 471.667 724.163 462.106 725.995 457.761C728.296 452.308 730.432 447.245 733.149 441.898C735 438.255 742.14 430.235 742.283 427.022C741.581 426.03 741.954 426.273 740.958 425.79ZM885.598 432.677C881.234 433.3 874.097 434.179 869.859 435.678C853.122 441.594 834.378 453.231 822.894 466.76C822.071 467.729 821.667 468.538 821.321 469.675L821.706 470.459C823.418 470.502 840.253 462.445 844.609 461.076C849.623 459.214 854.303 457.428 859.473 455.973C861.61 455.372 869.043 453.979 870.232 452.938C870.457 450.651 870.749 451.595 869.796 449.895C865.551 447.795 861.508 451.158 859.177 449.473L859.121 448.625C864.403 446.046 878.349 442.794 884.366 441.428C888.322 440.53 893.716 440.467 897.674 438.93C899.744 438.126 901.243 439.068 903.588 437.929L903.993 437.026C901.993 432.475 899.679 434.175 895.868 433.005C892.561 431.99 888.962 432.372 885.598 432.677ZM712.35 453.706C707.149 461.505 694.353 494.249 701.367 501.128C702.608 501.458 702.231 501.439 703.497 501.429C705.528 484.054 707.021 471.876 715.134 455.71C714.479 454.316 713.991 454.115 712.35 453.706ZM850.604 465.784C836.402 468.397 823.007 472.626 811.214 481.262C807.456 484.014 801.083 487.935 801.933 493.339C804.075 494.546 812.007 489.511 814.351 488.259C828.451 481.047 841.161 473.696 857.009 470.386C859.899 469.783 865.455 469.941 867.853 468.669L868.126 467.379C865.631 464.001 854.664 465.41 850.604 465.784ZM840.841 490.72C821.507 493.265 805.076 500.73 790.224 513.099C784.978 517.469 773.017 526.012 772.225 533.267C773.609 536.636 778.99 533.552 780.967 532.317C798.181 518.615 814.797 506.177 835.983 499.39C839.942 498.122 849.976 496.146 851.242 493.233C849.737 490.337 843.798 490.367 840.841 490.72ZM824.764 522.058C801.759 527.8 784.046 533.739 768.409 552.761C764.631 557.356 756.379 565.164 756.244 571.254C757.015 572.788 756.438 572.321 757.894 572.859L759.795 572.439C765.653 568.004 770.433 562.214 775.514 557.032C785.824 546.517 797.643 539.191 810.511 532.349C814.506 530.224 826.785 527.271 828.626 524.203C828.119 522.521 828.581 523.239 826.992 522.12L824.764 522.058Z"/><path d="M478.512 260.982C478.526 260.957 478.54 260.931 478.554 260.906C500.235 236.677 528.605 218.142 559.031 206.827C563.425 205.193 567.114 205.871 571.166 204.734C578.838 203.162 586.854 219.669 589.063 225.29C603.081 260.957 608.021 302.128 593.681 338.473C600.215 344.115 607.982 348.202 616.989 347.503C620.432 347.236 622.829 344.642 626.419 347.044C627.423 350.541 622.917 353.652 620.825 356.208C617.53 360.233 613.265 361.426 608.501 362.918C614.205 365.669 642.116 375.636 640.576 383.161C636.195 386.123 615.895 385.758 608.907 387.695L608.8 388.207C611.283 389.348 612.368 389.739 614.427 391.619C620.935 397.561 635.376 414.155 637.295 422.165C636.777 424.317 637.306 423.48 635.909 424.911C630.542 425.345 625.687 420.767 620.531 419.543C615.697 418.395 610.327 418.543 605.292 417.918C608.981 430.08 616.469 441.137 614.868 454.73C614.443 458.334 615.216 463.356 611.617 465.195C608.559 464.997 602.939 458.838 600.02 456.301L599.15 456.379C597.895 459.755 603.594 476.855 598.508 481.874C594.009 486.315 588 474.289 583.356 475.283C581.776 477.195 579.581 483.247 578.501 485.842C603.3 495.93 617.782 507.953 636.037 527.642C642.491 534.603 646.264 540.33 653.601 546.991C658.162 542.12 663.358 538.527 666.912 534.76C675.999 524.578 677.063 510.104 680.268 497.579C681.517 492.701 694.221 460.345 700.528 464.34L700.758 465.435C699.491 468.847 697.467 472.082 695.925 475.461C686.942 495.141 688.385 518.083 675.698 536.086C670.919 542.868 663.569 546.973 658.626 553.463C665.188 559.784 681.213 572.851 688.441 577.895C702.636 587.801 720.603 597.445 731.8 611.278C746.418 601.889 757.086 580.322 772.401 570.64C777.098 567.67 804.769 553.561 807.072 560.348C805.703 562.467 801.707 563.911 799.382 564.848C786.786 569.786 775.06 577.204 766.02 587.284C756.711 597.663 750.664 610.138 737.83 616.677C734.662 618.292 733.145 619.386 729.549 620.127C736.003 625.566 755.468 640.886 752.612 651.567C752.227 653.004 749.834 653.931 748.466 654.557C753.122 659.666 757.944 663.714 762.444 669.393C767.161 675.347 784.837 696.786 763.518 692.493C764.314 693.268 765.086 694.068 765.83 694.893C772.374 702.204 776.998 715.572 779.649 724.97C780.355 727.472 782.736 733.585 779.226 735.007C774.921 736.751 770.546 736.08 766.261 734.601C768.458 736.459 771.229 739.721 772.977 741.286C776.682 744.605 784.833 739.697 791.544 740.074C797.808 740.426 804.153 740.721 810.351 741.187C814.148 741.042 821.058 737.814 824.647 738.437C834.731 740.188 843.782 742.12 854.128 742.822C867.109 743.703 877.586 738.817 890.415 740.686C898.366 741.844 907.213 742.415 915.251 742.464C918.011 742.485 920.82 742.044 923.037 743.987C923.627 745.836 923.603 744.92 923.041 746.835C920.813 748.887 899.249 748.267 894.968 748.445C891.212 748.602 883.677 747.129 879.669 747.757C871.194 749.085 862.771 752.732 854.161 752.969C847.87 752.872 842.17 749.281 835.997 748.229C825.777 746.487 817.555 750.203 807.794 751.837C805.36 752.245 798.92 749.749 795.997 750.552C792.086 751.628 788.294 753.126 784.367 754.333C782.035 753.095 780.448 751.946 778.065 753.485C776.295 756.91 778.602 767.901 778.61 773.625C772.401 779.467 770.534 779.155 764.031 774.595C764.163 786.005 765.659 795.459 750.835 792.491C744.46 808.277 728.617 809.392 713.827 811.523C702.593 813.421 691.098 810.389 679.928 810.802C669.649 811.183 658.201 813.97 647.845 813.543C638.148 813.142 624.242 809.229 615.028 813.028C600.971 832.659 544.357 834.54 522.474 830.88C505.84 827.294 506.169 832.285 495.009 816.511C482.433 822.11 452.354 825.712 437.99 827.892C436.215 828.161 424.876 828.555 421.994 828.712C407.91 829.479 387.558 827.525 376.643 817.883C371.781 813.588 372.593 804.21 372.564 797.943C353.702 796.45 334.883 797.76 316.028 796.71C306.631 796.187 296.489 797.533 289.046 790.255C282.817 784.164 283.356 776.562 283.238 768.626C281.648 767.801 282.206 769.708 280.042 769.298C264.538 766.362 250.51 770.188 235.321 771.847C228.597 772.582 220.926 769.384 214.228 769.692C210.082 769.882 204.986 772.409 200.815 773.117C195.611 773.953 188.893 773.29 183.733 773.771C174.522 774.629 167.062 771.18 158.228 771.568C154.953 771.711 149.589 773.917 146.185 774.394C143.653 774.908 139.082 773.646 136.801 774.089C125.384 776.303 113.848 776.915 102.41 778.965C100.606 779.288 98.9939 779.703 97.5967 778.648L97.679 777.678C102.616 773.277 136.257 770.145 143.496 768.944C146.078 768.516 154.493 766.312 156.823 766.39C168.069 766.767 179.141 767.135 190.41 766.132C198.554 765.347 207.092 761.678 215.352 761.716C219.325 761.735 225.629 763.987 229.593 765.179C250.42 757.945 265.366 754.355 287.455 756.046C288.467 756.124 299.68 739.071 302.142 736.81C318.169 722.084 335.628 712.828 356.299 706.04C353.144 698.206 339.565 663.601 340.812 657.603C340.94 656.985 341.045 656.376 341.149 655.754L341.312 654.812C332.968 642.329 333.996 602.946 333.893 587.251C333.853 581.079 335.43 572.827 332.471 567.373L331.899 567.427C331.071 571.473 332.976 575.836 331.396 578.216C325.323 579.796 309.075 559.746 305.934 554.745C304.292 552.132 301.843 545.659 300.734 542.553C294.165 553.97 297.081 550.834 297.639 563.752C297.71 565.388 297.56 566.779 296.393 568L295.415 567.993C285.835 561.912 278.869 536.014 275.804 525.23C271.896 529.815 269.558 531.257 266.535 536.989C264.59 540.676 264.427 545.352 262.866 547.265L261.676 547.197C253.686 542.113 256.8 515.419 258.734 506.996L255.455 507.898C250.846 509.144 242.119 516.275 238.392 514.341C237.305 510.397 243.518 504.803 245.625 501.584C250.319 494.412 251.772 489.473 252.07 480.945C246.563 476.851 238.908 474.163 233.516 469.902C200.788 444.043 184.133 399.768 176.018 360.038C174.393 352.082 171.903 347.111 180.632 343.561C209.647 331.76 243.092 330.721 273.845 334.716C281.771 335.743 288.294 336.491 295.81 339.273C297.752 334.603 300.449 326.905 302.365 322.683C304.652 317.645 317.932 296.356 321.713 294.437C323.404 294.626 323.013 294.743 324.57 296.212C325.991 296.222 331.436 288.244 332.998 286.756C337.207 282.75 346.235 272.699 351.259 270.694C354.908 271.981 351.975 281.321 356.75 281.844C358.183 280.577 359.645 279.342 361.134 278.14C364.191 275.685 379.927 262.807 382.654 263.101C384.651 265.516 382.873 265.233 384.483 267.504C390.972 264.379 408.363 243.39 415.907 246.042C416.182 255.246 414.554 254.36 417.833 262.941C429.371 261.406 439.091 249.946 447.269 250.212C450.096 252.279 446.559 253.341 447.652 257.745L448.207 258.026C453.296 256.867 465.028 249.961 470.663 247.932C472.919 247.12 472.542 246.835 474.443 247.591C475.441 249.728 470.97 259.138 469.938 262.276L469.767 262.804L478.512 260.982ZM568.631 212.56C538.255 220.729 511.322 238.914 489.189 261.168C486.337 264.036 477.274 275.106 473.494 274.551C472.057 272.599 472.481 270.794 472.718 268.312C469.358 267.827 465.643 272.804 462.448 268.024C461.442 266.52 462.169 263.45 462.052 261.465C457.882 257.421 447.889 267.564 443.251 266.074C440.062 263.277 443.042 258.632 439.118 257.952C431.254 260.847 416.724 281.479 410.219 260.689C409.721 259.061 409.249 257.424 408.804 255.781C398.55 260.708 385.573 280.118 375.419 273.694C366.566 278.62 361.099 284.498 353.785 291.245C352.855 292.103 352.051 292.027 350.988 291.983C347.121 289.444 348.696 282.876 346.34 280.849C340.329 285.028 339.814 286.611 335.314 291.64C331.648 295.737 324.979 310.251 322.169 311.244C320.536 310.683 320.396 310.377 319.457 308.5C319.174 307.92 318.899 307.336 318.633 306.747C317.153 307.682 308.786 322.34 307.554 324.913C305.25 329.722 302.985 336.289 300.57 341.357C303.109 342.867 307.775 344.662 306.165 348.012C304.349 349.215 299.559 348.307 297.356 347.85C265.945 341.312 231.995 338.668 200.348 344.81C196.606 345.537 182.126 348.125 182.86 351.877C183.549 355.394 187.071 370.287 188.143 373.991C195.266 398.433 204.669 422.922 220.462 443.176C227.867 452.672 235.241 460.028 244.793 467.368C249.595 471.057 260.503 474.79 259.428 481.222C257.991 489.819 256.521 495.564 251.863 502.907C254.779 501.476 258.889 499.29 261.4 497.281C264.106 495.117 263.168 490.969 267.521 490.171C273.014 492.404 258.327 525.163 263.884 527.798C267.379 525.308 273.879 511.202 279.415 515.523C282.004 523.605 285.867 541.35 291.296 548.019L292.197 548.126C290.755 543.317 300.331 532.667 304.452 532.948C306 535.377 306.13 540.885 307.183 543.313C310.388 550.703 318.665 562.743 325.471 566.766C325.462 563.587 325.905 552.162 327.938 550.159C331.875 550.826 339.496 558.729 346.187 558.097C347.248 556.024 347.41 553.936 348.939 552.953C352.719 553.136 357.674 556.369 361.333 557.009C381.233 560.488 401.536 560.566 421.457 557.304C422.662 557.107 424.119 557.5 425.282 557.988L425.793 558.611C424.48 562.607 417.437 562.556 414.244 563.42C401.999 566.735 391.493 566.488 378.949 566.978C376.193 572.8 374.987 577.791 372.67 583.536C377.093 581.119 390.182 573.299 394.886 574.947C395.884 577.508 393.2 578.797 391.28 579.926C389.302 590.5 391.503 597.843 397.537 606.664C398.05 607.41 398.581 608.145 399.129 608.866C399.876 604.318 403.388 585.245 410.365 586.934C415.014 590.826 419.443 605.876 423.827 611.875C428.424 618.163 432.084 621.567 438.235 626.351C438.364 621.391 437.695 607.907 444.52 608.194C454.575 625.792 457.065 626.261 472.534 639.996C470.35 629.909 470.629 617.134 478.409 609.339C490.814 614.092 497.437 623.066 504.435 634.085C505.503 625.179 510.479 598.406 515.669 592.26C521.182 589.46 526.407 596.615 529.265 600.545C529.27 603.814 529.562 604.725 530.347 607.788C533.231 600.149 533.943 596.247 534.512 588.297C534.975 581.832 530.353 573.267 532.552 569.758C537.96 567.473 542.072 574.532 546.424 577.412C546.043 570.468 545.641 566.838 543.984 560.103C542.714 554.938 538.942 552.145 540.43 548.244C544.81 544.846 556.413 550.454 560.636 553.031C558.634 547.347 558.888 547.362 555.633 542.537C551.982 537.125 544.98 535.659 543.855 531.078L544.301 530.246C555.16 528.639 569.934 555.313 566.282 559.924C563.656 560.587 560.403 558.317 558.186 556.938C553.102 553.775 550.222 552.144 544.15 551.283C549.264 559.932 551.648 578.965 550.418 588.819C549.372 590.11 550.017 589.609 548.295 590.196C546.369 589.666 540.529 579.005 537.86 575.663C541.317 590.73 539.763 603.8 531.748 617.423C530.849 618.952 529.564 620.885 528.11 621.842L527.168 621.879C523.534 618.495 526.868 607.762 524.184 604.09C522.619 601.951 520.587 597.971 518.052 597.257C511.967 601.702 510.866 632.517 511.429 640.433C511.699 644.215 512.911 651.001 507.939 651.52C502.898 649.083 498.514 624.782 481.065 614.89L480.756 615.504C476.438 624.273 477.836 635.45 480.686 644.522C482.05 648.865 484.944 648.916 483.29 652.908C476.994 655.151 455.133 632.169 449.817 627.364C448.401 626.085 444.859 620.344 443.662 618.436C443.261 627.733 445.81 629.651 445.874 635.851C441.072 639.445 419.35 617.197 416.482 611.514C413.104 604.817 411.6 601.834 409.203 594.635C406.908 600.704 406.618 602.008 406.523 608.507C406.433 614.646 413.508 625.399 410.786 629.198C405.601 629.713 396.237 617.989 393.111 614.344C385.548 605.524 383.357 596.011 383.532 584.607C381.027 586.126 379.955 586.852 377.636 588.634C374.271 591.22 370.815 596.594 366.861 597.334C360.279 594.999 370.029 571.84 371.627 566.668C365.424 566.182 359.724 565.179 353.753 563.5C351.308 565.644 350.081 566.274 346.819 566.144L346.306 566.133L343.571 567.728C341.331 581.893 344.864 602.155 345.405 616.66C345.586 621.488 348.005 625.763 346.284 630.927C346.046 631.692 349.307 638.026 349.334 639.278C349.77 641.292 346.957 640.76 348.89 642.592C351.957 645.499 351.142 648.886 352.4 652.696C355.094 660.854 357.36 669.192 360.004 677.381C363.024 686.765 366.293 696.067 369.807 705.278C377.676 725.519 389.517 750.489 387.605 772.761C385.958 791.944 364.394 812.766 396.548 820.007C396.05 815.541 394.082 801.205 400.273 800.276L401.361 800.717C401.458 802.626 401.039 801.295 400.812 802.668C397.325 823.796 409.828 823.391 424.54 821.628C424.357 815.412 423.327 803.714 430.109 800.458L430.866 800.906C431.65 804.462 429.954 808.242 429.542 811.775C429.316 813.711 429.487 816.411 429.677 818.352C446.83 824.762 478.437 809.837 494.897 804.693C496.091 793.751 499.486 779.016 503.271 768.618C505.277 764.27 504.832 761.879 506.609 758.591C476.937 744.564 451.65 728.309 433.236 700.453C431.008 697.083 429.698 694.01 427.743 690.812C427.603 693.541 427.848 700.549 426.569 702.103C420.349 703.192 412.42 681.267 409.295 676.541C408.878 675.91 407.889 671.148 407.661 670.035C406.495 672.737 404.542 679.863 402.768 680.789C398.043 678.211 389.109 632.68 391.569 626.834L392.451 626.267C395.494 627.67 395.846 635.47 396.68 638.766C398.723 646.84 399.793 657.742 403.355 665.224C404.901 662.695 405.984 659.993 408.73 659.283C409.125 659.509 409.519 659.735 409.914 659.962C413.662 668.324 416.641 679.875 422.122 687.182C422.998 684.623 425.185 675.736 428.626 676.986C429.905 679.441 429.769 681.339 430.909 683.252C440.598 699.469 452.793 714.654 467.512 726.575C471.877 730.111 478.522 734.36 483.351 737.323C489.885 741.332 501.115 748.289 508.475 750.221C510.107 739.942 511.875 729.976 512.249 719.528C512.444 714.08 510.286 696.124 514.805 692.559C522.257 692.586 521.69 705.44 521.767 710.506C522.027 727.558 520.038 745.312 514.947 761.716C513.225 767.113 511.303 772.444 509.186 777.698C504.791 788.348 499.574 796.972 500.86 808.897C502.24 821.694 509.963 823.308 520.981 824.936C520.285 818.888 518.833 802.36 522.4 797.342L523.516 796.933L524.454 797.465C525.479 806.38 524.158 815.951 528.327 823.644C537.16 826.258 546.471 826.838 555.56 825.341C553.708 818.737 548.49 804.749 553.812 798.705L554.747 798.589C558.872 802.762 552.444 812.923 561.831 822.456L562.353 822.977C613.388 823.96 610.823 789.48 618.8 751.175C619.201 749.249 621.046 747.117 619.876 744.958C619.717 744.672 619.143 741.951 619.183 741.685C620.152 735.146 619.375 715.118 620.647 710.306C621.923 710.452 621.515 710.37 622.711 710.874C622.402 709.912 620.478 705.744 620.543 705.423C622.507 695.676 621.555 685.408 621.089 675.504C620.976 673.103 619.737 667.53 620.597 665.615C623.575 663.037 625.607 665.688 626.745 664.126C624.589 655.311 616.969 649.062 618.03 643.178C620.648 640.008 622.859 642.112 625.472 643.691C620.804 628.438 612.934 615.844 607.932 600.812C607.544 599.647 607.98 598.312 608.467 597.253L609.525 596.483C616.796 597.673 635.181 640.501 634.462 649.702C634.362 650.981 632.994 652.029 632.107 652.716C631.65 657.522 639.291 671.887 635.79 677.322C634.859 677.506 633.925 677.675 632.989 677.831C632.131 681.116 632.799 690.455 632.489 694.471C630.226 723.84 630.909 753.322 629.314 782.732C629.14 785.931 625.547 796.851 625.94 798.864C629.598 800.109 636.768 800.374 640.719 800.6C639.467 791.275 640.199 784.713 645.995 776.695C646.769 775.625 647.814 774.495 649.069 774.05C649.861 774.67 650.092 774.563 650.024 775.533C649.191 787.464 643.545 787.938 646.607 801.467C653.067 801.116 658.855 802.299 665.418 801.706C669.387 801.347 673.088 801.445 677.144 800.886C677.525 798.967 676.409 796.768 676.18 794.675C675.559 788.983 679.145 776.361 684.667 773.916C686.122 774.237 685.574 773.857 686.402 775.037C683.636 782.482 679.997 790.171 683.467 798.13C704.73 802.662 721.606 796.52 739.733 785.371C742.45 783.7 745.753 780.451 748.269 780.208C752.537 781.828 753.409 785.557 756.96 784.663C759.74 781.291 751.267 761.452 757.656 760.732C759.12 761.485 767.203 767.251 769.974 768.908C771.83 766.028 767.177 754.198 766.066 750.952C763.891 744.597 753.222 731.508 754.546 725.263L755.351 724.471C761.047 724.602 765.442 728.758 774.041 729.303C770.862 720.057 767.046 709.378 761.449 701.371C757.455 695.658 747.048 690.736 746.666 684.568C749.035 679.751 759.51 685.653 762.728 684.546C755.498 670.066 738.344 659.708 727.4 648.311C725.701 646.541 727.356 643.656 729.06 643.53C733.58 643.196 741.444 646.5 745.496 648.373C738.073 638.355 731.015 631.328 721.029 623.896C717.331 621.143 708.229 616.479 708.002 612.004C710.754 608.783 719.298 612.36 723.093 613.549C713.377 604.3 704.44 598.823 693.618 591.14C673.308 576.723 652.79 560.674 636.606 541.675C625.494 528.629 614.753 515.512 600.7 505.495C590.002 497.62 585.287 496.191 574.514 490.692C564.817 501.84 557.566 510.705 546.331 520.921C553.085 521.485 558.534 520.744 565.169 520.679C566.256 520.668 567.197 523.281 566.981 524.667C565.081 526.9 559.107 527.927 556.177 528.249C551.295 528.786 545.279 527.219 540.409 526.566C536.1 525.988 529.982 531.326 525.546 527.246L525.302 526.239C526.326 524.746 531.889 521.297 533.669 520.074C550.965 508.19 565.029 491.329 577.389 474.544C578.753 472.693 580.091 470.663 581.701 468.955C583.725 469.752 591.082 473.12 592.49 473.141C597.328 467.944 587.827 446.563 589.615 442.854C594.794 441.704 604.037 452.57 608.31 455.154C612.66 451.473 603.708 427.316 600.946 422.343C599.844 420.358 597.986 415.829 599.587 413.952C608.509 411.323 617.806 412.581 626.322 415.846C618.833 401.387 614.875 397.447 600.954 389.384C599.523 388.555 599.245 386.8 599.379 385.212C602.294 381.056 623.14 379.205 627.735 380.182C628.753 373.591 596.918 367.47 594.065 362.916C595.026 357.487 611.356 359.037 614.021 354.224C613.014 352.321 584.826 346.348 587.902 336.505C599.371 299.812 593.719 260.25 577.811 225.762C575.802 221.406 573.238 217.231 571.201 212.883C569.922 212.395 570.006 212.438 568.631 212.56ZM333.461 559.744C332.5 562.056 331.493 563.497 332.366 565.718C333.372 563.568 334.646 562.004 333.461 559.744ZM358.233 715.033C354.163 715.693 350.079 718.174 346.27 719.862C330.49 726.857 312.372 738.506 302.051 752.545C296.905 759.544 291.377 771.342 292.972 780.349L293.102 781.044C299.749 789.941 303.294 786.385 312.734 788.809C311.132 782.458 310.258 781.216 311.17 774.457C312.245 766.482 323.944 749.4 333.047 751.31C333.66 752.039 333.8 751.855 333.684 752.651C332.992 757.418 319.941 763.05 319.331 778.875C319.456 785.981 320.016 784.378 323.514 789.548C328.727 789.369 342.61 789.9 346.657 789.395C346.335 787.975 346.214 787.77 345.551 786.459C341.477 778.403 348.274 768.815 352.188 762.002C353.832 759.139 355.773 755.433 359.414 755.75C362.737 758.246 359.323 762.7 357.63 765.422C352.767 773.238 351.43 778.982 352.648 787.967C358.538 788.233 369.64 789.828 374.486 789.046C384.025 766.656 379.893 764.038 371.757 741.377C370.35 737.459 362.013 717.267 360.146 715.595C359.666 715.438 358.68 715.066 358.233 715.033Z"/><path fill="#FEFEFE" d="M408.804 255.781C409.249 257.424 409.721 259.061 410.219 260.689C416.724 281.479 431.254 260.847 439.118 257.952C443.042 258.632 440.062 263.277 443.251 266.074C447.889 267.564 457.882 257.421 462.052 261.465C462.169 263.45 461.442 266.52 462.448 268.024C465.643 272.804 469.358 267.827 472.718 268.312C472.481 270.794 472.057 272.599 473.494 274.551C477.274 275.106 486.337 264.036 489.189 261.168C511.322 238.914 538.255 220.729 568.631 212.56C570.006 212.438 569.922 212.395 571.201 212.883C573.238 217.231 575.802 221.406 577.811 225.762C593.719 260.25 599.371 299.812 587.902 336.505C584.826 346.348 613.014 352.321 614.021 354.224C611.356 359.037 595.026 357.487 594.065 362.916C596.918 367.47 628.753 373.591 627.735 380.182C623.14 379.205 602.294 381.056 599.379 385.212C599.245 386.8 599.523 388.555 600.954 389.384C614.875 397.447 618.833 401.387 626.322 415.846C617.806 412.581 608.509 411.323 599.587 413.952C597.986 415.829 599.844 420.358 600.946 422.343C603.708 427.316 612.66 451.473 608.31 455.154C604.037 452.57 594.794 441.704 589.615 442.854C587.827 446.563 597.328 467.944 592.49 473.141C591.082 473.12 583.725 469.752 581.701 468.955C580.091 470.663 578.753 472.693 577.389 474.544C565.029 491.329 550.965 508.19 533.669 520.074C531.889 521.297 526.326 524.746 525.302 526.239L525.546 527.246C529.982 531.326 536.1 525.988 540.409 526.566C545.279 527.219 551.295 528.786 556.177 528.249C559.107 527.927 565.081 526.9 566.981 524.667C567.197 523.281 566.256 520.668 565.169 520.679C558.534 520.744 553.085 521.485 546.331 520.921C557.566 510.705 564.817 501.84 574.514 490.692C585.287 496.191 590.002 497.62 600.7 505.495C614.753 515.512 625.494 528.629 636.606 541.675C652.79 560.674 673.308 576.723 693.618 591.14C704.44 598.823 713.377 604.3 723.093 613.549C719.298 612.36 710.754 608.783 708.002 612.004C708.229 616.479 717.331 621.143 721.029 623.896C731.015 631.328 738.073 638.355 745.496 648.373C741.444 646.5 733.58 643.196 729.06 643.53C727.356 643.656 725.701 646.541 727.4 648.311C738.344 659.708 755.498 670.066 762.728 684.546C759.51 685.653 749.035 679.751 746.666 684.568C747.048 690.736 757.455 695.658 761.449 701.371C767.046 709.378 770.862 720.057 774.041 729.303C765.442 728.758 761.047 724.602 755.351 724.471L754.546 725.263C753.222 731.508 763.891 744.597 766.066 750.952C767.177 754.198 771.83 766.028 769.974 768.908C767.203 767.251 759.12 761.485 757.656 760.732C751.267 761.452 759.74 781.291 756.96 784.663C753.409 785.557 752.537 781.828 748.269 780.208C745.753 780.451 742.45 783.7 739.733 785.371C721.606 796.52 704.73 802.662 683.467 798.13C679.997 790.171 683.636 782.482 686.402 775.037C685.574 773.857 686.122 774.237 684.667 773.916C679.145 776.361 675.559 788.983 676.18 794.675C676.409 796.768 677.525 798.967 677.144 800.886C673.088 801.445 669.387 801.347 665.418 801.706C658.855 802.299 653.067 801.116 646.607 801.467C643.545 787.938 649.191 787.464 650.024 775.533C650.092 774.563 649.861 774.67 649.069 774.05C647.814 774.495 646.769 775.625 645.995 776.695C640.199 784.713 639.467 791.275 640.719 800.6C636.768 800.374 629.598 800.109 625.94 798.864C625.547 796.851 629.14 785.931 629.314 782.732C630.909 753.322 630.226 723.84 632.489 694.471C632.799 690.455 632.131 681.116 632.989 677.831C633.925 677.675 634.859 677.506 635.79 677.322C639.291 671.887 631.65 657.522 632.107 652.716C632.994 652.029 634.362 650.981 634.462 649.702C635.181 640.501 616.796 597.673 609.525 596.483L608.467 597.253C607.98 598.312 607.544 599.647 607.932 600.812C612.934 615.844 620.804 628.438 625.472 643.691C622.859 642.112 620.648 640.008 618.03 643.178C616.969 649.062 624.589 655.311 626.745 664.126C625.607 665.688 623.575 663.037 620.597 665.615C619.737 667.53 620.976 673.103 621.089 675.504C621.555 685.408 622.507 695.676 620.543 705.423C620.478 705.744 622.402 709.912 622.711 710.874C621.515 710.37 621.923 710.452 620.647 710.306C619.375 715.118 620.152 735.146 619.183 741.685C619.143 741.951 619.717 744.672 619.876 744.958C621.046 747.117 619.201 749.249 618.8 751.175C610.823 789.48 613.388 823.96 562.353 822.977L561.831 822.456C552.444 812.923 558.872 802.762 554.747 798.589L553.812 798.705C548.49 804.749 553.708 818.737 555.56 825.341C546.471 826.838 537.16 826.258 528.327 823.644C524.158 815.951 525.479 806.38 524.454 797.465L523.516 796.933L522.4 797.342C518.833 802.36 520.285 818.888 520.981 824.936C509.963 823.308 502.24 821.694 500.86 808.897C499.574 796.972 504.791 788.348 509.186 777.698C511.303 772.444 513.225 767.113 514.947 761.716C520.038 745.312 522.027 727.558 521.767 710.506C521.69 705.44 522.257 692.586 514.805 692.559C510.286 696.124 512.444 714.08 512.249 719.528C511.875 729.976 510.107 739.942 508.475 750.221C501.115 748.289 489.885 741.332 483.351 737.323C478.522 734.36 471.877 730.111 467.512 726.575C452.793 714.654 440.598 699.469 430.909 683.252C429.769 681.339 429.905 679.441 428.626 676.986C425.185 675.736 422.998 684.623 422.122 687.182C416.641 679.875 413.662 668.324 409.914 659.962C409.519 659.735 409.125 659.509 408.73 659.283C405.984 659.993 404.901 662.695 403.355 665.224C399.793 657.742 398.723 646.84 396.68 638.766C395.846 635.47 395.494 627.67 392.451 626.267L391.569 626.834C389.109 632.68 398.043 678.211 402.768 680.789C404.542 679.863 406.495 672.737 407.661 670.035C407.889 671.148 408.878 675.91 409.295 676.541C412.42 681.267 420.349 703.192 426.569 702.103C427.848 700.549 427.603 693.541 427.743 690.812C429.698 694.01 431.008 697.083 433.236 700.453C451.65 728.309 476.937 744.564 506.609 758.591C504.832 761.879 505.277 764.27 503.271 768.618C499.486 779.016 496.091 793.751 494.897 804.693C478.437 809.837 446.83 824.762 429.677 818.352C429.487 816.411 429.316 813.711 429.542 811.775C429.954 808.242 431.65 804.462 430.866 800.906L430.109 800.458C423.327 803.714 424.357 815.412 424.54 821.628C409.828 823.391 397.325 823.796 400.812 802.668C401.039 801.295 401.458 802.626 401.361 800.717L400.273 800.276C394.082 801.205 396.05 815.541 396.548 820.007C364.394 812.766 385.958 791.944 387.605 772.761C389.517 750.489 377.676 725.519 369.807 705.278C366.293 696.067 363.024 686.765 360.004 677.381C357.36 669.192 355.094 660.854 352.4 652.696C351.142 648.886 351.957 645.499 348.89 642.592C346.957 640.76 349.77 641.292 349.334 639.278C349.307 638.026 346.046 631.692 346.284 630.927C348.005 625.763 345.586 621.488 345.405 616.66C344.864 602.155 341.331 581.893 343.571 567.728L346.306 566.133L346.819 566.144C350.081 566.274 351.308 565.644 353.753 563.5C359.724 565.179 365.424 566.182 371.627 566.668C370.029 571.84 360.279 594.999 366.861 597.334C370.815 596.594 374.271 591.22 377.636 588.634C379.955 586.852 381.027 586.126 383.532 584.607C383.357 596.011 385.548 605.524 393.111 614.344C396.237 617.989 405.601 629.713 410.786 629.198C413.508 625.399 406.433 614.646 406.523 608.507C406.618 602.008 406.908 600.704 409.203 594.635C411.6 601.834 413.104 604.817 416.482 611.514C419.35 617.197 441.072 639.445 445.874 635.851C445.81 629.651 443.261 627.733 443.662 618.436C444.859 620.344 448.401 626.085 449.817 627.364C455.133 632.169 476.994 655.151 483.29 652.908C484.944 648.916 482.05 648.865 480.686 644.522C477.836 635.45 476.438 624.273 480.756 615.504L481.065 614.89C498.514 624.782 502.898 649.083 507.939 651.52C512.911 651.001 511.699 644.215 511.429 640.433C510.866 632.517 511.967 601.702 518.052 597.257C520.587 597.971 522.619 601.951 524.184 604.09C526.868 607.762 523.534 618.495 527.168 621.879L528.11 621.842C529.564 620.885 530.849 618.952 531.748 617.423C539.763 603.8 541.317 590.73 537.86 575.663C540.529 579.005 546.369 589.666 548.295 590.196C550.017 589.609 549.372 590.11 550.418 588.819C551.648 578.965 549.264 559.932 544.15 551.283C550.222 552.144 553.102 553.775 558.186 556.938C560.403 558.317 563.656 560.587 566.282 559.924C569.934 555.313 555.16 528.639 544.301 530.246L543.855 531.078C544.98 535.659 551.982 537.125 555.633 542.537C558.888 547.362 558.634 547.347 560.636 553.031C556.413 550.454 544.81 544.846 540.43 548.244C538.942 552.145 542.714 554.938 543.984 560.103C545.641 566.838 546.043 570.468 546.424 577.412C542.072 574.532 537.96 567.473 532.552 569.758C530.353 573.267 534.975 581.832 534.512 588.297C533.943 596.247 533.231 600.149 530.347 607.788C529.562 604.725 529.27 603.814 529.265 600.545C526.407 596.615 521.182 589.46 515.669 592.26C510.479 598.406 505.503 625.179 504.435 634.085C497.437 623.066 490.814 614.092 478.409 609.339C470.629 617.134 470.35 629.909 472.534 639.996C457.065 626.261 454.575 625.792 444.52 608.194C437.695 607.907 438.364 621.391 438.235 626.351C432.084 621.567 428.424 618.163 423.827 611.875C419.443 605.876 415.014 590.826 410.365 586.934C403.388 585.245 399.876 604.318 399.129 608.866C398.581 608.145 398.05 607.41 397.537 606.664C391.503 597.843 389.302 590.5 391.28 579.926C393.2 578.797 395.884 577.508 394.886 574.947C390.182 573.299 377.093 581.119 372.67 583.536C374.987 577.791 376.193 572.8 378.949 566.978C391.493 566.488 401.999 566.735 414.244 563.42C417.437 562.556 424.48 562.607 425.793 558.611L425.282 557.988C424.119 557.5 422.662 557.107 421.457 557.304C401.536 560.566 381.233 560.488 361.333 557.009C357.674 556.369 352.719 553.136 348.939 552.953C347.41 553.936 347.248 556.024 346.187 558.097C339.496 558.729 331.875 550.826 327.938 550.159C325.905 552.162 325.462 563.587 325.471 566.766C318.665 562.743 310.388 550.703 307.183 543.313C306.13 540.885 306 535.377 304.452 532.948C300.331 532.667 290.755 543.317 292.197 548.126L291.296 548.019C285.867 541.35 282.004 523.605 279.415 515.523C273.879 511.202 267.379 525.308 263.884 527.798C258.327 525.163 273.014 492.404 267.521 490.171C263.168 490.969 264.106 495.117 261.4 497.281C258.889 499.29 254.779 501.476 251.863 502.907C256.521 495.564 257.991 489.819 259.428 481.222C260.503 474.79 249.595 471.057 244.793 467.368C235.241 460.028 227.867 452.672 220.462 443.176C204.669 422.922 195.266 398.433 188.143 373.991C187.071 370.287 183.549 355.394 182.86 351.877C182.126 348.125 196.606 345.537 200.348 344.81C231.995 338.668 265.945 341.312 297.356 347.85C299.559 348.307 304.349 349.215 306.165 348.012C307.775 344.662 303.109 342.867 300.57 341.357C302.985 336.289 305.25 329.722 307.554 324.913C308.786 322.34 317.153 307.682 318.633 306.747C318.899 307.336 319.174 307.92 319.457 308.5C320.396 310.377 320.536 310.683 322.169 311.244C324.979 310.251 331.648 295.737 335.314 291.64C339.814 286.611 340.329 285.028 346.34 280.849C348.696 282.876 347.121 289.444 350.988 291.983C352.051 292.027 352.855 292.103 353.785 291.245C361.099 284.498 366.566 278.62 375.419 273.694C385.573 280.118 398.55 260.708 408.804 255.781ZM562.33 234.631C545.024 237.536 528.96 268.561 528.091 284.953C528.053 285.663 528.754 286.49 529.197 287.001C531.586 287.5 531.897 287.003 534.121 285.559C533.952 287.701 532.421 288.879 532.187 291.75C535.063 297.638 541.13 288.203 542.852 286.161C543.719 287.178 543.344 286.762 543.608 288.427L544.785 288.017L545.008 288.436C542.885 291.034 541.308 292.382 540.973 295.763C542.361 299.468 543.82 299.484 546.872 297.884C549.95 298.925 552.851 300.168 555.85 301.413C538.757 309.8 550.268 311.172 559.082 320.134C560.741 321.74 562.94 323.742 565.096 321.703C565 318.823 561.841 315.635 559.79 313.72C557.961 312.03 556.111 310.364 554.24 308.72C558.424 307.771 567.679 307.051 567.385 301.654C564.685 297.184 557.928 295.555 553.515 293.509C549.319 291.563 557.452 288.402 556.805 283.526C554.79 280.141 547.027 285.58 542.802 284.129C542.789 280.566 547.36 278.412 548.205 275.068C546.096 273.366 544.168 276.725 541.468 276.453C535.324 269.355 559.411 242.304 564.637 236.389C565.349 235.583 565.154 235.48 564.806 234.666C563.371 234.492 563.724 234.446 562.33 234.631ZM477.403 307.671C464.683 309.49 460.223 311.982 451.65 322.313C451.031 323.058 450.812 323.636 450.51 324.539L450.823 325.163C454.121 325.412 464.212 318.894 468.867 316.798C480.474 311.517 495.276 319.149 498.742 316.451C499.632 310.133 481.76 307.677 477.403 307.671ZM481.117 334.457C480.448 338.795 480.045 340.871 481.193 345.242C479.243 345.85 473.327 347.356 471.863 348.106C462.828 352.734 455.083 360.902 450.243 369.758C437.082 393.836 445.722 433.673 471.021 446.704C483.938 453.23 498.894 454.446 512.696 450.094C525.212 446.026 529.177 442.28 538.426 433.48C540.068 433.768 545.797 434.238 546.584 434.49C550.386 435.712 556.558 442.424 560.643 440.272C561.271 439.061 561.441 438.151 561.081 436.744C560.279 435.329 559.305 433.713 558.569 432.292C556.782 431.241 554.832 430.025 552.846 429.406C550.671 428.728 545.637 428.729 543.827 427.872C544.395 426.291 547.377 421.769 548.971 420.755C553.604 421.188 558.046 421.955 562.583 422.989C565.353 423.621 568.303 425.977 570.932 424.806C571.587 423.448 571.534 422.196 571.059 420.65C569.925 416.957 566.843 416.416 563.725 415.388C561.452 414.64 554.809 414.449 553.886 412.915L555.278 408.733L555.876 408.511C564.908 405.256 573.195 409.722 576.179 406.473C576.026 399.349 564.227 400.942 559.865 398.288C559.301 397.945 559.387 386.987 559.381 385.744C560.643 384.588 562.007 383.567 561.841 381.735C561.33 376.108 552.517 365.311 548.736 361.629C536.481 349.698 516.669 344.48 500.02 344.262C495.739 344.206 491.024 345.491 486.699 345.18C486.44 341.112 486.908 337.532 484.13 334.851C482.648 334.38 482.69 334.431 481.117 334.457ZM203.852 366.535C203.541 368.251 203.355 368.59 204.033 370.219C205.358 371.177 212.459 373.831 214.514 374.748C225.543 379.665 243.343 386.85 252.514 394.532C248.31 394.131 236.382 395.661 235.872 400.458C237.813 405.266 248.003 407.665 246.72 411.072C245.796 413.522 230.129 420.767 229.006 422.405C230.163 426.767 238.258 426.416 240.178 428.646C239.492 433.074 236.952 438.746 238.392 442.092C241.133 443.748 244.784 441.056 247.573 439.676L252.663 442.308C252.015 446.314 250.344 457.41 255.377 459.054C257.844 457.636 258.552 454.152 258.83 451.457C258.897 447.681 259.109 441.976 258.596 438.303L258.121 437.868C254.402 434.526 251.813 433.314 246.994 434.904L246.142 434.414L246.119 433.522C248.363 432.145 249.211 432.195 250.381 430.227C250.081 428.563 250.132 428.633 249.306 427.171C251.266 425.896 254.216 424.377 255.337 422.537C255.063 417.796 246.344 420.511 243.306 421.357C246.603 419.09 257.225 413.914 258.158 410.458C259.299 406.231 250.328 403.467 247.657 400.981C249.887 397.617 262.301 400.911 264.987 398.175C265.154 396.483 264.752 394.74 263.344 393.387C248.282 378.912 227.944 370.752 207.763 366.495C207.04 366.342 204.643 366.501 203.852 366.535ZM316.057 369.62C303.594 371.991 295.009 380.55 290.083 391.929C288.531 395.515 287.492 398.263 287.891 402.271L288.615 403.345C291.157 403.49 291.859 401.516 293.001 399.492C297.136 388.792 302.579 380.563 313.426 375.188C318.326 372.76 323.806 374.653 325.471 371.616C323.745 369.48 318.64 369.434 316.057 369.62ZM338.191 404.637C329.774 406.057 327.172 407.619 319.908 412.219C318.363 409.617 315.112 403.157 311.303 405.502C310.059 409.24 314.201 415.73 313.755 417.185C312.981 419.709 307.308 424.763 305.739 427.622C296.731 443.752 296.249 463.284 304.452 479.838C314.926 500.646 334.113 509.049 356.377 510.203C364.763 510.666 377.988 507.37 383.825 501.412C406.376 478.39 412.776 445.924 388.938 421.197C374.133 405.839 367.52 405.605 346.457 404.414C343.867 404.239 340.733 404.323 338.191 404.637ZM444.256 457.175C438.101 457.79 431.515 459.125 427.159 464.103C422.731 469.162 420.434 475.564 427.427 479.609C432.825 482.732 438.44 484.252 444.572 485.209C444.683 485.226 445.342 486.989 445.379 487.224C446.093 491.658 444.309 499.147 441.712 502.731C439.212 506.181 436.437 508.607 432.211 509.26C427.6 509.973 424.163 509.551 419.844 508.132C415.981 506.863 410.125 499.532 407.088 503.041C407.347 506.874 415.846 514.553 419.388 515.67C436.438 521.049 445.067 516.943 450.605 499.867C451.397 495.668 451.907 494.787 451.122 490.638C459.484 495.019 468.255 498.519 477.949 495.732C487.323 493.038 503.045 475.82 497.502 465.845L496.565 465.494C493.613 466.929 489.74 477.554 486.887 480.815C479.146 489.663 457.916 491.216 452.401 480.72C450.286 476.693 471.82 454.602 444.256 457.175Z"/><path d="M555.85 301.413C552.851 300.168 549.95 298.925 546.872 297.884C543.82 299.484 542.361 299.468 540.973 295.763C541.308 292.382 542.885 291.034 545.008 288.436L544.785 288.017L543.608 288.427C543.344 286.762 543.719 287.178 542.852 286.161C541.13 288.203 535.063 297.638 532.187 291.75C532.421 288.879 533.952 287.701 534.121 285.559C531.897 287.003 531.586 287.5 529.197 287.001C528.754 286.49 528.053 285.663 528.091 284.953C528.96 268.561 545.024 237.536 562.33 234.631C563.724 234.446 563.371 234.492 564.806 234.666C565.154 235.48 565.349 235.583 564.637 236.389C559.411 242.304 535.324 269.355 541.468 276.453C544.168 276.725 546.096 273.366 548.205 275.068C547.36 278.412 542.789 280.566 542.802 284.129C547.027 285.58 554.79 280.141 556.805 283.526C557.452 288.402 549.319 291.563 553.515 293.509C557.928 295.555 564.685 297.184 567.385 301.654C567.679 307.051 558.424 307.771 554.24 308.72C556.111 310.364 557.961 312.03 559.79 313.72C561.841 315.635 565 318.823 565.096 321.703C562.94 323.742 560.741 321.74 559.082 320.134C550.268 311.172 538.757 309.8 555.85 301.413Z"/><path d="M468.867 316.798C464.212 318.894 454.121 325.412 450.823 325.163L450.51 324.539C450.812 323.636 451.031 323.058 451.65 322.313C460.223 311.982 464.683 309.49 477.403 307.671C481.76 307.677 499.632 310.133 498.742 316.451C495.276 319.149 480.474 311.517 468.867 316.798Z"/><path d="M481.193 345.242C480.045 340.871 480.448 338.795 481.117 334.457C482.69 334.431 482.648 334.38 484.13 334.851C486.908 337.532 486.44 341.112 486.699 345.18C491.024 345.491 495.739 344.206 500.02 344.262C516.669 344.48 536.481 349.698 548.736 361.629C552.517 365.311 561.33 376.108 561.841 381.735C562.007 383.567 560.643 384.588 559.381 385.744C559.387 386.987 559.301 397.945 559.865 398.288C564.227 400.942 576.026 399.349 576.179 406.473C573.195 409.722 564.908 405.256 555.876 408.511L555.278 408.733L553.886 412.915C554.809 414.449 561.452 414.64 563.725 415.388C566.843 416.416 569.925 416.957 571.059 420.65C571.534 422.196 571.587 423.448 570.932 424.806C568.303 425.977 565.353 423.621 562.583 422.989C558.046 421.955 553.604 421.188 548.971 420.755C547.377 421.769 544.395 426.291 543.827 427.872C545.637 428.729 550.671 428.728 552.846 429.406C554.832 430.025 556.782 431.241 558.569 432.292C559.305 433.713 560.279 435.329 561.081 436.744C561.441 438.151 561.271 439.061 560.643 440.272C556.558 442.424 550.386 435.712 546.584 434.49C545.797 434.238 540.068 433.768 538.426 433.48C529.177 442.28 525.212 446.026 512.696 450.094C498.894 454.446 483.938 453.23 471.021 446.704C445.722 433.673 437.082 393.836 450.243 369.758C455.083 360.902 462.828 352.734 471.863 348.106C473.327 347.356 479.243 345.85 481.193 345.242ZM518.605 355.383C521.709 358.461 527.465 363.062 529.863 366.353C548.289 391.639 540.075 435.261 503.218 435.406C491.012 435.454 482.951 429.422 474.458 421.291C467.776 424.47 466.624 424.691 459.32 425.242C463.55 431.08 465.704 433.256 471.761 437.335C481.907 444.398 492.582 448.507 504.879 446.143C524.276 442.414 532.083 433.707 543.851 419.274C543.845 417.881 543.715 417.81 543.217 416.477C543.863 413.777 544.393 414.606 545.664 413.063C550.864 406.749 551.759 396.122 553.238 388.389C555.832 374.821 530.937 354.766 518.605 355.383ZM466.103 367.511C461.23 369.823 457.116 372.182 455.324 377.725C453.177 384.367 455.772 387.753 458.059 393.13C464.544 396.368 465.124 396.654 472.226 396.186C476.348 391.415 483.709 389.496 483.912 381.015C484.108 372.852 474.505 367.291 467.367 367.454C466.946 367.465 466.524 367.484 466.103 367.511ZM485.322 386.922C483.397 388.664 482.482 390.437 482.39 393.13C482.335 394.696 482.983 396.205 484.156 397.243C485.886 398.794 488.528 398.637 490.711 398.543C497.432 391.839 493.62 387.234 485.322 386.922Z"/><path fill="#FEFEFE" d="M474.458 421.291C482.951 429.422 491.012 435.454 503.218 435.406C540.075 435.261 548.289 391.639 529.863 366.353C527.465 363.062 521.709 358.461 518.605 355.383C530.937 354.766 555.832 374.821 553.238 388.389C551.759 396.122 550.864 406.749 545.664 413.063C544.393 414.606 543.863 413.777 543.217 416.477C543.715 417.81 543.845 417.881 543.851 419.274C532.083 433.707 524.276 442.414 504.879 446.143C492.582 448.507 481.907 444.398 471.761 437.335C465.704 433.256 463.55 431.08 459.32 425.242C466.624 424.691 467.776 424.47 474.458 421.291Z"/><path d="M252.514 394.532C243.343 386.85 225.543 379.665 214.514 374.748C212.459 373.831 205.358 371.177 204.033 370.219C203.355 368.59 203.541 368.251 203.852 366.535C204.643 366.501 207.04 366.342 207.763 366.495C227.944 370.752 248.282 378.912 263.344 393.387C264.752 394.74 265.154 396.483 264.987 398.175C262.301 400.911 249.887 397.617 247.657 400.981C250.328 403.467 259.299 406.231 258.158 410.458C257.225 413.914 246.603 419.09 243.306 421.357C246.344 420.511 255.063 417.796 255.337 422.537C254.216 424.377 251.266 425.896 249.306 427.171C250.132 428.633 250.081 428.563 250.381 430.227C249.211 432.195 248.363 432.145 246.119 433.522L246.142 434.414L246.994 434.904C251.813 433.314 254.402 434.526 258.121 437.868L258.596 438.303C259.109 441.976 258.897 447.681 258.83 451.457C258.552 454.152 257.844 457.636 255.377 459.054C250.344 457.41 252.015 446.314 252.663 442.308L247.573 439.676C244.784 441.056 241.133 443.748 238.392 442.092C236.952 438.746 239.492 433.074 240.178 428.646C238.258 426.416 230.163 426.767 229.006 422.405C230.129 420.767 245.796 413.522 246.72 411.072C248.003 407.665 237.813 405.266 235.872 400.458C236.382 395.661 248.31 394.131 252.514 394.532Z"/><path fill="#FEFEFE" d="M458.059 393.13C455.772 387.753 453.177 384.367 455.324 377.725C457.116 372.182 461.23 369.823 466.103 367.511C466.524 367.484 466.946 367.465 467.367 367.454C474.505 367.291 484.108 372.852 483.912 381.015C483.709 389.496 476.348 391.415 472.226 396.186C465.124 396.654 464.544 396.368 458.059 393.13Z"/><path d="M293.001 399.492C291.859 401.516 291.157 403.49 288.615 403.345L287.891 402.271C287.492 398.263 288.531 395.515 290.083 391.929C295.009 380.55 303.594 371.991 316.057 369.62C318.64 369.434 323.745 369.48 325.471 371.616C323.806 374.653 318.326 372.76 313.426 375.188C302.579 380.563 297.136 388.792 293.001 399.492Z"/><path fill="#FEFEFE" d="M490.711 398.543C488.528 398.637 485.886 398.794 484.156 397.243C482.983 396.205 482.335 394.696 482.39 393.13C482.482 390.437 483.397 388.664 485.322 386.922C493.62 387.234 497.432 391.839 490.711 398.543Z"/><path d="M775.41 427.662C774.292 429.09 774.086 429.134 772.473 428.698L772.035 427.755C772.188 426.042 772.733 424.673 773.721 423.25C782.766 410.218 792.517 398.996 808.09 395.054C810.032 394.846 811.053 394.971 812.336 396.532C812.373 398.979 808.928 399.428 805.765 400.651C796.566 404.208 781.095 420.134 775.41 427.662Z"/><path d="M810.947 416.397L809.196 417.723C807.607 418.934 806.568 420.137 804.663 418.773C803.644 411.969 824.411 403.688 829.704 402.53C831.981 402.032 834.55 401.535 836.868 401.172C840.078 400.671 843.202 400.321 845.353 403.289C844.333 405.096 840.526 405.039 838.239 405.349C828.746 406.633 819.013 411.402 810.947 416.397Z"/><path d="M749.247 436.274C741.591 432.65 764.219 404.508 773.417 401.985C775.032 403.014 774.599 402.323 774.976 403.981C774.525 404.933 766.61 411.534 765.02 413.011C757.641 419.866 754.814 428.506 749.247 436.274Z"/><path d="M319.908 412.219C327.172 407.619 329.774 406.057 338.191 404.637C340.733 404.323 343.867 404.239 346.457 404.414C367.52 405.605 374.133 405.839 388.938 421.197C412.776 445.924 406.376 478.39 383.825 501.412C377.988 507.37 364.763 510.666 356.377 510.203C334.113 509.049 314.926 500.646 304.452 479.838C296.249 463.284 296.731 443.752 305.739 427.622C307.308 424.763 312.981 419.709 313.755 417.185C314.201 415.73 310.059 409.24 311.303 405.502C315.112 403.157 318.363 409.617 319.908 412.219ZM328.112 426.086C310.914 431.682 314.376 454.808 333.44 451.317C341.168 450.025 344.97 442.067 344.232 434.74C341.801 431.454 340.005 429.316 336.767 426.692C333.871 426.364 331.006 425.908 328.112 426.086ZM308.848 441.91C304.839 450.944 306.294 464.213 309.652 473.245C313.954 484.815 323.747 493.283 334.885 498.068C350.83 504.919 364.857 504.612 380.791 498.172C388.778 494.944 392.463 486.914 395.951 479.491C396.883 477.508 397.798 474.755 398.516 472.677C399.323 469.615 400.34 466.161 400.798 463.079C398.881 461.893 396.438 460.476 394.661 459.166C392.843 469.459 389.695 481.763 380.446 487.174C358.616 499.946 330.288 486.913 318.089 466.663C313.616 459.238 311.449 454.837 310.054 446.292C309.895 445.425 309.399 442.5 308.848 441.91ZM347.71 447.466C346.101 448.168 344.995 449.684 344.818 451.431C344.64 453.178 345.418 454.885 346.853 455.897C348.288 456.909 350.157 457.069 351.743 456.316C354.142 455.176 355.182 452.323 354.081 449.907C352.98 447.49 350.144 446.404 347.71 447.466Z"/><path d="M849.752 421.921C847.848 423.025 848.336 423.118 846.46 423.062L845.693 422.116C846.704 414.644 864.055 412.575 870.231 411.671C871.394 411.559 871.631 411.692 872.815 411.858C874.243 413.126 873.764 412.381 874.364 414.139C873.887 415.095 873.881 415.452 872.591 415.667C864.008 417.094 857.684 417.977 849.752 421.921Z"/><path fill="#FEFEFE" d="M333.44 451.317C314.376 454.808 310.914 431.682 328.112 426.086C331.006 425.908 333.871 426.364 336.767 426.692C340.005 429.316 341.801 431.454 344.232 434.74C344.97 442.067 341.168 450.025 333.44 451.317Z"/><path d="M719.563 474.507L717.762 472.96C715.496 468.027 721.083 454.378 723.29 449.552C727.568 440.192 732.093 431.485 740.958 425.79C741.954 426.273 741.581 426.03 742.283 427.022C742.14 430.235 735 438.255 733.149 441.898C730.432 447.245 728.296 452.308 725.995 457.761C724.163 462.106 722.007 471.667 719.563 474.507Z"/><path d="M844.609 461.076C840.253 462.445 823.418 470.502 821.706 470.459L821.321 469.675C821.667 468.538 822.071 467.729 822.894 466.76C834.378 453.231 853.122 441.594 869.859 435.678C874.097 434.179 881.234 433.3 885.598 432.677C888.962 432.372 892.561 431.99 895.868 433.005C899.679 434.175 901.993 432.475 903.993 437.026L903.588 437.929C901.243 439.068 899.744 438.126 897.674 438.93C893.716 440.467 888.322 440.53 884.366 441.428C878.349 442.794 864.403 446.046 859.121 448.625L859.177 449.473C861.508 451.158 865.551 447.795 869.796 449.895C870.749 451.595 870.457 450.651 870.232 452.938C869.043 453.979 861.61 455.372 859.473 455.973C854.303 457.428 849.623 459.214 844.609 461.076Z"/><path fill="#FEFEFE" d="M398.516 472.677C397.798 474.755 396.883 477.508 395.951 479.491C392.463 486.914 388.778 494.944 380.791 498.172C364.857 504.612 350.83 504.919 334.885 498.068C323.747 493.283 313.954 484.815 309.652 473.245C306.294 464.213 304.839 450.944 308.848 441.91C309.399 442.5 309.895 445.425 310.054 446.292C311.449 454.837 313.616 459.238 318.089 466.663C330.288 486.913 358.616 499.946 380.446 487.174C389.695 481.763 392.843 469.459 394.661 459.166C396.438 460.476 398.881 461.893 400.798 463.079C400.34 466.161 399.323 469.615 398.516 472.677Z"/><path fill="#FEFEFE" d="M351.743 456.316C350.157 457.069 348.288 456.909 346.853 455.897C345.418 454.885 344.64 453.178 344.818 451.431C344.995 449.684 346.101 448.168 347.71 447.466C350.144 446.404 352.98 447.49 354.081 449.907C355.182 452.323 354.142 455.176 351.743 456.316Z"/><path d="M703.497 501.429C702.231 501.439 702.608 501.458 701.367 501.128C694.353 494.249 707.149 461.505 712.35 453.706C713.991 454.115 714.479 454.316 715.134 455.71C707.021 471.876 705.528 484.054 703.497 501.429Z"/><path d="M450.605 499.867C445.067 516.943 436.438 521.049 419.388 515.67C415.846 514.553 407.347 506.874 407.088 503.041C410.125 499.532 415.981 506.863 419.844 508.132C424.163 509.551 427.6 509.973 432.211 509.26C436.437 508.607 439.212 506.181 441.712 502.731C444.309 499.147 446.093 491.658 445.379 487.224C445.342 486.989 444.683 485.226 444.572 485.209C438.44 484.252 432.825 482.732 427.427 479.609C420.434 475.564 422.731 469.162 427.159 464.103C431.515 459.125 438.101 457.79 444.256 457.175C471.82 454.602 450.286 476.693 452.401 480.72C457.916 491.216 479.146 489.663 486.887 480.815C489.74 477.554 493.613 466.929 496.565 465.494L497.502 465.845C503.045 475.82 487.323 493.038 477.949 495.732C468.255 498.519 459.484 495.019 451.122 490.638C451.907 494.787 451.397 495.668 450.605 499.867ZM444.17 463.438C440.219 464.889 432.479 467.73 430.107 471.249C430.244 473.787 437.528 475.965 439.899 477.434C441.357 477.759 443.197 477.61 444.751 477.582C446.589 475.352 451.195 467.538 451.663 464.777C449.416 462.889 447.111 463.343 444.17 463.438Z"/><path fill="#FEFEFE" d="M439.899 477.434C437.528 475.965 430.244 473.787 430.107 471.249C432.479 467.73 440.219 464.889 444.17 463.438C447.111 463.343 449.416 462.889 451.663 464.777C451.195 467.538 446.589 475.352 444.751 477.582C443.197 477.61 441.357 477.759 439.899 477.434Z"/><path d="M814.351 488.259C812.007 489.511 804.075 494.546 801.933 493.339C801.083 487.935 807.456 484.014 811.214 481.262C823.007 472.626 836.402 468.397 850.604 465.784C854.664 465.41 865.631 464.001 868.126 467.379L867.853 468.669C865.455 469.941 859.899 469.783 857.009 470.386C841.161 473.696 828.451 481.047 814.351 488.259Z"/><path d="M780.967 532.317C778.99 533.552 773.609 536.636 772.225 533.267C773.017 526.012 784.978 517.469 790.224 513.099C805.076 500.73 821.507 493.265 840.841 490.72C843.798 490.367 849.737 490.337 851.242 493.233C849.976 496.146 839.942 498.122 835.983 499.39C814.797 506.177 798.181 518.615 780.967 532.317Z"/><path d="M759.795 572.439L757.894 572.859C756.438 572.321 757.015 572.788 756.244 571.254C756.379 565.164 764.631 557.356 768.409 552.761C784.046 533.739 801.759 527.8 824.764 522.058L826.992 522.12C828.581 523.239 828.119 522.521 828.626 524.203C826.785 527.271 814.506 530.224 810.511 532.349C797.643 539.191 785.824 546.517 775.514 557.032C770.433 562.214 765.653 568.004 759.795 572.439Z"/><path fill="#FEFEFE" d="M332.366 565.718C331.493 563.497 332.5 562.056 333.461 559.744C334.646 562.004 333.372 563.568 332.366 565.718Z"/><path fill="#FEFEFE" d="M293.102 781.044L292.972 780.349C291.377 771.342 296.905 759.544 302.051 752.545C312.372 738.506 330.49 726.857 346.27 719.862C350.079 718.174 354.163 715.693 358.233 715.033C358.68 715.066 359.666 715.438 360.146 715.595C362.013 717.267 370.35 737.459 371.757 741.377C379.893 764.038 384.025 766.656 374.486 789.046C369.64 789.828 358.538 788.233 352.648 787.967C351.43 778.982 352.767 773.238 357.63 765.422C359.323 762.7 362.737 758.246 359.414 755.75C355.773 755.433 353.832 759.139 352.188 762.002C348.274 768.815 341.477 778.403 345.551 786.459C346.214 787.77 346.335 787.975 346.657 789.395C342.61 789.9 328.727 789.369 323.514 789.548C320.016 784.378 319.456 785.981 319.331 778.875C319.941 763.05 332.992 757.418 333.684 752.651C333.8 751.855 333.66 752.039 333.047 751.31C323.944 749.4 312.245 766.482 311.17 774.457C310.258 781.216 311.132 782.458 312.734 788.809C303.294 786.385 299.749 789.941 293.102 781.044Z"/></svg>
\ No newline at end of file
diff --git a/spx-recommend/resource/demo.png b/spx-recommend/resource/demo.png
new file mode 100644
index 0000000000000000000000000000000000000000..c313113a2db86a7af574115489a53d35ffdb2dfe
GIT binary patch
literal 6387
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
BWDx)W

literal 0
HcmV?d00001

diff --git a/spx-recommend/resource/dog.svg b/spx-recommend/resource/dog.svg
new file mode 100644
index 000000000..2c66245a6
--- /dev/null
+++ b/spx-recommend/resource/dog.svg
@@ -0,0 +1,213 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="1066.000000pt" height="1280.000000pt" viewBox="0 0 1066.000000 1280.000000"
+ preserveAspectRatio="xMidYMid meet">
+<g transform="translate(0.000000,1280.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M8139 12291 c-169 -72 -311 -203 -619 -571 -191 -229 -209 -247 -270
+-278 -80 -41 -113 -39 -227 12 -45 20 -126 49 -180 63 -89 24 -116 26 -293 27
+l-195 1 -165 -42 c-231 -59 -612 -135 -690 -136 -60 -2 -65 0 -68 21 -2 12 -6
+22 -10 22 -4 0 -74 -34 -157 -75 -141 -70 -158 -82 -285 -196 -74 -66 -142
+-125 -151 -130 -13 -6 -33 5 -85 45 -37 30 -101 73 -143 97 -42 23 -152 86
+-246 140 -304 176 -421 219 -597 222 -95 2 -97 1 -128 -28 -56 -53 -128 -172
+-154 -254 -14 -43 -32 -125 -40 -182 -8 -57 -25 -158 -37 -224 -32 -175 -32
+-459 -1 -601 52 -238 150 -498 323 -854 l109 -225 -3 -265 c-2 -289 2 -328 64
+-529 16 -52 29 -116 29 -146 0 -107 -67 -240 -183 -362 -39 -40 -68 -75 -66
+-77 2 -2 24 -9 48 -17 25 -8 46 -19 48 -25 2 -6 -39 -47 -91 -90 -53 -44 -98
+-89 -102 -100 -3 -12 2 -48 12 -79 l18 -57 -41 -37 c-52 -45 -61 -64 -90 -181
+-34 -137 -73 -212 -224 -425 -171 -240 -228 -326 -265 -395 -18 -35 -83 -111
+-179 -210 -150 -155 -244 -271 -347 -430 -470 -721 -642 -990 -733 -1148 -26
+-46 -55 -86 -63 -90 -36 -13 -113 129 -141 262 -23 112 -50 134 -91 76 -27
+-37 -49 -38 -82 -3 -33 36 -44 58 -68 135 -23 74 -54 128 -73 128 -8 0 -19
+-18 -26 -41 -7 -22 -27 -57 -45 -77 -102 -115 -223 -372 -242 -512 -4 -32 -15
+-59 -30 -75 -20 -21 -24 -37 -24 -85 0 -111 55 -309 127 -458 l37 -77 7 -235
+c11 -405 40 -647 105 -872 102 -356 254 -641 466 -878 52 -58 140 -166 195
+-241 55 -75 114 -145 129 -156 80 -56 361 -178 448 -194 72 -13 149 -5 230 22
+126 43 534 52 636 14 36 -13 65 -15 150 -10 90 6 112 4 155 -13 28 -10 85 -22
+128 -26 55 -4 129 -22 250 -62 l172 -57 145 6 c154 7 219 16 507 71 330 64
+494 68 693 16 94 -24 127 -25 265 -1 105 19 111 21 143 57 62 72 64 125 12
+314 -33 119 -18 125 24 10 88 -239 257 -547 417 -764 91 -122 233 -274 264
+-282 13 -3 83 6 157 20 116 23 153 26 291 23 172 -4 174 -4 186 56 6 24 12 31
+27 30 35 -5 102 28 134 63 58 66 62 89 64 321 1 200 0 213 -20 240 -19 26
+-137 103 -159 103 -5 0 9 -19 32 -42 72 -75 104 -161 89 -242 -4 -20 -12 -36
+-17 -36 -6 0 -42 29 -81 65 -67 61 -165 121 -188 113 -6 -2 17 -23 51 -48 153
+-111 240 -286 198 -397 -12 -33 -57 -83 -75 -83 -7 0 -24 20 -38 44 -33 57
+-166 191 -231 234 -57 37 -116 58 -141 48 -14 -5 -9 -11 24 -27 59 -30 162
+-128 217 -208 52 -76 68 -141 43 -174 -17 -23 -75 -37 -158 -37 -92 0 -138 24
+-197 102 -26 35 -80 97 -120 138 -59 62 -73 72 -79 57 -13 -35 27 -106 107
+-191 43 -46 79 -89 79 -94 0 -19 -65 -30 -114 -21 -25 4 -63 17 -84 28 -50 25
+-117 102 -133 149 -7 22 -41 68 -84 112 -114 119 -181 230 -252 415 -19 49
+-45 109 -59 131 -27 49 -95 234 -114 314 -28 120 -71 195 -232 402 -118 153
+-210 288 -205 302 2 6 23 16 47 23 85 25 110 74 86 175 -8 34 -18 72 -22 83
+-16 42 27 -8 56 -65 33 -66 93 -140 140 -175 19 -14 77 -40 130 -57 87 -29
+106 -32 230 -32 156 -1 187 9 218 72 46 91 82 290 82 451 1 163 12 236 65 407
+48 154 67 191 161 306 38 46 45 62 40 83 -9 36 -48 49 -86 30 -37 -19 -75 -19
+-136 1 -61 21 -77 33 -71 56 4 14 -20 35 -103 92 -59 41 -116 86 -126 99 -109
+141 -283 346 -341 403 -102 100 -186 154 -348 225 -77 33 -180 80 -228 105
+-49 24 -97 44 -107 44 -55 0 -64 25 -20 55 16 11 28 25 27 30 -2 6 -46 27 -97
+48 -62 24 -107 50 -132 74 -41 40 -41 53 1 53 16 0 34 7 41 15 26 31 -28 114
+-96 148 -30 14 -44 27 -44 41 -1 26 -38 74 -156 203 -101 111 -129 147 -120
+162 10 16 61 -4 219 -84 81 -41 150 -75 152 -75 3 0 5 15 5 34 0 19 5 38 10
+41 6 4 66 -27 133 -68 166 -102 246 -147 263 -147 8 0 14 10 14 25 0 14 3 25
+6 25 3 0 47 -38 97 -85 50 -47 99 -85 108 -85 10 0 26 12 38 28 16 22 23 25
+38 16 13 -8 23 -8 36 0 15 9 24 5 54 -28 32 -35 37 -37 48 -23 17 23 26 22 93
+-12 66 -33 120 -46 141 -32 12 8 9 16 -17 46 -59 67 -44 72 94 34 160 -44 348
+-158 463 -281 75 -80 111 -91 111 -35 0 18 -12 57 -26 86 -15 28 -24 55 -20
+58 17 17 166 -45 261 -108 55 -37 132 -82 171 -102 83 -42 91 -40 125 38 18
+43 22 47 29 30 5 -11 9 -30 9 -42 1 -33 24 -28 45 8 17 29 101 79 134 79 15 0
+16 -22 0 -38 -41 -41 91 -17 209 38 95 44 226 132 331 221 60 51 75 59 87 49
+17 -14 42 2 150 95 102 89 284 203 299 188 3 -4 6 -17 6 -30 0 -13 3 -23 8
+-23 17 0 75 43 142 106 56 53 80 85 113 153 35 70 47 87 72 95 17 5 53 30 81
+57 52 48 86 64 121 57 32 -6 22 -121 -21 -256 -39 -123 -45 -185 -20 -213 14
+-16 8 -23 -84 -97 -135 -110 -204 -199 -127 -164 33 15 45 15 45 -1 0 -23 -90
+-167 -171 -273 -43 -57 -79 -106 -79 -109 0 -3 7 -5 16 -5 27 0 12 -16 -76
+-87 -86 -69 -134 -133 -124 -165 8 -26 -28 -98 -84 -172 -54 -70 -52 -63 -72
+-256 -14 -142 -53 -225 -146 -307 -35 -31 -67 -67 -70 -80 -14 -52 57 -143
+192 -246 28 -21 56 -48 63 -60 9 -13 16 -76 20 -183 5 -139 9 -165 25 -183 35
+-38 101 -21 203 52 37 26 54 31 121 35 72 4 80 2 107 -20 24 -22 30 -35 36
+-97 4 -39 12 -86 18 -104 5 -17 15 -84 20 -147 6 -63 24 -178 40 -255 17 -77
+46 -214 65 -305 19 -91 40 -217 47 -280 10 -101 18 -133 69 -265 95 -244 114
+-342 80 -420 -28 -65 -47 -85 -80 -85 -42 0 -65 33 -66 99 -2 77 -3 81 -13 81
+-5 0 -11 -42 -13 -92 -5 -104 -25 -157 -77 -201 -81 -68 -179 -25 -222 96 -12
+33 -11 47 4 105 31 117 58 151 142 177 l20 6 -20 16 c-26 19 -136 10 -180 -15
+-46 -27 -73 -92 -86 -212 -11 -93 -16 -108 -40 -132 -15 -16 -38 -28 -51 -28
+-72 0 -210 114 -224 184 -10 54 1 124 23 154 39 53 70 67 143 67 61 0 67 2 59
+17 -15 28 -52 48 -89 48 -69 0 -136 -59 -202 -179 -15 -28 -22 -31 -62 -31
+-57 0 -93 29 -106 85 -11 45 -8 87 22 289 11 77 18 156 15 175 -10 64 -115
+553 -142 661 -14 58 -40 149 -56 203 -33 109 -45 182 -35 222 4 15 27 49 53
+76 37 40 44 53 39 74 -4 14 -11 25 -16 25 -5 0 -33 -34 -62 -75 -76 -107 -110
+-112 -124 -17 -8 53 -21 45 -53 -35 -13 -32 -30 -64 -37 -72 -11 -12 -15 -10
+-24 13 -5 15 -10 45 -10 67 0 87 -58 24 -111 -121 -51 -141 -84 -183 -262
+-329 -48 -40 -117 -108 -154 -152 -40 -48 -74 -79 -85 -79 -31 0 -60 80 -66
+180 -5 96 7 206 44 390 29 142 49 417 32 437 -17 21 -25 15 -42 -28 -24 -59
+-43 -199 -62 -459 -28 -378 -29 -546 -4 -680 11 -63 29 -182 40 -265 32 -256
+59 -354 108 -398 15 -14 128 -56 150 -57 2 0 -22 30 -52 66 -31 36 -62 77 -70
+92 -23 44 -45 172 -67 388 -24 233 -28 216 61 277 25 17 70 58 100 91 30 32
+69 65 87 72 24 11 35 24 47 61 9 27 25 63 36 81 17 27 25 33 44 28 20 -5 25 0
+35 34 16 53 62 97 139 131 35 16 77 43 93 60 26 28 33 31 62 23 36 -10 57 -47
+127 -221 88 -222 138 -442 165 -731 19 -204 19 -280 0 -379 -8 -43 -15 -97
+-15 -119 0 -38 5 -47 57 -94 31 -29 72 -59 91 -68 25 -13 43 -35 74 -94 44
+-85 92 -132 148 -148 52 -15 124 -12 195 7 l64 17 46 -43 c63 -58 116 -81 190
+-81 82 0 128 24 222 113 43 42 91 79 106 82 43 11 84 66 97 132 12 56 11 61
+-40 233 -30 96 -77 250 -106 341 -64 203 -73 248 -125 654 -50 395 -58 570
+-35 829 25 282 155 1225 181 1313 18 59 59 127 95 155 41 32 48 75 60 393 13
+349 19 388 90 650 87 317 104 417 104 610 1 183 -13 260 -74 415 -48 122 -63
+186 -95 397 -35 242 -77 423 -126 549 -84 219 -108 298 -118 394 -13 118 -33
+187 -77 269 -30 55 -34 67 -25 95 5 17 24 128 41 246 39 273 64 408 101 540
+37 131 29 182 -41 270 -15 19 -24 61 -40 185 -39 312 -76 434 -165 553 -30 40
+-55 81 -55 91 0 10 9 44 21 77 32 92 69 270 76 364 7 110 -12 358 -42 536 -86
+511 -264 870 -480 970 -65 31 -105 30 -186 -5z m210 -261 c39 -29 118 -126
+146 -181 21 -40 82 -262 110 -398 55 -273 70 -550 40 -726 -16 -92 -73 -231
+-99 -241 -27 -10 -54 15 -147 138 -90 119 -93 124 -91 172 1 28 13 74 27 104
+14 30 24 56 22 58 -1 2 -29 -4 -61 -12 -32 -8 -62 -12 -67 -7 -5 5 17 50 47
+101 31 52 54 95 52 97 -2 2 -27 -16 -57 -41 -69 -57 -85 -58 -77 -1 15 113 28
+249 23 253 -3 3 -19 -38 -37 -91 -19 -57 -37 -94 -43 -92 -7 2 -16 31 -22 64
+-5 34 -13 64 -16 68 -4 3 -21 -30 -39 -75 -18 -44 -37 -83 -42 -86 -14 -9 -26
+13 -34 61 -11 71 -19 69 -50 -12 -29 -77 -30 -78 -74 -90 -106 -27 -273 -10
+-321 33 -23 20 -35 165 -19 224 12 45 192 316 287 433 70 85 140 142 223 179
+36 16 99 45 140 64 93 42 125 43 179 4z m-4399 -845 c210 -76 513 -266 733
+-459 64 -57 72 -81 27 -91 -67 -15 -95 -101 -86 -262 4 -70 2 -113 -3 -113 -6
+0 -22 16 -37 35 -29 38 -44 44 -44 18 0 -10 -5 -25 -10 -33 -9 -13 -11 -13
+-20 0 -5 8 -14 39 -20 67 -6 29 -15 55 -19 58 -5 2 -18 -23 -30 -56 -13 -34
+-27 -59 -34 -56 -7 2 -29 32 -49 67 -51 87 -58 92 -58 43 0 -49 -8 -73 -24
+-73 -6 1 -51 36 -101 80 -49 43 -91 77 -93 75 -2 -2 13 -40 33 -86 44 -100 41
+-113 -20 -107 -53 6 -57 -2 -15 -32 17 -12 30 -27 30 -35 0 -7 -13 -16 -30
+-20 -36 -8 -37 -18 -9 -87 14 -35 25 -100 34 -193 11 -122 11 -146 -2 -185
+-31 -91 -95 -190 -124 -190 -29 0 -134 154 -203 295 -81 167 -121 271 -151
+399 -35 143 -44 262 -35 471 7 158 13 198 44 323 20 79 41 153 47 164 10 19
+18 20 103 15 64 -3 113 -13 166 -32z m3365 -1155 c13 -26 21 -30 50 -28 19 1
+37 -1 41 -5 4 -4 25 -48 46 -99 32 -77 38 -102 38 -164 0 -71 -2 -77 -84 -246
+-63 -129 -96 -186 -133 -225 -81 -86 -170 -92 -250 -17 -21 20 -45 40 -55 45
+-22 12 -55 103 -64 176 -12 115 44 311 131 451 38 61 44 67 72 65 26 -2 35 3
+53 32 22 35 54 46 63 23 3 -10 11 -9 33 4 39 23 41 23 59 -12z m-1658 -285
+c26 -10 47 -12 68 -6 63 17 220 -52 286 -127 64 -73 90 -208 69 -362 -21 -159
+-66 -210 -187 -210 -81 0 -147 15 -258 57 -114 44 -176 90 -250 188 -57 74
+-59 79 -57 131 3 68 29 193 44 211 6 7 18 12 27 11 10 -2 17 6 19 22 5 34 20
+50 48 50 13 0 27 8 33 17 8 15 14 15 48 5 34 -11 39 -10 52 8 16 24 12 24 58
+5z m3090 -127 c53 -59 142 -304 150 -413 4 -64 1 -81 -37 -185 -35 -96 -43
+-133 -49 -225 -7 -88 -15 -126 -40 -188 -33 -83 -38 -136 -20 -196 9 -32 4
+-63 -41 -246 -47 -191 -57 -221 -113 -325 -33 -63 -85 -155 -115 -205 -61
+-100 -122 -222 -122 -243 0 -8 -33 -49 -73 -91 -41 -42 -84 -90 -96 -108 -19
+-28 -133 -134 -495 -461 -89 -81 -161 -122 -253 -146 -146 -38 -419 -87 -538
+-97 -151 -12 -594 -4 -670 13 -70 15 -164 65 -273 143 -77 55 -134 84 -315
+160 -122 51 -240 96 -262 100 -33 6 -54 22 -120 90 -71 72 -86 83 -125 89 -58
+9 -92 30 -237 147 -188 154 -238 216 -271 339 -11 41 -31 98 -43 125 l-23 50
+-4 -32 c-2 -18 -7 -33 -11 -33 -10 0 -110 105 -139 147 -12 17 -22 39 -22 48
+0 9 -33 49 -73 88 -88 86 -141 184 -157 291 -6 38 -9 71 -6 73 2 3 14 0 25 -7
+21 -10 21 -9 21 72 0 46 4 88 8 94 19 29 56 36 150 30 113 -9 207 -36 283 -82
+56 -34 136 -111 158 -153 27 -50 51 -243 51 -414 0 -167 0 -168 26 -194 25
+-25 27 -25 122 -19 425 31 690 190 1025 614 153 195 174 219 182 210 4 -3 16
+-57 27 -120 22 -126 20 -281 -6 -398 -16 -74 -13 -82 52 -178 55 -81 104 -82
+235 -6 69 40 83 44 104 35 42 -19 64 -12 110 34 l44 45 81 0 c90 0 128 16 172
+72 l24 31 32 -26 c26 -22 42 -27 86 -27 82 0 121 20 146 77 27 61 20 146 -21
+263 -17 47 -31 98 -31 113 0 16 -16 65 -35 110 -39 90 -41 97 -22 97 19 0 130
+-45 201 -82 33 -17 85 -39 115 -49 31 -11 72 -32 91 -48 19 -15 49 -35 66 -44
+84 -44 209 -232 271 -412 33 -93 41 -216 19 -269 -20 -48 -20 -56 0 -56 40 0
+53 109 33 270 -16 135 -56 205 -246 433 -46 54 -83 103 -83 108 0 21 30 18
+120 -12 89 -29 106 -31 280 -35 129 -4 219 -11 297 -26 144 -27 150 -25 118
+44 -30 64 -31 91 -5 115 19 18 19 19 -10 103 -36 105 -67 293 -76 468 -7 134
+-1 157 26 107 7 -14 16 -25 20 -25 4 0 19 38 34 84 15 46 51 123 79 170 56 93
+140 196 161 196 7 0 22 -10 33 -22z m-1066 -225 c9 -9 2 -13 -27 -18 -126 -21
+-143 -27 -187 -65 -63 -56 -101 -144 -102 -236 0 -62 4 -76 27 -110 15 -21 25
+-40 23 -42 -10 -11 -82 48 -100 81 -10 19 -29 40 -42 46 -13 6 -23 16 -23 23
+0 12 26 60 95 173 40 67 113 138 155 152 43 15 165 12 181 -4z m248 -64 c55
+-19 68 -20 103 -9 66 19 68 7 29 -167 -11 -51 -29 -109 -40 -130 -31 -62 -120
+-139 -182 -158 -70 -21 -194 -31 -203 -17 -4 7 3 13 16 16 207 40 235 53 288
+136 65 101 43 214 -56 297 -70 59 -58 67 45 32z m-263 -120 c58 -35 70 -86 33
+-133 -17 -21 -29 -26 -65 -26 -95 0 -141 58 -104 130 11 21 25 40 32 43 29 12
+73 6 104 -14z m-1896 -210 c47 -17 101 -34 120 -39 39 -10 100 -70 100 -98 0
+-10 -13 -28 -29 -39 -23 -18 -32 -37 -49 -109 -22 -89 -62 -171 -88 -181 -24
+-9 -25 0 -3 56 23 61 49 179 49 222 0 17 -6 42 -14 57 -18 35 -107 88 -202
+122 -41 14 -71 29 -68 33 17 16 105 5 184 -24z m-435 -96 c-36 -82 -47 -132
+-42 -188 12 -128 44 -180 141 -226 33 -16 93 -34 133 -41 40 -6 73 -15 73 -20
+0 -4 -17 -12 -39 -18 -112 -30 -346 89 -381 195 -7 21 -24 41 -46 54 -19 11
+-34 28 -34 37 0 23 173 224 193 224 5 0 6 -8 2 -17z m311 -97 c28 -28 34 -42
+34 -76 0 -34 -6 -47 -31 -70 -16 -16 -39 -32 -50 -35 -56 -18 -119 91 -92 160
+5 15 74 54 97 55 4 0 23 -15 42 -34z m2761 -2134 c38 -24 35 -92 -13 -266 -77
+-277 -215 -549 -356 -703 -202 -220 -261 -273 -308 -273 -11 0 -38 -18 -60
+-40 -22 -23 -49 -40 -61 -40 -33 0 -59 29 -59 65 0 87 157 446 233 532 33 37
+95 73 126 73 25 0 67 49 144 168 35 53 82 118 104 144 23 26 47 64 53 85 19
+57 99 215 123 241 21 22 52 28 74 14z m-3266 -240 c24 -15 56 -33 71 -39 37
+-17 101 -76 144 -134 19 -27 49 -58 65 -70 l29 -21 11 31 c22 62 84 48 135
+-29 26 -39 26 -39 56 -24 37 19 57 12 97 -32 l32 -35 31 22 c43 31 74 18 112
+-47 l31 -51 70 -6 c42 -3 92 -15 126 -30 30 -14 86 -28 123 -32 79 -9 112 -32
+171 -120 20 -30 40 -55 45 -55 13 0 129 -139 151 -182 32 -63 78 -198 72 -214
+-7 -18 -55 -44 -82 -44 -12 0 -42 15 -68 34 -57 40 -116 61 -198 70 -136 15
+-309 56 -355 85 -14 8 -53 37 -87 64 l-63 49 -26 -21 c-34 -27 -44 -26 -103 4
+-195 98 -517 456 -677 751 -33 62 -36 74 -25 88 20 24 62 19 112 -12z m-843
+-2451 c85 -43 412 -381 503 -521 28 -42 59 -106 71 -145 12 -40 42 -100 68
+-140 50 -74 115 -216 146 -320 15 -47 19 -94 19 -215 0 -141 -2 -163 -28 -250
+-34 -113 -75 -201 -117 -252 -36 -43 -145 -101 -227 -120 l-58 -13 90 -6 c231
+-15 623 -141 819 -263 87 -54 178 -148 196 -200 14 -43 8 -102 -16 -150 -25
+-49 -65 -97 -77 -93 -6 2 -12 24 -13 50 -2 27 -16 75 -35 113 -48 102 -159
+205 -159 148 0 -9 24 -50 54 -92 87 -124 90 -134 71 -192 -20 -62 -63 -100
+-111 -100 -49 0 -68 12 -99 67 -15 25 -64 84 -109 131 -124 130 -236 202 -312
+202 -77 0 -44 -37 103 -116 147 -79 216 -132 243 -188 38 -79 41 -78 -213 -75
+l-222 3 -180 -54 -180 -55 -130 1 c-96 1 -151 7 -210 22 -44 11 -136 26 -205
+32 -209 19 -273 39 -352 109 -44 39 -49 41 -111 41 -40 0 -68 5 -75 13 -6 7
+-7 33 -2 68 9 63 84 193 118 204 39 12 45 31 27 78 -19 51 -17 86 7 101 13 8
+22 6 37 -8 21 -19 21 -19 21 11 0 17 -7 65 -16 108 -9 42 -13 87 -10 100 15
+59 197 299 248 326 13 7 42 7 93 -2 74 -12 74 -12 107 16 31 26 37 27 103 22
+38 -4 80 -9 92 -13 17 -5 22 -1 25 18 4 33 38 34 127 3 41 -14 83 -25 93 -25
+21 0 20 -7 22 225 l1 170 35 5 c42 6 48 22 49 136 2 149 -57 311 -162 444 -51
+64 -52 66 -58 152 -10 133 -56 230 -200 420 -33 42 -59 82 -59 89 0 19 109 5
+158 -20z"/>
+<path d="M5907 8080 c-35 -28 -116 -151 -143 -219 -49 -121 -70 -409 -37 -507
+25 -75 102 -178 120 -161 3 4 -6 46 -21 95 -39 125 -59 269 -52 373 8 129 34
+199 116 313 38 54 70 105 70 112 0 20 -23 17 -53 -6z"/>
+<path d="M6967 7780 c-188 -34 -400 -140 -477 -238 -50 -62 -4 -183 121 -320
+77 -85 87 -92 137 -103 46 -9 143 -8 222 3 24 3 25 1 28 -68 l3 -72 -40 -33
+c-78 -67 -193 -128 -271 -145 -121 -26 -309 -4 -442 52 -61 25 -130 35 -137
+19 -9 -20 100 -73 206 -99 135 -34 246 -42 353 -27 144 21 246 67 393 175 l27
+20 118 -25 c164 -34 312 -32 437 5 130 39 172 62 246 136 102 102 131 159 57
+111 -18 -11 -47 -28 -65 -36 -17 -8 -41 -28 -53 -45 -15 -21 -53 -46 -115 -75
+-147 -70 -223 -80 -356 -46 -89 23 -230 80 -234 95 -28 115 -28 115 65 145 76
+25 131 66 171 130 28 44 29 49 29 177 0 139 -7 174 -43 212 -43 46 -75 55
+-207 58 -69 2 -147 -1 -173 -6z m298 -188 c5 -19 -7 -61 -59 -211 -30 -85 -41
+-101 -67 -101 -63 0 -6 284 63 318 35 16 56 14 63 -6z m-564 -156 c55 -23 114
+-71 140 -113 13 -21 36 -49 51 -61 35 -30 37 -62 4 -62 -23 0 -116 63 -116 80
+0 5 -38 36 -85 70 -56 41 -85 68 -85 81 0 24 41 26 91 5z"/>
+</g>
+</svg>
diff --git a/spx-recommend/resource/image.svg b/spx-recommend/resource/image.svg
new file mode 100644
index 000000000..acd7f1aab
--- /dev/null
+++ b/spx-recommend/resource/image.svg
@@ -0,0 +1,112 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="1279.000000pt" height="1280.000000pt" viewBox="0 0 1279.000000 1280.000000"
+ preserveAspectRatio="xMidYMid meet">
+<g transform="translate(0.000000,1280.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M8855 12788 c-27 -5 -96 -18 -153 -29 -366 -69 -757 -290 -1202 -680
+-63 -56 -225 -206 -360 -334 -271 -258 -365 -341 -503 -444 -361 -271 -827
+-485 -1452 -666 -231 -67 -633 -166 -915 -226 l-245 -51 -175 110 c-371 232
+-678 388 -1079 547 -605 239 -1261 393 -1576 370 -227 -17 -379 -75 -507 -194
+-121 -111 -199 -264 -246 -486 -25 -114 -26 -136 -26 -410 0 -359 29 -667 109
+-1147 119 -710 293 -1329 580 -2058 74 -188 115 -348 115 -449 -1 -192 -49
+-275 -344 -587 -86 -91 -186 -203 -222 -248 -242 -301 -425 -683 -529 -1098
+-56 -228 -71 -329 -115 -788 -13 -133 -13 -334 0 -453 5 -51 14 -157 20 -237
+31 -404 95 -780 249 -1460 33 -146 67 -316 76 -379 18 -130 40 -190 93 -245
+34 -35 119 -83 129 -72 3 2 -16 67 -40 143 -132 405 -232 839 -296 1288 -176
+1226 -58 2233 331 2815 84 126 238 282 353 356 406 264 892 255 1471 -25 577
+-280 1043 -713 1264 -1176 106 -221 148 -386 157 -611 9 -245 -27 -426 -126
+-629 -204 -417 -582 -655 -1041 -655 -377 0 -703 141 -991 429 -171 172 -281
+337 -378 573 -55 130 -119 198 -190 198 -42 0 -61 -31 -61 -101 0 -151 100
+-390 259 -614 72 -103 283 -314 388 -388 176 -125 419 -227 623 -262 118 -20
+358 -34 605 -35 392 0 625 -54 852 -197 163 -101 249 -174 594 -502 250 -237
+395 -348 559 -431 150 -75 272 -110 627 -175 401 -74 567 -126 719 -227 119
+-80 282 -266 269 -308 -9 -29 -107 -415 -112 -441 -6 -30 32 -67 79 -76 16 -3
+31 -10 34 -14 11 -19 53 -8 77 20 18 21 36 78 70 217 77 309 122 449 175 538
+145 241 434 558 669 733 581 432 1211 581 1741 412 234 -75 406 -182 588 -363
+294 -294 449 -668 443 -1066 l-2 -135 35 -13 c82 -31 210 47 237 144 18 63 13
+226 -9 334 -54 264 -197 564 -393 825 -66 87 -300 325 -360 365 -20 14 -37 33
+-37 42 0 16 309 569 718 1283 331 579 404 659 602 660 73 0 93 -4 140 -27 109
+-53 207 -174 251 -310 20 -60 24 -93 23 -183 -1 -140 -23 -234 -121 -510 -41
+-115 -87 -259 -101 -320 -25 -102 -27 -126 -26 -335 0 -196 3 -238 22 -330
+112 -517 426 -962 857 -1215 109 -64 260 -127 376 -157 103 -26 170 -15 220
+35 61 60 72 104 66 267 -26 729 -185 1390 -486 2015 -201 416 -429 752 -780
+1150 -234 266 -339 425 -396 605 -23 72 -28 108 -32 230 -6 177 8 264 101 631
+125 492 168 860 146 1249 -30 528 -134 923 -448 1710 -362 907 -411 1108 -452
+1870 -24 451 -32 564 -51 734 -11 98 -31 233 -44 300 -137 688 -481 1153 -973
+1315 -168 56 -399 82 -517 59z m317 -375 c131 -46 226 -110 359 -242 137 -138
+228 -269 329 -476 324 -664 386 -1532 156 -2182 -30 -84 -33 -141 -10 -185 9
+-18 55 -84 102 -147 439 -593 645 -1008 762 -1536 61 -276 114 -691 129 -1012
+28 -571 -68 -1377 -214 -1803 -128 -375 -227 -648 -272 -747 -233 -517 -644
+-954 -1228 -1302 -185 -111 -283 -162 -608 -315 -1178 -558 -1585 -688 -2189
+-703 -250 -6 -399 4 -624 42 -516 89 -1248 350 -1854 661 -328 169 -357 209
+-226 312 35 27 90 91 156 182 158 219 189 301 197 522 7 176 -12 318 -77 573
+-140 550 -239 782 -429 1010 -37 44 -97 118 -133 165 -36 47 -80 99 -98 115
+-68 64 -74 116 -23 184 15 20 75 90 133 156 263 299 451 585 758 1150 176 325
+270 597 337 980 85 483 124 1127 82 1352 -35 191 -169 509 -267 633 -41 53
+-60 95 -60 135 0 79 48 135 171 200 276 145 1502 404 1915 405 66 0 89 5 132
+26 77 38 175 151 318 366 141 212 185 267 381 480 142 154 331 332 480 451
+268 213 671 450 903 531 126 44 196 56 315 52 91 -2 125 -8 197 -33z m-7531
+-2097 c125 -33 180 -55 319 -128 422 -221 630 -458 686 -780 35 -202 -14 -377
+-166 -590 -139 -195 -468 -481 -621 -539 -158 -61 -291 26 -451 296 -147 249
+-255 486 -322 708 -43 143 -123 501 -134 604 -27 237 71 396 275 448 89 22
+292 13 414 -19z"/>
+<path d="M8852 11819 c-84 -14 -231 -66 -315 -112 -220 -120 -469 -349 -661
+-607 -183 -246 -246 -368 -254 -492 -8 -135 43 -201 215 -279 53 -24 276 -133
+496 -242 473 -234 522 -251 692 -252 114 0 123 2 185 31 201 96 305 339 317
+739 7 204 -4 311 -57 575 -68 338 -100 435 -176 526 -80 99 -256 144 -442 113z
+m34 -295 c73 -35 124 -162 198 -494 55 -251 74 -374 87 -583 17 -267 3 -313
+-95 -305 -102 10 -411 145 -613 270 -150 92 -341 244 -375 297 -53 84 -37 128
+117 334 236 313 360 429 513 478 71 23 124 24 168 3z"/>
+<path d="M8902 7068 c-30 -11 -88 -44 -130 -74 -43 -30 -115 -77 -162 -105
+-222 -134 -320 -254 -320 -392 0 -117 64 -197 166 -205 50 -4 56 -2 83 27 18
+19 47 76 71 139 68 178 128 250 263 312 79 37 154 43 207 15 19 -10 68 -44
+108 -76 101 -82 178 -97 263 -54 64 34 79 130 31 206 -106 166 -407 274 -580
+207z"/>
+<path d="M10020 6110 c-123 -21 -472 -135 -577 -189 -74 -37 -91 -87 -53 -160
+50 -100 111 -106 273 -26 99 48 125 57 220 70 116 16 226 60 253 100 20 31 29
+129 14 164 -10 26 -56 54 -79 50 -3 -1 -26 -5 -51 -9z"/>
+<path d="M4925 5851 c-176 -29 -290 -99 -402 -248 -67 -89 -138 -221 -148
+-274 -10 -51 15 -102 65 -135 67 -44 151 -28 188 36 9 17 33 58 52 92 50 88
+165 199 248 240 56 28 80 34 151 37 89 3 119 -3 243 -50 114 -43 182 -38 241
+19 43 41 34 92 -28 160 -19 22 -57 49 -83 60 -104 45 -412 81 -527 63z"/>
+<path d="M10220 5550 c-14 -4 -128 -35 -255 -69 -126 -34 -244 -71 -261 -82
+-35 -21 -68 -89 -59 -119 3 -10 20 -23 37 -29 55 -19 115 -13 207 23 96 37
+194 61 217 52 24 -9 236 14 265 30 51 26 51 119 0 173 -25 27 -36 31 -78 30
+-26 0 -59 -4 -73 -9z"/>
+<path d="M7256 5464 c-273 -54 -518 -219 -630 -424 -56 -103 -44 -225 30 -289
+67 -59 153 -90 363 -131 58 -11 126 -27 153 -36 54 -18 98 -63 98 -101 0 -14
+12 -98 26 -187 21 -131 25 -185 21 -286 -4 -113 -8 -135 -40 -223 -60 -166
+-123 -243 -246 -300 -57 -27 -79 -32 -166 -35 -179 -7 -317 49 -472 190 -122
+112 -164 127 -220 75 -55 -49 -69 -187 -28 -266 47 -92 202 -187 380 -233 79
+-20 114 -23 280 -23 168 0 199 3 268 23 159 46 238 104 294 216 78 156 168
+252 257 275 39 9 54 8 120 -14 72 -23 89 -25 289 -25 256 1 392 12 454 40 25
+11 80 51 121 88 41 37 109 96 151 130 95 80 116 105 135 162 21 65 49 312 41
+365 -12 87 -72 125 -194 125 -121 0 -161 -39 -161 -157 0 -145 -37 -294 -87
+-352 -71 -83 -248 -139 -404 -127 -168 13 -298 64 -384 150 -62 61 -80 109
+-95 247 -21 187 12 326 123 527 81 146 121 226 136 275 18 52 16 138 -2 172
+-36 69 -128 124 -254 150 -84 18 -265 18 -357 -1z"/>
+<path d="M9830 4730 c-53 -13 -83 -54 -77 -103 6 -46 32 -85 70 -107 21 -12
+38 -12 114 -2 109 16 156 7 261 -48 92 -49 131 -51 193 -12 54 35 109 96 109
+122 0 48 -97 100 -243 131 -103 22 -369 34 -427 19z"/>
+<path d="M4850 4596 c-293 -106 -562 -317 -536 -421 9 -37 64 -43 145 -17 127
+41 505 211 534 240 68 69 34 222 -50 222 -15 0 -57 -11 -93 -24z"/>
+<path d="M4830 3963 c-227 -37 -438 -225 -402 -357 14 -50 46 -91 82 -106 46
+-19 112 10 181 81 31 31 67 62 79 69 14 7 72 13 144 14 132 2 166 12 205 62
+25 32 26 62 5 112 -42 102 -152 149 -294 125z"/>
+<path d="M4971 3329 c-45 -18 -83 -52 -201 -181 -133 -144 -152 -180 -126
+-241 29 -72 101 -99 191 -72 65 19 130 66 169 124 37 55 74 77 166 97 128 28
+160 55 160 135 0 40 -4 51 -27 69 -40 31 -83 47 -175 65 -91 17 -123 18 -157
+4z"/>
+<path d="M3013 4470 c-35 -14 -43 -41 -33 -103 12 -73 51 -154 111 -230 60
+-75 161 -163 206 -178 66 -21 145 31 158 105 17 89 -178 336 -306 389 -50 20
+-110 28 -136 17z"/>
+<path d="M2347 4189 c-22 -13 -47 -68 -47 -102 0 -17 18 -40 60 -76 69 -60
+100 -109 135 -211 40 -117 77 -145 177 -134 70 8 88 23 88 70 0 54 -47 182
+-87 237 -45 61 -185 184 -238 208 -46 21 -63 23 -88 8z"/>
+<path d="M1689 3869 c-20 -38 -5 -104 39 -171 56 -85 87 -157 113 -258 28
+-108 49 -134 104 -127 151 20 132 275 -34 458 -97 108 -194 150 -222 98z"/>
+</g>
+</svg>
diff --git a/spx-recommend/resource/images.jpg b/spx-recommend/resource/images.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..a76b1df1b33c24b0cc021d808d76f7900ee8dffa
GIT binary patch
literal 4760
zcmZWpcQhPY_Z>A#iZ*J98oe_ZEqauZsAJUVeY6-Y$diObjnRUTr$;y1C_$9yq7Ftk
zh!UMqgU@@v_5Jhx_C0r<d-mCD-?i?&>)uS?ECHx=G_^GW1Oxy8!R-Lt%mUs5$Vu<e
z($D~DX=#DCV7LtiMg|6k+jJZMPDWNfc1C6%Rv?f=oP&p7P((z8;gO`Qq_7O1u!tZ5
z1qH?Zd-oZssF;OWS$Ty22ZDnCL;Sz;<~x9z41gw}BO>4g5K<EmQ4`#B0UiPXghT|l
z0Q?t3!~jAP0@6EVw_Oz~03iV(5iv349U>x<e>JxyH8F=c35|*Ysjbf_Egh$!k?&uL
zNK`eDOF}g%r=44J-_CE@J|cJQK<(Coi2(4A|9{<Y^Q{AbnB=y_PJPQ068^LQf7=9v
z)HEDK;+zsHJ_a{4fV)Ju0%{^^fHDBj67Dn_7+pS^Kbz{=A^a`1k?bm6ZDj09_LN25
z?-H-*wM<4%zoskve`ElC{7}w@YuIP`NP`L6Rjcj(2RDF@w9U?jJ#4b#J<;(f?|ybE
zg_!b8wGqQB*#L%1P}JWA7v8(~<7@8rqOrCAYJ3)JT!NWxitaDJwdVIhoB)DoL%<0+
z|LDN={*TmjkC*2_xW?-)ZAJui`$8!)t(^@Q`0kO$v!w*@QPc18qByA*pmKy_ml@bP
z`b#_8(kZ)IVvsF=us}F*NNkxC&6m8WPPP?zFq7H1%4&C@OVGzNsE^C?@-MArt9EYn
zLl%|ZJF09BO29dDDcgU@AL%YpY7*9|Y-|o;z&T2ws>~niGpIKP1O-0)VYrZv%zGfA
zOu@IQHI&eJ7eZ*?)kwVj2&A+M={-lCa&DJLFtD%bD|v+WR;<3l?5Z%C(yy-QB2PKv
zM0Dq3sys6xeWqzVyH5&8`a%+eB;wvRDx_)ieVsfs)czskQPVtp0u~?BI4zy9k)w(?
zs&fieIzmGiCw6SOIqbFIm2F?#&N)~}dP~$r?cnL3pH^!b%D<rC_Rm8J+e@U%+d;6F
ztB*5!iO_~%UDl^WbxhCWfK?W5W?RBdny>q{nF1%=rJU@a+ne_}b4N&-#1l+6siPcX
zCE|4M2nux=BAy656B#vL)Nn^3-awM8`euOfW<1eVsTgMBPBCAVX%Eo7x2Wzn_1GZJ
zauOuJy$9k*k^6cJ&+t>7S3A6^MdK)u%rVW~e)Dv`sr5Q+xPXkA#V7Rm>WdCl)#x1q
zvX|dK(4(kFC^**)?8PAk@<vVw`exH$yxI7Sc#8}sJtm^~lfb87&*cO1s0CG@=wQoV
zk2BncutyCbnMeBzhjRP{T|Hgx?N*?xLQhNGU)$i&7S(b#m-<6-d({Ke)-)1`F?5*w
z9%ZnmlXN=cT&P)}wH81Bkev0E$~Yx^fDpR23TDv1><RD}qghz0>>b56kRE+$3}<hA
z>fuvoPFEnzP!}hh`DjQK5t;0=N=b!OKlg;wgai$G&^e8bQqC!f1SHw*q{Mr)H2Rh&
zR+q<;VKue5;ywW#S%k3Kk`l-lScJj5Z1?=|dF$Ns-eovawB_H$P#RiO=Ia$f{mydH
z_Qmt)Xri&Z!DbmTn2YDg8NS*qx$<$C#zP-T`Vq?kAz#p&Bpoquu2ak3?@=2waEJzB
zKdEnbg|oGyA8AzLR<aSqPfX0rs!un_<?y$ZLa3jlxY^lW%X;dQsx!yt!h|S9fB*F)
z5wOK${<~pMj|Tn4f<`{NPPJIawsauq+A(X2nCZpDYNob7d#$a*jA_7-AEka)s}lvd
z*0&)h+f(-lboB<+fzHI(ROwPj)p!cl*1fvNXA0+f(1tiu=AD*#m%mJN)|E{2Ov!Qo
zC<d~)|3hX5)Isv@Fn@OR20#=>pfEEKK@!zD?`1xV#XCuBX2L`st=P>Jip6d~6oumS
zIICn3WgYEO`lTP5r-x=Cn!=Ude@fQU*FhD$L3O<zk2iuOCY(S9)!Pqa8bPHmb`g4c
zPR<s5SQfr%755YeS!_Lpc1q)<Y4^0ku(tVrDaHn*I?ruda{CG$<Z3RVrfhjzErN(2
z#y0@;#)lOBJf{Sml5i7fy|TLA%mc~hhhgG<S?4yJZ_kmww!+@<B!>6CPYda(?oj6L
z>Y2+U{Hlb1_2xZRRHOLLV^2g=uB!um<*x|h;4c61!2tUlHXso+RJzi%EyUvL<z=N%
zZg2760Z(1WP|Qdnx(r#bR_9$0H^9|0jJAw&Jghjkbc)d5^j<O|u4MJXcq-=DN7W|X
z0OT3#GgQ{^P4mt;k0X(ZbxX4`dfn}62Nm@~y{Bx`6weUQKNV2Q8pl(a$&<EyJyYs-
z3@$sX%*LS@&R3M5cT{z$YhG!@XPy!4V)H<M<I~!y&yHH{vP(s~%-9hd*8lNo+0=7$
z_z)+aAGUyvC}s;16Zb4P$PX$>YF2zT<}x%h%P-wR;@n%opncBMxBmIBzLd{9NhAUV
zA8!vl5oUZxAY!HiWVrN)j~^qInmR7uL)#kRTfssJvkasAmecUuLqTl$D@6RYYyAPM
zXkm)WMa)*>{o~oogBt)`+4#Mm^GU@wCDidkih;GH$)bFZp!;eb!H=TE(y>1flu3yF
zvHH&(6RBXvQ2VI9Fk^F*Md}iNBRZG-tT<c5WVBv&ZhFF9Bej=4Lb@LcAtj9JY-MzI
zi`=4bx){1AEfSQ7Jxbu>-pB>GSD7Mg^=ROADot+vo5Z+roWKl=GjAAcVGDnl^<#DJ
zva+m^YnlLL^Y}R}7p@QtbS(nA2Tyr=i-Qt$4(MEq&-l!><rV$56<_%%JvcZwNNtJw
zxC!cyGuu^#Cak%e9n@H<H=ABOa(r1t3uY4+FwO$a)Cz?D(jV@X@eb^T7A(8^V0_vh
z2YJT4jl3WK`*2;@lOdpwc*CMtr`&A9q9p%w9vhU@D8L6baF|_bxC^sn8|;LkOImds
zKwxAX)Hx|!Qi~uGYJ~<}kjEdoOhv!7TgzN(8s<&dWaG!tvqk68<JN<b)dum6-zwaX
zBkDA)X`&a3=q8X;O8h<wMNjJ;!5A(Bo!^>hi_p}ip(yLwp%gsWYkWp}@lD7`$WN?D
z>Du6U4g7E_jZ5;ysE$Fg$=43b-Zw$@XEj!B<h(pcX1p59w-A_S??axHm@!<sj@#}e
zvvlBmn;N1t_^}<PEI2HEe7?3N>O-a3Mkg8+U>wePN8w3nA_O<im?oTQqHpqvPqL0%
zAwz#*F1ELD@^wIsFw>oB>_u?=h`W(y<k)Y8W30(@-STYv#=0gbG_2O@2Eb|a?LAj~
z%39{~KyB2Q)i#0MgW=dv`GPaVfr*V}*!xctUbJJ!+3wvXCp{Y<;>^j8#oHK{4nz0w
zy^~y@L`l`(R3E_H<WzE`m?c1+5FHZ_Jq;V46Y{Z7<4BbJ1M(&7(!a`8`O60X+^=_;
z&d=Shbn=^e?k_eJq>VqR(6c8{*!enJn4j@N%qBpnZzexZP;;?|L&%y?!nAs4)ukh!
zCuhDV#L+IqNH6xTfDz)4k9kpNRsXDPZ%4sW!>@C6uA(UqH`2@UV_awqlQSmGwIFle
zU8Igt)^z=IcJK*vV%eCL%~~u&?7sg)X1C$!;W@dJh%h~q*;k*?SX9!7SkTCPF^_c0
zZuDf~)<m=K^QDxQ?fDLm2H6E&nc?Sb0(rdjm-3`@SdRg#<~P$5_=SOTC)XZw;KL01
zoG4wD{3KYFg=?XN<bf1(fa!^40ndao+16jG63?JVY=+bO^GYR?TTl0gvX2Tc4N6Kx
z#H+UyvUEPCBD7D;TIqX0fh*y#r8RcU>N{tyLPx5G%^vd~7+Y8RB9?<E1ATeJY+ae6
z`VKE2L0gDkuJtmWlP-@`f28**_H}qNEC-3FCwdRNBtuj;%X$Zi_BWxjluE}wSTOwi
z*Y-|Wb{>zFqx_qp<Fvya&5A-ED{Khgxk`LfVe}psZ>N%D4lJ$#Vp<(7x->YA^DsC2
z%?<~ZLbN#^I!(p;YJy~3`kK{Ml!PL~to#`|doHaz9qs5QJ?D;P{r&r{*Q2qR&mNOn
zC@kJW8@-LY{NUx*ogyork7q89@JjRgL)Qs4S7?^+aV_xTPO)IrF#n8f+3V<xx7iw6
zP01WA@KB0};VsT^%$e0K$loh-@5F$7LE}lGy7~k6Z8s776LfAOcWY4;kG)hpuM#MZ
zGhF$FaA)&QHIl&`HG9D+z-%{uyu$RZNZC4zno!*fkSB9;TFRP8o(~*yQTtAC3AYnc
z$d=+Tq9Mh9l~xet9{*&^fF=2y&hI2_ql1Jm|Lp<h)NYYuv*(W{94x=^jMRvHCQSG1
zdG=Jvx||$uNczvjJw#;Jv)9qn&?WyNS>Z}r1wK(akJF@Sff>s3H0Qt7ym;=#Pg67t
zJU#gtZAo%KhlyO_^F!fEY*(v^mY%7^L`arsb}#1*)~mHEF^G~s(`|#>(+D=`<0|BU
zT~OCwc}3h$0`Y4h%Be4L!{oO&*uS~cWNUHJkG*!eqL$z?;ZiFYy{<-=wSG#MkJ6Nz
z*HQ}n3B9nL)B+mcd08H{n$^|W^}5o0DL=Z8GS$COO!n<NbfR(0@=B0%E)USlAVXV8
zfkC9+<wZ&VABz{>vXIrr>+W3!a>jzGZQmQfB-fm)W1M29bn};c7UMH#t@$3$vnF98
zuWam=f~J>OXFM-ZqoU5D=>?JHiqbaCyQ*dt(kP(g-z{z|b2@6&ugbcM6dGwwC5tE>
zDxPW}T2brtXGAZR$KWbIf~C&ljUrW#cRX1;&H_9>3QI+RpO)p4Lo<W&srkhbuCy=L
zVvOG4sK@Wx4N*YVFzmeVKj>*EZ$kAqXd_gLhuNidwS=Sl`OGVT68Z>|mA(fw1wOL0
zT)@|fEebDT!w={U9c@KKsXt)HTO%Z~M$RLa?B{d`E~rM&{PFcYhrt!>;cCdBCeT8i
zLx7A$s_w|MMx(=3Sz3Ailxlpl*02(I1JGAC?)6<y=x^F@(X7<{J<DV<X``p7Wt9;s
zYBLGNUu!es2K-s%<P6Y@lIbZiWciW$jR9T16SV|W0j}C&pPY7)JKH;i=NyATLD1rI
z9J&o7LcML?`n?akXYjk;t(JBfuhg1nLu9ynxKec9dt@QWxLPx^&<XM3%g#K^{p>HS
zBk?|)nMP;xvd3j2qsCoyE>#C-PfqDFGMC$~iOd-Lu`&8NaGs{Ly*MApE!?{IVs>8D
zNKV$-H-#`zzfd>Yk+Y0h5~cmrYNGk>YlKi5!Ba3JosVk6*HzGTi=)qynd;ruTJU_P
zD&Bp1BMGihk$$OK7weX?8{lb=!HczySoYwO`x^CKq)PG=ly#Z1^~Q<}H(Z&=lTQn}
zoXW#VYwQBuCIzjt@pIWvUFAhg<)I#VBCS({ojrC6g}FQev7RcQFkooxVmU)UdH9;h
zAybGcWXNX72Bem$T<33#Pp}%pT*0}ndj2qCSmUx&*JHcFo0ZewJ$8@J323&`+vLm?
z$xT!=FeRXi?#n#`Lj!_E7r#mb{N1+MB<0)2a2C?-ZeS3Rz_aIN3KQDv3*RsOy3Rv0
z>4Mzu9*BwG3gXSYR{mKtZjjNmCC+bz_UiQ`o2d>z?5xPdZ*E|MMe<ZkVE#<g3=S2t
zrQTf0P}*a6LDC$P)^_>A>Q%!OD4oua0@vC8-?o#QFWu1Y-j50pJW=MorD#C3%*4uT
zsaY<o>RL@VZb7kbHldd3I(l($CKlQLMqqN8!n=G#(){2-v%9OVRDzdv04)0s-0(2#
z82n9N6r_j}G+w}@o6U&6-huJt^ivrI)#NRj`~9{`{63M)hL*OiUCSjf6?h0xfMkt~
zv&z)x_2|ph`WBA*#y7n;?(y1s4PShMWwzHV$MmIC>YwKX&|B|LdU2__Rn>RYPL;HJ
zL?LD`e{5A|%KDs3-#+7uo{CMkFgfdMq>Ut-Y?uRwl~+mDR-@c3w<$Nra9SPrCafQO
ze|v6i;^mvOt4P1XxvF!-Uk9E&VcZ<%k-YmOD_wpMSa-*$CJyS}e#Mmy2^h=NaFDGQ
zK3>)+m^kDC!?HL8YNa*5aP+IQC*z&`sUiu_Qa(mFa6}4|6B~lnnED``&1eqNcO^d~
z6pFO>LBqid9aL=zvtI_lfgXl&hj6P#!dTDr4%QGq*Fg=dy%*%LhaC0bk7iTROV%cK
v7w?~#OELn@_8WAhW^t-4^aJBW@VaGl{mWuexYs!cnU8ar2`0g;=LY*9Tw4K9

literal 0
HcmV?d00001


From 82e7948d9b7d3489ba1e8397768af7c73e1b36b3 Mon Sep 17 00:00:00 2001
From: qiniu <qiniu@qiniudeMacBook-Pro.local>
Date: Thu, 21 Aug 2025 14:53:04 +0800
Subject: [PATCH 33/49] rename: spx-recommend -> spx-algorithm

---
 {spx-recommend => spx-algorithm}/client/README.md   |   0
 .../client/image_search_client.py                   |   0
 .../client/simple_client.py                         |   0
 {spx-recommend => spx-algorithm}/demo/demo1.py      |   0
 {spx-recommend => spx-algorithm}/demo/demo2.py      |   0
 {spx-recommend => spx-algorithm}/demo/demo3.py      |   0
 .../project/.env.example                            |   0
 {spx-recommend => spx-algorithm}/project/.gitignore |   0
 {spx-recommend => spx-algorithm}/project/Dockerfile |   0
 {spx-recommend => spx-algorithm}/project/README.md  |   0
 .../project/app/__init__.py                         |   0
 .../project/app/api/__init__.py                     |   0
 .../project/app/api/routes.py                       |   0
 .../project/app/config/__init__.py                  |   0
 .../project/app/config/config.py                    |   0
 .../project/app/services/__init__.py                |   0
 .../project/app/services/image_search_service.py    |   0
 .../project/requirements.txt                        |   0
 {spx-recommend => spx-algorithm}/project/run.py     |   0
 .../project/tests/__init__.py                       |   0
 .../project/tests/test_api.py                       |   0
 {spx-recommend => spx-algorithm}/resource/cute.svg  |   0
 {spx-recommend => spx-algorithm}/resource/cute2.svg |   0
 {spx-recommend => spx-algorithm}/resource/demo.png  | Bin
 {spx-recommend => spx-algorithm}/resource/dog.svg   |   0
 {spx-recommend => spx-algorithm}/resource/image.svg |   0
 .../resource/images.jpg                             | Bin
 27 files changed, 0 insertions(+), 0 deletions(-)
 rename {spx-recommend => spx-algorithm}/client/README.md (100%)
 rename {spx-recommend => spx-algorithm}/client/image_search_client.py (100%)
 rename {spx-recommend => spx-algorithm}/client/simple_client.py (100%)
 rename {spx-recommend => spx-algorithm}/demo/demo1.py (100%)
 rename {spx-recommend => spx-algorithm}/demo/demo2.py (100%)
 rename {spx-recommend => spx-algorithm}/demo/demo3.py (100%)
 rename {spx-recommend => spx-algorithm}/project/.env.example (100%)
 rename {spx-recommend => spx-algorithm}/project/.gitignore (100%)
 rename {spx-recommend => spx-algorithm}/project/Dockerfile (100%)
 rename {spx-recommend => spx-algorithm}/project/README.md (100%)
 rename {spx-recommend => spx-algorithm}/project/app/__init__.py (100%)
 rename {spx-recommend => spx-algorithm}/project/app/api/__init__.py (100%)
 rename {spx-recommend => spx-algorithm}/project/app/api/routes.py (100%)
 rename {spx-recommend => spx-algorithm}/project/app/config/__init__.py (100%)
 rename {spx-recommend => spx-algorithm}/project/app/config/config.py (100%)
 rename {spx-recommend => spx-algorithm}/project/app/services/__init__.py (100%)
 rename {spx-recommend => spx-algorithm}/project/app/services/image_search_service.py (100%)
 rename {spx-recommend => spx-algorithm}/project/requirements.txt (100%)
 rename {spx-recommend => spx-algorithm}/project/run.py (100%)
 rename {spx-recommend => spx-algorithm}/project/tests/__init__.py (100%)
 rename {spx-recommend => spx-algorithm}/project/tests/test_api.py (100%)
 rename {spx-recommend => spx-algorithm}/resource/cute.svg (100%)
 rename {spx-recommend => spx-algorithm}/resource/cute2.svg (100%)
 rename {spx-recommend => spx-algorithm}/resource/demo.png (100%)
 rename {spx-recommend => spx-algorithm}/resource/dog.svg (100%)
 rename {spx-recommend => spx-algorithm}/resource/image.svg (100%)
 rename {spx-recommend => spx-algorithm}/resource/images.jpg (100%)

diff --git a/spx-recommend/client/README.md b/spx-algorithm/client/README.md
similarity index 100%
rename from spx-recommend/client/README.md
rename to spx-algorithm/client/README.md
diff --git a/spx-recommend/client/image_search_client.py b/spx-algorithm/client/image_search_client.py
similarity index 100%
rename from spx-recommend/client/image_search_client.py
rename to spx-algorithm/client/image_search_client.py
diff --git a/spx-recommend/client/simple_client.py b/spx-algorithm/client/simple_client.py
similarity index 100%
rename from spx-recommend/client/simple_client.py
rename to spx-algorithm/client/simple_client.py
diff --git a/spx-recommend/demo/demo1.py b/spx-algorithm/demo/demo1.py
similarity index 100%
rename from spx-recommend/demo/demo1.py
rename to spx-algorithm/demo/demo1.py
diff --git a/spx-recommend/demo/demo2.py b/spx-algorithm/demo/demo2.py
similarity index 100%
rename from spx-recommend/demo/demo2.py
rename to spx-algorithm/demo/demo2.py
diff --git a/spx-recommend/demo/demo3.py b/spx-algorithm/demo/demo3.py
similarity index 100%
rename from spx-recommend/demo/demo3.py
rename to spx-algorithm/demo/demo3.py
diff --git a/spx-recommend/project/.env.example b/spx-algorithm/project/.env.example
similarity index 100%
rename from spx-recommend/project/.env.example
rename to spx-algorithm/project/.env.example
diff --git a/spx-recommend/project/.gitignore b/spx-algorithm/project/.gitignore
similarity index 100%
rename from spx-recommend/project/.gitignore
rename to spx-algorithm/project/.gitignore
diff --git a/spx-recommend/project/Dockerfile b/spx-algorithm/project/Dockerfile
similarity index 100%
rename from spx-recommend/project/Dockerfile
rename to spx-algorithm/project/Dockerfile
diff --git a/spx-recommend/project/README.md b/spx-algorithm/project/README.md
similarity index 100%
rename from spx-recommend/project/README.md
rename to spx-algorithm/project/README.md
diff --git a/spx-recommend/project/app/__init__.py b/spx-algorithm/project/app/__init__.py
similarity index 100%
rename from spx-recommend/project/app/__init__.py
rename to spx-algorithm/project/app/__init__.py
diff --git a/spx-recommend/project/app/api/__init__.py b/spx-algorithm/project/app/api/__init__.py
similarity index 100%
rename from spx-recommend/project/app/api/__init__.py
rename to spx-algorithm/project/app/api/__init__.py
diff --git a/spx-recommend/project/app/api/routes.py b/spx-algorithm/project/app/api/routes.py
similarity index 100%
rename from spx-recommend/project/app/api/routes.py
rename to spx-algorithm/project/app/api/routes.py
diff --git a/spx-recommend/project/app/config/__init__.py b/spx-algorithm/project/app/config/__init__.py
similarity index 100%
rename from spx-recommend/project/app/config/__init__.py
rename to spx-algorithm/project/app/config/__init__.py
diff --git a/spx-recommend/project/app/config/config.py b/spx-algorithm/project/app/config/config.py
similarity index 100%
rename from spx-recommend/project/app/config/config.py
rename to spx-algorithm/project/app/config/config.py
diff --git a/spx-recommend/project/app/services/__init__.py b/spx-algorithm/project/app/services/__init__.py
similarity index 100%
rename from spx-recommend/project/app/services/__init__.py
rename to spx-algorithm/project/app/services/__init__.py
diff --git a/spx-recommend/project/app/services/image_search_service.py b/spx-algorithm/project/app/services/image_search_service.py
similarity index 100%
rename from spx-recommend/project/app/services/image_search_service.py
rename to spx-algorithm/project/app/services/image_search_service.py
diff --git a/spx-recommend/project/requirements.txt b/spx-algorithm/project/requirements.txt
similarity index 100%
rename from spx-recommend/project/requirements.txt
rename to spx-algorithm/project/requirements.txt
diff --git a/spx-recommend/project/run.py b/spx-algorithm/project/run.py
similarity index 100%
rename from spx-recommend/project/run.py
rename to spx-algorithm/project/run.py
diff --git a/spx-recommend/project/tests/__init__.py b/spx-algorithm/project/tests/__init__.py
similarity index 100%
rename from spx-recommend/project/tests/__init__.py
rename to spx-algorithm/project/tests/__init__.py
diff --git a/spx-recommend/project/tests/test_api.py b/spx-algorithm/project/tests/test_api.py
similarity index 100%
rename from spx-recommend/project/tests/test_api.py
rename to spx-algorithm/project/tests/test_api.py
diff --git a/spx-recommend/resource/cute.svg b/spx-algorithm/resource/cute.svg
similarity index 100%
rename from spx-recommend/resource/cute.svg
rename to spx-algorithm/resource/cute.svg
diff --git a/spx-recommend/resource/cute2.svg b/spx-algorithm/resource/cute2.svg
similarity index 100%
rename from spx-recommend/resource/cute2.svg
rename to spx-algorithm/resource/cute2.svg
diff --git a/spx-recommend/resource/demo.png b/spx-algorithm/resource/demo.png
similarity index 100%
rename from spx-recommend/resource/demo.png
rename to spx-algorithm/resource/demo.png
diff --git a/spx-recommend/resource/dog.svg b/spx-algorithm/resource/dog.svg
similarity index 100%
rename from spx-recommend/resource/dog.svg
rename to spx-algorithm/resource/dog.svg
diff --git a/spx-recommend/resource/image.svg b/spx-algorithm/resource/image.svg
similarity index 100%
rename from spx-recommend/resource/image.svg
rename to spx-algorithm/resource/image.svg
diff --git a/spx-recommend/resource/images.jpg b/spx-algorithm/resource/images.jpg
similarity index 100%
rename from spx-recommend/resource/images.jpg
rename to spx-algorithm/resource/images.jpg

From 2ef5406b890b047b5d62e16762c0e25b29d0dbf5 Mon Sep 17 00:00:00 2001
From: petezhuang <petezhuang13@163.com>
Date: Thu, 21 Aug 2025 14:51:13 +0800
Subject: [PATCH 34/49] refactor(spx-gui):decouple draw_line module

---
 .../common/painter/components/draw_line.vue   | 25 +++++++++++++------
 .../editor/common/painter/painter.vue         | 12 ++++-----
 2 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/spx-gui/src/components/editor/common/painter/components/draw_line.vue b/spx-gui/src/components/editor/common/painter/components/draw_line.vue
index 943e11d27..7f96cfb4d 100644
--- a/spx-gui/src/components/editor/common/painter/components/draw_line.vue
+++ b/spx-gui/src/components/editor/common/painter/components/draw_line.vue
@@ -31,12 +31,12 @@ interface Props {
 
 const props = defineProps<Props>()
 
-// Emits
-interface Emits {
-  (e: 'line-created', line: paper.Path): void
-}
+// // Emits
+// interface Emits {
+//   (e: 'line-created', line: string): void
+// }
 
-const emit = defineEmits<Emits>()
+// const emit = defineEmits<Emits>()
 
 // 接口定义
 interface Point {
@@ -49,6 +49,15 @@ const isDrawing = ref<boolean>(false)
 const startPoint = ref<Point | null>(null)
 const previewPoint = ref<Point>({ x: 0, y: 0 })
 
+//注入父组件接口
+import { inject, type Ref } from 'vue'  
+
+const getAllPathsValue = inject<() => paper.Path[]>('getAllPathsValue')!
+const setAllPathsValue = inject<(paths: paper.Path[]) => void>('setAllPathsValue')!
+const exportSvgAndEmit = inject<() => void>('exportSvgAndEmit')!
+
+
+
 // 创建直线路径
 const createLine = (start: Point, end: Point): paper.Path => {
   const line = new paper.Path()
@@ -89,8 +98,10 @@ const handleCanvasClick = (point: Point): void => {
   } else {
     // 完成画线
     const line = createLine(startPoint.value!, point)
-    emit('line-created', line)
-    
+    const currentPaths = getAllPathsValue()
+    currentPaths.push(line)
+    setAllPathsValue(currentPaths)
+    exportSvgAndEmit()
     // 重置状态
     resetDrawing()
   }
diff --git a/spx-gui/src/components/editor/common/painter/painter.vue b/spx-gui/src/components/editor/common/painter/painter.vue
index 3cdec21ed..f9680ae77 100644
--- a/spx-gui/src/components/editor/common/painter/painter.vue
+++ b/spx-gui/src/components/editor/common/painter/painter.vue
@@ -153,7 +153,6 @@
         :canvas-width="canvasWidth"
         :canvas-height="canvasHeight"
         :is-active="currentTool === 'line'"
-        @line-created="handleLineCreated"
       />
       
       <!-- 笔刷绘制组件 -->
@@ -379,11 +378,11 @@ const selectTool = (tool: ToolType): void => {
 
 // 处理直线创建
 //todo:逻辑迁移到draw_line组件内部
-const handleLineCreated = (line: paper.Path): void => {
-  allPaths.value.push(line)
-  paper.view.update()
-  exportSvgAndEmit()
-}
+// const handleLineCreated = (line: paper.Path): void => {
+//   allPaths.value.push(line)
+//   paper.view.update()
+//   exportSvgAndEmit()
+// }
 
 
 //painter提供allPath接口给直线组件
@@ -709,6 +708,7 @@ const { exportSvgAndEmit } = useSvgExporter({
 
 provide('currentTool', currentTool)
 provide('reshapeRef', reshapeRef)
+provide('backgroundRect', backgroundRect)
 provide('isImportingFromProps', isImportingFromProps)
 provide('exportSvgAndEmit', exportSvgAndEmit)
 

From 415c0c0030395122f159cb8cd68ff471e907862d Mon Sep 17 00:00:00 2001
From: spf <s17625514371@163.com>
Date: Thu, 21 Aug 2025 16:55:02 +0800
Subject: [PATCH 35/49] docs:add svg-service to apidoc

---
 docs/openapi.yaml | 269 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 269 insertions(+)

diff --git a/docs/openapi.yaml b/docs/openapi.yaml
index 4445a20c9..3ec6b6ccd 100644
--- a/docs/openapi.yaml
+++ b/docs/openapi.yaml
@@ -1081,6 +1081,146 @@ paths:
               schema:
                 $ref: "#/components/schemas/AIInteractionResponse"
 
+  /image:
+    post:
+      tags:
+        - AI-SVG
+      summary: AI generate images
+      description: |
+        Generate AI-powered images and return image metadata including URLs, dimensions, and generation details.
+        
+        Supports multiple AI providers (svgio, recraft, openai) with automatic prompt translation.
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: "#/components/schemas/GenerateImageParams"
+      responses:
+        "200":
+          description: Successfully generated image and returned metadata.
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/ImageResponse"
+        "400":
+          description: Invalid request parameters.
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  error:
+                    type: string
+                    examples:
+                      - "prompt must be at least 3 characters"
+                      - "provider must be one of: svgio, recraft, openai"
+        "500":
+          description: Internal server error during image generation.
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  error:
+                    type: string
+                    examples:
+                      - "failed to generate image"
+
+  /image/svg:
+    post:
+      tags:
+        - AI-SVG
+      summary: Generate SVG image directly
+      description: |
+        Generate AI-powered SVG images and return the SVG file content directly in the response body.
+        
+        Returns actual SVG content instead of metadata, with generation details provided in response headers.
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: "#/components/schemas/GenerateImageParams"
+      responses:
+        "200":
+          description: Successfully generated SVG image.
+          headers:
+            Content-Type:
+              description: MIME type of the response
+              schema:
+                type: string
+                example: "image/svg+xml"
+            Content-Disposition:
+              description: File download information
+              schema:
+                type: string
+                example: 'attachment; filename="img_abc123.svg"'
+            X-Image-Id:
+              description: Unique identifier for the generated image
+              schema:
+                type: string
+                example: "img_abc123"
+            X-Image-Width:
+              description: Width of the generated image in pixels
+              schema:
+                type: integer
+                example: 512
+            X-Image-Height:
+              description: Height of the generated image in pixels
+              schema:
+                type: integer
+                example: 512
+            X-Provider:
+              description: AI provider used for generation
+              schema:
+                type: string
+                example: "svgio"
+            X-Original-Prompt:
+              description: Original prompt provided by user (if available)
+              schema:
+                type: string
+                example: "A beautiful sunset over mountains"
+            X-Translated-Prompt:
+              description: Translated version of prompt (if translation was applied)
+              schema:
+                type: string
+                example: "A beautiful sunset over mountains"
+            X-Was-Translated:
+              description: Whether the prompt was automatically translated
+              schema:
+                type: string
+                example: "false"
+          content:
+            image/svg+xml:
+              schema:
+                type: string
+                format: binary
+                description: The generated SVG image content
+        "400":
+          description: Invalid request parameters.
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  error:
+                    type: string
+                    examples:
+                      - "prompt must be at least 3 characters"
+                      - "provider must be one of: svgio, recraft, openai"
+        "500":
+          description: Internal server error during image generation.
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  error:
+                    type: string
+                    examples:
+                      - "failed to generate SVG"
+
   /course:
     post:
       tags:
@@ -1979,6 +2119,135 @@ components:
           examples:
             - 0
 
+    GenerateImageParams:
+      type: object
+      required:
+        - prompt
+      properties:
+        prompt:
+          type: string
+          minLength: 3
+          description: The text prompt for image generation
+          examples:
+            - "A beautiful sunset over mountains"
+        negative_prompt:
+          type: string
+          description: Text describing what should not appear in the image
+          examples:
+            - "blurry, low quality"
+        style:
+          type: string
+          description: Style of the generated image
+          examples:
+            - "cartoon"
+            - "realistic"
+            - "sketch"
+        provider:
+          type: string
+          enum:
+            - svgio
+            - recraft
+            - openai
+          default: svgio
+          description: The AI provider to use for generation
+          examples:
+            - "svgio"
+        format:
+          type: string
+          description: Output format of the generated image
+          examples:
+            - "svg"
+            - "png"
+        skip_translate:
+          type: boolean
+          default: false
+          description: Whether to skip automatic prompt translation
+        model:
+          type: string
+          description: Specific model to use for generation
+          examples:
+            - "gpt-4"
+        size:
+          type: string
+          description: Size of the generated image
+          examples:
+            - "512x512"
+            - "1024x1024"
+        substyle:
+          type: string
+          description: Sub-style variant for the image
+          examples:
+            - "hand-drawn"
+        n:
+          type: integer
+          minimum: 1
+          description: Number of images to generate
+          examples:
+            - 1
+
+    ImageResponse:
+      type: object
+      properties:
+        id:
+          type: string
+          description: Unique identifier for the generated image
+          examples:
+            - "img_abc123"
+        svg_url:
+          type: string
+          format: uri
+          description: URL to access the generated SVG image
+          examples:
+            - "https://example.com/images/img_abc123.svg"
+        png_url:
+          type: string
+          format: uri
+          description: URL to access the PNG version of the image (if available)
+          examples:
+            - "https://example.com/images/img_abc123.png"
+        width:
+          type: integer
+          minimum: 1
+          description: Width of the generated image in pixels
+          examples:
+            - 512
+        height:
+          type: integer
+          minimum: 1
+          description: Height of the generated image in pixels
+          examples:
+            - 512
+        provider:
+          type: string
+          enum:
+            - svgio
+            - recraft
+            - openai
+          description: The AI provider used for generation
+          examples:
+            - "svgio"
+        original_prompt:
+          type: string
+          description: The original prompt provided by the user
+          examples:
+            - "A beautiful sunset over mountains"
+        translated_prompt:
+          type: string
+          description: The translated version of the prompt (if translation was applied)
+          examples:
+            - "A beautiful sunset over mountains"
+        was_translated:
+          type: boolean
+          description: Whether the prompt was automatically translated
+          examples:
+            - false
+        created_at:
+          type: string
+          format: date-time
+          description: Timestamp when the image was generated
+          examples:
+            - "2024-01-15T10:30:00Z"
+
     AIInteractionResponse:
       type: object
       properties:

From 8cc303cf60461000f8a832cf2a4bb3359b7c2e32 Mon Sep 17 00:00:00 2001
From: petezhuang <petezhuang13@163.com>
Date: Fri, 22 Aug 2025 10:27:54 +0800
Subject: [PATCH 36/49] refactor(spx-gui):event delegator

---
 .../editor/common/painter/painter.vue         | 179 ++++---------
 .../editor/common/painter/utils/delegator.ts  | 247 ++++++++++++++++++
 2 files changed, 302 insertions(+), 124 deletions(-)
 create mode 100644 spx-gui/src/components/editor/common/painter/utils/delegator.ts

diff --git a/spx-gui/src/components/editor/common/painter/painter.vue b/spx-gui/src/components/editor/common/painter/painter.vue
index f9680ae77..221571e86 100644
--- a/spx-gui/src/components/editor/common/painter/painter.vue
+++ b/spx-gui/src/components/editor/common/painter/painter.vue
@@ -239,6 +239,7 @@ import AiGenerate from './components/aigc/generator.vue'
 import SvgImporter from './utils/SvgImporter.vue'
 import { useSvgExporter } from './utils/svg-exporter'
 import ImageLoader from './utils/ImageLoader.vue'
+import { canvasEventDelegator,type ToolHandler } from './utils/delegator'
 
 // 工具类型
 type ToolType = 'line' | 'brush' | 'reshape' | 'eraser' | 'rectangle' | 'circle' | 'fill' | 'text'
@@ -256,6 +257,49 @@ const drawBrushRef = ref<InstanceType<typeof DrawBrush> | null>(null)
 const reshapeRef = ref<InstanceType<typeof Reshape> | null>(null)
 const svgImporterRef = ref<InstanceType<typeof SvgImporter> | null>(null)
 const imageLoaderRef = ref<InstanceType<typeof ImageLoader> | null>(null)
+
+
+//事件分发器
+const initEventDelegator = (): void => {
+  canvasEventDelegator.setToolRefs({
+    line: drawLineRef.value as ToolHandler,
+    brush: drawBrushRef.value as ToolHandler,
+    reshape: reshapeRef.value as ToolHandler,
+  })
+
+
+  canvasEventDelegator.setCurrentTool(currentTool.value)
+}
+
+// 选择工具
+const selectTool = (tool: ToolType): void => {
+  currentTool.value = tool
+  // 更新委托器的当前工具
+  canvasEventDelegator.setCurrentTool(tool)
+}
+
+const handleCanvasClick = (event: MouseEvent): void => {
+  console.log('handleCanvasClick')
+  canvasEventDelegator.delegateClick(event, canvasRef.value)
+}
+const handleMouseDown = (event: MouseEvent): void => {
+  canvasEventDelegator.delegateMouseDown(event, canvasRef.value)
+}
+
+const handleMouseMove = (event: MouseEvent): void => {
+  canvasEventDelegator.delegateMouseMove(event, canvasRef.value)
+}
+
+const handleCanvasMouseUp = (event: MouseEvent): void => {
+  canvasEventDelegator.delegateMouseUp(event, canvasRef.value)
+}
+
+const handleMouseUp = (): void => {
+  canvasEventDelegator.delegateGlobalMouseUp()
+}
+
+
+
 // 状态管理
 const allPaths = ref<paper.Path[]>([])
 
@@ -356,33 +400,6 @@ const initPaper = (): void => {
   paper.view.update()
 }
 
-// 选择工具
-const selectTool = (tool: ToolType): void => {
-  currentTool.value = tool
-  
-
-  if (drawLineRef.value) {
-    drawLineRef.value.resetDrawing()
-  }
-  
-
-  if (drawBrushRef.value) {
-    drawBrushRef.value.resetDrawing()
-  }
-  
-  // 切换工具时总是隐藏控制点
-  if (reshapeRef.value) {
-    reshapeRef.value.hideControlPoints()
-  }
-}
-
-// 处理直线创建
-//todo:逻辑迁移到draw_line组件内部
-// const handleLineCreated = (line: paper.Path): void => {
-//   allPaths.value.push(line)
-//   paper.view.update()
-//   exportSvgAndEmit()
-// }
 
 
 //painter提供allPath接口给直线组件
@@ -410,102 +427,6 @@ const handlePathsUpdate = (paths: paper.Path[]): void => {
 }
 
 
-// 鼠标按下事件
-const handleMouseDown = (event: MouseEvent): void => {
-  const rect = canvasRef.value?.getBoundingClientRect()
-  if (!rect) return
-  
-  const point = new paper.Point(
-    event.clientX - rect.left,
-    event.clientY - rect.top
-  )
-  
-  // 处理笔刷工具
-  if (currentTool.value === 'brush' && drawBrushRef.value) {
-    drawBrushRef.value.handleMouseDown({ x: point.x, y: point.y })
-    return
-  }
-  
-  // 处理变形工具
-  if (currentTool.value === 'reshape' && reshapeRef.value) {
-    reshapeRef.value.handleMouseDown(point)
-    return
-  }
-}
-
-// 画布点击事件
-const handleCanvasClick = (event: MouseEvent): void => {
-  const rect = canvasRef.value?.getBoundingClientRect()
-  if (!rect) return
-  
-  const point = new paper.Point(
-    event.clientX - rect.left,
-    event.clientY - rect.top
-  )
-  
-  if (currentTool.value === 'line') {
-    // 委托给 DrawLine 组件处理
-    if (drawLineRef.value) {
-      drawLineRef.value.handleCanvasClick({ x: point.x, y: point.y })
-    }
-  } else if (currentTool.value === 'reshape') {
-    // 委托给 Reshape 组件处理
-    if (reshapeRef.value) {
-      reshapeRef.value.handleClick(point)
-    }
-  }
-}
-
-// 鼠标移动事件
-const handleMouseMove = (event: MouseEvent): void => {
-  const rect = canvasRef.value?.getBoundingClientRect()
-  if (!rect) return
-  
-  const point = new paper.Point(
-    event.clientX - rect.left,
-    event.clientY - rect.top
-  )
-  
-  // 委托给 DrawLine 组件处理预览
-  if (currentTool.value === 'line' && drawLineRef.value) {
-    drawLineRef.value.handleMouseMove({ x: point.x, y: point.y })
-  }
-  
-  // 委托给 DrawBrush 组件处理拖拽
-  if (currentTool.value === 'brush' && drawBrushRef.value) {
-    drawBrushRef.value.handleMouseDrag({ x: point.x, y: point.y })
-  }
-  
-  // 委托给 Reshape 组件处理拖拽
-  if (currentTool.value === 'reshape' && reshapeRef.value) {
-    reshapeRef.value.handleMouseMove(point)
-  }
-}
-
-// 画布鼠标释放事件
-const handleCanvasMouseUp = (event: MouseEvent): void => {
-  const rect = canvasRef.value?.getBoundingClientRect()
-  if (!rect) return
-  
-  const point = new paper.Point(
-    event.clientX - rect.left,
-    event.clientY - rect.top
-  )
-  
-  // 处理笔刷工具
-  if (currentTool.value === 'brush' && drawBrushRef.value) {
-    drawBrushRef.value.handleMouseUp({ x: point.x, y: point.y })
-    return
-  }
-}
-
-// 全局鼠标释放事件（用于reshape工具）
-const handleMouseUp = (): void => {
-  if (currentTool.value === 'reshape' && reshapeRef.value) {
-    reshapeRef.value.handleMouseUp()
-  }
-}
-
 
 // 显示AI生成弹窗
 const showAiDialog = (): void => {
@@ -663,6 +584,15 @@ watch(
   },
   { immediate: true }
 )
+watch(currentTool, (newTool) => {
+  canvasEventDelegator.setCurrentTool(newTool)
+})
+
+// 监听工具引用变化，更新委托器
+watch([drawLineRef, drawBrushRef, reshapeRef], () => {
+  initEventDelegator()
+}, { deep: true })
+
 
 onMounted(() => {
   initPaper()
@@ -691,9 +621,10 @@ onMounted(() => {
   // 添加键盘和鼠标事件监听
   window.addEventListener('keydown', handleKeyDown)
   window.addEventListener('mouseup', handleMouseUp)
-  
+  initEventDelegator()
   // 清理函数
   onUnmounted(() => {
+    canvasEventDelegator.clearToolRefs()
     window.removeEventListener('keydown', handleKeyDown)
     window.removeEventListener('mouseup', handleMouseUp)
   })
diff --git a/spx-gui/src/components/editor/common/painter/utils/delegator.ts b/spx-gui/src/components/editor/common/painter/utils/delegator.ts
new file mode 100644
index 000000000..a2845c6c4
--- /dev/null
+++ b/spx-gui/src/components/editor/common/painter/utils/delegator.ts
@@ -0,0 +1,247 @@
+import paper from 'paper'
+
+// 工具类型定义
+export type ToolType = 'line' | 'brush' | 'reshape' | 'eraser' | 'rectangle' | 'circle' | 'fill' | 'text'
+
+// 事件类型定义
+export type EventType = 'click' | 'mousedown' | 'mousemove' | 'mouseup' | 'drag'
+
+// 点位置接口
+export interface Point {
+  x: number
+  y: number
+}
+
+// 工具处理器接口
+export interface ToolHandler {
+  handleCanvasClick?: (point: Point | paper.Point) => void
+  handleClick?: (point: Point | paper.Point) => void
+  handleMouseDown?: (point: Point | paper.Point) => void
+  handleMouseMove?: (point: Point | paper.Point) => void
+  handleMouseDrag?: (point: Point | paper.Point) => void
+  handleMouseUp?: (point: Point | paper.Point) => void
+}
+
+// 工具引用映射
+export interface ToolRefs {
+  line?: ToolHandler
+  brush?: ToolHandler
+  reshape?: ToolHandler
+  eraser?: ToolHandler
+  rectangle?: ToolHandler
+  circle?: ToolHandler
+  fill?: ToolHandler
+  text?: ToolHandler
+}
+
+/**
+ * 画布事件委托器
+ * 负责根据当前选中的工具和事件类型，将事件分发给对应的工具处理器
+ */
+export class CanvasEventDelegator {
+  private toolRefs: ToolRefs = {}
+  private currentTool: ToolType | null = null
+
+  /**
+   * 设置工具引用
+   */
+  setToolRefs(refs: ToolRefs): void {
+    this.toolRefs = refs
+  }
+
+  /**
+   * 设置当前工具
+   */
+  setCurrentTool(tool: ToolType | null): void {
+    this.currentTool = tool
+  }
+
+  /**
+   * 获取当前工具
+   */
+  getCurrentTool(): ToolType | null {
+    return this.currentTool
+  }
+
+  /**
+   * 将鼠标事件坐标转换为画布坐标
+   */
+  private getCanvasPoint(event: MouseEvent, canvasRef: HTMLCanvasElement | null): paper.Point | null {
+    if (!canvasRef) return null
+    
+    const rect = canvasRef.getBoundingClientRect()
+    return new paper.Point(
+      event.clientX - rect.left,
+      event.clientY - rect.top
+    )
+  }
+
+  /**
+   * 委托画布点击事件
+   */
+  delegateClick(event: MouseEvent, canvasRef: HTMLCanvasElement | null): void {
+    console.log('delegateClick', this.currentTool)
+    if (!this.currentTool) return
+    
+    const point = this.getCanvasPoint(event, canvasRef)
+    if (!point) return
+
+    const handler = this.toolRefs[this.currentTool]
+    if (!handler) return
+
+    // 优先调用 handleCanvasClick，如果不存在则调用 handleClick
+    if (handler.handleCanvasClick) {
+      // line 工具需要 {x, y} 格式
+      if (this.currentTool === 'line') {
+        handler.handleCanvasClick({ x: point.x, y: point.y })
+      } else {
+        handler.handleCanvasClick(point)
+      }
+    } else if (handler.handleClick) {
+      handler.handleClick(point)
+    }
+  }
+
+  /**
+   * 委托鼠标按下事件
+   */
+  delegateMouseDown(event: MouseEvent, canvasRef: HTMLCanvasElement | null): void {
+    if (!this.currentTool) return
+    
+    const point = this.getCanvasPoint(event, canvasRef)
+    if (!point) return
+
+    const handler = this.toolRefs[this.currentTool]
+    if (!handler?.handleMouseDown) return
+
+    // brush 工具需要 {x, y} 格式，其他工具使用 paper.Point
+    if (this.currentTool === 'brush') {
+      handler.handleMouseDown({ x: point.x, y: point.y })
+    } else {
+      handler.handleMouseDown(point)
+    }
+  }
+
+  /**
+   * 委托鼠标移动事件
+   */
+  delegateMouseMove(event: MouseEvent, canvasRef: HTMLCanvasElement | null): void {
+    if (!this.currentTool) return
+    
+    const point = this.getCanvasPoint(event, canvasRef)
+    if (!point) return
+
+    const handler = this.toolRefs[this.currentTool]
+    if (!handler) return
+
+    // 根据工具类型调用不同的处理方法
+    if (this.currentTool === 'line' && handler.handleMouseMove) {
+      handler.handleMouseMove({ x: point.x, y: point.y })
+    } else if (this.currentTool === 'brush' && handler.handleMouseDrag) {
+      handler.handleMouseDrag({ x: point.x, y: point.y })
+    } else if (this.currentTool === 'reshape' && handler.handleMouseMove) {
+      handler.handleMouseMove(point)
+    }
+  }
+
+  /**
+   * 委托鼠标释放事件
+   */
+  delegateMouseUp(event: MouseEvent, canvasRef: HTMLCanvasElement | null): void {
+    if (!this.currentTool) return
+    
+    const point = this.getCanvasPoint(event, canvasRef)
+    if (!point) return
+
+    const handler = this.toolRefs[this.currentTool]
+    if (!handler?.handleMouseUp) return
+
+    // brush 工具需要 {x, y} 格式
+    if (this.currentTool === 'brush') {
+      handler.handleMouseUp({ x: point.x, y: point.y })
+    } else {
+      handler.handleMouseUp(point)
+    }
+  }
+
+  /**
+   * 委托全局鼠标释放事件（不需要坐标）
+   */
+  delegateGlobalMouseUp(): void {
+    if (!this.currentTool) return
+    
+    const handler = this.toolRefs[this.currentTool]
+    if (!handler?.handleMouseUp) return
+
+    // reshape 工具的全局鼠标释放事件
+    if (this.currentTool === 'reshape') {
+      handler.handleMouseUp
+    }
+  }
+
+  /**
+   * 通用事件委托方法
+   * @param eventType 事件类型
+   * @param event 鼠标事件
+   * @param canvasRef 画布引用
+   */
+  delegate(eventType: EventType, event: MouseEvent, canvasRef: HTMLCanvasElement | null): void {
+    switch (eventType) {
+      case 'click':
+        this.delegateClick(event, canvasRef)
+        break
+      case 'mousedown':
+        this.delegateMouseDown(event, canvasRef)
+        break
+      case 'mousemove':
+        this.delegateMouseMove(event, canvasRef)
+        break
+      case 'mouseup':
+        this.delegateMouseUp(event, canvasRef)
+        break
+      default:
+        console.warn(`未支持的事件类型: ${eventType}`)
+    }
+  }
+
+  /**
+   * 检查工具是否支持特定事件
+   */
+  supportsEvent(tool: ToolType, eventType: EventType): boolean {
+    const handler = this.toolRefs[tool]
+    if (!handler) return false
+
+    switch (eventType) {
+      case 'click':
+        return !!(handler.handleCanvasClick || handler.handleClick)
+      case 'mousedown':
+        return !!handler.handleMouseDown
+      case 'mousemove':
+        return !!(handler.handleMouseMove || handler.handleMouseDrag)
+      case 'mouseup':
+        return !!handler.handleMouseUp
+      default:
+        return false
+    }
+  }
+
+  /**
+   * 获取所有支持的工具类型
+   */
+  getSupportedTools(): ToolType[] {
+    return Object.keys(this.toolRefs) as ToolType[]
+  }
+
+  /**
+   * 清除所有工具引用
+   */
+  clearToolRefs(): void {
+    this.toolRefs = {}
+  }
+}
+
+// 创建单例实例
+export const canvasEventDelegator = new CanvasEventDelegator()
+
+// 默认导出
+export default canvasEventDelegator
\ No newline at end of file

From 3ef70667d880134778432bacb7a86c705166ac47 Mon Sep 17 00:00:00 2001
From: AvenJi0320 <pychi0320@gmail.com>
Date: Fri, 22 Aug 2025 15:09:17 +0800
Subject: [PATCH 37/49] refactor(spx-gui): refact the import & export to the
 manager

---
 .../editor/common/painter/painter.vue         | 172 ++------
 .../common/painter/utils/ImageLoader.vue      |  43 --
 .../common/painter/utils/SvgImporter.vue      |  92 ----
 .../painter/utils/import-export-manager.ts    | 393 ++++++++++++++++++
 .../common/painter/utils/svg-exporter.ts      |  52 ---
 5 files changed, 430 insertions(+), 322 deletions(-)
 delete mode 100644 spx-gui/src/components/editor/common/painter/utils/ImageLoader.vue
 delete mode 100644 spx-gui/src/components/editor/common/painter/utils/SvgImporter.vue
 create mode 100644 spx-gui/src/components/editor/common/painter/utils/import-export-manager.ts
 delete mode 100644 spx-gui/src/components/editor/common/painter/utils/svg-exporter.ts

diff --git a/spx-gui/src/components/editor/common/painter/painter.vue b/spx-gui/src/components/editor/common/painter/painter.vue
index 221571e86..51eebf5fb 100644
--- a/spx-gui/src/components/editor/common/painter/painter.vue
+++ b/spx-gui/src/components/editor/common/painter/painter.vue
@@ -208,11 +208,6 @@
         :canvas-height="canvasHeight"
       />
       
-      <!-- SVG导入工具组件 -->
-      <SvgImporter ref="svgImporterRef" />
-      
-      <!-- 图片加载工具组件 -->
-      <ImageLoader ref="imageLoaderRef" />
     </div>
     
     <!-- AI生成弹窗 -->
@@ -236,15 +231,12 @@ import CircleTool from './components/circle_tool.vue'
 import FillTool from './components/fill_tool.vue'
 import TextTool from './components/text_tool.vue'
 import AiGenerate from './components/aigc/generator.vue'
-import SvgImporter from './utils/SvgImporter.vue'
-import { useSvgExporter } from './utils/svg-exporter'
-import ImageLoader from './utils/ImageLoader.vue'
 import { canvasEventDelegator,type ToolHandler } from './utils/delegator'
+import { createImportExportManager, type ImportExportManager } from './utils/import-export-manager'
 
 // 工具类型
 type ToolType = 'line' | 'brush' | 'reshape' | 'eraser' | 'rectangle' | 'circle' | 'fill' | 'text'
 
-
 // 响应式变量
 const canvasRef = ref<HTMLCanvasElement | null>(null)
 const canvasWidth = ref<number>(800)
@@ -255,9 +247,9 @@ const currentTool = ref<ToolType | null>(null)
 const drawLineRef = ref<InstanceType<typeof DrawLine> | null>(null)
 const drawBrushRef = ref<InstanceType<typeof DrawBrush> | null>(null)
 const reshapeRef = ref<InstanceType<typeof Reshape> | null>(null)
-const svgImporterRef = ref<InstanceType<typeof SvgImporter> | null>(null)
-const imageLoaderRef = ref<InstanceType<typeof ImageLoader> | null>(null)
 
+// 导入导出管理器
+let importExportManager: ImportExportManager | null = null
 
 //事件分发器
 const initEventDelegator = (): void => {
@@ -267,10 +259,25 @@ const initEventDelegator = (): void => {
     reshape: reshapeRef.value as ToolHandler,
   })
 
-
   canvasEventDelegator.setCurrentTool(currentTool.value)
 }
 
+// 初始化导入导出管理器
+const initImportExportManager = (): void => {
+  importExportManager = createImportExportManager({
+    canvasWidth,
+    canvasHeight,
+    canvasRef,
+    allPaths,
+    currentTool,
+    reshapeRef,
+    backgroundRect,
+    backgroundImage,
+    isImportingFromProps,
+    emit: (event: string, data: any) => emit(event as any, data)
+  })
+}
+
 // 选择工具
 const selectTool = (tool: ToolType): void => {
   currentTool.value = tool
@@ -298,11 +305,8 @@ const handleMouseUp = (): void => {
   canvasEventDelegator.delegateGlobalMouseUp()
 }
 
-
-
 // 状态管理
 const allPaths = ref<paper.Path[]>([])
-
 // 存储背景图片的引用
 const backgroundImage = ref<paper.Raster | null>(null)
 // 背景矩形（用于导出时隐藏）
@@ -313,7 +317,6 @@ const isImportingFromProps = ref<boolean>(false)
 const isFirstMount = ref<boolean>(true)
 // 保存当前选中的路径，用于导入后恢复控制点显示
 const selectedPathForRestore = ref<paper.Path | null>(null)
-
 // AI生成弹窗状态
 const aiDialogVisible = ref<boolean>(false)
 
@@ -326,58 +329,10 @@ const emit = defineEmits<{
   (e: 'svg-change', svg: string): void
 }>()
 
-
-// 加载位图图片到画布（PNG/JPG/...）
-const loadImageToCanvas = (imageSrc: string): void => {
-  if (imageLoaderRef.value) {
-    imageLoaderRef.value.loadImageToCanvas(imageSrc)
-  }
-}
-
 // 根据 url 自动判断并导入到画布（优先解析为 SVG，其次作为位图 Raster）
 const loadFileToCanvas = async (imageSrc: string): Promise<void> => {
-  if (!paper.project) return
-  try {
-    const resp = await fetch(imageSrc)
-    // 先尝试从响应体的 blob.type 判断（对 blob: URL 更可靠）
-    let isSvg = false
-    let svgText: string | null = null
-    try {
-      const blob = await resp.clone().blob()
-      if (blob && typeof blob.type === 'string' && blob.type.includes('image/svg')) {
-        isSvg = true
-        svgText = await blob.text()
-      }
-    } catch {}
-
-    // 退化到 header 判断
-    if (!isSvg) {
-      const contentType = resp.headers.get('content-type') || ''
-      if (contentType.includes('image/svg')) {
-        isSvg = true
-        svgText = await resp.clone().text()
-      }
-    }
-
-    // 最后尝试直接将文本解析为 SVG（针对部分 blob: 无类型场景）
-    if (!isSvg) {
-      try {
-        const text = await resp.clone().text()
-        if (/^\s*<svg[\s\S]*<\/svg>\s*$/i.test(text)) {
-          isSvg = true
-          svgText = text
-        }
-      } catch {}
-    }
-
-    if (isSvg && svgText != null) {
-      importSvgToCanvas(svgText)
-    } else {
-      loadImageToCanvas(imageSrc)
-    }
-  } catch {
-    // 回退策略：按位图处理
-    loadImageToCanvas(imageSrc)
+  if (importExportManager) {
+    await importExportManager.importFile(imageSrc)
   }
 }
 
@@ -400,8 +355,6 @@ const initPaper = (): void => {
   paper.view.update()
 }
 
-
-
 //painter提供allPath接口给直线组件
 const getAllPathsValue = (): paper.Path[] => {
   return allPaths.value
@@ -413,7 +366,6 @@ const setAllPathsValue = (paths: paper.Path[]): void => {
 provide('getAllPathsValue',getAllPathsValue)
 provide('setAllPathsValue',setAllPathsValue)
 
-
 // 处理笔刷路径创建
 const handlePathCreated = (path: paper.Path): void => {
   allPaths.value.push(path)
@@ -426,8 +378,6 @@ const handlePathsUpdate = (paths: paper.Path[]): void => {
   allPaths.value = paths
 }
 
-
-
 // 显示AI生成弹窗
 const showAiDialog = (): void => {
   aiDialogVisible.value = true
@@ -465,55 +415,24 @@ const handleAiCancel = (): void => {
 }
 
 // 导入PNG图片到画布
-const importImageToCanvas = (imageUrl: string): void => {
-  if (!paper.project) return
-  
-  const raster = new paper.Raster(imageUrl)
-  
-  raster.onLoad = () => {
-    raster.position = paper.view.center
-    
-    // 保持原始尺寸，不进行自动缩放
-    // 如果需要缩放，用户可以手动调整
-    
-    // 添加点击事件处理
-    // raster.onMouseDown = (event: paper.MouseEvent) => {
-    //   if (currentTool.value === 'reshape') {
-    //     selectPathExclusive(null) // 清除路径选择
-    //     raster.selected = true
-    //     paper.view.update()
-    //   }
-    // }
-
-    paper.view.update()
-    // console.log('PNG图片已导入到画布')
-
-    exportSvgAndEmit()
-  }
-  
-  raster.onError = () => {
-    console.error('failed to load image')
+const importImageToCanvas = async (imageUrl: string): Promise<void> => {
+  if (importExportManager) {
+    await importExportManager.importImage(imageUrl)
   }
 }
 
-// 导入SVG到画布并转换为可编辑的路径（通过SVG导入组件）
-const importSvgToCanvas = (svgContent: string): void => {
-  if (svgImporterRef.value) {
-    svgImporterRef.value.importSvgToCanvas(svgContent)
+// 导入SVG到画布并转换为可编辑的路径
+const importSvgToCanvas = async (svgContent: string): Promise<void> => {
+  if (importExportManager) {
+    await importExportManager.importSvg(svgContent)
   }
 }
 
 // 清空画布
 const clearCanvas = (): void => {
-  if (reshapeRef.value) {
-    reshapeRef.value.hideControlPoints()
+  if (importExportManager) {
+    importExportManager.clearCanvas()
   }
-  allPaths.value.forEach((path: paper.Path) => {
-    if (path && path.parent) {
-      path.remove()
-    }
-  })
-  allPaths.value = []
   
   // 清理选中路径状态
   selectedPathForRestore.value = null
@@ -527,21 +446,6 @@ const clearCanvas = (): void => {
   if (drawBrushRef.value) {
     drawBrushRef.value.resetDrawing()
   }
-  
-  paper.project.clear()
-  
-  // 重新创建背景
-  const background = new paper.Path.Rectangle({
-    point: [0, 0],
-    size: [canvasWidth.value, canvasHeight.value],
-    fillColor: 'transparent'
-  })
-  backgroundRect.value = background
-  
-  paper.view.update()
-
-  // 导出变更
-  exportSvgAndEmit()
 }
 
 // 监听props中的imgSrc变化
@@ -622,6 +526,7 @@ onMounted(() => {
   window.addEventListener('keydown', handleKeyDown)
   window.addEventListener('mouseup', handleMouseUp)
   initEventDelegator()
+  initImportExportManager()
   // 清理函数
   onUnmounted(() => {
     canvasEventDelegator.clearToolRefs()
@@ -630,21 +535,18 @@ onMounted(() => {
   })
 })
 
-// 导出当前画布为 SVG 并上报父组件
-const { exportSvgAndEmit } = useSvgExporter({
-  reshapeRef,
-  backgroundRect,
-  emit: (svg: string) => emit('svg-change', svg)
-})
+// 导出SVG的封装函数
+const exportSvgAndEmit = (): void => {
+  if (importExportManager) {
+    importExportManager.exportSvgAndEmit()
+  }
+}
 
 provide('currentTool', currentTool)
 provide('reshapeRef', reshapeRef)
 provide('backgroundRect', backgroundRect)
 provide('isImportingFromProps', isImportingFromProps)
 provide('exportSvgAndEmit', exportSvgAndEmit)
-
-// 为图片加载组件提供必要的依赖
-provide('backgroundImage', backgroundImage)
 </script>
 
 <style scoped>
diff --git a/spx-gui/src/components/editor/common/painter/utils/ImageLoader.vue b/spx-gui/src/components/editor/common/painter/utils/ImageLoader.vue
deleted file mode 100644
index 9ddc98fdf..000000000
--- a/spx-gui/src/components/editor/common/painter/utils/ImageLoader.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-  <div style="display: none;">
-    <!-- 隐藏的工具组件，只提供方法 -->
-  </div>
-</template>
-
-<script setup lang="ts">
-import { inject } from 'vue'
-import paper from 'paper'
-
-// 从父组件注入的背景图片状态
-const backgroundImage = inject<{ value: paper.Raster | null }>('backgroundImage')
-
-// 加载位图图片到画布（PNG/JPG/...）
-const loadImageToCanvas = (imageSrc: string): void => {
-  if (!paper.project) return
-  
-  // 如果已有背景图片，先移除
-  if (backgroundImage?.value) {
-    backgroundImage.value.remove()
-  }
-  
-  // 创建新的光栅图像
-  const raster = new paper.Raster(imageSrc)
-  
-  raster.onLoad = () => {
-    raster.position = paper.view.center
-    
-    // 将图片放到最底层，作为背景
-    raster.sendToBack()
-    
-    if (backgroundImage) {
-      backgroundImage.value = raster
-    }
-    paper.view.update()
-  }
-}
-
-// 暴露方法给父组件
-defineExpose({
-  loadImageToCanvas
-})
-</script>
\ No newline at end of file
diff --git a/spx-gui/src/components/editor/common/painter/utils/SvgImporter.vue b/spx-gui/src/components/editor/common/painter/utils/SvgImporter.vue
deleted file mode 100644
index 3c51f865b..000000000
--- a/spx-gui/src/components/editor/common/painter/utils/SvgImporter.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<template>
-  <div style="display: none;">
-    <!-- 隐藏的工具组件，只提供方法 -->
-  </div>
-</template>
-
-<script setup lang="ts">
-import { inject } from 'vue'
-import paper from 'paper'
-
-// 从父组件注入的接口
-const getAllPathsValue = inject<() => paper.Path[]>('getAllPathsValue')
-const setAllPathsValue = inject<(paths: paper.Path[]) => void>('setAllPathsValue')
-
-// 从父组件注入的其他必要方法和状态
-const currentTool = inject<{ value: string }>('currentTool')
-const reshapeRef = inject<{ value: any }>('reshapeRef')
-const isImportingFromProps = inject<{ value: boolean }>('isImportingFromProps')
-const exportSvgAndEmit = inject<() => void>('exportSvgAndEmit')
-
-// 导入SVG到画布并转换为可编辑的路径
-const importSvgToCanvas = (svgContent: string): void => {
-  if (!paper.project) return
-  
-  try {
-    // 创建一个临时的SVG元素来解析SVG内容
-    const parser = new DOMParser()
-    const svgDoc = parser.parseFromString(svgContent, 'image/svg+xml')
-    const svgElement = svgDoc.documentElement
-    
-    // 检查是否解析成功
-    if (svgElement.nodeName !== 'svg') {
-      console.error('invalid svg content')
-      return
-    }
-    
-    // 使用Paper.js导入SVG
-    const importedItem = paper.project.importSVG(svgElement as unknown as SVGElement)
-    
-    if (importedItem) {
-      importedItem.position = paper.view.center
-      
-      // 获取当前allPaths
-      const allPaths = getAllPathsValue?.() || []
-      
-      // 收集所有可编辑的路径
-      const collectPaths = (item: paper.Item): void => {
-        if (item instanceof paper.Path && item.segments && item.segments.length > 0) {
-          // 添加到可编辑路径列表
-          allPaths.push(item)
-          
-          // 添加鼠标事件处理
-          item.onMouseDown = () => {
-            if (currentTool?.value === 'reshape' && reshapeRef?.value) {
-              reshapeRef.value.showControlPoints(item)
-              paper.view.update()
-            }
-          }
-        } else if (item instanceof paper.Group || item instanceof paper.CompoundPath) {
-          // 递归处理子项
-          if (item.children) {
-            item.children.forEach(child => collectPaths(child))
-          }
-        }
-      }
-      
-      // 收集导入的所有路径
-      collectPaths(importedItem)
-      
-      // 更新allPaths
-      setAllPathsValue?.(allPaths)
-      
-      // 更新视图
-      paper.view.update()
-      
-      // 导入来源于 props 时不导出，避免循环
-      if (!isImportingFromProps?.value && exportSvgAndEmit) {
-        exportSvgAndEmit()
-      } else if (isImportingFromProps?.value) {
-        isImportingFromProps.value = false
-      }
-    }
-  } catch (error) {
-    console.error('failed to import svg:', error)
-  }
-}
-
-// 暴露方法给父组件
-defineExpose({
-  importSvgToCanvas
-})
-</script>
\ No newline at end of file
diff --git a/spx-gui/src/components/editor/common/painter/utils/import-export-manager.ts b/spx-gui/src/components/editor/common/painter/utils/import-export-manager.ts
new file mode 100644
index 000000000..bf22f19e1
--- /dev/null
+++ b/spx-gui/src/components/editor/common/painter/utils/import-export-manager.ts
@@ -0,0 +1,393 @@
+import paper from 'paper'
+import type { Ref } from 'vue'
+
+// 导入导出相关的接口定义
+export interface ImportExportDependencies {
+  // 画布相关
+  canvasWidth: Ref<number>
+  canvasHeight: Ref<number>
+  canvasRef: Ref<HTMLCanvasElement | null>
+  
+  // 路径管理
+  allPaths: Ref<paper.Path[]>
+  
+  // 工具和状态
+  currentTool: Ref<string | null>
+  reshapeRef: Ref<any>
+  backgroundRect: Ref<paper.Path | null>
+  backgroundImage: Ref<paper.Raster | null>
+  
+  // 状态标记
+  isImportingFromProps: Ref<boolean>
+  
+  // 回调函数
+  emit: (event: string, data: any) => void
+}
+
+export interface ImportOptions {
+  clearCanvas?: boolean
+  position?: 'center' | 'original'
+  updatePaths?: boolean
+  triggerExport?: boolean
+}
+
+export interface ExportOptions {
+  format?: 'svg' | 'png' | 'jpg'
+  embedImages?: boolean
+  bounds?: paper.Rectangle
+  quality?: number
+}
+
+/**
+ * 画布导入导出管理器
+ * 统一管理SVG、图片的导入导出操作
+ */
+export class ImportExportManager {
+  private dependencies: ImportExportDependencies
+
+  constructor(dependencies: ImportExportDependencies) {
+    this.dependencies = dependencies
+  }
+
+  /**
+   * 导出当前画布为SVG
+   */
+  exportSvg(options: ExportOptions = {}): string | null {
+    const { 
+      embedImages = true, 
+      bounds = paper.view.bounds 
+    } = options
+
+    if (!paper.project) {
+      console.warn('Paper project not initialized')
+      return null
+    }
+
+    try {
+      // 隐藏控制点和背景，避免导出到SVG中
+      this.hideControlPointsForExport()
+      const prevVisible = this.hideBackgroundForExport()
+
+      const svgStr = paper.project.exportSVG({ 
+        asString: true, 
+        embedImages,
+        bounds
+      }) as string
+
+      // 恢复背景可见性
+      this.restoreBackgroundAfterExport(prevVisible)
+
+      return svgStr
+    } catch (error) {
+      console.error('Failed to export SVG:', error)
+      return null
+    }
+  }
+
+  /**
+   * 导出SVG并触发事件
+   */
+  exportSvgAndEmit(options: ExportOptions = {}): void {
+    const svgStr = this.exportSvg(options)
+    if (svgStr) {
+      this.dependencies.emit('svg-change', svgStr)
+    }
+  }
+
+  /**
+   * 导入SVG到画布
+   */
+  async importSvg(svgContent: string, options: ImportOptions = {}): Promise<boolean> {
+    const {
+      clearCanvas = false,
+      position = 'center',
+      updatePaths = true,
+      triggerExport = true
+    } = options
+
+    if (!paper.project) {
+      console.warn('Paper project not initialized')
+      return false
+    }
+
+    try {
+      if (clearCanvas) {
+        this.clearCanvas(false) // 清空但不触发导出
+      }
+
+      // 解析SVG内容
+      const parser = new DOMParser()
+      const svgDoc = parser.parseFromString(svgContent, 'image/svg+xml')
+      const svgElement = svgDoc.documentElement
+
+      if (svgElement.nodeName !== 'svg') {
+        console.error('Invalid SVG content')
+        return false
+      }
+
+      // 导入SVG到Paper.js
+      const importedItem = paper.project.importSVG(svgElement as unknown as SVGElement)
+      
+      if (!importedItem) {
+        console.error('Failed to import SVG')
+        return false
+      }
+
+      // 设置位置
+      if (position === 'center') {
+        importedItem.position = paper.view.center
+      }
+
+      // 收集可编辑路径
+      if (updatePaths) {
+        this.collectPathsFromImport(importedItem)
+      }
+
+      paper.view.update()
+
+      // 触发导出（避免循环导入）
+      if (triggerExport && !this.dependencies.isImportingFromProps.value) {
+        this.exportSvgAndEmit()
+      }
+
+      return true
+    } catch (error) {
+      console.error('Failed to import SVG:', error)
+      return false
+    }
+  }
+
+  /**
+   * 导入图片（PNG/JPG等）到画布
+   */
+  async importImage(imageSrc: string, options: ImportOptions = {}): Promise<boolean> {
+    const {
+      position = 'center',
+      triggerExport = true
+    } = options
+
+    if (!paper.project) {
+      console.warn('Paper project not initialized')
+      return false
+    }
+
+    return new Promise((resolve) => {
+      // 清除现有背景图片
+      if (this.dependencies.backgroundImage.value) {
+        try {
+          this.dependencies.backgroundImage.value.remove()
+        } catch (error) {
+          console.warn('Error removing previous background image:', error)
+        }
+        this.dependencies.backgroundImage.value = null
+      }
+
+      // 创建新的光栅图像
+      const raster = new paper.Raster(imageSrc)
+      
+      raster.onLoad = () => {
+        try {
+          if (position === 'center') {
+            raster.position = paper.view.center
+          }
+          
+          // 将图片放到最底层作为背景
+          raster.sendToBack()
+          
+          // 更新背景图片引用
+          this.dependencies.backgroundImage.value = raster
+          
+          paper.view.update()
+
+          if (triggerExport) {
+            this.exportSvgAndEmit()
+          }
+
+          resolve(true)
+        } catch (error) {
+          console.error('Error processing loaded image:', error)
+          resolve(false)
+        }
+      }
+
+      raster.onError = () => {
+        console.error('Failed to load image:', imageSrc)
+        resolve(false)
+      }
+    })
+  }
+
+  /**
+   * 根据URL自动判断文件类型并导入
+   */
+  async importFile(fileUrl: string, options: ImportOptions = {}): Promise<boolean> {
+    try {
+      const response = await fetch(fileUrl)
+      
+      // 尝试判断是否为SVG
+      let isSvg = false
+      let content: string | null = null
+
+      // 方法1: 通过blob类型判断
+      try {
+        const blob = await response.clone().blob()
+        if (blob?.type?.includes('image/svg')) {
+          isSvg = true
+          content = await blob.text()
+        }
+      } catch {}
+
+      // 方法2: 通过响应头判断
+      if (!isSvg) {
+        const contentType = response.headers.get('content-type') || ''
+        if (contentType.includes('image/svg')) {
+          isSvg = true
+          content = await response.clone().text()
+        }
+      }
+
+      // 方法3: 尝试解析文本内容
+      if (!isSvg) {
+        try {
+          const text = await response.clone().text()
+          if (/^\s*<svg[\s\S]*<\/svg>\s*$/i.test(text)) {
+            isSvg = true
+            content = text
+          }
+        } catch {}
+      }
+
+      // 根据类型导入
+      if (isSvg && content) {
+        return await this.importSvg(content, options)
+      } else {
+        return await this.importImage(fileUrl, options)
+      }
+    } catch (error) {
+      console.error('Failed to import file:', error)
+      // 回退到图片导入
+      return await this.importImage(fileUrl, options)
+    }
+  }
+
+  /**
+   * 清空画布
+   */
+  clearCanvas(triggerExport: boolean = true): void {
+    if (!paper.project) return
+
+    try {
+      // 隐藏控制点
+      this.hideControlPointsForExport()
+
+      // 移除所有路径
+      this.dependencies.allPaths.value.forEach((path: paper.Path) => {
+        if (path && path.parent) {
+          path.remove()
+        }
+      })
+      this.dependencies.allPaths.value = []
+
+      // 清空项目
+      paper.project.clear()
+
+      // 重新创建背景
+      this.createBackground()
+
+      // 重置状态
+      this.resetToolStates()
+
+      paper.view.update()
+
+      if (triggerExport) {
+        this.exportSvgAndEmit()
+      }
+    } catch (error) {
+      console.error('Failed to clear canvas:', error)
+    }
+  }
+
+  /**
+   * 创建画布背景
+   */
+  private createBackground(): void {
+    const background = new paper.Path.Rectangle({
+      point: [0, 0],
+      size: [this.dependencies.canvasWidth.value, this.dependencies.canvasHeight.value],
+      fillColor: 'transparent'
+    })
+    this.dependencies.backgroundRect.value = background
+  }
+
+  /**
+   * 重置工具状态
+   */
+  private resetToolStates(): void {
+    // 通过reshape引用重置
+    if (this.dependencies.reshapeRef.value?.resetDrawing) {
+      this.dependencies.reshapeRef.value.resetDrawing()
+    }
+  }
+
+  /**
+   * 从导入的项目中收集可编辑路径
+   */
+  private collectPathsFromImport(item: paper.Item): void {
+    const allPaths = this.dependencies.allPaths.value
+
+    const collectPaths = (item: paper.Item): void => {
+      if (item instanceof paper.Path && item.segments && item.segments.length > 0) {
+        allPaths.push(item)
+        
+        // 添加鼠标事件处理
+        item.onMouseDown = () => {
+          if (this.dependencies.currentTool.value === 'reshape' && this.dependencies.reshapeRef.value) {
+            this.dependencies.reshapeRef.value.showControlPoints(item)
+            paper.view.update()
+          }
+        }
+      } else if (item instanceof paper.Group || item instanceof paper.CompoundPath) {
+        if (item.children) {
+          item.children.forEach(child => collectPaths(child))
+        }
+      }
+    }
+
+    collectPaths(item)
+  }
+
+  /**
+   * 导出前隐藏控制点
+   */
+  private hideControlPointsForExport(): void {
+    if (this.dependencies.reshapeRef.value?.hideControlPoints) {
+      this.dependencies.reshapeRef.value.hideControlPoints()
+    }
+  }
+
+  /**
+   * 导出前隐藏背景
+   */
+  private hideBackgroundForExport(): boolean {
+    const prevVisible = this.dependencies.backgroundRect.value?.visible ?? true
+    if (this.dependencies.backgroundRect.value) {
+      this.dependencies.backgroundRect.value.visible = false
+    }
+    return prevVisible
+  }
+
+  /**
+   * 导出后恢复背景
+   */
+  private restoreBackgroundAfterExport(prevVisible: boolean): void {
+    if (this.dependencies.backgroundRect.value) {
+      this.dependencies.backgroundRect.value.visible = prevVisible
+    }
+  }
+
+}
+
+// 创建单例实例
+export const createImportExportManager = (dependencies: ImportExportDependencies): ImportExportManager => {
+  return new ImportExportManager(dependencies)
+}
\ No newline at end of file
diff --git a/spx-gui/src/components/editor/common/painter/utils/svg-exporter.ts b/spx-gui/src/components/editor/common/painter/utils/svg-exporter.ts
deleted file mode 100644
index 86c917d8a..000000000
--- a/spx-gui/src/components/editor/common/painter/utils/svg-exporter.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import type { Ref } from 'vue'
-import paper from 'paper'
-
-// 定义依赖接口
-interface SvgExportDependencies {
-  reshapeRef: Ref<any> | null
-  backgroundRect: Ref<paper.Path | null>
-  emit: (svg: string) => void
-}
-
-// 导出SVG功能的组合式函数
-export const useSvgExporter = (dependencies: SvgExportDependencies) => {
-  const { reshapeRef, backgroundRect, emit } = dependencies
-
-  // 导出当前画布为 SVG 并上报父组件
-  const exportSvgAndEmit = (): void => {
-    // console.log('exportSvgAndEmit 被调用')
-    if (!paper.project) {
-      // paper.project does not exist
-      return
-    }
-    
-    // 在导出SVG之前隐藏所有控制点，避免控制点被包含在SVG中
-    if (reshapeRef?.value) {
-      reshapeRef.value.hideControlPoints()
-    }
-    
-    const prevVisible = backgroundRect.value?.visible ?? true
-    if (backgroundRect.value) backgroundRect.value.visible = false
-    try {
-      // 导出SVG时保持原始尺寸和viewBox
-      const svgStr = (paper.project as any).exportSVG({ 
-        asString: true, 
-        embedImages: true,
-        bounds: paper.view.bounds // 使用视图边界确保尺寸正确
-      }) as string
-      // console.log('exported svg length:', svgStr?.length)
-      if (typeof svgStr === 'string') {
-        // console.log('send svg-change event')
-        emit(svgStr)
-      }
-    } catch (e) {
-      console.error('failed to export svg:', e)
-    } finally {
-      if (backgroundRect.value) backgroundRect.value.visible = prevVisible
-    }
-  }
-
-  return {
-    exportSvgAndEmit
-  }
-}
\ No newline at end of file

From 4ed9aba268eb483a9826bbce7791e3d933f04c1b Mon Sep 17 00:00:00 2001
From: spf7000 <y7000p@163.com>
Date: Fri, 22 Aug 2025 15:48:38 +0800
Subject: [PATCH 38/49] feat: add network image URL support with proper SVG
 handling

---
 spx-algorithm/project/requirements.txt | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/spx-algorithm/project/requirements.txt b/spx-algorithm/project/requirements.txt
index a3bccb894..d6b3d43ee 100644
--- a/spx-algorithm/project/requirements.txt
+++ b/spx-algorithm/project/requirements.txt
@@ -9,6 +9,9 @@ open_clip_torch>=2.20.0
 Pillow>=9.5.0
 numpy==1.24.0
 
+# HTTP客户端
+requests>=2.31.0
+
 # SVG处理
 cairosvg>=2.7.0
 

From bcc74f4a25b5d00435db63de777488198187fd16 Mon Sep 17 00:00:00 2001
From: spf7000 <y7000p@163.com>
Date: Fri, 22 Aug 2025 15:30:25 +0800
Subject: [PATCH 39/49] Fix: fix function search_with_urls_example

---
 spx-algorithm/client/simple_client.py         |  10 +-
 spx-algorithm/project/app/__init__.py         |  19 ++-
 spx-algorithm/project/app/api/routes.py       |   8 +-
 .../app/services/image_search_service.py      | 138 ++++++++++++++----
 spx-algorithm/project/run.py                  |   3 +-
 spx-algorithm/project/tests/test_api.py       |   2 +-
 6 files changed, 143 insertions(+), 37 deletions(-)

diff --git a/spx-algorithm/client/simple_client.py b/spx-algorithm/client/simple_client.py
index 3dfc78728..15c40530d 100644
--- a/spx-algorithm/client/simple_client.py
+++ b/spx-algorithm/client/simple_client.py
@@ -51,12 +51,14 @@ def search_with_urls_example():
     url = "http://localhost:5000/api/search/url"
     
     data = {
-        "text": "beautiful sunset",
+        "text": "a cute cat",
         "image_urls": [
-            "https://via.placeholder.com/300x200.png?text=Image1",
-            "https://via.placeholder.com/300x200.png?text=Image2"
+            "https://svgsilh.com/svg/1801287.svg",
+            "https://svgsilh.com/svg/1790711.svg",
+            "https://svgsilh.com/svg/1300187.svg",
+            "https://svgsilh.com/svg/1295198-e91e63.svg"
         ],
-        "top_k": 2
+        "top_k": 4
     }
     
     try:
diff --git a/spx-algorithm/project/app/__init__.py b/spx-algorithm/project/app/__init__.py
index f9727a174..3b726903c 100644
--- a/spx-algorithm/project/app/__init__.py
+++ b/spx-algorithm/project/app/__init__.py
@@ -17,9 +17,24 @@ def create_app(config_name='default'):
     os.makedirs(app.config['LOG_FOLDER'], exist_ok=True)
     
     # Configure logging
+    if not os.path.exists('logs'):
+        os.mkdir('logs')
+    
+    # Setup console handler for debug mode
+    if app.debug:
+        console_handler = logging.StreamHandler()
+        console_handler.setFormatter(logging.Formatter(
+            '%(asctime)s %(levelname)s: %(message)s [in %(name)s:%(lineno)d]'
+        ))
+        console_handler.setLevel(logging.INFO)
+        
+        # Set root logger level to INFO
+        root_logger = logging.getLogger()
+        root_logger.setLevel(logging.INFO)
+        root_logger.addHandler(console_handler)
+    
+    # Setup file handler for production
     if not app.debug and not app.testing:
-        if not os.path.exists('logs'):
-            os.mkdir('logs')
         file_handler = RotatingFileHandler(
             os.path.join(app.config['LOG_FOLDER'], 'app.log'),
             maxBytes=10240000, backupCount=10
diff --git a/spx-algorithm/project/app/api/routes.py b/spx-algorithm/project/app/api/routes.py
index 72fa32b16..507188612 100644
--- a/spx-algorithm/project/app/api/routes.py
+++ b/spx-algorithm/project/app/api/routes.py
@@ -1,9 +1,9 @@
-from flask import Blueprint, request, jsonify, current_app
-from werkzeug.utils import secure_filename
+import logging
 import os
 import uuid
-from typing import List
-import logging
+
+from flask import Blueprint, request, jsonify, current_app
+from werkzeug.utils import secure_filename
 
 from ..services.image_search_service import ImageSearchService
 
diff --git a/spx-algorithm/project/app/services/image_search_service.py b/spx-algorithm/project/app/services/image_search_service.py
index 4e9c1ed47..895c0e476 100644
--- a/spx-algorithm/project/app/services/image_search_service.py
+++ b/spx-algorithm/project/app/services/image_search_service.py
@@ -1,12 +1,14 @@
-import open_clip
-import torch
-from PIL import Image
-import numpy as np
-import cairosvg
 import io
+import logging
 import os
 from typing import List, Dict, Any, Optional
-import logging
+from urllib.parse import urlparse
+
+import cairosvg
+import open_clip
+import requests
+import torch
+from PIL import Image
 
 logger = logging.getLogger(__name__)
 
@@ -43,37 +45,123 @@ def _load_model(self):
             logger.error(f"模型加载失败: {e}")
             raise
     
-    def _process_image(self, image_path: str) -> Optional[torch.Tensor]:
+    def _process_image(self, image_source: str) -> Optional[torch.Tensor]:
         """
-        处理单张图片
+        处理单张图片，支持本地路径和网络URL
         
         Args:
-            image_path: 图片路径
+            image_source: 图片路径或URL
             
         Returns:
             处理后的图片张量，失败返回None
         """
         try:
-            # 检查文件是否存在
-            if not os.path.exists(image_path):
-                logger.warning(f"图片文件不存在: {image_path}")
-                return None
-            
-            # 根据文件扩展名选择处理方式
-            _, ext = os.path.splitext(image_path.lower())
+            # 判断是否为网络URL
+            parsed = urlparse(image_source)
+            is_url = bool(parsed.scheme and parsed.netloc)
             
-            if ext == '.svg':
-                # 处理SVG文件
-                png_data = cairosvg.svg2png(url=image_path, output_width=224, output_height=224)
-                image = Image.open(io.BytesIO(png_data))
+            if is_url:
+                # 处理网络图片
+                headers = {
+                    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36',
+                    'Accept': 'image/*, */*',
+                    'Accept-Language': 'en-US,en;q=0.9',
+                    'Accept-Encoding': 'gzip, deflate, br',
+                    'Connection': 'keep-alive'
+                }
+                response = requests.get(image_source, headers=headers, timeout=10)
+                response.raise_for_status()
+                
+                # 从Content-Type或URL判断是否为SVG
+                content_type = response.headers.get('content-type', '').lower()
+                is_svg = 'svg' in content_type or image_source.lower().endswith('.svg')
+                
+                logger.info(f"处理网络图片: {image_source}")
+                logger.info(f"Content-Type: {content_type}")
+                logger.info(f"Content-Length: {len(response.content)}")
+                
+                if is_svg:
+                    # 处理网络SVG
+                    if len(response.content) == 0:
+                        logger.info(f"SVG文件内容为空: {image_source}")
+                        return None
+                    # 添加白色背景，避免透明导致的问题
+                    png_data = cairosvg.svg2png(
+                        bytestring=response.content, 
+                        output_width=224, 
+                        output_height=224,
+                        background_color='white'
+                    )
+                    image = Image.open(io.BytesIO(png_data)).convert('RGB')
+                else:
+                    # 处理其他格式网络图片
+                    if len(response.content) == 0:
+                        logger.error(f"图片文件内容为空: {image_source}")
+                        return None
+                    image = Image.open(io.BytesIO(response.content)).convert('RGB')
+                
+                logger.info(f"图片尺寸: {image.size}, 模式: {image.mode}")
+                
+                # 可选：保存调试图片（取消注释来启用）
+                # debug_path = f"debug_{hash(image_source) % 10000}.png"
+                # image.save(debug_path)
+                # logger.debug(f"调试图片已保存: {debug_path}")
             else:
-                # 处理其他格式图片
-                image = Image.open(image_path).convert('RGB')
+                # 处理本地文件
+                if not os.path.exists(image_source):
+                    logger.warning(f"图片文件不存在: {image_source}")
+                    return None
+                
+                logger.info(f"处理本地图片: {image_source}")
+                
+                # 根据文件扩展名选择处理方式
+                _, ext = os.path.splitext(image_source.lower())
+                
+                if ext == '.svg':
+                    # 处理本地SVG文件
+                    png_data = cairosvg.svg2png(
+                        url=image_source, 
+                        output_width=224, 
+                        output_height=224,
+                        background_color='white'
+                    )
+                    image = Image.open(io.BytesIO(png_data)).convert('RGB')
+                else:
+                    # 处理本地其他格式图片
+                    image = Image.open(image_source).convert('RGB')
+                
+                logger.info(f"本地图片尺寸: {image.size}, 模式: {image.mode}")
+            
+            # 预处理前保存原始图片信息
+            logger.info(f"预处理前图片: {image.size}, 模式: {image.mode}")
+            
+            # 检查图片是否为空或全黑/全白
+            import numpy as np
+            img_array = np.array(image)
+            logger.info(f"图片数组形状: {img_array.shape}")
+            logger.info(f"图片像素值范围: min={img_array.min()}, max={img_array.max()}, mean={img_array.mean():.2f}")
+            
+            # 检查图片是否为纯色
+            unique_colors = len(np.unique(img_array.reshape(-1, img_array.shape[-1]), axis=0))
+            logger.info(f"图片唯一颜色数量: {unique_colors}")
+            
+            # 如果图片是纯色或颜色过少，可能有问题
+            if unique_colors < 5:
+                logger.warning(f"图片颜色过少 ({unique_colors})，可能是空白图片")
+            
+            # 确保图片转换为RGB模式
+            if image.mode != 'RGB':
+                logger.info(f"转换图片模式从 {image.mode} 到 RGB")
+                image = image.convert('RGB')
+            
+            processed_tensor = self.preprocess(image)
+            logger.info(f"预处理后张量形状: {processed_tensor.shape}")
+            logger.info(f"预处理后张量统计: min={processed_tensor.min().item():.4f}, max={processed_tensor.max().item():.4f}, mean={processed_tensor.mean().item():.4f}")
             
-            return self.preprocess(image)
+            return processed_tensor
             
         except Exception as e:
-            logger.error(f"处理图片失败 {image_path}: {e}")
+            logger.error(f"处理图片失败 {image_source}: {e}")
             return None
     
     def search_images(self, text_query: str, image_paths: List[str], top_k: Optional[int] = None) -> List[Dict[str, Any]]:
@@ -82,7 +170,7 @@ def search_images(self, text_query: str, image_paths: List[str], top_k: Optional
         
         Args:
             text_query: 查询文本
-            image_paths: 图片路径列表
+            image_paths: 图片路径列表（支持本地路径和网络URL）
             top_k: 返回前k张图片，None则返回所有
             
         Returns:
diff --git a/spx-algorithm/project/run.py b/spx-algorithm/project/run.py
index f1f4c9bae..23614f51a 100644
--- a/spx-algorithm/project/run.py
+++ b/spx-algorithm/project/run.py
@@ -27,5 +27,6 @@
     app.run(
         host=host,
         port=port,
-        debug=app.config['DEBUG']
+        debug=app.config['DEBUG'],
+        use_reloader=False
     )
\ No newline at end of file
diff --git a/spx-algorithm/project/tests/test_api.py b/spx-algorithm/project/tests/test_api.py
index 3b1698876..ed3e53e5c 100644
--- a/spx-algorithm/project/tests/test_api.py
+++ b/spx-algorithm/project/tests/test_api.py
@@ -1,7 +1,7 @@
 import pytest
 import json
 import os
-from app import create_app
+from .. import create_app
 
 
 @pytest.fixture

From ccbb1a58c7aa7acaca9e259cc437c4ed9ad8c8f7 Mon Sep 17 00:00:00 2001
From: linjc <linjc040204@outlook.com>
Date: Fri, 22 Aug 2025 15:51:57 +0800
Subject: [PATCH 40/49]  docs(spx-backend): add documatation for database
 design

---
 spx-backend/docs/DATABASE_DESIGN.md | 135 ++++++++++++++++++++++++++++
 1 file changed, 135 insertions(+)
 create mode 100644 spx-backend/docs/DATABASE_DESIGN.md

diff --git a/spx-backend/docs/DATABASE_DESIGN.md b/spx-backend/docs/DATABASE_DESIGN.md
new file mode 100644
index 000000000..f06eb663f
--- /dev/null
+++ b/spx-backend/docs/DATABASE_DESIGN.md
@@ -0,0 +1,135 @@
+# 数据库表设计文档
+
+## 概述
+
+本文档描述了 SPX Backend 中新增的 AI 资源管理相关数据库表设计。这些表主要用于管理 AI 生成的资源（如 SVG 图像）及其标签分类系统。
+
+## 表结构设计
+
+### 1. AI 资源表 (aiResource)
+
+**表名**: `aiResource`  
+**描述**: 存储 AI 生成的资源信息，主要是 SVG 图像资源
+
+| 字段名 | 数据类型 | 约束 | 描述 |
+|--------|----------|------|------|
+| id | bigint | PRIMARY KEY, AUTO_INCREMENT | 主键，资源唯一标识 |
+| url | varchar | NOT NULL | 资源访问 URL |
+| created_at | timestamp | NOT NULL | 创建时间 |
+| updated_at | timestamp | NOT NULL | 更新时间 |
+| deleted_at | timestamp | INDEX | 软删除时间戳 |
+
+**特性**:
+- 继承自基础 Model 结构，包含标准的时间戳字段和软删除支持
+- 支持通过多对多关系与标签关联
+- URL 字段存储资源的访问地址（可能是文件路径或云存储 URL）
+
+### 2. 标签表 (label)
+
+**表名**: `label`  
+**描述**: 存储用于分类 AI 资源的标签信息
+
+| 字段名 | 数据类型 | 约束 | 描述 |
+|--------|----------|------|------|
+| id | bigint | PRIMARY KEY, AUTO_INCREMENT | 主键，标签唯一标识 |
+| labelName | varchar(50) | UNIQUE, NOT NULL | 标签名称，唯一约束 |
+| created_at | timestamp | NOT NULL | 创建时间 |
+| updated_at | timestamp | NOT NULL | 更新时间 |
+| deleted_at | timestamp | INDEX | 软删除时间戳 |
+
+**特性**:
+- 标签名称具有唯一性约束，防止重复标签
+- 限制标签名称长度为 50 字符
+- 支持通过多对多关系与 AI 资源关联
+
+### 3. 资源标签关联表 (resource_label)
+
+**表名**: `resource_label`  
+**描述**: AI 资源与标签的多对多关联表
+
+| 字段名 | 数据类型 | 约束 | 描述 |
+|--------|----------|------|------|
+| id | bigint | PRIMARY KEY, AUTO_INCREMENT | 主键，关联记录唯一标识 |
+| aiResourceId | bigint | NOT NULL, INDEX, FOREIGN KEY | 外键，引用 aiResource 表的 id |
+| labelId | bigint | NOT NULL, INDEX, FOREIGN KEY | 外键，引用 label 表的 id |
+| created_at | timestamp | NOT NULL | 创建时间 |
+| updated_at | timestamp | NOT NULL | 更新时间 |
+| deleted_at | timestamp | INDEX | 软删除时间戳 |
+
+**外键关系**:
+- `aiResourceId` → `aiResource.id`
+- `labelId` → `label.id`
+
+**索引设计**:
+- `aiResourceId` 字段建立索引，优化基于资源查询标签的性能
+- `labelId` 字段建立索引，优化基于标签查询资源的性能
+- `deleted_at` 字段建立索引，支持软删除查询优化
+
+## 关系模型
+
+```
+aiResource (1) ←→ (N) resource_label (N) ←→ (1) label
+```
+
+这是一个典型的多对多关系设计：
+- 一个 AI 资源可以有多个标签
+- 一个标签可以被多个 AI 资源使用
+- 通过中间表 `resource_label` 实现多对多关联
+
+## 数据库特性
+
+### 软删除支持
+所有表都支持软删除功能：
+- 使用 `deleted_at` 字段标记删除状态
+- 查询时自动过滤已删除记录
+- 支持数据恢复
+
+### 时间戳审计
+每个表都包含完整的时间戳字段：
+- `created_at`: 记录创建时间
+- `updated_at`: 记录最后更新时间
+- `deleted_at`: 软删除时间（为 NULL 表示未删除）
+
+### 索引优化
+- 主键自动建立聚簇索引
+- 外键字段建立普通索引，优化关联查询
+- `deleted_at` 字段建立索引，优化软删除查询
+- 标签名称的唯一索引确保数据一致性
+
+## 使用场景
+
+### 1. AI 资源管理
+- 存储 SVG 图像生成结果
+- 记录资源的访问 URL
+- 支持资源的软删除和恢复
+
+### 2. 标签分类系统
+- 为 AI 资源打标签进行分类
+- 支持多维度标签组合
+- 便于资源的检索和过滤
+
+### 3. 查询优化
+- 通过标签快速筛选相关资源
+- 通过资源查看所有关联标签
+- 支持复杂的标签组合查询
+
+## 扩展性考虑
+
+### 1. 字段扩展
+- AI 资源表可以根据需要添加更多元数据字段（如尺寸、格式等）
+- 标签表可以添加描述、颜色、图标等字段
+
+### 2. 关系扩展
+- 可以为关联表添加权重字段，支持标签重要性排序
+- 可以添加标签层级关系，支持标签树形结构
+
+### 3. 性能优化
+- 根据查询模式可以添加复合索引
+- 考虑分表策略应对大数据量场景
+
+## 注意事项
+
+1. **数据一致性**: 删除标签时需要考虑关联资源的处理策略
+2. **性能监控**: 需要监控多对多查询的性能，必要时进行索引优化
+3. **数据清理**: 定期清理软删除的数据，避免表空间过度膨胀
+4. **权限控制**: 考虑用户权限，确保资源访问的安全性
\ No newline at end of file

From 50ca86bf834eb66e56591d5edd6364c8fe3f89bb Mon Sep 17 00:00:00 2001
From: petezhuang <petezhuang13@163.com>
Date: Mon, 25 Aug 2025 11:35:07 +0800
Subject: [PATCH 41/49] refactor(spx-gui):decoupling all tool components

---
 .../common/painter/components/draw_brush.vue  | 22 ++++++++-------
 .../common/painter/components/reshape.vue     | 27 ++++++++++++-------
 .../editor/common/painter/painter.vue         | 14 ----------
 3 files changed, 30 insertions(+), 33 deletions(-)

diff --git a/spx-gui/src/components/editor/common/painter/components/draw_brush.vue b/spx-gui/src/components/editor/common/painter/components/draw_brush.vue
index 16169b368..8fa7abae5 100644
--- a/spx-gui/src/components/editor/common/painter/components/draw_brush.vue
+++ b/spx-gui/src/components/editor/common/painter/components/draw_brush.vue
@@ -15,13 +15,6 @@ interface Props {
 
 const props = defineProps<Props>()
 
-// Emits
-interface Emits {
-  (e: 'path-created', path: paper.Path): void
-}
-
-const emit = defineEmits<Emits>()
-
 // 接口定义
 interface Point {
   x: number
@@ -32,6 +25,13 @@ interface Point {
 const isDrawing = ref<boolean>(false)
 const currentPath = ref<paper.Path | null>(null)
 
+//注入父组件接口
+import { inject, type Ref } from 'vue'  
+
+const getAllPathsValue = inject<() => paper.Path[]>('getAllPathsValue')!
+const setAllPathsValue = inject<(paths: paper.Path[]) => void>('setAllPathsValue')!
+const exportSvgAndEmit = inject<() => void>('exportSvgAndEmit')!
+
 // 创建新路径
 const createNewPath = (startPoint: Point): paper.Path => {
   const path = new paper.Path()
@@ -69,7 +69,11 @@ const handleMouseUp = (point: Point): void => {
   
   // 完成当前路径绘制
   if (currentPath.value) {
-    emit('path-created', currentPath.value)
+    // 使用注入的接口而不是事件上报
+    const currentPaths = getAllPathsValue()
+    currentPaths.push(currentPath.value)
+    setAllPathsValue(currentPaths)
+    exportSvgAndEmit()
   }
   
   // 重置状态
@@ -102,4 +106,4 @@ defineExpose({
 
 <style scoped>
 /* 笔刷组件不需要额外样式 */
-</style>
+</style>
\ No newline at end of file
diff --git a/spx-gui/src/components/editor/common/painter/components/reshape.vue b/spx-gui/src/components/editor/common/painter/components/reshape.vue
index 01b7dfbdd..10ac52358 100644
--- a/spx-gui/src/components/editor/common/painter/components/reshape.vue
+++ b/spx-gui/src/components/editor/common/painter/components/reshape.vue
@@ -16,12 +16,6 @@ const props = defineProps<{
   allPaths: paper.Path[]
 }>()
 
-// Emits定义
-const emit = defineEmits<{
-  (e: 'paths-update', paths: paper.Path[]): void
-  (e: 'svg-export'): void
-}>()
-
 // 状态管理
 const isDragging = ref<boolean>(false)
 const selectedPoint = ref<ExtendedItem | null>(null)
@@ -29,6 +23,13 @@ const controlPoints = ref<ExtendedItem[]>([])
 const mouseDownPath = ref<paper.Path | null>(null)
 const mouseDownPos = ref<paper.Point | null>(null)
 
+//注入父组件接口
+import { inject, type Ref } from 'vue'  
+
+const getAllPathsValue = inject<() => paper.Path[]>('getAllPathsValue')!
+const setAllPathsValue = inject<(paths: paper.Path[]) => void>('setAllPathsValue')!
+const exportSvgAndEmit = inject<() => void>('exportSvgAndEmit')!
+
 // 选中路径（独占选择）
 const selectPathExclusive = (path: paper.Path | null): void => {
   props.allPaths.forEach((p: paper.Path) => {
@@ -322,7 +323,8 @@ const handleMouseUp = (): void => {
   }
 
   if (wasDragging) {
-    emit('svg-export')
+    // 使用注入的接口而不是事件上报
+    exportSvgAndEmit()
   }
 }
 
@@ -351,11 +353,16 @@ const deleteSelectedPath = (): void => {
   if (controlPoints.value.length > 0 && controlPoints.value[0].parentPath) {
     const pathToDelete = controlPoints.value[0].parentPath
     pathToDelete.remove()
-    const updatedPaths = props.allPaths.filter((path: paper.Path) => path !== pathToDelete)
+    
+    // 使用注入的接口更新路径数组
+    const updatedPaths = getAllPathsValue().filter((path: paper.Path) => path !== pathToDelete)
+    setAllPathsValue(updatedPaths)
+    
     hideControlPoints()
     paper.view.update()
-    emit('paths-update', updatedPaths)
-    emit('svg-export')
+    
+    // 使用注入的接口而不是事件上报
+    exportSvgAndEmit()
   }
 }
 
diff --git a/spx-gui/src/components/editor/common/painter/painter.vue b/spx-gui/src/components/editor/common/painter/painter.vue
index 51eebf5fb..8074005d3 100644
--- a/spx-gui/src/components/editor/common/painter/painter.vue
+++ b/spx-gui/src/components/editor/common/painter/painter.vue
@@ -161,7 +161,6 @@
         :canvas-width="canvasWidth"
         :canvas-height="canvasHeight"
         :is-active="currentTool === 'brush'"
-        @path-created="handlePathCreated"
       />
       
       <!-- 变形工具组件 -->
@@ -169,8 +168,6 @@
         ref="reshapeRef"
         :is-active="currentTool === 'reshape'"
         :all-paths="allPaths"
-        @paths-update="handlePathsUpdate"
-        @svg-export="exportSvgAndEmit"
       />
       
       <!-- 橡皮工具组件 -->
@@ -366,17 +363,6 @@ const setAllPathsValue = (paths: paper.Path[]): void => {
 provide('getAllPathsValue',getAllPathsValue)
 provide('setAllPathsValue',setAllPathsValue)
 
-// 处理笔刷路径创建
-const handlePathCreated = (path: paper.Path): void => {
-  allPaths.value.push(path)
-  paper.view.update()
-  exportSvgAndEmit()
-}
-
-// 处理路径更新（由reshape组件触发）
-const handlePathsUpdate = (paths: paper.Path[]): void => {
-  allPaths.value = paths
-}
 
 // 显示AI生成弹窗
 const showAiDialog = (): void => {

From a6144a784069974575a8c7d153421cac571459c2 Mon Sep 17 00:00:00 2001
From: AvenJi0320 <pychi0320@gmail.com>
Date: Mon, 25 Aug 2025 17:23:13 +0800
Subject: [PATCH 42/49] docs(spx-gui): add aigc-design doc

---
 spx-gui/docs/aigc-design.md | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 spx-gui/docs/aigc-design.md

diff --git a/spx-gui/docs/aigc-design.md b/spx-gui/docs/aigc-design.md
new file mode 100644
index 000000000..207a458c3
--- /dev/null
+++ b/spx-gui/docs/aigc-design.md
@@ -0,0 +1,35 @@
+# AIGC架构设计
+## 一、generator生成器
+生成器是aigc部分的主组件，负责整个ai生成组件的渲染。同时，负责调用封装好的接口，发起与后端的交互。并处理AI生成的相关逻辑。错误处理部分，则通过try-catch调用error.vue中的错误处理逻辑。
+## 二、error.vue 错误处理页面
+error作为错误处理组件，提供接口函数给generator使用。通过调用和参数传递，呼出相应的错误页面，给用户提供相应的错误信息。
+## 三、modelSelector 模型选择器
+主要是一个下拉菜单组件。给用户提供风格等预设，作为发后端的接口参数给generator使用。
+## 四、prompt组织区域
+此区域用于给用户选择提示词输入方式，并完成提示词输入流程。
+1.预设提示词：提供类似“完形填空”的效果。将用户填写完的prompt拼成整个字符串给generator发请求用
+2.自由输入提示词
+## 五、src/apis/picgc.ts api层
+将与后端ai交互的请求封装，供给generator使用
+* 架构设计图
+
+```mermaid
+flowchart TD
+    Backend((Backend))
+    picgc[picgc.ts]
+    Generator[Generator]
+    utils[utils]
+    Painter((Painter))
+
+    prompt[prompt input area]
+    error[Error handling page]
+    model[model selector]
+
+    Backend <--> picgc
+    picgc <--> Generator
+    Generator --> prompt
+    Generator --> error
+    Generator --> model
+    Generator --> utils
+    utils --> Painter
+```

From 168895ba2d5d2e13906401bc8fa4f05a8f8b4b78 Mon Sep 17 00:00:00 2001
From: AvenJi0320 <pychi0320@gmail.com>
Date: Mon, 25 Aug 2025 17:32:11 +0800
Subject: [PATCH 43/49] docs(spx-gui): add english aigc-design version doc

---
 spx-gui/docs/aigc-design.md    | 29 ++++++++++++++--------------
 spx-gui/docs/aigc-design.zh.md | 35 ++++++++++++++++++++++++++++++++++
 2 files changed, 49 insertions(+), 15 deletions(-)
 create mode 100644 spx-gui/docs/aigc-design.zh.md

diff --git a/spx-gui/docs/aigc-design.md b/spx-gui/docs/aigc-design.md
index 207a458c3..c562c63bb 100644
--- a/spx-gui/docs/aigc-design.md
+++ b/spx-gui/docs/aigc-design.md
@@ -1,18 +1,17 @@
-# AIGC架构设计
-## 一、generator生成器
-生成器是aigc部分的主组件，负责整个ai生成组件的渲染。同时，负责调用封装好的接口，发起与后端的交互。并处理AI生成的相关逻辑。错误处理部分，则通过try-catch调用error.vue中的错误处理逻辑。
-## 二、error.vue 错误处理页面
-error作为错误处理组件，提供接口函数给generator使用。通过调用和参数传递，呼出相应的错误页面，给用户提供相应的错误信息。
-## 三、modelSelector 模型选择器
-主要是一个下拉菜单组件。给用户提供风格等预设，作为发后端的接口参数给generator使用。
-## 四、prompt组织区域
-此区域用于给用户选择提示词输入方式，并完成提示词输入流程。
-1.预设提示词：提供类似“完形填空”的效果。将用户填写完的prompt拼成整个字符串给generator发请求用
-2.自由输入提示词
-## 五、src/apis/picgc.ts api层
-将与后端ai交互的请求封装，供给generator使用
-* 架构设计图
-
+# AIGC Architecture Design
+## I. Generator
+The generator is the core component of the AIGC module, responsible for rendering the entire AI generation interface. It also invokes encapsulated APIs to initiate interactions with the backend and manages the logic of AI content generation. Error handling is implemented through a try-catch block that triggers the error-handling logic defined in error.vue.
+## II. error.vue – Error Handling Page
+The error component provides an error-handling interface for the generator. By invoking its functions and passing parameters, the generator can display the appropriate error page and present the user with corresponding error messages.
+## III. modelSelector – Model Selector
+The model selector is primarily a dropdown menu component. It allows users to choose styles and other presets, which are then passed as parameters to the backend through the generator.
+## IV. Prompt Organization Area
+This section lets users choose how to input prompts and complete the prompt-entry process:
+1.	Preset prompts – Provides a “fill-in-the-blank” style interaction. Once completed by the user, the prompt is concatenated into a full string and sent to the generator for requests.
+2.	Free-form prompt input – Users can directly enter custom prompts.
+## V. src/apis/picgc.ts – API Layer
+This module encapsulates all backend AI interaction requests and exposes them for use by the generator.
+* Architecture Diagram
 ```mermaid
 flowchart TD
     Backend((Backend))
diff --git a/spx-gui/docs/aigc-design.zh.md b/spx-gui/docs/aigc-design.zh.md
new file mode 100644
index 000000000..207a458c3
--- /dev/null
+++ b/spx-gui/docs/aigc-design.zh.md
@@ -0,0 +1,35 @@
+# AIGC架构设计
+## 一、generator生成器
+生成器是aigc部分的主组件，负责整个ai生成组件的渲染。同时，负责调用封装好的接口，发起与后端的交互。并处理AI生成的相关逻辑。错误处理部分，则通过try-catch调用error.vue中的错误处理逻辑。
+## 二、error.vue 错误处理页面
+error作为错误处理组件，提供接口函数给generator使用。通过调用和参数传递，呼出相应的错误页面，给用户提供相应的错误信息。
+## 三、modelSelector 模型选择器
+主要是一个下拉菜单组件。给用户提供风格等预设，作为发后端的接口参数给generator使用。
+## 四、prompt组织区域
+此区域用于给用户选择提示词输入方式，并完成提示词输入流程。
+1.预设提示词：提供类似“完形填空”的效果。将用户填写完的prompt拼成整个字符串给generator发请求用
+2.自由输入提示词
+## 五、src/apis/picgc.ts api层
+将与后端ai交互的请求封装，供给generator使用
+* 架构设计图
+
+```mermaid
+flowchart TD
+    Backend((Backend))
+    picgc[picgc.ts]
+    Generator[Generator]
+    utils[utils]
+    Painter((Painter))
+
+    prompt[prompt input area]
+    error[Error handling page]
+    model[model selector]
+
+    Backend <--> picgc
+    picgc <--> Generator
+    Generator --> prompt
+    Generator --> error
+    Generator --> model
+    Generator --> utils
+    utils --> Painter
+```

From a32a7f0d8f07b159a4b1c757cd67a725e606a929 Mon Sep 17 00:00:00 2001
From: linjc <linjc040204@outlook.com>
Date: Mon, 25 Aug 2025 17:47:32 +0800
Subject: [PATCH 44/49] docs(spx-backend):add theme model doc

---
 spx-backend/docs/SVG_THEME_TEMPLATES.md | 430 ++++++++++++++++++++++++
 1 file changed, 430 insertions(+)
 create mode 100644 spx-backend/docs/SVG_THEME_TEMPLATES.md

diff --git a/spx-backend/docs/SVG_THEME_TEMPLATES.md b/spx-backend/docs/SVG_THEME_TEMPLATES.md
new file mode 100644
index 000000000..e00b6f09a
--- /dev/null
+++ b/spx-backend/docs/SVG_THEME_TEMPLATES.md
@@ -0,0 +1,430 @@
+# SVG主题提示词模板功能文档
+
+## 概述
+
+SVG主题提示词模板功能为SVG生成服务提供了智能的主题化增强能力。通过预定义的主题模板，系统能够自动将主题相关的提示词与用户输入进行智能拼接，显著提升生成的SVG图像质量和一致性。
+
+## 功能特性
+
+1. **智能提示词增强**: 根据不同教育场景和用途提供专门优化的提示词模板
+2. **多语言支持**: 同时支持中英文提示词，自动根据语言偏好选择
+3. **可配置强度**: 支持0-1范围的主题影响强度控制
+4. **灵活定制**: 支持自定义前缀、后缀和风格修饰词
+5. **热更新**: 支持运行时重载主题配置
+6. **向下兼容**: 完全兼容现有API，不影响未启用主题的请求
+
+## 架构设计
+
+### 包结构
+```
+internal/svggen/theme/
+├── types.go           # 主题相关类型定义
+├── templates.go       # 内置模板定义
+├── config.go          # 配置加载和环境变量处理
+├── manager.go         # 主题管理器核心逻辑
+└── manager_test.go    # 单元测试
+```
+
+### 核心组件
+
+#### ThemeManager
+- 负责加载和管理主题模板
+- 提供主题查询和提示词拼接功能
+- 支持模板缓存和运行时重载
+- 线程安全的并发访问
+
+#### ThemeTemplate
+- 定义主题的结构化信息
+- 包含多语言提示词、风格修饰词、质量增强词
+- 支持提供商特定的配置覆盖
+
+### 集成方式
+
+主题功能通过中间件方式集成到现有的`svggen.ServiceManager`中，在生成请求处理流程中自动进行主题增强：
+
+```
+用户请求 -> 主题处理 -> 翻译处理 -> 提供商生成 -> 响应
+```
+
+## 数据结构
+
+### 主题类型定义
+
+```go
+type ThemeType string
+
+const (
+    ThemeEducationMath     ThemeType = "education_math"
+    ThemeEducationScience  ThemeType = "education_science"
+    ThemeEducationArt      ThemeType = "education_art"
+    ThemeGameCartoon       ThemeType = "game_cartoon"
+    ThemeGamePixel         ThemeType = "game_pixel"
+    ThemeUIIcon            ThemeType = "ui_icon"
+    ThemeUIIllustration    ThemeType = "ui_illustration"
+    ThemeGeneral           ThemeType = "general"
+)
+```
+
+### 主题模板结构
+
+```go
+type ThemeTemplate struct {
+    Type              ThemeType `json:"type"`
+    Name              string    `json:"name"`
+    NameCN            string    `json:"name_cn"`
+    Description       string    `json:"description"`
+    DescriptionCN     string    `json:"description_cn"`
+    
+    // 提示词模板
+    PrefixPrompt      string    `json:"prefix_prompt"`
+    PrefixPromptCN    string    `json:"prefix_prompt_cn"`
+    SuffixPrompt      string    `json:"suffix_prompt"`
+    SuffixPromptCN    string    `json:"suffix_prompt_cn"`
+    
+    // 默认参数
+    DefaultStyle      string    `json:"default_style"`
+    DefaultNegative   string    `json:"default_negative"`
+    DefaultNegativeCN string    `json:"default_negative_cn"`
+    
+    // 高级配置
+    StyleModifiers    []string  `json:"style_modifiers"`
+    QualityEnhancers  []string  `json:"quality_enhancers"`
+    
+    // 提供商特定配置
+    ProviderOverrides map[string]ProviderConfig `json:"provider_overrides"`
+}
+```
+
+### API参数扩展
+
+现有的`GenerateRequest`和控制器参数已扩展支持主题字段：
+
+```go
+type GenerateRequest struct {
+    // 现有字段...
+    Prompt         string   `json:"prompt"`
+    NegativePrompt string   `json:"negative_prompt,omitempty"`
+    Style          string   `json:"style,omitempty"`
+    Provider       Provider `json:"provider,omitempty"`
+    
+    // 新增主题字段
+    Theme          string  `json:"theme,omitempty"`
+    EnableTheme    bool    `json:"enable_theme,omitempty"`
+    ThemeStrength  float64 `json:"theme_strength,omitempty"`
+    CustomPrefix   string  `json:"custom_prefix,omitempty"`
+    CustomSuffix   string  `json:"custom_suffix,omitempty"`
+    Language       string  `json:"language,omitempty"`
+}
+```
+
+## 核心算法
+
+### 提示词增强流程
+
+```go
+func (tm *ThemeManager) BuildEnhancedPrompt(req *ProcessRequest, template *ThemeTemplate) string {
+    var parts []string
+    
+    // 1. 自定义前缀或主题前缀
+    if req.CustomPrefix != "" {
+        parts = append(parts, req.CustomPrefix)
+    } else if template.PrefixPrompt != "" {
+        prefix := tm.selectPromptByLanguage(template.PrefixPrompt, template.PrefixPromptCN, req.Language)
+        if prefix != "" {
+            parts = append(parts, prefix)
+        }
+    }
+    
+    // 2. 用户原始提示词
+    if req.Prompt != "" {
+        parts = append(parts, req.Prompt)
+    }
+    
+    // 3. 主题风格修饰（根据强度选择）
+    if req.ThemeStrength > 0.5 && len(template.StyleModifiers) > 0 {
+        modifiers := tm.selectModifiers(template.StyleModifiers, req.ThemeStrength)
+        parts = append(parts, modifiers...)
+    }
+    
+    // 4. 自定义后缀或主题后缀
+    if req.CustomSuffix != "" {
+        parts = append(parts, req.CustomSuffix)
+    } else if template.SuffixPrompt != "" {
+        suffix := tm.selectPromptByLanguage(template.SuffixPrompt, template.SuffixPromptCN, req.Language)
+        if suffix != "" {
+            parts = append(parts, suffix)
+        }
+    }
+    
+    // 5. 质量增强词（总是添加）
+    if len(template.QualityEnhancers) > 0 {
+        parts = append(parts, template.QualityEnhancers...)
+    }
+    
+    return strings.Join(tm.filterEmptyStrings(parts), ", ")
+}
+```
+
+### 主题强度影响
+
+- **0.0 - 0.5**: 不应用风格修饰词，仅使用前缀、后缀和质量增强词
+- **0.5 - 1.0**: 根据强度比例选择风格修饰词数量
+
+```go
+func (tm *ThemeManager) selectModifiers(modifiers []string, strength float64) []string {
+    count := int(float64(len(modifiers)) * strength)
+    if count == 0 {
+        count = 1
+    }
+    if count > len(modifiers) {
+        count = len(modifiers)
+    }
+    return modifiers[:count]
+}
+```
+
+## 内置主题详情
+
+### 1. 教育数学主题 (education_math)
+- **用途**: 数学教育插图
+- **前缀**: "Educational mathematics illustration" / "教育数学插图"
+- **后缀**: "clean vector design, educational style, suitable for children" / "简洁矢量设计，教育风格，适合儿童"
+- **风格修饰**: geometric, colorful, friendly, simple
+- **质量增强**: high quality, clean lines, professional
+
+### 2. 游戏卡通主题 (game_cartoon)
+- **用途**: 游戏角色和卡通插图
+- **前缀**: "Cute cartoon game character" / "可爱卡通游戏角色"
+- **后缀**: "vibrant colors, friendly appearance, game-ready design" / "鲜艳色彩，友好外观，游戏就绪设计"
+- **风格修饰**: playful, colorful, expressive, rounded
+- **质量增强**: detailed, polished, game art style
+
+### 3. UI图标主题 (ui_icon)
+- **用途**: 用户界面图标
+- **前缀**: "Minimal UI icon" / "简约UI图标"
+- **后缀**: "flat design, consistent style, scalable vector" / "扁平设计，一致风格，可缩放矢量"
+- **风格修饰**: minimal, modern, clean, geometric
+- **质量增强**: pixel perfect, scalable, optimized
+
+## API端点
+
+### 主题查询端点
+
+#### 获取所有主题
+```
+GET /image/themes
+```
+
+响应格式：
+```json
+{
+  "themes": [
+    {
+      "type": "education_math",
+      "name": "Education Math",
+      "name_cn": "教育数学",
+      "description": "Mathematical illustrations optimized for educational content",
+      "description_cn": "专为教育内容优化的数学插图",
+      "default_style": "educational_illustration",
+      "style_modifiers": ["geometric", "colorful", "friendly", "simple"],
+      "quality_enhancers": ["high quality", "clean lines", "professional"]
+    }
+  ],
+  "count": 8
+}
+```
+
+#### 获取特定主题
+```
+GET /image/themes/{theme_type}
+```
+
+### SVG生成端点（已扩展）
+
+```
+POST /image/svg
+```
+
+支持的主题参数：
+```json
+{
+  "prompt": "一只小猫",
+  "theme": "game_cartoon",
+  "enable_theme": true,
+  "theme_strength": 0.8,
+  "custom_prefix": "可爱的",
+  "custom_suffix": "适合儿童",
+  "language": "zh",
+  "provider": "svgio"
+}
+```
+
+## 配置管理
+
+### 环境变量
+
+```bash
+# 主题功能开关
+SVG_THEMES_ENABLED=true
+
+# 主题配置文件路径（可选）
+SVG_THEMES_CONFIG_PATH=./config/theme_templates.yaml
+
+# 默认主题
+SVG_DEFAULT_THEME=general
+
+# 主题缓存时间（秒）
+SVG_THEMES_CACHE_TTL=3600
+```
+
+### 配置文件支持
+
+支持YAML格式的自定义主题配置文件：
+
+```yaml
+themes:
+  custom_education:
+    name: "Custom Education"
+    name_cn: "自定义教育"
+    enabled: true
+    prefix_prompt: "Educational custom illustration"
+    prefix_prompt_cn: "教育自定义插图"
+    suffix_prompt: "child-friendly, educational, clear"
+    suffix_prompt_cn: "儿童友好，教育性，清晰"
+    default_style: "educational_custom"
+    style_modifiers: ["educational", "child-friendly", "colorful"]
+    quality_enhancers: ["high quality", "professional"]
+```
+
+## 使用示例
+
+### 基础主题使用
+
+```bash
+curl -X POST http://localhost:8080/image/svg \
+  -H "Content-Type: application/json" \
+  -d '{
+    "prompt": "一只小猫学数学",
+    "theme": "education_math",
+    "enable_theme": true,
+    "provider": "svgio"
+  }'
+```
+
+### 高级配置
+
+```bash
+curl -X POST http://localhost:8080/image/svg \
+  -H "Content-Type: application/json" \
+  -d '{
+    "prompt": "molecular structure",
+    "theme": "education_science",
+    "enable_theme": true,
+    "theme_strength": 0.7,
+    "custom_suffix": "suitable for university textbook",
+    "language": "en",
+    "provider": "recraft"
+  }'
+```
+
+## 提示词变换示例
+
+### 输入
+```
+原始提示词: "a cute cat"
+主题: game_cartoon
+强度: 0.8
+语言: en
+```
+
+### 处理流程
+1. **前缀**: "Cute cartoon game character"
+2. **用户输入**: "a cute cat"  
+3. **风格修饰**: "playful, colorful, expressive, rounded" (4个中的4个，因为强度0.8)
+4. **后缀**: "vibrant colors, friendly appearance, game-ready design"
+5. **质量增强**: "detailed, polished, game art style"
+
+### 最终结果
+```
+"Cute cartoon game character, a cute cat, playful, colorful, expressive, rounded, vibrant colors, friendly appearance, game-ready design, detailed, polished, game art style"
+```
+
+## 性能特性
+
+### 缓存策略
+- **内存缓存**: 所有主题模板在启动时加载到内存
+- **线程安全**: 使用读写锁保证并发安全
+- **热更新**: 支持运行时重载而无需重启服务
+
+### 性能优化
+- **快速路径**: 未启用主题时零开销
+- **字符串优化**: 避免不必要的字符串分配和复制
+- **去重处理**: 自动过滤空字符串和重复内容
+
+### 错误处理
+- **优雅降级**: 主题处理失败时自动回退到原始提示词
+- **详细日志**: 记录主题处理过程和错误信息
+- **不中断生成**: 主题错误不影响SVG生成的继续执行
+
+## 监控和日志
+
+### 关键日志
+```go
+logger.Printf("Theme processing - theme: %s, original_prompt: %q, enhanced_prompt: %q", 
+    req.Theme, originalPrompt, enhancedPrompt)
+```
+
+### 统计信息
+- 主题使用频率统计
+- 不同主题的成功率跟踪
+- 提示词长度分布分析
+- 生成时间对比数据
+
+## 扩展性
+
+### 自定义主题注册
+```go
+customTheme := &ThemeTemplate{
+    Type: ThemeType("custom_theme"),
+    Name: "Custom Theme",
+    PrefixPrompt: "Custom prefix",
+}
+manager.RegisterCustomTheme(customTheme)
+```
+
+### 未来扩展方向
+- **A/B测试**: 主题变体对比测试
+- **用户偏好**: 个性化主题推荐
+- **智能学习**: 基于用户反馈的主题优化
+- **更多主题**: 持续扩展内置主题库
+
+## 测试策略
+
+### 单元测试覆盖
+- 主题模板加载和管理
+- 提示词拼接逻辑验证
+- 多语言选择机制
+- 参数验证和错误处理
+- 并发安全性测试
+
+### 集成测试
+- 端到端API功能测试
+- 多提供商兼容性验证
+- 性能基准测试
+- 内存使用和泄漏检测
+
+## 部署指南
+
+### 渐进式启用
+1. **第一阶段**: 部署代码，主题功能默认关闭
+2. **第二阶段**: 开启主题功能，监控系统表现
+3. **第三阶段**: 扩展主题库，收集用户反馈
+4. **第四阶段**: 优化算法，增强用户体验
+
+### 兼容性保证
+- 现有API完全向下兼容
+- 新增字段均为可选参数
+- 提供完整的降级机制
+- 支持平滑的功能开关
+
+这套主题系统为SVG生成服务提供了强大而灵活的主题化能力，在提升生成质量的同时保持了良好的用户体验和系统稳定性。
\ No newline at end of file

From 896567a0a1b685fae1db4e8e3ad63742d2688098 Mon Sep 17 00:00:00 2001
From: petezhuang <petezhuang13@163.com>
Date: Tue, 26 Aug 2025 09:53:35 +0800
Subject: [PATCH 45/49] refactor(spx-gui):Change AIGC interaction API

---
 spx-gui/src/apis/picgc.ts                     | 61 ++++++++++++++++---
 .../painter/components/aigc/generator.vue     | 12 ++--
 .../editor/common/painter/painter.vue         |  2 +-
 3 files changed, 61 insertions(+), 14 deletions(-)

diff --git a/spx-gui/src/apis/picgc.ts b/spx-gui/src/apis/picgc.ts
index 1965ee072..0642b83c5 100644
--- a/spx-gui/src/apis/picgc.ts
+++ b/spx-gui/src/apis/picgc.ts
@@ -2,12 +2,11 @@
  * @desc Picture Generation APIs for AI image generation
  */
 
-// independent baseUrl
-const PICGC_BASE_URL = 'http://localhost:8080'
+import { apiBaseUrl } from '@/utils/env'
 
 // 简单的HTTP请求函数
 async function picgcRequest(path: string, options: RequestInit = {}) {
-  const url = PICGC_BASE_URL + path
+  const url = apiBaseUrl + path
   
   const response = await fetch(url, {
     headers: {
@@ -32,8 +31,24 @@ export type ImageModel = 'png' | 'svg'
 export interface GenerateImageRequest {
   /** The text prompt describing the desired image */
   prompt: string
+  /** Negative prompt for things to avoid */
   negative_prompt?: string
+  /** Image style (e.g., cartoon, realistic, etc.) */
+  style?: string
+  /** AI provider (e.g., svgio, claude, recraft) */
+  provider?: string
+  /** Output format (svg, png, etc.) */
   format?: string
+  /** Whether to skip translation */
+  skip_translate?: boolean
+  /** AI model to use (e.g., gpt-4) */
+  model?: string
+  /** Image size (e.g., "512x512") */
+  size?: string
+  /** Sub-style specification (e.g., hand-drawn) */
+  substyle?: string
+  /** Number of images to generate */
+  n?: number
 }
 
 /** Response from backend API */
@@ -54,13 +69,27 @@ export async function generateImage(
   prompt: string, 
   options?: {
     negative_prompt?: string
+    style?: string
+    provider?: string
     format?: string
+    skip_translate?: boolean
+    model?: string
+    size?: string
+    substyle?: string
+    n?: number
   }
 ): Promise<GenerateImageResponse> {
   const payload: GenerateImageRequest = {
     prompt,
     negative_prompt: options?.negative_prompt || 'text, watermark',
-    format: options?.format
+    style: options?.style,
+    provider: options?.provider,
+    format: options?.format,
+    skip_translate: options?.skip_translate,
+    model: options?.model,
+    size: options?.size,
+    substyle: options?.substyle,
+    n: options?.n
   }
 
   //生成图片的接口
@@ -80,7 +109,13 @@ export async function generateSvgDirect(
   prompt: string,
   options?: {
     negative_prompt?: string
+    style?: string
     format?: string
+    skip_translate?: boolean
+    model?: string
+    size?: string
+    substyle?: string
+    n?: number
   }
 ): Promise<{
   svgContent: string
@@ -91,16 +126,28 @@ export async function generateSvgDirect(
   const payload: GenerateImageRequest = {
     prompt,
     negative_prompt: options?.negative_prompt || 'text, watermark',
-    format: options?.format
+    style: options?.style,
+    provider: provider,
+    format: options?.format,
+    skip_translate: options?.skip_translate,
+    model: options?.model,
+    size: options?.size,
+    substyle: options?.substyle,
+    n: options?.n
   }
 
   let url = ''
+  console.log('provider', provider)
+  url = apiBaseUrl + '/image/svg'
   switch (provider) {
     case 'claude':
-      url = PICGC_BASE_URL + '/v1/images/claude/svg'
+      payload.provider = 'claude'
       break
     case 'recraft':
-      url = PICGC_BASE_URL + '/v1/images/recraft/svg'
+      payload.provider = 'recraft'
+      break
+    case 'svgio':
+      payload.provider = 'svgio'
       break
     default:
       throw new Error('Invalid provider')
diff --git a/spx-gui/src/components/editor/common/painter/components/aigc/generator.vue b/spx-gui/src/components/editor/common/painter/components/aigc/generator.vue
index 544bb80f2..2a0367f2c 100644
--- a/spx-gui/src/components/editor/common/painter/components/aigc/generator.vue
+++ b/spx-gui/src/components/editor/common/painter/components/aigc/generator.vue
@@ -32,12 +32,12 @@
                   <div class="model-selector">
                     <div 
                       class="model-option"
-                      :class="{ active: selectedModel === 'claude' }"
-                      @click="selectedModel = 'claude'"
+                      :class="{ active: selectedModel === 'svgio' }"
+                      @click="selectedModel = 'svgio'"
                     >
                       <div class="model-icon">🖼️</div>
                       <div class="model-info">
-                        <div class="model-name">{{ $t({ en: 'Claude Vector', zh: 'Claude矢量图' }) }}</div>
+                        <div class="model-name">{{ $t({ en: 'SVGIO Vector', zh: 'SVGIO矢量图' }) }}</div>
                         <div class="model-desc">{{ $t({ en: 'Generate simple, accurate vector images', zh: '生成简单，精确的矢量图' }) }}</div>
                       </div>
                     </div>
@@ -168,7 +168,7 @@ import ErrorModal from './error.vue'
   }>()
   
   // 响应式数据
-  const selectedModel = ref<'claude' | 'recraft'>('claude')
+  const selectedModel = ref<'claude' | 'recraft' | 'svgio'>('claude')
   const prompt = ref('')
   const previewUrl = ref('')
   const isGenerating = ref(false)
@@ -209,7 +209,7 @@ import ErrorModal from './error.vue'
       prompt: prompt.value
     }
     
-    if (selectedModel.value === 'recraft' || selectedModel.value === 'claude') {
+    if (selectedModel.value === 'recraft' || selectedModel.value === 'claude' || selectedModel.value === 'svgio') {
       // SVG模式：传递原始SVG代码
       confirmData.svgContent = svgRawContent.value
       confirmData.url = previewUrl.value // 用于预览的blob URL
@@ -273,7 +273,7 @@ import ErrorModal from './error.vue'
     svgRawContent.value = ''
     
     try {
-      if (selectedModel.value === 'recraft' || selectedModel.value === 'claude') {
+      if (selectedModel.value === 'recraft' || selectedModel.value === 'claude' || selectedModel.value === 'svgio')  {
         const svgResult = await generateSvgDirect(selectedModel.value, prompt.value)
         
         // 直接获得SVG内容
diff --git a/spx-gui/src/components/editor/common/painter/painter.vue b/spx-gui/src/components/editor/common/painter/painter.vue
index 8074005d3..601ac40fe 100644
--- a/spx-gui/src/components/editor/common/painter/painter.vue
+++ b/spx-gui/src/components/editor/common/painter/painter.vue
@@ -377,7 +377,7 @@ const handleAiConfirm = (data: {
   svgContent?: string;
 }): void => {
   // console.log('AI生成确认:', data)
-  if(data.model === 'claude' || data.model === 'recraft'){
+  if(data.model === 'claude' || data.model === 'recraft' || data.model === 'svgio'){
     data.model = 'svg'
   }else{
     data.model = 'png'

From e27180f8f7f0fc1a1a313124dd3923d36aacc7a0 Mon Sep 17 00:00:00 2001
From: qiniu <qiniu@qiniudeMacBook-Pro.local>
Date: Tue, 26 Aug 2025 10:20:55 +0800
Subject: [PATCH 46/49] doc: add document of clip

---
 spx-algorithm/docs/v1.md | 111 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 111 insertions(+)
 create mode 100644 spx-algorithm/docs/v1.md

diff --git a/spx-algorithm/docs/v1.md b/spx-algorithm/docs/v1.md
new file mode 100644
index 000000000..8ab7c0d32
--- /dev/null
+++ b/spx-algorithm/docs/v1.md
@@ -0,0 +1,111 @@
+# OpenCLIP 功能说明文档
+
+## 简介
+
+本项目基于 [OpenCLIP](https://github.com/mlfoundations/open_clip) 实现了一个图像搜索服务，能够通过自然语言描述来搜索和匹配图像。OpenCLIP 是一个开源的 CLIP（Contrastive Language-Image Pre-training）模型实现，能够理解图像和文本之间的语义关系。
+
+## OpenCLIP 核心功能
+
+### 1. 多模态理解
+- **文本编码**: 将自然语言文本转换为向量表示
+- **图像编码**: 将图像转换为语义向量表示
+- **跨模态匹配**: 计算文本和图像之间的语义相似度
+
+### 2. 支持的模型类型
+项目中使用的预训练模型：
+- `ViT-B-32`: Vision Transformer Base 模型，32x32 patch size
+- 预训练数据集: `laion2b_s34b_b79k`（LAION-2B 数据集）
+
+### 3. 图像格式支持
+- **常规格式**: PNG, JPG, JPEG, WebP, BMP, TIFF
+- **SVG 支持**: 通过 CairoSVG 转换为位图后处理
+- **预处理**: 自动调整图像尺寸到 224x224 像素
+
+## 项目中的应用
+
+### 核心服务类: ImageSearchService
+
+位置: `project/app/services/image_search_service.py`
+
+#### 主要功能方法：
+
+1. **模型初始化** (`_load_model`)
+```python
+# 加载 CLIP 模型和预处理器
+model, _, preprocess = open_clip.create_model_and_transforms(
+    model_name, pretrained=pretrained
+)
+tokenizer = open_clip.get_tokenizer(model_name)
+```
+
+2. **图像处理** (`_process_image`)
+- 支持多种图像格式
+- SVG 文件特殊处理（转换为 PNG）
+- 统一预处理到标准尺寸
+
+3. **语义搜索** (`search_images`)
+- 文本查询编码
+- 批量图像编码
+- 相似度计算和排序
+
+
+## API 接口
+
+### 1. 文件上传搜索 (`/api/search`)
+- **方法**: POST
+- **输入**: 文本查询 + 图像文件
+- **输出**: 按相似度排序的结果列表
+
+### 2. URL 搜索 (`/api/search/url`)
+- **方法**: POST  
+- **输入**: 文本查询 + 图像URL列表
+- **输出**: 按相似度排序的结果列表
+
+### 响应格式
+```json
+{
+  "query": "查询文本",
+  "total_images": 10,
+  "results_count": 5,
+  "results": [
+    {
+      "rank": 1,
+      "similarity": 0.8567,
+      "filename": "image1.jpg"
+    }
+  ]
+}
+```
+
+## 技术特性
+
+### 1. 性能优化
+- **模型复用**: 服务启动时加载一次，避免重复加载
+- **批量处理**: 支持多图像并行编码
+- **GPU 加速**: 自动检测并使用 CUDA（如果可用）
+
+### 2. 错误处理
+- 图像文件验证
+- 格式不支持的优雅降级
+- 详细的错误日志记录
+
+### 3. 扩展性
+- 可配置的模型参数
+- 支持不同的预训练权重
+- 易于集成新的图像格式
+
+
+## 配置选项
+
+### 环境变量
+- `CLIP_MODEL_NAME`: CLIP 模型名称（默认: ViT-B-32）
+- `CLIP_PRETRAINED`: 预训练权重（默认: laion2b_s34b_b79k）
+
+### 支持的模型类型
+- `ViT-B-32`: 轻量级，速度快
+- `ViT-B-16`: 更高精度
+- `ViT-L-14`: 大型模型，最高精度
+- `RN50/RN101`: ResNet 架构
+
+
+

From 744fd3decd5a9514b0c27150a0959c8d73f68844 Mon Sep 17 00:00:00 2001
From: qiniu <qiniu@qiniudeMacBook-Pro.local>
Date: Tue, 26 Aug 2025 10:41:08 +0800
Subject: [PATCH 47/49] doc: add document of test theme classifiation

---
 spx-algorithm/docs/v2.md | 124 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 124 insertions(+)
 create mode 100644 spx-algorithm/docs/v2.md

diff --git a/spx-algorithm/docs/v2.md b/spx-algorithm/docs/v2.md
new file mode 100644
index 000000000..ce7c29066
--- /dev/null
+++ b/spx-algorithm/docs/v2.md
@@ -0,0 +1,124 @@
+# OpenCLIP 功能说明文档
+
+## 简介
+
+本项目基于 [OpenCLIP](https://github.com/mlfoundations/open_clip) 实现了一个图像搜索服务，能够通过自然语言描述来搜索和匹配图像。OpenCLIP 是一个开源的 CLIP（Contrastive Language-Image Pre-training）模型实现，能够理解图像和文本之间的语义关系。
+
+## OpenCLIP 核心功能
+
+### 1. 多模态理解
+- **文本编码**: 将自然语言文本转换为向量表示
+- **图像编码**: 将图像转换为语义向量表示
+- **跨模态匹配**: 计算文本和图像之间的语义相似度
+
+### 2. 支持的模型类型
+项目中使用的预训练模型：
+- `ViT-B-32`: Vision Transformer Base 模型，32x32 patch size
+- 预训练数据集: `laion2b_s34b_b79k`（LAION-2B 数据集）
+
+### 3. 图像格式支持
+- **常规格式**: PNG, JPG, JPEG, WebP, BMP, TIFF
+- **SVG 支持**: 通过 CairoSVG 转换为位图后处理
+- **预处理**: 自动调整图像尺寸到 224x224 像素
+
+## 项目中的应用
+
+### 核心服务类: ImageSearchService
+
+位置: `project/app/services/image_search_service.py`
+
+#### 主要功能方法：
+
+1. **模型初始化** (`_load_model`)
+```python
+# 加载 CLIP 模型和预处理器
+model, _, preprocess = open_clip.create_model_and_transforms(
+    model_name, pretrained=pretrained
+)
+tokenizer = open_clip.get_tokenizer(model_name)
+```
+
+2. **图像处理** (`_process_image`)
+- 支持多种图像格式
+- SVG 文件特殊处理（转换为 PNG）
+- 统一预处理到标准尺寸
+
+3. **语义搜索** (`search_images`)
+- 文本查询编码
+- 批量图像编码
+- 相似度计算和排序
+
+
+## API 接口
+
+### 1. 文件上传搜索 (`/api/search`)
+- **方法**: POST
+- **输入**: 文本查询 + 图像文件
+- **输出**: 按相似度排序的结果列表
+
+### 2. URL 搜索 (`/api/search/url`)
+- **方法**: POST  
+- **输入**: 文本查询 + 图像URL列表
+- **输出**: 按相似度排序的结果列表
+
+### 响应格式
+```json
+{
+  "query": "查询文本",
+  "total_images": 10,
+  "results_count": 5,
+  "results": [
+    {
+      "rank": 1,
+      "similarity": 0.8567,
+      "filename": "image1.jpg"
+    }
+  ]
+}
+```
+
+## 技术特性
+
+### 1. 性能优化
+- **模型复用**: 服务启动时加载一次，避免重复加载
+- **批量处理**: 支持多图像并行编码
+- **GPU 加速**: 自动检测并使用 CUDA（如果可用）
+
+### 2. 错误处理
+- 图像文件验证
+- 格式不支持的优雅降级
+- 详细的错误日志记录
+
+### 3. 扩展性
+- 可配置的模型参数
+- 支持不同的预训练权重
+- 易于集成新的图像格式
+
+
+## 配置选项
+
+### 环境变量
+- `CLIP_MODEL_NAME`: CLIP 模型名称（默认: ViT-B-32）
+- `CLIP_PRETRAINED`: 预训练权重（默认: laion2b_s34b_b79k）
+
+### 支持的模型类型
+- `ViT-B-32`: 轻量级，速度快
+- `ViT-B-16`: 更高精度
+- `ViT-L-14`: 大型模型，最高精度
+- `RN50/RN101`: ResNet 架构
+
+
+
+## 效果演示
+
+### **模拟数据库样本**
+
+![img](https://biffmzeipku.feishu.cn/space/api/box/stream/download/asynccode/?code=NmM3YjUxZGE4MzBkOGFjNDY0OWYzNjc2NDFjM2EwMDRfR3pPcHI3MlhhSkxUdTVxRjF3MGduYUVaOW9BbWFjUjBfVG9rZW46Q0toRGJ5VjQwb0ptZzl4UHZhVWNscEsybjRkXzE3NTYxNzU3OTQ6MTc1NjE3OTM5NF9WNA)
+
+### **运行结果**
+
+![img](https://biffmzeipku.feishu.cn/space/api/box/stream/download/asynccode/?code=YWU5M2M2NWRmZjhjNWJiYTlhZWYwOTU1NmMzNmE0YTNfaWo0d3dEa0JyeVN2dk0zRnlEOFl4aGRha0NTWGhMOXNfVG9rZW46UHFPS2JvaUR2b2Q0Uld4RVd3a2M1emNyblVmXzE3NTYxNzU3OTQ6MTc1NjE3OTM5NF9WNA)
+
+![img](https://biffmzeipku.feishu.cn/space/api/box/stream/download/asynccode/?code=YzQ5MjYyYTM5ZDc3ODA2MjIxNGIxYTk4NmRiY2I2YjJfQkhlZjFobTlwRzJ2RWtiaXpPdm4zWk9FTWVMVzlHYXlfVG9rZW46UWJ5b2I0V01Yb3k1N2x4RlJaRWNtRmt6bkxoXzE3NTYxNzU3OTQ6MTc1NjE3OTM5NF9WNA)
+
+![img](https://biffmzeipku.feishu.cn/space/api/box/stream/download/asynccode/?code=MzJhYjE5MzMzYjI3ZDBjNGJlMWZkOWVmMmVhNDc4ZDlfY2pmdDlPQXVlR1RoTXJ3VjhCblV5UVlVblJrMm1uTjFfVG9rZW46Um9YYmJpeTIxb2VMUjZ4S1IyMWNyakR0blBoXzE3NTYxNzU3OTQ6MTc1NjE3OTM5NF9WNA)
\ No newline at end of file

From 454f13f3f0096ba56d45213d37cced141dcd577f Mon Sep 17 00:00:00 2001
From: linjc <linjc040204@outlook.com>
Date: Tue, 26 Aug 2025 11:31:37 +0800
Subject: [PATCH 48/49] feature:add theme prompt

---
 spx-backend/cmd/spx-backend/get_themes.yap    |  18 ++
 spx-backend/docs/THEME_FEATURE.md             | 222 ++++++++++++++++++
 spx-backend/internal/controller/svg.go        |  39 ++-
 spx-backend/internal/controller/theme.go      | 132 +++++++++++
 spx-backend/internal/controller/theme_test.go | 195 +++++++++++++++
 spx-backend/internal/svggen/types.go          |   1 +
 6 files changed, 603 insertions(+), 4 deletions(-)
 create mode 100644 spx-backend/cmd/spx-backend/get_themes.yap
 create mode 100644 spx-backend/docs/THEME_FEATURE.md
 create mode 100644 spx-backend/internal/controller/theme.go
 create mode 100644 spx-backend/internal/controller/theme_test.go

diff --git a/spx-backend/cmd/spx-backend/get_themes.yap b/spx-backend/cmd/spx-backend/get_themes.yap
new file mode 100644
index 000000000..383729688
--- /dev/null
+++ b/spx-backend/cmd/spx-backend/get_themes.yap
@@ -0,0 +1,18 @@
+// Get all available themes for image generation.
+//
+// Request:
+//   GET /themes
+
+import (
+	"github.com/goplus/builder/spx-backend/internal/controller"
+)
+
+ctx := &Context
+
+result, err := ctrl.GetThemes(ctx.Context())
+if err != nil {
+	replyWithInnerError(ctx, err)
+	return
+}
+
+json result
\ No newline at end of file
diff --git a/spx-backend/docs/THEME_FEATURE.md b/spx-backend/docs/THEME_FEATURE.md
new file mode 100644
index 000000000..351b44c0b
--- /dev/null
+++ b/spx-backend/docs/THEME_FEATURE.md
@@ -0,0 +1,222 @@
+# SVG生成主题功能文档
+
+## 概述
+
+SVG生成主题功能为图片生成提供了预定义的风格主题，通过在提示词中自动添加主题相关的风格描述，确保生成的图片严格遵循指定的视觉风格。
+
+## 功能特性
+
+- **9种预定义主题**：涵盖卡通、写实、极简等多种风格
+- **严格风格控制**：使用强制性指令词汇确保AI严格遵循风格要求
+- **自动提示词增强**：后端自动将主题提示词拼接到用户原始提示词
+- **主题查询API**：前端可动态获取所有可用主题信息
+- **中文支持**：提供中文名称、描述和提示词
+
+## 支持的主题
+
+### 1. 无主题 (ThemeNone)
+- **ID**: `""`
+- **中文名**: 无主题
+- **描述**: 不应用任何特定主题风格
+- **提示词**: 无
+
+### 2. 卡通风格 (ThemeCartoon)
+- **ID**: `"cartoon"`
+- **中文名**: 卡通风格
+- **描述**: 色彩鲜艳的卡通风格，适合可爱有趣的内容
+- **提示词**: 必须使用卡通风格，必须色彩鲜艳丰富，必须可爱有趣，严格使用简单几何形状，强制使用明亮饱和的色彩，禁止写实细节
+
+### 3. 写实风格 (ThemeRealistic)
+- **ID**: `"realistic"`
+- **中文名**: 写实风格
+- **描述**: 高度写实的风格，细节丰富逼真
+- **提示词**: 必须使用写实风格，严格要求高度细节化，强制逼真效果，必须专业高质量渲染，禁止卡通化或简化元素
+
+### 4. 极简风格 (ThemeMinimal)
+- **ID**: `"minimal"`
+- **中文名**: 极简风格
+- **描述**: 极简主义风格，简洁干净的设计
+- **提示词**: 必须使用极简风格，严格限制元素数量，强制使用干净线条和几何形状，严格使用黑白或单色调，禁止复杂装饰
+
+### 5. 奇幻风格 (ThemeFantasy)
+- **ID**: `"fantasy"`
+- **中文名**: 奇幻风格
+- **描述**: 充满魔法和超自然元素的奇幻风格
+- **提示词**: 必须使用奇幻魔法风格，强制添加神秘魔法元素，严格使用梦幻色彩，必须包含超自然效果，禁止现实主义元素
+
+### 6. 复古风格 (ThemeRetro)
+- **ID**: `"retro"`
+- **中文名**: 复古风格
+- **描述**: 怀旧复古风格，经典老式美学
+- **提示词**: 必须使用复古怀旧风格，严格遵循经典老式美学，强制使用怀旧色调和设计元素，禁止现代化元素
+
+### 7. 科幻风格 (ThemeScifi)
+- **ID**: `"scifi"`
+- **中文名**: 科幻风格
+- **描述**: 未来科技风格，充满科幻元素
+- **提示词**: 必须使用科幻未来风格，强制添加科技元素，严格使用霓虹和金属色彩，必须包含未来感设计，禁止传统元素
+
+### 8. 自然风格 (ThemeNature)
+- **ID**: `"nature"`
+- **中文名**: 自然风格
+- **描述**: 自然有机风格，使用自然元素和大地色调
+- **提示词**: 必须使用自然有机风格，严格使用自然元素和植物，强制使用大地色调和绿色系，禁止人工几何元素
+
+### 9. 商务风格 (ThemeBusiness)
+- **ID**: `"business"`
+- **中文名**: 商务风格
+- **描述**: 专业商务风格，现代企业形象
+- **提示词**: 必须使用商务专业风格，严格保持企业形象，强制使用现代简洁设计，必须专业精致，禁止卡通或娱乐元素
+
+## API接口
+
+### 1. 查询所有主题
+
+**接口地址**: `GET /themes`
+
+**响应格式**:
+```json
+[
+  {
+    "id": "cartoon",
+    "name": "卡通风格",
+    "description": "色彩鲜艳的卡通风格，适合可爱有趣的内容",
+    "prompt": "必须使用卡通风格，必须色彩鲜艳丰富，必须可爱有趣，严格使用简单几何形状，强制使用明亮饱和的色彩，禁止写实细节"
+  }
+  // ... 其他主题
+]
+```
+
+### 2. 生成SVG（支持主题）
+
+**接口地址**: `POST /image/svg`
+
+**请求参数**:
+```json
+{
+  "prompt": "一只可爱的小猫",
+  "theme": "cartoon",
+  "provider": "svgio"
+}
+```
+
+**处理流程**:
+1. 验证主题参数是否有效
+2. 应用主题提示词：`"一只可爱的小猫，必须使用卡通风格，必须色彩鲜艳丰富..."`
+3. 调用图片生成服务
+4. 返回生成的SVG内容
+
+### 3. 生成图片元数据（支持主题）
+
+**接口地址**: `POST /image`
+
+**请求参数**: 与生成SVG相同
+
+**响应**: 返回图片元数据信息，包含URL、尺寸等
+
+## 实现细节
+
+### 核心文件
+
+1. **`internal/controller/theme.go`**
+   - 定义主题类型和常量
+   - 提供主题信息映射
+   - 实现提示词拼接逻辑
+   - 提供主题查询方法
+
+2. **`internal/controller/svg.go`**
+   - 集成主题功能到生成接口
+   - 添加主题查询controller方法
+
+3. **`cmd/spx-backend/get_themes.yap`**
+   - 主题查询API端点
+
+### 核心方法
+
+#### 1. 主题验证
+```go
+func IsValidTheme(theme ThemeType) bool
+```
+
+#### 2. 提示词拼接
+```go
+func ApplyThemeToPrompt(originalPrompt string, theme ThemeType) string
+```
+
+#### 3. 主题信息查询
+```go
+func GetAllThemesInfo() []ThemeInfo
+func GetThemeInfo(theme ThemeType) ThemeInfo
+```
+
+### 提示词设计原则
+
+1. **强制性指令**: 使用"必须"、"严格"、"强制"等命令性词汇
+2. **明确要求**: 详细描述每个主题的具体视觉特征
+3. **禁止条款**: 明确禁止与主题不符的元素
+4. **中文优化**: 使用中文逗号拼接，符合中文表达习惯
+
+## 使用示例
+
+### 前端获取主题列表
+```javascript
+fetch('/themes')
+  .then(response => response.json())
+  .then(themes => {
+    themes.forEach(theme => {
+      console.log(`${theme.name}: ${theme.description}`);
+    });
+  });
+```
+
+### 前端生成图片
+```javascript
+const request = {
+  prompt: "一座美丽的城堡",
+  theme: "fantasy",
+  provider: "svgio"
+};
+
+fetch('/image/svg', {
+  method: 'POST',
+  headers: {'Content-Type': 'application/json'},
+  body: JSON.stringify(request)
+});
+```
+
+### 实际处理效果
+- **原始提示词**: "一座美丽的城堡"
+- **应用奇幻主题后**: "一座美丽的城堡，必须使用奇幻魔法风格，强制添加神秘魔法元素，严格使用梦幻色彩，必须包含超自然效果，禁止现实主义元素"
+
+## 测试覆盖
+
+项目包含完整的单元测试，覆盖以下功能：
+
+1. 主题验证逻辑
+2. 提示词拼接功能
+3. 主题信息查询
+4. 参数验证
+
+测试文件: `internal/controller/theme_test.go`
+
+## 扩展性
+
+### 添加新主题
+
+1. 在 `ThemeType` 中定义新常量
+2. 在 `ThemePrompts` 中添加提示词
+3. 在 `ThemeNames` 中添加中文名称
+4. 在 `ThemeDescriptions` 中添加描述
+5. 更新 `GetAvailableThemes()` 方法
+6. 添加对应的测试用例
+
+### 主题定制
+
+可以通过修改 `ThemePrompts` 中的提示词来调整主题效果，或者添加更细粒度的主题参数控制。
+
+## 注意事项
+
+1. 主题功能会修改用户的原始提示词，在日志中会记录修改前后的内容
+2. 无主题选项 (`ThemeNone`) 不会修改原始提示词
+3. 主题验证在参数验证阶段进行，无效主题会返回错误
+4. 所有主题信息通过API动态获取，支持后端热更新
\ No newline at end of file
diff --git a/spx-backend/internal/controller/svg.go b/spx-backend/internal/controller/svg.go
index 655d4125c..68af39edf 100644
--- a/spx-backend/internal/controller/svg.go
+++ b/spx-backend/internal/controller/svg.go
@@ -18,6 +18,7 @@ type GenerateSVGParams struct {
 	Prompt         string            `json:"prompt"`
 	NegativePrompt string            `json:"negative_prompt,omitempty"`
 	Style          string            `json:"style,omitempty"`
+	Theme          ThemeType         `json:"theme,omitempty"`
 	Provider       svggen.Provider   `json:"provider,omitempty"`
 	Format         string            `json:"format,omitempty"`
 	SkipTranslate  bool              `json:"skip_translate,omitempty"`
@@ -54,6 +55,11 @@ func (p *GenerateSVGParams) Validate() (bool, string) {
 		return false, "provider must be one of: svgio, recraft, openai"
 	}
 
+	// Validate theme
+	if !IsValidTheme(p.Theme) {
+		return false, "invalid theme type"
+	}
+
 	return true, ""
 }
 
@@ -85,13 +91,20 @@ type ImageResponse struct {
 // GenerateSVG generates an SVG image and returns the SVG content directly.
 func (ctrl *Controller) GenerateSVG(ctx context.Context, params *GenerateSVGParams) (*SVGResponse, error) {
 	logger := log.GetReqLogger(ctx)
-	logger.Printf("GenerateSVG request - provider: %s, prompt: %q", params.Provider, params.Prompt)
+	logger.Printf("GenerateSVG request - provider: %s, theme: %s, prompt: %q", params.Provider, params.Theme, params.Prompt)
+
+	// Apply theme to prompt if specified
+	finalPrompt := ApplyThemeToPrompt(params.Prompt, params.Theme)
+	if params.Theme != ThemeNone {
+		logger.Printf("Theme applied - original: %q, enhanced: %q", params.Prompt, finalPrompt)
+	}
 
 	// Convert to svggen request
 	req := svggen.GenerateRequest{
-		Prompt:         params.Prompt,
+		Prompt:         finalPrompt,
 		NegativePrompt: params.NegativePrompt,
 		Style:          params.Style,
+		Theme:          string(params.Theme),
 		Provider:       params.Provider,
 		Format:         params.Format,
 		SkipTranslate:  params.SkipTranslate,
@@ -143,13 +156,20 @@ func (ctrl *Controller) GenerateSVG(ctx context.Context, params *GenerateSVGPara
 // GenerateImage generates an image and returns metadata information.
 func (ctrl *Controller) GenerateImage(ctx context.Context, params *GenerateImageParams) (*ImageResponse, error) {
 	logger := log.GetReqLogger(ctx)
-	logger.Printf("GenerateImage request - provider: %s, prompt: %q", params.Provider, params.Prompt)
+	logger.Printf("GenerateImage request - provider: %s, theme: %s, prompt: %q", params.Provider, params.Theme, params.Prompt)
+
+	// Apply theme to prompt if specified
+	finalPrompt := ApplyThemeToPrompt(params.Prompt, params.Theme)
+	if params.Theme != ThemeNone {
+		logger.Printf("Theme applied - original: %q, enhanced: %q", params.Prompt, finalPrompt)
+	}
 
 	// Convert to svggen request
 	req := svggen.GenerateRequest{
-		Prompt:         params.Prompt,
+		Prompt:         finalPrompt,
 		NegativePrompt: params.NegativePrompt,
 		Style:          params.Style,
+		Theme:          string(params.Theme),
 		Provider:       params.Provider,
 		Format:         params.Format,
 		SkipTranslate:  params.SkipTranslate,
@@ -227,4 +247,15 @@ func (ctrl *Controller) parseDataURL(dataURL string) ([]byte, error) {
 
 	// Not base64 encoded, return string bytes directly
 	return []byte(data), nil
+}
+
+// GetThemes returns all available themes with their information.
+func (ctrl *Controller) GetThemes(ctx context.Context) ([]ThemeInfo, error) {
+	logger := log.GetReqLogger(ctx)
+	logger.Printf("GetThemes request")
+	
+	themes := GetAllThemesInfo()
+	
+	logger.Printf("Returned %d themes", len(themes))
+	return themes, nil
 }
\ No newline at end of file
diff --git a/spx-backend/internal/controller/theme.go b/spx-backend/internal/controller/theme.go
new file mode 100644
index 000000000..c926019e4
--- /dev/null
+++ b/spx-backend/internal/controller/theme.go
@@ -0,0 +1,132 @@
+package controller
+
+import "fmt"
+
+// ThemeType represents different SVG generation themes
+type ThemeType string
+
+const (
+	ThemeNone       ThemeType = ""
+	ThemeCartoon    ThemeType = "cartoon"
+	ThemeRealistic  ThemeType = "realistic"
+	ThemeMinimal    ThemeType = "minimal"
+	ThemeFantasy    ThemeType = "fantasy"
+	ThemeRetro      ThemeType = "retro"
+	ThemeScifi      ThemeType = "scifi"
+	ThemeNature     ThemeType = "nature"
+	ThemeBusiness   ThemeType = "business"
+)
+
+// ThemeInfo represents detailed information about a theme
+type ThemeInfo struct {
+	ID          ThemeType `json:"id"`
+	Name        string    `json:"name"`
+	Description string    `json:"description"`
+	Prompt      string    `json:"prompt"`
+}
+
+// ThemePrompts maps each theme to its corresponding prompt enhancement
+var ThemePrompts = map[ThemeType]string{
+	ThemeCartoon:   "必须使用卡通风格，必须色彩鲜艳丰富，必须可爱有趣，严格使用简单几何形状，强制使用明亮饱和的色彩，禁止写实细节",
+	ThemeRealistic: "必须使用写实风格，严格要求高度细节化，强制逼真效果，必须专业高质量渲染，禁止卡通化或简化元素",
+	ThemeMinimal:   "必须使用极简风格，严格限制元素数量，强制使用干净线条和几何形状，严格使用黑白或单色调，禁止复杂装饰",
+	ThemeFantasy:   "必须使用奇幻魔法风格，强制添加神秘魔法元素，严格使用梦幻色彩，必须包含超自然效果，禁止现实主义元素",
+	ThemeRetro:     "必须使用复古怀旧风格，严格遵循经典老式美学，强制使用怀旧色调和设计元素，禁止现代化元素",
+	ThemeScifi:     "必须使用科幻未来风格，强制添加科技元素，严格使用霓虹和金属色彩，必须包含未来感设计，禁止传统元素",
+	ThemeNature:    "必须使用自然有机风格，严格使用自然元素和植物，强制使用大地色调和绿色系，禁止人工几何元素",
+	ThemeBusiness:  "必须使用商务专业风格，严格保持企业形象，强制使用现代简洁设计，必须专业精致，禁止卡通或娱乐元素",
+}
+
+// ThemeNames maps each theme to its Chinese name
+var ThemeNames = map[ThemeType]string{
+	ThemeNone:      "无主题",
+	ThemeCartoon:   "卡通风格",
+	ThemeRealistic: "写实风格",
+	ThemeMinimal:   "极简风格",
+	ThemeFantasy:   "奇幻风格",
+	ThemeRetro:     "复古风格",
+	ThemeScifi:     "科幻风格",
+	ThemeNature:    "自然风格",
+	ThemeBusiness:  "商务风格",
+}
+
+// ThemeDescriptions maps each theme to its description
+var ThemeDescriptions = map[ThemeType]string{
+	ThemeNone:      "不应用任何特定主题风格",
+	ThemeCartoon:   "色彩鲜艳的卡通风格，适合可爱有趣的内容",
+	ThemeRealistic: "高度写实的风格，细节丰富逼真",
+	ThemeMinimal:   "极简主义风格，简洁干净的设计",
+	ThemeFantasy:   "充满魔法和超自然元素的奇幻风格",
+	ThemeRetro:     "怀旧复古风格，经典老式美学",
+	ThemeScifi:     "未来科技风格，充满科幻元素",
+	ThemeNature:    "自然有机风格，使用自然元素和大地色调",
+	ThemeBusiness:  "专业商务风格，现代企业形象",
+}
+
+// IsValidTheme checks if the given theme is valid
+func IsValidTheme(theme ThemeType) bool {
+	if theme == ThemeNone {
+		return true
+	}
+	_, exists := ThemePrompts[theme]
+	return exists
+}
+
+// GetThemePromptEnhancement returns the prompt enhancement for a given theme
+func GetThemePromptEnhancement(theme ThemeType) string {
+	if theme == ThemeNone {
+		return ""
+	}
+	return ThemePrompts[theme]
+}
+
+// ApplyThemeToPrompt applies theme enhancement to the original prompt
+func ApplyThemeToPrompt(originalPrompt string, theme ThemeType) string {
+	if theme == ThemeNone {
+		return originalPrompt
+	}
+	
+	themeEnhancement := GetThemePromptEnhancement(theme)
+	if themeEnhancement == "" {
+		return originalPrompt
+	}
+	
+	return fmt.Sprintf("%s，%s", originalPrompt, themeEnhancement)
+}
+
+// GetAvailableThemes returns all available themes
+func GetAvailableThemes() []ThemeType {
+	return []ThemeType{
+		ThemeNone,
+		ThemeCartoon,
+		ThemeRealistic,
+		ThemeMinimal,
+		ThemeFantasy,
+		ThemeRetro,
+		ThemeScifi,
+		ThemeNature,
+		ThemeBusiness,
+	}
+}
+
+// GetThemeInfo returns detailed information for a specific theme
+func GetThemeInfo(theme ThemeType) ThemeInfo {
+	return ThemeInfo{
+		ID:          theme,
+		Name:        ThemeNames[theme],
+		Description: ThemeDescriptions[theme],
+		Prompt:      ThemePrompts[theme],
+	}
+}
+
+// GetAllThemesInfo returns detailed information for all themes
+func GetAllThemesInfo() []ThemeInfo {
+	themes := GetAvailableThemes()
+	result := make([]ThemeInfo, len(themes))
+	
+	for i, theme := range themes {
+		result[i] = GetThemeInfo(theme)
+	}
+	
+	return result
+}
\ No newline at end of file
diff --git a/spx-backend/internal/controller/theme_test.go b/spx-backend/internal/controller/theme_test.go
new file mode 100644
index 000000000..5c48bc6a4
--- /dev/null
+++ b/spx-backend/internal/controller/theme_test.go
@@ -0,0 +1,195 @@
+package controller
+
+import (
+	"testing"
+)
+
+func TestIsValidTheme(t *testing.T) {
+	tests := []struct {
+		theme    ThemeType
+		expected bool
+	}{
+		{ThemeNone, true},
+		{ThemeCartoon, true},
+		{ThemeRealistic, true},
+		{ThemeMinimal, true},
+		{ThemeFantasy, true},
+		{ThemeRetro, true},
+		{ThemeScifi, true},
+		{ThemeNature, true},
+		{ThemeBusiness, true},
+		{"invalid", false},
+		{"", true}, // ThemeNone
+	}
+
+	for _, test := range tests {
+		result := IsValidTheme(test.theme)
+		if result != test.expected {
+			t.Errorf("IsValidTheme(%q) = %v, expected %v", test.theme, result, test.expected)
+		}
+	}
+}
+
+func TestGetThemePromptEnhancement(t *testing.T) {
+	tests := []struct {
+		theme    ThemeType
+		expected string
+	}{
+		{ThemeNone, ""},
+		{ThemeCartoon, "必须使用卡通风格，必须色彩鲜艳丰富，必须可爱有趣，严格使用简单几何形状，强制使用明亮饱和的色彩，禁止写实细节"},
+		{ThemeRealistic, "必须使用写实风格，严格要求高度细节化，强制逼真效果，必须专业高质量渲染，禁止卡通化或简化元素"},
+		{ThemeMinimal, "必须使用极简风格，严格限制元素数量，强制使用干净线条和几何形状，严格使用黑白或单色调，禁止复杂装饰"},
+		{ThemeFantasy, "必须使用奇幻魔法风格，强制添加神秘魔法元素，严格使用梦幻色彩，必须包含超自然效果，禁止现实主义元素"},
+	}
+
+	for _, test := range tests {
+		result := GetThemePromptEnhancement(test.theme)
+		if result != test.expected {
+			t.Errorf("GetThemePromptEnhancement(%q) = %q, expected %q", test.theme, result, test.expected)
+		}
+	}
+}
+
+func TestApplyThemeToPrompt(t *testing.T) {
+	tests := []struct {
+		prompt   string
+		theme    ThemeType
+		expected string
+	}{
+		{"一只猫", ThemeNone, "一只猫"},
+		{"一只猫", ThemeCartoon, "一只猫，必须使用卡通风格，必须色彩鲜艳丰富，必须可爱有趣，严格使用简单几何形状，强制使用明亮饱和的色彩，禁止写实细节"},
+		{"一座房子", ThemeMinimal, "一座房子，必须使用极简风格，严格限制元素数量，强制使用干净线条和几何形状，严格使用黑白或单色调，禁止复杂装饰"},
+		{"", ThemeCartoon, "，必须使用卡通风格，必须色彩鲜艳丰富，必须可爱有趣，严格使用简单几何形状，强制使用明亮饱和的色彩，禁止写实细节"},
+	}
+
+	for _, test := range tests {
+		result := ApplyThemeToPrompt(test.prompt, test.theme)
+		if result != test.expected {
+			t.Errorf("ApplyThemeToPrompt(%q, %q) = %q, expected %q", test.prompt, test.theme, result, test.expected)
+		}
+	}
+}
+
+func TestGetAvailableThemes(t *testing.T) {
+	themes := GetAvailableThemes()
+	expectedCount := 9 // ThemeNone + 8 themed options
+	
+	if len(themes) != expectedCount {
+		t.Errorf("GetAvailableThemes() returned %d themes, expected %d", len(themes), expectedCount)
+	}
+
+	// Check that all themes are valid
+	for _, theme := range themes {
+		if !IsValidTheme(theme) {
+			t.Errorf("GetAvailableThemes() returned invalid theme: %q", theme)
+		}
+	}
+}
+
+func TestGenerateSVGParamsValidateWithTheme(t *testing.T) {
+	tests := []struct {
+		params   GenerateSVGParams
+		valid    bool
+		errorMsg string
+	}{
+		{
+			params: GenerateSVGParams{
+				Prompt: "test prompt",
+				Theme:  ThemeCartoon,
+			},
+			valid: true,
+		},
+		{
+			params: GenerateSVGParams{
+				Prompt: "test prompt",
+				Theme:  ThemeNone,
+			},
+			valid: true,
+		},
+		{
+			params: GenerateSVGParams{
+				Prompt: "test prompt",
+				Theme:  "invalid_theme",
+			},
+			valid:    false,
+			errorMsg: "invalid theme type",
+		},
+		{
+			params: GenerateSVGParams{
+				Prompt: "ab", // too short
+				Theme:  ThemeCartoon,
+			},
+			valid:    false,
+			errorMsg: "prompt must be at least 3 characters",
+		},
+	}
+
+	for i, test := range tests {
+		valid, msg := test.params.Validate()
+		if valid != test.valid {
+			t.Errorf("Test %d: Validate() = %v, expected %v", i, valid, test.valid)
+		}
+		if !test.valid && msg != test.errorMsg {
+			t.Errorf("Test %d: Validate() error message = %q, expected %q", i, msg, test.errorMsg)
+		}
+	}
+}
+
+func TestGetThemeInfo(t *testing.T) {
+	info := GetThemeInfo(ThemeCartoon)
+	
+	expected := ThemeInfo{
+		ID:          ThemeCartoon,
+		Name:        "卡通风格",
+		Description: "色彩鲜艳的卡通风格，适合可爱有趣的内容",
+		Prompt:      "必须使用卡通风格，必须色彩鲜艳丰富，必须可爱有趣，严格使用简单几何形状，强制使用明亮饱和的色彩，禁止写实细节",
+	}
+	
+	if info.ID != expected.ID {
+		t.Errorf("GetThemeInfo ID = %v, expected %v", info.ID, expected.ID)
+	}
+	if info.Name != expected.Name {
+		t.Errorf("GetThemeInfo Name = %v, expected %v", info.Name, expected.Name)
+	}
+	if info.Description != expected.Description {
+		t.Errorf("GetThemeInfo Description = %v, expected %v", info.Description, expected.Description)
+	}
+	if info.Prompt != expected.Prompt {
+		t.Errorf("GetThemeInfo Prompt = %v, expected %v", info.Prompt, expected.Prompt)
+	}
+}
+
+func TestGetAllThemesInfo(t *testing.T) {
+	themes := GetAllThemesInfo()
+	expectedCount := 9
+	
+	if len(themes) != expectedCount {
+		t.Errorf("GetAllThemesInfo returned %d themes, expected %d", len(themes), expectedCount)
+	}
+	
+	// Check that all themes have required fields
+	for _, theme := range themes {
+		if theme.ID == "" && theme.Name != "无主题" {
+			t.Errorf("Theme ID is empty for theme: %s", theme.Name)
+		}
+		if theme.Name == "" {
+			t.Errorf("Theme Name is empty for ID: %s", theme.ID)
+		}
+		if theme.ID != ThemeNone && theme.Prompt == "" {
+			t.Errorf("Theme Prompt is empty for ID: %s", theme.ID)
+		}
+		// Description can be empty for some themes, so we don't check it
+	}
+	
+	// Check that ThemeNone is included
+	found := false
+	for _, theme := range themes {
+		if theme.ID == ThemeNone {
+			found = true
+			break
+		}
+	}
+	if !found {
+		t.Errorf("ThemeNone not found in GetAllThemesInfo result")
+	}
+}
\ No newline at end of file
diff --git a/spx-backend/internal/svggen/types.go b/spx-backend/internal/svggen/types.go
index 16469d5a0..ea4cf17fb 100644
--- a/spx-backend/internal/svggen/types.go
+++ b/spx-backend/internal/svggen/types.go
@@ -16,6 +16,7 @@ type GenerateRequest struct {
 	Prompt         string   `json:"prompt"`
 	NegativePrompt string   `json:"negative_prompt,omitempty"`
 	Style          string   `json:"style,omitempty"`
+	Theme          string   `json:"theme,omitempty"`
 	Provider       Provider `json:"provider,omitempty"`
 	Format         string   `json:"format,omitempty"`
 	SkipTranslate  bool     `json:"skip_translate,omitempty"`

From aaa112e1d5aba7dea6dd7b53ab9ef2fedac0eb2e Mon Sep 17 00:00:00 2001
From: qiniu <qiniu@qiniudeMacBook-Pro.local>
Date: Tue, 26 Aug 2025 14:09:53 +0800
Subject: [PATCH 49/49] feature: add svg database to current project

---
 .../resource/vector_db/README_vector_db.md    | 190 ++++++++
 .../vector_database.cpython-312.pyc           | Bin 0 -> 18146 bytes
 .../vector_db_utils.cpython-312.pyc           | Bin 0 -> 9205 bytes
 .../vector_db/batch_example_db/index.faiss    | Bin 0 -> 6189 bytes
 .../vector_db/batch_example_db/metadata.pkl   | Bin 0 -> 847 bytes
 spx-algorithm/resource/vector_db/cute.svg     |   1 +
 spx-algorithm/resource/vector_db/cute2.svg    |   1 +
 .../resource/vector_db/database_metadata.json |  42 ++
 .../resource/vector_db/demo_vector_db.py      | 117 +++++
 .../vector_db/demo_vector_db/index.faiss      | Bin 0 -> 6189 bytes
 .../vector_db/demo_vector_db/metadata.pkl     | Bin 0 -> 847 bytes
 spx-algorithm/resource/vector_db/dog.svg      | 213 +++++++++
 .../resource/vector_db/example_db/index.faiss | Bin 0 -> 2093 bytes
 .../vector_db/example_db/metadata.pkl         | Bin 0 -> 297 bytes
 .../vector_db/requirements_vector_db.txt      |   8 +
 .../vector_db/simple_usage_example.py         |  90 ++++
 .../resource/vector_db/vector_database.py     | 417 ++++++++++++++++++
 .../resource/vector_db/vector_db_utils.py     | 213 +++++++++
 18 files changed, 1292 insertions(+)
 create mode 100644 spx-algorithm/resource/vector_db/README_vector_db.md
 create mode 100644 spx-algorithm/resource/vector_db/__pycache__/vector_database.cpython-312.pyc
 create mode 100644 spx-algorithm/resource/vector_db/__pycache__/vector_db_utils.cpython-312.pyc
 create mode 100644 spx-algorithm/resource/vector_db/batch_example_db/index.faiss
 create mode 100644 spx-algorithm/resource/vector_db/batch_example_db/metadata.pkl
 create mode 100644 spx-algorithm/resource/vector_db/cute.svg
 create mode 100644 spx-algorithm/resource/vector_db/cute2.svg
 create mode 100644 spx-algorithm/resource/vector_db/database_metadata.json
 create mode 100644 spx-algorithm/resource/vector_db/demo_vector_db.py
 create mode 100644 spx-algorithm/resource/vector_db/demo_vector_db/index.faiss
 create mode 100644 spx-algorithm/resource/vector_db/demo_vector_db/metadata.pkl
 create mode 100644 spx-algorithm/resource/vector_db/dog.svg
 create mode 100644 spx-algorithm/resource/vector_db/example_db/index.faiss
 create mode 100644 spx-algorithm/resource/vector_db/example_db/metadata.pkl
 create mode 100644 spx-algorithm/resource/vector_db/requirements_vector_db.txt
 create mode 100644 spx-algorithm/resource/vector_db/simple_usage_example.py
 create mode 100644 spx-algorithm/resource/vector_db/vector_database.py
 create mode 100644 spx-algorithm/resource/vector_db/vector_db_utils.py

diff --git a/spx-algorithm/resource/vector_db/README_vector_db.md b/spx-algorithm/resource/vector_db/README_vector_db.md
new file mode 100644
index 000000000..2def3cc56
--- /dev/null
+++ b/spx-algorithm/resource/vector_db/README_vector_db.md
@@ -0,0 +1,190 @@
+# 图像向量数据库
+
+基于open-clip的图像向量化和相似度搜索系统，复用了现有的图像向量化方式。
+
+## 功能特性
+
+- **图像向量化**: 使用open-clip模型将图像编码为高维向量
+- **高效搜索**: 基于Faiss的向量相似度搜索
+- **文本搜索**: 支持通过文本描述搜索相关图像
+- **批量处理**: 支持批量添加和索引图像
+- **元数据管理**: 保存图像文件信息和自定义元数据
+- **重复检测**: 自动检测相似或重复的图像
+
+## 核心组件
+
+### 1. VectorDatabase 类
+- 核心向量数据库实现
+- 图像编码和向量存储
+- 相似度搜索功能
+
+### 2. VectorDBManager 类
+- 高级管理接口
+- 目录批量索引
+- 重复图片检测
+- 元数据导出
+
+## 安装依赖
+
+```bash
+pip install -r requirements_vector_db.txt
+```
+
+主要依赖:
+- torch: 深度学习框架
+- open-clip-torch: CLIP模型
+- faiss-cpu/faiss-gpu: 向量搜索引擎
+- Pillow: 图像处理
+- numpy: 数值计算
+
+## 快速开始
+
+### 基本使用
+
+```python
+from vector_database import VectorDatabase
+
+# 初始化数据库
+db = VectorDatabase(db_path='my_vector_db')
+
+# 添加单张图片
+image_id = db.add_image('path/to/image.jpg', 
+                       metadata={'category': 'animals', 'tags': ['cute', 'dog']})
+
+# 文本搜索
+results = db.search_by_text('cute dog', k=5)
+for result in results:
+    print(f"{result['image_path']}: {result['similarity']:.3f}")
+
+# 图片相似搜索
+similar = db.search_by_image('query_image.jpg', k=5)
+```
+
+### 使用管理工具
+
+```python
+from vector_db_utils import VectorDBManager
+
+# 创建管理器
+manager = VectorDBManager(db_path='my_vector_db')
+
+# 索引整个目录
+stats = manager.index_directory('images_folder/')
+print(f"索引了 {stats['indexed']} 张图片")
+
+# 搜索
+results = manager.search_by_description('beautiful landscape', k=10)
+```
+
+### 运行演示
+
+```bash
+python demo_vector_db.py
+```
+
+## 技术实现
+
+### 向量化方法
+- 使用ViT-B-32模型(默认)提取图像特征
+- 特征向量维度: 512
+- L2归一化处理
+- 支持本地文件和网络URL
+
+### 存储结构
+```
+vector_db/
+├── index.faiss      # Faiss向量索引文件
+└── metadata.pkl     # 图像元数据和配置
+```
+
+### 相似度计算
+- 使用内积(Inner Product)计算向量相似度
+- Faiss IndexFlatIP索引类型
+- 实时搜索，无需预计算
+
+## API 参考
+
+### VectorDatabase
+
+#### 初始化
+```python
+VectorDatabase(
+    model_name='ViT-B-32',           # CLIP模型名称
+    pretrained='laion2b_s34b_b79k',  # 预训练权重
+    db_path='vector_db',             # 数据库存储路径
+    dimension=512                    # 向量维度
+)
+```
+
+#### 主要方法
+- `add_image(image_path, metadata)`: 添加单张图片
+- `add_images_batch(image_paths, metadatas)`: 批量添加图片
+- `search_by_text(query_text, k)`: 文本搜索
+- `search_by_image(query_image_path, k)`: 图片搜索
+- `get_stats()`: 获取数据库统计信息
+
+### VectorDBManager
+
+#### 高级功能
+- `index_directory(directory_path)`: 索引目录
+- `find_duplicates(similarity_threshold)`: 查找重复图片
+- `export_metadata(output_file)`: 导出元数据
+
+## 性能优化
+
+### GPU加速
+```python
+# 自动检测并使用GPU
+db = VectorDatabase()  # 自动使用CUDA如果可用
+```
+
+### 批量处理
+```python
+# 批量添加比逐个添加更高效
+image_paths = ['img1.jpg', 'img2.jpg', ...]
+db.add_images_batch(image_paths)
+```
+
+### 内存优化
+- 模型加载后复用
+- 向量计算使用float32精度
+- 支持大规模图片集合
+
+## 注意事项
+
+1. **模型下载**: 首次运行会下载CLIP模型(约1GB)
+2. **内存使用**: 大量图片需要足够内存存储向量
+3. **删除限制**: Faiss不支持直接删除，需要重建索引
+4. **文件路径**: 确保图片路径在添加后不会改变
+
+## 扩展功能
+
+### 自定义模型
+```python
+# 使用不同的CLIP模型
+db = VectorDatabase(
+    model_name='ViT-L-14',
+    pretrained='openai'
+)
+```
+
+### 高级搜索
+```python
+# 组合搜索结果
+text_results = db.search_by_text('query', k=20)
+image_results = db.search_by_image('query.jpg', k=20)
+# 合并和排序结果...
+```
+
+## 故障排除
+
+### 常见问题
+1. **Faiss安装失败**: 尝试使用conda安装
+2. **CUDA内存不足**: 减少批量大小或使用CPU
+3. **图片加载失败**: 检查文件格式和路径
+
+### 日志调试
+```python
+import logging
+logging.basicConfig(level=logging.DEBUG)
+```
\ No newline at end of file
diff --git a/spx-algorithm/resource/vector_db/__pycache__/vector_database.cpython-312.pyc b/spx-algorithm/resource/vector_db/__pycache__/vector_database.cpython-312.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..d4e82d858fb64dcb518e25b57fb67c26c5290c2d
GIT binary patch
literal 18146
zcmch9dvp_5nrD^XFTWp>U$Sh>Lk8Ozo0ka?gCQ{wlMtpeai>QkTmod|M@kZ4N2Y<0
zj-4j4J)OjML)s>tZbU-|r8l!UgiavIOtaf_&PpTG(p0=>*t3>_b9PUgz?{rU|FQdh
zw^Sur6iH^MXRnWL-S@q9AHVN)%fC-c(^25ccK-T6(MpQ?pBNFGA|AN^zaTI|F%(0)
zs8;?-x6&joYn73wyj2cQnM={3Y*lusT2&qDR&|G_RYUXTwXHf*PT#60PeZE#o^n@O
zM|x{IO=<a38Lb)dP*!Ue<SSg+9oenfG$o@Pvi3#7z!FbK?gg5UwdTpFCn!dFl44XB
zWbw589(n=g$gH4PC5(e^&3KMFReP8^B7crLJU=H3a@GntR`p$Mpv9`-6g!-552t8y
zws|;tV`mSi+12fFc6HiaR+>{bci8tkAfRFF9*4)-;b`MK=6y1=5WIf{#yCPbD4a8x
zFS=E(g*V1Ori_s}6pS2x3iv4<%6%F}byC@?V$>(8RyCsmU&Cm@*D^Zrb&MX$860|t
zp}jD<Gd^4Zk9`Uz?WCeLok{-=B{QI822)O2&4N}l9STR*J{h)yKhl$uw5npVVO-fT
z=5i*-k>gO1{9LG$lUgfYGY9fW-FW>xsGrL$VDe#HMu!sGeyHX?6=Q-@c~Gk08%q^J
zseGnLdKSK+^<sEmBlMi~p8I4>38b1BGZ|9>%wH+Q3mFT{cTrEKwSr6ko}<mv#WvYJ
z_Putu!@C%!CN_R$=F00`-Hy(xHkY&e_D@g7PJbMGX)rc4eD{^X**62Tue}$$@)J(i
z(Zx7iwoZG8gVS}h4i9U0b~+eN&Fr;x+dT(3Edv{;(+!)dO$qG^4)?Gee)r8}_xNZZ
zWfSr!pA2I0olj9dImF_79%2fJVNK#Z8X?p!>_;I1p6zK#k$CVz{K>*j?W7s(NiCFO
zuqUxa64TDh6Z;@}dLhqAK|O;IV{n9G&pxWXM94`zg;CH@v%NHtE`$>KJ#wqk`#&IE
zXNkL5|J$*1KaQPxD`hRj0%D+%-S2J?V^}@0S`C)XJDQ)G^`DLX?8mX8*KVH+%qy5!
z$_C5bcTV1U@7K3KdTI9Um+rpu+Pre{Wp1#DTO#)B(bx(9oy(VEAD^6GRM-d&7JlTn
zKl&hc<(Fa^PSNIN?3}!<+uOq8dRsGDoMIMdmc<EW)4}7Euvgm-u$dS(INdh;A-mIM
z-|KR4D#mfh+2-Js<Tc5D>}I>#9BwzK^>iI{bUJ$-ET?pKGL9phro-W}1G3pUos+S(
zb$L5Ikg2yhJDnaI-#|Ja!9sX2tV&MdcDVLQjmnLin=H`RyKDZ!?O@$CFF;G)nx?Kc
zFB|}myJoM~>0%sgjl26umEE<!i*<Sqbkwj8cbAuKbJQFnhtS6C6+`iEtGfZ0ZTwJd
zy~g>6wOYtPxO5){?-(^#OcgEcSDea-7FLjl(F_kmw4fXw>C={l=X7Uv5zFe3W%ZP0
z?eM-yFQn_|R8)Q;1a#3tES?c9D8b^1WE1A5MGK2C_m;*G(U?LS)0Cz#is7P=rs$@o
z<UWjmY7@^cL{#u2C;e-3(zTRF%xxD>HP+%CoCkq23rX;VRBR{3U8DtC_&oFgr%tTd
zhj=35O;V5IDNQsb-Q$J$D4`t@AE2a&4vG5hS&6U^f|A)nIPpwsQyl3d+RRJT5<&?~
z@Z<|=?MQr59AcW(9G(V_M0#AOskarv*l4Opxq$MB)EBr5bDu1!M+r0o#FIfAvP2sv
zfLH009hDuXMXp2T&4Gc6;FUlhD@{(gHy5(wc=YPTo!|a;wtp!0>Ue{tS7GVuv^<m@
zd-wf2AN-=h(qhfvv`DCINT|4?Hr4^`3V(ua_D;qIB&pNAuZ!()CmmdzUlym4OWW`8
z*hF+-jhH3_h{54-3dbS4i&MF}_U{L9P&hmHb#dA)N7@{OP2!XemhED#auz3rqir1R
zaN}MFAYje#WQ)M-ElfSK35Zz-`R>c$!Kqc~wAs^Dt0GmqLsh$@nYkkw!x{djOS{hR
zdLWlor-uxc{Y|H~jnbp_XEr`iQRc;wlKN0dePGXJ+xxa~$ri|MfkQi9I951bGFCF-
zIrrk(7sCa0SSxDC9NadrZE)AXt|>#wv>|(N`@r^KVYT0L>4)ck7_8nn>ABYQyY1Jv
zUt1qEJ$=)#`(LLsOkYwm7!j1+F|Z?8R1={6?qEUPl%YOq$okWq5;DJbn_%oGHfL_m
zp+3veZf=l&R$Q=orTnv%N(j$`0o?Ee27(Y6p*-O8?wH<#>BKSO7CJ$D#N#V<^rept
zBfqE+Ac0N>8j)}dJrPKe00UtQryP5UBc3>pJv5MLoCtAqr%>h=Zwut^vpd~x;F)I6
z{3`a|z@4AJ{Ku=O?p(Tj=aZp3XHPX)x}Dt?XQ$g^ceyO2XcZ7b%WVH!5;^<3y?c-`
zcN_u!-PU!`s^yfV4ySMK=<Z@YTX0`;vMx7}Ir~8e<7C~0f<itLzpXC2r}-&DPFWl{
zmu_=)*%_Na>CV$+N4pUN<2$(+g1se@J6WjJ3`N}A!8=CH=rjA*PiL0|&7I-wuArf7
zMxz_l59o)QMs^JE@YmneEQc+eUlhq(6v|r!TlMJKqv5<&Kv{G^aI|S6Jz*`--n@;3
z92wb2LqI)7K*~sLB`JE+E^Z^J7k99EB&Z1^Qj<Q~Bl3Mxd?nPE*g8J3K5RXqE9&1l
zCYi9E0fRGyMtw3yE~Kxd`s5yQdrDCq7%gI1ii1><iX^fi7577mgH(|oB(gjrC1^*i
zOL4;SXfI32fT)niD9$K-;+udBtHeLy&0rSGg}Utvg;3(js9;<Y>o}hhAvLR|-1K1?
zO+81^@ONsNAR&7e39S(-r%3A0D&!=djM}G|-!`Fgild4oDyJbpF!RaVzy>E+;{L$w
zTd&M~^q;@h6W+6$oYk)l0tZ^%ebB|p4)3)pS)}JIPBwoy^$_B8JV|40c2A2J=~JTN
z%fI2fiuDH?EF>?r>o}FP=CQTdmVyXniuNvNC(lyXV5<HwFryA&F##KRKu{n><y76y
zwu8V}D;RG_x765J<cBzUXV+m)>vVS^m9=|V6d>6p=;1W7mEggv5gMr@eej}Tn(+R7
zl-|cKgOUkOnvhU{Cb#{NLxiS>F=$@)_ppWk4IUEI9BuYYLD9Hz%s5^=Ry@I+bDebs
zc7_W!^>3RtWJL@mAw$V1Gu}Sd?ysCOtOP_VDII@e?1}LmV>|r0mx|992abk|xAyOx
z&dM9=nAkIwRq3}+XXcOShxJiQ#ksVzY0>gU=W5Q@M9UVQGoLlbW7Fl8=a!va_VemU
zc|)kYAzc30J-w<Vd(J@R<~>MLW#xY*r?Qtm$fnYAcsg7gsJOiB{bd1j(De9CL*rLD
zkR8mb{L_P6Dzjid8D0^n4J-&2teP^cP9np&wkI}GO=jv-S>wW{Z24!4D<SfEwz8>6
z{kc(%VY7CNQvUhkf-RK%?<ggN=fNr-Bm%3e!2b_}Rp^9we@0jonv{lG5y-`26aaOc
zxo6+~7NC}@E%GSr%N{(R#65x_NC*)Luzm=}kwNBLlLBnHFzP;q4-{&M6u_m3BY-rb
zj)F9iI58^xO9E68#-)@JjM^irBBaTKFai)IG;fRJ0g*wK5Evv|)(SPT>_dROLj+_C
z|NayOfV`(qnbhh6At&)<bUx*LKu%hZibOdf1n(pQzK{mQNMenMLPwlgMxQ*V&w&cI
zPkB_?12c=yB=9%z;Q!I<Jle;2F-Fjpv8$m|b`5x(jNO|+(-tqzdIHmvgdgA#W2at@
z4PCH!k%P6&O#X^zExpUJ%9&ry4txyIAG`dU*)s!T3s|fFbnK%mvu_1JaVMq|`j9dx
zL5kuPF1dtAuqc(VkD-TJ7fwakOgBqNg$~3kCW%t88?f9)ET=#oGVxvsGQi1Qj?M%v
zVC%37>T;|qLKWD}n9zjY7Vv=Ffa-%M1_(<;trBNL>mmLy37E&cc0dt#1*|HPfPAfG
z`cWjH*enV5GZ|TfhX)Q19vwJ3+CG(Gy}0+%{`31Ub)N5>{J~W9_L-9MNJ&+wq{`nO
zE?GOIcteMrY~g5?KX)pxI#4!UR5reDY~92Qr#B2WMJty03quw4Lrrh&j4rD5KNecF
z2Ex0(Qd9Xg4|G(P5ot-#y#8w2wTj<WU9Spncq+L5>EP4f4;DXvGxG;CJh2HDx7^I!
z^;HH`3g%V+=|LtT3rcu5K{`t!3o`}gNI_+&pweG|X~X#q;erMt0T!F#u`_Be?QcRc
z@K1AksQ<MaH|2><Yns+kpEguB)yO}qsE6?91$pS#D4W)(Kd)C~c%62uN&a_=M%~sN
z`QPU#Ap(jsv=H#rTLrpbFWcFctkOZn385*h;{TbZh*<3|@Ze@3u3Z9`8QMqBM}r<&
zQVsDm3vGb<U!GdyTc`n^h7{+c+eNlKk#!*+6tLxan3X<RpWG*B6bFGZVmmyjz9jBg
ze$psK3LxadD3wAhfSs}g^^j!hX@dCbi<%2C<LLSn9^@E_lVa^XsG;C<QNl}cK2a?s
zj6q6S&4}pUr|hiw=Kd12_uE=ZniZ+F1MF|Nqzo6LK$-NABMJ_Q60kSKw;^hG36a7l
z&UHKTuqlo)h_irvZHfcxf{bp86KeFSJXJzgd$kZsJcS*z5(E@z3E@4(wIgb#IG;*v
zU+sgxb}(|LIwp-tznCHL0KFjI^<hao_bE;oL;Kp442X((NE=cdlPQd%O~#Nvp*Na(
zhDxROJu;EnBZ(mnsQtn|P11@>or5eqtxUF0Gk+z49?SYPM>RdrGd`2(agO)*(7cYP
z9~R5)t8d+&I39cL&Dhlmux8yJcx7ht3QtdgWX`^EY4+6dXTJBu?8MdB)j_eA7<ky4
zl7K%jX^;jb%pPL>-2@<03^IJR+XElQK0YoEg(u2)K6xW{`e!X&oer@Ho`RE}cot)3
z@-?)#obiJmlxRp}@1DFp^rP7`7h`7veA}o%t#%*U?_C9Rfv-p2^X{2rcYb-C*F&}0
zoopAB0NvDlHI$HX_ZC#;l!p(1kO)>|xtDcuhAywC+v~9%b~0e)ON+-2IGp<rc(}~H
z_O^rjS+J>~WyJ-mDEaOuHhGcc^Mi^7uEZ`)g2;+&%`ywBeXkBSSO^z#_y2&~b6&>D
z!F0%}4>}y(B(M*tyr*sjQ6tBflFS4@Tb8e74Hj!@5(Co=O%oo3Qy;doozBkvL?-1l
z?rs;n$Po{xbafpDwXQ~ZPa>&uYM6=@-B23I7h!KWnX`*iZ|d<l+|9c<bz4{GAqNX~
zb2r$NI0f2@cvZ62+v$G6>u`XT3BiS^kXf_?aO%!3+kO_fBh)){21jQbRI-u%!znsJ
zYGzS|!znvK&hFt<cDJXe+d()ctCnYxTCl;TSV)dT*T4XYObq5MB*I_`Bed89wpN(#
zbUwBZRN-E*F!8(;5>4SO@az<qW=kGQZ*i)AFFE%WsP4YZ^HsT(TGMn+-pK0V)gv2*
zH%wGc<y4_yoIac$EL$^KIB5u$Zkfv58Z{QpB$Um)epk@6Zp!f31K^lUBhL;$8_8Q3
z%3C<m9$B<1v}jd$(VB4H+JUY8js5Oh8QDYoUhSL7DGKH+n9eOky<xEIxvAXNXi@1*
z(Sk_P(ooUTsHr?!RuL^<7+tvRfmT_ZJ*0VHpbE_6x-s3mE6z2XZSWrmFIXKmt%;Z(
z51AgnmKQcXF|36C`7#p?VN-R)v?^p;74U{l>xY!_;f_}O^DY&hFZ3G%+a|rA^nTbo
z31i<rW!M4w$zsd+#<7k5mEoe=NYT1b(YndTaM6ZHQDdm65!kq;*O!KiTKad)WaW>P
z441rFdJD7zg=Y&RWotq(ImO|!twZUzGR+g9A6OYGUpZNRjR}^o43}>YWp0NY<HCs1
z8ZuhL#-$NsZOB*~Hr7Rq4IyL0<l3-t%U5YscG*bj-;@e`pbXYR-~+4uFv*kUlTS}>
z4i-E<WoVqvF%n(9>1#J~*(X*%siCekE&>131)FQ(@%Oon<|iJL|89jABENe~`J_^P
zgO)@1hLZRi?USqIH?oSJtd-xWRYI6k;Ng*G^!@?12PzMMgvG@w=u>n)dcVldwIgGg
z;-FTXZAs3!5N`=Ipm-vQld{7JBq~lq5m{24)O`S-D9$5$=95dYa}3-QxG3r=2?@oL
zqSiIhjWC9G2?8eON!a!nku?DlnxX}jAfZZ;go-*`LP8ZDQG44iGIoj4fyNX`D6hv9
zdqlk`SnEKK*#kY}Gl_(1yuXI}A_3xY7ibSq7?F62xnkg9Qi)pzE(wr|u^+u0d+$TB
zFhY_TktC9QweLzK*}sGl?_r+<pM4&@mL!T19{^E`TG$^zt~H&Q{89j$bz*G-*7`UG
z;v29BF&WpLb)ko%CNI|_yO^x#WKoph^jL{EF1ooi5}6OlN+?Ajnb&n11USZ`y+w~e
zW6b<5RCNC>cp&8F>a`{?+K*R{Rr@Ra`QgIlk;1xAVO^l<^7i+)hYKI?-!4KCsx682
ze^tn`D)3_1vUw;inprYY5-F<-mDNqkt~CYA>cVBsq0Hu?v|GlCh;d2CxFl?>j2M@P
zjLXBu6%pgwka6uKz*Ey#S`ms2aZP116nXsn0-FLa1locH4O517Nl=8m$cc@cR#MmL
zM)M}C{L@k`L_W1DH?2^AS}n)$3gWNSZeAe&bVJc*v-~r&62dJ+!O)hB9*7D=%ybd-
zc@*|s5O4&}?lHOtZU}s5C1jGS3u=jCDD)e5ppv6~vLmz`tPD=-o2^G84oHZTLLMVK
zgSL8Pm{Ocifn2kXIzmg0gOT?_t8KEx4Jl~l8*mD2EaE+dc1c_!h@nKw2cvph6puhi
zQ9MIg)!rx!Mm)T;mp=maQk=sBwbcB(Vq!5d@Gwm9Yzx{bzJa3_%mzY{*vl{RIxex{
zZ-*3qkj+h~D<fzi!ELvkm$QWJLRBlLu``SVZ7_FnA9>N55r0$AzVR;(W*$M=2VA$x
zvZT4G!NSp2tDbd3ao(~bhjw@i586)HM)WqJhrO^{(Ia4j_LI2PBxw|?L*$wer{QPH
z$)uV~w9q`ySoWGy@I%a*f~MW?f(PJ{Pi5yvvKEB07EEjlXVvtpqWY}<4bdDUvBM7P
z26Thz1L;GDrZi?q$u*5^9NyTkxm8#ZHCcX|KCx-qWEnS%8BV81Ov^*2<zdr`duqi3
zUB6;5Z6IyvKuA+MrvroTV8*K%qqQMT@oO2RVcx(yr74-wq@!Utm|qvz7I<v((6s~C
zT5r4%%zb)Fvpbq$?9X5=Fi=jP*cot{OV|PKc{qUQlHkBUfVyP_ZV?{KV1VOD-2O=@
zA9?|J`(*pUb_zcQ{FI4H2#Jdac%}tW_Cg#zny4TAhN6f<M@4*fp9apD$eF+x;?AcQ
z>hx)S+T%a+DWud^K2doBXG$qqLKO0eYCwXoNqR$(s`tVu7+Eir?$d#4KqF$4h&oc}
zBH+(AVFn{7*d*eH@V<abI)Y7d$+yr6vjG;^cYu3BX(Yvg1wKB@Q04;#U<`ZABchU|
zy;^+VK2Xw2DY&HgAfG<b4?)uJI;T9gBGD!edPEpVal#w|wu*M~_Og^h5M>ln>jpTh
zOg63f<bbm(?>|EY9pMzfn;rNNFX8?f(bg?sDX+kY^^e>+>lgdOe#IjvloU}{qOe#~
zlARN<H>F|=+XpYnz6hQdH)--)TD-{UT13SS7(GO&wPvw9Ad}NNKzeqtaQTaq_d2@?
z<bo*O4TkJT11=})?B-O5;Mz^wL4wch51}nK1%?g04E_>koy5M>AXIx@9yh1v@ff%}
zxF`nqNWr`fH&ERi?M#3+dkpIx$9ie;;x;?W+I!q+sKdz>9M1)2ia_nQ?X`Q_4)m5j
z3d!RI{sr1`Z-BD{fNr7;c|m<K+yom{y_+-f{cu@r$W+_kd@DP*UmYbL+~iCH5xBDM
zgSx<r*P6q1Eq}1?3K<smH-<764(UdpjOG<Y@)n2k7W;MKyt@9a(Tu!cMp-n|hywoT
zp{dM8z%xcND?*tS6HiZNE(S>FW#Ws^1dJD+4;8JQ1X+0fkmgqTvZ!UrJL&#S)0QRY
z3}+2LPmfsEge+^qmIj~`OS6X*BWc5FqX$CJ2$(}mq=O?jGnd?ocjmd7Sus~iRX#=E
zE2j)OGhno79&4W1A1<!$-zi*cYZ+)6T|Z^8Vtm)DyUw^LR-g8T3`<|z1tUuXOMhv|
zP&#EO6NLM!i*o-H7Yq|egDbZOO*^IxJ8xy=_owruCKFURY!6RE<2Mry&Z9F5m~BF5
zo`L|-nMcUF7vflka^*3gHP2v4te4_I>J+IAoORk8fdb+Qx_j)WcRqQAKQgmJXKsJ+
z&h68aGgq(jDPl1(@Gwu6`Z^$njsN1#rFZxiBs7)>8!S9Gbo-;9%>L{Q95g^1u>;(z
zVnp(MCl4^?j9X>=vCOi$9d@|IZQI*p<Bx<@!Jn~VczO13z~c=3z~d(dCmp-yk4Q$M
zI$;cY%_%1&C4Vujg}V-#ARLdWm{+g_D;vVbb^V5@-Wb%EMsxDulw{;YG8V!ym~aIe
z!x^iBnpOO+(D9=|+3Wx7X81h}TAXfvGw?#}zh^VxTL{~LZ%yn1=lDN%1N6Wfv2TDU
zEcpl~;F7a%g6E#U(&>qnBtmiO6~y`3YjB-cKr7-pqx9-83>)je(=wA0%v)bkxV!;P
zlfw?Jr#dM?lA(#E&*;JTAx?@(Ox$>-DTIiG=!hS|v<p>}o>F}YOlsew>gbaihzFCI
zTf)f7<BYJ#ASPWnlruDnCveAvJca%)#32rt;@uB1#mE+mR?bBKhu|{aDU&BhNbzZe
zRuZgUf_3((K%|ADa8(cmVu|*A8XVa#XkfCH?V_zyXdT9!#9*J=15Bk7KvwC!4kg4*
z9|u`pUL_zaW{H7E0V|JB!fE1VUa``j<21z&I>F);I3@NHFB+glZV0q;x6fZ8tdvy_
zh6{$%xt$&GfehU6>){k|7yh8tz)Pa4PEQwHH|E97zk)_Md504&{qaYN{Sl<Fub_t$
z%*madU@;*^7`7i0tU4aB@yx~nTkOaQ9FRKB3b8-N0<WWY20UnoIl{qh0m45a<BfB~
zJA&;58hR}$c>WN*XvUL{+6Qvdf$ld9G(_~pA${=#{g3)GREPst5G-0YWvC*^K4Zuj
zqKE278ipGpITfLtiZC!dw5SiO4Owaf%dXL3%chW~q~9>KpD;|*6;&780?Q^}c)#Y_
z>KnD!8^YBsf2aUv$%4$11(>DHQLt1nBOSvX|Cq60rm$qR?evoAa^#%K>!QUa6ZF`Y
zdunB2_MC<?7Gbf8&7u4yb6Q9mQo)tLIL~wFX6B-~ENbCX^c-CJGsc;bc~|sAD4KxR
z{<lC892^mZplaMfDoV^L4pLDsk>Vg#LPmmA@v2#(0z;os!4Z>rQ3HMF^~<rrx5V9f
z`=jwY@133b<m~M6OI8(UARCZpwcLptuSs8g<w6@)HP4y<48o5r#IA(gqzmhu7QgEN
zzTV@0ND(6D9KcP47nooZ!R61g@oi(<BE?mq;wt=*!aQb1wQ9{+jqrd4^bPx>`Gq3~
zhY#LMQ)lYtD798cI0VAr&$Ei)oD)9rDg<D?P~!-pRCkDG3p}8);GNWcb*ZZ@(rx+Z
z^~hyPXd{xO(nMcUGWbK6VtNz+m;Vh$C!$)cf8y@gyFCB+$E*Fb|H(gla`2B=f4UXF
zZ~&7uZ(_cE`h(fmf5DdpH5+enhVKXAVj6I<v8!+X@#=usq!@S@W(7@`Ab2)6iG>k1
z#E2v>Iy-tPHuOvWQzCvSVtM|1Bw|8tZb~wwZ}p<Wlz%(8S;yCEu<Q|TXD^0amcV7Y
zjdhT(`r`NDh{{gJ!{Tu$<;Iy7SXKk;=;(rr%sjuEs@qS_#9i!eg{rVCb16gaX#M#5
zvGpPS5&_gomIq7$U9bpEsnHx0k#Poh4(uFV5;QD;nDG5XvU+W?Uo+7g%v~|1sf%Xh
zkR3Y@Tu`Y&HmibHo=I+1_sWEt?7KtC1$ZBHaEnreA=so6JV|1c_Rye|d&Gf}GUEv~
zffH$nb0T=(ijp$t!7VKE3AivWyia>P8*Xw*D9RHzpg<*6{fI*+TTh*OOhNtG=7wgM
zC-@`jdtTz$l`tj=z?S5MlGXR$I{#KV`4D{mf$hKjh9ABQ=g-9KPhOk(?U~rn>u``;
zh`Iwf3*;5ZP0_?HPaeHdr2>}~JP!B{&y9tUiC_oNdlfy@y9oC|PhkR{Aa*Bu$Iu%D
z&y55N554ex9WMLB*Foo<%2)9;{Z}Y=i~`|qu<zBrY3U1+hD=dU5H)1OF#>r|9W|Ga
zcZ_vJ%(WqN?H|l_11<ee4lxP+h{FGTXh}mjZ{0&m5~SxUDz9K<=kU&nC86A<b7@p*
zJzV;i{OakS^x4zjsM;VO+{Qn$C8yV_=+%7Bxu<GVRox0M%Vmcz>{slyx$Elp+V-wq
zdyv!ej46Cj?1X<X0eXcND}5J<xV0ERC&n-KZ8lD4!!IShE({xNwimp1S3E~;voT$5
zkSuq5SoSPbWJ}RQs?HXphbzj~qle2vmJ%+yFhsS*FL4j1<C$j>Uf2`pA;_>p=)HyB
z7<woTvgg6$6nne6T<k@R<Jz95c-m^l1ROl^kjr=f64v!3^-qdgnB|J<=z>*I%Tl-q
za!*^TG)GG;b8>jzf~OLmP^8E_r^b+mDzV(hGGA_@4a)2<i}esJ%!5$1Nokp@uUDG<
z@;M3~0nKFgCxssthL$(o$M~F!&QqEua^@&__)UTG%a!j}hOF!FWBguqDdcUQqu>!(
zGud=4=UUq}(}yjgy6q$__^d7X*KMI^nfq8`u8F3$(9QHc`EsSv-xSC>-#kY_FuGtV
z#Bu{|lXZau@0&x*9uF;OoWnxVolggMw+6reSE1du(9XZUk7@T9IzzcS0HcM+B>%X!
z=SIa1cW}?MH;(+5>d=<w?qlA)a`5~xa4gP0CYfvXH{>^-xuLnfA+%vPDK=ML0;Ab`
zsr`KW90kG2XUOB>CLwQbgI1{<t)GxjJTsvg+i;(P=v;oDGIs(h!Nb1?rzQ7(wNYv2
zmym2dBY!_@BP<}N#;<DeR#qFvRB+=7BV>CdwhY->E?jtm6xkRm$MW*0ns@Lwv}!PI
zIeK>V5DW?Pw}X7N%l-xv3C$+^=R=HI(8E2&X&&RZ{|5GBh{Bel+{eM2lhZW)1*QFh
zO8bIJhrmBm%fi&MFR1J<D8m<2=6|R1=45g@>kCEZoJvmTexb<u7ZpXDZ)pqrjS+2O
zNLx6%CakSErus^?O+}l(q|pD@IU}XX`I4gPEYMV**n+*lm$aIAVlEKo6Hj7d?$>U7
j$$+A<nEG2qqm{Z|tZrN+zrK)0->Pn`lV4v!ga3a4n>~z{

literal 0
HcmV?d00001

diff --git a/spx-algorithm/resource/vector_db/__pycache__/vector_db_utils.cpython-312.pyc b/spx-algorithm/resource/vector_db/__pycache__/vector_db_utils.cpython-312.pyc
new file mode 100644
index 0000000000000000000000000000000000000000..a1fd4b9bd8132a276aed2245ffe5d24cd248a1e2
GIT binary patch
literal 9205
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
M-Z5K&NC|@f8!hNqIsgCw

literal 0
HcmV?d00001

diff --git a/spx-algorithm/resource/vector_db/batch_example_db/index.faiss b/spx-algorithm/resource/vector_db/batch_example_db/index.faiss
new file mode 100644
index 0000000000000000000000000000000000000000..99335b2fcb25d57c608a1fec5429ad8c7e13561c
GIT binary patch
literal 6189
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

literal 0
HcmV?d00001

diff --git a/spx-algorithm/resource/vector_db/batch_example_db/metadata.pkl b/spx-algorithm/resource/vector_db/batch_example_db/metadata.pkl
new file mode 100644
index 0000000000000000000000000000000000000000..1d4df95b5f2c939c9e037d4d3fa706802d665bc9
GIT binary patch
literal 847
zcmb`F+e*Vg5Qb}8Xi^Uk;1hV0Zj8;LMG&N*QhHat4cqLPEaXu4P*f0nfV~mdXY?^N
zX|1iG-n4tS{|xibH~i1dw?U&ee^2^I85synu)w<f4QrLurWuYQoMMq^b%CxqFplnM
zP9+)?k<1_$98Dxm2{6Q`_ZCj$f>DuVhygDoivZ0a5(Nv%1d$@{@L8;row?mDO(Dk_
zXw_O)lu0O?_djTLwxOR^W@Qm_`UraTa;o+jq*&0|66o7jDgzS&B*a3iL&tVp%ML8Z
z8y|Q3cF=d6j_W#h(A9ESt)4X1<%YYVND5dTBWWpPrI?$eC%Yr_HQ8I6DwBiX(R|zM
z`EH3;U!YxW1I_utW>#!p(stlJ-b=W(v47G9p4;nrTFNrZB#a7~3t)QKsFGI3m(wEG
lqgq|Hvw}bxF7jyH(6M!Hoj6*xBL-Of7mdL4eAm~q^9eOYFHZmf

literal 0
HcmV?d00001

diff --git a/spx-algorithm/resource/vector_db/cute.svg b/spx-algorithm/resource/vector_db/cute.svg
new file mode 100644
index 000000000..9eac5733d
--- /dev/null
+++ b/spx-algorithm/resource/vector_db/cute.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8" ?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1024" height="1024" viewBox="0 0 1024 1024"><path fill="#FFFFFD" d="M0 0L1024 0L1024 1024L0 1024L0 0Z"/><path fill="#4A333B" d="M551.947 184.681C591.215 135.071 633.561 92.6277 692.101 65.9868C702.733 61.1484 727.847 47.7836 738.283 56.8399C744.97 63.0959 750.141 74.6972 753.551 83.1757C771.683 127.146 777.833 171.032 782.101 217.84C794.034 230.906 793.787 231.588 802.476 246.074C801.525 240.9 797.48 225.258 803.484 222.789C805.949 223.17 807.725 224.953 809.087 226.963C822.522 246.787 828.076 270.923 829.182 294.294C831.186 289.704 839.632 271.029 845.973 273.996C848.411 277.691 846.824 284.613 845.963 288.777C842.546 305.294 835.95 317.42 846.32 333.273C855.551 347.385 869.759 356.154 882.784 366.593C907.209 386.047 931.503 405.027 952.43 428.403C960.761 437.709 967.808 445.532 974.722 456.049C984.781 471.351 984.809 474.38 971.974 488.056C947.177 514.477 916.064 535.578 884.737 553.504C862.783 565.809 836.122 578.474 812.484 586.747C812.685 590.532 812.994 594.325 813.672 598.038C815.35 607.232 819.353 615.696 823.084 624.185C823.58 625.313 823.122 626.365 822.662 627.413C816.285 630.865 799.493 619.052 794.604 614.547C796.91 619.779 797.581 620.829 801.027 625.332C803.845 629.013 809.726 634.447 811.095 638.42C806.759 644.481 785.774 643.742 778.837 642.141C781.495 643.679 785.85 645.732 787.325 648.182C786.594 657.767 755.654 646.687 750.836 644.949C754.231 648.34 760.567 654.026 762.31 658.153C761.434 667.18 715.255 657.232 708.086 655.652C707.512 655.877 707.007 656.021 706.509 656.35C704.102 653.976 684.713 648.904 679.357 647.122C687.12 659.221 696.143 673.361 700.818 687.072C701.634 689.465 701.573 690.118 700.479 692.073C698.844 693.21 698.653 693.156 696.595 693.465L696.04 693.543C697.411 700.38 710.166 716.925 707.158 725.47C705.177 731.097 696.328 723.861 693.721 721.804C699.346 739.853 704.673 755.369 702.925 774.738C702.526 779.161 702.715 783.153 700.972 787.36C699.88 789.996 696.629 791.329 694.296 789.894L694.985 789.579L695.166 789.065C693.289 786.44 691.668 783.662 689.996 780.902C693.22 794.774 692.033 811.364 688.515 825.092C687.709 827.721 686.375 833.125 684.153 834.773C679.141 838.494 675.725 827.41 674.143 824.393C672.044 840.487 667.288 856.44 657.986 869.816C656.662 871.72 656.096 872.93 653.744 873.398C651.738 872.862 651.886 871.942 650.193 870.533L649.197 873.345C645.909 882.786 627.177 916.068 617.095 915.313C615.564 914.531 615.061 913.152 614.176 911.599C607.976 919.749 596.122 930.711 586.431 934.657C582.686 936.182 581.822 935.752 578.717 934.386C576.5 934.914 566.16 944.233 561.496 946.624C549.845 952.598 541.33 954.073 529.01 957.51C520.459 959.895 508.079 966.477 497.75 964.593C495.506 964.184 494.389 961.864 493.503 960.016C441.111 973.953 377.438 970.335 325.237 956.945C312.682 953.725 301.279 948.606 288.993 944.8C286.351 943.982 279.047 943.795 275.55 943.297C263.067 941.52 250.898 938.723 239.218 933.855C236.986 932.925 233.654 931.6 232.997 929.055C232.392 926.71 233.479 925.404 234.746 923.62C223.19 920.863 209.725 917.032 200.886 908.54C198.179 905.688 201.997 902.937 198.497 901.118C189.981 896.69 157.83 885.711 175.506 873.544C164.966 868.191 111.158 835.024 136.051 823.382C126.166 812.884 116.57 803.367 107.715 791.862C84.0105 761.004 63.894 726.267 53.2293 688.647C51.5319 682.66 46.3877 668.666 50.0675 663.264C51.1817 661.628 55.2177 661.479 57.2034 661.23C57.4541 659.314 54.7248 653.63 54.0814 651.512C47.7538 630.684 42.5908 608.454 43.9181 586.56C44.0471 584.432 45.1219 580.649 47.0696 579.678C51.6201 577.41 54.1478 581.412 56.0991 584.255C55.7363 553.673 56.7001 529.221 63.9954 499.098C80.8065 431.143 123.669 365.606 183.893 328.683C189.966 324.96 235.539 301.584 238.74 311.138C238.462 313.006 238.094 313.188 236.754 314.699L236.344 315.153C260.344 304.882 286.931 302.97 309.911 316.861C322.98 324.761 315.431 330.784 311.861 340.888C310.799 343.895 312.242 349.232 310.914 353.128C308.827 359.249 304.146 362.288 300.628 367.412C298.736 374.874 299.421 377.254 294.732 384.642C281.907 404.846 261.441 417.252 243.638 432.514C229.79 444.386 217.038 457.02 206.157 471.691C168.331 522.025 157.242 588.512 165.689 649.995C172.595 700.26 193.334 753.864 225.397 793.571C238.781 810.146 253.072 822.586 269.984 835.295C266.287 827.315 262.713 816.506 260.108 808.027C245.71 761.174 237.982 711.424 215.85 667.255C214.344 664.25 212.723 660.866 211.737 657.663C204.65 634.638 218.083 603.388 241.82 596.042C239.333 583.88 236.31 571.834 232.761 559.938C225.634 536.415 214.583 514.117 225.957 489.867C236.609 467.156 264.708 460.287 286.081 471.689C301.121 479.712 315.281 489.658 323.025 505.177C333.711 525.533 340.527 548.417 347.52 570.087C358.751 559.456 365.68 554.693 378.46 545.933C373.938 543.42 358.77 536.548 358.422 531.527C359.714 528.839 367.355 524.735 370.22 522.995C360.967 517.186 351.06 510.54 345.465 500.96C325.207 495.264 306.72 487.11 292.638 470.796C285.023 462.031 281.244 450.577 282.15 439.001C284.564 407.976 326.581 399.995 351.409 402.763C387.326 406.768 417.013 425.004 443.167 449.09C449.572 454.989 455.925 460.223 461.511 466.848C449.504 440.282 435.18 404.214 428.49 376.221C421.232 345.847 419.427 303.469 422.917 272.598C421.874 271.67 420.463 270.635 419.334 269.761L420.231 269.268L422.621 270.771C423.545 269.458 423.984 265.317 424.227 263.434C425.235 255.611 431.827 225.091 437.651 221.528C442.475 221.505 444.406 230.865 445.651 234.682C447.074 226.892 453.781 199.49 460.061 195.105C461.697 194.916 460.979 194.718 462.286 195.723C463.933 198.899 465.492 206.224 466.36 209.982C467.245 202.57 471.295 175.931 479.655 174.165C482.843 175.015 490.359 185.737 493.893 189.126C493.47 186.605 490.171 166.462 497.016 166.353C500.582 166.297 509.456 174.444 513.288 175.917C525.502 181.389 538.731 184.455 551.947 184.681Z"/><path fill="#FFFFFD" d="M436.482 485.504C451.973 480.774 459.225 482.479 475.109 483.903C487.467 505.968 503.852 528.508 520.055 548.028C525.286 554.33 532.971 561.501 538.805 567.638C506.508 545.004 461.806 540.732 427.891 562.734C417.141 569.708 408.334 580.412 405.783 593.194C403.215 606.063 409.793 617.438 416.78 627.703C429.872 646.822 445.631 654.95 468.116 658.916L468.2 659.511C473.369 694.285 500.882 733.125 538.186 736.729C563.472 739.172 583.558 729.282 602.786 713.759C553.353 736.102 510.721 732.76 483.458 680.019C479.959 673.25 477.126 666.363 473.936 659.463C488.804 659.252 505.771 651.925 511.6 637.389C500.444 645.019 485.457 650.94 471.672 649.666C453.833 648.017 446.546 634.101 458.089 619.454C463.519 612.565 468.727 609.077 475.92 604.249C456.881 606.295 444.578 620.002 444.885 639.21C436.237 634.81 426.254 627.96 422.375 618.708C422.743 611.803 424.867 605.107 428.545 599.251C434.713 589.28 441.09 586.532 452.004 583.922C431.71 579.916 422.251 593.923 416.545 610.803C409.254 589.155 418.81 574.552 437.965 564.118C472.401 545.361 513.666 554.881 542.08 580.123C562.592 598.344 573.755 617.699 586.553 641.369C582.999 616.151 569.75 600.328 555.422 581.306C565.615 588.047 575.728 596.778 586.797 603.903C605.933 616.222 623.501 624.726 643.912 634.282C652.819 638.194 659.885 640.364 668.251 643.788C675.117 654.16 684.252 669.61 688.867 681.082C680.964 676.605 675.94 673.315 667.355 670.451C672.71 680.086 676.902 683.826 683.926 692.312C688.878 698.296 694.221 707.735 697.245 714.902C686.41 708.57 678.185 702.264 666.288 697.292L666.634 697.983C670.346 705.316 676.483 711.527 680.926 718.204C691.132 733.544 694.17 756.388 694.856 774.318C689.159 766.05 676.376 748.021 667.857 742.926L667.106 743.101C666.844 745.629 675.031 761.646 676.649 765.846C678.262 770.013 679.574 774.292 680.572 778.647C683.618 792.096 683.12 806.903 681.764 820.558C678.879 812.31 670.807 794.598 664.531 788.533C664.834 795.671 665.643 802.886 665.982 810.068C666.917 829.834 662.16 842.867 654.795 860.568C655.995 847.36 654.803 830.144 649.298 817.989C647.065 854.575 645.774 870.457 622.293 900.973C630.163 883.933 630.038 874.348 629.321 855.9C622.718 877.811 618.209 894.639 601.505 911.453C596.838 916.15 592.689 920.285 587.211 924.198C595.537 911.5 598.783 903.257 598.422 887.73C586.578 911.797 568.963 935.436 542.559 944.471C541.805 944.729 541.048 944.98 540.289 945.226C548.488 936.183 550.756 928.119 553.39 916.383C549.626 920.916 546.456 925.737 542.665 930.149C532.427 942.066 517.947 952.991 502.159 955.694C509.618 948.22 511.188 943.61 515.328 933.81C512.06 937.172 505.802 943.561 501.355 945.438C478.565 955.054 447.932 956.806 423.49 957.468C414.591 957.709 398.602 957.512 390.396 956.465C369.309 956.291 336.888 949.133 316.503 943.143C310.267 942.144 299.487 935.521 293.78 934.997C276.283 933.39 262.768 933.366 245.726 926.676C258.24 926.454 272.611 925.13 284.124 919.873C255.176 918.737 234.827 918.029 207.78 904.065C220.974 904.624 242.162 905.287 254.977 903.053C250.034 901.589 239.053 900.408 233.416 899.55C212.724 896.402 196.472 891.337 178.43 880.394C192.94 880.761 204.645 883.623 220.319 883.6C187.675 870.754 161.566 858.433 137.687 832.195C143.463 833.664 148.282 836.199 153.727 838.571C162.918 842.573 171.332 846.361 180.938 849.245C174.221 843.473 165.742 837.806 159.173 832.086C147.844 822.221 133.709 808.113 124.524 796.161C126.961 796.181 146.523 804.045 151.973 805.416C148.926 796.999 145.715 788.643 142.342 780.352C149.652 787.358 163.863 798.292 172.128 805.041C172.038 796.461 168.824 782.782 166.977 773.883C174.907 781.212 182.923 788.446 191.025 795.584C191.421 788.795 191.374 781.987 190.884 775.203C190.633 771.472 189.809 764.391 190.203 760.972C208.341 792.827 242.045 835.121 276.078 850.332C279.206 857.192 282.704 863.878 286.555 870.36C301.316 894.777 313.737 904.174 341.498 911.077C328.374 901.571 317.7 895.58 307.476 881.603C259.143 815.535 259.393 728.094 221.434 657.083C215.81 646.562 219.535 634.117 223.539 623.728C244.62 624.175 247.214 633.121 259.908 645.156C255.848 628.668 244.311 618.66 227.079 618.445C233.147 611.265 240.474 603.568 250.877 605.144C265.873 607.416 272.463 619.498 280.866 630.08C276.335 613.78 271.455 605.745 254.533 600.516C270.212 597.617 281.039 597.522 290.275 613.165C291.652 615.498 293.007 619.298 294.995 620.973L295.758 620.767C297.454 616.078 294.164 609.514 291.757 605.521L292.773 606.087C307.089 614.105 308.536 619.831 315.544 634.23C329.533 662.972 336.657 693.561 345.268 724.106C336.941 731.765 330.336 740.975 326.547 751.649C344.517 732.868 364.397 719.713 390.104 714.031C459.678 698.653 517.202 744.24 541.325 806.516C539.364 795.822 535.866 785.468 530.942 775.774C515.381 743.955 487.573 719.813 453.884 708.874C428.424 700.469 400.25 700.454 374.619 708.733C367.861 710.916 360.274 714.948 353.842 718.169C342.9 681.437 335.701 657.23 318.703 622.786C322.461 613.164 330.111 603.669 336.759 595.785C355.817 573.178 378.222 552.877 404.609 539.201C412.969 534.868 420.491 532.954 429.55 531.213C430.655 531 431.052 530.314 431.655 529.502L431.135 528.397C427.537 525.723 422.264 524.372 417.909 523.006C431.949 516.633 443.655 519.693 457.869 523.734C451.709 513.825 437.075 508.483 426.825 502.235C442.053 497.168 454.235 499.821 468.858 506.026C460.913 496.246 448.275 489.387 436.482 485.504Z"/><path fill="#CBC3C2" d="M643.912 634.282C652.819 638.194 659.885 640.364 668.251 643.788C675.117 654.16 684.252 669.61 688.867 681.082C680.964 676.605 675.94 673.315 667.355 670.451C672.71 680.086 676.902 683.826 683.926 692.312C688.878 698.296 694.221 707.735 697.245 714.902C686.41 708.57 678.185 702.264 666.288 697.292L666.634 697.983C670.346 705.316 676.483 711.527 680.926 718.204C691.132 733.544 694.17 756.388 694.856 774.318C689.159 766.05 676.376 748.021 667.857 742.926L667.106 743.101C666.844 745.629 675.031 761.646 676.649 765.846C678.262 770.013 679.574 774.292 680.572 778.647C683.618 792.096 683.12 806.903 681.764 820.558C678.879 812.31 670.807 794.598 664.531 788.533C664.834 795.671 665.643 802.886 665.982 810.068C666.917 829.834 662.16 842.867 654.795 860.568C655.995 847.36 654.803 830.144 649.298 817.989C647.065 854.575 645.774 870.457 622.293 900.973C630.163 883.933 630.038 874.348 629.321 855.9C622.718 877.811 618.209 894.639 601.505 911.453C596.838 916.15 592.689 920.285 587.211 924.198C595.537 911.5 598.783 903.257 598.422 887.73C586.578 911.797 568.963 935.436 542.559 944.471C541.805 944.729 541.048 944.98 540.289 945.226C548.488 936.183 550.756 928.119 553.39 916.383C549.626 920.916 546.456 925.737 542.665 930.149C532.427 942.066 517.947 952.991 502.159 955.694C509.618 948.22 511.188 943.61 515.328 933.81C512.06 937.172 505.802 943.561 501.355 945.438C478.565 955.054 447.932 956.806 423.49 957.468C414.591 957.709 398.602 957.512 390.396 956.465C392.561 955.309 396.742 953.733 399.266 952.53C439.353 933.428 472.369 896.45 491.499 856.807C496.71 846.008 499.76 835.76 503.786 824.675C526.165 824.289 553.186 815.664 566.42 796.397C569.845 791.409 569.568 788.991 563.975 786.388C595.182 759.545 625.43 710.593 636.872 671.043C640.617 658.094 641.329 647.143 643.912 634.282Z"/><path fill="#FFFFFD" d="M726.575 77.4435C732.884 77.4646 735.115 77.6722 741.138 79.4247C747.246 94.3214 751.724 110.755 756.318 126.185C763.274 149.549 767.777 173.48 770.813 197.643C771.371 202.089 771.906 207.007 772.775 211.384C769.163 208.11 758.776 198.584 753.873 198.607C750.796 200.468 752.602 204.099 753.915 206.741C757.296 213.545 761.583 220.002 765.261 226.645C759.488 222.253 734.632 204.098 728.399 211.781C728.098 215.482 738.889 224.093 741.833 227.208C747.685 233.401 752.493 239.523 757.58 246.312C751.383 250.978 744.381 254.986 738.292 259.617C724.55 270.222 709.896 284.915 699.774 299.058C672.255 337.51 649.346 381.965 635.338 427.19C627.821 451.459 628.559 486.516 636.612 510.218C638.114 537.192 682.562 581.337 701.997 600.469C706.406 606.493 721.742 616.618 725.057 622.026C732.346 633.916 740.211 641.623 748.549 651.979C738.136 649.376 722.476 646.839 711.384 644.583C709.656 642.231 705.292 637.733 703.186 635.387C698.544 630.241 694.135 624.889 689.974 619.347C681.3 607.637 675.566 596.142 667.832 585.374C672.519 602.649 692.717 630.229 705.244 643.013C697.946 641.293 679.061 635.135 672.421 632.162C666.953 624.471 661.301 610.907 657.478 602.096C655.696 597.989 654.202 593.519 652.023 589.606C654.928 604.032 661.1 618.314 667.733 631.356C654.533 626.006 639.454 619.925 626.772 613.583C589.892 595.139 553.157 568.894 525.328 538.291C461.987 467.539 428.762 374.858 432.727 279.977L432.676 278.276C433.2 275.984 433.271 273.529 433.427 271.183C434.354 257.269 436.453 243.535 438.382 229.727C442.027 241.519 442.715 247.783 452.277 257.373C453.226 256.319 454.842 233.771 455.43 229.748C456.651 221.893 458.337 214.118 460.479 206.462C464.197 223.591 467.839 232.366 478.969 245.7C471.724 227.965 476.246 200.738 479.639 182.1C482.887 190.283 487.161 195.689 494.754 200.315C503.864 205.865 518.658 210.013 529.236 207.542C527.869 207.007 526.516 206.438 525.177 205.837C512.333 199.968 506.252 191.63 501.462 178.931C518.403 195.739 550.606 197.324 572.427 192.212C595.087 186.904 613.876 179.586 637.268 185.951C627.447 179.041 624.569 176.821 613.078 172.901C617.393 170.925 622.04 169.776 626.779 169.515C639.98 168.763 650.211 173.28 659.807 181.858C657.332 170.856 646.593 161.615 638.302 154.566C655.961 159.852 660.801 167.195 674.64 176.366C668.483 160.939 661.239 153.093 653.172 139.334C670.898 150.015 684.609 171.446 692.443 190.189C692.505 180.639 694.016 159.992 694.962 150.178C695.903 157.734 696.819 165.502 698.076 173.002C699.712 182.752 695.759 190.057 694.719 199.993C709.415 177.952 726.332 124.556 727.389 97.5285C727.647 90.9451 726.541 84.7767 725.639 78.3093L726.575 77.4435Z"/><path fill="#4A333B" d="M432.676 278.276C442.052 282.881 466.644 310.952 469.136 321.757C469.479 323.242 470.236 325.546 470.623 327.166C458.624 307.572 450.03 295.549 432.727 279.977L432.676 278.276Z"/><path fill="#4A333B" d="M587.346 218.207C618.682 213.96 643.838 234.256 640.481 266.918C637.564 295.306 614.39 321.901 592.963 339.461C572.074 356.579 534.797 374.501 514.844 345.981C500.302 325.92 493.546 296.543 496.651 272.457C500.808 280.911 504.82 301.208 508.231 312.181C509.398 308.667 510.641 305.614 512.04 302.182C519.473 284.713 535.924 265.622 551.786 255.398C575.294 240.247 608.444 232.416 626.418 259.828C622.759 241.533 610.681 234.744 592.893 233.388C559.685 230.857 532.824 247.186 508.422 267.872C526.98 236.229 550.902 221.698 587.346 218.207Z"/><path fill="#F4C3BA" d="M558.879 262.562C560.555 263.193 560.492 263.08 561.502 264.539C561.331 267.79 554.352 271.556 551.7 273.69C545.423 278.834 539.706 284.624 534.642 290.966C521.982 306.716 514.468 323.896 533.302 339.752C542.771 347.723 557.106 344.685 566.972 339.329C570.629 337.343 577.018 332.822 581.052 332.359C582.772 333.377 582.194 332.696 583.044 334.283C582.364 337.171 578.695 338.959 576.133 340.615C571.395 343.439 566.454 345.906 561.35 347.998C533.966 358.936 520.184 344.972 510.951 320.274C514.954 300.469 539.381 268.496 558.879 262.562Z"/><path fill="#FFFFFD" d="M598.574 274.167C621.503 273.959 616.357 301.739 592.498 307.505C567.95 309.119 574.103 277.101 598.574 274.167Z"/><path fill="#4A333B" d="M536.262 385.908C538.097 385.952 538.773 386.013 539.895 387.375C539.569 389.616 534.235 394.024 532.981 397.043C526.786 411.951 549.328 423.013 560.186 427.654C564.113 423.59 565.194 422.898 570.435 420.728C568.389 414.402 563.352 390.631 570.825 390.276C582.134 389.325 601.398 413.461 602.514 423.236C604.919 444.292 577.72 411.999 564.585 431.169L564.17 431.784C557.459 446.934 573.614 467.946 589.059 469.23C591.565 469.438 593.29 463.616 595.189 461.757L596.07 461.911C600.78 468.666 594.322 475.665 585.81 473.472C568.194 468.932 554.146 450.019 558.491 431.699C544.569 427.068 521.123 413.764 527.268 394.65C528.678 390.261 532.188 387.773 536.262 385.908Z"/><path fill="#4A333B" d="M635.418 212.697C648.524 213.106 661.356 216.558 672.898 222.78C681.223 227.343 696.91 239.193 699.67 248.586C694.792 245.656 688.905 241.454 683.88 238.289C674.75 232.503 665.25 227.321 655.442 222.776C651.388 220.88 637.327 215.107 635.418 212.697Z"/><defs><linearGradient id="gradient_0" gradientUnits="userSpaceOnUse" x1="463.83868" y1="291.97345" x2="474.2879" y2="288.99164"><stop offset="0" stop-color="#2F2420"/><stop offset="1" stop-color="#50383C"/></linearGradient></defs><path fill="url(#gradient_0)" d="M452.928 258.275C455.964 259.939 463.291 269.874 465.321 272.808C474.161 285.585 483.408 306.28 480.366 322.198C478.694 321.758 477.546 313.846 477.2 311.924C472.928 288.181 466.226 277.204 452.928 258.275Z"/><path fill="#CBC3C2" d="M758.81 206.3L759.493 206.837C773.313 217.8 788.56 236.784 796.626 252.395C800.376 259.654 802.736 268.023 806.361 275.353C806.64 275.358 806.918 275.363 807.197 275.367C810.263 270.191 806.01 238.906 804.343 231.956C819.839 260.782 822.945 279.676 825.901 311.625C831.294 302.28 834.455 292.454 839.921 283.552C834.731 302.825 828.626 319.834 840.345 338.27C853.965 359.698 881.539 378.226 900.596 394.502C924.019 414.507 958.78 446.631 974.264 472.646C966.572 484.204 954.675 494.05 943.644 502.401C903.62 532.701 858.727 555.302 812.673 574.717C814.737 560.986 817.256 555.238 820.329 542.739C866.632 531.145 920.126 506.591 955.585 472.23C959.383 468.55 951.362 463.895 949.056 462.169C936.373 453.137 922.383 446.369 907.636 441.413C888.131 434.858 866.71 431.352 846.123 432.245C842.616 432.398 836.751 432.589 834.371 435.36C834.095 436.505 833.694 437.308 834.643 438.413C839.543 444.121 851.447 448.714 857.885 452.149C861.755 454.17 865.459 456.495 868.962 459.101C864.216 458.544 844.117 455.703 840.904 456.726C840.832 457.943 840.753 457.866 841.754 458.818C850.318 466.969 859.708 474.435 866.001 484.665C860.063 482.897 847.162 477.376 841.961 478.34C841.329 479.034 840.972 479.114 841.163 479.894C842.354 484.751 845.121 489.936 846.664 494.858C848.432 500.673 849.57 506.66 850.058 512.718C847.979 511.679 846.819 511.116 844.905 509.74C842.415 507.949 838.482 502.374 835.791 502.263C833.749 504.434 834.111 510.172 832.971 513.848C830.211 522.742 827.311 530.295 821.671 537.846C822.209 534.281 823.704 526.781 822.655 523.771L821.963 523.745C819.503 526.329 817.014 531.78 815.479 535.069C803.029 561.737 795.598 587.344 808.306 615.294C800.013 608.42 793.202 602.308 786.958 593.251C784.847 590.19 782.626 584.86 780.36 582.376C779.262 583.204 778.782 584.731 778.749 586.025C778.354 601.44 784.807 619.392 794.367 630.977C795.667 632.539 796.996 634.077 798.354 635.59C775.079 636.396 773.962 638.479 756.811 622.332C752.11 617.907 735.556 600.964 731.318 598.371C737.553 615.983 755.186 629.429 767.904 642.091C731.744 630.531 708.956 603.99 683.674 577.001C680.134 573.221 676.355 568.681 673.288 564.529C696.276 577.906 704.71 579.533 728.847 565.764C747.42 555.168 760.648 542.655 771.518 523.977C800.263 475.946 774.408 421.777 714.393 439.086C684.507 447.705 658.206 467.906 642.343 495.072C639.567 500.065 637.642 504.61 636.612 510.218C628.559 486.516 627.821 451.459 635.338 427.19C649.346 381.965 672.255 337.51 699.774 299.058C709.896 284.915 724.55 270.222 738.292 259.617C744.381 254.986 751.383 250.978 757.58 246.312C759.533 249.005 760.907 250.547 763.153 253.013C759.486 241.85 755.088 236.444 748.29 226.984C745.334 223.431 740.901 219.115 737.61 215.725C740.108 216.943 742.777 218.477 745.235 219.821C756.568 226.308 763.121 231.618 771.707 241.907C774.473 245.22 779.415 251.859 782.359 254.577C779.406 246.098 775.259 235.346 771.111 227.459C767.428 220.454 762.68 213.299 758.81 206.3Z"/><path fill="#FFFFFD" d="M737.61 215.725C740.108 216.943 742.777 218.477 745.235 219.821C744.227 224.179 747.431 222.893 748.67 226.273L748.29 226.984C745.334 223.431 740.901 219.115 737.61 215.725Z"/><path fill="#4A333B" d="M783.238 386.807C785.085 387.529 786.692 388.336 787.89 389.979C800.477 407.25 805.546 436.382 803.429 456.795C802.738 456.872 803.18 456.887 802.166 456.39C800.352 453.096 795.568 430.294 794.252 424.82C791.831 414.75 783.992 395.831 783.238 386.807Z"/><path fill="#FFFFFD" d="M224.668 318.02C219.889 321.489 205.954 333.606 205.531 339.53L206.127 339.934C209.28 338.399 211.92 336.151 214.863 334.298C240.802 317.97 279.944 309.08 308.882 322.443C301.964 324.875 282.776 331.972 277.233 336.188C286.17 334.584 304.264 329.057 312.518 325.732C306.769 332.785 300.309 339.228 293.24 344.959C289.943 347.646 284.944 351.178 282.064 353.968C291.335 352.361 296.513 350.639 304.56 345.562C297.719 364.833 275.741 373.652 262.115 384.161C272.37 383.433 282.423 379.506 291.103 374.111C280.49 388.394 274.665 394.803 259.861 405.334C236.867 424.079 217.937 438.717 199.287 461.996C187.368 479.492 181.528 488.251 172.725 507.447C166.044 524.056 160.978 536.958 157.138 554.52C154.09 572.633 152.765 585.984 151.935 604.277C151.166 607.616 151.5 617.286 151.551 621.125C146.148 610.362 138.139 597.791 131.665 587.45C127.868 596.262 125.519 609.221 123.638 618.733C116.611 610.661 108.241 591.234 101.033 582.368C98.4622 587.819 96.0052 597.941 94.4806 604.038C89.2587 592.347 82.5583 578.608 76.1909 567.401C74.4036 571.136 72.5677 576.506 71.0793 580.489C70.9025 576.313 71.6443 569.211 66.8854 568.024C66.6506 544.412 69.5992 520.877 75.6516 498.053C77.2277 485.055 93.9378 445.328 101.154 433.91C102.958 429.597 106.894 423.598 109.395 419.508C119.328 403.263 130.457 389.447 143.349 375.458C151.576 364.732 178.209 343.142 189.834 336.07C197.921 330.002 215.28 321.042 224.668 318.02Z"/><path fill="#FFFFFD" d="M75.6516 498.053C77.2277 485.055 93.9378 445.328 101.154 433.91C101.624 437.256 101.509 440.654 101.553 444.031C101.7 455.172 102.15 466.894 103.71 477.924C107.001 470.295 110.571 461.455 115.71 454.947C120.648 468.522 122.351 484.966 126.46 498.988C129.461 488.34 132.671 478.433 139.439 469.395C142.686 479.021 146.921 492.596 151.136 501.559C153.408 496.21 158.434 483.794 162.352 480.208L163.483 479.981C166.12 481.815 169.223 500.968 172.725 507.447C166.044 524.056 160.978 536.958 157.138 554.52C154.09 572.633 152.765 585.984 151.935 604.277C151.166 607.616 151.5 617.286 151.551 621.125C146.148 610.362 138.139 597.791 131.665 587.45C127.868 596.262 125.519 609.221 123.638 618.733C116.611 610.661 108.241 591.234 101.033 582.368C98.4622 587.819 96.0052 597.941 94.4806 604.038C89.2587 592.347 82.5583 578.608 76.1909 567.401C74.4036 571.136 72.5677 576.506 71.0793 580.489C70.9025 576.313 71.6443 569.211 66.8854 568.024C66.6506 544.412 69.5992 520.877 75.6516 498.053Z"/><path fill="#CBC3C2" d="M75.6516 498.053C77.2277 485.055 93.9378 445.328 101.154 433.91C101.624 437.256 101.509 440.654 101.553 444.031C101.7 455.172 102.15 466.894 103.71 477.924C107.001 470.295 110.571 461.455 115.71 454.947C120.648 468.522 122.351 484.966 126.46 498.988C129.461 488.34 132.671 478.433 139.439 469.395C142.686 479.021 146.921 492.596 151.136 501.559C153.408 496.21 158.434 483.794 162.352 480.208L163.483 479.981C166.12 481.815 169.223 500.968 172.725 507.447C166.044 524.056 160.978 536.958 157.138 554.52C155.781 551.052 154.356 539.323 153.786 535.209C148.838 543.073 145.198 552.187 139.899 560.531C137.491 546.579 136.432 531.59 135.868 517.443C133.849 521.599 122.618 549.782 121.604 550.722C117.962 547.942 111.095 514.826 110.1 508.779C107.279 516.271 103.073 531.787 99.6718 537.96C93.8475 521.807 92.1278 509.538 89.6892 492.825C84.6714 502.812 82.0657 510.338 78.2418 520.714C77.4223 513.233 77.0771 505.828 76.3002 498.568L75.6516 498.053Z"/><path fill="#FFFFFD" d="M224.668 318.02C219.889 321.489 205.954 333.606 205.531 339.53L206.127 339.934C209.28 338.399 211.92 336.151 214.863 334.298C240.802 317.97 279.944 309.08 308.882 322.443C301.964 324.875 282.776 331.972 277.233 336.188C286.17 334.584 304.264 329.057 312.518 325.732C306.769 332.785 300.309 339.228 293.24 344.959C289.943 347.646 284.944 351.178 282.064 353.968C291.335 352.361 296.513 350.639 304.56 345.562C297.719 364.833 275.741 373.652 262.115 384.161C272.37 383.433 282.423 379.506 291.103 374.111C280.49 388.394 274.665 394.803 259.861 405.334C247.855 407.211 232.406 408.182 219.775 409.741C226.344 402.395 236.478 395.894 240.911 388.224C232.699 387.538 217.518 388.85 208.901 389.415C213.605 382.464 218.723 374.925 222.06 367.277C214.28 367.391 204.815 367.967 197.298 369.498C200.168 361.86 206.215 350.82 210.109 343.452C201.607 346.986 193.577 353.186 185.085 357.196C186.105 350.039 187.693 342.975 189.834 336.07C197.921 330.002 215.28 321.042 224.668 318.02Z"/><path fill="#CBC3C2" d="M143.349 375.458C151.576 364.732 178.209 343.142 189.834 336.07C187.693 342.975 186.105 350.039 185.085 357.196C193.577 353.186 201.607 346.986 210.109 343.452C206.215 350.82 200.168 361.86 197.298 369.498C204.815 367.967 214.28 367.391 222.06 367.277C218.723 374.925 213.605 382.464 208.901 389.415C217.518 388.85 232.699 387.538 240.911 388.224C236.478 395.894 226.344 402.395 219.775 409.741C232.406 408.182 247.855 407.211 259.861 405.334C236.867 424.079 217.937 438.717 199.287 461.996C198.677 452.217 204.015 440.077 206.597 430.185C199.338 436.666 189.204 446.793 181.695 452.344C181.455 437.004 183.092 427.035 185.86 412.133C176.948 418.626 167.413 427.567 159.483 435.166C157.561 420.004 161.696 403.227 165.309 388.572C158.468 395.062 150.688 401.569 143.643 408.059C143.198 402.795 142.97 397.515 142.96 392.232C142.965 389.651 143.83 377.02 143.349 375.458Z"/><path fill="#FFFFFD" d="M78.0488 627.438C70.5742 608.36 64.1722 588.877 66.8854 568.024C71.6443 569.211 70.9025 576.313 71.0793 580.489C72.5677 576.506 74.4036 571.136 76.1909 567.401C82.5583 578.608 89.2587 592.347 94.4806 604.038C96.0052 597.941 98.4622 587.819 101.033 582.368C108.241 591.234 116.611 610.661 123.638 618.733C125.519 609.221 127.868 596.262 131.665 587.45C138.139 597.791 146.148 610.362 151.551 621.125C151.5 617.286 151.166 607.616 151.935 604.277C151.981 619.987 152.318 633.828 154.296 649.528C155.281 657.35 156.804 664.911 157.808 672.508C160.857 683.772 163.634 696.125 167.407 707.077C171.717 718.952 176.301 730.324 181.207 741.955C182.813 745.766 189.438 758.335 190.203 760.972C189.809 764.391 190.633 771.472 190.884 775.203C191.374 781.987 191.421 788.795 191.025 795.584C182.923 788.446 174.907 781.212 166.977 773.883C168.824 782.782 172.038 796.461 172.128 805.041C163.863 798.292 149.652 787.358 142.342 780.352C145.715 788.643 148.926 796.999 151.973 805.416C146.523 804.045 126.961 796.181 124.524 796.161C122.636 794.708 117.448 788.256 115.733 786.007C101.92 767.891 89.3529 749.738 79.8121 729.053C70.8658 713.745 62.3406 686.806 55.9748 669.872C58.9242 673.584 65.2417 678.73 68.9156 682.168C76.2611 689.041 83.6079 696.467 91.4141 702.779C77.0083 684.524 66.5458 663.479 60.6878 640.974C55.9943 628.563 51.6577 599.962 51.3214 586.817C60.8322 600.094 68.8913 614.901 78.0488 627.438Z"/><path fill="#CBC3C2" d="M78.0488 627.438C70.5742 608.36 64.1722 588.877 66.8854 568.024C71.6443 569.211 70.9025 576.313 71.0793 580.489C72.5677 576.506 74.4036 571.136 76.1909 567.401C82.5583 578.608 89.2587 592.347 94.4806 604.038C96.0052 597.941 98.4622 587.819 101.033 582.368C108.241 591.234 116.611 610.661 123.638 618.733C125.519 609.221 127.868 596.262 131.665 587.45C138.139 597.791 146.148 610.362 151.551 621.125C151.5 617.286 151.166 607.616 151.935 604.277C151.981 619.987 152.318 633.828 154.296 649.528C155.281 657.35 156.804 664.911 157.808 672.508C149.844 664.638 139.97 651.698 132.794 642.766C133.621 654.349 134.649 661.426 134.54 673.346C126.026 663.53 118.804 652.664 113.052 641.013C112.129 649.112 112.227 661.335 112.107 669.763C103.138 656.418 93.9212 643.242 84.4611 630.24C84.5499 639.933 86.1834 653.103 87.1342 662.897C81.2499 658.662 75.5691 654.15 70.1106 649.379C67.5385 647.124 63.1035 642.441 60.6878 640.974C55.9943 628.563 51.6577 599.962 51.3214 586.817C60.8322 600.094 68.8913 614.901 78.0488 627.438Z"/><path fill="#CBC3C2" d="M167.407 707.077C171.717 718.952 176.301 730.324 181.207 741.955C182.813 745.766 189.438 758.335 190.203 760.972C189.809 764.391 190.633 771.472 190.884 775.203C191.374 781.987 191.421 788.795 191.025 795.584C182.923 788.446 174.907 781.212 166.977 773.883C168.824 782.782 172.038 796.461 172.128 805.041C163.863 798.292 149.652 787.358 142.342 780.352C145.715 788.643 148.926 796.999 151.973 805.416C146.523 804.045 126.961 796.181 124.524 796.161C122.636 794.708 117.448 788.256 115.733 786.007C101.92 767.891 89.3529 749.738 79.8121 729.053C91.9401 734.009 114.641 748.465 126.044 756.055C123.627 746.444 121.121 736.856 118.527 727.291C124.82 731.211 139.804 744.793 146.15 750.363C146.111 741.304 145.705 730.092 146.258 721.274C150.745 724.771 159.515 734.813 163.683 739.458C163.818 732.095 163.111 712.447 167.407 707.077Z"/><path fill="#FFFFFD" d="M332.674 411.207C345.242 410.368 356.096 411.994 368.179 415.078C406.864 424.951 433.149 452.175 463.192 476.698C450.128 475.077 439.055 476.956 429.752 486.998C434.195 489.846 438.746 492.084 443.432 494.487C440.671 494.389 436.849 494.12 434.262 494.782C412.163 500.443 425.223 506.435 435.711 512.448C428.776 512.543 412.347 516.515 408.055 522.141C407.312 525.978 413.585 527.236 416.757 528.454C405.41 531.32 399.236 534.681 388.872 539.885C382.514 538.408 376.21 535.583 370.485 532.492C375.575 528.074 381.69 523.436 386.229 518.665C384.929 517.036 376.517 515.967 373.493 514.523C367.143 511.489 362.161 507.375 357.214 502.585C367.622 502.832 377.835 502.332 385.914 495.036C365.668 494.905 344.16 492.467 326.073 482.897C326.494 481.134 326.976 479.388 327.519 477.659C331.291 465.986 340.641 463.844 349.737 459.235C333.988 459.224 321.478 461.657 320.316 480.361C314.123 476.852 302.752 468.966 299.334 462.774C291.212 448.062 310.742 438.52 320.219 433.548C305.658 432.982 299.17 434.234 291.072 447.207C287.099 420.968 311.583 412.854 332.674 411.207Z"/><path fill="#FFFFFD" d="M264.1 474.083C267.083 473.932 270.235 474.562 273.15 475.16C285.846 477.767 289.517 485.413 295.941 495.246C295.307 489.946 294.638 488.467 292.402 483.849C298.291 487.726 306.633 494.242 310.426 500.072C321.067 516.431 337.111 558.16 341.111 576.597C330.433 589.38 322.051 599.672 314.057 614.268C304.439 604.199 297.264 600.054 284.216 595.025C271.447 590.104 263.892 588.418 250.775 592.134L249.092 584.706C246.694 575.382 244.398 567.122 241.566 557.942C234.461 534.915 225.594 519.078 232.805 494.978C247.02 492.744 253.03 492.989 263.8 504.894C265.597 506.88 267.46 510.244 269.643 511.53L270.047 510.999C270.009 509.974 269.967 508.276 269.641 507.337C264.086 491.308 251.803 485.413 235.779 489.968C249.898 469.729 264.319 478.353 278.888 493.209C280.771 495.129 285.233 502.792 286.947 503.61C287.39 502.64 287.475 502.706 286.998 501.319C282.294 487.628 276.15 480.879 264.1 474.083Z"/><path fill="#F4C3BA" d="M853.398 442.144C879.684 440.932 927.446 456.46 949.389 470.573C943.916 475.872 934.028 482.568 927.692 486.898C907.038 501.009 885.71 512.836 862.75 522.826C853.113 526.503 840.521 531.648 830.869 534.284C836.555 524.846 837.336 524.146 839.549 512.976C851.746 523.14 857.522 518.603 855.864 503.929C855.164 497.737 853.975 492.921 852.196 486.953C853.615 487.521 855.05 488.047 856.5 488.53C860.769 489.915 867.064 492.2 871.139 490.128C875.597 483.963 861.337 469.527 857.074 464.865C862.921 465.456 873.077 467.281 877.61 463.199C880.748 455.565 859.213 444.663 853.398 442.144Z"/><path fill="#F4C3BA" d="M629.553 147.785C651.836 122.652 691.091 91.4894 722.434 79.2383C720.869 101.704 712.382 143.038 702.43 162.979C701.009 158.156 696.607 139.594 690.91 139.993C687.098 142.909 688.78 147.032 689.565 151.152C682.916 144.027 677.829 137.966 668.496 134.377C675.141 142.361 678.662 146.252 683.991 155.18L682.508 157.283C677.423 151.219 671.539 145.873 665.017 141.392C661.64 139.104 651.481 132.768 648.544 137.354C649.049 141.477 657.091 153.347 659.779 157.772C655.259 155.688 652.151 154.299 647.226 153.072C641.032 151.529 636.353 151.372 630.577 148.515L629.553 147.785Z"/><path fill="#CBC3C2" d="M730.64 61.7215C736.668 66.0165 738.736 72.5791 741.138 79.4247C735.115 77.6722 732.884 77.4646 726.575 77.4435L727.558 76.7299C726.493 75.8039 725.356 75.5417 724.014 75.067C674.641 88.2738 623.08 139.263 596.669 181.777C585.718 182.969 574.495 184.849 563.527 185.236C568.557 180.08 573.337 174.347 578.07 168.936C610.631 131.712 648.148 98.4961 692.637 76.2836C704.606 70.3079 717.165 63.523 730.64 61.7215Z"/><path fill="#FFFFFD" d="M761.642 462.898C763.488 464.493 765.246 470.629 765.728 472.927C770.006 493.361 760.581 519.577 748.951 536.185C739.483 549.704 725.711 567.496 708.448 570.29C694.755 572.506 687.105 568.377 676.415 561.023C671.253 557.954 668.417 555.698 663.914 551.76C670.772 555.164 679.559 556.348 687.074 554.97C730.008 547.097 768.062 508.147 761.642 462.898Z"/><path fill="#F4C3BA" d="M669.981 476.84C671.453 477.184 670.916 476.772 671.79 477.844C670.545 480.587 665.06 487.412 662.732 490.272C651.854 503.634 648.258 527.217 667.561 535.389C680.43 540.837 698.048 533.158 709.859 527.894C711.952 526.962 715.405 526.119 717.732 527.116C720.076 530.602 713.175 536.141 710.803 538.234C689.483 553.798 662.542 555.222 648.513 529.695C638.07 510.692 648.183 495.546 662.086 482.25C664.598 479.848 666.872 478.383 669.981 476.84Z"/><path fill="#FFFFFD" d="M718.201 454.682C743.295 454.097 729.095 483.033 705.619 487.403C682.131 489.069 692.901 457.846 718.201 454.682Z"/><path fill="#F4C3BA" d="M629.553 147.785L630.577 148.515C630.153 149.403 630.282 149.199 630.157 150.226C632.028 154.31 641.861 164.007 645.506 167.806C643.559 167.269 641.607 166.753 639.649 166.258C629.221 163.656 621.864 162.924 612.543 168.502C617.925 161.364 623.6 154.453 629.553 147.785Z"/><path fill="#FFFFFD" d="M730.501 506.324C731.895 506.97 731.793 506.943 732.774 508.145C734.174 513.713 726.03 520.024 721.888 522.681C720.201 522.52 721.011 522.778 719.5 521.578C717.916 516.498 726.592 508.844 730.501 506.324Z"/><path fill="#FFFFFD" d="M683.991 155.18C685.543 157.956 687.676 161.543 688.81 164.409C686.002 161.71 684.906 160.381 682.508 157.283L683.991 155.18Z"/><path fill="#4A333B" d="M792.372 666.268C799.314 668.057 822.242 692.773 827.551 699.474C851.09 729.186 873.537 771.263 874.889 809.745C872.702 808.311 868.141 792.289 867.045 788.918C852.404 743.887 825.349 700.229 792.372 666.268Z"/><path fill="#4A333B" d="M761.872 671.431C766.723 673.638 777.763 688.176 781.398 692.941C806.767 726.198 827.685 782.557 820.7 824.696L820.361 825.133C819.415 824.263 814.659 787.266 813.447 781.54C806.739 749.855 795.668 720.031 778.011 692.766C773.142 685.247 768.058 677.943 761.872 671.431Z"/><path fill="#4A333B" d="M323.882 124.932C329.483 125.028 339.722 128.547 344.864 130.69C382.013 146.371 411.552 175.964 427.163 213.142C425.484 211.693 421.279 205.643 419.851 203.593C394.253 166.841 363.727 144.314 323.882 124.932Z"/><path fill="#4A333B" d="M282.061 170.755C323.953 166.448 366.527 190.597 395.371 219.277C398.528 222.417 404.821 228.347 406.702 232.092C383.1 210.151 355.435 193.037 325.264 181.716C314.828 177.864 304.101 174.852 293.185 172.708C290.938 172.277 283.023 171.555 282.061 170.755Z"/><path fill="#4A333B" d="M706.509 656.35C707.007 656.021 707.512 655.877 708.086 655.652C723.817 677.11 734.89 701.316 733.85 728.464C732.603 722.433 732.015 716.838 730.45 710.746C725.707 692.281 717.078 672.222 706.509 656.35Z"/><path fill="#2A2929" d="M372.316 244.689C388.333 250.216 407.074 258.421 420.231 269.268L419.334 269.761C404.859 259.334 388.897 251.145 371.985 245.47L372.316 244.689Z"/><path fill="#8B8B8B" d="M361.51 242.018C365.346 242.696 368.661 243.35 372.316 244.689L371.985 245.47C368.539 244.502 364.916 243.186 361.51 242.018Z"/></svg>
\ No newline at end of file
diff --git a/spx-algorithm/resource/vector_db/cute2.svg b/spx-algorithm/resource/vector_db/cute2.svg
new file mode 100644
index 000000000..411a5835b
--- /dev/null
+++ b/spx-algorithm/resource/vector_db/cute2.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8" ?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1024" height="1024" viewBox="0 0 1024 1024"><path fill="#FEFEFE" d="M0 0L1024 0L1024 1024L0 1024L0 0ZM571.166 204.734C567.114 205.871 563.425 205.193 559.031 206.827C528.605 218.142 500.235 236.677 478.554 260.906C478.54 260.931 478.526 260.957 478.512 260.982L469.767 262.804L469.938 262.276C470.97 259.138 475.441 249.728 474.443 247.591C472.542 246.835 472.919 247.12 470.663 247.932C465.028 249.961 453.296 256.867 448.207 258.026L447.652 257.745C446.559 253.341 450.096 252.279 447.269 250.212C439.091 249.946 429.371 261.406 417.833 262.941C414.554 254.36 416.182 255.246 415.907 246.042C408.363 243.39 390.972 264.379 384.483 267.504C382.873 265.233 384.651 265.516 382.654 263.101C379.927 262.807 364.191 275.685 361.134 278.14C359.645 279.342 358.183 280.577 356.75 281.844C351.975 281.321 354.908 271.981 351.259 270.694C346.235 272.699 337.207 282.75 332.998 286.756C331.436 288.244 325.991 296.222 324.57 296.212C323.013 294.743 323.404 294.626 321.713 294.437C317.932 296.356 304.652 317.645 302.365 322.683C300.449 326.905 297.752 334.603 295.81 339.273C288.294 336.491 281.771 335.743 273.845 334.716C243.092 330.721 209.647 331.76 180.632 343.561C171.903 347.111 174.393 352.082 176.018 360.038C184.133 399.768 200.788 444.043 233.516 469.902C238.908 474.163 246.563 476.851 252.07 480.945C251.772 489.473 250.319 494.412 245.625 501.584C243.518 504.803 237.305 510.397 238.392 514.341C242.119 516.275 250.846 509.144 255.455 507.898L258.734 506.996C256.8 515.419 253.686 542.113 261.676 547.197L262.866 547.265C264.427 545.352 264.59 540.676 266.535 536.989C269.558 531.257 271.896 529.815 275.804 525.23C278.869 536.014 285.835 561.912 295.415 567.993L296.393 568C297.56 566.779 297.71 565.388 297.639 563.752C297.081 550.834 294.165 553.97 300.734 542.553C301.843 545.659 304.292 552.132 305.934 554.745C309.075 559.746 325.323 579.796 331.396 578.216C332.976 575.836 331.071 571.473 331.899 567.427L332.471 567.373C335.43 572.827 333.853 581.079 333.893 587.251C333.996 602.946 332.968 642.329 341.312 654.812L341.149 655.754C341.045 656.376 340.94 656.985 340.812 657.603C339.565 663.601 353.144 698.206 356.299 706.04C335.628 712.828 318.169 722.084 302.142 736.81C299.68 739.071 288.467 756.124 287.455 756.046C265.366 754.355 250.42 757.945 229.593 765.179C225.629 763.987 219.325 761.735 215.352 761.716C207.092 761.678 198.554 765.347 190.41 766.132C179.141 767.135 168.069 766.767 156.823 766.39C154.493 766.312 146.078 768.516 143.496 768.944C136.257 770.145 102.616 773.277 97.679 777.678L97.5967 778.648C98.9939 779.703 100.606 779.288 102.41 778.965C113.848 776.915 125.384 776.303 136.801 774.089C139.082 773.646 143.653 774.908 146.185 774.394C149.589 773.917 154.953 771.711 158.228 771.568C167.062 771.18 174.522 774.629 183.733 773.771C188.893 773.29 195.611 773.953 200.815 773.117C204.986 772.409 210.082 769.882 214.228 769.692C220.926 769.384 228.597 772.582 235.321 771.847C250.51 770.188 264.538 766.362 280.042 769.298C282.206 769.708 281.648 767.801 283.238 768.626C283.356 776.562 282.817 784.164 289.046 790.255C296.489 797.533 306.631 796.187 316.028 796.71C334.883 797.76 353.702 796.45 372.564 797.943C372.593 804.21 371.781 813.588 376.643 817.883C387.558 827.525 407.91 829.479 421.994 828.712C424.876 828.555 436.215 828.161 437.99 827.892C452.354 825.712 482.433 822.11 495.009 816.511C506.169 832.285 505.84 827.294 522.474 830.88C544.357 834.54 600.971 832.659 615.028 813.028C624.242 809.229 638.148 813.142 647.845 813.543C658.201 813.97 669.649 811.183 679.928 810.802C691.098 810.389 702.593 813.421 713.827 811.523C728.617 809.392 744.46 808.277 750.835 792.491C765.659 795.459 764.163 786.005 764.031 774.595C770.534 779.155 772.401 779.467 778.61 773.625C778.602 767.901 776.295 756.91 778.065 753.485C780.448 751.946 782.035 753.095 784.367 754.333C788.294 753.126 792.086 751.628 795.997 750.552C798.92 749.749 805.36 752.245 807.794 751.837C817.555 750.203 825.777 746.487 835.997 748.229C842.17 749.281 847.87 752.872 854.161 752.969C862.771 752.732 871.194 749.085 879.669 747.757C883.677 747.129 891.212 748.602 894.968 748.445C899.249 748.267 920.813 748.887 923.041 746.835C923.603 744.92 923.627 745.836 923.037 743.987C920.82 742.044 918.011 742.485 915.251 742.464C907.213 742.415 898.366 741.844 890.415 740.686C877.586 738.817 867.109 743.703 854.128 742.822C843.782 742.12 834.731 740.188 824.647 738.437C821.058 737.814 814.148 741.042 810.351 741.187C804.153 740.721 797.808 740.426 791.544 740.074C784.833 739.697 776.682 744.605 772.977 741.286C771.229 739.721 768.458 736.459 766.261 734.601C770.546 736.08 774.921 736.751 779.226 735.007C782.736 733.585 780.355 727.472 779.649 724.97C776.998 715.572 772.374 702.204 765.83 694.893C765.086 694.068 764.314 693.268 763.518 692.493C784.837 696.786 767.161 675.347 762.444 669.393C757.944 663.714 753.122 659.666 748.466 654.557C749.834 653.931 752.227 653.004 752.612 651.567C755.468 640.886 736.003 625.566 729.549 620.127C733.145 619.386 734.662 618.292 737.83 616.677C750.664 610.138 756.711 597.663 766.02 587.284C775.06 577.204 786.786 569.786 799.382 564.848C801.707 563.911 805.703 562.467 807.072 560.348C804.769 553.561 777.098 567.67 772.401 570.64C757.086 580.322 746.418 601.889 731.8 611.278C720.603 597.445 702.636 587.801 688.441 577.895C681.213 572.851 665.188 559.784 658.626 553.463C663.569 546.973 670.919 542.868 675.698 536.086C688.385 518.083 686.942 495.141 695.925 475.461C697.467 472.082 699.491 468.847 700.758 465.435L700.528 464.34C694.221 460.345 681.517 492.701 680.268 497.579C677.063 510.104 675.999 524.578 666.912 534.76C663.358 538.527 658.162 542.12 653.601 546.991C646.264 540.33 642.491 534.603 636.037 527.642C617.782 507.953 603.3 495.93 578.501 485.842C579.581 483.247 581.776 477.195 583.356 475.283C588 474.289 594.009 486.315 598.508 481.874C603.594 476.855 597.895 459.755 599.15 456.379L600.02 456.301C602.939 458.838 608.559 464.997 611.617 465.195C615.216 463.356 614.443 458.334 614.868 454.73C616.469 441.137 608.981 430.08 605.292 417.918C610.327 418.543 615.697 418.395 620.531 419.543C625.687 420.767 630.542 425.345 635.909 424.911C637.306 423.48 636.777 424.317 637.295 422.165C635.376 414.155 620.935 397.561 614.427 391.619C612.368 389.739 611.283 389.348 608.8 388.207L608.907 387.695C615.895 385.758 636.195 386.123 640.576 383.161C642.116 375.636 614.205 365.669 608.501 362.918C613.265 361.426 617.53 360.233 620.825 356.208C622.917 353.652 627.423 350.541 626.419 347.044C622.829 344.642 620.432 347.236 616.989 347.503C607.982 348.202 600.215 344.115 593.681 338.473C608.021 302.128 603.081 260.957 589.063 225.29C586.854 219.669 578.838 203.162 571.166 204.734ZM808.09 395.054C792.517 398.996 782.766 410.218 773.721 423.25C772.733 424.673 772.188 426.042 772.035 427.755L772.473 428.698C774.086 429.134 774.292 429.09 775.41 427.662C781.095 420.134 796.566 404.208 805.765 400.651C808.928 399.428 812.373 398.979 812.336 396.532C811.053 394.971 810.032 394.846 808.09 395.054ZM836.868 401.172C834.55 401.535 831.981 402.032 829.704 402.53C824.411 403.688 803.644 411.969 804.663 418.773C806.568 420.137 807.607 418.934 809.196 417.723L810.947 416.397C819.013 411.402 828.746 406.633 838.239 405.349C840.526 405.039 844.333 405.096 845.353 403.289C843.202 400.321 840.078 400.671 836.868 401.172ZM773.417 401.985C764.219 404.508 741.591 432.65 749.247 436.274C754.814 428.506 757.641 419.866 765.02 413.011C766.61 411.534 774.525 404.933 774.976 403.981C774.599 402.323 775.032 403.014 773.417 401.985ZM870.231 411.671C864.055 412.575 846.704 414.644 845.693 422.116L846.46 423.062C848.336 423.118 847.848 423.025 849.752 421.921C857.684 417.977 864.008 417.094 872.591 415.667C873.881 415.452 873.887 415.095 874.364 414.139C873.764 412.381 874.243 413.126 872.815 411.858C871.631 411.692 871.394 411.559 870.231 411.671ZM740.958 425.79C732.093 431.485 727.568 440.192 723.29 449.552C721.083 454.378 715.496 468.027 717.762 472.96L719.563 474.507C722.007 471.667 724.163 462.106 725.995 457.761C728.296 452.308 730.432 447.245 733.149 441.898C735 438.255 742.14 430.235 742.283 427.022C741.581 426.03 741.954 426.273 740.958 425.79ZM885.598 432.677C881.234 433.3 874.097 434.179 869.859 435.678C853.122 441.594 834.378 453.231 822.894 466.76C822.071 467.729 821.667 468.538 821.321 469.675L821.706 470.459C823.418 470.502 840.253 462.445 844.609 461.076C849.623 459.214 854.303 457.428 859.473 455.973C861.61 455.372 869.043 453.979 870.232 452.938C870.457 450.651 870.749 451.595 869.796 449.895C865.551 447.795 861.508 451.158 859.177 449.473L859.121 448.625C864.403 446.046 878.349 442.794 884.366 441.428C888.322 440.53 893.716 440.467 897.674 438.93C899.744 438.126 901.243 439.068 903.588 437.929L903.993 437.026C901.993 432.475 899.679 434.175 895.868 433.005C892.561 431.99 888.962 432.372 885.598 432.677ZM712.35 453.706C707.149 461.505 694.353 494.249 701.367 501.128C702.608 501.458 702.231 501.439 703.497 501.429C705.528 484.054 707.021 471.876 715.134 455.71C714.479 454.316 713.991 454.115 712.35 453.706ZM850.604 465.784C836.402 468.397 823.007 472.626 811.214 481.262C807.456 484.014 801.083 487.935 801.933 493.339C804.075 494.546 812.007 489.511 814.351 488.259C828.451 481.047 841.161 473.696 857.009 470.386C859.899 469.783 865.455 469.941 867.853 468.669L868.126 467.379C865.631 464.001 854.664 465.41 850.604 465.784ZM840.841 490.72C821.507 493.265 805.076 500.73 790.224 513.099C784.978 517.469 773.017 526.012 772.225 533.267C773.609 536.636 778.99 533.552 780.967 532.317C798.181 518.615 814.797 506.177 835.983 499.39C839.942 498.122 849.976 496.146 851.242 493.233C849.737 490.337 843.798 490.367 840.841 490.72ZM824.764 522.058C801.759 527.8 784.046 533.739 768.409 552.761C764.631 557.356 756.379 565.164 756.244 571.254C757.015 572.788 756.438 572.321 757.894 572.859L759.795 572.439C765.653 568.004 770.433 562.214 775.514 557.032C785.824 546.517 797.643 539.191 810.511 532.349C814.506 530.224 826.785 527.271 828.626 524.203C828.119 522.521 828.581 523.239 826.992 522.12L824.764 522.058Z"/><path d="M478.512 260.982C478.526 260.957 478.54 260.931 478.554 260.906C500.235 236.677 528.605 218.142 559.031 206.827C563.425 205.193 567.114 205.871 571.166 204.734C578.838 203.162 586.854 219.669 589.063 225.29C603.081 260.957 608.021 302.128 593.681 338.473C600.215 344.115 607.982 348.202 616.989 347.503C620.432 347.236 622.829 344.642 626.419 347.044C627.423 350.541 622.917 353.652 620.825 356.208C617.53 360.233 613.265 361.426 608.501 362.918C614.205 365.669 642.116 375.636 640.576 383.161C636.195 386.123 615.895 385.758 608.907 387.695L608.8 388.207C611.283 389.348 612.368 389.739 614.427 391.619C620.935 397.561 635.376 414.155 637.295 422.165C636.777 424.317 637.306 423.48 635.909 424.911C630.542 425.345 625.687 420.767 620.531 419.543C615.697 418.395 610.327 418.543 605.292 417.918C608.981 430.08 616.469 441.137 614.868 454.73C614.443 458.334 615.216 463.356 611.617 465.195C608.559 464.997 602.939 458.838 600.02 456.301L599.15 456.379C597.895 459.755 603.594 476.855 598.508 481.874C594.009 486.315 588 474.289 583.356 475.283C581.776 477.195 579.581 483.247 578.501 485.842C603.3 495.93 617.782 507.953 636.037 527.642C642.491 534.603 646.264 540.33 653.601 546.991C658.162 542.12 663.358 538.527 666.912 534.76C675.999 524.578 677.063 510.104 680.268 497.579C681.517 492.701 694.221 460.345 700.528 464.34L700.758 465.435C699.491 468.847 697.467 472.082 695.925 475.461C686.942 495.141 688.385 518.083 675.698 536.086C670.919 542.868 663.569 546.973 658.626 553.463C665.188 559.784 681.213 572.851 688.441 577.895C702.636 587.801 720.603 597.445 731.8 611.278C746.418 601.889 757.086 580.322 772.401 570.64C777.098 567.67 804.769 553.561 807.072 560.348C805.703 562.467 801.707 563.911 799.382 564.848C786.786 569.786 775.06 577.204 766.02 587.284C756.711 597.663 750.664 610.138 737.83 616.677C734.662 618.292 733.145 619.386 729.549 620.127C736.003 625.566 755.468 640.886 752.612 651.567C752.227 653.004 749.834 653.931 748.466 654.557C753.122 659.666 757.944 663.714 762.444 669.393C767.161 675.347 784.837 696.786 763.518 692.493C764.314 693.268 765.086 694.068 765.83 694.893C772.374 702.204 776.998 715.572 779.649 724.97C780.355 727.472 782.736 733.585 779.226 735.007C774.921 736.751 770.546 736.08 766.261 734.601C768.458 736.459 771.229 739.721 772.977 741.286C776.682 744.605 784.833 739.697 791.544 740.074C797.808 740.426 804.153 740.721 810.351 741.187C814.148 741.042 821.058 737.814 824.647 738.437C834.731 740.188 843.782 742.12 854.128 742.822C867.109 743.703 877.586 738.817 890.415 740.686C898.366 741.844 907.213 742.415 915.251 742.464C918.011 742.485 920.82 742.044 923.037 743.987C923.627 745.836 923.603 744.92 923.041 746.835C920.813 748.887 899.249 748.267 894.968 748.445C891.212 748.602 883.677 747.129 879.669 747.757C871.194 749.085 862.771 752.732 854.161 752.969C847.87 752.872 842.17 749.281 835.997 748.229C825.777 746.487 817.555 750.203 807.794 751.837C805.36 752.245 798.92 749.749 795.997 750.552C792.086 751.628 788.294 753.126 784.367 754.333C782.035 753.095 780.448 751.946 778.065 753.485C776.295 756.91 778.602 767.901 778.61 773.625C772.401 779.467 770.534 779.155 764.031 774.595C764.163 786.005 765.659 795.459 750.835 792.491C744.46 808.277 728.617 809.392 713.827 811.523C702.593 813.421 691.098 810.389 679.928 810.802C669.649 811.183 658.201 813.97 647.845 813.543C638.148 813.142 624.242 809.229 615.028 813.028C600.971 832.659 544.357 834.54 522.474 830.88C505.84 827.294 506.169 832.285 495.009 816.511C482.433 822.11 452.354 825.712 437.99 827.892C436.215 828.161 424.876 828.555 421.994 828.712C407.91 829.479 387.558 827.525 376.643 817.883C371.781 813.588 372.593 804.21 372.564 797.943C353.702 796.45 334.883 797.76 316.028 796.71C306.631 796.187 296.489 797.533 289.046 790.255C282.817 784.164 283.356 776.562 283.238 768.626C281.648 767.801 282.206 769.708 280.042 769.298C264.538 766.362 250.51 770.188 235.321 771.847C228.597 772.582 220.926 769.384 214.228 769.692C210.082 769.882 204.986 772.409 200.815 773.117C195.611 773.953 188.893 773.29 183.733 773.771C174.522 774.629 167.062 771.18 158.228 771.568C154.953 771.711 149.589 773.917 146.185 774.394C143.653 774.908 139.082 773.646 136.801 774.089C125.384 776.303 113.848 776.915 102.41 778.965C100.606 779.288 98.9939 779.703 97.5967 778.648L97.679 777.678C102.616 773.277 136.257 770.145 143.496 768.944C146.078 768.516 154.493 766.312 156.823 766.39C168.069 766.767 179.141 767.135 190.41 766.132C198.554 765.347 207.092 761.678 215.352 761.716C219.325 761.735 225.629 763.987 229.593 765.179C250.42 757.945 265.366 754.355 287.455 756.046C288.467 756.124 299.68 739.071 302.142 736.81C318.169 722.084 335.628 712.828 356.299 706.04C353.144 698.206 339.565 663.601 340.812 657.603C340.94 656.985 341.045 656.376 341.149 655.754L341.312 654.812C332.968 642.329 333.996 602.946 333.893 587.251C333.853 581.079 335.43 572.827 332.471 567.373L331.899 567.427C331.071 571.473 332.976 575.836 331.396 578.216C325.323 579.796 309.075 559.746 305.934 554.745C304.292 552.132 301.843 545.659 300.734 542.553C294.165 553.97 297.081 550.834 297.639 563.752C297.71 565.388 297.56 566.779 296.393 568L295.415 567.993C285.835 561.912 278.869 536.014 275.804 525.23C271.896 529.815 269.558 531.257 266.535 536.989C264.59 540.676 264.427 545.352 262.866 547.265L261.676 547.197C253.686 542.113 256.8 515.419 258.734 506.996L255.455 507.898C250.846 509.144 242.119 516.275 238.392 514.341C237.305 510.397 243.518 504.803 245.625 501.584C250.319 494.412 251.772 489.473 252.07 480.945C246.563 476.851 238.908 474.163 233.516 469.902C200.788 444.043 184.133 399.768 176.018 360.038C174.393 352.082 171.903 347.111 180.632 343.561C209.647 331.76 243.092 330.721 273.845 334.716C281.771 335.743 288.294 336.491 295.81 339.273C297.752 334.603 300.449 326.905 302.365 322.683C304.652 317.645 317.932 296.356 321.713 294.437C323.404 294.626 323.013 294.743 324.57 296.212C325.991 296.222 331.436 288.244 332.998 286.756C337.207 282.75 346.235 272.699 351.259 270.694C354.908 271.981 351.975 281.321 356.75 281.844C358.183 280.577 359.645 279.342 361.134 278.14C364.191 275.685 379.927 262.807 382.654 263.101C384.651 265.516 382.873 265.233 384.483 267.504C390.972 264.379 408.363 243.39 415.907 246.042C416.182 255.246 414.554 254.36 417.833 262.941C429.371 261.406 439.091 249.946 447.269 250.212C450.096 252.279 446.559 253.341 447.652 257.745L448.207 258.026C453.296 256.867 465.028 249.961 470.663 247.932C472.919 247.12 472.542 246.835 474.443 247.591C475.441 249.728 470.97 259.138 469.938 262.276L469.767 262.804L478.512 260.982ZM568.631 212.56C538.255 220.729 511.322 238.914 489.189 261.168C486.337 264.036 477.274 275.106 473.494 274.551C472.057 272.599 472.481 270.794 472.718 268.312C469.358 267.827 465.643 272.804 462.448 268.024C461.442 266.52 462.169 263.45 462.052 261.465C457.882 257.421 447.889 267.564 443.251 266.074C440.062 263.277 443.042 258.632 439.118 257.952C431.254 260.847 416.724 281.479 410.219 260.689C409.721 259.061 409.249 257.424 408.804 255.781C398.55 260.708 385.573 280.118 375.419 273.694C366.566 278.62 361.099 284.498 353.785 291.245C352.855 292.103 352.051 292.027 350.988 291.983C347.121 289.444 348.696 282.876 346.34 280.849C340.329 285.028 339.814 286.611 335.314 291.64C331.648 295.737 324.979 310.251 322.169 311.244C320.536 310.683 320.396 310.377 319.457 308.5C319.174 307.92 318.899 307.336 318.633 306.747C317.153 307.682 308.786 322.34 307.554 324.913C305.25 329.722 302.985 336.289 300.57 341.357C303.109 342.867 307.775 344.662 306.165 348.012C304.349 349.215 299.559 348.307 297.356 347.85C265.945 341.312 231.995 338.668 200.348 344.81C196.606 345.537 182.126 348.125 182.86 351.877C183.549 355.394 187.071 370.287 188.143 373.991C195.266 398.433 204.669 422.922 220.462 443.176C227.867 452.672 235.241 460.028 244.793 467.368C249.595 471.057 260.503 474.79 259.428 481.222C257.991 489.819 256.521 495.564 251.863 502.907C254.779 501.476 258.889 499.29 261.4 497.281C264.106 495.117 263.168 490.969 267.521 490.171C273.014 492.404 258.327 525.163 263.884 527.798C267.379 525.308 273.879 511.202 279.415 515.523C282.004 523.605 285.867 541.35 291.296 548.019L292.197 548.126C290.755 543.317 300.331 532.667 304.452 532.948C306 535.377 306.13 540.885 307.183 543.313C310.388 550.703 318.665 562.743 325.471 566.766C325.462 563.587 325.905 552.162 327.938 550.159C331.875 550.826 339.496 558.729 346.187 558.097C347.248 556.024 347.41 553.936 348.939 552.953C352.719 553.136 357.674 556.369 361.333 557.009C381.233 560.488 401.536 560.566 421.457 557.304C422.662 557.107 424.119 557.5 425.282 557.988L425.793 558.611C424.48 562.607 417.437 562.556 414.244 563.42C401.999 566.735 391.493 566.488 378.949 566.978C376.193 572.8 374.987 577.791 372.67 583.536C377.093 581.119 390.182 573.299 394.886 574.947C395.884 577.508 393.2 578.797 391.28 579.926C389.302 590.5 391.503 597.843 397.537 606.664C398.05 607.41 398.581 608.145 399.129 608.866C399.876 604.318 403.388 585.245 410.365 586.934C415.014 590.826 419.443 605.876 423.827 611.875C428.424 618.163 432.084 621.567 438.235 626.351C438.364 621.391 437.695 607.907 444.52 608.194C454.575 625.792 457.065 626.261 472.534 639.996C470.35 629.909 470.629 617.134 478.409 609.339C490.814 614.092 497.437 623.066 504.435 634.085C505.503 625.179 510.479 598.406 515.669 592.26C521.182 589.46 526.407 596.615 529.265 600.545C529.27 603.814 529.562 604.725 530.347 607.788C533.231 600.149 533.943 596.247 534.512 588.297C534.975 581.832 530.353 573.267 532.552 569.758C537.96 567.473 542.072 574.532 546.424 577.412C546.043 570.468 545.641 566.838 543.984 560.103C542.714 554.938 538.942 552.145 540.43 548.244C544.81 544.846 556.413 550.454 560.636 553.031C558.634 547.347 558.888 547.362 555.633 542.537C551.982 537.125 544.98 535.659 543.855 531.078L544.301 530.246C555.16 528.639 569.934 555.313 566.282 559.924C563.656 560.587 560.403 558.317 558.186 556.938C553.102 553.775 550.222 552.144 544.15 551.283C549.264 559.932 551.648 578.965 550.418 588.819C549.372 590.11 550.017 589.609 548.295 590.196C546.369 589.666 540.529 579.005 537.86 575.663C541.317 590.73 539.763 603.8 531.748 617.423C530.849 618.952 529.564 620.885 528.11 621.842L527.168 621.879C523.534 618.495 526.868 607.762 524.184 604.09C522.619 601.951 520.587 597.971 518.052 597.257C511.967 601.702 510.866 632.517 511.429 640.433C511.699 644.215 512.911 651.001 507.939 651.52C502.898 649.083 498.514 624.782 481.065 614.89L480.756 615.504C476.438 624.273 477.836 635.45 480.686 644.522C482.05 648.865 484.944 648.916 483.29 652.908C476.994 655.151 455.133 632.169 449.817 627.364C448.401 626.085 444.859 620.344 443.662 618.436C443.261 627.733 445.81 629.651 445.874 635.851C441.072 639.445 419.35 617.197 416.482 611.514C413.104 604.817 411.6 601.834 409.203 594.635C406.908 600.704 406.618 602.008 406.523 608.507C406.433 614.646 413.508 625.399 410.786 629.198C405.601 629.713 396.237 617.989 393.111 614.344C385.548 605.524 383.357 596.011 383.532 584.607C381.027 586.126 379.955 586.852 377.636 588.634C374.271 591.22 370.815 596.594 366.861 597.334C360.279 594.999 370.029 571.84 371.627 566.668C365.424 566.182 359.724 565.179 353.753 563.5C351.308 565.644 350.081 566.274 346.819 566.144L346.306 566.133L343.571 567.728C341.331 581.893 344.864 602.155 345.405 616.66C345.586 621.488 348.005 625.763 346.284 630.927C346.046 631.692 349.307 638.026 349.334 639.278C349.77 641.292 346.957 640.76 348.89 642.592C351.957 645.499 351.142 648.886 352.4 652.696C355.094 660.854 357.36 669.192 360.004 677.381C363.024 686.765 366.293 696.067 369.807 705.278C377.676 725.519 389.517 750.489 387.605 772.761C385.958 791.944 364.394 812.766 396.548 820.007C396.05 815.541 394.082 801.205 400.273 800.276L401.361 800.717C401.458 802.626 401.039 801.295 400.812 802.668C397.325 823.796 409.828 823.391 424.54 821.628C424.357 815.412 423.327 803.714 430.109 800.458L430.866 800.906C431.65 804.462 429.954 808.242 429.542 811.775C429.316 813.711 429.487 816.411 429.677 818.352C446.83 824.762 478.437 809.837 494.897 804.693C496.091 793.751 499.486 779.016 503.271 768.618C505.277 764.27 504.832 761.879 506.609 758.591C476.937 744.564 451.65 728.309 433.236 700.453C431.008 697.083 429.698 694.01 427.743 690.812C427.603 693.541 427.848 700.549 426.569 702.103C420.349 703.192 412.42 681.267 409.295 676.541C408.878 675.91 407.889 671.148 407.661 670.035C406.495 672.737 404.542 679.863 402.768 680.789C398.043 678.211 389.109 632.68 391.569 626.834L392.451 626.267C395.494 627.67 395.846 635.47 396.68 638.766C398.723 646.84 399.793 657.742 403.355 665.224C404.901 662.695 405.984 659.993 408.73 659.283C409.125 659.509 409.519 659.735 409.914 659.962C413.662 668.324 416.641 679.875 422.122 687.182C422.998 684.623 425.185 675.736 428.626 676.986C429.905 679.441 429.769 681.339 430.909 683.252C440.598 699.469 452.793 714.654 467.512 726.575C471.877 730.111 478.522 734.36 483.351 737.323C489.885 741.332 501.115 748.289 508.475 750.221C510.107 739.942 511.875 729.976 512.249 719.528C512.444 714.08 510.286 696.124 514.805 692.559C522.257 692.586 521.69 705.44 521.767 710.506C522.027 727.558 520.038 745.312 514.947 761.716C513.225 767.113 511.303 772.444 509.186 777.698C504.791 788.348 499.574 796.972 500.86 808.897C502.24 821.694 509.963 823.308 520.981 824.936C520.285 818.888 518.833 802.36 522.4 797.342L523.516 796.933L524.454 797.465C525.479 806.38 524.158 815.951 528.327 823.644C537.16 826.258 546.471 826.838 555.56 825.341C553.708 818.737 548.49 804.749 553.812 798.705L554.747 798.589C558.872 802.762 552.444 812.923 561.831 822.456L562.353 822.977C613.388 823.96 610.823 789.48 618.8 751.175C619.201 749.249 621.046 747.117 619.876 744.958C619.717 744.672 619.143 741.951 619.183 741.685C620.152 735.146 619.375 715.118 620.647 710.306C621.923 710.452 621.515 710.37 622.711 710.874C622.402 709.912 620.478 705.744 620.543 705.423C622.507 695.676 621.555 685.408 621.089 675.504C620.976 673.103 619.737 667.53 620.597 665.615C623.575 663.037 625.607 665.688 626.745 664.126C624.589 655.311 616.969 649.062 618.03 643.178C620.648 640.008 622.859 642.112 625.472 643.691C620.804 628.438 612.934 615.844 607.932 600.812C607.544 599.647 607.98 598.312 608.467 597.253L609.525 596.483C616.796 597.673 635.181 640.501 634.462 649.702C634.362 650.981 632.994 652.029 632.107 652.716C631.65 657.522 639.291 671.887 635.79 677.322C634.859 677.506 633.925 677.675 632.989 677.831C632.131 681.116 632.799 690.455 632.489 694.471C630.226 723.84 630.909 753.322 629.314 782.732C629.14 785.931 625.547 796.851 625.94 798.864C629.598 800.109 636.768 800.374 640.719 800.6C639.467 791.275 640.199 784.713 645.995 776.695C646.769 775.625 647.814 774.495 649.069 774.05C649.861 774.67 650.092 774.563 650.024 775.533C649.191 787.464 643.545 787.938 646.607 801.467C653.067 801.116 658.855 802.299 665.418 801.706C669.387 801.347 673.088 801.445 677.144 800.886C677.525 798.967 676.409 796.768 676.18 794.675C675.559 788.983 679.145 776.361 684.667 773.916C686.122 774.237 685.574 773.857 686.402 775.037C683.636 782.482 679.997 790.171 683.467 798.13C704.73 802.662 721.606 796.52 739.733 785.371C742.45 783.7 745.753 780.451 748.269 780.208C752.537 781.828 753.409 785.557 756.96 784.663C759.74 781.291 751.267 761.452 757.656 760.732C759.12 761.485 767.203 767.251 769.974 768.908C771.83 766.028 767.177 754.198 766.066 750.952C763.891 744.597 753.222 731.508 754.546 725.263L755.351 724.471C761.047 724.602 765.442 728.758 774.041 729.303C770.862 720.057 767.046 709.378 761.449 701.371C757.455 695.658 747.048 690.736 746.666 684.568C749.035 679.751 759.51 685.653 762.728 684.546C755.498 670.066 738.344 659.708 727.4 648.311C725.701 646.541 727.356 643.656 729.06 643.53C733.58 643.196 741.444 646.5 745.496 648.373C738.073 638.355 731.015 631.328 721.029 623.896C717.331 621.143 708.229 616.479 708.002 612.004C710.754 608.783 719.298 612.36 723.093 613.549C713.377 604.3 704.44 598.823 693.618 591.14C673.308 576.723 652.79 560.674 636.606 541.675C625.494 528.629 614.753 515.512 600.7 505.495C590.002 497.62 585.287 496.191 574.514 490.692C564.817 501.84 557.566 510.705 546.331 520.921C553.085 521.485 558.534 520.744 565.169 520.679C566.256 520.668 567.197 523.281 566.981 524.667C565.081 526.9 559.107 527.927 556.177 528.249C551.295 528.786 545.279 527.219 540.409 526.566C536.1 525.988 529.982 531.326 525.546 527.246L525.302 526.239C526.326 524.746 531.889 521.297 533.669 520.074C550.965 508.19 565.029 491.329 577.389 474.544C578.753 472.693 580.091 470.663 581.701 468.955C583.725 469.752 591.082 473.12 592.49 473.141C597.328 467.944 587.827 446.563 589.615 442.854C594.794 441.704 604.037 452.57 608.31 455.154C612.66 451.473 603.708 427.316 600.946 422.343C599.844 420.358 597.986 415.829 599.587 413.952C608.509 411.323 617.806 412.581 626.322 415.846C618.833 401.387 614.875 397.447 600.954 389.384C599.523 388.555 599.245 386.8 599.379 385.212C602.294 381.056 623.14 379.205 627.735 380.182C628.753 373.591 596.918 367.47 594.065 362.916C595.026 357.487 611.356 359.037 614.021 354.224C613.014 352.321 584.826 346.348 587.902 336.505C599.371 299.812 593.719 260.25 577.811 225.762C575.802 221.406 573.238 217.231 571.201 212.883C569.922 212.395 570.006 212.438 568.631 212.56ZM333.461 559.744C332.5 562.056 331.493 563.497 332.366 565.718C333.372 563.568 334.646 562.004 333.461 559.744ZM358.233 715.033C354.163 715.693 350.079 718.174 346.27 719.862C330.49 726.857 312.372 738.506 302.051 752.545C296.905 759.544 291.377 771.342 292.972 780.349L293.102 781.044C299.749 789.941 303.294 786.385 312.734 788.809C311.132 782.458 310.258 781.216 311.17 774.457C312.245 766.482 323.944 749.4 333.047 751.31C333.66 752.039 333.8 751.855 333.684 752.651C332.992 757.418 319.941 763.05 319.331 778.875C319.456 785.981 320.016 784.378 323.514 789.548C328.727 789.369 342.61 789.9 346.657 789.395C346.335 787.975 346.214 787.77 345.551 786.459C341.477 778.403 348.274 768.815 352.188 762.002C353.832 759.139 355.773 755.433 359.414 755.75C362.737 758.246 359.323 762.7 357.63 765.422C352.767 773.238 351.43 778.982 352.648 787.967C358.538 788.233 369.64 789.828 374.486 789.046C384.025 766.656 379.893 764.038 371.757 741.377C370.35 737.459 362.013 717.267 360.146 715.595C359.666 715.438 358.68 715.066 358.233 715.033Z"/><path fill="#FEFEFE" d="M408.804 255.781C409.249 257.424 409.721 259.061 410.219 260.689C416.724 281.479 431.254 260.847 439.118 257.952C443.042 258.632 440.062 263.277 443.251 266.074C447.889 267.564 457.882 257.421 462.052 261.465C462.169 263.45 461.442 266.52 462.448 268.024C465.643 272.804 469.358 267.827 472.718 268.312C472.481 270.794 472.057 272.599 473.494 274.551C477.274 275.106 486.337 264.036 489.189 261.168C511.322 238.914 538.255 220.729 568.631 212.56C570.006 212.438 569.922 212.395 571.201 212.883C573.238 217.231 575.802 221.406 577.811 225.762C593.719 260.25 599.371 299.812 587.902 336.505C584.826 346.348 613.014 352.321 614.021 354.224C611.356 359.037 595.026 357.487 594.065 362.916C596.918 367.47 628.753 373.591 627.735 380.182C623.14 379.205 602.294 381.056 599.379 385.212C599.245 386.8 599.523 388.555 600.954 389.384C614.875 397.447 618.833 401.387 626.322 415.846C617.806 412.581 608.509 411.323 599.587 413.952C597.986 415.829 599.844 420.358 600.946 422.343C603.708 427.316 612.66 451.473 608.31 455.154C604.037 452.57 594.794 441.704 589.615 442.854C587.827 446.563 597.328 467.944 592.49 473.141C591.082 473.12 583.725 469.752 581.701 468.955C580.091 470.663 578.753 472.693 577.389 474.544C565.029 491.329 550.965 508.19 533.669 520.074C531.889 521.297 526.326 524.746 525.302 526.239L525.546 527.246C529.982 531.326 536.1 525.988 540.409 526.566C545.279 527.219 551.295 528.786 556.177 528.249C559.107 527.927 565.081 526.9 566.981 524.667C567.197 523.281 566.256 520.668 565.169 520.679C558.534 520.744 553.085 521.485 546.331 520.921C557.566 510.705 564.817 501.84 574.514 490.692C585.287 496.191 590.002 497.62 600.7 505.495C614.753 515.512 625.494 528.629 636.606 541.675C652.79 560.674 673.308 576.723 693.618 591.14C704.44 598.823 713.377 604.3 723.093 613.549C719.298 612.36 710.754 608.783 708.002 612.004C708.229 616.479 717.331 621.143 721.029 623.896C731.015 631.328 738.073 638.355 745.496 648.373C741.444 646.5 733.58 643.196 729.06 643.53C727.356 643.656 725.701 646.541 727.4 648.311C738.344 659.708 755.498 670.066 762.728 684.546C759.51 685.653 749.035 679.751 746.666 684.568C747.048 690.736 757.455 695.658 761.449 701.371C767.046 709.378 770.862 720.057 774.041 729.303C765.442 728.758 761.047 724.602 755.351 724.471L754.546 725.263C753.222 731.508 763.891 744.597 766.066 750.952C767.177 754.198 771.83 766.028 769.974 768.908C767.203 767.251 759.12 761.485 757.656 760.732C751.267 761.452 759.74 781.291 756.96 784.663C753.409 785.557 752.537 781.828 748.269 780.208C745.753 780.451 742.45 783.7 739.733 785.371C721.606 796.52 704.73 802.662 683.467 798.13C679.997 790.171 683.636 782.482 686.402 775.037C685.574 773.857 686.122 774.237 684.667 773.916C679.145 776.361 675.559 788.983 676.18 794.675C676.409 796.768 677.525 798.967 677.144 800.886C673.088 801.445 669.387 801.347 665.418 801.706C658.855 802.299 653.067 801.116 646.607 801.467C643.545 787.938 649.191 787.464 650.024 775.533C650.092 774.563 649.861 774.67 649.069 774.05C647.814 774.495 646.769 775.625 645.995 776.695C640.199 784.713 639.467 791.275 640.719 800.6C636.768 800.374 629.598 800.109 625.94 798.864C625.547 796.851 629.14 785.931 629.314 782.732C630.909 753.322 630.226 723.84 632.489 694.471C632.799 690.455 632.131 681.116 632.989 677.831C633.925 677.675 634.859 677.506 635.79 677.322C639.291 671.887 631.65 657.522 632.107 652.716C632.994 652.029 634.362 650.981 634.462 649.702C635.181 640.501 616.796 597.673 609.525 596.483L608.467 597.253C607.98 598.312 607.544 599.647 607.932 600.812C612.934 615.844 620.804 628.438 625.472 643.691C622.859 642.112 620.648 640.008 618.03 643.178C616.969 649.062 624.589 655.311 626.745 664.126C625.607 665.688 623.575 663.037 620.597 665.615C619.737 667.53 620.976 673.103 621.089 675.504C621.555 685.408 622.507 695.676 620.543 705.423C620.478 705.744 622.402 709.912 622.711 710.874C621.515 710.37 621.923 710.452 620.647 710.306C619.375 715.118 620.152 735.146 619.183 741.685C619.143 741.951 619.717 744.672 619.876 744.958C621.046 747.117 619.201 749.249 618.8 751.175C610.823 789.48 613.388 823.96 562.353 822.977L561.831 822.456C552.444 812.923 558.872 802.762 554.747 798.589L553.812 798.705C548.49 804.749 553.708 818.737 555.56 825.341C546.471 826.838 537.16 826.258 528.327 823.644C524.158 815.951 525.479 806.38 524.454 797.465L523.516 796.933L522.4 797.342C518.833 802.36 520.285 818.888 520.981 824.936C509.963 823.308 502.24 821.694 500.86 808.897C499.574 796.972 504.791 788.348 509.186 777.698C511.303 772.444 513.225 767.113 514.947 761.716C520.038 745.312 522.027 727.558 521.767 710.506C521.69 705.44 522.257 692.586 514.805 692.559C510.286 696.124 512.444 714.08 512.249 719.528C511.875 729.976 510.107 739.942 508.475 750.221C501.115 748.289 489.885 741.332 483.351 737.323C478.522 734.36 471.877 730.111 467.512 726.575C452.793 714.654 440.598 699.469 430.909 683.252C429.769 681.339 429.905 679.441 428.626 676.986C425.185 675.736 422.998 684.623 422.122 687.182C416.641 679.875 413.662 668.324 409.914 659.962C409.519 659.735 409.125 659.509 408.73 659.283C405.984 659.993 404.901 662.695 403.355 665.224C399.793 657.742 398.723 646.84 396.68 638.766C395.846 635.47 395.494 627.67 392.451 626.267L391.569 626.834C389.109 632.68 398.043 678.211 402.768 680.789C404.542 679.863 406.495 672.737 407.661 670.035C407.889 671.148 408.878 675.91 409.295 676.541C412.42 681.267 420.349 703.192 426.569 702.103C427.848 700.549 427.603 693.541 427.743 690.812C429.698 694.01 431.008 697.083 433.236 700.453C451.65 728.309 476.937 744.564 506.609 758.591C504.832 761.879 505.277 764.27 503.271 768.618C499.486 779.016 496.091 793.751 494.897 804.693C478.437 809.837 446.83 824.762 429.677 818.352C429.487 816.411 429.316 813.711 429.542 811.775C429.954 808.242 431.65 804.462 430.866 800.906L430.109 800.458C423.327 803.714 424.357 815.412 424.54 821.628C409.828 823.391 397.325 823.796 400.812 802.668C401.039 801.295 401.458 802.626 401.361 800.717L400.273 800.276C394.082 801.205 396.05 815.541 396.548 820.007C364.394 812.766 385.958 791.944 387.605 772.761C389.517 750.489 377.676 725.519 369.807 705.278C366.293 696.067 363.024 686.765 360.004 677.381C357.36 669.192 355.094 660.854 352.4 652.696C351.142 648.886 351.957 645.499 348.89 642.592C346.957 640.76 349.77 641.292 349.334 639.278C349.307 638.026 346.046 631.692 346.284 630.927C348.005 625.763 345.586 621.488 345.405 616.66C344.864 602.155 341.331 581.893 343.571 567.728L346.306 566.133L346.819 566.144C350.081 566.274 351.308 565.644 353.753 563.5C359.724 565.179 365.424 566.182 371.627 566.668C370.029 571.84 360.279 594.999 366.861 597.334C370.815 596.594 374.271 591.22 377.636 588.634C379.955 586.852 381.027 586.126 383.532 584.607C383.357 596.011 385.548 605.524 393.111 614.344C396.237 617.989 405.601 629.713 410.786 629.198C413.508 625.399 406.433 614.646 406.523 608.507C406.618 602.008 406.908 600.704 409.203 594.635C411.6 601.834 413.104 604.817 416.482 611.514C419.35 617.197 441.072 639.445 445.874 635.851C445.81 629.651 443.261 627.733 443.662 618.436C444.859 620.344 448.401 626.085 449.817 627.364C455.133 632.169 476.994 655.151 483.29 652.908C484.944 648.916 482.05 648.865 480.686 644.522C477.836 635.45 476.438 624.273 480.756 615.504L481.065 614.89C498.514 624.782 502.898 649.083 507.939 651.52C512.911 651.001 511.699 644.215 511.429 640.433C510.866 632.517 511.967 601.702 518.052 597.257C520.587 597.971 522.619 601.951 524.184 604.09C526.868 607.762 523.534 618.495 527.168 621.879L528.11 621.842C529.564 620.885 530.849 618.952 531.748 617.423C539.763 603.8 541.317 590.73 537.86 575.663C540.529 579.005 546.369 589.666 548.295 590.196C550.017 589.609 549.372 590.11 550.418 588.819C551.648 578.965 549.264 559.932 544.15 551.283C550.222 552.144 553.102 553.775 558.186 556.938C560.403 558.317 563.656 560.587 566.282 559.924C569.934 555.313 555.16 528.639 544.301 530.246L543.855 531.078C544.98 535.659 551.982 537.125 555.633 542.537C558.888 547.362 558.634 547.347 560.636 553.031C556.413 550.454 544.81 544.846 540.43 548.244C538.942 552.145 542.714 554.938 543.984 560.103C545.641 566.838 546.043 570.468 546.424 577.412C542.072 574.532 537.96 567.473 532.552 569.758C530.353 573.267 534.975 581.832 534.512 588.297C533.943 596.247 533.231 600.149 530.347 607.788C529.562 604.725 529.27 603.814 529.265 600.545C526.407 596.615 521.182 589.46 515.669 592.26C510.479 598.406 505.503 625.179 504.435 634.085C497.437 623.066 490.814 614.092 478.409 609.339C470.629 617.134 470.35 629.909 472.534 639.996C457.065 626.261 454.575 625.792 444.52 608.194C437.695 607.907 438.364 621.391 438.235 626.351C432.084 621.567 428.424 618.163 423.827 611.875C419.443 605.876 415.014 590.826 410.365 586.934C403.388 585.245 399.876 604.318 399.129 608.866C398.581 608.145 398.05 607.41 397.537 606.664C391.503 597.843 389.302 590.5 391.28 579.926C393.2 578.797 395.884 577.508 394.886 574.947C390.182 573.299 377.093 581.119 372.67 583.536C374.987 577.791 376.193 572.8 378.949 566.978C391.493 566.488 401.999 566.735 414.244 563.42C417.437 562.556 424.48 562.607 425.793 558.611L425.282 557.988C424.119 557.5 422.662 557.107 421.457 557.304C401.536 560.566 381.233 560.488 361.333 557.009C357.674 556.369 352.719 553.136 348.939 552.953C347.41 553.936 347.248 556.024 346.187 558.097C339.496 558.729 331.875 550.826 327.938 550.159C325.905 552.162 325.462 563.587 325.471 566.766C318.665 562.743 310.388 550.703 307.183 543.313C306.13 540.885 306 535.377 304.452 532.948C300.331 532.667 290.755 543.317 292.197 548.126L291.296 548.019C285.867 541.35 282.004 523.605 279.415 515.523C273.879 511.202 267.379 525.308 263.884 527.798C258.327 525.163 273.014 492.404 267.521 490.171C263.168 490.969 264.106 495.117 261.4 497.281C258.889 499.29 254.779 501.476 251.863 502.907C256.521 495.564 257.991 489.819 259.428 481.222C260.503 474.79 249.595 471.057 244.793 467.368C235.241 460.028 227.867 452.672 220.462 443.176C204.669 422.922 195.266 398.433 188.143 373.991C187.071 370.287 183.549 355.394 182.86 351.877C182.126 348.125 196.606 345.537 200.348 344.81C231.995 338.668 265.945 341.312 297.356 347.85C299.559 348.307 304.349 349.215 306.165 348.012C307.775 344.662 303.109 342.867 300.57 341.357C302.985 336.289 305.25 329.722 307.554 324.913C308.786 322.34 317.153 307.682 318.633 306.747C318.899 307.336 319.174 307.92 319.457 308.5C320.396 310.377 320.536 310.683 322.169 311.244C324.979 310.251 331.648 295.737 335.314 291.64C339.814 286.611 340.329 285.028 346.34 280.849C348.696 282.876 347.121 289.444 350.988 291.983C352.051 292.027 352.855 292.103 353.785 291.245C361.099 284.498 366.566 278.62 375.419 273.694C385.573 280.118 398.55 260.708 408.804 255.781ZM562.33 234.631C545.024 237.536 528.96 268.561 528.091 284.953C528.053 285.663 528.754 286.49 529.197 287.001C531.586 287.5 531.897 287.003 534.121 285.559C533.952 287.701 532.421 288.879 532.187 291.75C535.063 297.638 541.13 288.203 542.852 286.161C543.719 287.178 543.344 286.762 543.608 288.427L544.785 288.017L545.008 288.436C542.885 291.034 541.308 292.382 540.973 295.763C542.361 299.468 543.82 299.484 546.872 297.884C549.95 298.925 552.851 300.168 555.85 301.413C538.757 309.8 550.268 311.172 559.082 320.134C560.741 321.74 562.94 323.742 565.096 321.703C565 318.823 561.841 315.635 559.79 313.72C557.961 312.03 556.111 310.364 554.24 308.72C558.424 307.771 567.679 307.051 567.385 301.654C564.685 297.184 557.928 295.555 553.515 293.509C549.319 291.563 557.452 288.402 556.805 283.526C554.79 280.141 547.027 285.58 542.802 284.129C542.789 280.566 547.36 278.412 548.205 275.068C546.096 273.366 544.168 276.725 541.468 276.453C535.324 269.355 559.411 242.304 564.637 236.389C565.349 235.583 565.154 235.48 564.806 234.666C563.371 234.492 563.724 234.446 562.33 234.631ZM477.403 307.671C464.683 309.49 460.223 311.982 451.65 322.313C451.031 323.058 450.812 323.636 450.51 324.539L450.823 325.163C454.121 325.412 464.212 318.894 468.867 316.798C480.474 311.517 495.276 319.149 498.742 316.451C499.632 310.133 481.76 307.677 477.403 307.671ZM481.117 334.457C480.448 338.795 480.045 340.871 481.193 345.242C479.243 345.85 473.327 347.356 471.863 348.106C462.828 352.734 455.083 360.902 450.243 369.758C437.082 393.836 445.722 433.673 471.021 446.704C483.938 453.23 498.894 454.446 512.696 450.094C525.212 446.026 529.177 442.28 538.426 433.48C540.068 433.768 545.797 434.238 546.584 434.49C550.386 435.712 556.558 442.424 560.643 440.272C561.271 439.061 561.441 438.151 561.081 436.744C560.279 435.329 559.305 433.713 558.569 432.292C556.782 431.241 554.832 430.025 552.846 429.406C550.671 428.728 545.637 428.729 543.827 427.872C544.395 426.291 547.377 421.769 548.971 420.755C553.604 421.188 558.046 421.955 562.583 422.989C565.353 423.621 568.303 425.977 570.932 424.806C571.587 423.448 571.534 422.196 571.059 420.65C569.925 416.957 566.843 416.416 563.725 415.388C561.452 414.64 554.809 414.449 553.886 412.915L555.278 408.733L555.876 408.511C564.908 405.256 573.195 409.722 576.179 406.473C576.026 399.349 564.227 400.942 559.865 398.288C559.301 397.945 559.387 386.987 559.381 385.744C560.643 384.588 562.007 383.567 561.841 381.735C561.33 376.108 552.517 365.311 548.736 361.629C536.481 349.698 516.669 344.48 500.02 344.262C495.739 344.206 491.024 345.491 486.699 345.18C486.44 341.112 486.908 337.532 484.13 334.851C482.648 334.38 482.69 334.431 481.117 334.457ZM203.852 366.535C203.541 368.251 203.355 368.59 204.033 370.219C205.358 371.177 212.459 373.831 214.514 374.748C225.543 379.665 243.343 386.85 252.514 394.532C248.31 394.131 236.382 395.661 235.872 400.458C237.813 405.266 248.003 407.665 246.72 411.072C245.796 413.522 230.129 420.767 229.006 422.405C230.163 426.767 238.258 426.416 240.178 428.646C239.492 433.074 236.952 438.746 238.392 442.092C241.133 443.748 244.784 441.056 247.573 439.676L252.663 442.308C252.015 446.314 250.344 457.41 255.377 459.054C257.844 457.636 258.552 454.152 258.83 451.457C258.897 447.681 259.109 441.976 258.596 438.303L258.121 437.868C254.402 434.526 251.813 433.314 246.994 434.904L246.142 434.414L246.119 433.522C248.363 432.145 249.211 432.195 250.381 430.227C250.081 428.563 250.132 428.633 249.306 427.171C251.266 425.896 254.216 424.377 255.337 422.537C255.063 417.796 246.344 420.511 243.306 421.357C246.603 419.09 257.225 413.914 258.158 410.458C259.299 406.231 250.328 403.467 247.657 400.981C249.887 397.617 262.301 400.911 264.987 398.175C265.154 396.483 264.752 394.74 263.344 393.387C248.282 378.912 227.944 370.752 207.763 366.495C207.04 366.342 204.643 366.501 203.852 366.535ZM316.057 369.62C303.594 371.991 295.009 380.55 290.083 391.929C288.531 395.515 287.492 398.263 287.891 402.271L288.615 403.345C291.157 403.49 291.859 401.516 293.001 399.492C297.136 388.792 302.579 380.563 313.426 375.188C318.326 372.76 323.806 374.653 325.471 371.616C323.745 369.48 318.64 369.434 316.057 369.62ZM338.191 404.637C329.774 406.057 327.172 407.619 319.908 412.219C318.363 409.617 315.112 403.157 311.303 405.502C310.059 409.24 314.201 415.73 313.755 417.185C312.981 419.709 307.308 424.763 305.739 427.622C296.731 443.752 296.249 463.284 304.452 479.838C314.926 500.646 334.113 509.049 356.377 510.203C364.763 510.666 377.988 507.37 383.825 501.412C406.376 478.39 412.776 445.924 388.938 421.197C374.133 405.839 367.52 405.605 346.457 404.414C343.867 404.239 340.733 404.323 338.191 404.637ZM444.256 457.175C438.101 457.79 431.515 459.125 427.159 464.103C422.731 469.162 420.434 475.564 427.427 479.609C432.825 482.732 438.44 484.252 444.572 485.209C444.683 485.226 445.342 486.989 445.379 487.224C446.093 491.658 444.309 499.147 441.712 502.731C439.212 506.181 436.437 508.607 432.211 509.26C427.6 509.973 424.163 509.551 419.844 508.132C415.981 506.863 410.125 499.532 407.088 503.041C407.347 506.874 415.846 514.553 419.388 515.67C436.438 521.049 445.067 516.943 450.605 499.867C451.397 495.668 451.907 494.787 451.122 490.638C459.484 495.019 468.255 498.519 477.949 495.732C487.323 493.038 503.045 475.82 497.502 465.845L496.565 465.494C493.613 466.929 489.74 477.554 486.887 480.815C479.146 489.663 457.916 491.216 452.401 480.72C450.286 476.693 471.82 454.602 444.256 457.175Z"/><path d="M555.85 301.413C552.851 300.168 549.95 298.925 546.872 297.884C543.82 299.484 542.361 299.468 540.973 295.763C541.308 292.382 542.885 291.034 545.008 288.436L544.785 288.017L543.608 288.427C543.344 286.762 543.719 287.178 542.852 286.161C541.13 288.203 535.063 297.638 532.187 291.75C532.421 288.879 533.952 287.701 534.121 285.559C531.897 287.003 531.586 287.5 529.197 287.001C528.754 286.49 528.053 285.663 528.091 284.953C528.96 268.561 545.024 237.536 562.33 234.631C563.724 234.446 563.371 234.492 564.806 234.666C565.154 235.48 565.349 235.583 564.637 236.389C559.411 242.304 535.324 269.355 541.468 276.453C544.168 276.725 546.096 273.366 548.205 275.068C547.36 278.412 542.789 280.566 542.802 284.129C547.027 285.58 554.79 280.141 556.805 283.526C557.452 288.402 549.319 291.563 553.515 293.509C557.928 295.555 564.685 297.184 567.385 301.654C567.679 307.051 558.424 307.771 554.24 308.72C556.111 310.364 557.961 312.03 559.79 313.72C561.841 315.635 565 318.823 565.096 321.703C562.94 323.742 560.741 321.74 559.082 320.134C550.268 311.172 538.757 309.8 555.85 301.413Z"/><path d="M468.867 316.798C464.212 318.894 454.121 325.412 450.823 325.163L450.51 324.539C450.812 323.636 451.031 323.058 451.65 322.313C460.223 311.982 464.683 309.49 477.403 307.671C481.76 307.677 499.632 310.133 498.742 316.451C495.276 319.149 480.474 311.517 468.867 316.798Z"/><path d="M481.193 345.242C480.045 340.871 480.448 338.795 481.117 334.457C482.69 334.431 482.648 334.38 484.13 334.851C486.908 337.532 486.44 341.112 486.699 345.18C491.024 345.491 495.739 344.206 500.02 344.262C516.669 344.48 536.481 349.698 548.736 361.629C552.517 365.311 561.33 376.108 561.841 381.735C562.007 383.567 560.643 384.588 559.381 385.744C559.387 386.987 559.301 397.945 559.865 398.288C564.227 400.942 576.026 399.349 576.179 406.473C573.195 409.722 564.908 405.256 555.876 408.511L555.278 408.733L553.886 412.915C554.809 414.449 561.452 414.64 563.725 415.388C566.843 416.416 569.925 416.957 571.059 420.65C571.534 422.196 571.587 423.448 570.932 424.806C568.303 425.977 565.353 423.621 562.583 422.989C558.046 421.955 553.604 421.188 548.971 420.755C547.377 421.769 544.395 426.291 543.827 427.872C545.637 428.729 550.671 428.728 552.846 429.406C554.832 430.025 556.782 431.241 558.569 432.292C559.305 433.713 560.279 435.329 561.081 436.744C561.441 438.151 561.271 439.061 560.643 440.272C556.558 442.424 550.386 435.712 546.584 434.49C545.797 434.238 540.068 433.768 538.426 433.48C529.177 442.28 525.212 446.026 512.696 450.094C498.894 454.446 483.938 453.23 471.021 446.704C445.722 433.673 437.082 393.836 450.243 369.758C455.083 360.902 462.828 352.734 471.863 348.106C473.327 347.356 479.243 345.85 481.193 345.242ZM518.605 355.383C521.709 358.461 527.465 363.062 529.863 366.353C548.289 391.639 540.075 435.261 503.218 435.406C491.012 435.454 482.951 429.422 474.458 421.291C467.776 424.47 466.624 424.691 459.32 425.242C463.55 431.08 465.704 433.256 471.761 437.335C481.907 444.398 492.582 448.507 504.879 446.143C524.276 442.414 532.083 433.707 543.851 419.274C543.845 417.881 543.715 417.81 543.217 416.477C543.863 413.777 544.393 414.606 545.664 413.063C550.864 406.749 551.759 396.122 553.238 388.389C555.832 374.821 530.937 354.766 518.605 355.383ZM466.103 367.511C461.23 369.823 457.116 372.182 455.324 377.725C453.177 384.367 455.772 387.753 458.059 393.13C464.544 396.368 465.124 396.654 472.226 396.186C476.348 391.415 483.709 389.496 483.912 381.015C484.108 372.852 474.505 367.291 467.367 367.454C466.946 367.465 466.524 367.484 466.103 367.511ZM485.322 386.922C483.397 388.664 482.482 390.437 482.39 393.13C482.335 394.696 482.983 396.205 484.156 397.243C485.886 398.794 488.528 398.637 490.711 398.543C497.432 391.839 493.62 387.234 485.322 386.922Z"/><path fill="#FEFEFE" d="M474.458 421.291C482.951 429.422 491.012 435.454 503.218 435.406C540.075 435.261 548.289 391.639 529.863 366.353C527.465 363.062 521.709 358.461 518.605 355.383C530.937 354.766 555.832 374.821 553.238 388.389C551.759 396.122 550.864 406.749 545.664 413.063C544.393 414.606 543.863 413.777 543.217 416.477C543.715 417.81 543.845 417.881 543.851 419.274C532.083 433.707 524.276 442.414 504.879 446.143C492.582 448.507 481.907 444.398 471.761 437.335C465.704 433.256 463.55 431.08 459.32 425.242C466.624 424.691 467.776 424.47 474.458 421.291Z"/><path d="M252.514 394.532C243.343 386.85 225.543 379.665 214.514 374.748C212.459 373.831 205.358 371.177 204.033 370.219C203.355 368.59 203.541 368.251 203.852 366.535C204.643 366.501 207.04 366.342 207.763 366.495C227.944 370.752 248.282 378.912 263.344 393.387C264.752 394.74 265.154 396.483 264.987 398.175C262.301 400.911 249.887 397.617 247.657 400.981C250.328 403.467 259.299 406.231 258.158 410.458C257.225 413.914 246.603 419.09 243.306 421.357C246.344 420.511 255.063 417.796 255.337 422.537C254.216 424.377 251.266 425.896 249.306 427.171C250.132 428.633 250.081 428.563 250.381 430.227C249.211 432.195 248.363 432.145 246.119 433.522L246.142 434.414L246.994 434.904C251.813 433.314 254.402 434.526 258.121 437.868L258.596 438.303C259.109 441.976 258.897 447.681 258.83 451.457C258.552 454.152 257.844 457.636 255.377 459.054C250.344 457.41 252.015 446.314 252.663 442.308L247.573 439.676C244.784 441.056 241.133 443.748 238.392 442.092C236.952 438.746 239.492 433.074 240.178 428.646C238.258 426.416 230.163 426.767 229.006 422.405C230.129 420.767 245.796 413.522 246.72 411.072C248.003 407.665 237.813 405.266 235.872 400.458C236.382 395.661 248.31 394.131 252.514 394.532Z"/><path fill="#FEFEFE" d="M458.059 393.13C455.772 387.753 453.177 384.367 455.324 377.725C457.116 372.182 461.23 369.823 466.103 367.511C466.524 367.484 466.946 367.465 467.367 367.454C474.505 367.291 484.108 372.852 483.912 381.015C483.709 389.496 476.348 391.415 472.226 396.186C465.124 396.654 464.544 396.368 458.059 393.13Z"/><path d="M293.001 399.492C291.859 401.516 291.157 403.49 288.615 403.345L287.891 402.271C287.492 398.263 288.531 395.515 290.083 391.929C295.009 380.55 303.594 371.991 316.057 369.62C318.64 369.434 323.745 369.48 325.471 371.616C323.806 374.653 318.326 372.76 313.426 375.188C302.579 380.563 297.136 388.792 293.001 399.492Z"/><path fill="#FEFEFE" d="M490.711 398.543C488.528 398.637 485.886 398.794 484.156 397.243C482.983 396.205 482.335 394.696 482.39 393.13C482.482 390.437 483.397 388.664 485.322 386.922C493.62 387.234 497.432 391.839 490.711 398.543Z"/><path d="M775.41 427.662C774.292 429.09 774.086 429.134 772.473 428.698L772.035 427.755C772.188 426.042 772.733 424.673 773.721 423.25C782.766 410.218 792.517 398.996 808.09 395.054C810.032 394.846 811.053 394.971 812.336 396.532C812.373 398.979 808.928 399.428 805.765 400.651C796.566 404.208 781.095 420.134 775.41 427.662Z"/><path d="M810.947 416.397L809.196 417.723C807.607 418.934 806.568 420.137 804.663 418.773C803.644 411.969 824.411 403.688 829.704 402.53C831.981 402.032 834.55 401.535 836.868 401.172C840.078 400.671 843.202 400.321 845.353 403.289C844.333 405.096 840.526 405.039 838.239 405.349C828.746 406.633 819.013 411.402 810.947 416.397Z"/><path d="M749.247 436.274C741.591 432.65 764.219 404.508 773.417 401.985C775.032 403.014 774.599 402.323 774.976 403.981C774.525 404.933 766.61 411.534 765.02 413.011C757.641 419.866 754.814 428.506 749.247 436.274Z"/><path d="M319.908 412.219C327.172 407.619 329.774 406.057 338.191 404.637C340.733 404.323 343.867 404.239 346.457 404.414C367.52 405.605 374.133 405.839 388.938 421.197C412.776 445.924 406.376 478.39 383.825 501.412C377.988 507.37 364.763 510.666 356.377 510.203C334.113 509.049 314.926 500.646 304.452 479.838C296.249 463.284 296.731 443.752 305.739 427.622C307.308 424.763 312.981 419.709 313.755 417.185C314.201 415.73 310.059 409.24 311.303 405.502C315.112 403.157 318.363 409.617 319.908 412.219ZM328.112 426.086C310.914 431.682 314.376 454.808 333.44 451.317C341.168 450.025 344.97 442.067 344.232 434.74C341.801 431.454 340.005 429.316 336.767 426.692C333.871 426.364 331.006 425.908 328.112 426.086ZM308.848 441.91C304.839 450.944 306.294 464.213 309.652 473.245C313.954 484.815 323.747 493.283 334.885 498.068C350.83 504.919 364.857 504.612 380.791 498.172C388.778 494.944 392.463 486.914 395.951 479.491C396.883 477.508 397.798 474.755 398.516 472.677C399.323 469.615 400.34 466.161 400.798 463.079C398.881 461.893 396.438 460.476 394.661 459.166C392.843 469.459 389.695 481.763 380.446 487.174C358.616 499.946 330.288 486.913 318.089 466.663C313.616 459.238 311.449 454.837 310.054 446.292C309.895 445.425 309.399 442.5 308.848 441.91ZM347.71 447.466C346.101 448.168 344.995 449.684 344.818 451.431C344.64 453.178 345.418 454.885 346.853 455.897C348.288 456.909 350.157 457.069 351.743 456.316C354.142 455.176 355.182 452.323 354.081 449.907C352.98 447.49 350.144 446.404 347.71 447.466Z"/><path d="M849.752 421.921C847.848 423.025 848.336 423.118 846.46 423.062L845.693 422.116C846.704 414.644 864.055 412.575 870.231 411.671C871.394 411.559 871.631 411.692 872.815 411.858C874.243 413.126 873.764 412.381 874.364 414.139C873.887 415.095 873.881 415.452 872.591 415.667C864.008 417.094 857.684 417.977 849.752 421.921Z"/><path fill="#FEFEFE" d="M333.44 451.317C314.376 454.808 310.914 431.682 328.112 426.086C331.006 425.908 333.871 426.364 336.767 426.692C340.005 429.316 341.801 431.454 344.232 434.74C344.97 442.067 341.168 450.025 333.44 451.317Z"/><path d="M719.563 474.507L717.762 472.96C715.496 468.027 721.083 454.378 723.29 449.552C727.568 440.192 732.093 431.485 740.958 425.79C741.954 426.273 741.581 426.03 742.283 427.022C742.14 430.235 735 438.255 733.149 441.898C730.432 447.245 728.296 452.308 725.995 457.761C724.163 462.106 722.007 471.667 719.563 474.507Z"/><path d="M844.609 461.076C840.253 462.445 823.418 470.502 821.706 470.459L821.321 469.675C821.667 468.538 822.071 467.729 822.894 466.76C834.378 453.231 853.122 441.594 869.859 435.678C874.097 434.179 881.234 433.3 885.598 432.677C888.962 432.372 892.561 431.99 895.868 433.005C899.679 434.175 901.993 432.475 903.993 437.026L903.588 437.929C901.243 439.068 899.744 438.126 897.674 438.93C893.716 440.467 888.322 440.53 884.366 441.428C878.349 442.794 864.403 446.046 859.121 448.625L859.177 449.473C861.508 451.158 865.551 447.795 869.796 449.895C870.749 451.595 870.457 450.651 870.232 452.938C869.043 453.979 861.61 455.372 859.473 455.973C854.303 457.428 849.623 459.214 844.609 461.076Z"/><path fill="#FEFEFE" d="M398.516 472.677C397.798 474.755 396.883 477.508 395.951 479.491C392.463 486.914 388.778 494.944 380.791 498.172C364.857 504.612 350.83 504.919 334.885 498.068C323.747 493.283 313.954 484.815 309.652 473.245C306.294 464.213 304.839 450.944 308.848 441.91C309.399 442.5 309.895 445.425 310.054 446.292C311.449 454.837 313.616 459.238 318.089 466.663C330.288 486.913 358.616 499.946 380.446 487.174C389.695 481.763 392.843 469.459 394.661 459.166C396.438 460.476 398.881 461.893 400.798 463.079C400.34 466.161 399.323 469.615 398.516 472.677Z"/><path fill="#FEFEFE" d="M351.743 456.316C350.157 457.069 348.288 456.909 346.853 455.897C345.418 454.885 344.64 453.178 344.818 451.431C344.995 449.684 346.101 448.168 347.71 447.466C350.144 446.404 352.98 447.49 354.081 449.907C355.182 452.323 354.142 455.176 351.743 456.316Z"/><path d="M703.497 501.429C702.231 501.439 702.608 501.458 701.367 501.128C694.353 494.249 707.149 461.505 712.35 453.706C713.991 454.115 714.479 454.316 715.134 455.71C707.021 471.876 705.528 484.054 703.497 501.429Z"/><path d="M450.605 499.867C445.067 516.943 436.438 521.049 419.388 515.67C415.846 514.553 407.347 506.874 407.088 503.041C410.125 499.532 415.981 506.863 419.844 508.132C424.163 509.551 427.6 509.973 432.211 509.26C436.437 508.607 439.212 506.181 441.712 502.731C444.309 499.147 446.093 491.658 445.379 487.224C445.342 486.989 444.683 485.226 444.572 485.209C438.44 484.252 432.825 482.732 427.427 479.609C420.434 475.564 422.731 469.162 427.159 464.103C431.515 459.125 438.101 457.79 444.256 457.175C471.82 454.602 450.286 476.693 452.401 480.72C457.916 491.216 479.146 489.663 486.887 480.815C489.74 477.554 493.613 466.929 496.565 465.494L497.502 465.845C503.045 475.82 487.323 493.038 477.949 495.732C468.255 498.519 459.484 495.019 451.122 490.638C451.907 494.787 451.397 495.668 450.605 499.867ZM444.17 463.438C440.219 464.889 432.479 467.73 430.107 471.249C430.244 473.787 437.528 475.965 439.899 477.434C441.357 477.759 443.197 477.61 444.751 477.582C446.589 475.352 451.195 467.538 451.663 464.777C449.416 462.889 447.111 463.343 444.17 463.438Z"/><path fill="#FEFEFE" d="M439.899 477.434C437.528 475.965 430.244 473.787 430.107 471.249C432.479 467.73 440.219 464.889 444.17 463.438C447.111 463.343 449.416 462.889 451.663 464.777C451.195 467.538 446.589 475.352 444.751 477.582C443.197 477.61 441.357 477.759 439.899 477.434Z"/><path d="M814.351 488.259C812.007 489.511 804.075 494.546 801.933 493.339C801.083 487.935 807.456 484.014 811.214 481.262C823.007 472.626 836.402 468.397 850.604 465.784C854.664 465.41 865.631 464.001 868.126 467.379L867.853 468.669C865.455 469.941 859.899 469.783 857.009 470.386C841.161 473.696 828.451 481.047 814.351 488.259Z"/><path d="M780.967 532.317C778.99 533.552 773.609 536.636 772.225 533.267C773.017 526.012 784.978 517.469 790.224 513.099C805.076 500.73 821.507 493.265 840.841 490.72C843.798 490.367 849.737 490.337 851.242 493.233C849.976 496.146 839.942 498.122 835.983 499.39C814.797 506.177 798.181 518.615 780.967 532.317Z"/><path d="M759.795 572.439L757.894 572.859C756.438 572.321 757.015 572.788 756.244 571.254C756.379 565.164 764.631 557.356 768.409 552.761C784.046 533.739 801.759 527.8 824.764 522.058L826.992 522.12C828.581 523.239 828.119 522.521 828.626 524.203C826.785 527.271 814.506 530.224 810.511 532.349C797.643 539.191 785.824 546.517 775.514 557.032C770.433 562.214 765.653 568.004 759.795 572.439Z"/><path fill="#FEFEFE" d="M332.366 565.718C331.493 563.497 332.5 562.056 333.461 559.744C334.646 562.004 333.372 563.568 332.366 565.718Z"/><path fill="#FEFEFE" d="M293.102 781.044L292.972 780.349C291.377 771.342 296.905 759.544 302.051 752.545C312.372 738.506 330.49 726.857 346.27 719.862C350.079 718.174 354.163 715.693 358.233 715.033C358.68 715.066 359.666 715.438 360.146 715.595C362.013 717.267 370.35 737.459 371.757 741.377C379.893 764.038 384.025 766.656 374.486 789.046C369.64 789.828 358.538 788.233 352.648 787.967C351.43 778.982 352.767 773.238 357.63 765.422C359.323 762.7 362.737 758.246 359.414 755.75C355.773 755.433 353.832 759.139 352.188 762.002C348.274 768.815 341.477 778.403 345.551 786.459C346.214 787.77 346.335 787.975 346.657 789.395C342.61 789.9 328.727 789.369 323.514 789.548C320.016 784.378 319.456 785.981 319.331 778.875C319.941 763.05 332.992 757.418 333.684 752.651C333.8 751.855 333.66 752.039 333.047 751.31C323.944 749.4 312.245 766.482 311.17 774.457C310.258 781.216 311.132 782.458 312.734 788.809C303.294 786.385 299.749 789.941 293.102 781.044Z"/></svg>
\ No newline at end of file
diff --git a/spx-algorithm/resource/vector_db/database_metadata.json b/spx-algorithm/resource/vector_db/database_metadata.json
new file mode 100644
index 000000000..447b88b28
--- /dev/null
+++ b/spx-algorithm/resource/vector_db/database_metadata.json
@@ -0,0 +1,42 @@
+{
+  "database_stats": {
+    "total_images": 3,
+    "dimension": 512,
+    "model_name": "ViT-B-32",
+    "pretrained": "laion2b_s34b_b79k",
+    "db_path": "/Users/qiniu/Documents/builder/spx-algorithm/resource/vector_db/demo_vector_db",
+    "device": "cpu"
+  },
+  "images": {
+    "0": {
+      "image_path": "/Users/qiniu/Documents/builder/spx-algorithm/resource/vector_db/dog.svg",
+      "metadata": {
+        "filename": "dog.svg",
+        "directory": "/Users/qiniu/Documents/builder/spx-algorithm/resource/vector_db",
+        "file_size": 15505,
+        "relative_path": "dog.svg"
+      },
+      "added_at": "2025-08-26T13:59:58.374985"
+    },
+    "1": {
+      "image_path": "/Users/qiniu/Documents/builder/spx-algorithm/resource/vector_db/cute.svg",
+      "metadata": {
+        "filename": "cute.svg",
+        "directory": "/Users/qiniu/Documents/builder/spx-algorithm/resource/vector_db",
+        "file_size": 37641,
+        "relative_path": "cute.svg"
+      },
+      "added_at": "2025-08-26T13:59:58.546975"
+    },
+    "2": {
+      "image_path": "/Users/qiniu/Documents/builder/spx-algorithm/resource/vector_db/cute2.svg",
+      "metadata": {
+        "filename": "cute2.svg",
+        "directory": "/Users/qiniu/Documents/builder/spx-algorithm/resource/vector_db",
+        "file_size": 59391,
+        "relative_path": "cute2.svg"
+      },
+      "added_at": "2025-08-26T13:59:58.727322"
+    }
+  }
+}
\ No newline at end of file
diff --git a/spx-algorithm/resource/vector_db/demo_vector_db.py b/spx-algorithm/resource/vector_db/demo_vector_db.py
new file mode 100644
index 000000000..704b3032d
--- /dev/null
+++ b/spx-algorithm/resource/vector_db/demo_vector_db.py
@@ -0,0 +1,117 @@
+#!/usr/bin/env python3
+"""
+向量数据库演示脚本
+"""
+import os
+import sys
+import logging
+from vector_db_utils import VectorDBManager, create_sample_database
+
+# 设置日志
+logging.basicConfig(
+    level=logging.INFO,
+    format='%(asctime)s - %(name)s - %(levelname)s - %(message)s'
+)
+
+def main():
+    print("=== 向量数据库演示 ===\n")
+    
+    # 获取当前脚本所在目录
+    current_dir = os.path.dirname(os.path.abspath(__file__))
+    
+    try:
+        # 创建数据库管理器
+        print("1. 初始化向量数据库...")
+        db_manager = VectorDBManager(db_path=os.path.join(current_dir, 'demo_vector_db'))
+        
+        # 索引当前目录的图片
+        print("2. 索引当前目录的图片...")
+        stats = db_manager.index_directory(current_dir)
+        print(f"   索引结果: {stats}")
+        
+        # 显示数据库信息
+        print("\n3. 数据库信息:")
+        info = db_manager.get_database_info()
+        for key, value in info.items():
+            print(f"   {key}: {value}")
+        
+        if info['total_images'] == 0:
+            print("\n注意: 当前目录没有找到图片文件，请添加一些图片文件后重试")
+            return
+        
+        # 文本搜索示例
+        print("\n4. 文本搜索示例:")
+        search_queries = [
+            "cute animal",
+            "dog",
+            "cartoon",
+            "colorful image"
+        ]
+        
+        for query in search_queries:
+            print(f"\n   搜索: '{query}'")
+            results = db_manager.search_by_description(query, k=3)
+            if results:
+                for i, result in enumerate(results, 1):
+                    filename = result['metadata']['filename']
+                    similarity = result['similarity']
+                    print(f"     {i}. {filename} (相似度: {similarity:.3f})")
+            else:
+                print("     未找到匹配结果")
+        
+        # 图片相似搜索示例（如果有多张图片）
+        if info['total_images'] > 1:
+            print("\n5. 图片相似搜索示例:")
+            
+            # 获取第一张图片作为查询
+            first_image_path = None
+            for image_id, data in db_manager.db.metadata.items():
+                first_image_path = data['image_path']
+                break
+            
+            if first_image_path:
+                print(f"   使用图片: {os.path.basename(first_image_path)}")
+                similar_results = db_manager.search_similar_images(first_image_path, k=5)
+                for i, result in enumerate(similar_results, 1):
+                    filename = result['metadata']['filename']
+                    similarity = result['similarity']
+                    print(f"     {i}. {filename} (相似度: {similarity:.3f})")
+        
+        # 查找重复图片
+        print("\n6. 查找重复图片:")
+        duplicates = db_manager.find_duplicates(similarity_threshold=0.9)
+        if duplicates:
+            print(f"   找到 {len(duplicates)} 组相似图片:")
+            for i, group in enumerate(duplicates, 1):
+                print(f"   组 {i}:")
+                for item in group:
+                    filename = item['metadata']['filename']
+                    similarity = item['similarity']
+                    print(f"     - {filename} (相似度: {similarity:.3f})")
+        else:
+            print("   未找到重复图片")
+        
+        # 导出元数据
+        print("\n7. 导出数据库元数据...")
+        export_path = os.path.join(current_dir, 'database_metadata.json')
+        db_manager.export_metadata(export_path)
+        print(f"   元数据已导出到: {export_path}")
+        
+        print("\n=== 演示完成 ===")
+        
+    except ImportError as e:
+        if "faiss" in str(e):
+            print("错误: 缺少faiss库")
+            print("请安装faiss库:")
+            print("  CPU版本: pip install faiss-cpu")
+            print("  GPU版本: pip install faiss-gpu")
+        else:
+            print(f"导入错误: {e}")
+        sys.exit(1)
+    except Exception as e:
+        print(f"运行错误: {e}")
+        sys.exit(1)
+
+
+if __name__ == "__main__":
+    main()
\ No newline at end of file
diff --git a/spx-algorithm/resource/vector_db/demo_vector_db/index.faiss b/spx-algorithm/resource/vector_db/demo_vector_db/index.faiss
new file mode 100644
index 0000000000000000000000000000000000000000..99335b2fcb25d57c608a1fec5429ad8c7e13561c
GIT binary patch
literal 6189
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

literal 0
HcmV?d00001

diff --git a/spx-algorithm/resource/vector_db/demo_vector_db/metadata.pkl b/spx-algorithm/resource/vector_db/demo_vector_db/metadata.pkl
new file mode 100644
index 0000000000000000000000000000000000000000..6ecc6b0c0dbbc2dfc512e2b1f793d960a5de31eb
GIT binary patch
literal 847
zcmb`F+fKqj5Qb4mXz}m>K7lu7aZ70-CMJeN4dD*GZI<rXZqftpfvAaz53o1J^%;E(
zr67WddINj6|4ineZ}LCa-ul(b{5_dtZDk+{C6bugZ%`?v2Fpkc;e^P<=nHf$fD3fT
za;8wfh*So-6lkniN`WIWxpzn!7o5o?LmWh*cm!w)kt}#f$A}hjQ%qx%?9A<MSqeGH
z!07t2qHW6fy#K-Ivkm=>wo8jputzY%ms5SfAtjPcmq6dPN?U|dpdpb)AK@1EoL1oA
z&gjJLdEK5DG+n>l4LqX;<?2aIUv9V?ij;)aF_OBrR*Jnjda^gPUz7c{sVX`A9nEWZ
zx_*hayFk0z1{(gsW|wSV(stlJ-e+)YWB;V{vF~DRl$vFkhEbt%3ET{-WzuHx6|Bh3
ku(GQgSwSHU7kRX9*vL6|Tx@hB;y~no(eQB)_<>Q)Pk>4<f&c&j

literal 0
HcmV?d00001

diff --git a/spx-algorithm/resource/vector_db/dog.svg b/spx-algorithm/resource/vector_db/dog.svg
new file mode 100644
index 000000000..2c66245a6
--- /dev/null
+++ b/spx-algorithm/resource/vector_db/dog.svg
@@ -0,0 +1,213 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="1066.000000pt" height="1280.000000pt" viewBox="0 0 1066.000000 1280.000000"
+ preserveAspectRatio="xMidYMid meet">
+<g transform="translate(0.000000,1280.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M8139 12291 c-169 -72 -311 -203 -619 -571 -191 -229 -209 -247 -270
+-278 -80 -41 -113 -39 -227 12 -45 20 -126 49 -180 63 -89 24 -116 26 -293 27
+l-195 1 -165 -42 c-231 -59 -612 -135 -690 -136 -60 -2 -65 0 -68 21 -2 12 -6
+22 -10 22 -4 0 -74 -34 -157 -75 -141 -70 -158 -82 -285 -196 -74 -66 -142
+-125 -151 -130 -13 -6 -33 5 -85 45 -37 30 -101 73 -143 97 -42 23 -152 86
+-246 140 -304 176 -421 219 -597 222 -95 2 -97 1 -128 -28 -56 -53 -128 -172
+-154 -254 -14 -43 -32 -125 -40 -182 -8 -57 -25 -158 -37 -224 -32 -175 -32
+-459 -1 -601 52 -238 150 -498 323 -854 l109 -225 -3 -265 c-2 -289 2 -328 64
+-529 16 -52 29 -116 29 -146 0 -107 -67 -240 -183 -362 -39 -40 -68 -75 -66
+-77 2 -2 24 -9 48 -17 25 -8 46 -19 48 -25 2 -6 -39 -47 -91 -90 -53 -44 -98
+-89 -102 -100 -3 -12 2 -48 12 -79 l18 -57 -41 -37 c-52 -45 -61 -64 -90 -181
+-34 -137 -73 -212 -224 -425 -171 -240 -228 -326 -265 -395 -18 -35 -83 -111
+-179 -210 -150 -155 -244 -271 -347 -430 -470 -721 -642 -990 -733 -1148 -26
+-46 -55 -86 -63 -90 -36 -13 -113 129 -141 262 -23 112 -50 134 -91 76 -27
+-37 -49 -38 -82 -3 -33 36 -44 58 -68 135 -23 74 -54 128 -73 128 -8 0 -19
+-18 -26 -41 -7 -22 -27 -57 -45 -77 -102 -115 -223 -372 -242 -512 -4 -32 -15
+-59 -30 -75 -20 -21 -24 -37 -24 -85 0 -111 55 -309 127 -458 l37 -77 7 -235
+c11 -405 40 -647 105 -872 102 -356 254 -641 466 -878 52 -58 140 -166 195
+-241 55 -75 114 -145 129 -156 80 -56 361 -178 448 -194 72 -13 149 -5 230 22
+126 43 534 52 636 14 36 -13 65 -15 150 -10 90 6 112 4 155 -13 28 -10 85 -22
+128 -26 55 -4 129 -22 250 -62 l172 -57 145 6 c154 7 219 16 507 71 330 64
+494 68 693 16 94 -24 127 -25 265 -1 105 19 111 21 143 57 62 72 64 125 12
+314 -33 119 -18 125 24 10 88 -239 257 -547 417 -764 91 -122 233 -274 264
+-282 13 -3 83 6 157 20 116 23 153 26 291 23 172 -4 174 -4 186 56 6 24 12 31
+27 30 35 -5 102 28 134 63 58 66 62 89 64 321 1 200 0 213 -20 240 -19 26
+-137 103 -159 103 -5 0 9 -19 32 -42 72 -75 104 -161 89 -242 -4 -20 -12 -36
+-17 -36 -6 0 -42 29 -81 65 -67 61 -165 121 -188 113 -6 -2 17 -23 51 -48 153
+-111 240 -286 198 -397 -12 -33 -57 -83 -75 -83 -7 0 -24 20 -38 44 -33 57
+-166 191 -231 234 -57 37 -116 58 -141 48 -14 -5 -9 -11 24 -27 59 -30 162
+-128 217 -208 52 -76 68 -141 43 -174 -17 -23 -75 -37 -158 -37 -92 0 -138 24
+-197 102 -26 35 -80 97 -120 138 -59 62 -73 72 -79 57 -13 -35 27 -106 107
+-191 43 -46 79 -89 79 -94 0 -19 -65 -30 -114 -21 -25 4 -63 17 -84 28 -50 25
+-117 102 -133 149 -7 22 -41 68 -84 112 -114 119 -181 230 -252 415 -19 49
+-45 109 -59 131 -27 49 -95 234 -114 314 -28 120 -71 195 -232 402 -118 153
+-210 288 -205 302 2 6 23 16 47 23 85 25 110 74 86 175 -8 34 -18 72 -22 83
+-16 42 27 -8 56 -65 33 -66 93 -140 140 -175 19 -14 77 -40 130 -57 87 -29
+106 -32 230 -32 156 -1 187 9 218 72 46 91 82 290 82 451 1 163 12 236 65 407
+48 154 67 191 161 306 38 46 45 62 40 83 -9 36 -48 49 -86 30 -37 -19 -75 -19
+-136 1 -61 21 -77 33 -71 56 4 14 -20 35 -103 92 -59 41 -116 86 -126 99 -109
+141 -283 346 -341 403 -102 100 -186 154 -348 225 -77 33 -180 80 -228 105
+-49 24 -97 44 -107 44 -55 0 -64 25 -20 55 16 11 28 25 27 30 -2 6 -46 27 -97
+48 -62 24 -107 50 -132 74 -41 40 -41 53 1 53 16 0 34 7 41 15 26 31 -28 114
+-96 148 -30 14 -44 27 -44 41 -1 26 -38 74 -156 203 -101 111 -129 147 -120
+162 10 16 61 -4 219 -84 81 -41 150 -75 152 -75 3 0 5 15 5 34 0 19 5 38 10
+41 6 4 66 -27 133 -68 166 -102 246 -147 263 -147 8 0 14 10 14 25 0 14 3 25
+6 25 3 0 47 -38 97 -85 50 -47 99 -85 108 -85 10 0 26 12 38 28 16 22 23 25
+38 16 13 -8 23 -8 36 0 15 9 24 5 54 -28 32 -35 37 -37 48 -23 17 23 26 22 93
+-12 66 -33 120 -46 141 -32 12 8 9 16 -17 46 -59 67 -44 72 94 34 160 -44 348
+-158 463 -281 75 -80 111 -91 111 -35 0 18 -12 57 -26 86 -15 28 -24 55 -20
+58 17 17 166 -45 261 -108 55 -37 132 -82 171 -102 83 -42 91 -40 125 38 18
+43 22 47 29 30 5 -11 9 -30 9 -42 1 -33 24 -28 45 8 17 29 101 79 134 79 15 0
+16 -22 0 -38 -41 -41 91 -17 209 38 95 44 226 132 331 221 60 51 75 59 87 49
+17 -14 42 2 150 95 102 89 284 203 299 188 3 -4 6 -17 6 -30 0 -13 3 -23 8
+-23 17 0 75 43 142 106 56 53 80 85 113 153 35 70 47 87 72 95 17 5 53 30 81
+57 52 48 86 64 121 57 32 -6 22 -121 -21 -256 -39 -123 -45 -185 -20 -213 14
+-16 8 -23 -84 -97 -135 -110 -204 -199 -127 -164 33 15 45 15 45 -1 0 -23 -90
+-167 -171 -273 -43 -57 -79 -106 -79 -109 0 -3 7 -5 16 -5 27 0 12 -16 -76
+-87 -86 -69 -134 -133 -124 -165 8 -26 -28 -98 -84 -172 -54 -70 -52 -63 -72
+-256 -14 -142 -53 -225 -146 -307 -35 -31 -67 -67 -70 -80 -14 -52 57 -143
+192 -246 28 -21 56 -48 63 -60 9 -13 16 -76 20 -183 5 -139 9 -165 25 -183 35
+-38 101 -21 203 52 37 26 54 31 121 35 72 4 80 2 107 -20 24 -22 30 -35 36
+-97 4 -39 12 -86 18 -104 5 -17 15 -84 20 -147 6 -63 24 -178 40 -255 17 -77
+46 -214 65 -305 19 -91 40 -217 47 -280 10 -101 18 -133 69 -265 95 -244 114
+-342 80 -420 -28 -65 -47 -85 -80 -85 -42 0 -65 33 -66 99 -2 77 -3 81 -13 81
+-5 0 -11 -42 -13 -92 -5 -104 -25 -157 -77 -201 -81 -68 -179 -25 -222 96 -12
+33 -11 47 4 105 31 117 58 151 142 177 l20 6 -20 16 c-26 19 -136 10 -180 -15
+-46 -27 -73 -92 -86 -212 -11 -93 -16 -108 -40 -132 -15 -16 -38 -28 -51 -28
+-72 0 -210 114 -224 184 -10 54 1 124 23 154 39 53 70 67 143 67 61 0 67 2 59
+17 -15 28 -52 48 -89 48 -69 0 -136 -59 -202 -179 -15 -28 -22 -31 -62 -31
+-57 0 -93 29 -106 85 -11 45 -8 87 22 289 11 77 18 156 15 175 -10 64 -115
+553 -142 661 -14 58 -40 149 -56 203 -33 109 -45 182 -35 222 4 15 27 49 53
+76 37 40 44 53 39 74 -4 14 -11 25 -16 25 -5 0 -33 -34 -62 -75 -76 -107 -110
+-112 -124 -17 -8 53 -21 45 -53 -35 -13 -32 -30 -64 -37 -72 -11 -12 -15 -10
+-24 13 -5 15 -10 45 -10 67 0 87 -58 24 -111 -121 -51 -141 -84 -183 -262
+-329 -48 -40 -117 -108 -154 -152 -40 -48 -74 -79 -85 -79 -31 0 -60 80 -66
+180 -5 96 7 206 44 390 29 142 49 417 32 437 -17 21 -25 15 -42 -28 -24 -59
+-43 -199 -62 -459 -28 -378 -29 -546 -4 -680 11 -63 29 -182 40 -265 32 -256
+59 -354 108 -398 15 -14 128 -56 150 -57 2 0 -22 30 -52 66 -31 36 -62 77 -70
+92 -23 44 -45 172 -67 388 -24 233 -28 216 61 277 25 17 70 58 100 91 30 32
+69 65 87 72 24 11 35 24 47 61 9 27 25 63 36 81 17 27 25 33 44 28 20 -5 25 0
+35 34 16 53 62 97 139 131 35 16 77 43 93 60 26 28 33 31 62 23 36 -10 57 -47
+127 -221 88 -222 138 -442 165 -731 19 -204 19 -280 0 -379 -8 -43 -15 -97
+-15 -119 0 -38 5 -47 57 -94 31 -29 72 -59 91 -68 25 -13 43 -35 74 -94 44
+-85 92 -132 148 -148 52 -15 124 -12 195 7 l64 17 46 -43 c63 -58 116 -81 190
+-81 82 0 128 24 222 113 43 42 91 79 106 82 43 11 84 66 97 132 12 56 11 61
+-40 233 -30 96 -77 250 -106 341 -64 203 -73 248 -125 654 -50 395 -58 570
+-35 829 25 282 155 1225 181 1313 18 59 59 127 95 155 41 32 48 75 60 393 13
+349 19 388 90 650 87 317 104 417 104 610 1 183 -13 260 -74 415 -48 122 -63
+186 -95 397 -35 242 -77 423 -126 549 -84 219 -108 298 -118 394 -13 118 -33
+187 -77 269 -30 55 -34 67 -25 95 5 17 24 128 41 246 39 273 64 408 101 540
+37 131 29 182 -41 270 -15 19 -24 61 -40 185 -39 312 -76 434 -165 553 -30 40
+-55 81 -55 91 0 10 9 44 21 77 32 92 69 270 76 364 7 110 -12 358 -42 536 -86
+511 -264 870 -480 970 -65 31 -105 30 -186 -5z m210 -261 c39 -29 118 -126
+146 -181 21 -40 82 -262 110 -398 55 -273 70 -550 40 -726 -16 -92 -73 -231
+-99 -241 -27 -10 -54 15 -147 138 -90 119 -93 124 -91 172 1 28 13 74 27 104
+14 30 24 56 22 58 -1 2 -29 -4 -61 -12 -32 -8 -62 -12 -67 -7 -5 5 17 50 47
+101 31 52 54 95 52 97 -2 2 -27 -16 -57 -41 -69 -57 -85 -58 -77 -1 15 113 28
+249 23 253 -3 3 -19 -38 -37 -91 -19 -57 -37 -94 -43 -92 -7 2 -16 31 -22 64
+-5 34 -13 64 -16 68 -4 3 -21 -30 -39 -75 -18 -44 -37 -83 -42 -86 -14 -9 -26
+13 -34 61 -11 71 -19 69 -50 -12 -29 -77 -30 -78 -74 -90 -106 -27 -273 -10
+-321 33 -23 20 -35 165 -19 224 12 45 192 316 287 433 70 85 140 142 223 179
+36 16 99 45 140 64 93 42 125 43 179 4z m-4399 -845 c210 -76 513 -266 733
+-459 64 -57 72 -81 27 -91 -67 -15 -95 -101 -86 -262 4 -70 2 -113 -3 -113 -6
+0 -22 16 -37 35 -29 38 -44 44 -44 18 0 -10 -5 -25 -10 -33 -9 -13 -11 -13
+-20 0 -5 8 -14 39 -20 67 -6 29 -15 55 -19 58 -5 2 -18 -23 -30 -56 -13 -34
+-27 -59 -34 -56 -7 2 -29 32 -49 67 -51 87 -58 92 -58 43 0 -49 -8 -73 -24
+-73 -6 1 -51 36 -101 80 -49 43 -91 77 -93 75 -2 -2 13 -40 33 -86 44 -100 41
+-113 -20 -107 -53 6 -57 -2 -15 -32 17 -12 30 -27 30 -35 0 -7 -13 -16 -30
+-20 -36 -8 -37 -18 -9 -87 14 -35 25 -100 34 -193 11 -122 11 -146 -2 -185
+-31 -91 -95 -190 -124 -190 -29 0 -134 154 -203 295 -81 167 -121 271 -151
+399 -35 143 -44 262 -35 471 7 158 13 198 44 323 20 79 41 153 47 164 10 19
+18 20 103 15 64 -3 113 -13 166 -32z m3365 -1155 c13 -26 21 -30 50 -28 19 1
+37 -1 41 -5 4 -4 25 -48 46 -99 32 -77 38 -102 38 -164 0 -71 -2 -77 -84 -246
+-63 -129 -96 -186 -133 -225 -81 -86 -170 -92 -250 -17 -21 20 -45 40 -55 45
+-22 12 -55 103 -64 176 -12 115 44 311 131 451 38 61 44 67 72 65 26 -2 35 3
+53 32 22 35 54 46 63 23 3 -10 11 -9 33 4 39 23 41 23 59 -12z m-1658 -285
+c26 -10 47 -12 68 -6 63 17 220 -52 286 -127 64 -73 90 -208 69 -362 -21 -159
+-66 -210 -187 -210 -81 0 -147 15 -258 57 -114 44 -176 90 -250 188 -57 74
+-59 79 -57 131 3 68 29 193 44 211 6 7 18 12 27 11 10 -2 17 6 19 22 5 34 20
+50 48 50 13 0 27 8 33 17 8 15 14 15 48 5 34 -11 39 -10 52 8 16 24 12 24 58
+5z m3090 -127 c53 -59 142 -304 150 -413 4 -64 1 -81 -37 -185 -35 -96 -43
+-133 -49 -225 -7 -88 -15 -126 -40 -188 -33 -83 -38 -136 -20 -196 9 -32 4
+-63 -41 -246 -47 -191 -57 -221 -113 -325 -33 -63 -85 -155 -115 -205 -61
+-100 -122 -222 -122 -243 0 -8 -33 -49 -73 -91 -41 -42 -84 -90 -96 -108 -19
+-28 -133 -134 -495 -461 -89 -81 -161 -122 -253 -146 -146 -38 -419 -87 -538
+-97 -151 -12 -594 -4 -670 13 -70 15 -164 65 -273 143 -77 55 -134 84 -315
+160 -122 51 -240 96 -262 100 -33 6 -54 22 -120 90 -71 72 -86 83 -125 89 -58
+9 -92 30 -237 147 -188 154 -238 216 -271 339 -11 41 -31 98 -43 125 l-23 50
+-4 -32 c-2 -18 -7 -33 -11 -33 -10 0 -110 105 -139 147 -12 17 -22 39 -22 48
+0 9 -33 49 -73 88 -88 86 -141 184 -157 291 -6 38 -9 71 -6 73 2 3 14 0 25 -7
+21 -10 21 -9 21 72 0 46 4 88 8 94 19 29 56 36 150 30 113 -9 207 -36 283 -82
+56 -34 136 -111 158 -153 27 -50 51 -243 51 -414 0 -167 0 -168 26 -194 25
+-25 27 -25 122 -19 425 31 690 190 1025 614 153 195 174 219 182 210 4 -3 16
+-57 27 -120 22 -126 20 -281 -6 -398 -16 -74 -13 -82 52 -178 55 -81 104 -82
+235 -6 69 40 83 44 104 35 42 -19 64 -12 110 34 l44 45 81 0 c90 0 128 16 172
+72 l24 31 32 -26 c26 -22 42 -27 86 -27 82 0 121 20 146 77 27 61 20 146 -21
+263 -17 47 -31 98 -31 113 0 16 -16 65 -35 110 -39 90 -41 97 -22 97 19 0 130
+-45 201 -82 33 -17 85 -39 115 -49 31 -11 72 -32 91 -48 19 -15 49 -35 66 -44
+84 -44 209 -232 271 -412 33 -93 41 -216 19 -269 -20 -48 -20 -56 0 -56 40 0
+53 109 33 270 -16 135 -56 205 -246 433 -46 54 -83 103 -83 108 0 21 30 18
+120 -12 89 -29 106 -31 280 -35 129 -4 219 -11 297 -26 144 -27 150 -25 118
+44 -30 64 -31 91 -5 115 19 18 19 19 -10 103 -36 105 -67 293 -76 468 -7 134
+-1 157 26 107 7 -14 16 -25 20 -25 4 0 19 38 34 84 15 46 51 123 79 170 56 93
+140 196 161 196 7 0 22 -10 33 -22z m-1066 -225 c9 -9 2 -13 -27 -18 -126 -21
+-143 -27 -187 -65 -63 -56 -101 -144 -102 -236 0 -62 4 -76 27 -110 15 -21 25
+-40 23 -42 -10 -11 -82 48 -100 81 -10 19 -29 40 -42 46 -13 6 -23 16 -23 23
+0 12 26 60 95 173 40 67 113 138 155 152 43 15 165 12 181 -4z m248 -64 c55
+-19 68 -20 103 -9 66 19 68 7 29 -167 -11 -51 -29 -109 -40 -130 -31 -62 -120
+-139 -182 -158 -70 -21 -194 -31 -203 -17 -4 7 3 13 16 16 207 40 235 53 288
+136 65 101 43 214 -56 297 -70 59 -58 67 45 32z m-263 -120 c58 -35 70 -86 33
+-133 -17 -21 -29 -26 -65 -26 -95 0 -141 58 -104 130 11 21 25 40 32 43 29 12
+73 6 104 -14z m-1896 -210 c47 -17 101 -34 120 -39 39 -10 100 -70 100 -98 0
+-10 -13 -28 -29 -39 -23 -18 -32 -37 -49 -109 -22 -89 -62 -171 -88 -181 -24
+-9 -25 0 -3 56 23 61 49 179 49 222 0 17 -6 42 -14 57 -18 35 -107 88 -202
+122 -41 14 -71 29 -68 33 17 16 105 5 184 -24z m-435 -96 c-36 -82 -47 -132
+-42 -188 12 -128 44 -180 141 -226 33 -16 93 -34 133 -41 40 -6 73 -15 73 -20
+0 -4 -17 -12 -39 -18 -112 -30 -346 89 -381 195 -7 21 -24 41 -46 54 -19 11
+-34 28 -34 37 0 23 173 224 193 224 5 0 6 -8 2 -17z m311 -97 c28 -28 34 -42
+34 -76 0 -34 -6 -47 -31 -70 -16 -16 -39 -32 -50 -35 -56 -18 -119 91 -92 160
+5 15 74 54 97 55 4 0 23 -15 42 -34z m2761 -2134 c38 -24 35 -92 -13 -266 -77
+-277 -215 -549 -356 -703 -202 -220 -261 -273 -308 -273 -11 0 -38 -18 -60
+-40 -22 -23 -49 -40 -61 -40 -33 0 -59 29 -59 65 0 87 157 446 233 532 33 37
+95 73 126 73 25 0 67 49 144 168 35 53 82 118 104 144 23 26 47 64 53 85 19
+57 99 215 123 241 21 22 52 28 74 14z m-3266 -240 c24 -15 56 -33 71 -39 37
+-17 101 -76 144 -134 19 -27 49 -58 65 -70 l29 -21 11 31 c22 62 84 48 135
+-29 26 -39 26 -39 56 -24 37 19 57 12 97 -32 l32 -35 31 22 c43 31 74 18 112
+-47 l31 -51 70 -6 c42 -3 92 -15 126 -30 30 -14 86 -28 123 -32 79 -9 112 -32
+171 -120 20 -30 40 -55 45 -55 13 0 129 -139 151 -182 32 -63 78 -198 72 -214
+-7 -18 -55 -44 -82 -44 -12 0 -42 15 -68 34 -57 40 -116 61 -198 70 -136 15
+-309 56 -355 85 -14 8 -53 37 -87 64 l-63 49 -26 -21 c-34 -27 -44 -26 -103 4
+-195 98 -517 456 -677 751 -33 62 -36 74 -25 88 20 24 62 19 112 -12z m-843
+-2451 c85 -43 412 -381 503 -521 28 -42 59 -106 71 -145 12 -40 42 -100 68
+-140 50 -74 115 -216 146 -320 15 -47 19 -94 19 -215 0 -141 -2 -163 -28 -250
+-34 -113 -75 -201 -117 -252 -36 -43 -145 -101 -227 -120 l-58 -13 90 -6 c231
+-15 623 -141 819 -263 87 -54 178 -148 196 -200 14 -43 8 -102 -16 -150 -25
+-49 -65 -97 -77 -93 -6 2 -12 24 -13 50 -2 27 -16 75 -35 113 -48 102 -159
+205 -159 148 0 -9 24 -50 54 -92 87 -124 90 -134 71 -192 -20 -62 -63 -100
+-111 -100 -49 0 -68 12 -99 67 -15 25 -64 84 -109 131 -124 130 -236 202 -312
+202 -77 0 -44 -37 103 -116 147 -79 216 -132 243 -188 38 -79 41 -78 -213 -75
+l-222 3 -180 -54 -180 -55 -130 1 c-96 1 -151 7 -210 22 -44 11 -136 26 -205
+32 -209 19 -273 39 -352 109 -44 39 -49 41 -111 41 -40 0 -68 5 -75 13 -6 7
+-7 33 -2 68 9 63 84 193 118 204 39 12 45 31 27 78 -19 51 -17 86 7 101 13 8
+22 6 37 -8 21 -19 21 -19 21 11 0 17 -7 65 -16 108 -9 42 -13 87 -10 100 15
+59 197 299 248 326 13 7 42 7 93 -2 74 -12 74 -12 107 16 31 26 37 27 103 22
+38 -4 80 -9 92 -13 17 -5 22 -1 25 18 4 33 38 34 127 3 41 -14 83 -25 93 -25
+21 0 20 -7 22 225 l1 170 35 5 c42 6 48 22 49 136 2 149 -57 311 -162 444 -51
+64 -52 66 -58 152 -10 133 -56 230 -200 420 -33 42 -59 82 -59 89 0 19 109 5
+158 -20z"/>
+<path d="M5907 8080 c-35 -28 -116 -151 -143 -219 -49 -121 -70 -409 -37 -507
+25 -75 102 -178 120 -161 3 4 -6 46 -21 95 -39 125 -59 269 -52 373 8 129 34
+199 116 313 38 54 70 105 70 112 0 20 -23 17 -53 -6z"/>
+<path d="M6967 7780 c-188 -34 -400 -140 -477 -238 -50 -62 -4 -183 121 -320
+77 -85 87 -92 137 -103 46 -9 143 -8 222 3 24 3 25 1 28 -68 l3 -72 -40 -33
+c-78 -67 -193 -128 -271 -145 -121 -26 -309 -4 -442 52 -61 25 -130 35 -137
+19 -9 -20 100 -73 206 -99 135 -34 246 -42 353 -27 144 21 246 67 393 175 l27
+20 118 -25 c164 -34 312 -32 437 5 130 39 172 62 246 136 102 102 131 159 57
+111 -18 -11 -47 -28 -65 -36 -17 -8 -41 -28 -53 -45 -15 -21 -53 -46 -115 -75
+-147 -70 -223 -80 -356 -46 -89 23 -230 80 -234 95 -28 115 -28 115 65 145 76
+25 131 66 171 130 28 44 29 49 29 177 0 139 -7 174 -43 212 -43 46 -75 55
+-207 58 -69 2 -147 -1 -173 -6z m298 -188 c5 -19 -7 -61 -59 -211 -30 -85 -41
+-101 -67 -101 -63 0 -6 284 63 318 35 16 56 14 63 -6z m-564 -156 c55 -23 114
+-71 140 -113 13 -21 36 -49 51 -61 35 -30 37 -62 4 -62 -23 0 -116 63 -116 80
+0 5 -38 36 -85 70 -56 41 -85 68 -85 81 0 24 41 26 91 5z"/>
+</g>
+</svg>
diff --git a/spx-algorithm/resource/vector_db/example_db/index.faiss b/spx-algorithm/resource/vector_db/example_db/index.faiss
new file mode 100644
index 0000000000000000000000000000000000000000..c65dbecc4bb19f83074a57bcbf5227eba1bb7e07
GIT binary patch
literal 2093
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
F`U~#9;Z6Vm

literal 0
HcmV?d00001

diff --git a/spx-algorithm/resource/vector_db/example_db/metadata.pkl b/spx-algorithm/resource/vector_db/example_db/metadata.pkl
new file mode 100644
index 0000000000000000000000000000000000000000..041fc668451b772d1685c826e87907610eb0962e
GIT binary patch
literal 297
zcmaKmu};G<6h#y05b_BO%q*$X6iU(&F(6fJg*9^Rr^Hem2m86ALnS`I<KusE`T@Pm
zmF~NG_xvvY9@6BZGd+e(19Hic)0uY3oa9RL4%&%hPvM<?I<Ss?t5JFOW`x%;qGJcI
z1__qA>8IdBXRN|rGYigmD}WtAps}qyFyRrF?$}YEUgiWxi1ibN#e9l}rzzU)-0>mf
zQi5zbQn;_m>bWTEqT1|NPusHIu9{`tG}XE!?;@sbh4CYTrCl2Cq>5xtnUOw{n~-ZG
eVQ5FL<L~TC?Tgo9T~Ww|g-CFHVbi>jU;YDt_GWAV

literal 0
HcmV?d00001

diff --git a/spx-algorithm/resource/vector_db/requirements_vector_db.txt b/spx-algorithm/resource/vector_db/requirements_vector_db.txt
new file mode 100644
index 000000000..85d203e37
--- /dev/null
+++ b/spx-algorithm/resource/vector_db/requirements_vector_db.txt
@@ -0,0 +1,8 @@
+# 向量数据库依赖库
+torch>=1.9.0
+open-clip-torch
+Pillow>=8.0.0
+numpy>=1.20.0
+faiss-cpu>=1.7.0  # 或者使用 faiss-gpu 如果有GPU支持
+requests>=2.25.0
+cairosvg>=2.5.0  # SVG图片支持
\ No newline at end of file
diff --git a/spx-algorithm/resource/vector_db/simple_usage_example.py b/spx-algorithm/resource/vector_db/simple_usage_example.py
new file mode 100644
index 000000000..82a6e14d0
--- /dev/null
+++ b/spx-algorithm/resource/vector_db/simple_usage_example.py
@@ -0,0 +1,90 @@
+#!/usr/bin/env python3
+"""
+简单的向量数据库使用示例
+展示如何在其他项目中集成和使用向量数据库
+"""
+import os
+from vector_database import VectorDatabase
+from vector_db_utils import VectorDBManager
+
+def example_basic_usage():
+    """基本使用示例"""
+    print("=== 基本使用示例 ===")
+    
+    # 1. 创建向量数据库实例
+    db = VectorDatabase(db_path='example_db')
+    
+    # 2. 添加单张图片
+    current_dir = os.path.dirname(os.path.abspath(__file__))
+    image_path = os.path.join(current_dir, 'cute.svg')
+    
+    if os.path.exists(image_path):
+        image_id = db.add_image(image_path, metadata={'category': 'cute', 'type': 'svg'})
+        print(f"添加图片成功，ID: {image_id}")
+    
+    # 3. 文本搜索
+    results = db.search_by_text('cute animal', k=3)
+    print(f"搜索 'cute animal' 的结果：")
+    for result in results:
+        print(f"  - {os.path.basename(result['image_path'])}: {result['similarity']:.3f}")
+    
+    print()
+
+def example_batch_processing():
+    """批量处理示例"""
+    print("=== 批量处理示例 ===")
+    
+    # 使用管理器进行批量操作
+    manager = VectorDBManager(db_path='batch_example_db')
+    
+    # 索引当前目录
+    current_dir = os.path.dirname(os.path.abspath(__file__))
+    stats = manager.index_directory(current_dir)
+    print(f"索引统计: 总计 {stats['total']} 个文件，成功 {stats['indexed']} 个")
+    
+    # 搜索示例
+    results = manager.search_by_description('dog', k=2)
+    print(f"搜索 'dog' 的结果：")
+    for result in results:
+        print(f"  - {result['metadata']['filename']}: {result['similarity']:.3f}")
+    
+    print()
+
+def example_integration_with_existing_service():
+    """与现有服务集成的示例"""
+    print("=== 与现有服务集成示例 ===")
+    
+    # 模拟与现有ImageSearchService的集成
+    print("1. 可以复用相同的模型配置")
+    print("   - 模型: ViT-B-32")
+    print("   - 预训练权重: laion2b_s34b_b79k")
+    print("   - 支持相同的图片格式（包括SVG）")
+    
+    print("\n2. 向量数据库的优势:")
+    print("   - 预计算图片向量，搜索更快")
+    print("   - 支持大规模图片集合")
+    print("   - 持久化存储，无需重复计算")
+    
+    print("\n3. 使用场景:")
+    print("   - 图片库管理系统")
+    print("   - 相似图片推荐")
+    print("   - 重复图片检测")
+    print("   - 基于内容的图片搜索")
+    
+    print()
+
+def main():
+    """主函数"""
+    try:
+        example_basic_usage()
+        example_batch_processing()
+        example_integration_with_existing_service()
+        
+        print("=== 所有示例运行完成 ===")
+        
+    except Exception as e:
+        print(f"运行出错: {e}")
+        print("请确保已安装所需依赖: pip install -r requirements_vector_db.txt")
+
+if __name__ == "__main__":
+    main()
\ No newline at end of file
diff --git a/spx-algorithm/resource/vector_db/vector_database.py b/spx-algorithm/resource/vector_db/vector_database.py
new file mode 100644
index 000000000..46b9ac8ae
--- /dev/null
+++ b/spx-algorithm/resource/vector_db/vector_database.py
@@ -0,0 +1,417 @@
+import os
+import pickle
+import logging
+import io
+from typing import List, Dict, Any, Optional
+import numpy as np
+import torch
+import open_clip
+from PIL import Image
+try:
+    import faiss
+except ImportError:
+    faiss = None
+try:
+    import cairosvg
+except ImportError:
+    cairosvg = None
+from datetime import datetime
+
+logger = logging.getLogger(__name__)
+
+
+class VectorDatabase:
+    """基于open-clip的图像向量数据库"""
+    
+    def __init__(self, 
+                 model_name: str = 'ViT-B-32', 
+                 pretrained: str = 'laion2b_s34b_b79k',
+                 db_path: str = 'vector_db',
+                 dimension: int = 512):
+        """
+        初始化向量数据库
+        
+        Args:
+            model_name: CLIP模型名称
+            pretrained: 预训练权重
+            db_path: 数据库存储路径
+            dimension: 向量维度
+        """
+        self.model_name = model_name
+        self.pretrained = pretrained
+        self.db_path = db_path
+        self.dimension = dimension
+        self.device = "cuda" if torch.cuda.is_available() else "cpu"
+        
+        # 模型相关
+        self.model = None
+        self.preprocess = None
+        self.tokenizer = None
+        
+        # 数据库相关
+        self.index = None
+        self.metadata = {}
+        self.id_counter = 0
+        
+        self._init_model()
+        self._init_database()
+    
+    def _init_model(self):
+        """初始化CLIP模型"""
+        try:
+            self.model, _, self.preprocess = open_clip.create_model_and_transforms(
+                self.model_name, pretrained=self.pretrained
+            )
+            self.tokenizer = open_clip.get_tokenizer(self.model_name)
+            self.model = self.model.to(self.device)
+            self.model.eval()
+            logger.info(f"模型加载成功: {self.model_name} on {self.device}")
+        except Exception as e:
+            logger.error(f"模型加载失败: {e}")
+            raise
+    
+    def _init_database(self):
+        """初始化向量数据库"""
+        if faiss is None:
+            raise ImportError("faiss库未安装，请运行: pip install faiss-cpu 或 pip install faiss-gpu")
+        
+        os.makedirs(self.db_path, exist_ok=True)
+        
+        # 初始化Faiss索引
+        self.index = faiss.IndexFlatIP(self.dimension)  # 内积相似度
+        
+        # 加载已有数据
+        self._load_database()
+    
+    def _save_database(self):
+        """保存数据库到文件"""
+        try:
+            # 保存索引
+            index_path = os.path.join(self.db_path, 'index.faiss')
+            faiss.write_index(self.index, index_path)
+            
+            # 保存元数据
+            metadata_path = os.path.join(self.db_path, 'metadata.pkl')
+            with open(metadata_path, 'wb') as f:
+                pickle.dump({
+                    'metadata': self.metadata,
+                    'id_counter': self.id_counter,
+                    'dimension': self.dimension,
+                    'model_name': self.model_name,
+                    'created_at': datetime.now().isoformat()
+                }, f)
+            
+            logger.info(f"数据库已保存到: {self.db_path}")
+        except Exception as e:
+            logger.error(f"保存数据库失败: {e}")
+            raise
+    
+    def _load_database(self):
+        """从文件加载数据库"""
+        try:
+            index_path = os.path.join(self.db_path, 'index.faiss')
+            metadata_path = os.path.join(self.db_path, 'metadata.pkl')
+            
+            if os.path.exists(index_path) and os.path.exists(metadata_path):
+                # 加载索引
+                self.index = faiss.read_index(index_path)
+                
+                # 加载元数据
+                with open(metadata_path, 'rb') as f:
+                    data = pickle.load(f)
+                    self.metadata = data['metadata']
+                    self.id_counter = data['id_counter']
+                
+                logger.info(f"数据库加载成功，包含 {len(self.metadata)} 个向量")
+            else:
+                logger.info("未找到已有数据库，创建新的数据库")
+        except Exception as e:
+            logger.error(f"加载数据库失败: {e}")
+            # 重新初始化
+            self.index = faiss.IndexFlatIP(self.dimension)
+            self.metadata = {}
+            self.id_counter = 0
+    
+    def _encode_image(self, image_path: str) -> Optional[np.ndarray]:
+        """
+        编码单张图片为向量，支持SVG格式
+        
+        Args:
+            image_path: 图片路径
+            
+        Returns:
+            图片特征向量，失败返回None
+        """
+        try:
+            if not os.path.exists(image_path):
+                logger.warning(f"图片文件不存在: {image_path}")
+                return None
+            
+            logger.info(f"处理本地图片: {image_path}")
+            
+            # 根据文件扩展名选择处理方式
+            _, ext = os.path.splitext(image_path.lower())
+            
+            if ext == '.svg':
+                # 处理SVG文件
+                if cairosvg is None:
+                    logger.error("SVG支持需要安装cairosvg库: pip install cairosvg")
+                    return None
+                
+                png_data = cairosvg.svg2png(
+                    url=image_path, 
+                    output_width=224, 
+                    output_height=224,
+                    background_color='white'
+                )
+                image = Image.open(io.BytesIO(png_data)).convert('RGB')
+            else:
+                # 处理其他格式图片
+                image = Image.open(image_path).convert('RGB')
+            
+            logger.info(f"图片尺寸: {image.size}, 模式: {image.mode}")
+            
+            # 预处理图片
+            image_tensor = self.preprocess(image).unsqueeze(0).to(self.device)
+            
+            with torch.no_grad():
+                # 编码图片
+                image_features = self.model.encode_image(image_tensor)
+                # 归一化
+                image_features /= image_features.norm(dim=-1, keepdim=True)
+                
+                return image_features.cpu().numpy().astype('float32')
+                
+        except Exception as e:
+            logger.error(f"编码图片失败 {image_path}: {e}")
+            return None
+    
+    def _encode_text(self, text: str) -> Optional[np.ndarray]:
+        """
+        编码文本为向量
+        
+        Args:
+            text: 文本内容
+            
+        Returns:
+            文本特征向量，失败返回None
+        """
+        try:
+            text_tokens = self.tokenizer([text]).to(self.device)
+            
+            with torch.no_grad():
+                text_features = self.model.encode_text(text_tokens)
+                text_features /= text_features.norm(dim=-1, keepdim=True)
+                
+                return text_features.cpu().numpy().astype('float32')
+                
+        except Exception as e:
+            logger.error(f"编码文本失败 {text}: {e}")
+            return None
+    
+    def add_image(self, image_path: str, metadata: Optional[Dict[str, Any]] = None) -> Optional[int]:
+        """
+        添加图片到向量数据库
+        
+        Args:
+            image_path: 图片路径
+            metadata: 图片元数据
+            
+        Returns:
+            图片ID，失败返回None
+        """
+        vector = self._encode_image(image_path)
+        if vector is None:
+            return None
+        
+        # 添加到索引
+        self.index.add(vector)
+        
+        # 保存元数据
+        image_id = self.id_counter
+        self.metadata[image_id] = {
+            'image_path': image_path,
+            'metadata': metadata or {},
+            'added_at': datetime.now().isoformat()
+        }
+        self.id_counter += 1
+        
+        # 保存数据库
+        self._save_database()
+        
+        logger.info(f"图片已添加到数据库: {image_path} (ID: {image_id})")
+        return image_id
+    
+    def add_images_batch(self, image_paths: List[str], 
+                        metadatas: Optional[List[Dict[str, Any]]] = None) -> List[Optional[int]]:
+        """
+        批量添加图片到向量数据库
+        
+        Args:
+            image_paths: 图片路径列表
+            metadatas: 图片元数据列表
+            
+        Returns:
+            图片ID列表
+        """
+        if metadatas is None:
+            metadatas = [None] * len(image_paths)
+        
+        results = []
+        vectors = []
+        valid_indices = []
+        
+        # 批量编码
+        for i, (image_path, metadata) in enumerate(zip(image_paths, metadatas)):
+            vector = self._encode_image(image_path)
+            if vector is not None:
+                vectors.append(vector)
+                valid_indices.append(i)
+                
+                # 准备元数据
+                image_id = self.id_counter + len(vectors) - 1
+                self.metadata[image_id] = {
+                    'image_path': image_path,
+                    'metadata': metadata or {},
+                    'added_at': datetime.now().isoformat()
+                }
+                results.append(image_id)
+            else:
+                results.append(None)
+        
+        if vectors:
+            # 批量添加到索引
+            vectors_array = np.vstack(vectors)
+            self.index.add(vectors_array)
+            self.id_counter += len(vectors)
+            
+            # 保存数据库
+            self._save_database()
+            
+            logger.info(f"批量添加 {len(vectors)} 张图片到数据库")
+        
+        return results
+    
+    def search_by_image(self, query_image_path: str, k: int = 10) -> List[Dict[str, Any]]:
+        """
+        通过图片搜索相似图片
+        
+        Args:
+            query_image_path: 查询图片路径
+            k: 返回结果数量
+            
+        Returns:
+            相似图片列表
+        """
+        query_vector = self._encode_image(query_image_path)
+        if query_vector is None:
+            return []
+        
+        return self._search_by_vector(query_vector, k)
+    
+    def search_by_text(self, query_text: str, k: int = 10) -> List[Dict[str, Any]]:
+        """
+        通过文本搜索相似图片
+        
+        Args:
+            query_text: 查询文本
+            k: 返回结果数量
+            
+        Returns:
+            相似图片列表
+        """
+        query_vector = self._encode_text(query_text)
+        if query_vector is None:
+            return []
+        
+        return self._search_by_vector(query_vector, k)
+    
+    def _search_by_vector(self, query_vector: np.ndarray, k: int) -> List[Dict[str, Any]]:
+        """
+        通过向量搜索
+        
+        Args:
+            query_vector: 查询向量
+            k: 返回结果数量
+            
+        Returns:
+            搜索结果列表
+        """
+        if self.index.ntotal == 0:
+            logger.warning("数据库为空")
+            return []
+        
+        k = min(k, self.index.ntotal)
+        similarities, indices = self.index.search(query_vector, k)
+        
+        results = []
+        for i, (similarity, idx) in enumerate(zip(similarities[0], indices[0])):
+            if idx in self.metadata:
+                result = {
+                    'id': int(idx),
+                    'similarity': float(similarity),
+                    'rank': i + 1,
+                    **self.metadata[idx]
+                }
+                results.append(result)
+        
+        return results
+    
+    def get_stats(self) -> Dict[str, Any]:
+        """获取数据库统计信息"""
+        return {
+            'total_images': self.index.ntotal,
+            'dimension': self.dimension,
+            'model_name': self.model_name,
+            'pretrained': self.pretrained,
+            'db_path': self.db_path,
+            'device': self.device
+        }
+    
+    def remove_image(self, image_id: int) -> bool:
+        """
+        删除图片（注意：Faiss不支持直接删除，需要重建索引）
+        
+        Args:
+            image_id: 图片ID
+            
+        Returns:
+            是否成功删除
+        """
+        if image_id not in self.metadata:
+            logger.warning(f"图片ID不存在: {image_id}")
+            return False
+        
+        # 删除元数据
+        del self.metadata[image_id]
+        
+        # 重建索引（仅包含剩余的图片）
+        self._rebuild_index()
+        
+        logger.info(f"图片已删除: {image_id}")
+        return True
+    
+    def _rebuild_index(self):
+        """重建索引（用于删除操作后）"""
+        if not self.metadata:
+            self.index = faiss.IndexFlatIP(self.dimension)
+            self._save_database()
+            return
+        
+        # 重新编码所有剩余的图片
+        vectors = []
+        for image_id, data in self.metadata.items():
+            vector = self._encode_image(data['image_path'])
+            if vector is not None:
+                vectors.append(vector)
+            else:
+                # 如果重新编码失败，从元数据中删除
+                del self.metadata[image_id]
+        
+        # 重建索引
+        self.index = faiss.IndexFlatIP(self.dimension)
+        if vectors:
+            vectors_array = np.vstack(vectors)
+            self.index.add(vectors_array)
+        
+        self._save_database()
\ No newline at end of file
diff --git a/spx-algorithm/resource/vector_db/vector_db_utils.py b/spx-algorithm/resource/vector_db/vector_db_utils.py
new file mode 100644
index 000000000..4906c8cd4
--- /dev/null
+++ b/spx-algorithm/resource/vector_db/vector_db_utils.py
@@ -0,0 +1,213 @@
+import os
+import logging
+from typing import List, Dict, Any, Optional
+from vector_database import VectorDatabase
+
+logger = logging.getLogger(__name__)
+
+
+class VectorDBManager:
+    """向量数据库管理工具类"""
+    
+    def __init__(self, db_path: str = 'vector_db'):
+        """
+        初始化管理器
+        
+        Args:
+            db_path: 数据库路径
+        """
+        self.db_path = db_path
+        self.db = VectorDatabase(db_path=db_path)
+    
+    def index_directory(self, directory_path: str, 
+                       supported_extensions: List[str] = None) -> Dict[str, Any]:
+        """
+        索引目录下的所有图片
+        
+        Args:
+            directory_path: 目录路径
+            supported_extensions: 支持的文件扩展名
+            
+        Returns:
+            索引结果统计
+        """
+        if supported_extensions is None:
+            supported_extensions = ['.jpg', '.jpeg', '.png', '.bmp', '.tiff', '.svg']
+        
+        if not os.path.exists(directory_path):
+            logger.error(f"目录不存在: {directory_path}")
+            return {'success': False, 'error': '目录不存在'}
+        
+        # 收集所有图片文件
+        image_files = []
+        for root, dirs, files in os.walk(directory_path):
+            for file in files:
+                _, ext = os.path.splitext(file.lower())
+                if ext in supported_extensions:
+                    image_path = os.path.join(root, file)
+                    image_files.append(image_path)
+        
+        if not image_files:
+            logger.warning(f"目录中未找到支持的图片文件: {directory_path}")
+            return {'success': True, 'indexed': 0, 'failed': 0, 'total': 0}
+        
+        logger.info(f"找到 {len(image_files)} 个图片文件，开始索引...")
+        
+        # 准备元数据
+        metadatas = []
+        for image_path in image_files:
+            metadata = {
+                'filename': os.path.basename(image_path),
+                'directory': os.path.dirname(image_path),
+                'file_size': os.path.getsize(image_path),
+                'relative_path': os.path.relpath(image_path, directory_path)
+            }
+            metadatas.append(metadata)
+        
+        # 批量添加到数据库
+        results = self.db.add_images_batch(image_files, metadatas)
+        
+        # 统计结果
+        indexed = sum(1 for r in results if r is not None)
+        failed = len(results) - indexed
+        
+        stats = {
+            'success': True,
+            'total': len(image_files),
+            'indexed': indexed,
+            'failed': failed,
+            'directory': directory_path
+        }
+        
+        logger.info(f"索引完成: {stats}")
+        return stats
+    
+    def search_similar_images(self, query_path: str, k: int = 10) -> List[Dict[str, Any]]:
+        """
+        搜索相似图片
+        
+        Args:
+            query_path: 查询图片路径
+            k: 返回结果数量
+            
+        Returns:
+            相似图片列表
+        """
+        return self.db.search_by_image(query_path, k)
+    
+    def search_by_description(self, description: str, k: int = 10) -> List[Dict[str, Any]]:
+        """
+        通过文本描述搜索图片
+        
+        Args:
+            description: 文本描述
+            k: 返回结果数量
+            
+        Returns:
+            匹配的图片列表
+        """
+        return self.db.search_by_text(description, k)
+    
+    def get_database_info(self) -> Dict[str, Any]:
+        """获取数据库信息"""
+        return self.db.get_stats()
+    
+    def export_metadata(self, output_file: str = None) -> Dict[str, Any]:
+        """
+        导出数据库元数据
+        
+        Args:
+            output_file: 输出文件路径（可选）
+            
+        Returns:
+            元数据字典
+        """
+        metadata_export = {
+            'database_stats': self.db.get_stats(),
+            'images': {}
+        }
+        
+        for image_id, data in self.db.metadata.items():
+            metadata_export['images'][image_id] = data
+        
+        if output_file:
+            import json
+            with open(output_file, 'w', encoding='utf-8') as f:
+                json.dump(metadata_export, f, indent=2, ensure_ascii=False)
+            logger.info(f"元数据已导出到: {output_file}")
+        
+        return metadata_export
+    
+    def find_duplicates(self, similarity_threshold: float = 0.95) -> List[List[Dict[str, Any]]]:
+        """
+        查找重复或相似的图片
+        
+        Args:
+            similarity_threshold: 相似度阈值
+            
+        Returns:
+            重复图片组列表
+        """
+        duplicates = []
+        processed_ids = set()
+        
+        for image_id, data in self.db.metadata.items():
+            if image_id in processed_ids:
+                continue
+            
+            # 搜索相似图片
+            similar_images = self.db.search_by_image(data['image_path'], k=10)
+            
+            # 过滤高相似度图片
+            duplicate_group = []
+            for similar in similar_images:
+                if similar['similarity'] >= similarity_threshold and similar['id'] not in processed_ids:
+                    duplicate_group.append(similar)
+                    processed_ids.add(similar['id'])
+            
+            if len(duplicate_group) > 1:
+                duplicates.append(duplicate_group)
+        
+        logger.info(f"找到 {len(duplicates)} 组重复图片")
+        return duplicates
+
+
+def create_sample_database(resource_dir: str = 'resource') -> VectorDBManager:
+    """
+    创建示例数据库
+    
+    Args:
+        resource_dir: 资源目录路径
+        
+    Returns:
+        数据库管理器实例
+    """
+    db_manager = VectorDBManager(db_path=os.path.join(resource_dir, 'sample_vector_db'))
+    
+    # 如果资源目录存在图片，则索引它们
+    if os.path.exists(resource_dir):
+        logger.info(f"索引资源目录: {resource_dir}")
+        stats = db_manager.index_directory(resource_dir)
+        logger.info(f"索引统计: {stats}")
+    
+    return db_manager
+
+
+if __name__ == "__main__":
+    # 设置日志
+    logging.basicConfig(level=logging.INFO)
+    
+    # 创建示例数据库
+    manager = create_sample_database()
+    
+    # 显示数据库信息
+    info = manager.get_database_info()
+    print(f"数据库信息: {info}")
+    
+    # 示例搜索
+    if info['total_images'] > 0:
+        # 文本搜索示例
+        results = manager.search_by_description("cute animal", k=3)
+        print(f"文本搜索结果: {len(results)} 张图片")
+        for result in results:
+            print(f"  {result['metadata']['filename']}: {result['similarity']:.3f}")
\ No newline at end of file