ai_gallery

英语| 中文

欢迎来到我的AI辅助网络开发项目！尽管具有最小的前端知识（仅有一些HTML和CSS），但我还是在Claude 3.5和GPT-4的帮助下创建了一些有趣的组件。我已经将这些组件集成到了此展示网站中。随时探索和体验！

我必须说，AI确实改变了我们编写代码的方式。

项目概述

该项目是使用静态站点生成（SSG）的React和NextJ构建的，并在Netlify上部署。它具有自动站点地图，Google Analytics（分析集成）和I18N对国际化的支持。目前，该画廊包括几个有趣的组件，我计划在AI帮助下不断增加更多内容。

算法：探索经典算法的交互式可视化，例如BFS Pathfinding，A* search，Dijkstra的算法和堆操作。

游戏：实施经典游戏，例如Gomoku（连续五个），中国国际象棋，俄罗斯方块和2048年。

其他组件：各种有趣的小部件，包括用于数据可视化的动态图表。

地方发展

欢迎每个人都为改善这些组件做出贡献。如果您缺乏前端技术背景，请不要担心 - 您可以利用AI将您的想法栩栩如生！这是本地运行此项目的简单步骤：

1. 克隆存储库：

    git clone [email protected]:selfboot/ai_gallery.git
   

2. 导航到项目目录：

    cd ai_gallery
   

3. 安装依赖项：

    pnpm install
   

4. 启动开发服务器：

    pnpm dev
   

5. 打开浏览器并访问http://localhost:3000以查看项目。

如果您沿途遇到任何问题，请尝试使用AI解决它们！

关于使用AI的思考

作为没有网络开发经验的新手，我通过该项目的AI辅助开发学到了很多实用的前端知识。最终创建我一直想制作的可视化效果真是令人难以置信。

1. 学习机会：AI帮助帮助我快速理解了React，JavaScript和现代网络开发实践的方面。
2. 解决问题：虽然AI在许多方面发挥了至关重要的作用，但仍有一些问题需要人类干预才能解决。

AI的影响

GPT-4和Claude 3.5已被证明是完全有能力的虚拟导师和配对编程合作伙伴。即使没有先前的React开发经验，他们也帮助我迅速掌握了React概念，实施复杂的逻辑，创建吸引人的UI并理解基本原则。他们是出色的编程助手，迅速引入最佳实践，设计模式和优化技术。它们有助于解决各种具有挑战性的问题，真正赢得了最佳导师的头衔。

AI的局限性

AI在推理能力方面仍然具有一些幻觉和局限性。有时，AI生成的代码包含错误或不完全满足项目要求，有时提供的解释还不够清楚。在这些情况下，您需要自行调试和解决问题。

AI-Human合作

最有效的方法是将AI用作协作工具，将其广泛的知识与个人创造力和特定项目的理解相结合，以更快，更好地完成有趣的工作。

比较GPT-4和Claude 3.5

这些是个人意见，仅供参考。两种AI模型在该项目中都起着重要的作用，每个人都具有自己的优势。我通常使用Claude 3.5进行快速原型制作和GPT-4用于解决详细问题。

• GPT-4 ：擅长提供详细的解释和处理复杂的多步任务。对于我对原因有一般理解的问题，GPT-4在给出详细提示时通常会提供良好的代码和解释。
• Claude 3.5 ：在代码生成和重构方面表现出色。考虑到一个简单的需求描述，它通常很快就会产生良好的原型。它的响应通常更简洁，直接适用，非常适合快速实施和错误修复。