diff --git a/client/src/pages/ProjectWorkspace.tsx b/client/src/pages/ProjectWorkspace.tsx index d2b4013..db0283a 100644 --- a/client/src/pages/ProjectWorkspace.tsx +++ b/client/src/pages/ProjectWorkspace.tsx @@ -11,7 +11,7 @@ import { trpc } from "@/lib/trpc"; import { ArrowLeft, Play, Pause, SkipBack, SkipForward, Layers, Eye, EyeOff, Lock, Unlock, - Wand2, MessageSquare, Settings, Film, + Wand2, MessageSquare, Settings, Film, Sparkles, Scissors, Image, Users, Bot, Download, ChevronLeft, ChevronRight, Loader2 } from "lucide-react"; @@ -310,6 +310,10 @@ export default function ProjectWorkspace() { Personnages + + + Génération IA + + + + @@ -593,6 +600,7 @@ function CharactersPanel({ projectId }: { projectId: number }) { )} {/* Full-screen preview modal */} + {/* eslint-disable-next-line @typescript-eslint/no-use-before-define */} {previewUrl && (
); } + +// Generation panel for AI-powered background/character regeneration +function GenerationPanel({ projectId, selectedFrame }: { projectId: number; selectedFrame: number }) { + const [bgPrompt, setBgPrompt] = useState("Redessiner cet arrière-plan dans un style Studio Ghibli, couleurs douces et atmosphère onirique"); + const [charPrompt, setCharPrompt] = useState("Redessiner ce personnage dans un style moderne, lignes nettes et couleurs vives"); + const [bgStyle, setBgStyle] = useState("Studio Ghibli"); + const [resultUrl, setResultUrl] = useState(null); + + const { data: characters } = trpc.characters.list.useQuery({ projectId }); + const [selectedCharId, setSelectedCharId] = useState(); + + const regenBg = trpc.generation.regenerateBackground.useMutation({ + onSuccess: (data) => { + setResultUrl(data.resultUrl); + toast.success("Arrière-plan regénéré !"); + }, + onError: (err) => toast.error(`Erreur: ${err.message}`), + }); + + const regenChar = trpc.generation.regenerateCharacter.useMutation({ + onSuccess: (data) => { + setResultUrl(data.resultUrl); + toast.success("Personnage redessiné !"); + }, + onError: (err) => toast.error(`Erreur: ${err.message}`), + }); + + const isGenerating = regenBg.isPending || regenChar.isPending; + + return ( + +
+
+ + Frame sélectionnée : #{selectedFrame + 1} +
+ + {/* Background regeneration */} +
+
+ + Regénérer l'arrière-plan +
+