Nicksxs's Blog

基于iflow的qwen模型来体验代码生成

发表于 2025-11-09 分类于 LLM 阅读次数： Disqus：

这里我们用iflow的默认Qwen3-Coder-Plus模型来生成一个todo应用
本次的prompt稍微调整了下

1	帮我生成一个todo应用，基于react实现，需要具有非常精美的UI，媲美Instagram那样的网站

生成的复杂度比之前roocode小很多
主要就是在App.tsx里

import React, { useState, useEffect } from 'react';
import styled, { createGlobalStyle, keyframes } from 'styled-components';
import { FiCheck, FiTrash2, FiEdit2 } from 'react-icons/fi';

// 淡入动画
const fadeIn = keyframes`
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
`;

// 淡入缩放动画
const fadeInScale = keyframes`
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
`;

// 按钮点击动画
const buttonClick = keyframes`
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
`;

// 按钮悬停脉冲动画
const pulse = keyframes`
  0% {
    box-shadow: 0 0 0 0 rgba(56, 151, 240, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(56, 151, 240, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(56, 151, 240, 0);
  }
`;

// 任务项滑动动画
const slideIn = keyframes`
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
`;

// 全局样式
const GlobalStyle = createGlobalStyle`
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }

  body {
    background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
    min-height: 100vh;
    padding: 20px;
  }
`;

// 主容器
const AppContainer = styled.div`
  max-width: 600px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  animation: ${fadeIn} 0.5s ease-out;
`;

// 顶部导航栏
const Header = styled.header`
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  padding: 25px;
  text-align: center;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
    transform: rotate(30deg);
  }

  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  }
`;

const AppTitle = styled.h1`
  color: white;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin: 0;
  position: relative;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  background: linear-gradient(90deg, white, #e0f7fa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
`;

// 主内容区域
const MainContent = styled.main`
  padding: 30px;
`;

// 添加任务表单
const AddTodoForm = styled.div`
  display: flex;
  margin-bottom: 25px;
  gap: 12px;
  animation: ${fadeIn} 0.5s ease-out;
`;

const TodoInput = styled.input`
  flex: 1;
  padding: 16px 20px;
  border: 1px solid rgba(134, 142, 150, 0.2);
  border-radius: 12px;
  font-size: 1rem;
  outline: none;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);

  &:focus {
    border-color: #3897f0;
    background: white;
    box-shadow: 0 0 0 3px rgba(56, 151, 240, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
  }

  &::placeholder {
    color: #a0aec0;
  }
`;

const AddButton = styled.button`
  background: linear-gradient(135deg, #3897f0 0%, #833ab4 100%);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 0 24px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(56, 151, 240, 0.3);

  &:hover {
    background: linear-gradient(135deg, #2d7bc4 0%, #6a11cb 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(56, 151, 240, 0.4);
  }

  &:active {
    animation: ${buttonClick} 0.2s ease;
    transform: translateY(0);
  }

  &:focus {
    animation: ${pulse} 1.5s infinite;
  }

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: 0.5s;
  }

  &:hover::before {
    left: 100%;
  }
`;

// 任务列表
const TodoList = styled.div`
  display: flex;
  flex-direction: column;
  gap: 15px;
`;

// 单个任务项
const TodoItem = styled.div<{ completed: boolean }>`
  display: flex;
  align-items: center;
  padding: 18px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  border: 1px solid rgba(134, 142, 150, 0.15);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  animation: ${slideIn} 0.3s ease-out;

  ${props => props.completed && `
    opacity: 0.8;
    background: rgba(240, 240, 240, 0.6);
  `}

  &:hover {
    border-color: rgba(134, 142, 150, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  }
`;

const Checkbox = styled.input.attrs({ type: 'checkbox' })`
  width: 22px;
  height: 22px;
  cursor: pointer;
  accent-color: #4CAF50;
  border-radius: 6px;
  border: 2px solid #cbd5e0;
  transition: all 0.2s ease;

  &:checked {
    border-color: #4CAF50;
    background: #4CAF50;
  }

  &:hover {
    transform: scale(1.1);
  }
`;

const TodoText = styled.span<{ completed: boolean }>`
  flex: 1;
  font-size: 1.1rem;
  margin: 0 15px;
  transition: all 0.3s ease;
  color: #2d3748;
  ${props => props.completed && `
    text-decoration: line-through;
    color: #a0aec0;
  `}
`;

const TodoActions = styled.div`
  display: flex;
  gap: 12px;
`;

const ActionButton = styled.button`
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(134, 142, 150, 0.2);
  cursor: pointer;
  font-size: 1.2rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  color: #718096;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);

  &:hover {
    background: white;
    color: #4a5568;
    border-color: rgba(134, 142, 150, 0.4);
    transform: translateY(-2px) scale(1.1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }

  &:active {
    transform: scale(0.95);
  }
`;

const CheckButton = styled(ActionButton)`
  &:hover {
    color: #4CAF50;
    border-color: rgba(76, 175, 80, 0.4);
    background: rgba(76, 175, 80, 0.1);
  }
`;

