# 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. 提出新的功能建议