function MainComponent() { const [profiles, setProfiles] = React.useState([]); const [activeProfileIndex, setActiveProfileIndex] = React.useState(0); const [audioSrc, setAudioSrc] = React.useState(""); const audioRef = React.useRef(); const nextProfile = ()=>{ setActiveProfileIndex((prevIndex)=>(prevIndex + 1) % profiles.length); }; const fetchProfileIntro = async ()=>{ const response = await fetch('https://api.openai.com/v1/chat/completions', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer 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' }, body: JSON.stringify({ model: "gpt-3.5-turbo", messages: [ { "role": "system", "content": "You are a helpful assistant." }, { "role": "user", "content": "I'd like to introduce myself as a potential mentor." } ] }) }); const data = await response.json(); return data.choices[0].message.content; }; const synthesizeSpeech = async (text)=>{ const response = await fetch('https://api.openai.com/v1/audio/speech', { method: 'POST', headers: { 'Authorization': 'Bearer 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', 'Content-Type': 'application/json' }, body: JSON.stringify({ model: "tts-1", input: text, voice: "alloy" }) }); const blob = await response.blob(); const url = URL.createObjectURL(blob); setAudioSrc(url); }; React.useEffect(()=>{ const fetchIntros = async ()=>{ const intros = await Promise.all(profiles.map(()=>fetchProfileIntro())); setProfiles((prevProfiles)=>prevProfiles.map((profile, index)=>({ ...profile, intro: intros[index] }))); }; if (profiles.length) { fetchIntros(); } }, [ profiles.length ]); React.useEffect(()=>{ if (activeProfileIndex >= 0 && profiles[activeProfileIndex]) { const profileName = profiles[activeProfileIndex].name; synthesizeSpeech(`Hello, I am ${profileName}`); } }, [ activeProfileIndex, profiles ]); const activeProfile = profiles[activeProfileIndex] || {}; const renderSwipeGestureIndicators = ()=>/*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 flex justify-between items-center px-6 py-4 touch-none", __source: { fileName: "", lineNumber: 63, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-white text-4xl cursor-pointer select-none", onClick: nextProfile, __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, "👈"), /*#__PURE__*/ React.createElement("div", { className: "text-white text-4xl cursor-pointer select-none", onClick: nextProfile, __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, "👉")); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen bg-[#f3f4f6]", __source: { fileName: "", lineNumber: 69, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-grow overflow-hidden px-4", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-[500px] mx-auto my-4 bg-white shadow-lg rounded-lg", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-[400px]", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: activeProfile.imageUrl || '/profiles/profile-placeholder.jpg', alt: `Profile image of ${activeProfile.name || 'university mentor or professor'}`, className: "w-full h-full object-cover rounded-t-lg", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }), renderSwipeGestureIndicators()), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, activeProfile.name || 'Loading...'), /*#__PURE__*/ React.createElement("p", { className: "text-sm font-roboto text-gray-600 mt-2", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, activeProfile.intro || 'Loading intro...'), audioSrc && activeProfile.name && /*#__PURE__*/ React.createElement("audio", { ref: audioRef, src: audioSrc, autoPlay: true, controls: true, className: "mt-2", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md py-3", __source: { fileName: "", lineNumber: 89, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-around", __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { name: "pass", className: "font-roboto text-xl text-red-500", onClick: nextProfile, __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "fa fa-times", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { name: "like", className: "font-roboto text-xl text-green-500", onClick: nextProfile, __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "fa fa-heart", __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "bg-white border-t border-gray-300 pt-2", __source: { fileName: "", lineNumber: 99, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-around text-gray-800 font-roboto", __source: { fileName: "", lineNumber: 100, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { name: "matches", className: "text-xl", __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "fa fa-users", __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { name: "messages", className: "text-xl", __source: { fileName: "", lineNumber: 104, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "fa fa-comments", __source: { fileName: "", lineNumber: 105, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { name: "profile", className: "text-xl", __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "fa fa-user", __source: { fileName: "", lineNumber: 108, columnNumber: 13 }, __self: this }))))); }