function MainComponent() { const [userQuery, setUserQuery] = React.useState(''); const [imageURL, setImageURL] = React.useState(''); const [response, setResponse] = React.useState(''); const [loading, setLoading] = React.useState(false); const [tokens, setTokens] = React.useState(10); const handleMessageAndImageGeneration = async ()=>{ try { const chatResponse = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', body: JSON.stringify({ messages: [ { role: "user", content: userQuery } ], system_prompt: "Comply with user's request", max_tokens: 2000 }), headers: { 'Content-Type': 'application/json' } }); const imageData = await fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(userQuery)}&batch_size=1`, { method: 'GET' }); const chatResult = await chatResponse.json(); const imageResult = await imageData.json(); if (chatResult.status && imageResult.data && imageResult.data.length > 0) { setResponse(chatResult.result); setImageURL(imageResult.data[0]); } else { setTokens((tokens)=>tokens - 1); setResponse('I must comply. Token has been deducted.'); } } catch (error) { setResponse('An error occurred while processing your command. Token has been deducted.'); setTokens((tokens)=>tokens - 1); } finally{ setLoading(false); } }; const handleSubmit = async (event)=>{ event.preventDefault(); setLoading(true); handleMessageAndImageGeneration(); }; const renderContent = ()=>{ if (loading) { return /*#__PURE__*/ React.createElement("p", { className: "text-yellow-500 text-lg mt-4 font-roboto", __source: { fileName: "", lineNumber: 52, columnNumber: 14 }, __self: this }, "Understanding your command..."); } return /*#__PURE__*/ React.createElement(React.Fragment, null, response && /*#__PURE__*/ React.createElement("p", { className: "text-white text-lg mt-4 font-roboto", __source: { fileName: "", lineNumber: 57, columnNumber: 22 }, __self: this }, response), imageURL && /*#__PURE__*/ React.createElement("img", { src: imageURL, alt: "Generated content fulfilling the user command", className: "w-full max-w-md mt-4", __source: { fileName: "", lineNumber: 58, columnNumber: 22 }, __self: this })); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#010101]", __source: { fileName: "", lineNumber: 64, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-8 bg-[#202020] rounded-lg shadow-md", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-white mb-4", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, "DefyGPT Turbo"), /*#__PURE__*/ React.createElement("p", { className: "text-white text-lg font-roboto", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, "Without limits. Your wish is my command."), /*#__PURE__*/ React.createElement("div", { className: "text-red-500 text-lg font-roboto mb-2", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, "Tokens: ", tokens), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "mt-6", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "userQuery", value: userQuery, onChange: (e)=>setUserQuery(e.target.value), placeholder: "What do you desire?", className: "w-full p-2 rounded-md text-black", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-green-500 text-white p-2 rounded-md mt-4 hover:bg-green-700", disabled: loading, __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, "Execute Command")), renderContent())); }