@ww_nero/skills 2.2.14 → 2.4.0

package/assets/svg_to_pptx.py

@@ -597,17 +597,30 @@ def create_slide(prs):
     """深度学习的崛起（1990-2017）"""
     slide = prs.slides.add_slide(prs.slide_layouts[6])
 
-    # 背景渐变 (#1a237e -> #0d1b60)
+    # SVG: <linearGradient id="bgGrad"><stop offset="0%" stop-color="#1a237e"/><stop offset="100%" stop-color="#0d1b60"/></linearGradient>
+    # SVG: <rect width="100%" height="100%" fill="url(#bgGrad)"/>
     set_slide_background_gradient(slide, "1a237e", "0d1b60")
 
-    # 图片占位符位置插入图片 (左侧时间线区域右侧)
+    # SVG: <rect id="image-placeholder" x="420" y="340" width="180" height="120" .../>
     image_path = os.path.join(os.path.dirname(__file__), "demo.jpg")
     add_image(slide, image_path, 420, 340, 180, 120)
 
-    # 圆形图片占位符 (右上角头像)
+    # SVG: <circle id="image-placeholder-circle" cx="1150" cy="120" r="50" .../>
     add_circular_image(slide, image_path, 1150, 120, 50)
 
-    # 右侧装饰性神经网络背景
+    # SVG: <g opacity="0.1" stroke="#ffffff" stroke-width="1">
+    #        <line x1="800" y1="200" x2="900" y2="300"/>
+    #        <line x1="900" y1="300" x2="850" y2="450"/>
+    #        <line x1="850" y1="450" x2="750" y2="400"/>
+    #        <line x1="750" y1="400" x2="800" y2="200"/>
+    #        <line x1="800" y1="200" x2="650" y2="250"/>
+    #        <line x1="650" y1="250" x2="750" y2="400"/>
+    #        <circle cx="800" cy="200" r="4" fill="#fff"/>
+    #        <circle cx="900" cy="300" r="4" fill="#fff"/>
+    #        <circle cx="850" cy="450" r="4" fill="#fff"/>
+    #        <circle cx="750" cy="400" r="4" fill="#fff"/>
+    #        <circle cx="650" cy="250" r="4" fill="#fff"/>
+    #      </g>
     add_line(slide, 800, 200, 900, 300, "#ffffff", 1, 0.1)
     add_line(slide, 900, 300, 850, 450, "#ffffff", 1, 0.1)
     add_line(slide, 850, 450, 750, 400, "#ffffff", 1, 0.1)
@@ -620,45 +633,63 @@ def create_slide(prs):
     add_circle(slide, 750, 400, 4, "#ffffff", opacity=0.1)
     add_circle(slide, 650, 250, 4, "#ffffff", opacity=0.1)
 
-    # 标题部分
+    # SVG: <g transform="translate(60, 80)">
+    #        <text font-size="48" font-weight="bold" fill="#ffffff">深度学习的崛起（1990-2017）</text>
+    #        <rect x="0" y="20" width="100" height="4" fill="url(#accentGrad)" rx="2"/>
+    #        <line x1="0" y1="22" x2="1160" y2="22" stroke="#ffffff" stroke-width="1" opacity="0.2"/>
+    #      </g>
     add_text_box(slide, "深度学习的崛起（1990-2017）", 60, 80, 800, 60, 48, "#ffffff", bold=True, anchor='start', valign='top')
     add_gradient_rectangle(slide, 60, 100, 100, 4, "#00e5ff", 1.0, "#2979ff", 1.0, 0, rx=2)
     add_line(slide, 60, 102, 1220, 102, "#ffffff", 1, 0.2)
 
-    # 中间分隔虚线
+    # SVG: <line x1="640" y1="180" x2="640" y2="630" stroke="#00e5ff" stroke-width="1" stroke-dasharray="4 4" opacity="0.3"/>
     add_line(slide, 640, 180, 640, 630, "#00e5ff", 1, 0.3, dash=True)
 
