function MainComponent() { const [inputPrompt, setInputPrompt] = React.useState(''); const [quote, setQuote] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const fetchBackgroundImage = async ()=>{ setIsLoading(true); try { const bgImageResponse = await fetch('/integrations/stable-diffusion/?prompt=beautiful+AI+generated+image&batch_size=1', { method: 'GET' }); const bgImageData = await bgImageResponse.json(); document.body.style.backgroundImage = `url(${bgImageData.data[0]})`; setIsLoading(false); } catch { setIsLoading(false); } }; React.useEffect(()=>{ fetchBackgroundImage(); }, []); const generateContent = async (e)=>{ e.preventDefault(); setIsLoading(true); const formattedPrompt = `${inputPrompt}`; try { const quoteResponse = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "user", "content": formattedPrompt } ], system_prompt: formattedPrompt, max_tokens: 100 }) }); const quoteData = await quoteResponse.json(); if (quoteData.status) { const quoteContent = quoteData.result.split(/(\s+)/).filter((e)=>e.trim().length > 0); if (quoteContent.length <= 40 && /[\u{1F600}-\u{1F64F}]/u.test(quoteData.result)) { setQuote(`"${quoteData.result}"`); } else { setQuote("Please try a different prompt."); } } else { setQuote('Unable to generate a quote at this time.'); } setIsLoading(false); } catch { setQuote('There was an error processing your request.'); setIsLoading(false); } }; const contentSection = quote && /*#__PURE__*/ React.createElement("div", { className: "w-full h-[400px] flex items-center justify-center p-4", __source: { fileName: "", lineNumber: 61, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("blockquote", { className: "text-md font-roboto text-white text-center", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, quote)); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen p-4 bg-cover bg-center", __source: { fileName: "", lineNumber: 69, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-roboto font-bold text-[#000000] mb-8", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, "Quote Generator"), /*#__PURE__*/ React.createElement("form", { onSubmit: generateContent, className: "w-full max-w-sm mb-4", __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "prompt", className: "w-full p-4 text-md font-roboto border-2 border-gray-300 rounded-md mb-4", placeholder: "Enter your inspirational prompt", value: inputPrompt, onChange: (e)=>setInputPrompt(e.target.value), disabled: isLoading, __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: `w-full p-4 font-roboto rounded-md text-white ${isLoading ? 'bg-gray-500' : 'bg-blue-500 hover:bg-blue-700'}`, disabled: isLoading, __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, isLoading ? 'Loading...' : 'Generate Quote')), contentSection, /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-3 right-3", __source: { fileName: "", lineNumber: 92, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-xs font-roboto font-bold text-red-600", __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }, "Designed By Surya Pratap Patra"))); }