function MainComponent() { const [formData, setFormData] = React.useState({ gameYouLike: '', gameType: '', platform: '' }); const [loading, setLoading] = React.useState(false); const [recommendedGames, setRecommendedGames] = React.useState([]); const [gameImages, setGameImages] = React.useState([]); const handleChange = (e)=>{ setFormData({ ...formData, [e.target.name]: e.target.value }); }; const handleFindGamesClick = async ()=>{ const allFilled = formData.gameYouLike && formData.gameType && formData.platform; if (allFilled) { setLoading(true); const response = await fetch('/integrations/gpt-vision/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: [ { type: 'text', text: `Recommend 3 games based on the following criteria: Game you like: ${formData.gameYouLike}, Game type: ${formData.gameType}, Platform: ${formData.platform}` } ] } ] }) }); const result = await response.json(); const games = result.choices[0].message.content.split('\n').filter(Boolean); setRecommendedGames(games); const imagePromises = games.map((game)=>fetch(`/integrations/image-search/imagesearch?q=${encodeURIComponent(game)}`, { method: 'GET' }).then((res)=>res.json()).then((imgRes)=>imgRes.items[0]?.thumbnailImageUrl || '')); const images = await Promise.all(imagePromises); setGameImages(images); setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "bg-gradient-to-b from-black to-gray-500 min-h-screen flex justify-center items-center", __source: { fileName: "", lineNumber: 54, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(GameFinderComponent, { formData: formData, handleChange: handleChange, handleFindGamesClick: handleFindGamesClick, allFilled: formData.gameYouLike && formData.gameType && formData.platform, loading: loading, recommendedGames: recommendedGames, gameImages: gameImages, __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this })); } function GameFinderComponent({ formData, handleChange, handleFindGamesClick, allFilled, loading, recommendedGames, gameImages }) { return /*#__PURE__*/ React.createElement("div", { className: "p-6 bg-white rounded shadow-lg text-center w-[400px]", __source: { fileName: "", lineNumber: 70, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-6 font-roboto text-[#1a202c]", __source: { fileName: "", lineNumber: 71, columnNumber: 7 }, __self: this }, "Games 4 YOU"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "gameYouLike", value: formData.gameYouLike, onChange: handleChange, className: "p-3 border border-gray-300 rounded", placeholder: "Game you like", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "gameType", value: formData.gameType, onChange: handleChange, className: "p-3 border border-gray-300 rounded", placeholder: "Game type", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "platform", value: formData.platform, onChange: handleChange, className: "p-3 border border-gray-300 rounded", placeholder: "Enter platform", __source: { fileName: "", lineNumber: 89, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleFindGamesClick, className: `p-3 ${allFilled ? 'bg-blue-500 text-white' : 'bg-gray-300 text-gray-700'} rounded ${loading ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`, disabled: !allFilled || loading, __source: { fileName: "", lineNumber: 97, columnNumber: 9 }, __self: this }, loading ? 'Finding Games...' : 'Find Games')), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 105, columnNumber: 7 }, __self: this }, recommendedGames.length > 0 && /*#__PURE__*/ React.createElement("ul", { className: "list-disc list-inside text-left", __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this }, recommendedGames.map((game, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "text-[#1a202c]", __source: { fileName: "", lineNumber: 109, columnNumber: 15 }, __self: this }, game))), /*#__PURE__*/ React.createElement("div", { className: "mt-6 grid grid-cols-1 gap-4", __source: { fileName: "", lineNumber: 113, columnNumber: 9 }, __self: this }, gameImages.map((image, index)=>image && /*#__PURE__*/ React.createElement("img", { key: index, src: image, alt: `Recommended game ${recommendedGames[index]}`, className: "w-full h-auto rounded", __source: { fileName: "", lineNumber: 115, columnNumber: 22 }, __self: this }))))); }