const EditButton = styled(ActionButton)`
  &:hover {
    color: #2b6cb0;
    border-color: rgba(43, 108, 176, 0.4);
    background: rgba(43, 108, 176, 0.1);
  }
`;

const DeleteButton = styled(ActionButton)`
  &:hover {
    color: #e53e3e;
    border-color: rgba(229, 62, 62, 0.4);
    background: rgba(229, 62, 62, 0.1);
  }
`;

// 统计信息
const StatsContainer = styled.div`
  display: flex;
  justify-content: space-between;
  margin-top: 25px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 12px;
  font-weight: 500;
  color: #718096;
  border: 1px solid rgba(134, 142, 150, 0.15);
  animation: ${fadeInScale} 0.5s ease-out;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
`;

const StatItem = styled.div`
  text-align: center;
  padding: 10px 15px;
  border-radius: 8px;
  transition: all 0.3s ease;

  &:hover {
    background: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
  }
`;

const StatNumber = styled.div`
  font-size: 1.5rem;
  font-weight: 700;
  color: #2d3748;
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
`;

const StatLabel = styled.div`
  font-size: 0.85rem;
  color: #a0aec0;
  margin-top: 3px;
`;

// 空状态
const EmptyState = styled.div`
  text-align: center;
  padding: 60px 20px;
  color: #a0aec0;
  animation: ${fadeIn} 0.5s ease-out;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  margin-top: 10px;
  backdrop-filter: blur(5px);
`;

const EmptyIcon = styled.div`
  font-size: 3.5rem;
  margin-bottom: 20px;
  opacity: 0.6;
  filter: grayscale(100%);
  animation: ${fadeIn} 1s ease-in-out infinite alternate;
`;

interface Todo {
  id: string;
  text: string;
  completed: boolean;
  createdAt: Date;
}

const App: React.FC = () => {
  const [todos, setTodos] = useState<Todo[]>([]);
  const [newTodo, setNewTodo] = useState<string>('');

  // 从localStorage加载数据
  useEffect(() => {
    const savedTodos = localStorage.getItem('todos');
    if (savedTodos) {
      try {
        const parsedTodos = JSON.parse(savedTodos);
        // 将日期字符串转换回Date对象
        const todosWithDates = parsedTodos.map((todo: any) => ({
          ...todo,
          createdAt: new Date(todo.createdAt)
        }));
        setTodos(todosWithDates);
      } catch (e) {
        console.error('Error parsing todos from localStorage', e);
      }
    }
  }, []);

  // 保存数据到localStorage
  useEffect(() => {
    localStorage.setItem('todos', JSON.stringify(todos));
  }, [todos]);

  const addTodo = () => {
    if (newTodo.trim() !== '') {
      const newTodoItem: Todo = {
        id: Date.now().toString(),
        text: newTodo,
        completed: false,
        createdAt: new Date()
      };
      setTodos([newTodoItem, ...todos]); // 将新任务添加到列表顶部
      setNewTodo('');
    }
  };

  const toggleTodo = (id: string) => {
    setTodos(todos.map(todo =>
      todo.id === id ? { ...todo, completed: !todo.completed } : todo
    ));
  };

  const deleteTodo = (id: string) => {
    setTodos(todos.filter(todo => todo.id !== id));
  };

  const editTodo = (id: string, newText: string) => {
    if (newText.trim() !== '') {
      setTodos(todos.map(todo =>
        todo.id === id ? { ...todo, text: newText } : todo
      ));
    }
  };

  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter') {
      addTodo();
    }
  };

  const completedCount = todos.filter(todo => todo.completed).length;
  const totalCount = todos.length;

  return (
    <>
      <GlobalStyle />
      <AppContainer>
        <Header>
          <AppTitle>Instagram风格Todo</AppTitle>
        </Header>

        <MainContent>
          <AddTodoForm>
            <TodoInput
              type="text"
              value={newTodo}
              onChange={(e) => setNewTodo(e.target.value)}
              onKeyPress={handleKeyPress}
              placeholder="添加新任务..."
            />
            <AddButton onClick={addTodo}>
              添加
            </AddButton>
          </AddTodoForm>

          {todos.length > 0 ? (
            <>
              <TodoList>
                {todos.map(todo => (
                  <TodoItem key={todo.id} completed={todo.completed}>
                    <Checkbox
                      checked={todo.completed}
                      onChange={() => toggleTodo(todo.id)}
                    />
                    <TodoText completed={todo.completed}>{todo.text}</TodoText>
                    <TodoActions>
                      <CheckButton
                        onClick={() => toggleTodo(todo.id)}
                        title={todo.completed ? "标记为未完成" : "标记为完成"}
                      >
                        {React.createElement(FiCheck as any)}
                      </CheckButton>
                      <EditButton
                        onClick={() => {
                          const newText = prompt('编辑任务:', todo.text);
                          if (newText !== null) {
                            editTodo(todo.id, newText);
                          }
                        }}
                        title="编辑"
                      >
                        {React.createElement(FiEdit2 as any)}
                      </EditButton>
                      <DeleteButton
                        onClick={() => deleteTodo(todo.id)}
                        title="删除"
                      >
                        {React.createElement(FiTrash2 as any)}
                      </DeleteButton>
                    </TodoActions>
                  </TodoItem>
                ))}
              </TodoList>

              <StatsContainer>
                <StatItem>
                  <StatNumber>{totalCount}</StatNumber>
                  <StatLabel>总任务</StatLabel>
                </StatItem>
                <StatItem>
                  <StatNumber>{completedCount}</StatNumber>
                  <StatLabel>已完成</StatLabel>
                </StatItem>
                <StatItem>
                  <StatNumber>{totalCount - completedCount}</StatNumber>
                  <StatLabel>待完成</StatLabel>
                </StatItem>
              </StatsContainer>
            </>
          ) : (
            <EmptyState>
              <EmptyIcon>📝</EmptyIcon>
              <h2>还没有任务</h2>
              <p>添加你的第一个任务开始吧！</p>
            </EmptyState>
          )}
        </MainContent>
      </AppContainer>
    </>
  );
};

