Sitio Web de Extracción y Traducción de Texto de PDF

Una aplicación basada en React que permite a los usuarios cargar archivos PDF, extraer el contenido de texto y traducirlo del inglés al español utilizando i18next.

Descripción del Proyecto

Este proyecto demuestra las capacidades del desarrollo asistido por IA utilizando Cline para construir un sitio web funcional con las siguientes características:

• Funcionalidad de carga de archivos PDF
• Extracción de texto del PDF cargado
• Traducción del texto extraído entre inglés y español

Tabla de Contenidos

1. Requisitos Previos
2. Instalación
3. Configuración de Cline
4. Modo Plan vs. Act
5. Flujo de Trabajo de Desarrollo
6. Implementación del Proyecto
7. Ejecución de la Aplicación

Requisitos Previos

Antes de comenzar, asegúrate de tener instaladas las siguientes herramientas:

• Node.js (14.0.0 o posterior)
• npm (6.14.0 o posterior)
• Visual Studio Code
• Extensión Cline para VS Code

Instalación

1. Instala Visual Studio Code si aún no lo tienes:

   • Descárgalo desde https://code.visualstudio.com/
   • Sigue las instrucciones de instalación para tu sistema operativo

2. Instala la Extensión Cline:

   • Abre VS Code
   • Ve a Extensiones (Ctrl+Shift+X o Cmd+Shift+X)
   • Busca "Cline"
   • Haz clic en "Instalar"
   • Sigue las instrucciones de configuración para autenticar la extensión

3. Extensiones Adicionales para VS Code (Opcionales pero Recomendadas):

   • ESLint
   • Prettier
   • React Developer Tools

Interfaz de Cline

Modo Plan vs. Act

Cline ofrece dos modos para diferentes etapas del desarrollo:

Modo Plan

En este modo, Cline te ayuda a planificar la arquitectura, estructura de componentes y flujo de datos, además de analizar requisitos y resolver dudas antes de escribir código.

Modo Act

Este modo se enfoca en la implementación. Cline ejecuta acciones, genera código, implementa características, depura errores y organiza archivos en tu proyecto.

Es buena práctica no habilitar auto-approvals a operaciones que modifiquen archivos o accedan recursos externos.

Carpeta .clinerules/

De acuerdo con la documentación de Cline sobre prompting, los archivos .clinerules efectivos deben proporcionar un contexto y objetivos claros. Siguiendo estas pautas, crea una carpeta .clinerules en la raíz de tu proyecto con contenido como:

ai-assisted-build-a-website/
└── .clinerules/
    ├── 00-role.md       # Cline Agent - role

.clinerules/role.md

Eres un desarrollador experimentado en Javascript / React con experiencia en la construcción de aplicaciones web con capacidades de carga de archivos y procesamiento de PDF.

Si se proporciona una URL de GitHub, utiliza el servidor MCP de GitHub para obtener el contenido.

Modelo Recomendado para el Modo Act: Modelos Buenos para Codificación (por ejemplo, Claude Sonnet 3.7)

• Capacidades superiores de generación de código
• Fuertes en la implementación de lógica compleja
• Excelentes para depuración y resolución de problemas
• Eficientes en la traducción de requisitos a código funcional

Recursos para Selección de Modelos

• LLM Leaderboard (artificialanalysis.ai) - Este recurso proporciona comparaciones actualizadas de varios modelos de lenguaje en diferentes tareas, ayudándote a elegir el modelo más adecuado para tus necesidades específicas. El leaderboard evalúa modelos en razonamiento, codificación y otras capacidades relevantes para el desarrollo de software.

• OpenRouter - OpenRouter simplifica el acceso a múltiples modelos de IA a través de una única clave API. En lugar de gestionar cuentas y claves API separadas para diferentes proveedores de modelos, OpenRouter te permite acceder a una amplia gama de modelos con una interfaz unificada. Para usar este servicio:

  1. Crea una cuenta en OpenRouter
  2. Genera una clave API con créditos
  3. Configura Cline para usar tus credenciales de OpenRouter
  4. Accede a cualquier modelo compatible a través de la misma interfaz

Flujo de Trabajo de Desarrollo

1. Planificación Inicial (Modo Plan)

Comienza en el Modo Plan con un prompt simple que describa tus objetivos. Aquí tienes un ejemplo detallado:

Crea un sitio web amigable en React para cargar archivos PDF que extraiga el contenido de texto de los PDFs cargados y lo muestre en la interfaz de usuario.

Discute y refina el enfoque con Cline haciendo preguntas aclaratorias hasta que estés satisfecho con el plan.

Cuándo Cambiar de Plan a Act

Cambia al Modo Act cuando estés de acuerdo con el Plan generado. Es decir que sea claro el diseño, hayas tomado las decisiones técnicas importantes y estés listo para implementar el código.

2. Configuración del Proyecto (Modo Act)

Cuando cambies al Modo Act, Cline va a iniciar la ejecucción del plan, incluyendo acciones como:

1. Configure un nuevo proyecto React
2. Instale las dependencias necesarias
3. Cree la estructura básica del proyecto

3. Implementación (Modo Act)

Continúa en el Modo Act para implementar:

1. Componente de carga de PDF
2. Funcionalidad de extracción de texto
3. Configuración de traducción con una biblioteca simple de Node

4. Pruebas y Refinamiento (Modo Act)

Usa Cline para ayudar a:

1. Depurar cualquier problema: Pide a Cline que pruebe la aplicación en un navegador para identificar y solucionar errores

Ejecución de la Aplicación

Una vez que la aplicación esté lista, sigue estos pasos para ejecutarla:

1. Inicia el servidor de desarrollo:

   cd [carpeta_de_la_aplicación] && npm run dev
   

2. Abre tu navegador y navega a la URL mostrada en la terminal (generalmente http://localhost:5173)