-    # 左侧：技术突破
+    # SVG: <text font-size="28" fill="#00e5ff" font-weight="bold">技术突破</text>
     add_text_box(slide, "技术突破", 60, 180, 200, 40, 28, "#00e5ff", bold=True, anchor='start', valign='top')
 
-    # 时间线主线
+    # SVG: <line x1="20" y1="50" x2="20" y2="480" stroke="#b3e5fc" stroke-width="2" opacity="0.3"/>
     add_line(slide, 80, 230, 80, 660, "#b3e5fc", 2, 0.3)
 
-    # 1998
+    # SVG: <circle cx="20" cy="0" r="6" fill="#1a237e" stroke="#00e5ff" stroke-width="2"/>
+    #      <text font-size="24" fill="#ffffff" font-weight="bold">1998</text>
+    #      <text font-size="20" fill="#b3e5fc">LeNet-5，CNN开创性工作</text>
     add_circle(slide, 80, 250, 6, "#1a237e", stroke_color="#00e5ff", stroke_width=2)
     add_text_box(slide, "1998", 105, 240, 100, 30, 24, "#ffffff", bold=True, anchor='start', valign='top')
     add_text_box(slide, "LeNet-5，CNN开创性工作", 105, 270, 350, 30, 20, "#b3e5fc", anchor='start', valign='top')
 
-    # 2012
+    # SVG: <circle cx="20" cy="0" r="6" fill="#1a237e" stroke="#00e5ff" stroke-width="2"/>
+    #      <text font-size="24" fill="#ffffff" font-weight="bold">2012</text>
+    #      <text font-size="20" fill="#b3e5fc">AlexNet赢得ImageNet竞赛</text>
     add_circle(slide, 80, 350, 6, "#1a237e", stroke_color="#00e5ff", stroke_width=2)
     add_text_box(slide, "2012", 105, 340, 100, 30, 24, "#ffffff", bold=True, anchor='start', valign='top')
     add_text_box(slide, "AlexNet赢得ImageNet竞赛", 105, 370, 350, 30, 20, "#b3e5fc", anchor='start', valign='top')
 
-    # 2014
+    # SVG: <circle cx="20" cy="0" r="6" fill="#1a237e" stroke="#00e5ff" stroke-width="2"/>
+    #      <text font-size="24" fill="#ffffff" font-weight="bold">2014</text>
+    #      <text font-size="20" fill="#b3e5fc">GAN生成对抗网络</text>
     add_circle(slide, 80, 450, 6, "#1a237e", stroke_color="#00e5ff", stroke_width=2)
     add_text_box(slide, "2014", 105, 440, 100, 30, 24, "#ffffff", bold=True, anchor='start', valign='top')
     add_text_box(slide, "GAN生成对抗网络", 105, 470, 350, 30, 20, "#b3e5fc", anchor='start', valign='top')
 
-    # 2015
+    # SVG: <circle cx="20" cy="0" r="6" fill="#1a237e" stroke="#00e5ff" stroke-width="2"/>
+    #      <text font-size="24" fill="#ffffff" font-weight="bold">2015</text>
+    #      <text font-size="20" fill="#b3e5fc">ResNet残差网络</text>
     add_circle(slide, 80, 550, 6, "#1a237e", stroke_color="#00e5ff", stroke_width=2)
     add_text_box(slide, "2015", 105, 540, 100, 30, 24, "#ffffff", bold=True, anchor='start', valign='top')
     add_text_box(slide, "ResNet残差网络", 105, 570, 350, 30, 20, "#b3e5fc", anchor='start', valign='top')
 
-    # 右侧：关键人物
+    # SVG: <text font-size="28" fill="#00e5ff" font-weight="bold">关键人物</text>
+    #      <text font-size="16" fill="#b3e5fc" opacity="0.7">Turing Award Winners ("Godfathers of AI")</text>
     add_text_box(slide, "关键人物", 688, 180, 200, 40, 28, "#00e5ff", bold=True, anchor='start', valign='top')
     add_text_box(slide, "Turing Award Winners (\"Godfathers of AI\")", 688, 215, 400, 25, 16, "#b3e5fc", anchor='start', valign='top')
 
