He compilado un conjunto de indicaciones que se pueden usar para completar tareas con un solo clic en el modo de compilación de AI Studio: Actúa como ingeniero frontend y diseñador UI/UX de clase mundial. Crea una aplicación web de "Novela Visual Interactiva de Alta Fidelidad" utilizando React (módulos es6), Tailwind CSS y la API de Google Gemini (@google/genai). ### 1. Filosofía de diseño y estilo de interfaz de usuario (Fundamental) La interfaz de usuario debe seguir estrictamente la estética de un "galgame comercial japonés (novela visual)". - **Estilo:** Fantasía oscura, Cyberpunk, Polaco, De alta gama. - **Estilo artístico para la generación con IA:** Aplicar el "Estilo de anime japonés de celuloide (celluloid/平图)" a todas las imágenes generadas. - **Cuadro de diálogo:** No es un simple rectángulo. Debe incluir: - Un fondo "Glassmorphism" (oscuro, borroso). - Bordes decorativos de tecnología/fantasía (líneas dobles, detalles de neón brillantes en cian/dorado). - Una placa con el nombre, estilizada y dedicada, colocada en la parte superior izquierda de la caja. - Un avatar de personaje grande y rectangular (relación 3:4) en el lado izquierdo con un marco decorativo. - **Tipografía:** Limpia, legible, con o sin serifas, con efectos de máquina de escribir. - **Animaciones:** Transiciones suaves para fondos/personajes, efectos de vibración para escenas intensas, efectos de destello para combate. ### 2. Características principales 1. **Motor de historias:** Iterar a través de un script predefinido (proporcionaré el contenido de la historia a continuación). 2. **Generación de imágenes mediante IA (Gemini Nano/Flash):** - **Fondos:** Genera automáticamente fondos de escena basados en la ubicación actual del gráfico usando `gemini-2.5-flash-image`. - **Tachie de Personajes (Retratos):** Genera automáticamente figuras de personajes. Aplica un marco estilo "tarjeta" (esquinas redondeadas, sombra interior, borde) para que parezcan imágenes profesionales, no fotografías sin procesar. - **Ingeniería de prompts:** Agregar automáticamente "Estilo anime de celuloide japonés, obra maestra, color plano" a todos los prompts de imagen para garantizar la coherencia. 3. **Texto a voz (TTS):** Utilice la API de voz web para leer los diálogos. Asigne un tono/velocidad diferente a cada personaje (por ejemplo, grave/lento para el monstruo, normal para el protagonista). 4. **Perspectiva Géminis:** Un botón para analizar el sentimiento y la historia de la escena actual usando `gemini-2.5-flash`. ### 3. Estructura de datos - Utilice un archivo constante para almacenar el guion de la historia. - Define los personajes con las siguientes propiedades: `id`, `name`, `visualDescription` (para la generación de IA), `voicePitch`, `voiceRate`. - Define los fondos con las propiedades: `type`, `visualDescription`. ### 4. Contenido de la historia (La novela) Por favor, transforme el siguiente contenido de la novela en un script estructurado. [Pegue aquí el texto principal de su novela] ### 5. Requisitos técnicos - Utilice `process.env.API_KEY` para Gemini. - Gestionar la generación asíncrona de imágenes de forma elegante (mostrar un indicador de carga "Generando..." en la interfaz de usuario). - Se prefiere una estructura de archivo único o una estructura modular estándar (Aplicación, componentes, servicios). - Asegúrese de que el diseño sea adaptable pero optimizado para la visualización en formato horizontal. Genere ahora el código completo.
Cargando el detalle del hilo
Obteniendo los tweets originales de X para ofrecer una lectura limpia.
Esto suele tardar solo unos segundos.