function MainComponent() { const [dialog, setDialog] = React.useState("¡Hola! ¿Cómo estás?"); const [pokemons, setPokemons] = React.useState([]); const [npcs, setNpcs] = React.useState([]); const [isLoading, setIsLoading] = React.useState(false); const fetchPokemons = async ()=>{ setIsLoading(true); const prompt = "pixel style new Pokémon characters"; const response = await fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(prompt)}`, { method: 'GET' }); const data = await response.json(); setPokemons(data.data); setIsLoading(false); }; const fetchNPCs = async ()=>{ setIsLoading(true); const prompt = "NPCs for Pokémon game, pixel art"; const response = await fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(prompt)}`, { method: 'GET' }); const data = await response.json(); setNpcs(data.data); setIsLoading(false); }; const fetchDialog = async ()=>{ setIsLoading(true); const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "user", "content": "Give dialogues for NPCs in a Pokémon game in Spanish" } ] }) }); const data = await response.json(); setDialog(data.choices[0].message.content); setIsLoading(false); }; React.useEffect(()=>{ fetchPokemons(); fetchNPCs(); fetchDialog(); }, []); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center w-full h-full bg-green-500 font-pixelated", __source: { fileName: "", lineNumber: 52, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center w-full mt-5", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-red-500 text-white font-bold py-2 px-4 m-2", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, "A"), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white font-bold py-2 px-4 m-2", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, "B"), /*#__PURE__*/ React.createElement("button", { className: "bg-gray-500 text-white font-bold py-2 px-4 m-2", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, "Select"), /*#__PURE__*/ React.createElement("button", { className: "bg-gray-500 text-white font-bold py-2 px-4 m-2", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, "Start"), /*#__PURE__*/ React.createElement("button", { className: "bg-yellow-500 text-white font-bold py-2 px-4 m-2", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, "R"), /*#__PURE__*/ React.createElement("button", { className: "bg-yellow-500 text-white font-bold py-2 px-4 m-2", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, "L"), /*#__PURE__*/ React.createElement("button", { className: "bg-purple-500 text-white font-bold py-2 px-4 m-2", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, "Y")), /*#__PURE__*/ React.createElement("div", { className: "w-[500px] h-[300px] border-4 border-black bg-[#1e8b1e] flex items-center justify-center", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, isLoading ? /*#__PURE__*/ React.createElement("p", { className: "text-white text-center", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, "Cargando...") : /*#__PURE__*/ React.createElement("p", { className: "text-white text-center", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, dialog)), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center mt-5", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, pokemons.map((pokemon, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "w-[150px] h-[150px] m-2 border-2 border-black bg-white", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: pokemon, alt: `Pixel style new Pokémon ${index + 1}`, className: "w-full h-full", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center mt-5", __source: { fileName: "", lineNumber: 76, columnNumber: 7 }, __self: this }, npcs.map((npc, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "w-[150px] h-[150px] m-2 border-2 border-black bg-white", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: npc, alt: `Pixel style NPC ${index + 1}`, className: "w-full h-full", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }))))); }