AI时代计算机认知系统

一个面向零基础到 AI 工程入门者的交互式认知工具。它不是文章课程，而是用可点击图形帮助用户看懂 Python、执行模型和 AI Agent 的运行方式。

• 在线访问：https://qinxujunai.github.io/ai-cognitive-system/
• GitHub 仓库：https://github.com/qinxujunai/ai-cognitive-system

项目结构设计

AI_Knowledge_System/
  frontend/
    index.html
    package.json
    src/
      main.jsx        # React 应用与可视化组件
      concepts.js     # 概念节点、步骤、关系数据
      styles.css      # 产品界面与响应式样式
  backend/
    app.py            # 预留后端入口
  knowledge_graph/    # 后续知识图谱数据扩展
  docs/               # 后续设计/教学说明

核心页面设计

• 左侧：按模块分组的概念列表，点击切换概念。
• 右侧顶部：当前概念、目标动作和简短解释。
• 右侧主体：左边代码执行观察器，右边 SVG 可视化画布。
• 底部：最小心智模型和知识网络跳转。

每个概念都有独立地址：#/concept/python-variables、#/concept/agent-loop 等。

数据结构设计

核心数据在 frontend/src/concepts.js：

• conceptGroups：侧边栏分组。
• concepts：概念节点。
• relationEdges：全局知识关系。

概念节点结构：

{
  id,
  title,
  module,
  icon,
  diagram,
  short,
  goal,
  code: [],
  steps: [{ label, visual, explain }],
  model: [{ title, text }],
  related: []
}

本地运行

cd frontend
npm install
npm run dev

然后打开 Vite 输出的本地地址。

GitHub Pages 部署

推送到 main 后，GitHub Actions 会自动构建 frontend 并发布 frontend/dist 到 Pages。

MVP 范围

• Python 基础概念：变量 / 函数 / 对象。
• 执行模型可视化：代码行、时间线、调用栈、内存引用。
• AI Agent 基础：目标、思考、工具调用、反馈循环。
• 额外放入 LLM、Workflow、RAG 作为可点击扩展节点。

后续扩展路线

1. 加入可编辑代码沙盒：用户改一行代码，图形同步变化。
2. 增加更多 Python 场景：循环、条件、类、异常、模块导入。
3. 给 Agent 加真实工具模拟：搜索、读文件、写入结果。
4. 把 knowledge_graph 接入后端，支持概念搜索和学习路径推荐。
5. 增加练习模式：让用户预测下一步状态，再显示答案。