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

# 3D机房管理系统 这是一个使用JavaScript和Three.js实现的3D机房可视化管理系统。该系统提供了一个直观的3D界面，用于监控和管理数据中心的服务器和设备。 ## 功能特点 - 3D机房场景渲染 - 机架和服务器的可视化展示 - 空调系统模拟与冷风效果 - 设备状态监控 - 交互式设备信息查询（点击设备显示详情） ## 技术栈 - HTML5 / CSS3 - JavaScript - Three.js (3D渲染库) ## 使用方法 1. 打开index.html文件在浏览器中运行 2. 使用鼠标进行场景导航： - 左键点击并拖动：旋转视角 - 右键点击并拖动：平移视角 - 滚轮：缩放视角 3. 点击服务器或空调设备查看详细信息 ## 项目结构 ``` datacenter-3d-visualization/ │ ├── index.html # 主HTML入口 ├── css/ │ └── style.css # 样式表 │ ├── js/ │ ├── main.js # 主应用逻辑 │ ├── racks.js # 机架和服务器相关代码 │ └── airconditioners.js # 空调系统相关代码 │ └── README.md # 项目说明文档