function MainComponent() { const [prompt, setPrompt] = useState(""); const [style, setStyle] = useState("cartoon"); const [generating, setGenerating] = useState(false); const [language, setLanguage] = useState("en"); const [streamingMessage, setStreamingMessage] = useState(""); const [comicPages, setComicPages] = useState([]); const [currentPage, setCurrentPage] = useState(0); const [generatedCount, setGeneratedCount] = useState(0); const [usageCount, setUsageCount] = useState(0); const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingMessage, onFinish: (message)=>{ setStreamingMessage(""); } }); useEffect(()=>{ const count = parseInt(localStorage.getItem("usageCount") || "0"); setUsageCount(count); if (count >= 3) { window.location.href = "https://buy.stripe.com/dR628pfLM3IG6CQaEF"; return; } }, []); const generateComic = useCallback(async ()=>{ if (!prompt) return; const currentCount = parseInt(localStorage.getItem("usageCount") || "0"); if (currentCount >= 3) { window.location.href = "https://buy.stripe.com/dR628pfLM3IG6CQaEF"; return; } setGenerating(true); setGeneratedCount(0); try { const storyResponse = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "system", content: `You are a professional comic book writer and artist. Create detailed, engaging narratives with consistent character development and visual descriptions. Focus on maintaining character continuity across pages. All text must be in ${language === "en" ? "English" : "French"} only.` }, { role: "user", content: `Create a detailed comic story with 6 panels based on: ${prompt}. For page ${currentPage + 1}, provide rich dialogue and specific visual descriptions. Maintain exact character consistency with previous pages. Use only ${language === "en" ? "English" : "French"} for all text and descriptions.` } ], json_schema: { name: "comic_story", schema: { type: "object", properties: { scenes: { type: "array", minItems: 6, maxItems: 6, items: { type: "object", properties: { description: { type: "string" }, dialogue: { type: "string" }, mood: { type: "string" }, characters: { type: "array", items: { type: "string" } }, characterDescriptions: { type: "object", properties: { appearance: { type: "string" }, pose: { type: "string" }, expression: { type: "string" }, clothing: { type: "string" }, uniqueFeatures: { type: "string" }, colorScheme: { type: "string" }, artStyle: { type: "string" } }, required: [ "appearance", "pose", "expression", "clothing", "uniqueFeatures", "colorScheme", "artStyle" ], additionalProperties: false }, panelNumber: { type: "number" }, visualNotes: { type: "string" }, backgroundDetails: { type: "string" }, styleGuide: { type: "string" } }, required: [ "description", "dialogue", "mood", "characters", "characterDescriptions", "panelNumber", "visualNotes", "backgroundDetails", "styleGuide" ], additionalProperties: false } }, storyContext: { type: "string" }, characterRegistry: { type: "object", properties: { mainCharacters: { type: "array", items: { type: "object", properties: { name: { type: "string" }, baseDescription: { type: "string" }, consistentFeatures: { type: "string" }, visualStyle: { type: "string" } }, required: [ "name", "baseDescription", "consistentFeatures", "visualStyle" ], additionalProperties: false } }, globalStyle: { type: "string" } }, required: [ "mainCharacters", "globalStyle" ], additionalProperties: false } }, required: [ "scenes", "storyContext", "characterRegistry" ], additionalProperties: false } } }) }); const storyData = await storyResponse.json(); const { scenes, storyContext, characterRegistry } = JSON.parse(storyData.choices[0].message.content); const imagePromises = scenes.map(async (scene)=>{ const characterDetails = scene.characters.map((char)=>{ const mainChar = characterRegistry.mainCharacters.find((c)=>c.name === char); return mainChar ? `${char}: ${mainChar.baseDescription}, ${mainChar.consistentFeatures}` : char; }).join("\n"); const enhancedPrompt = `Create a high-quality ${style} style comic panel with these exact specifications: Scene: ${scene.description} Mood: ${scene.mood} Characters: ${characterDetails} Character Appearance: ${scene.characterDescriptions.appearance} Expression: ${scene.characterDescriptions.expression} Pose: ${scene.characterDescriptions.pose} Clothing: ${scene.characterDescriptions.clothing} Unique Features: ${scene.characterDescriptions.uniqueFeatures} Color Scheme: ${scene.characterDescriptions.colorScheme} Art Style: ${scene.characterDescriptions.artStyle} Background: ${scene.backgroundDetails} Visual Notes: ${scene.visualNotes} Style Guide: ${scene.styleGuide} Global Style: ${characterRegistry.globalStyle} Panel ${scene.panelNumber}/6 Style Requirements: - ${style === "cartoon" ? "Vibrant colors, expressive features, clean lines, consistent character design, maintain exact style from previous panels" : style === "manga" ? "Strong contrast, dynamic poses, manga-specific elements, consistent character design, maintain exact style from previous panels" : "Photorealistic textures, natural lighting, detailed expressions, consistent character design, maintain exact style from previous panels"} - Professional comic quality - Perfect character consistency with previous panels - Exact same art style as previous panels - Clear storytelling - 4K quality Language: ${language === "en" ? "English" : "French"}`; const imageResponse = await fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(enhancedPrompt)}`); const imageData = await imageResponse.json(); setGeneratedCount(scene.panelNumber); return { image: imageData.data[0], dialog: scene.dialogue, panelNumber: scene.panelNumber, characters: scene.characters, characterDescriptions: scene.characterDescriptions, backgroundDetails: scene.backgroundDetails, styleGuide: scene.styleGuide }; }); const newComic = await Promise.all(imagePromises); const newPages = [ ...comicPages ]; newPages[currentPage] = newComic; setComicPages(newPages); const newCount = usageCount + 1; setUsageCount(newCount); localStorage.setItem("usageCount", newCount.toString()); if (newCount >= 3) { window.location.href = "https://buy.stripe.com/dR628pfLM3IG6CQaEF"; return; } } catch (error) { console.error(error); } finally{ setGenerating(false); setGeneratedCount(0); } }, [ prompt, style, language, currentPage, comicPages, usageCount ]); const downloadComic = useCallback(()=>{ const comicContainer = document.createElement("div"); comicContainer.style.padding = "20px"; comicContainer.style.backgroundColor = "white"; comicPages.forEach((page, pageIndex)=>{ if (!page) return; const pageDiv = document.createElement("div"); pageDiv.style.marginBottom = "40px"; const pageTitle = document.createElement("h2"); pageTitle.textContent = `Page ${pageIndex + 1}`; pageDiv.appendChild(pageTitle); const gridDiv = document.createElement("div"); gridDiv.style.display = "grid"; gridDiv.style.gridTemplateColumns = "repeat(auto-fit, minmax(300px, 1fr))"; gridDiv.style.gap = "20px"; page.forEach((frame)=>{ const frameDiv = document.createElement("div"); frameDiv.style.marginBottom = "20px"; const img = document.createElement("img"); img.src = frame.image; img.style.width = "100%"; img.style.maxWidth = "400px"; const text = document.createElement("p"); text.textContent = frame.dialog; text.style.margin = "10px 0"; frameDiv.appendChild(img); frameDiv.appendChild(text); gridDiv.appendChild(frameDiv); }); pageDiv.appendChild(gridDiv); comicContainer.appendChild(pageDiv); }); const blob = new Blob([ comicContainer.outerHTML ], { type: "text/html" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = "my-comic.html"; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); }, [ comicPages ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-purple-900 via-purple-700 to-purple-500 p-4", __source: { fileName: "", lineNumber: 295, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto space-y-6", __source: { fileName: "", lineNumber: 296, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#111] rounded-lg shadow-lg p-6", __source: { fileName: "", lineNumber: 297, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold font-crimson-text mb-4 text-white text-center", __source: { fileName: "", lineNumber: 298, columnNumber: 11 }, __self: this }, "Magic Comic"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 302, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 mb-4", __source: { fileName: "", lineNumber: 303, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentPage(Math.max(0, currentPage - 1)), disabled: currentPage === 0, className: "bg-[#4a90e2] hover:bg-[#357abd] text-white font-bold py-2 px-4 rounded-lg disabled:opacity-50", __source: { fileName: "", lineNumber: 304, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-left mr-2", __source: { fileName: "", lineNumber: 309, columnNumber: 17 }, __self: this }), language === "en" ? "Previous Page" : "Page Précédente"), /*#__PURE__*/ React.createElement("span", { className: "flex-1 text-center text-white py-2 text-xl", __source: { fileName: "", lineNumber: 312, columnNumber: 15 }, __self: this }, currentPage + 1, "/6"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentPage(currentPage + 1), className: "bg-[#4a90e2] hover:bg-[#357abd] text-white font-bold py-2 px-4 rounded-lg", __source: { fileName: "", lineNumber: 315, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-right mr-2", __source: { fileName: "", lineNumber: 319, columnNumber: 17 }, __self: this }), language === "en" ? "Next Page" : "Page Suivante")), /*#__PURE__*/ React.createElement("textarea", { value: prompt, onChange: (e)=>setPrompt(e.target.value), className: "w-full p-3 border rounded-lg h-32 bg-[#222] text-white", placeholder: language === "en" ? "Describe your comic story..." : "Décrivez votre histoire...", name: "prompt", __source: { fileName: "", lineNumber: 324, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 336, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("select", { value: style, onChange: (e)=>setStyle(e.target.value), className: "w-1/2 p-3 border rounded-lg bg-[#222] text-white", name: "style", __source: { fileName: "", lineNumber: 337, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "cartoon", __source: { fileName: "", lineNumber: 343, columnNumber: 17 }, __self: this }, language === "en" ? "Cartoon" : "Dessin animé"), /*#__PURE__*/ React.createElement("option", { value: "manga", __source: { fileName: "", lineNumber: 346, columnNumber: 17 }, __self: this }, "Manga"), /*#__PURE__*/ React.createElement("option", { value: "realistic", __source: { fileName: "", lineNumber: 347, columnNumber: 17 }, __self: this }, language === "en" ? "Realistic" : "Réaliste")), /*#__PURE__*/ React.createElement("select", { value: language, onChange: (e)=>setLanguage(e.target.value), className: "w-1/2 p-3 border rounded-lg bg-[#222] text-white", name: "language", __source: { fileName: "", lineNumber: 351, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "en", __source: { fileName: "", lineNumber: 357, columnNumber: 17 }, __self: this }, "English"), /*#__PURE__*/ React.createElement("option", { value: "fr", __source: { fileName: "", lineNumber: 358, columnNumber: 17 }, __self: this }, "Français"))), /*#__PURE__*/ React.createElement("button", { onClick: generateComic, disabled: generating || !prompt, className: "w-full bg-[#4a90e2] hover:bg-[#357abd] text-white font-bold py-3 px-6 rounded-lg disabled:opacity-50", __source: { fileName: "", lineNumber: 362, columnNumber: 13 }, __self: this }, generating ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 369, columnNumber: 19 }, __self: this }), language === "en" ? `Generating Panel ${generatedCount + 1}...` : `Génération du Panneau ${generatedCount + 1}...`) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-magic mr-2", __source: { fileName: "", lineNumber: 376, columnNumber: 19 }, __self: this }), language === "en" ? "Generate Comic" : "Générer la BD")))), comicPages[currentPage]?.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "bg-[#111] rounded-lg shadow-lg p-6", __source: { fileName: "", lineNumber: 385, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 386, columnNumber: 13 }, __self: this }, comicPages[currentPage].sort((a, b)=>a.panelNumber - b.panelNumber).map((frame, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "border border-gray-700 rounded-lg p-2", __source: { fileName: "", lineNumber: 390, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-white text-sm mb-2", __source: { fileName: "", lineNumber: 394, columnNumber: 21 }, __self: this }, "Scene ", frame.panelNumber, "/6"), /*#__PURE__*/ React.createElement("img", { src: frame.image, alt: `Comic frame ${frame.panelNumber}`, className: "w-full h-[200px] object-cover rounded-lg", __source: { fileName: "", lineNumber: 397, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { value: frame.dialog, onChange: (e)=>{ const newPages = [ ...comicPages ]; newPages[currentPage][index].dialog = e.target.value; setComicPages(newPages); }, className: "w-full mt-2 p-2 rounded bg-[#222] text-white", placeholder: language === "en" ? "Add dialog..." : "Ajouter un dialogue...", name: `dialog-${index}`, __source: { fileName: "", lineNumber: 402, columnNumber: 21 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 mt-4", __source: { fileName: "", lineNumber: 420, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: downloadComic, className: "bg-[#4a90e2] hover:bg-[#357abd] text-white font-bold py-2 px-4 rounded-lg", __source: { fileName: "", lineNumber: 421, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download mr-2", __source: { fileName: "", lineNumber: 425, columnNumber: 17 }, __self: this }), language === "en" ? "Download Comic" : "Télécharger la BD"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>window.print(), className: "bg-[#4a90e2] hover:bg-[#357abd] text-white font-bold py-2 px-4 rounded-lg", __source: { fileName: "", lineNumber: 428, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-print mr-2", __source: { fileName: "", lineNumber: 432, columnNumber: 17 }, __self: this }), language === "en" ? "Print Comic" : "Imprimer la BD"))))); }