Skip to content

README_CN.md

Latest commit

 

History

History
460 lines (329 loc) · 14.5 KB

README_CN.md

File metadata and controls

460 lines (329 loc) · 14.5 KB
Raw

Bude Global Neuro-Chain (创新神经链)

English | தமிழ் | हिन्दी | 简体中文 | Español

从原始火种到通用智能：人类智慧的神经蓝图

创新网络可视化平台

React Vite D3 TypeScript License: GPL Live Demo Open Source Contributions Welcome Good First Issues

GitHub stars GitHub forks

→ 探索在线演示

将人类创新历程呈现为一个非线性网络，直观展示从"火的发现"到"通用人工智能 (AGI)"的技术演进与共生关系。本项目由 Bude Global 提供技术支持。

Neuro Chain 预览图

📋 目录

社区

本项目是重新思考我们如何学习、构建和分享知识这一更广泛努力的一部分。

灵感来源

本项目的灵感来自 Google DeepMind 的纪录片 《思维游戏》(The Thinking Game)，该纪录片探讨了包括人类智能和人工智能在内的思维系统如何随时间演进和连接。

如果您对本项目背后的哲学感兴趣，这是一个很好的起点。

🌟 关于 Bude Global

Bude Global 专注于复杂创新网络与技术依赖关系的可视化。该 Neuro-Chain 平台展示了我们将数据转化为直观、交互式视觉体验的能力。

这是什么

创新不是沿着直线发生的。想法相互连接、组合并建立在彼此之上，而时间线无法捕捉这些方式。轮子催生了马车,马车催生了贸易路线，贸易路线催生了文化交流，文化交流激发了新想法——突然之间你就看到了印刷术的诞生。

本项目将这一现实可视化:一个网络，其中每个节点代表一个突破、发现或技术，连接显示它们如何跨越时间和空间相互影响。

这是一个用于探索、学习和重新思考我们如何理解进步本身的工具。

为什么重要

我们被教导将历史视为一系列事件。但创新是一个系统——混乱、相互关联且涌现的。当你将其视为网络时，模式就会显现：

  • 古代工具如何促成现代计算
  • 为什么某些突破只有在其他突破之后才成为可能
  • 看似无关的领域之间的隐藏依赖关系
  • 来自不同文化和时代的想法如何交叉传播

本项目使这些关系可见。它面向任何对我们如何走到今天——以及我们下一步可能去往何处——感到好奇的人。

🚀 核心特性

  • 智能搜索：支持节点实时搜索，并伴有即时相机聚焦效果
  • 像素级还原：1:1 还原原始 HTML 实现的视觉细节
  • 数据驱动：所有创新数据均通过 JSON 文件独立管理，易于编辑
  • 交互式画布：支持平移、缩放，自由探索创新网络
  • 实时数据编辑器：可在线直接编辑节点、边缘、集群信息及描述
  • 性能优化：采用 React 记忆化（Memoization）技术与高效渲染引擎，可支持 10,000+ 节点
  • 纯静态部署：无需服务器后端，可部署在任何托管平台
  • SEO 友好：完整的元标签（Meta Tags）配置，优化搜索引擎及社交媒体分享体验
  • 移动端适配：针对各种屏幕尺寸进行了响应式优化

核心功能

视觉智能

  • 动态信号传播 - 点击任何节点以观察知识沿历史连接的传输
  • 多物理布局引擎 - 实时切换力导向、径向和时间布局
  • 12 种可视化主题 - 自定义视觉范式，包括神经、赛博朋克、宇宙和蓝图
  • 实时编辑 - 无需重启应用即可修改节点、边缘和集群

数据架构

  • 基于 JSON 的知识图谱 - 整个历史存储在可编辑、版本控制的 JSON 文件中
  • 模式驱动演进 - 可扩展的元数据系统，用于时间、地理空间和影响分析
  • 导入/导出标准 - 兼容 CSV、GraphML 和 Neo4j 格式
  • 实时数据编辑器 - 浏览器内 JSON 编辑器，带验证和预览功能

