Fil de 歸藏(guizang.ai) (@op7418)

J'ai compilé un ensemble d'invites qui peuvent être utilisées pour accomplir des tâches en un seul clic dans le mode de compilation d'AI Studio : Agir en tant qu'ingénieur frontend et concepteur UI/UX de classe mondiale. Créez une application web de « roman visuel interactif haute fidélité » en utilisant React (modules es6), Tailwind CSS et l'API Google Gemini (@google/genai). ### 1. Philosophie de conception et style d'interface utilisateur (crucial) L'interface utilisateur doit strictement respecter l'esthétique des « jeux de drague commerciaux japonais (roman visuel) ». - **Ambiance :** Dark Fantasy, Cyberpunk, Polonais, Haut de gamme. - **Style artistique pour la génération par IA :** Appliquer le style « anime japonais celluloïd (celluloid/平图) » à toutes les images générées. - **Boîte de dialogue :** Il ne s’agit pas d’un simple rectangle. Elle doit comporter : - Un fond «glassmorphisme» (sombre, flou). - Bordures décoratives Tech/Fantasy (doubles lignes, accents néon lumineux en cyan/or). - Une plaque signalétique stylisée et dédiée, fixée en haut à gauche de la boîte. - Un grand avatar de personnage rectangulaire (format 3:4) sur le côté gauche avec un cadre décoratif. - **Typographie :** Polices avec ou sans empattement nettes et lisibles, avec effets de machine à écrire. - **Animations :** Apparitions en fondu enchaîné pour les arrière-plans/personnages, effets de tremblement pour les scènes intenses, effets de flash pour les combats. ### 2. Fonctionnalités principales 1. **Moteur d'histoires :** Parcourir un script prédéfini (je fournirai le contenu de l'histoire ci-dessous). 2. **Génération d'images par IA (Gemini Nano/Flash) :** - **Arrière-plans :** Générer automatiquement des arrière-plans de scène en fonction de l'emplacement actuel de l'intrigue à l'aide de `gemini-2.5-flash-image`. - **Personnage Tachie (Portraits) :** Génère automatiquement des silhouettes de personnages. Applique un cadre de style « carte » (coins arrondis, ombre intérieure, bordure) pour leur donner un aspect soigné, et non de simples photos. - **Gestion des invites :** Ajouter automatiquement « Style anime japonais sur celluloïd, chef-d’œuvre, couleur unie » à toutes les invites d’images pour garantir la cohérence. 3. **Synthèse vocale (TTS) :** Utilisez l’API Web Speech pour lire les dialogues. Attribuez une hauteur et un débit différents à chaque personnage (par exemple, grave et lent pour le monstre, normal pour le protagoniste). 4. **Gemini Insight :** Un bouton pour analyser le sentiment et l'histoire de la scène actuelle à l'aide de `gemini-2.5-flash`. 3. Structure des données - Utilisez un fichier constant pour stocker le script de l'histoire. - Définir les personnages avec les propriétés : `id`, `name`, `visualDescription` (pour la génération IA), `voicePitch`, `voiceRate`. - Définir les arrière-plans avec les propriétés : `type`, `visualDescription`. ### 4. Contenu de l'histoire (Le roman) Veuillez analyser le contenu romanesque suivant et le transformer en script structuré. [Collez ici le texte principal de votre roman] 5. Exigences techniques - Utilisez `process.env.API_KEY` pour Gemini. - Gérer la génération d'images asynchrone avec élégance (afficher un message de chargement « Génération en cours… » dans l'interface utilisateur). - Structure de fichier unique préférée ou structure modulaire standard (Application, composants, services). - Assurez-vous que la mise en page soit adaptative mais optimisée pour un affichage en mode paysage. Générez le code complet maintenant.