function MainComponent() { const [messages, setMessages] = React.useState([]); const [searchResults, setSearchResults] = React.useState([]); const [imageResults, setImageResults] = React.useState([]); const [translation, setTranslation] = React.useState(''); const [transcription, setTranscription] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const handleTranslate = (text, targetLanguage)=>{ setIsLoading(true); fetch('/integrations/google-translate/language/translate/v2', { method: 'POST', body: new URLSearchParams({ q: text, target: targetLanguage }) }).then((response)=>response.json()).then((data)=>{ setTranslation(data.data.translations[0].translatedText); setIsLoading(false); }); }; const handleTranscribeAudio = (audioFile)=>{ if (audioFile.size > 3145728) { alert("Cannot accept files larger than 3MB"); return; } const data = new FormData(); data.append('file', audioFile); setIsLoading(true); fetch('/integrations/transcribe-audio/whisperv3', { method: 'POST', body: data }).then((response)=>response.json()).then((data)=>{ setTranscription(data.text); setIsLoading(false); }); }; const queryGoogleImages = (query)=>{ setIsLoading(true); fetch(`/integrations/image-search/imagesearch?q=${encodeURIComponent(query)}`, { method: 'GET' }).then((response)=>response.json()).then((data)=>{ setImageResults(data.items); setIsLoading(false); }); }; const performSearch = (query)=>{ setIsLoading(true); fetch(`/integrations/google-search/search?q=${encodeURIComponent(query)}`, { method: 'GET' }).then((response)=>response.json()).then((data)=>{ setSearchResults(data.items); setIsLoading(false); }); }; const sendMessageToChatGPT = (messages, prompt)=>{ setIsLoading(true); fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: messages, system_prompt: prompt }) }).then((response)=>response.json()).then((data)=>{ setMessages((prevMessages)=>[ ...prevMessages, { role: 'assistant', content: data.result } ]); setIsLoading(false); }); }; React.useEffect(()=>{ performSearch('music school'); queryGoogleImages('music instruments'); sendMessageToChatGPT([], 'Information about music schools'); }, []); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f8f9fa]", __source: { fileName: "", lineNumber: 94, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#007bff] text-white p-4", __source: { fileName: "", lineNumber: 95, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-crimson-text text-center", __source: { fileName: "", lineNumber: 96, columnNumber: 9 }, __self: this }, "Music School Website")), /*#__PURE__*/ React.createElement("main", { className: "p-4", __source: { fileName: "", lineNumber: 98, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 99, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-roboto mt-2 mb-4", __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this }, "Welcome to Our Music School"), messages.map((msg, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "p-2 my-2 bg-white shadow", __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 103, columnNumber: 15 }, __self: this }, msg.content)))), /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 107, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-roboto mt-6 mb-4", __source: { fileName: "", lineNumber: 108, columnNumber: 11 }, __self: this }, "Explore Music Courses"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 109, columnNumber: 11 }, __self: this }, searchResults.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white p-4 shadow rounded", __source: { fileName: "", lineNumber: 111, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold font-roboto text-lg", __source: { fileName: "", lineNumber: 112, columnNumber: 17 }, __self: this }, item.title), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm", __source: { fileName: "", lineNumber: 113, columnNumber: 17 }, __self: this }, item.snippet), /*#__PURE__*/ React.createElement("a", { href: item.link, target: "_blank", rel: "noreferrer", className: "text-blue-500 hover:text-blue-700 font-roboto", __source: { fileName: "", lineNumber: 114, columnNumber: 17 }, __self: this }, "Learn More"))))), /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 119, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-roboto mt-6 mb-4", __source: { fileName: "", lineNumber: 120, columnNumber: 11 }, __self: this }, "Instruments Gallery"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center items-stretch gap-4", __source: { fileName: "", lineNumber: 121, columnNumber: 11 }, __self: this }, imageResults.slice(0, 6).map((image, index)=>/*#__PURE__*/ React.createElement("a", { key: index, href: image.contextLink, target: "_blank", rel: "noreferrer", className: "max-w-xs", __source: { fileName: "", lineNumber: 123, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image.thumbnailImageUrl, alt: `Thumbnail image of ${image.title}`, width: image.width, height: image.height, className: "object-cover rounded shadow", __source: { fileName: "", lineNumber: 124, columnNumber: 17 }, __self: this }))))), isLoading && /*#__PURE__*/ React.createElement("div", { className: "fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center", __source: { fileName: "", lineNumber: 136, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded shadow", __source: { fileName: "", lineNumber: 137, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 138, columnNumber: 15 }, __self: this }, "Loading..."))), /*#__PURE__*/ React.createElement("div", { className: "my-4 p-4 bg-white shadow rounded", __source: { fileName: "", lineNumber: 142, columnNumber: 9 }, __self: this }, transcription && /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm", __source: { fileName: "", lineNumber: 144, columnNumber: 13 }, __self: this }, transcription), translation && /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm", __source: { fileName: "", lineNumber: 147, columnNumber: 13 }, __self: this }, translation))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#343a40] text-white p-4 text-center", __source: { fileName: "", lineNumber: 151, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 152, columnNumber: 9 }, __self: this }, "© ", new Date().getFullYear(), " Music School, Inc.")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 154, columnNumber: 7 }, __self: this }, ` @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } .loading-animation { animation: fade-in 1s ease-in-out; } `)); }