# Shorts Prompt Studio Application mobile-first pour construire des prompts Leonardo AI verticaux, générer des idées d’images Shorts/TikTok et préparer un workflow CapCut. ## Masterplan - Aider les créateurs Shorts/TikTok à transformer une idée visuelle en prompt Leonardo AI prêt à copier. - Centraliser les réglages imposés : `Phoenix ou Vision XL`, `Prompt Enhance ON`, `Alchemy ON`, `9:16`, `Quality High`. - Proposer un mini-workflow de production : sujet → variations d’images → montage CapCut → musique → texte viral. - Optimiser l’usage mobile : navigation basse, gros boutons tactiles, safe areas iOS, interface sombre par défaut. - Fournir une base simple sans backend ni build step, modifiable directement en fichiers statiques. ## Tech Stack & Architecture - **Frontend uniquement** : aucun backend, aucune API serveur, aucune persistance distante. - **React 19.2.0** chargé via CDN ESM : `https://esm.sh/react@19.2.0`. - **ReactDOM** via `https://esm.sh/react-dom@19.2.0/client`. - **HTM** via `src/jsx.js` pour écrire des templates JSX-like sans compilation. - **Tailwind CDN** dans `index.html` pour les classes utilitaires. - **Lucide React** via CDN ESM pour les icônes. - **CSS custom properties** dans `styles/main.css` pour le thème clair/sombre, les rayons, ombres et couleurs HSL. Architecture actuelle : - `index.html` charge Tailwind CDN, `styles/main.css`, puis `src/main.js`. - `src/main.js` monte `` dans `#root` avec ``. - `src/mainProviders.js` expose `ThemeContext` et applique la classe `.dark` sur ``. - `src/App.js` contient l’état principal, les routes hash, les presets Leonardo, les idées, le prompt final et les écrans. - Les composants dans `src/components/` sont stateless ou presque : - `Header` - `BottomNav` - `SectionCard` - `PromptPreview` State management : - Pas de Redux/Zustand. - État local React dans `App` : - `route` - `subject` - `style` - `ideas` - `newIdea` - `copied` - État global minimal via `ThemeContext` : - `darkMode` - `setDarkMode` Navigation : - Hash routing manuel avec `window.location.hash`. - Routes connues par `BottomNav` : - `#/prompt` - `#/images` - `#/video` - La route par défaut est `prompt`. Gotchas techniques : - Le projet n’utilise pas de transpilation : ne pas écrire de JSX natif. Utiliser `html` depuis `src/jsx.js`. - Les imports doivent rester compatibles navigateur ESM. - Les composants React sont écrits avec la syntaxe HTM : ```js return html`

...