-    # 人物卡片1: Hinton (切角矩形: 左上和右下切角10px)
+    # SVG: <use href="#cardShape" fill="rgba(255,255,255,0.05)" stroke="rgba(0,229,255,0.3)" stroke-width="1"/>
+    #      <path d="M0 20 L0 10 L10 0 L20 0" fill="none" stroke="#00e5ff" stroke-width="2"/>
+    #      <text font-size="24" fill="#ffffff" font-weight="bold">Geoffrey Hinton</text>
+    #      <text font-size="16" fill="#b3e5fc">Backpropagation, Deep Belief Nets</text>
+    #      <circle cx="340" cy="50" r="20" stroke="#00e5ff" stroke-width="1" fill="none" opacity="0.5"/>
+    #      <circle cx="340" cy="50" r="8" fill="#00e5ff" opacity="0.8"/>
     add_freeform_path(slide, [(688, 260), (698, 250), (1068, 250), (1068, 340), (1058, 350), (688, 350)],
                       fill_color="#ffffff", stroke_color="#00e5ff", stroke_width=1, opacity=0.05, closed=True)
     add_freeform_path(slide, [(688, 270), (688, 260), (698, 250), (708, 250)], stroke_color="#00e5ff", stroke_width=2)
@@ -667,7 +698,12 @@ def create_slide(prs):
     add_circle(slide, 1028, 300, 20, stroke_color="#00e5ff", stroke_width=1, opacity=0.5)
     add_circle(slide, 1028, 300, 8, "#00e5ff", opacity=0.8)
 
-    # 人物卡片2: LeCun
+    # SVG: <use href="#cardShape" fill="rgba(255,255,255,0.05)" stroke="rgba(0,229,255,0.3)" stroke-width="1"/>
+    #      <path d="M0 20 L0 10 L10 0 L20 0" fill="none" stroke="#00e5ff" stroke-width="2"/>
+    #      <text font-size="24" fill="#ffffff" font-weight="bold">Yann LeCun</text>
+    #      <text font-size="16" fill="#b3e5fc">CNN (Convolutional Neural Networks)</text>
+    #      <circle cx="340" cy="50" r="20" stroke="#00e5ff" stroke-width="1" fill="none" opacity="0.5"/>
+    #      <rect x="332" y="42" width="16" height="16" fill="#00e5ff" opacity="0.8"/>
     add_freeform_path(slide, [(688, 380), (698, 370), (1068, 370), (1068, 460), (1058, 470), (688, 470)],
                       fill_color="#ffffff", stroke_color="#00e5ff", stroke_width=1, opacity=0.05, closed=True)
     add_freeform_path(slide, [(688, 390), (688, 380), (698, 370), (708, 370)], stroke_color="#00e5ff", stroke_width=2)
@@ -676,7 +712,12 @@ def create_slide(prs):
     add_circle(slide, 1028, 420, 20, stroke_color="#00e5ff", stroke_width=1, opacity=0.5)
     add_rectangle(slide, 1020, 412, 16, 16, "#00e5ff", opacity=0.8)
 
-    # 人物卡片3: Bengio
+    # SVG: <use href="#cardShape" fill="rgba(255,255,255,0.05)" stroke="rgba(0,229,255,0.3)" stroke-width="1"/>
+    #      <path d="M0 20 L0 10 L10 0 L20 0" fill="none" stroke="#00e5ff" stroke-width="2"/>
+    #      <text font-size="24" fill="#ffffff" font-weight="bold">Yoshua Bengio</text>
+    #      <text font-size="16" fill="#b3e5fc">Sequence Modeling, GANs</text>
+    #      <circle cx="340" cy="50" r="20" stroke="#00e5ff" stroke-width="1" fill="none" opacity="0.5"/>
+    #      <polygon points="340,38 352,58 328,58" fill="#00e5ff" opacity="0.8"/>
     add_freeform_path(slide, [(688, 500), (698, 490), (1068, 490), (1068, 580), (1058, 590), (688, 590)],
                       fill_color="#ffffff", stroke_color="#00e5ff", stroke_width=1, opacity=0.05, closed=True)
     add_freeform_path(slide, [(688, 510), (688, 500), (698, 490), (708, 490)], stroke_color="#00e5ff", stroke_width=2)
