xAI TTS v1 Sub-Second Speech

Créez une page web HTML interactive complète et soignée, composée d’un seul fichier, intitulée « Expédition de ballons aéroportés ». Produisez uniquement le document HTML final, avec tous les CSS et JavaScript intégrés. La page doit s’ouvrir et fonctionner directement dans un navigateur moderne, sans étape de build ni dépendances externes, bibliothèques, polices, CDN, URL d’images, API ou fichiers supplémentaires. Il s’agit d’une page web responsive, et non d’une composition fixe au format 16:9. Concevez une station de contrôle immersive pour une flotte de montgolfières à l’aube, mêlant instruments d’aviation vintage, cartes topographiques sérigraphiées, textures de papier tactiles, commandes en laiton et simulation moderne en temps réel. Utilisez une palette soigneusement superposée de bleu cobalt, jaune crème, rouge corail, blanc chaud, charbon et laiton patiné. Une lumière matinale chaleureuse doit progressivement s’intensifier depuis le coin supérieur gauche. Encodez systématiquement l’altitude, les couches de vent et le danger au moyen des couleurs, de l’épaisseur des lignes, de motifs et de légendes claires. Créez tous les visuels de manière procédurale avec HTML, CSS, Canvas et du SVG intégré lorsque cela est utile. La zone centrale doit afficher une grande carte animée de l’espace aérien vue du dessus, représentant un canyon, des courbes de niveau, au moins douze ballons individuellement identifiables, plusieurs couches de vent changeantes, un système orageux de cumulonimbus en mouvement, des zones de turbulence et un phare flottant comme destination. Implémentez une véritable simulation physique légère : chaque ballon doit suivre sa position, sa vélocité, son altitude, son carburant, son lest, sa température, son niveau de risque et l’historique de son itinéraire ; la direction et la force du vent doivent varier selon l’altitude et évoluer au fil du temps ; les brûleurs augmentent la portance tout en consommant du carburant ; le largage du lest fait monter le ballon mais réduit définitivement la quantité de lest ; le refroidissement provoque la descente ; les parois du canyon et les cellules orageuses créent des dangers significatifs. Les ballons doivent se déplacer continuellement et laisser des traînées de vol visibles qui s’estompent. L’objectif est de guider toute la flotte en sécurité jusqu’au phare avant l’épuisement des ressources ou du temps. Incluez un compte à rebours de lancement bien visible à l’aube, avec des commandes Démarrer, Pause, Reprendre, Réinitialiser et de réglage de la vitesse de simulation. Avant le lancement, les ballons doivent osciller subtilement tandis que les instruments frémissent. Après le lancement, animez les particules de vent, le déplacement des ballons, la croissance de l’orage, le tracé des traînées, les pulsations d’avertissement et l’évolution de la lumière. Les utilisateurs doivent pouvoir faire glisser directement sur la carte les nœuds de direction du vent afin de modifier les flux d’air locaux en temps réel, avec un retour visuel et physique immédiat. Cliquer sur un ballon doit le sélectionner, mettre son itinéraire en évidence, centrer ses données dans l’interface et ouvrir un inspecteur détaillé compact. Fournissez des commandes tactiles de brûleur et de lest pour le ballon sélectionné, notamment un comportement de brûleur maintenu, une action de largage du lest clairement lourde de conséquences, des raccourcis clavier et des boutons accessibles. Permettez la sélection multiple ou les commandes appliquées à toute la flotte pour un jeu avancé. Organisez une barre latérale verticale de cartes de mission présentant les objectifs de la flotte, les alertes actives, les bulletins météorologiques et des résumés d’état pour chaque ballon. Les cartes de mission doivent se mettre à jour en direct et permettre un filtrage par états sûr, avertissement, critique, arrivé et perdu. Placez en bas une bande de télémétrie dense mais lisible, avec des graphiques Canvas à défilement fluide pour l’altitude, la vitesse verticale, le carburant, la proximité de l’orage et la progression de la flotte. Le survol ou le parcours des graphiques doit révéler des valeurs synchronisées et mettre en évidence le moment correspondant sur la traînée du ballon sélectionné. Ajoutez des jauges vintage, des aiguilles rotatives, des affichages numériques, des voyants d’avertissement, des libellés tamponnés, des coordonnées cartographiques, des bandes d’altitude, une mini-carte ou une vue d’ensemble compacte et une légende claire. Utilisez un comportement de mise en page responsive plutôt que de simplement réduire la composition de bureau. Sur les écrans larges, affichez simultanément la barre latérale, la carte centrale, l’inspecteur et la télémétrie. Sur les tablettes, regroupez les cartes secondaires dans des onglets ou des panneaux coulissants. Sur mobile, donnez la priorité à la carte et aux commandes du ballon sélectionné, fournissez de grandes zones tactiles, empilez les panneaux de télémétrie et préservez les interactions par glisser-déposer. Veillez à ce que la page remplisse harmonieusement la fenêtre selon différents rapports d’aspect et reste utilisable à la souris, au toucher et au clavier. Rendez la simulation complète : incluez des conditions de réussite et d’échec, un amarrage animé à l’arrivée au phare flottant, un retour visuel en cas de collision ou de perte dans l’orage, des info-bulles contextuelles, un accompagnement lors de la première utilisation, des états vides et désactivés, une confirmation avant le largage irréversible du lest, un flux de redémarrage, des annonces d’état et un rapport de mission final avec des statistiques telles que les arrivées, les pertes, l’efficacité énergétique, le risque moyen et le temps écoulé. Initialisez l’état de départ de manière à rendre le scénario immédiatement intéressant tout en restant gagnable. Utilisez requestAnimationFrame pour des animations fluides et Canvas pour la carte et la télémétrie lorsque cela est pertinent. Préservez les performances du rendu, utilisez devicePixelRatio pour obtenir des Canvas nets, gérez correctement les événements de redimensionnement et évitez les erreurs dans la console. Donnez la priorité à une hiérarchie visuelle exceptionnelle, à des micro-interactions nuancées, à un comportement convaincant des instruments, à un état partagé entre tous les panneaux et à des finitions détaillées. Ne créez pas une maquette statique. N’utilisez pas de rectangles d’espace réservé, de dégradés génériques comme design principal, de commandes factices non fonctionnelles, de ressources externes, de polices externes, de boîtes de dialogue alert(), de texte explicatif excessif, de défilement horizontal, de libellés minuscules illisibles ni d’interactions fonctionnant uniquement à la souris. N’imposez ni Canvas au format 16:9 ni fenêtre de taille fixe. Chaque commande majeure visible doit fonctionner et toutes les données affichées doivent provenir de l’état de simulation en direct.