`; ``` - Les classes Tailwind dynamiques doivent rester sous forme de strings complètes, car Tailwind CDN les évalue côté navigateur. - `navigator.clipboard.writeText` est utilisé sans fallback visuel d’erreur ; sur certains contextes non HTTPS, la copie peut échouer silencieusement. ## File Structure ```txt index.html # Entrée HTML, Tailwind CDN, thème mobile viewport, mount #root. styles/main.css # Variables HSL, dark mode, fond radial, safe mobile defaults, scrollbars. src/main.js # Monte ReactDOM avec Providers puis App. src/jsx.js # Bind HTM à React.createElement ; obligatoire à la place du JSX. src/mainProviders.js # ThemeContext, état darkMode, applique .dark à documentElement. src/App.js # Application principale : routes hash, prompts Leonardo, idées, workflow vidéo. src/components/Header.js # Header sticky avec branding “Viral workflow”. src/components/BottomNav.js # Navigation fixe basse : Prompt, Images, Vidéo. src/components/SectionCard.js # Carte réutilisable avec icône, titre, sous-titre. src/components/PromptPreview.js # Affichage du prompt final + bouton copier + rappel negative prompt. ``` ## Key Features ### Générateur de prompt Leonardo AI Implémenté dans `src/App.js`, route `prompt`. Exigences actuelles : - Champ texte pour le **sujet principal**. - Sélection d’un **style visuel** parmi `visualStyles`. - Construction automatique de `fullPrompt` au format : ```txt Model: Phoenix ou Vision XL Prompt Enhance: ON Alchemy: ON Aspect ratio: 9:16 pour Shorts/TikTok Quality: High Prompt: {subject}, {style}, realistic, cinematic, high detail, vertical composition, viral short video aesthetic Negative prompt: blurry, low quality, watermark, text, logo distortion, ugly, duplicate objects, bad lighting, cartoon, anime ``` - Le negative prompt est constant dans `negativePrompt`. - Le prompt final est affiché via `src/components/PromptPreview.js`. - Bouton “Copier le prompt” : - appelle `navigator.clipboard.writeText(fullPrompt)`. - affiche l’état temporaire `Copié` pendant environ 1600 ms. ### Presets de styles visuels Définis dans `src/App.js` : - Portrait cinématique vertical néon violet/or. - Scène futuriste premium métallique/luxe. - Macro hyperréaliste avec particules lumineuses. - Ambiance mystérieuse avec lumière volumétrique. Ces styles doivent rester orientés : - rendu réaliste, - cadrage vertical 9:16, - esthétique Shorts/TikTok, - fort contraste visuel. ### Banque d’idées d’images Définie dans `src/App.js` avec `initialIdeas`. Modèle actuel : ```js { id: number, title: string, subject: string } ``` Idées par défaut : - `Le secret interdit` - `Avant / Après viral` - `Objet impossible` Fonctionnalités : - Ajouter une nouvelle idée via `newIdea`. - Les nouvelles idées reçoivent : - `id: Date.now()` - `title: 'Nouvelle scène'` - `subject: clean` - Supprimer une idée avec `removeIdea(id)`. - Sélectionner une idée avec `selectIdea(idea)` : - remplace `subject` - redirige vers `#/prompt` Important : les idées ne sont pas persistées. Un refresh réinitialise `initialIdeas`. ### Workflow vidéo CapCut Route `video` dans `src/App.js`. Le contenu est pensé comme checklist de production après génération Leonardo : - générer plusieurs images, - monter dans CapCut, - ajouter musique tendance, - utiliser des textes courts et percutants. Les textes d’accroche sont définis dans `textStyles` : ```js [ 'Personne ne remarque ce détail…', 'Attends la transformation finale', 'Ce visuel a été généré avec une seule idée', 'Tu choisirais quelle version ?', 'Le résultat est beaucoup trop réaliste' ] ``` ### Navigation mobile `src/components/BottomNav.js` affiche 3 entrées fixes : ```js [ { id: 'prompt', label: 'Prompt', icon: Wand2 }, { id: 'images', label: 'Images', icon: Image }, { id: 'video', label: 'Vidéo', icon: Video } ] ``` - L’état actif est passé via prop `active`. - Chaque lien utilise `href="#/{id}"`. - La barre gère `env(safe-area-inset-bottom)`. ### Thème clair/sombre - Géré par `ThemeContext` dans `src/mainProviders.js`. - Sombre par défaut : `React.useState(true)`. - Le bouton de thème est dans `src/App.js`, près du titre “Leonardo AI → CapCut”. - `.dark` change les variables CSS dans `styles/main.css`. - Pas de sauvegarde dans `localStorage` actuellement. ## Design Guidelines ### Style général - Interface premium sombre, néon violet, orientée créateurs vidéo. - Fond avec gradients radiaux dans `styles/main.css`. - Cartes arrondies avec bordures fines et ombres douces. - UI pensée mobile-first mais limitée à `max-w-5xl` sur desktop. ### Couleurs Toutes les couleurs principales passent par variables HSL : ```css --background --foreground --primary --secondary --muted --destructive --border --card ``` Couleur principale : - clair : `--primary: 274 93% 55%` - sombre : `--primary: 282 96% 66%` Ne pas hardcoder de violet hors cas exceptionnel ; utiliser : ```txt hsl(var(--primary)) hsl(var(--primary)/0.14) hsl(var(--background)) hsl(var(--card)) ``` ### Typography - Font stack dans `styles/main.css` : ```css Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif ``` - Titres en `font-black`. - Labels en `font-bold`. - Textes secondaires avec `text-[hsl(var(--muted))]`. ### Responsive behavior - Layout principal : - mobile : une colonne. - desktop sur route prompt : grille `lg:grid-cols-[1fr_0.9fr]`. - Touch targets : - boutons minimum `44px` ou `52px`. - Bottom nav fixe avec `pb-28` sur le wrapper pour éviter que le contenu soit masqué. - Header sticky avec `env(safe-area-inset-top)`. ### Accessibilité actuelle - Le bouton thème a `aria-label="Changer le thème"`. - La navigation utilise des liens ``. - Les champs de texte ont labels visibles. - Préserver `font-size: max(16px, 1rem)` pour éviter le zoom automatique iOS sur inputs. ## App Flow ### Parcours principal : créer un prompt 1. L’utilisateur arrive sur `#/prompt` ou route vide. 2. Il modifie le sujet principal. 3. Il choisit un style visuel. 4. Le prompt final se met à jour immédiatement. 5. Il clique “Copier le prompt”. 6. Il colle dans Leonardo AI avec les réglages déjà inclus : - Phoenix ou Vision XL - Prompt Enhance ON - Alchemy ON - 9:16 - Quality High Edge cases : - Sujet vide : le prompt est toujours généré, mais la ligne `Prompt:` commencera par une virgule. Si une validation est ajoutée, le faire dans `App.js` avant `fullPrompt`. - Clipboard indisponible : `copyText` ne signale pas l’échec. Ajouter un état d’erreur si nécessaire. ### Parcours images : gérer les idées 1. L’utilisateur va dans `#/images`. 2. Il consulte les idées initiales. 3. Il peut ajouter une nouvelle idée. 4. Il peut supprimer une idée. 5. Il peut sélectionner une idée pour l’envoyer dans le générateur. 6. L’app met à jour `subject` et redirige vers `#/prompt`. Edge cases : - Les idées ajoutées sont perdues au refresh. - `Date.now()` suffit pour une session locale, mais éviter si synchronisation future. ### Parcours vidéo : préparer le montage 1. L’utilisateur va dans `#/video`. 2. Il suit les étapes de workflow CapCut. 3. Il utilise les exemples de textes viraux depuis `textStyles`. 4. Il applique musique tendance et montage vertical. Edge cases : - Il n’y a pas d’intégration CapCut réelle. - Il n’y a pas de génération Leonardo réelle. - L’app sert de studio de préparation, pas d’automatisation externe. ### Navigation - La route est lue avec : ```js window.location.hash.replace('#/', '') || 'prompt' ``` - Les changements sont écoutés via `hashchange`. - Pour ajouter une route, modifier : - `items` dans `src/components/BottomNav.js` - le rendu conditionnel dans `src/App.js` ## Conventions ### Syntaxe composants Toujours importer `html` : ```js import { html } from '../jsx.js'; ``` Créer les composants ainsi : ```js export function MyComponent({ title }) { return html`

