ai_gallery

Anglais | 中文

Bienvenue dans mon projet de développement Web assisté par AI! Malgré les connaissances minimales du frontend (juste un peu de HTML et CSS), j'ai réussi à créer des composants intéressants à l'aide de Claude 3.5 et GPT-4. J'ai intégré ces composants dans ce site de vitrine. N'hésitez pas à l'explorer et à en faire l'expérience vous-même!

Je dois dire que l'IA a vraiment transformé la façon dont nous écrivons du code.

Aperçu du projet

Ce projet est construit à l'aide de React et NextJS pour la génération de sites statiques (SSG) et est déployé sur netlify. Il dispose d'une génération automatique du site de site, d'une intégration Google Analytics et d'une prise en charge i18n pour l'internationalisation. Actuellement, la galerie comprend plusieurs composants intéressants, et je prévois d'ajouter continuellement plus avec l'aide de l'IA.

Algorithmes: explorer les visualisations interactives des algorithmes classiques tels que BFS Pathfinding, A * Search, l'algorithme de Dijkstra et les opérations de tas.

Jeux: Mise en œuvre de jeux classiques comme Gomoku (cinq conséquences), les échecs chinois, Tetris et 2048.

Autres composants: divers widgets intéressants, y compris des graphiques dynamiques pour la visualisation des données.

Développement local

Tout le monde est invité à contribuer à l'amélioration de ces composants. Ne vous inquiétez pas si vous n'avez pas de formation technique frontale - vous pouvez tirer parti de l'IA pour donner vie à vos idées! Voici les étapes simples pour exécuter ce projet localement:

1. Clone le référentiel:

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

2. Accédez au répertoire du projet:

    cd ai_gallery
   

3. Installez les dépendances:

    pnpm install
   

4. Démarrer le serveur de développement:

    pnpm dev
   

5. Ouvrez votre navigateur et visitez http://localhost:3000 pour afficher le projet.

Si vous rencontrez des problèmes en cours de route, essayez d'utiliser l'IA pour les résoudre!

Réflexions sur l'utilisation de l'IA

En tant que novice sans expérience de développement Web, j'ai appris beaucoup de connaissances pratiques frontales grâce au développement assisté par l'IA de ce projet. Il a été incroyablement satisfaisant de créer enfin les visualisations que j'ai toujours voulu faire.

1. Opportunité d'apprentissage : L'aide de l'IA m'a aidé à comprendre rapidement les aspects de la réact, des pratiques de développement Web modernes et modernes.
2. Résolution de problèmes : Bien que l'IA ait joué un rôle crucial dans de nombreux aspects, il y avait encore des problèmes qui nécessitaient une intervention humaine pour résoudre.

L'impact de l'IA

GPT-4 et Claude 3.5 se sont avérés être des mentors virtuels et des partenaires de programmation en paire. Même sans l'expérience de développement de réaction préalable, ils m'ont aidé à saisir rapidement les concepts React, à mettre en œuvre une logique complexe, à créer des UIS attrayantes et à comprendre les principes sous-jacents. Ce sont d'excellents assistants de programmation, introduisant rapidement les meilleures pratiques, les modèles de conception et les techniques d'optimisation. Ils aident à résoudre divers problèmes difficiles, gagnant vraiment le titre de meilleurs mentors.

Limites de l'IA

L'IA a encore des hallucinations et des limites de capacité de raisonnement. Parfois, le code généré par l'IA contient des bogues ou ne répond pas pleinement aux exigences du projet, et parfois les explications fournies ne sont pas assez claires. Dans ces situations, vous devez déboguer et résoudre les problèmes par vous-même.

Collaboration AI-humaine

L'approche la plus efficace consiste à utiliser l'IA comme outil de collaboration, combinant ses vastes connaissances avec la créativité personnelle et la compréhension spécifique au projet pour terminer un travail intéressant plus rapidement et mieux.

Comparaison GPT-4 et Claude 3.5

Ce sont des opinions personnelles et pour référence uniquement. Les deux modèles d'IA ont joué des rôles importants dans ce projet, chacun avec ses propres forces. J'utilise généralement Claude 3.5 pour le prototypage rapide et le GPT-4 pour résoudre des problèmes détaillés.

• GPT-4 : excelle à fournir des explications détaillées et des tâches complexes et complexes en plusieurs étapes. Pour les problèmes où j'ai une compréhension générale de la cause, le GPT-4 fournit souvent un bon code et des explications lorsqu'il est donné des invites détaillées.
• Claude 3.5 : fonctionne exceptionnellement bien dans la génération de code et la refactorisation. Compte tenu d'une description simple des exigences, il produit souvent rapidement un bon prototype. Ses réponses sont généralement plus concises et directement applicables, ce qui le rend idéal pour l'implémentation rapide et la fixation des bogues.