Compilei um conjunto de instruções que podem ser usadas para concluir tarefas com um único clique no modo de compilação do AI Studio: Atue como um Engenheiro Frontend e Designer de UI/UX de nível internacional. Crie um aplicativo web de "Visual Novel Interativa de Alta Fidelidade" usando React (módulos ES6), Tailwind CSS e a API Google Gemini (@google/genai). ### 1. Filosofia de Design e Estilo da Interface do Usuário (Crucial) A interface do usuário deve seguir rigorosamente a estética de um "Galgame Comercial Japonês (Visual Novel)". - **Estilo:** Fantasia Sombria, Cyberpunk, Polonês, Sofisticado. - **Estilo artístico para geração de IA:** Aplicar o "Estilo de anime japonês em celuloide (celluloid/平图)" a todas as imagens geradas. - **Caixa de diálogo:** NÃO deve ser um simples retângulo. Ela deve conter: - Um fundo "Glassmorphism" (escuro, desfocado). - Bordas decorativas com estilo tecnológico/fantástico (linhas duplas, detalhes em néon brilhante em ciano/dourado). - Uma "placa de identificação" estilizada e exclusiva, fixada no canto superior esquerdo da caixa. - Um avatar de personagem grande e retangular (proporção 3:4) no lado esquerdo com uma moldura decorativa. - **Tipografia:** Fonte limpa e legível, com serifas ou sem serifa, e efeitos de digitação. - **Animações:** Transições suaves para fundos/personagens, efeitos de tremor para cenas intensas, efeitos de flash para combate. ### 2. Principais Características 1. **Motor de História:** Percorra um roteiro predefinido (fornecerei o conteúdo da história abaixo). 2. **Geração de imagens por IA (Gemini Nano/Flash):** - **Planos de fundo:** Gere automaticamente planos de fundo para a cena com base na localização atual do gráfico usando `gemini-2.5-flash-image`. - **Retratos de Personagens:** Gere automaticamente retratos de personagens. Aplique uma moldura estilo "Cartão" (cantos arredondados, sombra interna, borda) para que pareçam recursos profissionais, e não fotos brutas. - **Engenharia de prompts:** Adicionar automaticamente "Estilo anime japonês em celuloide, obra-prima, cor plana" a todos os prompts de imagem para garantir consistência. 3. **Texto para Fala (TTS):** Use a API Web Speech para ler os diálogos. Atribua diferentes tons/ritmos de fala a diferentes personagens (por exemplo, voz grave/lenta para o Monstro, voz normal para o Protagonista). 4. **Gemini Insight:** Um botão para analisar o sentimento e a história da cena atual usando `gemini-2.5-flash`. ### 3. Estrutura de Dados - Utilize um arquivo constante para armazenar o roteiro da história. - Defina os personagens com as propriedades: `id`, `name`, `visualDescription` (para geração de IA), `voicePitch`, `voiceRate`. - Defina os planos de fundo com as propriedades: `type`, `visualDescription`. ### 4. Conteúdo da História (O Romance) Por favor, analise o seguinte conteúdo inédito e transforme-o em um roteiro estruturado. [Cole aqui o texto principal do seu romance] ### 5. Requisitos Técnicos - Use `process.env.API_KEY` para o Gemini. - Lidar com a geração assíncrona de imagens de forma adequada (exibir um indicador de carregamento "Gerando..." na interface do usuário). - Preferencialmente, estrutura de arquivo único ou estrutura modular padrão (aplicativo, componentes, serviços). - Garanta que o layout seja responsivo, mas otimizado para visualização em paisagem. Gere o código completo agora.
Carregando detalhes do thread
Buscando os tweets originais no X para montar uma leitura limpa.
Isso normalmente leva apenas alguns segundos.