🤖 HAPO: Human-assisted Action Preference Optimization

这是一个关于机器人策略学习研究的学术网站，展示了通过人类辅助动作偏好优化来改进视觉-语言-动作(VLA)模型的方法。

✨ 网站特性

🎨 现代化设计

• 渐变背景: 使用现代渐变色彩搭配，提升视觉效果
• 动画效果: 添加流畅的页面加载和滚动动画
• 响应式设计: 支持桌面和移动设备的完美显示
• 玻璃拟态: 使用半透明效果和模糊背景，营造现代感

🚀 交互功能

• 页面加载动画: 优雅的加载过渡效果
• 滚动进度条: 显示页面阅读进度
• 返回顶部按钮: 便捷的页面导航
• 悬停效果: 丰富的鼠标交互反馈
• 平滑滚动: 流畅的页面内跳转

📱 用户体验优化

• 视觉层次: 清晰的内容组织和视觉引导
• 彩色图标: 为不同章节添加特色图标
• 高亮框: 重要内容的视觉强调
• 现代排版: 优化的字体和间距设计

🛠️ 技术栈

• HTML5: 语义化结构
• CSS3: 现代样式和动画
• JavaScript: 交互功能实现
• Bulma: CSS框架基础
• Font Awesome: 图标库
• Google Fonts: 字体优化

📁 项目结构

hapo_website/
├── index.html          # 主页面文件
├── static/            
│   ├── css/
│   │   └── index.css   # 主样式文件
│   ├── js/             # JavaScript文件
│   ├── images/         # 图片资源
│   └── videos/         # 视频资源
└── README.md           # 项目说明

🎯 主要改进

1. 视觉设计升级

• 添加了现代化的渐变背景
• 美化了导航栏和按钮样式
• 改进了卡片和内容区域的设计
• 增强了图片的视觉效果

2. 交互体验提升

• 添加页面加载动画
• 实现滚动进度指示
• 增加返回顶部功能
• 优化了悬停和点击效果

3. 内容组织优化

• 为各个章节添加了彩色图标
• 改进了文本层次结构
• 添加了研究标签展示
• 美化了重要内容的高亮显示

4. 响应式优化

• 确保在不同屏幕尺寸下的良好显示
• 优化了移动设备的使用体验
• 调整了字体大小和间距

🚀 快速开始

1. 直接在浏览器中打开 index.html 文件
2. 或使用本地服务器：

   # 使用 Python
   python -m http.server 8000
   
   # 使用 Node.js
   npx serve .

3. 在浏览器中访问 http://localhost:8000

📝 研究内容

本网站展示的HAPO方法包含两个核心组件：

1. 人机协作部署框架: 实现可靠的故障修正和交互轨迹收集
2. 动作偏好优化过程: 通过自适应重加权算法优化VLA模型

🎨 色彩方案

• 主色调: 蓝紫渐变 (#667eea → #764ba2)
• 强调色: 粉橙渐变 (#f093fb → #f5576c)
• 辅助色: 天蓝 (#4a90e2)、薰衣草 (#7b68ee)、珊瑚红 (#ff6b6b)

📱 浏览器支持

• Chrome (推荐)
• Firefox
• Safari
• Edge

📄 许可证

本网站基于 Creative Commons Attribution-ShareAlike 4.0 International License 开源。

---

如果您觉得这个设计有用，欢迎给个 ⭐ 支持！