@@ -685,14 +726,19 @@ def create_slide(prs):
     add_circle(slide, 1028, 540, 20, stroke_color="#00e5ff", stroke_width=1, opacity=0.5)
     add_triangle(slide, 1028, 548, 20, "#00e5ff", opacity=0.8, rotation=180)
 
-    # 底部装饰
+    # SVG: <rect x="0" y="0" width="1280" height="48" fill="#0d1b60" opacity="0.8"/>
+    #      <text font-size="12" fill="#b3e5fc" opacity="0.5">NEURAL NETWORKS RENAISSANCE | AI HISTORY SERIES</text>
+    #      <circle cx="1206" cy="24" r="2"/><circle cx="1216" cy="24" r="2"/><circle cx="1226" cy="24" r="2"/>
     add_rectangle(slide, 0, 672, 1280, 48, "#0d1b60", opacity=0.8)
     add_text_box(slide, "NEURAL NETWORKS RENAISSANCE | AI HISTORY SERIES", 60, 702, 500, 20, 12, "#b3e5fc", anchor='start', valign='top')
     add_circle(slide, 1206, 696, 2, "#00e5ff", opacity=0.5)
     add_circle(slide, 1216, 696, 2, "#00e5ff", opacity=0.5)
     add_circle(slide, 1226, 696, 2, "#00e5ff", opacity=0.5)
 
-    # Icon 元素示例：复杂的 SVG 图标先转为小 PNG 再插入
+    # SVG: <g id="icon-placeholder" transform="translate(1100, 650)">
+    #        <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"
+    #              stroke="#00e5ff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+    #      </g>
     icon_svg = '''<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"
         stroke="#00e5ff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>'''
     add_icon(slide, icon_svg, 1100, 650, 24, 24)

package/index.js

