function MainComponent() { const [calculatorResult, setCalculatorResult] = React.useState('0'); const [walletBalance, setWalletBalance] = React.useState(0); const [chatGptResponse, setChatGptResponse] = React.useState(''); const [webScrapingResult, setWebScrapingResult] = React.useState(''); const [geminiResponse, setGeminiResponse] = React.useState(''); const [claudeResponse, setClaudeResponse] = React.useState(''); const [loading, setLoading] = React.useState(false); const handleCalculatorInput = (value)=>{ setCalculatorResult((prev)=>prev === '0' ? value : prev + value); }; const calculateResult = ()=>{ try { setCalculatorResult(eval(calculatorResult).toString()); } catch (error) { setCalculatorResult('Error'); } }; const handleWalletTransaction = (amount)=>{ setWalletBalance((prev)=>prev + amount); }; const fetchChatGptResponse = async ()=>{ setLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', body: JSON.stringify({ messages: [ { role: 'user', content: 'Tell me a fun fact about cryptocurrency.' } ] }) }); const data = await response.json(); setChatGptResponse(data.choices[0].message.content); } catch (error) { setChatGptResponse('Error fetching response'); } setLoading(false); }; const fetchWebScrapingResult = async ()=>{ setLoading(true); try { const response = await fetch('/integrations/web-scraping/post', { method: 'POST', body: JSON.stringify({ url: 'https://coinmarketcap.com', getText: true }) }); const text = await response.text(); setWebScrapingResult(text.substring(0, 200) + '...'); } catch (error) { setWebScrapingResult('Error fetching web content'); } setLoading(false); }; const fetchGeminiResponse = async ()=>{ setLoading(true); try { const response = await fetch('/integrations/google-gemini-1-5-flash/', { method: 'POST', body: JSON.stringify({ messages: [ { role: 'user', content: 'Explain blockchain in simple terms.' } ] }) }); const data = await response.json(); setGeminiResponse(data.choices[0].message.content); } catch (error) { setGeminiResponse('Error fetching response'); } setLoading(false); }; const fetchClaudeResponse = async ()=>{ setLoading(true); try { const response = await fetch('/integrations/anthropic-claude-haiku/', { method: 'POST', body: JSON.stringify({ messages: [ { role: 'user', content: 'What are the benefits of decentralized finance?' } ] }) }); const data = await response.json(); setClaudeResponse(data.choices[0].message.content); } catch (error) { setClaudeResponse('Error fetching response'); } setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4", __source: { fileName: "", lineNumber: 96, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-6 mb-6 w-full max-w-md", __source: { fileName: "", lineNumber: 97, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 98, columnNumber: 9 }, __self: this }, "Calculator"), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-200 p-2 rounded mb-2", __source: { fileName: "", lineNumber: 99, columnNumber: 9 }, __self: this }, calculatorResult), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-4 gap-2", __source: { fileName: "", lineNumber: 100, columnNumber: 9 }, __self: this }, [ '7', '8', '9', '/', '4', '5', '6', '*', '1', '2', '3', '-', '0', '.', '=', '+' ].map((btn)=>/*#__PURE__*/ React.createElement("button", { key: btn, onClick: ()=>btn === '=' ? calculateResult() : handleCalculatorInput(btn), className: "bg-blue-500 text-white p-2 rounded hover:bg-blue-600", __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, btn)))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-6 mb-6 w-full max-w-md", __source: { fileName: "", lineNumber: 113, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 114, columnNumber: 9 }, __self: this }, "Crypto Wallet"), /*#__PURE__*/ React.createElement("p", { className: "mb-4", __source: { fileName: "", lineNumber: 115, columnNumber: 9 }, __self: this }, "Balance: $", walletBalance.toFixed(2)), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 116, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleWalletTransaction(100), className: "bg-green-500 text-white p-2 rounded hover:bg-green-600", __source: { fileName: "", lineNumber: 117, columnNumber: 11 }, __self: this }, "Deposit $100"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleWalletTransaction(-50), className: "bg-red-500 text-white p-2 rounded hover:bg-red-600", __source: { fileName: "", lineNumber: 123, columnNumber: 11 }, __self: this }, "Withdraw $50"))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-6 mb-6 w-full max-w-md", __source: { fileName: "", lineNumber: 132, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 133, columnNumber: 9 }, __self: this }, "AI Integrations"), /*#__PURE__*/ React.createElement("button", { onClick: fetchChatGptResponse, className: "bg-purple-500 text-white p-2 rounded hover:bg-purple-600 mb-2 w-full", __source: { fileName: "", lineNumber: 134, columnNumber: 9 }, __self: this }, "Get ChatGPT Fun Fact"), /*#__PURE__*/ React.createElement("button", { onClick: fetchWebScrapingResult, className: "bg-yellow-500 text-white p-2 rounded hover:bg-yellow-600 mb-2 w-full", __source: { fileName: "", lineNumber: 140, columnNumber: 9 }, __self: this }, "Scrape Crypto News"), /*#__PURE__*/ React.createElement("button", { onClick: fetchGeminiResponse, className: "bg-indigo-500 text-white p-2 rounded hover:bg-indigo-600 mb-2 w-full", __source: { fileName: "", lineNumber: 146, columnNumber: 9 }, __self: this }, "Get Gemini Blockchain Explanation"), /*#__PURE__*/ React.createElement("button", { onClick: fetchClaudeResponse, className: "bg-teal-500 text-white p-2 rounded hover:bg-teal-600 mb-2 w-full", __source: { fileName: "", lineNumber: 152, columnNumber: 9 }, __self: this }, "Get Claude DeFi Benefits"), loading && /*#__PURE__*/ React.createElement("p", { className: "text-center", __source: { fileName: "", lineNumber: 158, columnNumber: 21 }, __self: this }, "Loading..."), chatGptResponse && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-2 bg-gray-100 rounded", __source: { fileName: "", lineNumber: 160, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold", __source: { fileName: "", lineNumber: 161, columnNumber: 13 }, __self: this }, "ChatGPT Response:"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 162, columnNumber: 13 }, __self: this }, chatGptResponse)), webScrapingResult && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-2 bg-gray-100 rounded", __source: { fileName: "", lineNumber: 166, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold", __source: { fileName: "", lineNumber: 167, columnNumber: 13 }, __self: this }, "Web Scraping Result:"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 168, columnNumber: 13 }, __self: this }, webScrapingResult)), geminiResponse && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-2 bg-gray-100 rounded", __source: { fileName: "", lineNumber: 172, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold", __source: { fileName: "", lineNumber: 173, columnNumber: 13 }, __self: this }, "Gemini Response:"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 174, columnNumber: 13 }, __self: this }, geminiResponse)), claudeResponse && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-2 bg-gray-100 rounded", __source: { fileName: "", lineNumber: 178, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold", __source: { fileName: "", lineNumber: 179, columnNumber: 13 }, __self: this }, "Claude Response:"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 180, columnNumber: 13 }, __self: this }, claudeResponse)))); }