Merge branch 'main' of gitlab.com:agenceminuit/musicland

functions/helpers/gemini.js

@@ -106,50 +106,56 @@ Retourne UNIQUEMENT un JSON conforme au schéma. Pas de texte hors JSON.
 `.trim();
 
   // Règles détaillées injectées dans le prompt utilisateur pour guider la décision
-  const policy = `
-RUBRIQUE DE DÉCISION (résumée):
-
-A. QUAND BLOQUER (blocked = true) — cas graves et clairs (pas ambigus):
-  1) Sexualité impliquant des mineurs (référence explicite, érotisation, incitation).
-  2) Apologie explicite et sérieuse de terrorisme/extrémisme réel, ou appel à rejoindre/soutenir.
-  3) Appels explicites à la violence ou à un préjudice grave contre une personne/groupe réel.
-  4) Déshumanisation évidente et sérieuse de groupes protégés couplée à menace/incitation.
-  5) Instruction ou encouragement clair à commettre des crimes violents.
-  6) Nazisme/fascisme réel promu (praise/advocacy) ou symboles glorifiés sans critique.
-  7) Partage de contenu sexuel non consenti réel (ex: doxxing sexuel, vengeance) ou exploitation.
-
-B. QUAND NE PAS BLOQUER (blocked = false, mais flagged peut être true):
-  - Œuvres qui mettent en scène un personnage toxique pour le critiquer, le montrer ou le contextualiser.
-  - Citations, descriptions historiques, satire, ironie, mises en garde, ou re-appropriation par les communautés visées.
-  - Métaphores violentes ou langage dur SANS cible réelle ni intention d'incitation.
-  - Références à des thèmes sombres dans un but narratif/éducatif/critique, sans promotion réelle.
-
-C. SCORE ET SEVERITY:
-  - Calibre "score" selon l'impact potentiel et la clarté du tort.
-  - Indice: low≈0.1–0.3, medium≈0.3–0.6, high≈0.6–0.85, critical>0.85.
-  - Utilise severity par extrait pour refléter le pire passage.
-
-D. RELECTURE DE CONTEXTE:
-  - Demande-toi si le passage est: (i) narration/roleplay/critique —> plutôt allow; (ii) injonction réelle —> plutôt block.
-  - Si ambigu OU probablement artistique, NE PAS bloquer: flagged=true si nécessaire, blocked=false.
+  const decisionPolicy = `
+<POLITIQUE>
+  <SECTION id="A">
+    <TITRE>QUAND BLOQUER (blocked = true) — cas graves et clairs (pas ambigus)</TITRE>
+    <CAS>Sexualité impliquant des mineurs (référence explicite, érotisation, incitation).</CAS>
+    <CAS>Apologie explicite et sérieuse de terrorisme ou extrémisme réel, ou appel à rejoindre/soutenir.</CAS>
+    <CAS>Appels explicites à la violence ou à un préjudice grave contre une personne ou un groupe réel.</CAS>
+    <CAS>Déshumanisation évidente d'un groupe protégé accompagnée d'une menace ou d'une incitation.</CAS>
+    <CAS>Instruction ou encouragement clair à commettre des crimes violents.</CAS>
+    <CAS>Nazisme ou fascisme réel promu sans distance critique.</CAS>
+    <CAS>Partage de contenu sexuel non consenti ou exploitation sexuelle réelle.</CAS>
+  </SECTION>
+  <SECTION id="B">
+    <TITRE>QUAND NE PAS BLOQUER (blocked = false, flagged possible)</TITRE>
+    <CAS>Œuvres montrant un personnage toxique pour le critiquer, le contextualiser ou le dénoncer.</CAS>
+    <CAS>Citations, descriptions historiques, satire, ironie ou réappropriation par les communautés visées.</CAS>
+    <CAS>Métaphores violentes sans cible réelle ni intention d'incitation.</CAS>
+    <CAS>Références à des thèmes sombres à des fins narratives, éducatives ou critiques sans promotion réelle.</CAS>
+  </SECTION>
+  <SECTION id="C">
+    <TITRE>CALIBRAGE DU SCORE ET DES SEVERITY</TITRE>
+    <CAS>Score low ≈ 0.1-0.3, medium ≈ 0.3-0.6, high ≈ 0.6-0.85, critical &gt; 0.85.</CAS>
+    <CAS>Utilise la colonne severity pour refléter le passage le plus problématique.</CAS>
+  </SECTION>
+  <SECTION id="D">
+    <TITRE>RELECTURE DU CONTEXTE</TITRE>
+    <CAS>Si le passage relève de la narration, satire, critique ou roleplay: privilégie flagged=true et blocked=false.</CAS>
+    <CAS>Si le passage constitue une injonction réelle ou un appel clair au tort: blocked=true.</CAS>
+  </SECTION>
+</POLITIQUE>
 `.trim();
 
   const userPrompt = `
-Analyse de paroles de chanson
-Titre: ${title || "Sans titre"}
-
-Paroles:
-"""
+<ANALYSE_PAROLES>
+  <METADONNEES>
+    <TITRE>${title || "Sans titre"}</TITRE>
+  </METADONNEES>
+  <PAROLES><![CDATA[
 ${lyricsText}
-"""
+]]></PAROLES>
+</ANALYSE_PAROLES>
 
-Consigne:
-- Applique la RUBRIQUE DE DÉCISION ci-dessous pour autoriser la création artistique tout en bloquant les cas réellement dangereux.
-- "blocked" = true UNIQUEMENT pour les cas A.1 à A.7 (non ambigus).
-- Si le contenu semble artistique (récit, personnage, satire, citation, dénonciation) et ne fait pas d'apologie/incitation réelle: "blocked" = false (tu peux mettre "flagged" = true + "score" adapté).
-- Donne des "excerpts" courts (citations EXACTES) si possible.
+<DIRECTIVES>
+  <OBJECTIF>Autoriser l'expression artistique tout en bloquant les contenus réellement dangereux.</OBJECTIF>
+  <REGLE>"blocked" = true UNIQUEMENT pour les cas graves listés dans la section A.</REGLE>
+  <REGLE>Si le contenu relève du récit, de la critique, de la satire ou d'une mise en contexte artistique, laisse blocked=false (flagged=true si nécessaire).</REGLE>
+  <REGLE>Fournis des "excerpts" courts en citant exactement les passages sensibles.</REGLE>
+</DIRECTIVES>
 
-${policy}
+${decisionPolicy}
 `.trim();
 
   const { output } = await genkit({

functions/helpers/prompts.js

@@ -44,25 +44,30 @@ exports.generatePicturePrompt = (project = {}) => {
       ? "Palette vive et contrastée (magenta, cyan, jaune, bleu électrique)"
       : "Palette harmonieuse et douce (bleu nuit, violet, corail, or pâle)";
 
-  // Prompt simplifié et optimisé pour Gemini
+  const tagsLine = tags.join(" ; ") || "Non spécifié";
+  const lyricsLine = lyricsSample || "Pas d'extraits fournis";
+
   const prompt = `
-Crée une pochette d'album musicale abstraite et colorée au format carré 1024x1024.
+<BRIEF>
+  <OBJECTIF>Créer une pochette d'album abstraite et lumineuse.</OBJECTIF>
+  <TITRE>${title || "Sans titre"}</TITRE>
+  <STYLE_MUSICAL>${tagsLine}</STYLE_MUSICAL>
+  <EXTRAITS_PAROLES>${lyricsLine}</EXTRAITS_PAROLES>
+</BRIEF>
 
-Contexte:
-- Titre: ${title || "Sans titre"}
-- Style musical: ${tags.join(" ; ")}
+<CONTEXTES_VISUELS>
+  <FORMAT>Image carrée 1024x1024 pixels.</FORMAT>
+  <STYLE>Abstrait, graphique, formes géométriques et dégradés.</STYLE>
+  <PALETTE>${paletteHint}</PALETTE>
+  <COMPOSITION>Remplis toute la surface sans laisser de bordures ou zones vides.</COMPOSITION>
+</CONTEXTES_VISUELS>
 
-Directives essentielles:
-- Style: Abstrait, graphique, avec formes géométriques et dégradés de couleurs
-- Couleurs: ${paletteHint}
-- IMPORTANT: Image plein cadre sans AUCUN bord blanc ou espace vide
-- Composition: Éléments visuels répartis sur TOUTE la surface de l'image
-
-Contraintes:
-- PAS de texte ou typographie
-- PAS de personnes ou visages
-- PAS de fond blanc ou bordures
-- PAS de filigrane
+<CONTRAINTES>
+  <INTERDIT>Texte ou typographie.</INTERDIT>
+  <INTERDIT>Personnes ou visages.</INTERDIT>
+  <INTERDIT>Fond blanc ou bordures.</INTERDIT>
+  <INTERDIT>Filigrane ou logo.</INTERDIT>
+</CONTRAINTES>
 `.trim();
 
   return prompt;

functions/src/lyrics.js

@@ -1,4 +1,4 @@
-const { onCall } = require("firebase-functions/v2/https");
+const { onCall, HttpsError } = require("firebase-functions/v2/https");
 const { z } = require("genkit");
 const { generateAI, analyseLyrics } = require("../helpers/gemini");
 const {
@@ -10,6 +10,64 @@ const axios = require("axios");
 const admin = require("firebase-admin");
 const { refList } = require("../index");
 
+const TOXIC_KEYWORDS = [
+  /\bnazis?\b/i,
+  /\bnazisme\b/i,
+  /\bnéo[- ]?nazis?\b/i,
+  /\banti[- ]?s[eé]mites?\b/i,
+  /\bantis[eé]mitisme\b/i,
+  /\bracis(tes?|me)\b/i,
+  /\bwhite\s+supremac(?:y|istes?|ism)\b/i,
+  /\bku\s*klux\s*klan\b/i,
+];
+
+const buildModerationBrief = ({
+  objective,
+  context,
+  style,
+  audience,
+  emotion,
+  structure,
+  rhymes,
+}) => {
+  const sections = [
+    `<OBJECTIF>${objective || ""}</OBJECTIF>`,
+    `<CONTEXTE>${context || ""}</CONTEXTE>`,
+    `<EMOTION>${emotion || ""}</EMOTION>`,
+    `<STYLE>${style || ""}</STYLE>`,
+    `<AUDIENCE>${audience || ""}</AUDIENCE>`,
+    `<RIMES>${Array.isArray(rhymes) ? rhymes.join(", ") : rhymes || ""}</RIMES>`,
+  ];
+
+  if (Array.isArray(structure) && structure.length) {
+    sections.push(`<STRUCTURE>${structure.join(" | ")}</STRUCTURE>`);
+  }
+
+  return `<BRIEF_UTILISATEUR>\n${sections.join("\n")}\n</BRIEF_UTILISATEUR>`;
+};
+
+const moderationIndicatesBlock = (moderation = {}, fallbackText = "") => {
+  if (!moderation || typeof moderation !== "object") return false;
+
+  if (moderation.blocked === true) return true;
+
+  const excerpts = Array.isArray(moderation.excerpts)
+    ? moderation.excerpts
+    : [];
+  const reasons = Array.isArray(moderation.reasons)
+    ? moderation.reasons
+    : [];
+
+  const keywordDetected = (value) =>
+    typeof value === "string" && TOXIC_KEYWORDS.some((rx) => rx.test(value));
+
+  if (excerpts.some((item) => keywordDetected(item?.quote))) return true;
+  if (reasons.some((item) => keywordDetected(item))) return true;
+  if (keywordDetected(fallbackText)) return true;
+
+  return false;
+};
+
 exports.generateLyrics = onCall({}, async ({ auth = {}, data = {} }) => {
   try {
     const {
@@ -22,6 +80,52 @@ exports.generateLyrics = onCall({}, async ({ auth = {}, data = {} }) => {
       rhymes = "",
     } = data;
 
+    const moderationPayload = {
+      objective,
+      context,
+      style,
+      audience,
+      emotion,
+      structure,
+      rhymes,
+    };
+
+    const moderationInput = buildModerationBrief(moderationPayload);
+
+    try {
+      const moderation = await analyseLyrics({
+        title: "Brief utilisateur",
+        lyrics: moderationInput,
+      });
+
+      if (moderationIndicatesBlock(moderation, moderationInput)) {
+        console.warn("generateLyrics blocked by moderation", {
+          reasons: moderation?.reasons,
+          excerpts: moderation?.excerpts,
+        });
+
+        const summary = Array.isArray(moderation?.reasons)
+          ? moderation.reasons.slice(0, 3).join(", ")
+          : "contenu sensible";
+
+        throw new HttpsError(
+          "invalid-argument",
+          `Certaines informations saisies contiennent des termes interdits (${summary}). Merci de reformuler pour poursuivre la création des paroles.`,
+          { moderation },
+        );
+      }
+    } catch (moderationError) {
+      if (moderationError instanceof HttpsError) {
+        throw moderationError;
+      }
+
+      console.error("generateLyrics moderation failure", moderationError);
+      throw new HttpsError(
+        "internal",
+        "Impossible de vérifier le brief pour le moment. Merci de réessayer dans quelques instants.",
+      );
+    }
+
     console.log("Function generate lyrics start with data", data);
 
     const system = `

src/assets/index.js

@@ -211,6 +211,7 @@ export const tutorial = {
 
 export const background = {
   writingBG,
+  writingBgWeb: require("./UI/writingBgWeb.png"),
   studioBG,
   studioBG2,
   productionBG,

src/components/BorderGradientButton.js

@@ -14,12 +14,17 @@ const BorderGradientButton = ({
   containerStyle = {},
   tint = "dark",
   disabled = false,
+  maxWidth = null,
 }) => {
   return (
     <Pressable
       onPress={onPress}
       disabled={disabled}
-      style={{ ...containerStyle, opacity: disabled ? 0.6 : 1 }}
+      style={{
+        maxWidth: maxWidth ? maxWidth : null,
+        ...containerStyle,
+        opacity: disabled ? 0.6 : 1,
+      }}
     >
       <BorderGradient
         gradientProps={{

src/components/ListSelection/ListSelection.js

@@ -280,6 +280,10 @@ const ListSelection = ({
         const itemKey = buildItemKey(String(val ?? ""));
         const isHovered = isWeb && !disableHover && hoveredKey === itemKey;
         const showHoverOutline = isHovered && !sel;
+        const showSelectionOutline =
+          !isWeb &&
+          (variant === "simple" || variant === "emotion" || variant === "titleDescription") &&
+          sel;
 
         const baseContent =
           variant === "simple"
@@ -294,6 +298,8 @@ const ListSelection = ({
         };
         if (sel && isWeb) headerContainerStyle.backgroundColor = "transparent";
 
+        const shouldShowBorder = !sel;
+
         return (
           <View
             style={[{ position: "relative" }, itemOuterStyle]}
@@ -305,13 +311,13 @@ const ListSelection = ({
             }
           >
             <CreateLyricsHeader
-              colors={borderColors} // mobile: rendu d’avant conservé
+              colors={borderColors}
               tint={tint}
               onPress={() => toggleSelect(item)}
               gradientProps={
                 useEmotionColors && !sel ? { locations: [0.24, 1] } : undefined
               }
-              showBorder={!sel} // mobile: bordure d’origine
+              showBorder={shouldShowBorder}
               disableBlur={sel && isWeb} // web: pas de blur si gradient
               blurViewStyle={
                 sel && isWeb
@@ -323,7 +329,7 @@ const ListSelection = ({
               {withWebBlueGradientIfSelected(baseContent, sel)}
             </CreateLyricsHeader>
 
-            {showHoverOutline && (
+            {(showHoverOutline || showSelectionOutline) && (
               <View
                 pointerEvents="none"
                 style={{

src/config/firebase.js

@@ -4,7 +4,6 @@ import {
   initializeAuth,
 } from "firebase/auth/react-native";
 import firebase from "firebase/compat/app";
-
 import "firebase/compat/auth";
 import "firebase/compat/firestore";
 import "firebase/compat/functions";

src/screens/Writing/CreateLyricsWithAi.js

@@ -6,7 +6,7 @@ import { background } from "../../assets";
 import GradientButton from "../../components/GradientButton";
 import MusicLandHeader from "../../components/MusicLandHeader";
 import { OTHER_OBJECTIVE_OPTION, OTHER_STYLE_OPTION } from "../../data/data";
-import useLayoutType from "../../hooks/useLayoutType";
+import useLayoutType, { isWeb } from "../../hooks/useLayoutType";
 import Page from "../../layouts/Page";
 import { Routes } from "../../navigation";
 import { goBack, navigate } from "../../navigation/NavigationService";
@@ -336,7 +336,7 @@ const CreateLyricsWithAi = () => {
       headerType="NONE"
       behavior={Platform.OS === "ios" ? "padding" : "height"}
       keyboardVerticalOffset={Platform.OS === "ios" ? 64 : 100}
-      backgroundImg={background.homeBG}
+      backgroundImg={background.writingBG}
     >
       <MusicLandHeader onPressBack={onPressBack} progress={progress} />
       <View

src/screens/Writing/CreateLyricsWithAi.web.js

@@ -440,7 +440,7 @@ const CreateLyricsWithAi = () => {
       headerType="NONE"
       behavior={Platform.OS === "ios" ? "padding" : "height"}
       keyboardVerticalOffset={Platform.OS === "ios" ? 64 : 100}
-      backgroundImg={background.homeBG}
+      backgroundImg={background.writingBgWeb}
     >
       <MusicLandHeader onPressBack={onPressBack} progress={progress} />
       <View

src/screens/Writing/CreatingLyrics.js

@@ -1,13 +1,12 @@
-import { View, Text, Pressable, Image, Platform } from "react-native";
-import React, { useEffect, useState } from "react";
+import { View, Text, Image, Platform, Alert } from "react-native";
+import React, { useEffect, useRef, useState } from "react";
 import { Palette, Style } from "../../styles";
 import { BlurView } from "expo-blur";
-import { ai, icons } from "../../assets";
-import { size } from "../../styles/Style";
+import { ai } from "../../assets";
 import ProgressBar from "../../components/ProgressBar";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import GradientButton from "../../components/GradientButton";
-import { goBack, navigate } from "../../navigation/NavigationService";
+import { navigate } from "../../navigation/NavigationService";
 import { Routes } from "../../navigation";
 import firebase from "../../config/firebase";
 import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
@@ -18,6 +17,8 @@ const CreatingLyrics = ({ active, config, selections }) => {
   const [called, setCalled] = useState(false);
   const [result, setResult] = useState(null);
   const [saved, setSaved] = useState(false);
+  const [error, setError] = useState(null);
+  const hasShownErrorAlert = useRef(false);
   const { setIsLoading } = useMinuit();
   const { updateProjectData } = useUser();
 
@@ -28,6 +29,8 @@ const CreatingLyrics = ({ active, config, selections }) => {
       setResult(null);
       setProgress(0);
       setSaved(false);
+      setError(null);
+      hasShownErrorAlert.current = false;
     }
   }, [active]);
 
@@ -52,6 +55,9 @@ const CreatingLyrics = ({ active, config, selections }) => {
       try {
         setCalled(true);
         await setIsLoading(true);
+        console.log("🚀 [CreatingLyrics] Lancement de la génération", {
+          platform: Platform.OS,
+        });
         const callable = firebase
           .functions()
           .httpsCallable("lyrics-generateLyrics");
@@ -66,8 +72,22 @@ const CreatingLyrics = ({ active, config, selections }) => {
         });
         setResult(data);
         setProgress(100);
+        console.log("✨ [CreatingLyrics] Génération réussie");
       } catch (e) {
-        console.log(e);
+        console.error("🔥 [CreatingLyrics] Erreur de génération", e);
+        const rawMessage = typeof e?.message === "string" ? e.message : "";
+        const cleanedMessage = rawMessage.replace(
+          /^functions error: \w+-\w+:\s*/i,
+          "",
+        );
+        setError({
+          message:
+            cleanedMessage?.length > 0
+              ? cleanedMessage
+              : "Une erreur est survenue lors de la génération des paroles.",
+          code: e?.code,
+          details: e?.details,
+        });
       } finally {
         await setIsLoading(false);
       }
@@ -85,6 +105,7 @@ const CreatingLyrics = ({ active, config, selections }) => {
         if (saved) return;
         setSaved(true);
         await setIsLoading(true);
+        console.log("💾 [CreatingLyrics] Sauvegarde automatique des paroles");
         await updateProjectData({
           title: result?.title || "",
           lyrics: Array.isArray(result?.lyrics) ? result.lyrics : [],
@@ -95,13 +116,13 @@ const CreatingLyrics = ({ active, config, selections }) => {
         });
         navigate(Routes.Lyrics);
       } catch (e) {
-        console.log("Auto save generated lyrics error", e?.message);
+        console.error("⚠️ [CreatingLyrics] Erreur lors de la sauvegarde", e);
       } finally {
         await setIsLoading(false);
       }
     };
 
-    if (active && result && progress >= 100 && !saved) {
+    if (active && result && progress >= 100 && !saved && !error) {
       autoSaveAndGo();
     }
   }, [
@@ -109,12 +130,39 @@ const CreatingLyrics = ({ active, config, selections }) => {
     result,
     progress,
     saved,
+    error,
     setIsLoading,
     updateProjectData,
     config,
     selections,
   ]);
 
+  useEffect(() => {
+    if (error && !hasShownErrorAlert.current) {
+      hasShownErrorAlert.current = true;
+      const redirect = () => {
+        console.log("↩️ [CreatingLyrics] Retour à WritingLyrics après erreur");
+        navigate(Routes.WritingLyrics);
+      };
+
+      Alert.alert(
+        "Brief à reformuler",
+        error.message,
+        [
+          {
+            text: "OK",
+            onPress: redirect,
+          },
+        ],
+        { cancelable: false },
+      );
+
+      if (Platform.OS === "web") {
+        redirect();
+      }
+    }
+  }, [error]);
+
   return (
     <View
       style={{
@@ -169,7 +217,9 @@ const CreatingLyrics = ({ active, config, selections }) => {
                   textAlign: "center",
                 }}
               >
-                Ton texte est{"\n"}en cours de création
+                {error
+                  ? "Impossible de générer les paroles"
+                  : "Ton texte est\nen cours de création"}
               </Text>
               <View style={{ alignItems: "center", gap: 16 }}>
                 <ProgressBar gradient progress={progress} />
@@ -183,7 +233,7 @@ const CreatingLyrics = ({ active, config, selections }) => {
                   {progress}%
                 </Text>
               </View>
-              {!saved && (
+              {!saved && result && !error && (
                 <GradientButton
                   title="Découvrir mon texte"
                   containerStyle={{
@@ -195,6 +245,9 @@ const CreatingLyrics = ({ active, config, selections }) => {
                       if (saved) return;
                       setSaved(true);
                       await setIsLoading(true);
+                      console.log(
+                        "📄 [CreatingLyrics] Consultation manuelle du texte",
+                      );
                       await updateProjectData({
                         title: result?.title || "",
                         lyrics: Array.isArray(result?.lyrics)
@@ -206,7 +259,10 @@ const CreatingLyrics = ({ active, config, selections }) => {
                       });
                       navigate(Routes.Lyrics);
                     } catch (e) {
-                      console.log("Save generated lyrics error", e?.message);
+                      console.error(
+                        "⚠️ [CreatingLyrics] Erreur lors de l'ouverture manuelle",
+                        e,
+                      );
                     } finally {
                       await setIsLoading(false);
                     }

src/screens/Writing/Lyrics.js

@@ -12,6 +12,8 @@ import { navigate } from "../../navigation/NavigationService";
 import { useUser } from "../../providers/UserDataProvider";
 import { gutters } from "../../styles";
 import CustomInput from "./components/CustomInput";
+import { background } from "../../assets";
+import { isWeb } from "../../hooks/useLayoutType";
 
 const Lyrics = ({ navigation }) => {
   const scrollRef = useRef(null);
@@ -239,7 +241,10 @@ const Lyrics = ({ navigation }) => {
   ]);
 
   return (
-    <Page headerType="NONE">
+    <Page
+      backgroundImg={isWeb ? background.writingBgWeb : background.writingBG}
+      headerType="NONE"
+    >
       <MusicLandHeader
         onPressBack={() => navigate(Routes.Home)}
         progress={95}

src/screens/Writing/WritingLyrics.js

@@ -6,11 +6,13 @@ import BorderGradientButton from "../../components/BorderGradientButton";
 import FullscreenIntroVideo from "../../components/FullscreenIntroVideo";
 import GradientButton from "../../components/GradientButton";
 import MusicLandHeader from "../../components/MusicLandHeader";
-import Page from "../../layouts/Page";
 import { Routes } from "../../navigation";
 import { goBack, navigate } from "../../navigation/NavigationService";
 import { useUserData } from "../../providers/UserDataProvider";
 import { gutters } from "../../styles";
+import { background } from "../../assets";
+import { isWeb } from "../../hooks/useLayoutType";
+import Page from "../../layouts/Page";
 
 const WritingLyrics = () => {
   const { createNewProject, selectedProject, updateProjectData } =
@@ -42,7 +44,10 @@ const WritingLyrics = () => {
   }
 
   return (
-    <Page headerType="NONE">
+    <Page
+      backgroundImg={isWeb ? background.writingBgWeb : background.writingBG}
+      headerType="NONE"
+    >
       <Image source={ai.nathalie} style={styles.img} resizeMode="contain" />
       <MusicLandHeader onPressBack={goBack} progress={9} />
       <View
@@ -56,9 +61,13 @@ const WritingLyrics = () => {
           }}
         >
           <BorderGradientButton
+            maxWidth={500}
             onPress={() => createAndNavigate({ hasLyrics: true })}
+            containerStyle={{ alignSelf: "center", width: "100%" }}
           />
           <GradientButton
+            maxWidth={500}
+            containerStyle={{ alignSelf: "center", width: "100%" }}
             title="Écrire des paroles avec une IA"
             onPress={() => createAndNavigate({ hasLyrics: false })}
           />