ai_gallery

Inglés | 中文

¡Bienvenido a mi proyecto de desarrollo web asistido por AI! A pesar de tener un conocimiento mínimo de frontend (solo un poco de HTML y CSS), he logrado crear algunos componentes interesantes con la ayuda de Claude 3.5 y GPT-4. He integrado estos componentes en este sitio de exhibición. ¡Siéntase libre de explorar y experimentarlo usted mismo!

Debo decir que la IA realmente ha transformado la forma en que escribimos el código.

Descripción general del proyecto

Este proyecto se construye utilizando React y NextJS para la generación de sitios estática (SSG) y se implementa en Netlify. Cuenta con generación automática de mapa del sitio, integración de Google Analytics y soporte I18N para la internacionalización. Actualmente, la galería incluye varios componentes interesantes, y planeo agregar continuamente más con asistencia de IA.

Algoritmos: Explore las visualizaciones interactivas de algoritmos clásicos como BFS PathFinding, A* Search, Dijkstra's Algorithm y Operaciones de montón.

Juegos: Implementación de juegos clásicos como Gomoku (cinco seguidos), China Chess, Tetris y 2048.

Otros componentes: varios widgets interesantes, incluidos gráficos dinámicos para la visualización de datos.

Desarrollo local

Todos son bienvenidos a contribuir a mejorar estos componentes. No se preocupe si carece de antecedentes técnicos frontend: ¡puede aprovechar la IA para dar vida a sus ideas! Aquí están los simples pasos para ejecutar este proyecto localmente:

1. Clon el repositorio:

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

2. Navegue al directorio del proyecto:

    cd ai_gallery
   

3. Instalar dependencias:

    pnpm install
   

4. Inicie el servidor de desarrollo:

    pnpm dev
   

5. Abra su navegador y visite http://localhost:3000 para ver el proyecto.

Si encuentra algún problema en el camino, ¡intente usar AI para resolverlos!

Reflexiones sobre el uso de AI

Como novato sin experiencia en desarrollo web, he aprendido muchos conocimientos prácticos de frontend a través del desarrollo asistido por este proyecto. Ha sido increíblemente satisfactorio crear finalmente las visualizaciones que siempre he querido hacer.

1. Oportunidad de aprendizaje : la asistencia de IA me ayudó a comprender rápidamente los aspectos de React, JavaScript y las prácticas modernas de desarrollo web.
2. Resolución de problemas : si bien la IA jugó un papel crucial en muchos aspectos, todavía había problemas que requerían que la intervención humana se resolviera.

El impacto de la IA

GPT-4 y Claude 3.5 han demostrado ser mentores virtuales y socios de programación de pares. Incluso sin la experiencia previa en el desarrollo de reaccionamiento, me ayudaron a comprender rápidamente los conceptos de reacción, implementar una lógica compleja, crear UI atractivas y comprender los principios subyacentes. Son excelentes asistentes de programación, introducen rápidamente las mejores prácticas, patrones de diseño y técnicas de optimización. Ayudan a resolver varios problemas desafiantes, realmente ganando el título de los mejores mentores.

Limitaciones de la IA

La IA todavía tiene algunas alucinaciones y limitaciones en la capacidad de razonamiento. A veces, el código generado por IA contiene errores o no cumple completamente los requisitos del proyecto, y a veces las explicaciones proporcionadas no son lo suficientemente claras. En estas situaciones, debe depurar y resolver problemas por su cuenta.

Colaboración ai-humana

El enfoque más efectivo es usar la IA como una herramienta de colaboración, combinando su vasto conocimiento con la creatividad personal y la comprensión específica del proyecto para completar el trabajo interesante más rápido y mejor.

Comparando GPT-4 y Claude 3.5

Estas son opiniones personales y solo como referencia. Ambos modelos de IA jugaron papeles importantes en este proyecto, cada uno con sus propias fortalezas. Por lo general, uso Claude 3.5 para prototipos rápidos y GPT-4 para resolver problemas detallados.

• GPT-4 : Excelente en proporcionar explicaciones detalladas y manejo de tareas complejas de múltiples pasos. Para los problemas en los que tengo una comprensión general de la causa, GPT-4 a menudo proporciona un buen código y explicaciones cuando reciben indicaciones detalladas.
• Claude 3.5 : funciona excepcionalmente bien en la generación y refactorización de código. Dada una descripción de requisito simple, a menudo produce rápidamente un buen prototipo. Sus respuestas suelen ser más concisas y directamente aplicables, por lo que es excelente para la implementación rápida y la solucionamiento de errores.