function MainComponent() { const [genre, setGenre] = React.useState(''); const [rapperStyle, setRapperStyle] = React.useState(''); const [songTopic, setSongTopic] = React.useState(''); const [verse, setVerse] = React.useState(''); const [beatURL, setBeatURL] = React.useState(''); const [loading, setLoading] = React.useState(false); const generateContent = async ()=>{ setLoading(true); try { const verseResponse = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: "system", content: 'Generate a verse with a bit of slang and make it sound like it was written by a real human' }, { role: "user", content: `Create lyrics in the style of ${rapperStyle} in the ${genre} genre about ${songTopic}.` } ], system_prompt: 'Create lyrics' }) }); const beatResponse = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: "system", content: 'Generate a beat that would fit the style of the lyrics generated' }, { role: "user", content: `Create a beat for a ${genre} song in the style of ${rapperStyle}.` } ], system_prompt: 'Create beat' }) }); const verseData = await verseResponse.json(); const beatData = await beatResponse.json(); if (verseData.status) { setVerse(verseData.result); } if (beatData.status) { setBeatURL(beatData.result); } } catch (error) { setVerse('Error generating content. Please try again.'); setBeatURL(''); } setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f7f7f7] p-4", __source: { fileName: "", lineNumber: 70, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-xl", __source: { fileName: "", lineNumber: 71, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "genre", className: "block text-sm font-bold text-gray-700", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, "Genre"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "genre", value: genre, onChange: (e)=>setGenre(e.target.value), className: "mt-1 w-full rounded-md border-gray-300 shadow-sm font-roboto", placeholder: "e.g. Trap, Boom Bap", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "rapperStyle", className: "block text-sm font-bold text-gray-700", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, "Rapper Style"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "rapperStyle", value: rapperStyle, onChange: (e)=>setRapperStyle(e.target.value), className: "mt-1 w-full rounded-md border-gray-300 shadow-sm font-roboto", placeholder: "e.g. Eminem, Jay-Z", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 98, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "songTopic", className: "block text-sm font-bold text-gray-700", __source: { fileName: "", lineNumber: 99, columnNumber: 11 }, __self: this }, "Song Topic"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "songTopic", value: songTopic, onChange: (e)=>setSongTopic(e.target.value), className: "mt-1 w-full rounded-md border-gray-300 shadow-sm font-roboto", placeholder: "e.g. Love, Power, Struggle", __source: { fileName: "", lineNumber: 102, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: generateContent, className: `w-full rounded-md py-2 px-4 ${loading ? 'bg-gray-500' : 'bg-blue-500 hover:bg-blue-600'} text-white font-semibold focus:outline-none focus:ring-2 focus:ring-blue-300 transition-colors`, disabled: loading, __source: { fileName: "", lineNumber: 111, columnNumber: 9 }, __self: this }, loading ? 'Generating...' : 'Make Lyrics & Beat')), /*#__PURE__*/ React.createElement("div", { className: `mt-8 p-4 w-full max-w-xl rounded-md bg-white shadow-lg ${verse !== '' ? 'fade-in' : ''}`, __source: { fileName: "", lineNumber: 120, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl text-gray-800 font-bold font-roboto mb-3", __source: { fileName: "", lineNumber: 121, columnNumber: 9 }, __self: this }, "Lyrics:"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-800 font-roboto whitespace-pre-wrap", __source: { fileName: "", lineNumber: 122, columnNumber: 9 }, __self: this }, verse), beatURL && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("h3", { className: "text-xl text-gray-800 font-bold font-roboto my-3", __source: { fileName: "", lineNumber: 125, columnNumber: 13 }, __self: this }, "Beat:"), /*#__PURE__*/ React.createElement("audio", { controls: true, className: "w-full", __source: { fileName: "", lineNumber: 126, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("source", { src: beatURL, type: "audio/mpeg", __source: { fileName: "", lineNumber: 127, columnNumber: 15 }, __self: this }), "Your browser does not support the audio element."))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 133, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fade-in { animation: fadeIn 1s ease-in-out; } `)); }