Our Story

${story}

${images.map((img, index) => `

`).join("")} `; try { const response = await fetch("/integrations/pdf-generation/pdf", { method: "POST", body: JSON.stringify({ source: { html: htmlContent } }) }); const pdfBlob = await response.blob(); const url = window.URL.createObjectURL(pdfBlob); const a = document.createElement("a"); a.style.display = "none"; a.href = url; a.download = "children_story.pdf"; document.body.appendChild(a); a.click(); window.URL.revokeObjectURL(url); } catch (error) { console.error("Error exporting to PDF:", error); } }; return /* @__PURE__ */ React.createElement("div", { className: "container mx-auto px-4 py-8" }, /* @__PURE__ */ React.createElement("h1", { className: "text-4xl font-bold mb-6 text-center font-crimson-text" }, "Kids Story Generator"), /* @__PURE__ */ React.createElement("div", { className: "mb-4" }, /* @__PURE__ */ React.createElement("label", { htmlFor: "idea", className: "block text-sm font-medium text-gray-700 mb-2" }, "Story Idea:"), /* @__PURE__ */ React.createElement( "input", { type: "text", id: "idea", name: "idea", value: idea, onChange: (e) => setIdea(e.target.value), className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500", placeholder: "Enter your story idea..." } )), /* @__PURE__ */ React.createElement("div", { className: "mb-4" }, /* @__PURE__ */ React.createElement("label", { htmlFor: "model", className: "block text-sm font-medium text-gray-700 mb-2" }, "Select AI Model:"), /* @__PURE__ */ React.createElement( "select", { id: "model", name: "model", value: selectedModel, onChange: (e) => setSelectedModel(e.target.value), className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" }, /* @__PURE__ */ React.createElement("option", { value: "chat_gpt" }, "ChatGPT"), /* @__PURE__ */ React.createElement("option", { value: "claude" }, "Claude"), /* @__PURE__ */ React.createElement("option", { value: "gemini" }, "Gemini") )), /* @__PURE__ */ React.createElement( "button", { onClick: generateStory, disabled: loading || !idea, className: "w-full bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-50" }, loading ? "Generating..." : "Generate Story" ), story && /* @__PURE__ */ React.createElement("div", { className: "mt-8" }, /* @__PURE__ */ React.createElement("h2", { className: "text-2xl font-bold mb-4" }, "Generated Story:"), /* @__PURE__ */ React.createElement("div", { className: "bg-white shadow-md rounded-lg p-6" }, /* @__PURE__ */ React.createElement("p", { className: "text-gray-800 whitespace-pre-wrap" }, story)), /* @__PURE__ */ React.createElement("div", { className: "mt-6 grid grid-cols-1 md:grid-cols-3 gap-4" }, images.map((img, index) => /* @__PURE__ */ React.createElement("img", { key: index, src: img, alt: `Story illustration ${index + 1}`, className: "w-full h-auto rounded-lg shadow-md" }))), /* @__PURE__ */ React.createElement( "button", { onClick: exportToPDF, className: "mt-6 w-full bg-green-600 text-white py-2 px-4 rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2" }, "Export to PDF" ))); } var page_default = MainComponent; return __toCommonJS(page_exports); })();