export default App;

包括了主体代码和样式，但是颜色样式我还不太满意，希望是之前Instagram那种比较素的颜色，又很精致的那种，但是最近又登录看了下，发现他们家也倒退很多，又通过一些修改，感觉好了一些

另外在运行过程中把之前说的问题截到图了，这就是我说的广告，也做的太快了

好像是我碰到的第一个带有广告的，不过其他家都是需要为api用量付费的，免费的有点代价也正常
另外在调整UI的过程中我们需要让iflow在每一步变更前先把当前代码提交，这样方便我们在多次ui调整中选择最佳的版本

体验心流助手iflow

发表于 2025-11-02 分类于 LLM 阅读次数： Disqus：

最近一直在找这些AI编程助手，想找个cc的八分平替，刚好前阵子在朋友圈看到iflow-cli，据说是可以免费用GLM4.6这些模型，
首先安装也很简单
使用这行命令就行

1	bash -c "$(curl -fsSL https://gitee.com/iflow-ai/iflow-cli/raw/main/install.sh)"

但是这里他会判断nodejs的版本，需要22及以上版本
这个可以用nvm切换，不过这里比较好奇，应该是nodejs的普及率太高了所以都用它做来会更方便
切换以后运行上面的命令，首次运行直接回进去类似于claude code的交互界面，
当然我还是让它给我修复下roo代码

第一个错误是启动npm run dev 的时候就报的，后面是在chrome控制台的

这两个问题改完之后终于这个“庞大的”工程终于起来了，原因只是为了做roocode测试，并且我的prompt加了“精美的”这种关键词，结果用copilot改了半天index.css中依赖tailwind的问题，
这次总算用iflow-cli给修好了，但也是能跑起来

可以看到页面是比之前的都精美了，但是样式还有点不对，有点偏右，而且经过copilot的修改，可能配色也已经不太一样了
iflow总结用下来有两个问题，第一个是有时候会莫名其妙超时，非常久，有一次我放着没管，一晚上都没结果
第二个是广告，在等待prompt结果的时候，会有一行文字的广告，这个体验非常差，当然如果是为了免费也没办法，希望能有一定的控制，后续可以看看它支持的模型里哪个生成的比较好

体验Roo Code代码生成插件

发表于 2025-10-26 分类于 LLM 阅读次数： Disqus：

之前在GLM网站看到他们家有适配各种代码生成插件，就先来体验下这个Roo Code
这是个在vscode插件市场里可以安装的插件，

安装完在这就有个图标了

然后在API Provider里选择 Z AI
Z AI Entrypoint 选择 China Coding Plan
Z AI API KEY 就是他们家的API KEY
然后选择Model，可以选择最新的glm-4.6
这样就配置好了

还是以相同任务来做下测验
他会先逐个求问，来帮忙细化我前面比较粗略的prompt
然后会生成这样的架构计划

这让我觉得有点惊喜，在开发前已经在做系分和架构设计了

但是在N步之后，还是有出了问题
12:23:12 AM [vite] (client) Pre-transform error: [postcss] It looks like you're trying to usetailwindcssdirectly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install@tailwindcss/postcssand update your PostCSS configuration. Plugin: vite:css

不过它识别到了这个错误

但是其实这个修复还是有问题，后续又因为token超限了，这样的一个简单应用，它用了83K的token，虽然可能设想很好，实现的还是问题比较多
整体看下来Roo Code应该是想解决比较大型的项目的架构设计和代码实现，但是可能因为模型能力不够，也可能是在prompt的设计中出现了问题，比如这里看下来跟tailwind的版本和具体的使用方式有关系，这一点可能跟glm模型的训练有关
即使我用了copilot基于claude-sonnet-4.5模型调试了挺久还是没有解决问题
倒不是特别悲观，只是可能很多项目都有复杂的历史包袱，要在非常核心的项目（特别是历史悠久）中使用，目前来看还需要一些时间来进步