Créez une page web HTML interactive complète, soignée et composée d’un seul fichier, intitulée « Boulangerie automatisée de minuit », en utilisant uniquement du HTML intégré, du CSS et du JavaScript vanilla. Produisez l’intégralité du document HTML exécutable, et rien d’autre. N’utilisez aucune bibliothèque externe, aucun framework, CDN, police, image, fichier SVG, fichier audio, API ni requête réseau ; tous les visuels, icônes, retours de type sonore, effets et mécanismes de jeu doivent être générés localement avec HTML/CSS/JS. Construisez un jeu de planification des commandes entièrement jouable, situé dans une boulangerie automatisée à minuit. Des pâtons doivent entrer continuellement dans un système de convoyeurs isométrique, avec des formes, recettes, températures de cuisson requises, durées de cuisson, limites de fraîcheur et valeurs en points clairement différenciées. Organisez l’interface autour d’un grand four industriel central, d’un réseau de convoyeurs en boucle avec des voies commutables et de panneaux d’instrumentation en temps réel montés sur les côtés. Les joueurs doivent pouvoir faire glisser et réordonner les pâtons dans la file du four, les déplacer entre des emplacements compatibles lorsque cela est pertinent, cliquer sur les aiguillages pour rediriger les pâtons entrants, cliquer sur les commandes du four pour régler la température ou activer des systèmes et utiliser des commandes clavier clairement documentées pour accélérer temporairement les convoyeurs ou déclencher un refroidissement d’urgence. Toutes les interactions à la souris, au toucher, au clic, par glisser-déposer et au clavier doivent répondre immédiatement et de manière visible. Implémentez un véritable gameplay avec gestion d’état, et non une maquette statique. Incluez plusieurs commandes de pâtons simultanées, le déplacement sur les convoyeurs, le routage des voies, la validation des collisions et de l’alignement lors du glisser-déposer, les limites de capacité, des minuteurs par élément, l’inertie de la température du four, la progression de la cuisson, les états insuffisamment cuit, parfaitement cuit et trop cuit, le score, un multiplicateur de combo, des vies ou une réputation, une difficulté croissante, la pause/reprise, le redémarrage et un tutoriel interactif ou une aide concise. Les recettes doivent créer des conflits de planification significatifs : différents produits doivent nécessiter des températures et des durées différentes, ce qui encourage la réorganisation de la file ainsi que le refroidissement ou l’accélération stratégiques. Un pain parfaitement cuit doit sortir doré, déclencher une explosion de particules satisfaisante, illuminer la vitrine de la boulangerie, augmenter le combo et mettre à jour le journal des commandes. Les erreurs doivent produire un pain visiblement carbonisé, une fumée et des braises ascendantes, des voyants d’avertissement, des secousses d’instruments, une perte de combo et un retour visuel clair sans audio. Proposez un bouton facultatif pour le son, mais simulez le retour audio visuellement et avec Web Audio généré entièrement en JavaScript lorsqu’il est activé ; le jeu doit rester parfaitement compréhensible en mode muet. Utilisez un langage visuel original et cohérent combinant un pixel art isométrique détaillé et une instrumentation industrielle de précision. Faites contraster la lumière ambrée chaude du four, les reflets cuivrés, le pain lumineux et les libellés crème doux avec un environnement nocturne indigo profond. Créez de la profondeur avec des machines dessinées en CSS, des sols carrelés, des tuyaux, des évents, des ombres, des rehauts, des bords en marches de pixels, de subtiles lignes de balayage, des voyants, des afficheurs segmentés, des jauges, des bandes d’avertissement et des détails mécaniques animés. Rendez le four central vivant grâce à une chambre vacillante, des portes, un cadran de température, une distorsion thermique et des voyants d’état. Animez les bandes transporteuses, les engrenages, le déplacement des pâtons, la fumée, les étincelles, la vapeur de refroidissement, l’éclairage de la vitrine, le retour du combo et les transitions des panneaux avec un CSS et un JavaScript performants. Préservez une lecture nette et une hiérarchie forte malgré l’esthétique dense de salle de contrôle. Incluez un contenu substantiel et soigneusement agencé : le sol jouable de la boulangerie, la file des commandes entrantes, la file du four, une référence des recettes, l’affichage en direct du score et du combo, les instruments de température et de débit, le journal des événements, la légende des commandes, les notifications d’état et une fenêtre modale de fin de partie ou de résumé du service avec des résultats détaillés et une action pour rejouer. Ajoutez des libellés accessibles, des états de focus visibles, une utilisation possible au clavier, la prise en charge de la réduction des animations et des indicateurs d’état indépendants de la couleur. Rendez la mise en page responsive sur les navigateurs de bureau, les tablettes et les mobiles, en réorganisant intelligemment les panneaux et en adaptant la taille de la boulangerie tout en préservant l’utilisabilité. Il s’agit d’une page web : n’imposez donc ni Canvas au format 16:9 ni dimensions de fenêtre codées en dur ; utilisez une mise en page responsive fluide, particulièrement réussie sur les écrans larges courants, tout en s’adaptant harmonieusement aux écrans en orientation portrait. Donnez la priorité à la complétude, aux sensations de jeu, à une gestion d’état fiable, à une chronologie précise, à une gestion robuste du glisser-déposer, à des règles de collision claires, à des transitions soignées et à un retour visuel travaillé. La page doit fonctionner immédiatement lorsqu’elle est enregistrée comme fichier .html unique puis ouverte localement. Évitez : l’art conceptuel statique, un tableau de bord non fonctionnel, les commandes d’espace réservé, les interactions de glisser-déposer factices, les minuteurs défectueux, le texte qui se chevauche, les libellés minuscules illisibles, le texte explicatif excessif, les cartes plates génériques, les images photoréalistes, les ressources externes, les dépendances externes, les images base64 intégrées, l’accès réseau, les étapes de build, les fichiers multiples, les dimensions fixes au format 16:9, le son obligatoire, la lecture audio automatique, les alertes du navigateur, les retours limités à la console et les sections TODO inachevées.