# AI培训网站
## 项目概述
这是一个为新员工设计的交互式AI历史培训网站,全面介绍了人工智能的发展历程、主要技术突破、著名模型以及框架工具。网站采用现代化的响应式设计,提供丰富的视觉元素和互动体验,帮助新员工快速了解AI领域的过去、现在与未来。
## 项目结构
```
ai-history-training/
├── index.html # 主页面结构和内容
├── styles.css # 样式表
├── scripts.js # 交互功能脚本
├── images/ # 图片资源目录
└── README.md # 项目说明文档
```
## 主要功能与特点
### 1. 内容板块
- **AI历史时间线**:按时间顺序展示AI发展的关键里程碑
- 早期历史 (1940s-1950s)
- AI寒冬 (1970s-1980s)
- 现代AI崛起 (1990s-2000s)
- 大数据时代 (2000s-2010s)
- 深度学习革命 (2010s至今)
- **各大公司模型**:介绍主流科技公司的大语言模型
- Google (PaLM, Gemini等)
- Microsoft/OpenAI (GPT系列)
- Anthropic (Claude系列)
- Meta (LLaMA系列)
- 国内知名模型 (文心一言、通义千问等)
- **其他知名AI模型**:包括向量嵌入模型、图像生成模型、计算机视觉模型、音频模型、代码模型等
- **AI关键技术**:详细讲解AI领域的核心技术
- 知识蒸馏 (Knowledge Distillation)
- 检索增强生成 (RAG)
- 微调技术 (Fine-tuning)
- AI生成内容 (AIGC)
- 提示工程 (Prompt Engineering)
- **AI框架与工具**:全面介绍AI开发常用框架和工具
- 主流深度学习框架 (PyTorch, TensorFlow, JAX等)
- 模型格式与运行时 (ONNX, GGUF, SafeTensors等)
- 高级工具库 (Transformers, Sentence-Transformers等)
- 交互式框架体系图,直观展示各层次技术关系
### 2. 设计特点
- **响应式布局**:适配各种屏幕尺寸的设备
- **现代UI设计**:卡片式布局、渐变色彩、平滑过渡效果
- **交互式元素**:
- 滚动触发的动画效果
- 悬停高亮
- 平滑滚动导航
- SVG框架图的序列动画
- **可访问性考虑**:良好的色彩对比度和语义化HTML结构
### 3. 技术亮点
- **纯原生技术**:使用HTML5、CSS3和原生JavaScript构建
- **高性能动画**:使用CSS过渡和变换实现流畅动画
- **IntersectionObserver API**:实现高效的滚动检测和按需加载
- **SVG交互图表**:使用可缩放矢量图形展示AI框架体系
- **CSS变量**:实现主题配色的统一管理
## 使用指南
### 本地运行
1. 克隆或下载本项目到本地
2. 直接在浏览器中打开`index.html`文件即可查看网站
3. 不需要安装任何依赖或运行任何服务器
### 导航方式
- 通过顶部导航栏快速跳转到不同章节
- 使用右下角的回到顶部按钮返回页面开始位置
- 滚动浏览各个时间线和内容卡片
## 适用场景
- 新员工入职培训
- AI知识普及教育
- 技术团队内部参考资料
- 对AI感兴趣的人群自学
## 未来规划
- 添加互动测验,强化学习效果
- 增加深色模式支持
- 扩展更多AI应用案例
- 增加个性化学习路径
- 支持多语言版本
## 贡献指南
欢迎对本项目进行改进和扩展,您可以通过以下方式参与:
1. 提交内容更新,保持AI知识的时效性
2. 优化用户界面和交互体验
3. 修复潜在问题或错误
4. 提出新的功能建议