function AiPromptSubmitButton({ text }) { return /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full p-2 bg-[#007BFF] text-white font-arial text-lg rounded hover:bg-[#0056b3]", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, text); } function AiPromptSubmitButtonStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(AiPromptSubmitButton, { text: "Generate AI Prompt", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this })); } function MainComponent() { const [generatedPrompt, setGeneratedPrompt] = React.useState(""); const [imageUrl, setImageUrl] = React.useState(""); const handleSubmit = async (event)=>{ event.preventDefault(); const mainSubject = event.target['main-subject'].value; const artisticStyle = event.target['artistic-style'].value; const colorScheme = event.target['color-scheme'].value; const additionalElements = event.target['additional-elements'].value; const prompt = `Craft a detailed prompt for Midjourney, centered around '${mainSubject}', infused with elements or influences from '${artisticStyle}'. The image should evoke a '${colorScheme}' mood or color palette, and must intricately incorporate '${additionalElements}'. Aim for vivid descriptions and specific details to capture an immersive and compelling visual narrative.`; setGeneratedPrompt(prompt); const chatGptResponse = await fetch('YOUR_CHATGPT_API_ENDPOINT', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer YOUR_API_KEY` }, body: JSON.stringify({ prompt, max_tokens: 1000 }) }); const chatGptData = await chatGptResponse.json(); const detailedPrompt = chatGptData.choices[0].text.trim(); setGeneratedPrompt(detailedPrompt); const dalleResponse = await fetch('YOUR_DALLE_API_ENDPOINT', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer YOUR_API_KEY` }, body: JSON.stringify({ prompt: detailedPrompt, n: 1, size: '1024x1024' }) }); const dalleData = await dalleResponse.json(); const imageUrl = dalleData.data[0].url; setImageUrl(imageUrl); }; return /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-screen bg-[#f4f4f4]", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded-lg shadow-md w-[500px] max-w-full", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-center text-2xl font-arial mb-5", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, "Create Your AI Image Prompt"), /*#__PURE__*/ React.createElement("form", { id: "ai-prompt-form", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "main-subject", className: "block mb-1 font-arial", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, "Describe what the main subject or theme of the image should be:"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "main-subject", name: "main-subject", className: "w-full p-2 border border-[#ddd] rounded", required: true, __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "artistic-style", className: "block mb-1 font-arial", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, "Indicate a specific artistic style or influence for the image:"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "artistic-style", name: "artistic-style", className: "w-full p-2 border border-[#ddd] rounded", required: true, __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "color-scheme", className: "block mb-1 font-arial", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, "Choose a main color scheme or the overall mood of the image:"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "color-scheme", name: "color-scheme", className: "w-full p-2 border border-[#ddd] rounded", required: true, __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "additional-elements", className: "block mb-1 font-arial", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, "Specify any additional elements, background, details, or characteristics:"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "additional-elements", name: "additional-elements", className: "w-full p-2 border border-[#ddd] rounded", required: true, __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement(AiPromptSubmitButton, { text: "Generate AI Prompt", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this })), generatedPrompt && /*#__PURE__*/ React.createElement("div", { id: "generated-prompt", className: "mt-5 p-4 bg-[#e9ecef] rounded font-mono", __source: { fileName: "", lineNumber: 67, columnNumber: 29 }, __self: this }, generatedPrompt), imageUrl && /*#__PURE__*/ React.createElement("div", { id: "generated-image", className: "mt-5 text-center", __source: { fileName: "", lineNumber: 68, columnNumber: 22 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: "Generated AI visual representation", __source: { fileName: "", lineNumber: 68, columnNumber: 77 }, __self: this })))); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 76, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { __source: { fileName: "", lineNumber: 77, columnNumber: 7 }, __self: this })); }