`; } ``` Ne pas utiliser : ```jsx return

{title}

; ``` car aucun build JSX n’est configuré. ### Imports - React uniquement depuis esm.sh : ```js import React from 'https://esm.sh/react@19.2.0'; ``` - Icônes depuis : ```js import { Wand2 } from 'https://esm.sh/lucide-react@0.468.0?deps=react@19.2.0'; ``` Garder `?deps=react@19.2.0` pour éviter des copies React multiples. ### Styling - Utiliser Tailwind classes directement dans `className`. - Utiliser les variables CSS existantes pour couleurs/radius/shadows : - `rounded-[var(--radius-md)]` - `border-[hsl(var(--border))]` - `bg-[hsl(var(--card))]` - `shadow-[var(--shadow-sm)]` ### Ajout d’une nouvelle section carte Utiliser `SectionCard` : ```js <${SectionCard} icon=${SomeIcon} title="Titre" subtitle="Sous-titre" > ... ``` L’icône doit être une référence de composant Lucide, pas une instance. ### Ajout d’une nouvelle page 1. Ajouter l’item dans `src/components/BottomNav.js` : ```js { id: 'nouvelle-route', label: 'Label', icon: Icon } ``` 2. Dans `src/App.js`, ajouter un rendu conditionnel : ```js ${route === 'nouvelle-route' && html` ... `} ``` 3. Si la page a des composants réutilisables, les placer dans `src/components/`. 4. Garder le rendu mobile-first et prévoir l’espace de la bottom nav. ### Données Les constantes métier principales vivent actuellement dans `src/App.js` : - `negativePrompt` - `visualStyles` - `initialIdeas` - `textStyles` Si elles grossissent, les extraire dans un fichier dédié, par exemple : ```txt src/data/presets.js ``` Mais ne pas le faire tant que la taille reste faible : l’app actuelle est volontairement compacte. ### Non-objectifs actuels - Pas d’authentification. - Pas de sauvegarde cloud. - Pas d’appel Leonardo AI. - Pas d’export CapCut. - Pas de génération vidéo. - Pas de build Vite/Webpack. ## Platform (GenMB) This app is built and hosted on GenMB. **Runtime:** Browser sandbox (iframe) or Cloud Run. No Node.js server — all code runs client-side unless `backend/` exists. **Dependencies:** CDN-only (esm.sh, cdn.tailwindcss.com, unpkg). Use ES module imports with full CDN URLs. No `npm install` at runtime. **Entry point:** `index.html` must include all CDN script tags. Tailwind via CDN with inline config. **Built-in services (relative API paths only, never hardcode domains):** - `/api/ai/completion` — AI proxy | `/api/data/{appId}/*` — PostgreSQL (DataConnect SDK) - `/api/storage/{appId}/*` — File uploads (GCS) | `/api/auth/google/*` — Google OAuth - `/api/contact/submit` — Contact form | SDKs: `window.genmb.db`, `.storage`, `.auth` **File structure:** `index.html` (entry), `src/` (source), `styles/` (CSS), `backend/` (optional FastAPI), `CLAUDE.md` (this file). **Cannot:** Install npm packages at runtime, access filesystem, make direct server-side calls from frontend, modify infra.