在claude code中体验下GLM最新模型

发表于 2025-10-18 分类于 LLM 阅读次数： Disqus：

在很久之前最开始体验国产模型的时候就体验了ChatGLM，那个时候属于国内基本没几家有出大语言模型，但是说实话体验效果的确比较一般
但是目前GLM也是国内比较头部的大语言模型了，特别是最新出的GLM4.6，看大佬的评测好像比Deepseek V3.2还好一些
我们就基于claude code来做一下体验，还是老规矩，用最简单的prompt让它实现个todo应用
前置工作我们先去 bigmodel 申请下apikey
申请完了就在我们体验的项目目录下

1 2	export ANTHROPIC_BASE_URL=``https://open.bigmodel.cn/api/anthropic export ANTHROPIC_AUTH_TOKEN="刚才复制的 API Key"

一开始运行还发现模型是不对的，用的是claude的模型
需要手动指定

1	export ANTHROPIC_DEFAULT_SONNET_MODEL=GLM-4.5

这里为什么用4.5呢，因为没付费，不给用4.6
所以我们先测一下4.5，待会再看下4.6
4.5模型的测了好几次都是中途卡住
生成的效果也比较一般

接下来我充了值，再试下4.6模型，果然动用了钞能力就是不一样，一遍完成，并且样式也美化了很多

过程中的任务编排也是比较合理，并且逐条完成了，4.5感觉还是完成度不高，4.6给我的感觉可能跟deepseek r1接近，
没有特别明显的优势，可能需要更加复杂的任务才能测出来差别，总之国产模型还是有在进步的

将claude用的更有效一些的小窍门

发表于 2025-10-12 分类于 LLM 阅读次数： Disqus：

claude的模型现在在写代码这块还是比较权威的，只是也别小瞧了本身它的通用能力
我们打开类似于gpt，claude经常是以文本形式的提问，再得到文本形式的回答，但是对于我们程序员来说，还有一些用途其实是可以更有效的
比如我们可以让claude帮我们画图
像我们的uml图，可以用文本化的plantuml或者mermaid等这些工具来画
比如我可以让claude给我画个深度学习路径图