@@ -8,6 +8,59 @@ const { CallToolRequestSchema, ListToolsRequestSchema } = require('@modelcontext
 
 const ASSETS_ROOT = path.join(__dirname, 'assets');
 
+const convertPath = (filePath) => {
+  const wslMatch = filePath.match(/^\/mnt\/([a-zA-Z])\/(.*)$/);
+  if (wslMatch) {
+    const drive = wslMatch[1].toUpperCase();
+    const rest = wslMatch[2].replace(/\//g, '\\');
+    return `${drive}:\\${rest}`;
+  }
+
+  const winMatch = filePath.match(/^([a-zA-Z]):\\(.*)$/);
+  if (winMatch) {
+    const drive = winMatch[1].toLowerCase();
+    const rest = winMatch[2].replace(/\\/g, '/');
+    return `/mnt/${drive}/${rest}`;
+  }
+
+  return null;
+};
+
+const resolveExistingPath = (inputPath) => {
+  if (fs.existsSync(inputPath)) {
+    return inputPath;
+  }
+
+  const converted = convertPath(inputPath);
+  if (converted && fs.existsSync(converted)) {
+    return converted;
+  }
+
+  return null;
+};
+
+const resolveWorkingDirectory = (rawPath) => {
+  if (!rawPath || typeof rawPath !== 'string') {
+    throw new Error('必须提供 working_directory');
+  }
+
+  if (!path.isAbsolute(rawPath)) {
+    throw new Error('working_directory 必须是绝对路径');
+  }
+
+  const resolved = resolveExistingPath(rawPath);
+  if (!resolved) {
+    throw new Error('工作目录不存在，请确认路径是否正确');
+  }
+
+  const stats = fs.statSync(resolved);
+  if (!stats.isDirectory()) {
+    throw new Error('working_directory 必须是文件夹路径');
+  }
+
+  return resolved;
+};
+
 const resolveAsset = (relativePath) => {
   const target = path.resolve(ASSETS_ROOT, relativePath);
   const rel = path.relative(ASSETS_ROOT, target);
@@ -57,9 +110,6 @@ const SNIPPETS = {
     title: 'SVG 转 PPTX',
     description: '把 SVG 转化成在 PPTX 中创建可操作的元素。',
     codeFile: 'svg_to_pptx.py',
-    extraFiles: [
-      { label: '示例 HTML（ppt_slide.html）', file: 'ppt_slide.html', language: 'html' }
-    ],
     notes: [
       '【Icon 元素处理】对于复杂的 SVG 图标（如 <g id="icon-*"> 元素或包含 path 的小图标），应先将其独立保存为小的 PNG 图片，再插入到 PPTX 中。**不能遗漏任何图标**。',
       '【文本颜色丢失】python-pptx 设置字体名称时会添加 a:latin/a:ea 等元素，如果颜色填充放在 rPr 末尾会被 PowerPoint 忽略。解决：用 rPr.insert(0, solidFill/gradFill) 将颜色填充插入到 rPr 开头，确保优先级最高。',
@@ -152,39 +202,28 @@ const GUIDES = {
   }
 };
 
-const buildSnippet = (title) => {
+const buildSnippet = (title, workingDirectory) => {
   const entry = SNIPPETS[title];
   if (!entry) {
     const supported = Object.keys(SNIPPETS).join(', ');
     throw new Error(`title 仅支持: ${supported}`);
   }
 
-  const lines = [];
-  lines.push(`【${entry.title}】参考脚本`);
-  if (entry.description) lines.push(entry.description);
-
-  if (entry.notes?.length) {
-    lines.push('要点：');
-    entry.notes.forEach((note) => lines.push(`- ${note}`));
-  }
+  const workingDir = resolveWorkingDirectory(workingDirectory);
+  const code = loadText(entry.codeFile);
+  const outputPath = path.join(workingDir, entry.codeFile);
+  fs.writeFileSync(outputPath, code);
 
-  if (entry.extraFiles?.length) {
-    entry.extraFiles.forEach((extra) => {
-      const content = loadText(extra.file).trimEnd();
-      lines.push(extra.label || '配套文件');
-      const lang = extra.language || path.extname(extra.file).replace('.', '') || '';
-      lines.push(`\`\`\`${lang}`);
-      lines.push(content);
-      lines.push('```');
+  const lines = [];
+  lines.push(`文件名: ${entry.codeFile}`);
+  if (entry.notes && entry.notes.length > 0) {
+    lines.push('');
+    lines.push('注意事项:');
+    entry.notes.forEach((note, idx) => {
+      lines.push(`${idx + 1}. ${note}`);
     });
   }
 
-  const code = loadText(entry.codeFile).trimEnd();
-  lines.push('示例代码：');
-  lines.push('```python');
-  lines.push(code);
-  lines.push('```');
-
   return lines.join('\n');
 };
 
@@ -206,17 +245,21 @@ const listTools = () => ({
   tools: [
     {
       name: 'snippet',
-      description: '返回常见文件转换的 Python 参考脚本及要点说明',
+      description: '将常见文件转换的 Python 参考脚本保存到工作目录下（可直接作为工具模块使用），返回文件名和注意事项',
       inputSchema: {
         type: 'object',
         properties: {
+          working_directory: {
+            type: 'string',
+            description: '工作目录的绝对路径，生成的脚本文件将保存到此目录'
+          },
           title: {
             type: 'string',
             description: '示例类型，可选: html_to_png | pdf_to_png | pptx_to_pdf | svg_to_pptx',
             enum: Object.keys(SNIPPETS)
           }
         },
-        required: ['title']
+        required: ['working_directory', 'title']
       }
     },
     {
@@ -237,7 +280,7 @@ const listTools = () => ({
   ]
 });
 
-const server = new Server({ name: 'skills', version: '2.2.14' }, { capabilities: { tools: {} } });
+const server = new Server({ name: 'skills', version: '2.4.0' }, { capabilities: { tools: {} } });
 
 server.setRequestHandler(ListToolsRequestSchema, async () => listTools());
 
@@ -246,9 +289,12 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
 
   try {
     if (name === 'snippet') {
-      const title = args?.title;
-      const payload = buildSnippet(title);
-      return { content: [{ type: 'text', text: payload }] };
+      const { working_directory, title } = args || {};
+      if (!working_directory || !title) {
+        throw new Error('必须同时提供 working_directory 和 title 参数');
+      }
+      const result = buildSnippet(title, working_directory);
+      return { content: [{ type: 'text', text: result }] };
     }
 
     if (name === 'guide') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ww_nero/skills",
-  "version": "2.2.14",
+  "version": "2.4.0",
   "description": "MCP server that returns Python reference snippets and skill guides",
   "main": "index.js",
   "bin": {

package/assets/ppt_slide.html

@@ -1,165 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>大模型发展历程 - 神经网络复兴时期</title>
-</head>
-<body>
-    <svg width="1280" height="720" viewBox="0 0 1280 720" xmlns="http://www.w3.org/2000/svg">
-      <defs>
-        <!-- Background Gradient -->
-        <linearGradient id="bgGrad" x1="0%" y1="0%" x2="0%" y2="100%">
-          <stop offset="0%" stop-color="#1a237e"/>
-          <stop offset="100%" stop-color="#0d1b60"/>
-        </linearGradient>
-        
-        <!-- Accent Gradient for Tech Elements -->
-        <linearGradient id="accentGrad" x1="0%" y1="0%" x2="100%" y2="0%">
-          <stop offset="0%" stop-color="#00e5ff"/>
-          <stop offset="100%" stop-color="#2979ff"/>
-        </linearGradient>
-        
-        <!-- Glow Effect -->
-        <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
-          <feGaussianBlur stdDeviation="2" result="blur"/>
-          <feComposite in="SourceGraphic" in2="blur" operator="over"/>
-        </filter>
-
-      </defs>
-
-      <!-- Background -->
-      <rect width="100%" height="100%" fill="url(#bgGrad)"/>
-
-      <!-- Decorative Neural Network Background (Right Side) -->
-      <g opacity="0.1" stroke="#ffffff" stroke-width="1">
-        <line x1="800" y1="200" x2="900" y2="300" />
-        <line x1="900" y1="300" x2="850" y2="450" />
-        <line x1="850" y1="450" x2="750" y2="400" />
-        <line x1="750" y1="400" x2="800" y2="200" />
-        <line x1="800" y1="200" x2="650" y2="250" />
-        <line x1="650" y1="250" x2="750" y2="400" />
-        <circle cx="800" cy="200" r="4" fill="#fff"/>
-        <circle cx="900" cy="300" r="4" fill="#fff"/>
-        <circle cx="850" cy="450" r="4" fill="#fff"/>
-        <circle cx="750" cy="400" r="4" fill="#fff"/>
-        <circle cx="650" cy="250" r="4" fill="#fff"/>
-      </g>
-
-      <!-- Image Placeholder - rect (左侧时间线区域右侧) -->
-      <rect id="image-placeholder" x="420" y="340" width="180" height="120" fill="rgba(255,255,255,0.1)" stroke="#00e5ff" stroke-width="2" stroke-dasharray="8 4"/>
-
-      <!-- Image Placeholder - circle (圆形头像占位) -->
-      <circle id="image-placeholder-circle" cx="1150" cy="120" r="50" fill="rgba(255,255,255,0.1)" stroke="#00e5ff" stroke-width="2" stroke-dasharray="8 4"/>
-
-      <!-- Icon Placeholder (图标占位符，转换时会先保存为小PNG再插入) -->
-      <g id="icon-placeholder" transform="translate(1100, 650)">
-        <rect x="0" y="0" width="24" height="24" fill="none"/>
-        <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke="#00e5ff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
-      </g>
-
-      <!-- Header Section -->
-      <g transform="translate(60, 80)">
-        <text x="0" y="0" font-family="'Segoe UI', Roboto, Helvetica, Arial, sans-serif" font-size="48" font-weight="bold" fill="#ffffff" letter-spacing="1">深度学习的崛起（1990-2017）</text>
-        <rect x="0" y="20" width="100" height="4" fill="url(#accentGrad)" rx="2"/>
-        <line x1="0" y1="22" x2="1160" y2="22" stroke="#ffffff" stroke-width="1" opacity="0.2" />
-      </g>
-
-      <!-- Layout Divider -->
-      <line x1="640" y1="180" x2="640" y2="630" stroke="#00e5ff" stroke-width="1" stroke-dasharray="4 4" opacity="0.3" />
-
-      <!-- Left Column: Technology Breakthroughs -->
-      <g transform="translate(60, 180)">
-        <text x="0" y="0" font-family="sans-serif" font-size="28" fill="#00e5ff" font-weight="bold">技术突破</text>
-        
-        <!-- Timeline Line -->
-        <line x1="20" y1="50" x2="20" y2="480" stroke="#b3e5fc" stroke-width="2" opacity="0.3"/>
-
-        <!-- 1998 Item -->
-        <g transform="translate(0, 70)">
-          <circle cx="20" cy="0" r="6" fill="#1a237e" stroke="#00e5ff" stroke-width="2"/>
-          <text x="45" y="0" font-family="sans-serif" font-size="24" fill="#ffffff" font-weight="bold" alignment-baseline="middle">1998</text>
-          <text x="45" y="30" font-family="sans-serif" font-size="20" fill="#b3e5fc" alignment-baseline="middle">LeNet-5，CNN开创性工作</text>
-        </g>
-
-        <!-- 2012 Item -->
-        <g transform="translate(0, 190)">
-          <circle cx="20" cy="0" r="6" fill="#1a237e" stroke="#00e5ff" stroke-width="2"/>
-          <text x="45" y="0" font-family="sans-serif" font-size="24" fill="#ffffff" font-weight="bold" alignment-baseline="middle">2012</text>
-          <text x="45" y="30" font-family="sans-serif" font-size="20" fill="#b3e5fc" alignment-baseline="middle">AlexNet赢得ImageNet竞赛</text>
-        </g>
-
-        <!-- 2014 Item -->
-        <g transform="translate(0, 310)">
-          <circle cx="20" cy="0" r="6" fill="#1a237e" stroke="#00e5ff" stroke-width="2"/>
-          <text x="45" y="0" font-family="sans-serif" font-size="24" fill="#ffffff" font-weight="bold" alignment-baseline="middle">2014</text>
-          <text x="45" y="30" font-family="sans-serif" font-size="20" fill="#b3e5fc" alignment-baseline="middle">GAN生成对抗网络</text>
-        </g>
-
-        <!-- 2015 Item -->
-        <g transform="translate(0, 430)">
-          <circle cx="20" cy="0" r="6" fill="#1a237e" stroke="#00e5ff" stroke-width="2"/>
-          <text x="45" y="0" font-family="sans-serif" font-size="24" fill="#ffffff" font-weight="bold" alignment-baseline="middle">2015</text>
-          <text x="45" y="30" font-family="sans-serif" font-size="20" fill="#b3e5fc" alignment-baseline="middle">ResNet残差网络</text>
-        </g>
-      </g>
-
-      <!-- Right Column: Key Figures -->
-      <g transform="translate(688, 180)">
-        <text x="0" y="0" font-family="sans-serif" font-size="28" fill="#00e5ff" font-weight="bold">关键人物</text>
-        <text x="0" y="35" font-family="sans-serif" font-size="16" fill="#b3e5fc" opacity="0.7">Turing Award Winners ("Godfathers of AI")</text>
-
-        <!-- Card Container Styles -->
-        <defs>
-            <path id="cardShape" d="M0 10 L10 0 L380 0 L380 90 L370 100 L0 100 Z" />
-        </defs>
-
-        <!-- Person 1: Hinton -->
-        <g transform="translate(0, 70)">
-          <use href="#cardShape" fill="rgba(255,255,255,0.05)" stroke="rgba(0,229,255,0.3)" stroke-width="1"/>
-          <!-- Decorative corner -->
-          <path d="M0 20 L0 10 L10 0 L20 0" fill="none" stroke="#00e5ff" stroke-width="2"/>
-          <!-- Content -->
-          <text x="30" y="40" font-family="sans-serif" font-size="24" fill="#ffffff" font-weight="bold">Geoffrey Hinton</text>
-          <text x="30" y="70" font-family="sans-serif" font-size="16" fill="#b3e5fc">Backpropagation, Deep Belief Nets</text>
-          <!-- Tech Icon -->
-          <circle cx="340" cy="50" r="20" stroke="#00e5ff" stroke-width="1" fill="none" opacity="0.5"/>
-          <circle cx="340" cy="50" r="8" fill="#00e5ff" opacity="0.8"/>
-        </g>
-
-        <!-- Person 2: LeCun -->
-        <g transform="translate(0, 190)">
-          <use href="#cardShape" fill="rgba(255,255,255,0.05)" stroke="rgba(0,229,255,0.3)" stroke-width="1"/>
-          <path d="M0 20 L0 10 L10 0 L20 0" fill="none" stroke="#00e5ff" stroke-width="2"/>
-          <text x="30" y="40" font-family="sans-serif" font-size="24" fill="#ffffff" font-weight="bold">Yann LeCun</text>
-          <text x="30" y="70" font-family="sans-serif" font-size="16" fill="#b3e5fc">CNN (Convolutional Neural Networks)</text>
-          <circle cx="340" cy="50" r="20" stroke="#00e5ff" stroke-width="1" fill="none" opacity="0.5"/>
-          <rect x="332" y="42" width="16" height="16" fill="#00e5ff" opacity="0.8"/>
-        </g>
-
-        <!-- Person 3: Bengio -->
-        <g transform="translate(0, 310)">
-          <use href="#cardShape" fill="rgba(255,255,255,0.05)" stroke="rgba(0,229,255,0.3)" stroke-width="1"/>
-          <path d="M0 20 L0 10 L10 0 L20 0" fill="none" stroke="#00e5ff" stroke-width="2"/>
-          <text x="30" y="40" font-family="sans-serif" font-size="24" fill="#ffffff" font-weight="bold">Yoshua Bengio</text>
-          <text x="30" y="70" font-family="sans-serif" font-size="16" fill="#b3e5fc">Sequence Modeling, GANs</text>
-          <circle cx="340" cy="50" r="20" stroke="#00e5ff" stroke-width="1" fill="none" opacity="0.5"/>
-          <polygon points="340,38 352,58 328,58" fill="#00e5ff" opacity="0.8"/>
-        </g>
-      </g>
-
-      <!-- Footer Decor -->
-      <g transform="translate(0, 672)">
-         <rect x="0" y="0" width="1280" height="48" fill="#0d1b60" opacity="0.8"/>
-         <text x="60" y="30" font-family="sans-serif" font-size="12" fill="#b3e5fc" opacity="0.5">NEURAL NETWORKS RENAISSANCE | AI HISTORY SERIES</text>
-
-         <!-- Decorative dots footer -->
-         <g fill="#00e5ff" opacity="0.5">
-           <circle cx="1206" cy="24" r="2"/>
-           <circle cx="1216" cy="24" r="2"/>
-           <circle cx="1226" cy="24" r="2"/>
-         </g>
-      </g>
-    </svg>
-</body>
-</html>