function MainComponent() { const [input, setInput] = React.useState(''); const [responses, setResponses] = React.useState({ ChatGPT: '', StableDiffusion: '', AnthropicClaude: '', GoogleGemini: '', AnthropicClaudeHaiku: '', Groq: '' }); const [loading, setLoading] = React.useState(false); const fetchResponses = async (model, input)=>{ let url = ''; let options = {}; switch(model){ case 'ChatGPT': url = '/integrations/chat-gpt/conversationgpt4'; options = { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "user", "content": input } ], system_prompt: input }) }; break; case 'StableDiffusion': url = `/integrations/stable-diffusion/?prompt=${encodeURIComponent(input)}`; options = { method: 'GET' }; break; case 'AnthropicClaude': url = '/integrations/anthropic-claude/'; options = { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "user", "content": input } ] }) }; break; case 'GoogleGemini': url = '/integrations/google-gemini/'; options = { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "user", "content": input } ] }) }; break; case 'AnthropicClaudeHaiku': url = '/integrations/anthropic-claude-haiku/'; options = { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "user", "content": input } ] }) }; break; case 'Groq': url = '/integrations/groq/'; options = { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "user", "content": input } ] }) }; break; } const response = await fetch(url, options); const data = await response.json(); let messageContent = ''; if (model === 'StableDiffusion') { messageContent = data.data[0]; } else { messageContent = data.choices[0].message.content; } return messageContent; }; const handleSubmit = async (e)=>{ e.preventDefault(); setLoading(true); const models = [ 'ChatGPT', 'StableDiffusion', 'AnthropicClaude', 'GoogleGemini', 'AnthropicClaudeHaiku', 'Groq' ]; let newResponses = { ...responses }; await Promise.all(models.map(async (model)=>{ newResponses[model] = await fetchResponses(model, input); })); setResponses(newResponses); setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#F0FFF0] p-4", __source: { fileName: "", lineNumber: 114, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "mb-8 text-4xl text-[#4B0082] font-bold", __source: { fileName: "", lineNumber: 115, columnNumber: 7 }, __self: this }, "Multimodal Response Platform"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-3xl bg-white shadow-lg rounded-xl p-6", __source: { fileName: "", lineNumber: 116, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 117, columnNumber: 9 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("div", { className: "text-center py-10", __source: { fileName: "", lineNumber: 119, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "loader ease-linear rounded-full border-8 border-t-8 border-gray-200 h-12 w-12 mb-4", __source: { fileName: "", lineNumber: 120, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-center text-[#4B0082]", __source: { fileName: "", lineNumber: 121, columnNumber: 15 }, __self: this }, "Loading...")) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("textarea", { name: "userInput", className: "w-full p-4 h-[150px] border border-[#4B0082] rounded-xl focus:ring-[#4B0082] resize-none", placeholder: "Enter your input here...", value: input, onChange: (e)=>setInput(e.target.value), __source: { fileName: "", lineNumber: 125, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mt-4", __source: { fileName: "", lineNumber: 132, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-6 py-2 bg-[#4B0082] text-white rounded-lg", __source: { fileName: "", lineNumber: 133, columnNumber: 17 }, __self: this }, "Submit"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4 text-[#4B0082]", __source: { fileName: "", lineNumber: 136, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 137, columnNumber: 19 }, __self: this }, "🤖 ChatGPT"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 138, columnNumber: 19 }, __self: this }, "🎨 Stable Diffusion"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 139, columnNumber: 19 }, __self: this }, "🧪 Anthropic Claude"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 140, columnNumber: 19 }, __self: this }, "🌐 Google Gemini"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 141, columnNumber: 19 }, __self: this }, "📜 Anthropic Haiku"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 142, columnNumber: 19 }, __self: this }, "💪 Groq")))))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 w-full max-w-6xl", __source: { fileName: "", lineNumber: 149, columnNumber: 7 }, __self: this }, !loading && Object.entries(responses).map(([model, response])=>/*#__PURE__*/ React.createElement("div", { key: model, className: "bg-white shadow-lg rounded-xl p-4 flex flex-col", __source: { fileName: "", lineNumber: 151, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl text-[#121212] mb-2 font-semibold", __source: { fileName: "", lineNumber: 152, columnNumber: 13 }, __self: this }, model.replace(/([A-Z])/g, ' $1').trim()), model !== 'StableDiffusion' ? /*#__PURE__*/ React.createElement("p", { className: "border-t border-[#4B0082] flex-1 p-4", __source: { fileName: "", lineNumber: 154, columnNumber: 13 }, __self: this }, response) : /*#__PURE__*/ React.createElement("img", { src: response, alt: "Generated response", className: "w-full h-auto", __source: { fileName: "", lineNumber: 155, columnNumber: 13 }, __self: this }))))); }

Multimodal Response Platform

Chat G P T

Stable Diffusion

Anthropic Claude

Google Gemini

Anthropic Claude Haiku

Groq