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 ：在代碼生成和重構方面表現出色。考慮到一個簡單的需求描述，它通常很快就會產生良好的原型。它的響應通常更簡潔，直接適用，非常適合快速實施和錯誤修復。