性能与可扩展性

  • GPU 加速渲染 - 基于 Canvas 的引擎，支持 10,000+ 节点
  • 增量加载 - 大型历史数据集的动态数据流
  • 记忆化组件 - React 优化，实现 60fps 交互
  • 零依赖核心 - 自包含的物理和渲染引擎

研究能力

  • 时间过滤 - 按世纪或技术时代隔离创新
  • 依赖分析 - 可视化前向和后向技术链接
  • 影响评分 - 创新重要性的算法评估
  • 路径查找算法 - 发现领域之间最短的知识路径

快速开始

前置要求

  • Node.js（推荐 v16 或更高版本）
  • npm 或 yarn

安装

# 克隆仓库
git clone https://github.com/BUDEGlobalEnterprise/bude-global-neuro-chain-react.git
cd bude-global-neuro-chain-react

# 安装依赖
npm install

本地运行

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

# 预览生产版本
npm run preview

在浏览器中打开 http://localhost:5173 即可开始探索。

🏗️ 项目结构

bude-global-neuro-chain-react/
├── public/
├── src/
│   ├── components/          # React 组件
│   │   ├── CanvasNetwork.jsx
│   │   ├── TitleBlock.jsx
│   │   ├── Legend.jsx
│   │   ├── Panel.jsx
│   │   ├── ClusterView.jsx
│   │   ├── DataEditor.jsx
│   │   ├── Controls.jsx
│   │   └── Tooltip.jsx
│   ├── data/                # JSON 数据文件
│   │   ├── clusters.json    # 9 大集群定义
│   │   ├── nodes.json       # 78 个创新节点
│   │   ├── edges.json       # 113 条连接关系
│   │   └── descriptions.json # 集群详细描述
│   ├── styles/              # CSS 样式模块
│   ├── App.jsx              # 主应用入口
│   └── main.jsx             # 渲染入口
├── vite.config.js
└── package.json

🎮 操作指南

导航

  • 鼠标拖拽 — 平移画布
  • 鼠标滚轮 — 放大/缩小视图
  • 悬停节点 — 显示详细信息的提示框
  • 点击图例项 — 聚焦至特定集群
  • ⟲ 按钮 — 重置视角至原点
  • ⏸/▶ 按钮 — 暂停或恢复动画效果
  • ↓ 按钮 — 将所有数据导出为 JSON 文件

编辑数据

右侧面板包含一个实时数据编辑器，您可以：

  1. 选择任何数据文件（nodes、edges、clusters、descriptions）
  2. 直接编辑 JSON
  3. 点击"应用更改"以实时查看更新

所有更改在应用前都会进行验证。

📊 数据架构

clusters.json

{
  "cluster_id": {
    "color": "#十六进制颜色",
    "label": "显示名称"
  }
}

nodes.json

[
  {
    "id": "唯一ID",
    "label": "显示标签",
    "cluster": "所属集群ID",
    "x": 0,
    "y": 0,
    "size": 16
  }
]

edges.json

[
  {
    "source": "源节点ID",
    "target": "目标节点ID",
    "type": "forward (正向)" | "backlink (回溯)"
  }
]

descriptions.json

{
  "cluster_id": {
    "title": "集群标题",
    "body": "HTML 描述",
    "links": ["→ 目标"],
    "backlinks": ["← 来源"]
  }
}

🤝 贡献指南

本项目旨在共同探索人类创新如何演进。我们欢迎来自开发者、设计师、历史学家、教育工作者、研究人员、作家和好奇思考者的贡献。代码在这里很重要——但想法、结构、清晰度和讲故事同样重要。

如果您觉得这个概念有趣，您就已经有资格成为贡献者。

🧭 贡献方式

没有单一的"正确"帮助方式。一些有意义的贡献方式包括：

🔧 开发与工程

  • 改进更大更密集图形的性能
  • 重构组件以提高清晰度和可维护性
  • 添加交互、动画或布局改进
  • 修复错误或边缘情况

🎨 UI/UX 与可视化

  • 改进节点布局、间距和标签
  • 尝试缩放、分组或过滤想法
  • 使可视化对首次使用者更直观
  • 提出表示创新的新视觉隐喻

