function MainComponent() { const [prompt, setPrompt] = React.useState(''); const [article, setArticle] = React.useState(''); const [loading, setLoading] = React.useState(false); React.useEffect(()=>{ fetchRandomWord(); }, []); const fetchRandomWord = async ()=>{ try { const response = await fetch('/integrations/anthropic-claude-sonnet-3-5/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: 'Give me a single random word.' } ] }) }); const data = await response.json(); const randomWord = data.choices[0].message.content.trim(); setPrompt(randomWord); generateArticle(randomWord); } catch (error) { console.error('Error fetching random word:', error); } }; const generateArticle = async (topic)=>{ setLoading(true); try { const response = await fetch('/integrations/anthropic-claude-sonnet-3-5/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: `Write a Wikipedia-style article about ${topic}.` } ] }) }); const data = await response.json(); const generatedArticle = data.choices[0].message.content; setArticle(generatedArticle); } catch (error) { console.error('Error generating article:', error); } finally{ setLoading(false); } }; const handleGenerateClick = ()=>{ generateArticle(prompt); }; const handleWordClick = (word)=>{ setPrompt(word); generateArticle(word); }; const renderArticle = ()=>{ if (!article) return null; const words = article.split(' '); return words.map((word, index)=>{ if (word.length > 4 && /^[a-zA-Z]+$/.test(word)) { return /*#__PURE__*/ React.createElement("span", { key: index, className: "clickable-word", onClick: ()=>handleWordClick(word), __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, word, ' '); } return word + ' '; }); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 min-h-screen p-8 font-serif", __source: { fileName: "", lineNumber: 77, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "mb-8", __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-4", __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, "LLM powered wikipedia")), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 82, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "prompt", className: "w-full p-2 border border-gray-300 rounded", placeholder: "Enter a topic", value: prompt, onChange: (e)=>setPrompt(e.target.value), __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "mt-2 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600", onClick: handleGenerateClick, __source: { fileName: "", lineNumber: 91, columnNumber: 9 }, __self: this }, "Generate Article")), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded shadow-md", __source: { fileName: "", lineNumber: 99, columnNumber: 7 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("div", { className: "animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mx-auto", __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }) : renderArticle()), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 107, columnNumber: 7 }, __self: this }, ` @keyframes clickPulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .clickable-word { color: blue; text-decoration: underline; cursor: pointer; display: inline-block; } .clickable-word:hover { animation: clickPulse 0.3s ease-in-out; } `)); }