graph TD
    Start[开始学习神经网络] --> Phase1[第一阶段: 数学基础]
    
    Phase1 --> Math1[线性代数]
    Phase1 --> Math2[微积分]
    Phase1 --> Math3[概率统计]
    
    Math1 --> Math1a["矩阵运算、特征值<br/>📚 3Blue1Brown线性代数系列<br/>🔗 youtube.com/c/3blue1brown"]
    Math2 --> Math2a["偏导数、梯度、链式法则<br/>📚 MIT 18.01单变量微积分<br/>🔗 ocw.mit.edu"]
    Math3 --> Math3a["期望、方差、贝叶斯定理<br/>📚 Probabilistic ML书籍<br/>🔗 probml.github.io"]
    
    Math1a --> Phase2
    Math2a --> Phase2
    Math3a --> Phase2
    
    Phase2[第二阶段: 编程基础] --> Prog1[Python编程]
    Phase2 --> Prog2[NumPy/Pandas]
    Phase2 --> Prog3[数据可视化]
    
    Prog1 --> Prog1a["基础语法、面向对象<br/>📚 Python Crash Course<br/>🔗 nostarch.com/python-crash-course"]
    Prog2 --> Prog2a["数组操作、数据处理<br/>📚 NumPy官方教程<br/>🔗 numpy.org/doc"]
    Prog3 --> Prog3a["Matplotlib、Seaborn<br/>📚 Python Data Science Handbook<br/>🔗 jakevdp.github.io"]
    
    Prog1a --> Phase3
    Prog2a --> Phase3
    Prog3a --> Phase3
    
    Phase3[第三阶段: 机器学习基础] --> ML1[监督学习]
    Phase3 --> ML2[损失函数]
    Phase3 --> ML3[优化算法]
    
    ML1 --> ML1a["线性回归、逻辑回归<br/>📚 Andrew Ng ML课程<br/>🔗 coursera.org/learn/machine-learning"]
    ML2 --> ML2a["MSE、交叉熵<br/>📚 Deep Learning Book Ch5<br/>🔗 deeplearningbook.org"]
    ML3 --> ML3a["梯度下降、SGD<br/>📚 Sebastian Ruder优化综述<br/>🔗 ruder.io/optimizing-gradient-descent"]
    
    ML1a --> Phase4
    ML2a --> Phase4
    ML3a --> Phase4
    
    Phase4[第四阶段: 神经网络基础] --> NN1[感知机]
    Phase4 --> NN2[前馈神经网络]
    Phase4 --> NN3[反向传播]
    
    NN1 --> NN1a["单层感知机、多层感知机<br/>📚 Neural Networks and Deep Learning<br/>🔗 neuralnetworksanddeeplearning.com"]
    NN2 --> NN2a["全连接层、激活函数<br/>📚 Stanford CS231n Lecture 4<br/>🔗 cs231n.stanford.edu"]
    NN3 --> NN3a["链式法则、梯度计算<br/>📚 Backprop Calculus详解<br/>🔗 colah.github.io"]
    
    NN1a --> Phase5
    NN2a --> Phase5
    NN3a --> Phase5
    
    Phase5[第五阶段: 深度学习框架] --> FW1[PyTorch]
    Phase5 --> FW2[TensorFlow/Keras]
    
    FW1 --> FW1a["Tensor操作、自动微分<br/>📚 PyTorch官方教程<br/>🔗 pytorch.org/tutorials"]
    FW2 --> FW2a["模型构建、训练流程<br/>📚 TensorFlow实战<br/>🔗 tensorflow.org/tutorials"]
    
    FW1a --> Phase6
    FW2a --> Phase6
    
    Phase6[第六阶段: 卷积神经网络CNN] --> CNN1[卷积层原理]
    Phase6 --> CNN2[经典架构]
    Phase6 --> CNN3[应用领域]
    
    CNN1 --> CNN1a["卷积、池化、感受野<br/>📚 CS231n Convolutional Networks<br/>🔗 cs231n.github.io/convolutional-networks"]
    CNN2 --> CNN2a["LeNet、AlexNet、VGG<br/>ResNet、Inception、EfficientNet<br/>📚 论文集合: paperswithcode.com<br/>🔗 paperswithcode.com/methods/category/convolutional-neural-networks"]
    CNN3 --> CNN3a["图像分类、目标检测、分割<br/>📚 Computer Vision: Algorithms and Applications<br/>🔗 szeliski.org/Book"]
    
    CNN1a --> Phase7
    CNN2a --> Phase7
    CNN3a --> Phase7
    
    Phase7[第七阶段: 循环神经网络RNN] --> RNN1[RNN基础]
    Phase7 --> RNN2[LSTM/GRU]
    Phase7 --> RNN3[序列建模]
    
    RNN1 --> RNN1a["循环结构、时间展开<br/>📚 Understanding LSTM Networks<br/>🔗 colah.github.io/posts/2015-08-Understanding-LSTMs"]
    RNN2 --> RNN2a["门控机制、长期依赖<br/>📚 Illustrated Guide to LSTM/GRU<br/>🔗 towardsdatascience.com"]
    RNN3 --> RNN3a["时间序列、语言模型<br/>📚 Sequence Models课程<br/>🔗 coursera.org/learn/nlp-sequence-models"]
    
    RNN1a --> Phase8
    RNN2a --> Phase8
    RNN3a --> Phase8
    
    Phase8[第八阶段: 注意力机制与Transformer] --> ATT1[注意力机制]
    Phase8 --> ATT2[Transformer架构]
    Phase8 --> ATT3[预训练模型]
    
    ATT1 --> ATT1a["Self-Attention、Multi-Head<br/>📚 Attention Is All You Need<br/>🔗 arxiv.org/abs/1706.03762"]
    ATT2 --> ATT2a["Encoder-Decoder、位置编码<br/>📚 The Illustrated Transformer<br/>🔗 jalammar.github.io/illustrated-transformer"]
    ATT3 --> ATT3a["BERT、GPT系列、T5<br/>📚 Hugging Face Course<br/>🔗 huggingface.co/course"]
    
    ATT1a --> Phase9
    ATT2a --> Phase9
    ATT3a --> Phase9
    
    Phase9[第九阶段: 生成模型] --> GEN1[自编码器]
    Phase9 --> GEN2[生成对抗网络GAN]
    Phase9 --> GEN3[扩散模型]
    
    GEN1 --> GEN1a["AE、VAE、特征学习<br/>📚 Tutorial on VAE<br/>🔗 arxiv.org/abs/1606.05908"]
    GEN2 --> GEN2a["判别器、生成器、对抗训练<br/>📚 GAN Lab交互式可视化<br/>🔗 poloclub.github.io/ganlab"]
    GEN3 --> GEN3a["DDPM、Stable Diffusion<br/>📚 Diffusion Models教程<br/>🔗 lilianweng.github.io/posts/2021-07-11-diffusion-models"]
    
    GEN1a --> Phase10
    GEN2a --> Phase10
    GEN3a --> Phase10
    
    Phase10[第十阶段: 高级技术] --> ADV1[正则化技术]
    Phase10 --> ADV2[优化技巧]
    Phase10 --> ADV3[模型压缩]
    
    ADV1 --> ADV1a["Dropout、BatchNorm、数据增强<br/>📚 CS231n训练技巧<br/>🔗 cs231n.github.io/neural-networks-2"]
    ADV2 --> ADV2a["Adam、学习率调度、梯度裁剪<br/>📚 An Overview of Optimization<br/>🔗 arxiv.org/abs/1609.04747"]
    ADV3 --> ADV3a["剪枝、量化、知识蒸馏<br/>📚 Model Compression Survey<br/>🔗 arxiv.org/abs/1710.09282"]
    
    ADV1a --> Phase11
    ADV2a --> Phase11
    ADV3a --> Phase11
    
    Phase11[第十一阶段: 实践项目] --> PROJ1[计算机视觉项目]
    Phase11 --> PROJ2[自然语言处理项目]
    Phase11 --> PROJ3[多模态项目]
    
    PROJ1 --> PROJ1a["Kaggle图像竞赛<br/>物体检测系统<br/>📚 PyImageSearch教程<br/>🔗 pyimagesearch.com"]
    PROJ2 --> PROJ2a["文本分类、情感分析<br/>问答系统、对话机器人<br/>📚 实战项目集合<br/>🔗 github.com/dair-ai/ML-Papers-Explained"]
    PROJ3 --> PROJ3a["图像描述、视觉问答<br/>📚 OpenAI CLIP论文<br/>🔗 arxiv.org/abs/2103.00020"]
    
    PROJ1a --> Phase12
    PROJ2a --> Phase12
    PROJ3a --> Phase12
    
    Phase12[第十二阶段: 前沿研究] --> RES1[大语言模型LLM]
    Phase12 --> RES2[强化学习]
    Phase12 --> RES3[神经架构搜索]
    
    RES1 --> RES1a["GPT-4、Claude、Llama系列<br/>📚 LLM综述论文<br/>🔗 arxiv.org/abs/2303.18223"]
    RES2 --> RES2a["DQN、PPO、AlphaGo<br/>📚 Spinning Up in Deep RL<br/>🔗 spinningup.openai.com"]
    RES3 --> RES3a["AutoML、NAS方法<br/>📚 NAS Survey<br/>🔗 arxiv.org/abs/1808.05377"]
    
    RES1a --> End
    RES2a --> End
    RES3a --> End
    
    End[🎓 持续学习与研究]
    
    style Start fill:#e1f5e1
    style Phase1 fill:#fff4e6
    style Phase2 fill:#fff4e6
    style Phase3 fill:#e3f2fd
    style Phase4 fill:#e3f2fd
    style Phase5 fill:#f3e5f5
    style Phase6 fill:#fce4ec
    style Phase7 fill:#fce4ec
    style Phase8 fill:#e0f2f1
    style Phase9 fill:#fff9c4
    style Phase10 fill:#ffebee
    style Phase11 fill:#e8f5e9
    style Phase12 fill:#e1bee7
    style End fill:#c8e6c9