🧠 内容与知识

  • 添加新的创新节点（技术、想法、发现）
  • 改进节点之间的关系（依赖关系、影响）
  • 建议更好的命名、分类或时间线
  • 在有帮助的地方提供历史或概念背景

📖 文档与可访问性

  • 改进 README 的清晰度或入门步骤
  • 为复杂逻辑添加注释或解释
  • 改进键盘导航、颜色对比度或屏幕阅读器支持
  • 帮助使项目对非开发人员易于理解

🌐 社区与推广

  • 翻译成其他语言
  • 与相关社区分享项目
  • 帮助新贡献者入门

🚀 如何贡献（分步指南）

  1. Fork 仓库 在 GitHub 上创建项目的自己副本。

  2. 创建新分支 使用与您的更改相关的描述性名称：

    git checkout -b feature/your-idea

  3. 进行更改 在可能的情况下保持更改的专注和增量。

  4. 本地测试 确保应用运行且您的更改按预期运行。

  5. 提交 Pull Request 在您的 PR 描述中，解释：

    • 您更改了什么
    • 为什么进行更改
    • 任何值得注意的设计或技术决策

维护者将审查您的 PR，可能会建议改进。这是协作的一部分，而不是批评。

🏷️ 问题与任务选择

如果您不确定从哪里开始，请寻找标记为以下标签的问题：

  • good first issue — 适合初学者的任务
  • help wanted — 需要社区输入的任务
  • ui / visualization — 以设计为重点的工作

如果您有未列出的想法，请随时在开始工作之前开启一个问题进行讨论。

🌱 第一次贡献？

我们特别欢迎您。

开源可能让人感到intimidating，但本项目特意设计为一个安全的学习和实验场所。从小处开始：

  • 修复拼写错误
  • 改进标签或工具提示
  • 添加单个创新节点
  • 在问题中提问

没有"小"贡献——每一个都有助于塑造网络。

🧠 协作理念

  • 保持尊重和建设性
  • 假定善意
  • 尽早提问
  • 公开分享想法

本项目通过协作、好奇心和深思熟虑的迭代成长——而不是完美。

🚢 项目部署

这是一个可以部署在任何地方的静态站点：

Cloudflare Pages

npm run build
# 将 dist/ 目录上传至 Cloudflare Pages

Netlify

npm run build
# 通过 Netlify CLI 或拖放 dist/ 文件夹进行部署

Vercel

npm run build
# 使用 Vercel CLI 部署：vercel --prod

GitHub Pages

npm run build
# 将 dist/ 文件夹推送到 gh-pages 分支

🧬 Neuro-Chain 模型理念

该可视化方案将"发明创造"视为一个非线性网络而非单纯的线性时间线：

  • 正向链接 (Forward Links) — 代表直接的技术演进与依赖
  • 回溯链接 (Backlinks) — 代表反向的技术关联（以虚线表示）
  • 核心枢纽 (Hubs) — 高连接度的节点，如"火"、"电力"、"AGI"
  • 集群 (Clusters) — 按主题分组（能源、工具、生物、信息等）
  • 开放式结局 — AGI 导向未知的未来发明 (∞)

网络结构揭示了传统时间线中看不到的模式：为什么某些发明聚集在一起，哪些突破充当了催化剂，以及看似遥远的想法如何相互影响。

技术说明

性能

  • 使用 React.memo 进行组件记忆化
  • 通过 Map 数据结构实现 O(1) 节点查询
  • 单个 requestAnimationFrame 循环用于渲染
  • 代码分割和 vendor chunk 分离
  • 生产构建使用 Terser 压缩

安全性

  • 使用 DOMPurify 对所有 HTML 内容进行清理
  • 不使用 eval()
  • 符合 CSP（无内联脚本）
  • 带验证的 XSS 安全 JSON 解析

致谢

特别感谢 @aravind-govindhasamy 对本项目的贡献。

开源协议

GNU 通用公共许可证 第3版
可自由用于开源项目的使用、修改和分发。
详见 LICENSE。

最后的想法

创新是一个网络，而不是时间线。本项目是尝试以这种方式看待它——并构建帮助他人也这样看待它的工具。

如果这个想法与您产生共鸣，我们很乐意在这里见到您。