介绍

HTTP状态猫是一个猫咪主题的HTTP状态码图解网站。通过可爱的猫咪形象来帮助用户理解和记忆HTTP状态码。

访问地址

1. http-ai-cats.vercel.app
2. 国内访问：http-ai-cats.cn

项目背景

启发于http.cat，原网站的功能同样是用猫咪图片来解析状态码的含义

本项目在原网站的基础上增加了几点优化：

• 图片种类：不再使用现实场景中的猫咪，而是通过文生图模型生成猫咪图片，并将其与状态码进行关联
• 交互优化：
  • 将所有状态码按含义分为五组，方便用户按组查找
  • 增加状态码搜索功能，用户可以通过顶部输入框快速查找对应状态码
  • 修改卡片点击交互，点击后不再进入详情页，而是停留在当前页面，并展示对应状态码的解释弹窗
  • 增加状态码的极客描述，方便用户快速理解状态码含义

技术栈

• 网页布局设计: v0.dev
• 文生图工具：Midjourney， DALL-E 3
• 图片描述生成：Coze工作流
• IDE: Cursor
• 网页技术栈：Next.js, radix-UI，TailwindCSS
• 部署平台：Vercel

开发进度

• 完成网页基本页面布局和样式
• 完成17个主要状态码的图片描述和生成
• 增加新的交互功能：页面刷新时随机展示一张不同的状态码图片
• 补全剩余状态码的图片描述: 17/75
• 补全剩余状态码的图片生成: 17/75
• 实现公共API接口，方便用户快速查询状态码含义
• 增加懒加载功能
• 增加分组的组名含义

如何参与贡献？

目前欢迎以下形式的贡献：

• 提交状态码的图片描述
  • 如果你觉得现有的图片描述不够有趣，或者有更好的描述方式，欢迎提交新的图片描述
  • 请在理解状态码含义基础上，保证描述与猫咪相关，尽可能发挥想象，提交更有趣的描述
  • 可以考虑也通过工作流生成描述
  • 提交的描述会经过审核，通过后会合并到主分支
• 提交新的状态码图片
  • 请使用AI模型生成图片，目前不接受现实场景的猫咪图片或者网络上的图片
  • 请保证生成的图片的prompt是基于项目中现有的图片描述
  • 提交的图片会经过审核，通过后会合并到主分支
• 网页交互和性能优化
  • 如果你有更好的交互设计或者优化网站性能的想法，欢迎提交PR

感谢以下所有贡献者

• 待补充

联系我

• 如果你有任何问题或者建议，欢迎提交issue或者直接联系我