生成出来的图效果还是挺不错的

另外比如我们想要生成一个电商系统的下单交易流程

sequenceDiagram
    actor User as 👤 用户
    participant Web as 🌐 Web/App前端
    participant Gateway as 🚪 API网关
    participant Auth as 🔐 认证服务
    participant Product as 📦 商品服务
    participant Cart as 🛒 购物车服务
    participant Order as 📋 订单服务
    participant Inventory as 📊 库存服务
    participant Coupon as 🎫 优惠券服务
    participant Payment as 💳 支付服务
    participant PayGateway as 💰 支付网关
    participant MQ as 📨 消息队列
    participant WMS as 🏭 仓储系统
    participant Logistics as 🚚 物流系统
    participant Notify as 📧 通知服务
    participant AfterSale as 🔄 售后服务
    participant Finance as 💵 财务系统

    Note over User,Finance: 📚 参考架构：微服务电商系统<br/>🔗 github.com/macrozheng/mall

    %% 登录认证阶段
    rect rgb(230, 245, 255)
    Note over User,Auth: 第一阶段：用户认证
    User->>Web: 1. 打开电商平台
    Web->>Gateway: 2. 请求登录页面
    Gateway->>Auth: 3. 验证会话状态
    
    alt 未登录
        Auth-->>Web: 4. 返回登录页面
        User->>Web: 5. 输入账号密码/手机验证码
        Web->>Auth: 6. 提交登录请求
        Note right of Auth: 🔐 JWT Token生成<br/>📚 RFC 7519标准<br/>🔗 jwt.io
        Auth->>Auth: 7. 验证凭证
        Auth-->>Web: 8. 返回Token
        Web->>Web: 9. 存储Token到Cookie/LocalStorage
    else 已登录
        Auth-->>Web: 4. 验证通过
    end
    end

    %% 商品浏览阶段
    rect rgb(245, 255, 230)
    Note over User,Product: 第二阶段：商品浏览
    User->>Web: 10. 搜索/浏览商品
    Web->>Gateway: 11. 商品查询请求
    Gateway->>Product: 12. 转发查询
    Note right of Product: 🔍 Elasticsearch全文搜索<br/>📚 搜索引擎实战<br/>🔗 elastic.co/guide
    Product->>Product: 13. 从ES/缓存查询
    Product-->>Web: 14. 返回商品列表
    
    User->>Web: 15. 点击商品详情
    Web->>Gateway: 16. 请求商品详情
    Gateway->>Product: 17. 查询商品信息
    Gateway->>Inventory: 18. 查询库存信息
    Note right of Inventory: 💾 Redis缓存+MySQL<br/>📚 缓存穿透/击穿方案<br/>🔗 redis.io/topics/lru-cache
    
    par 并行查询
        Product-->>Gateway: 19a. 返回商品详情
    and
        Inventory-->>Gateway: 19b. 返回库存数量
    end
    Gateway-->>Web: 20. 聚合返回
    end

    %% 购物车阶段
    rect rgb(255, 245, 230)
    Note over User,Cart: 第三阶段：加入购物车
    User->>Web: 21. 选择规格并加入购物车
    Web->>Gateway: 22. 加购请求
    Gateway->>Cart: 23. 添加到购物车
    Note right of Cart: 🗄️ Redis存储购物车<br/>📚 分布式Session方案<br/>🔗 spring.io/projects/spring-session
    Cart->>Inventory: 24. 验证库存是否充足
    Inventory-->>Cart: 25. 返回库存状态
    Cart->>Cart: 26. 计算商品小计
    Cart-->>Web: 27. 返回购物车数据
    
    User->>Web: 28. 查看购物车
    Web->>Gateway: 29. 获取购物车列表
    Gateway->>Cart: 30. 查询购物车
    Cart->>Product: 31. 批量查询商品最新价格
    Cart->>Coupon: 32. 查询可用优惠券
    Note right of Coupon: 🎫 优惠券系统设计<br/>📚 促销引擎架构<br/>🔗 tech.meituan.com
    
    par 并行查询
        Product-->>Cart: 33a. 返回价格信息
    and
        Coupon-->>Cart: 33b. 返回可用优惠券
    end
    Cart-->>Web: 34. 返回购物车详情
    end

    %% 订单创建阶段
    rect rgb(255, 240, 245)
    Note over User,Order: 第四阶段：订单创建
    User->>Web: 35. 点击结算
    Web->>Gateway: 36. 进入结算页
    Gateway->>Order: 37. 创建预订单
    
    User->>Web: 38. 选择收货地址/优惠券
    Web->>Gateway: 39. 提交订单
    Gateway->>Order: 40. 创建订单请求
    
    Note right of Order: 🔢 雪花算法生成订单号<br/>📚 分布式ID生成方案<br/>🔗 github.com/twitter/snowflake
    Order->>Order: 41. 生成订单号
    Order->>Coupon: 42. 锁定优惠券
    Order->>Inventory: 43. 预扣减库存
    Note right of Inventory: ⚠️ 分布式锁防超卖<br/>📚 Redis+Lua脚本<br/>🔗 redisson.org
    
    alt 库存充足
        Inventory-->>Order: 44. 扣减成功
        Coupon-->>Order: 45. 锁定成功
        Order->>Order: 46. 订单状态：待支付
        Order-->>Web: 47. 返回订单信息
    else 库存不足
        Inventory-->>Order: 44. 库存不足
        Order-->>Web: 47. 返回库存不足提示
    end
    end

    %% 支付阶段
    rect rgb(240, 248, 255)
    Note over User,PayGateway: 第五阶段：支付处理
    User->>Web: 48. 选择支付方式
    Web->>Gateway: 49. 发起支付请求
    Gateway->>Payment: 50. 创建支付单
    
    Note right of Payment: 💳 聚合支付设计<br/>📚 支付系统架构<br/>🔗 github.com/Exrick/xpay
    Payment->>Payment: 51. 生成支付单号
    Payment->>Order: 52. 关联订单
    Payment->>PayGateway: 53. 调用支付渠道
    
    alt 支付宝支付
        Note right of PayGateway: 💰 支付宝SDK<br/>📚 开放平台文档<br/>🔗 opendocs.alipay.com
        PayGateway->>PayGateway: 54. 调用支付宝API
    else 微信支付
        Note right of PayGateway: 💚 微信支付API<br/>📚 支付开发文档<br/>🔗 pay.weixin.qq.com
        PayGateway->>PayGateway: 54. 调用微信支付API
    end
    
    PayGateway-->>User: 55. 返回支付页面/二维码
    User->>User: 56. 完成支付操作
    
    Note over PayGateway,Payment: 🔔 异步回调通知
    PayGateway->>Payment: 57. 支付成功回调
    Note right of Payment: 📚 幂等性设计<br/>🔗 martinfowler.com/articles/patterns-of-distributed-systems
    Payment->>Payment: 58. 验证签名并去重
    Payment->>Order: 59. 更新订单状态为已支付
    Payment->>MQ: 60. 发送支付成功消息
    
    par 异步处理
        MQ->>Notify: 61a. 发送通知
        Note right of Notify: 📧 消息推送<br/>📚 RabbitMQ/Kafka<br/>🔗 rabbitmq.com
        Notify->>User: 短信/邮件/Push通知
    and
        MQ->>Order: 61b. 确认订单
        Order->>Order: 更新订单：待发货
    end
    end

    %% 仓储物流阶段
    rect rgb(232, 245, 233)
    Note over Order,Logistics: 第六阶段：仓储配送
    Order->>WMS: 62. 推送发货指令
    Note right of WMS: 📦 WMS系统设计<br/>📚 仓储管理实践<br/>🔗 github.com/topics/wms
    
    WMS->>WMS: 63. 订单拆分（多仓）
    WMS->>WMS: 64. 波次拣货
    WMS->>WMS: 65. 打包称重
    WMS->>Logistics: 66. 创建物流订单
    
    Note right of Logistics: 🚚 电子面单生成<br/>📚 菜鸟/快递鸟API<br/>🔗 kdniao.com
    Logistics->>Logistics: 67. 生成运单号
    Logistics->>Logistics: 68. 打印电子面单
    Logistics-->>WMS: 69. 返回物流信息
    
    WMS->>Order: 70. 更新订单为已发货
    Order->>MQ: 71. 发送发货消息
    MQ->>Notify: 72. 通知用户已发货
    Notify->>User: 73. 发送物流信息
    
    loop 物流跟踪
        Logistics->>Logistics: 74. 更新物流轨迹
        Note right of Logistics: 🗺️ 物流轨迹追踪<br/>📚 快递100 API<br/>🔗 kuaidi100.com
        Logistics->>Order: 75. 同步物流状态
        Order->>Notify: 76. 推送物流更新
        Notify->>User: 77. 实时物流通知
    end
    
    Logistics->>Order: 78. 签收成功
    Order->>Order: 79. 更新订单：已签收
    Order->>MQ: 80. 发送签收消息
    end

    %% 订单完成阶段
    rect rgb(255, 243, 224)
    Note over User,Finance: 第七阶段：订单完成
    MQ->>Order: 81. 触发自动确认收货定时器
    Note right of Order: ⏰ 7天自动确认<br/>📚 XXL-Job定时任务<br/>🔗 xuxueli.com/xxl-job
    
    alt 用户主动确认
        User->>Web: 82a. 确认收货
        Web->>Order: 83a. 确认收货请求
    else 超时自动确认
        Order->>Order: 82b. 7天后自动确认
    end
    
    Order->>Order: 84. 订单状态：已完成
    Order->>Finance: 85. 触发结算
    Note right of Finance: 💰 T+1结算<br/>📚 财务对账系统<br/>🔗 accounting-system-design.com
    
    Finance->>Finance: 86. 计算平台佣金
    Finance->>Finance: 87. 生成结算单
    
    User->>Web: 88. 评价商品
    Web->>Product: 89. 提交评价
    Note right of Product: ⭐ UGC内容审核<br/>📚 评价系统设计<br/>🔗 review-system-architecture.com
    Product->>Product: 90. 审核并发布评价
    end

    %% 售后阶段
    rect rgb(255, 235, 238)
    Note over User,AfterSale: 第八阶段：售后服务（可选）
    opt 需要售后
        User->>Web: 91. 申请退货/换货
        Web->>AfterSale: 92. 创建售后单
        Note right of AfterSale: 🔄 售后工单系统<br/>📚 7天无理由退货<br/>🔗 消费者权益保护法
        
        AfterSale->>AfterSale: 93. 售后审核
        
        alt 审核通过
            AfterSale-->>User: 94. 审核通过，返回退货地址
            User->>Logistics: 95. 寄回商品
            Logistics->>WMS: 96. 商品入库
            WMS->>AfterSale: 97. 确认收货
            AfterSale->>Inventory: 98. 库存回补
            AfterSale->>Payment: 99. 发起退款
            Note right of Payment: 💵 原路退回<br/>📚 退款流程设计<br/>🔗 refund-process-design.com
            Payment->>PayGateway: 100. 调用退款接口
            PayGateway-->>Payment: 101. 退款成功
            Payment->>MQ: 102. 发送退款消息
            MQ->>Notify: 103. 通知用户
            Notify->>User: 104. 退款到账通知
        else 审核拒绝
            AfterSale-->>User: 94. 拒绝售后申请
        end
    end
    end

    %% 数据分析阶段
    rect rgb(227, 242, 253)
    Note over Order,Finance: 第九阶段：数据统计分析
    Note over Order,Finance: 📊 实时数据大屏<br/>📚 Flink流式计算<br/>🔗 flink.apache.org
    
    par 数据采集
        Order->>MQ: 订单数据埋点
    and
        Payment->>MQ: 支付数据埋点
    and
        Product->>MQ: 商品数据埋点
    end
    
    MQ->>Finance: 数据聚合分析
    Finance->>Finance: 生成报表<br/>（销售额/转化率/ROI等）
    Note right of Finance: 📈 BI系统<br/>📚 数据仓库建设<br/>🔗 github.com/topics/data-warehouse
    end

    Note over User,Finance: ✅ 完整交易流程结束