function MainComponent() { const [selectedModel, setSelectedModel] = React.useState('chat_gpt'); const [prompt, setPrompt] = React.useState(''); const [generatedText, setGeneratedText] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const modelEndpoints = { chat_gpt: '/integrations/chat-gpt/conversationgpt4', google_gemini_1_5: '/integrations/google-gemini-1-5/', google_gemini_1_5_flash: '/integrations/google-gemini-1-5-flash/', anthropic_claude_sonnet: '/integrations/anthropic-claude-sonnet/', anthropic_claude_sonnet_3_5: '/integrations/anthropic-claude-sonnet-3-5/', anthropic_claude_haiku: '/integrations/anthropic-claude-haiku/', groq: '/integrations/groq/', cohere_command_r_plus: '/integrations/cohere-command-r-plus/' }; const generateText = async ()=>{ if (!prompt.trim()) return; setIsLoading(true); setGeneratedText(''); try { const response = await fetch(modelEndpoints[selectedModel], { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: prompt } ] }) }); const data = await response.json(); const generatedContent = data.choices[0].message.content; setGeneratedText(generatedContent); } catch (error) { console.error('Error generating text:', error); setGeneratedText('An error occurred while generating text. Please try again.'); } finally{ setIsLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-8 font-serif", __source: { fileName: "", lineNumber: 52, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-center mb-8", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, "Lit Text Maker"), /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto bg-white rounded-lg shadow-md p-6", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, "Select a Model"), /*#__PURE__*/ React.createElement("select", { name: "model", className: "w-full p-2 mb-4 border rounded", value: selectedModel, onChange: (e)=>setSelectedModel(e.target.value), __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "chat_gpt", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, "ChatGPT"), /*#__PURE__*/ React.createElement("option", { value: "google_gemini_1_5", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, "Google Gemini 1.5"), /*#__PURE__*/ React.createElement("option", { value: "google_gemini_1_5_flash", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, "Google Gemini 1.5 Flash"), /*#__PURE__*/ React.createElement("option", { value: "anthropic_claude_sonnet", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, "Anthropic Claude Sonnet"), /*#__PURE__*/ React.createElement("option", { value: "anthropic_claude_sonnet_3_5", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, "Anthropic Claude Sonnet 3.5"), /*#__PURE__*/ React.createElement("option", { value: "anthropic_claude_haiku", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, "Anthropic Claude Haiku"), /*#__PURE__*/ React.createElement("option", { value: "groq", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, "Groq"), /*#__PURE__*/ React.createElement("option", { value: "cohere_command_r_plus", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, "Cohere Command R+")), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, "Enter Prompt"), /*#__PURE__*/ React.createElement("textarea", { name: "prompt", className: "w-full p-2 mb-4 border rounded h-32", placeholder: "Enter your literary prompt here...", value: prompt, onChange: (e)=>setPrompt(e.target.value), __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "w-full bg-blue-500 text-white py-2 rounded hover:bg-blue-600 transition duration-300", onClick: generateText, disabled: isLoading, __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, isLoading ? 'Generating...' : 'Generate Text'), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, "Generated Text"), /*#__PURE__*/ React.createElement("div", { className: "border rounded p-4 min-h-[200px] bg-gray-50", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, isLoading ? /*#__PURE__*/ React.createElement("p", { className: "text-gray-400 italic", __source: { fileName: "", lineNumber: 94, columnNumber: 15 }, __self: this }, "Generating text...") : generatedText ? /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 96, columnNumber: 15 }, __self: this }, generatedText) : /*#__PURE__*/ React.createElement("p", { className: "text-gray-400 italic", __source: { fileName: "", lineNumber: 98, columnNumber: 15 }, __self: this }, "Generated text will appear here..."))))); }