ai_gallery

Englisch | 中文

Willkommen in meinem AI-unterstützten Webentwicklungsprojekt! Trotz minimaler Frontend-Kenntnisse (nur ein bisschen HTML und CSS) habe ich es geschafft, mit Hilfe von Claude 3.5 und GPT-4 einige interessante Komponenten zu erstellen. Ich habe diese Komponenten in diese Showcase -Site integriert. Fühlen Sie sich frei, es selbst zu erkunden und zu erleben!

Ich muss sagen, KI hat die Art und Weise, wie wir Code schreiben, wirklich verändert.

Projektübersicht

Dieses Projekt wird unter Verwendung von React und NextJs für die statische Site -Generierung (SSG) erstellt und auf Netlify eingesetzt. Es verfügt über eine automatische Sitemap -Generierung, die Integration von Google Analytics und die I18N -Unterstützung für die Internationalisierung. Derzeit enthält die Galerie mehrere interessante Komponenten, und ich habe vor, kontinuierlich mehr mit AI -Unterstützung hinzuzufügen.

Algorithmen: Erforschen Sie interaktive Visualisierungen klassischer Algorithmen wie BFS -Pfadfinding, A* -Suche, Dijkstra -Algorithmus und Heap -Operationen.

Spiele: Implementierung klassischer Spiele wie Gomoku (fünf in Folge), chinesischem Schach, Tetris und 2048.

Weitere Komponenten: Verschiedene interessante Widgets, einschließlich dynamischer Diagramme für die Datenvisualisierung.

Lokale Entwicklung

Jeder ist herzlich eingeladen, diese Komponenten zu verbessern. Machen Sie sich keine Sorgen, wenn Ihnen ein technischer Frontend -Hintergrund fehlt - Sie können KI nutzen, um Ihre Ideen zum Leben zu erwecken! Hier sind die einfachen Schritte, um dieses Projekt lokal auszuführen:

1. Klonen Sie das Repository:

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

2. Navigieren Sie zum Projektverzeichnis:

    cd ai_gallery
   

3. Abhängigkeiten installieren:

    pnpm install
   

4. Starten Sie den Entwicklungsserver:

    pnpm dev
   

5. Öffnen Sie Ihren Browser und besuchen Sie http://localhost:3000 um das Projekt anzuzeigen.

Wenn Sie auf dem Weg auf Probleme stoßen, verwenden Sie AI, um sie zu lösen!

Überlegungen zur Verwendung von KI

Als Anfänger ohne Webentwicklungserfahrung habe ich durch AI-unterstützte Entwicklung dieses Projekts eine Menge praktischer Frontend-Wissen gelernt. Es war unglaublich erfüllend, endlich die Visualisierungen zu erstellen, die ich schon immer machen wollte.

1. Lernmöglichkeit : Die AI -Unterstützung hat mir geholfen, Aspekte von React, JavaScript und modernen Webentwicklungspraktiken schnell zu verstehen.
2. Problemlösung : Während die KI in vielen Aspekten eine entscheidende Rolle spielte, gab es immer noch Probleme, die die menschliche Intervention mussten , um sich zu lösen.

Die Auswirkungen von AI

GPT-4 und Claude 3.5 haben sich als vollständig fähige virtuelle Mentoren und Paarprogrammierungspartner erwiesen. Auch ohne vorherige Erfahrung mit React -Entwicklung haben sie mir geholfen, reagierte Konzepte schnell zu erfassen, eine komplexe Logik zu implementieren, ansprechende Benutzeroberflächen zu erstellen und zugrunde liegende Prinzipien zu verstehen. Sie sind ausgezeichnete Programmierassistenten, die schnell Best Practices, Designmuster und Optimierungstechniken einführen. Sie tragen dazu bei, verschiedene herausfordernde Probleme zu lösen und wirklich den Titel der besten Mentoren zu verdienen.

Einschränkungen von AI

KI hat immer noch einige Halluzinationen und Einschränkungen in der Argumentationsfähigkeit. Manchmal enthält AI-generierte Code Fehler oder erfüllt die Projektanforderungen nicht vollständig, und manchmal sind die bereitgestellten Erklärungen nicht klar genug. In diesen Situationen müssen Sie selbst Probleme debuggen und lösen.

KI-Human-Zusammenarbeit

Der effektivste Ansatz ist es, KI als kollaboratives Instrument zu nutzen und sein großes Wissen mit persönlicher Kreativität und projektspezifischem Verständnis zu kombinieren, um interessante Arbeiten schneller und besser zu vervollständigen.

Vergleich von GPT-4 und Claude 3.5

Dies sind persönliche Meinungen und nur als Referenz. Beide KI -Modelle spielten in diesem Projekt eine wichtige Rolle, jeweils mit eigenen Stärken. Normalerweise verwende ich Claude 3.5 für schnelles Prototyping und GPT-4 für die Lösung detaillierter Probleme.

• GPT-4 : Excels, detaillierte Erklärungen und Umgang mit komplexen, mehrstufigen Aufgaben zu liefern. Für Themen, bei denen ich ein allgemeines Verständnis der Sache habe, bietet GPT-4 bei detaillierten Aufforderungen häufig einen guten Code und Erklärungen.
• Claude 3.5 : Funktioniert außergewöhnlich gut in der Codegenerierung und Refactoring. Bei einer einfachen Anforderung Beschreibung erzeugt es oft schnell einen guten Prototyp. Die Antworten sind normalerweise prägnanter und direkt anwendbar, was es für eine schnelle Implementierung und Fehlerbehebung hervorragend macht.