"use client"; function MainComponent() { const [storyInput, setStoryInput] = React.useState(""); const [story, setStory] = React.useState([]); const [nextInput, setNextInput] = React.useState(""); const [loadingGenerate, setLoadingGenerate] = React.useState(false); const [loadingRegenerate, setLoadingRegenerate] = React.useState(false); const [loadingImage, setLoadingImage] = React.useState(null); const [loadingSpeech, setLoadingSpeech] = React.useState(null); const [error, setError] = React.useState(null); const [rateLimit, setRateLimit] = React.useState("100 requests per hour"); const [images, setImages] = React.useState({}); const [selectedWord, setSelectedWord] = React.useState(""); const [synonyms, setSynonyms] = React.useState([]); const [currentAudio, setCurrentAudio] = React.useState(null); const [isPlaying, setIsPlaying] = React.useState(false); const [currentPlayingIndex, setCurrentPlayingIndex] = React.useState(null); const [sdkLoaded, setSdkLoaded] = React.useState(false); const [sdkError, setSdkError] = React.useState(null); const [sdkLoading, setSdkLoading] = React.useState(true); React.useEffect(()=>{ const loadSDK = async ()=>{ return new Promise((resolve, reject)=>{ try { const existingScript = document.querySelector('script[src="https://js.puter.com/v2/"]'); if (existingScript) { if (window.puter) { setSdkLoaded(true); resolve(); return; } document.body.removeChild(existingScript); } const script = document.createElement("script"); script.src = "https://js.puter.com/v2/"; script.async = true; script.onload = ()=>{ if (window.puter) { setSdkLoaded(true); resolve(); } else { reject(new Error("Puter SDK failed to initialize")); } }; script.onerror = ()=>{ reject(new Error("Failed to load Puter SDK")); }; document.body.appendChild(script); } catch (error) { reject(new Error("Error initializing Puter SDK: " + error.message)); } }); }; const initSDK = async ()=>{ try { await loadSDK(); setSdkLoading(false); } catch (error) { setSdkError(error.message); setSdkLoading(false); } }; initSDK(); return ()=>{ if (currentAudio) { currentAudio.pause(); currentAudio.currentTime = 0; setCurrentAudio(null); setIsPlaying(false); setCurrentPlayingIndex(null); } const script = document.querySelector('script[src="https://js.puter.com/v2/"]'); if (script) { document.body.removeChild(script); } }; }, []); const stopCurrentAudio = ()=>{ if (currentAudio) { currentAudio.pause(); currentAudio.currentTime = 0; setCurrentAudio(null); setIsPlaying(false); setCurrentPlayingIndex(null); } }; const readAloud = async (text, index)=>{ try { if (!sdkLoaded || !window.puter) { throw new Error("Text-to-speech service is not available yet. Please wait for it to load or refresh the page."); } if (currentPlayingIndex === index && isPlaying) { stopCurrentAudio(); return; } stopCurrentAudio(); setLoadingSpeech(index); setError(null); try { const audio = await window.puter.ai.txt2speech(text); if (!audio) { throw new Error("Failed to generate speech audio"); } audio.onended = ()=>{ setIsPlaying(false); setCurrentPlayingIndex(null); setCurrentAudio(null); }; await audio.play(); setCurrentAudio(audio); setIsPlaying(true); setCurrentPlayingIndex(index); setLoadingSpeech(null); } catch (error) { throw new Error("Failed to play audio: " + error.message); } } catch (error) { setError("Error with text-to-speech: " + error.message); setLoadingSpeech(null); setIsPlaying(false); setCurrentPlayingIndex(null); setCurrentAudio(null); } }; const generateStory = ()=>{ if (!storyInput.trim() && !nextInput.trim()) { setError("Please enter a story idea or instruction."); return; } setLoadingGenerate(true); setError(null); const lastParagraph = story.length > 0 ? story[story.length - 1] : ""; const previousContext = story.slice(0, -1).join("\n\n"); const currentContext = `Previous story: ${previousContext}\n\nContinue directly from this last part: ${lastParagraph} ${nextInput}`.trim(); const addedSuggestion = nextInput ? `User Suggestion: ${nextInput}` : ""; const requestPayload = { query: `Reminders: - NEVER try to "wrap up" the story. Avoid repetitive and cliche or hackneyed phrases. Avoid excessive and pretentious 'purple prose'. NEVER repeat earlier events. - In general, try to stay in the present moment and explore it extensively. Never rush to finish a scene. Take it slow, and explore the present moment with vivid, grounded, and riveting explorations of the current situation. - Show, don't tell. In other words, don't boringly "tell" the reader things directly. This isn't a summary. Instead, let them slowly work out what's going on from the clues you leave in dialogue, character behavior, descriptions, etc. - Your writing should be interesting, authentic, vividly descriptive, lean/crisp/unpretentious, engaging, logically coherent, and delightfully creative. - Start the story in an unusual and interesting way. Lead into it from an unexpected angle. Don't be predictable and boring. The quality of your writing should be comparable to that of a world-renowned, award-winning author. Original, subtle, engaging, authentic, grounded, lean/unpretentious, nuanced. - IMPORTANT: Generate only 2 or 3 sentences that creatively continue from the last point without repeating: **${currentContext}**. ${addedSuggestion} Use 'OVERVIEW' to intuit the desired story arc: ${storyInput}.`, method: "GET" }; fetch("/api/chat-api-fetcher", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(requestPayload) }).then((response)=>{ if (!response.ok) { throw new Error("Network response was not ok"); } return response.json(); }).then((data)=>{ if (data && data.results) { const newStoryPart = nextInput ? `**User Suggestion:** ${nextInput}\n\n${data.results}` : `${data.results}`; setStory((prevStory)=>[ ...prevStory, newStoryPart ]); setNextInput(""); } else if (data.error) { setError("API Error: " + data.error); } else { setError("Unexpected response format from API."); } setLoadingGenerate(false); }).catch((error)=>{ setError("Error: " + error.message); setLoadingGenerate(false); }); }; const regenerateLastReply = ()=>{ if (story.length === 0) { setError("No previous reply to regenerate."); return; } setLoadingRegenerate(true); setError(null); const lastPrompt = story[story.length - 1].trim(); const requestPayload = { query: `Regenerate the last reply: **${lastPrompt}**`, method: "GET" }; fetch("/api/chat-api-fetcher", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(requestPayload) }).then((response)=>{ if (!response.ok) { throw new Error("Network response was not ok"); } return response.json(); }).then((data)=>{ if (data && data.results) { const regeneratedStoryPart = `${data.results}`; setStory((prevStory)=>[ ...prevStory.slice(0, -1), regeneratedStoryPart ]); } else if (data.error) { setError("API Error: " + data.error); } else { setError("Unexpected response format from API."); } setLoadingRegenerate(false); }).catch((error)=>{ setError("Error: " + error.message); setLoadingRegenerate(false); }); }; const generateImage = (paragraph, index)=>{ setLoadingImage(index); fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(paragraph)}`, { method: "GET" }).then((response)=>response.json()).then((data)=>{ if (data && data.data) { setImages((prevImages)=>({ ...prevImages, [index]: data.data[0] })); } else { setError("Failed to generate image."); } setLoadingImage(null); }).catch((error)=>{ setError("Error: " + error.message); setLoadingImage(null); }); }; const deleteImage = (index)=>{ setImages((prevImages)=>{ const newImages = { ...prevImages }; delete newImages[index]; return newImages; }); }; const fetchSynonyms = (word)=>{ const mockSynonyms = { quick: [ "fast", "swift", "speedy" ], happy: [ "joyful", "content", "pleased" ] }; setSynonyms(mockSynonyms[word] || []); }; const handleWordSelect = (word)=>{ setSelectedWord(word); fetchSynonyms(word); }; const handleParagraphChange = (index, newText)=>{ setStory((prevStory)=>prevStory.map((paragraph, i)=>i === index ? newText : paragraph)); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#121212] text-white", __source: { fileName: "", lineNumber: 302, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-lg mx-auto p-6 space-y-6 bg-[#1e1e1e] shadow-md rounded-lg", __source: { fileName: "", lineNumber: 303, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center text-sm text-gray-400", __source: { fileName: "", lineNumber: 304, columnNumber: 9 }, __self: this }, "Rate Limit: ", rateLimit), /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-center text-[#4f83cc]", __source: { fileName: "", lineNumber: 307, columnNumber: 9 }, __self: this }, "AI Story and Image Generator"), /*#__PURE__*/ React.createElement("textarea", { className: "w-full p-3 border border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-[#4f83cc] bg-[#2e2e2e] text-white", rows: "5", placeholder: "Enter your initial story idea or instruction...", value: storyInput, onChange: (e)=>setStoryInput(e.target.value), __source: { fileName: "", lineNumber: 310, columnNumber: 9 }, __self: this }), story.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "p-8 bg-[#2e2e2e] border border-gray-600 rounded-lg whitespace-pre-wrap text-white", __source: { fileName: "", lineNumber: 318, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { className: "text-lg text-[#4f83cc] block mb-2", __source: { fileName: "", lineNumber: 319, columnNumber: 13 }, __self: this }, "Generated Story:"), story.map((paragraph, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mt-4 flex flex-col space-y-2", __source: { fileName: "", lineNumber: 323, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { className: "w-full p-3 bg-transparent border border-gray-500 rounded-lg resize-none focus:outline-none focus:ring focus:ring-[#4f83cc] text-white", value: paragraph, onChange: (e)=>handleParagraphChange(index, e.target.value), rows: Math.max(15, paragraph.split("\n").length), style: { minHeight: "300px" }, __source: { fileName: "", lineNumber: 324, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 331, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>generateImage(paragraph, index), className: `text-[#4f83cc] hover:text-[#3a6b99] ${loadingImage === index ? "animate-spin" : ""}`, disabled: loadingImage === index, __source: { fileName: "", lineNumber: 332, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-image", __source: { fileName: "", lineNumber: 339, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>currentPlayingIndex === index && isPlaying ? stopCurrentAudio() : readAloud(paragraph, index), className: `text-[#4f83cc] hover:text-[#3a6b99] ${loadingSpeech === index ? "opacity-50" : ""}`, disabled: loadingSpeech === index, __source: { fileName: "", lineNumber: 341, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${loadingSpeech === index ? "fa-spinner fa-spin" : currentPlayingIndex === index && isPlaying ? "fa-stop" : "fa-volume-up"}`, __source: { fileName: "", lineNumber: 352, columnNumber: 21 }, __self: this })), images[index] && /*#__PURE__*/ React.createElement("div", { className: "mt-2 w-full", __source: { fileName: "", lineNumber: 363, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: images[index], alt: "Generated from story", className: "w-full rounded-lg", __source: { fileName: "", lineNumber: 364, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2 mt-2", __source: { fileName: "", lineNumber: 369, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>generateImage(paragraph, index), className: "px-4 py-2 font-bold text-white bg-[#4f83cc] rounded-lg hover:bg-[#3a6b99]", disabled: loadingImage !== null, __source: { fileName: "", lineNumber: 370, columnNumber: 25 }, __self: this }, loadingImage !== null ? "Regenerating Image..." : "Regenerate Image"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>deleteImage(index), className: "px-4 py-2 font-bold text-white bg-[#cc4f4f] rounded-lg hover:bg-[#993a3a]", __source: { fileName: "", lineNumber: 379, columnNumber: 25 }, __self: this }, "Delete Image"))))))), /*#__PURE__*/ React.createElement("textarea", { className: "w-full p-3 border border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-[#4f83cc] bg-[#2e2e2e] text-white", rows: "8", placeholder: "Suggest what happens next or leave empty to continue...", value: nextInput, onChange: (e)=>setNextInput(e.target.value), __source: { fileName: "", lineNumber: 393, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: generateStory, className: `w-full px-4 py-2 font-bold text-white rounded-lg ${loadingGenerate ? "bg-gray-500 cursor-not-allowed" : "bg-[#4f83cc] hover:bg-[#3a6b99]"}`, disabled: loadingGenerate, __source: { fileName: "", lineNumber: 400, columnNumber: 9 }, __self: this }, loadingGenerate ? "Generating..." : "Generate Next Part"), /*#__PURE__*/ React.createElement("button", { onClick: regenerateLastReply, className: `w-full px-4 py-2 font-bold text-white bg-[#cc4f4f] rounded-lg hover:bg-[#993a3a] mt-2 ${loadingRegenerate ? "cursor-not-allowed" : ""}`, disabled: loadingRegenerate, __source: { fileName: "", lineNumber: 411, columnNumber: 9 }, __self: this }, loadingRegenerate ? "Regenerating..." : "Regenerate Last Reply"), error && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-center", __source: { fileName: "", lineNumber: 420, columnNumber: 19 }, __self: this }, error), sdkLoading && /*#__PURE__*/ React.createElement("p", { className: "text-yellow-500 text-center", __source: { fileName: "", lineNumber: 422, columnNumber: 11 }, __self: this }, "Loading text-to-speech capabilities..."), sdkError && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-center", __source: { fileName: "", lineNumber: 427, columnNumber: 11 }, __self: this }, "Text-to-speech is currently unavailable: ", sdkError), selectedWord && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 bg-[#2e2e2e] border border-gray-600 rounded-lg", __source: { fileName: "", lineNumber: 432, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold text-[#4f83cc]", __source: { fileName: "", lineNumber: 433, columnNumber: 13 }, __self: this }, 'Synonyms for "', selectedWord, '":'), /*#__PURE__*/ React.createElement("ul", { className: "list-disc list-inside", __source: { fileName: "", lineNumber: 436, columnNumber: 13 }, __self: this }, synonyms.map((synonym, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 438, columnNumber: 17 }, __self: this }, synonym))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 444, columnNumber: 7 }, __self: this }, ` .animate-spin { animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } `)); }