function MainComponent() { const [counters, setCounters] = React.useState([ { id: 1, count: 0 } ]); const [loading, setLoading] = React.useState(false); const [image, setImage] = React.useState(null); const [chatResponse, setChatResponse] = React.useState(null); const [geminiResponse, setGeminiResponse] = React.useState(null); const [cohereResponse, setCohereResponse] = React.useState(null); const incrementCounter = (id)=>{ setCounters((prevCounters)=>prevCounters.map((counter)=>counter.id === id ? { ...counter, count: counter.count + 1 } : counter)); }; const addCounter = ()=>{ setCounters([ ...counters, { id: counters.length + 1, count: 0 } ]); }; const fetchStableDiffusion = async (prompt)=>{ setLoading(true); const response = await fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(prompt)}`, { method: 'GET' }); const data = await response.json(); setImage(data.data[0]); setLoading(false); }; const fetchChatGPT = async (messages, systemPrompt)=>{ setLoading(true); const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages, system_prompt: systemPrompt }) }); const data = await response.json(); setChatResponse(data.choices[0].message.content); setLoading(false); }; const fetchGemini = async (messages)=>{ setLoading(true); const response = await fetch('/integrations/google-gemini-1-5/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages }) }); const data = await response.json(); setGeminiResponse(data.choices[0].message.content); setLoading(false); }; const fetchCohere = async (messages)=>{ setLoading(true); const response = await fetch('/integrations/cohere-command-r-plus/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages }) }); const data = await response.json(); setCohereResponse(data.choices[0].message.content); setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-4 p-4", __source: { fileName: "", lineNumber: 69, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "border bg-blue-500 text-white p-2", onClick: addCounter, __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, "Add Counter"), counters.map((counter)=>/*#__PURE__*/ React.createElement("div", { key: counter.id, className: "flex space-x-4 items-center", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, counter.count), /*#__PURE__*/ React.createElement("button", { className: "border bg-green-500 text-white p-2", onClick: ()=>incrementCounter(counter.id), __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, "Tap"))), /*#__PURE__*/ React.createElement("button", { className: "border bg-purple-500 text-white p-2 mt-4", onClick: ()=>fetchStableDiffusion('image prompt'), __source: { fileName: "", lineNumber: 83, columnNumber: 7 }, __self: this }, "Generate Image"), loading && /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 86, columnNumber: 19 }, __self: this }, "Loading..."), image && /*#__PURE__*/ React.createElement("img", { src: image, alt: "Generated by Stable Diffusion", className: "w-[400px] h-[400px]", __source: { fileName: "", lineNumber: 87, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "border bg-yellow-500 text-white p-2 mt-4", onClick: ()=>fetchChatGPT([ { role: 'user', content: 'Hello' } ], 'System Prompt'), __source: { fileName: "", lineNumber: 89, columnNumber: 7 }, __self: this }, "Get ChatGPT Response"), chatResponse && /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 92, columnNumber: 24 }, __self: this }, chatResponse), /*#__PURE__*/ React.createElement("button", { className: "border bg-red-500 text-white p-2 mt-4", onClick: ()=>fetchGemini([ { role: 'user', content: 'Hello' } ]), __source: { fileName: "", lineNumber: 94, columnNumber: 7 }, __self: this }, "Get Gemini Response"), geminiResponse && /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 97, columnNumber: 26 }, __self: this }, geminiResponse), /*#__PURE__*/ React.createElement("button", { className: "border bg-gray-500 text-white p-2 mt-4", onClick: ()=>fetchCohere([ { role: 'user', content: 'Hello' } ]), __source: { fileName: "", lineNumber: 99, columnNumber: 7 }, __self: this }, "Get Cohere Response"), cohereResponse && /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 102, columnNumber: 26 }, __self: this }, cohereResponse)); }