{"id":2736,"date":"2025-09-01T16:02:31","date_gmt":"2025-09-01T16:02:31","guid":{"rendered":"https:\/\/made4praise.com\/?page_id=2736"},"modified":"2025-09-01T16:02:31","modified_gmt":"2025-09-01T16:02:31","slug":"m4p-ai","status":"publish","type":"page","link":"https:\/\/made4praise.com\/social\/m4p-ai\/","title":{"rendered":"m4P AI"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2736\" class=\"elementor elementor-2736\">\n\t\t\t\t<div class=\"elementor-element elementor-element-dbd40e2 e-flex e-con-boxed e-con e-parent\" data-id=\"dbd40e2\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b9ef2eb elementor-widget elementor-widget-spacer\" data-id=\"b9ef2eb\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bf27144 elementor-widget elementor-widget-shortcode\" data-id=\"bf27144\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    \n    <!-- TailwindCSS -->\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n\n    <div class=\"max-w-3xl mx-auto p-8 bg-gradient-to-br from-gray-900 to-black shadow-2xl rounded-3xl border border-gray-700 text-gray-100\">\n        <h1 class=\"text-4xl font-extrabold text-center text-purple-400 mb-3\">\ud83c\udfb5 m4P Gospel Studio \ud83c\udfb5<\/h1>\n        <p class=\"text-center text-gray-300 mb-8\">Create your own Gospel song instantly! All songs are Gospel \u2014 choose your style and mood.<\/p>\n\n        <!-- FORM -->\n        <form id=\"musicgen-form\" class=\"space-y-6\">\n            <!-- Song Idea -->\n            <div>\n                <label class=\"block text-sm font-semibold text-gray-200\">Song Idea<\/label>\n                <input type=\"text\" id=\"prompt\" class=\"mt-1 w-full rounded-xl border-gray-600 bg-gray-800 text-gray-100 shadow-sm focus:ring-purple-500 focus:border-purple-500\" placeholder=\"e.g., God's Faithfulness\" required>\n            <\/div>\n\n            <!-- Style -->\n            <div>\n                <label class=\"block text-sm font-semibold text-gray-200\">Style<\/label>\n                <select id=\"style\" class=\"mt-1 w-full rounded-xl border-gray-600 bg-gray-800 text-gray-100 shadow-sm focus:ring-purple-500 focus:border-purple-500\">\n                    <option>Gospel Choir<\/option>\n                    <option>Pop Gospel<\/option>\n                    <option>Jazz Gospel<\/option>\n                    <option>Classical Gospel<\/option>\n                    <option>Rock Gospel<\/option>\n                    <option>African Gospel<\/option>\n                    <option>Urban Gospel<\/option>\n                    <option>Worship Gospel<\/option>\n                    <option>Reggae Gospel<\/option>\n                    <option>Contemporary Gospel<\/option>\n                <\/select>\n            <\/div>\n\n            <!-- Tempo -->\n            <div>\n                <label class=\"block text-sm font-semibold text-gray-200\">Tempo (BPM)<\/label>\n                <div class=\"flex items-center gap-4\">\n                    <span class=\"text-gray-400\">60<\/span>\n                    <input type=\"range\" id=\"tempo\" min=\"60\" max=\"180\" value=\"90\" class=\"flex-1 accent-purple-400\">\n                    <span class=\"text-gray-400\">180<\/span>\n                <\/div>\n                <p class=\"text-center text-purple-400 font-medium\"><span id=\"tempo-val\">90<\/span> BPM<\/p>\n            <\/div>\n\n            <!-- Mood -->\n            <div>\n                <label class=\"block text-sm font-semibold text-gray-200\">Mood<\/label>\n                <input type=\"text\" id=\"mood\" class=\"mt-1 w-full rounded-xl border-gray-600 bg-gray-800 text-gray-100 shadow-sm focus:ring-purple-500 focus:border-purple-500\" placeholder=\"Uplifting, Calm, Energetic\" required>\n            <\/div>\n\n            <!-- Melody Upload -->\n            <div>\n                <label class=\"block text-sm font-semibold text-gray-200\">Upload Melody (optional)<\/label>\n                <p class=\"text-gray-400 text-sm mb-2\">You can upload your hum, voice recording, or a pre-recorded melody (WAV\/MP3) to guide the song generation.<\/p>\n                <div class=\"border-2 border-dashed border-gray-600 rounded-xl p-6 text-center cursor-pointer hover:border-purple-400 transition\" \n                     onclick=\"document.getElementById('melody').click()\">\n                    <p class=\"text-gray-400\">\ud83c\udfb5 Drop File Here<br>- or -<br>Click to Upload<\/p>\n                    <input type=\"file\" id=\"melody\" accept=\".wav,.mp3\" class=\"hidden\">\n                <\/div>\n            <\/div>\n\n            <!-- Generate Lyrics Button -->\n            <button id=\"lyrics-btn\" type=\"button\" class=\"w-full py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-bold rounded-2xl shadow-md transition\">\u270d\ufe0f Generate Lyrics<\/button>\n\n            <!-- Generate Song Button -->\n            <button type=\"submit\" class=\"w-full py-4 bg-purple-600 hover:bg-purple-700 text-white font-bold rounded-2xl shadow-lg transition\">\u2728 Generate Full Song & Cover<\/button>\n        <\/form>\n\n        <!-- LOADING -->\n        <div id=\"loading\" class=\"hidden text-center mt-6\">\n            <p class=\"text-purple-400 font-medium animate-pulse\">\u23f3 Working on it...<\/p>\n        <\/div>\n\n        <!-- RESULTS -->\n        <div id=\"result\" class=\"mt-8 space-y-8 hidden\">\n            <!-- Lyrics -->\n            <div id=\"lyrics-section\" class=\"hidden\">\n                <h3 class=\"text-xl font-semibold text-gray-200 mb-2\">\ud83d\udcdd Generated Lyrics<\/h3>\n                <pre class=\"bg-gray-800 p-4 rounded-lg text-sm text-gray-100 whitespace-pre-wrap\" id=\"lyrics\"><\/pre>\n            <\/div>\n\n            <!-- Song Preview -->\n            <div id=\"song-section\" class=\"hidden\">\n                <h3 class=\"text-xl font-semibold text-gray-200 mb-2\">\ud83c\udfb6 Generated Music<\/h3>\n                <audio controls id=\"audio\" class=\"w-full rounded-xl shadow-md\"><\/audio>\n                <a id=\"download\" class=\"block mt-2 text-purple-400 hover:underline font-medium\" download>\u2b07\ufe0f Download MP3<\/a>\n            <\/div>\n\n            <!-- Album Cover -->\n            <div id=\"cover-section\" class=\"hidden text-center\">\n                <h3 class=\"text-xl font-semibold text-gray-200 mb-2\">\ud83c\udfa8 Generated Album Cover<\/h3>\n                <img id=\"cover\" class=\"rounded-2xl shadow-xl w-64 mx-auto\">\n            <\/div>\n        <\/div>\n\n        <!-- FOOTER -->\n        <div class=\"mt-10 text-center text-gray-500 text-sm space-x-3\">\n            <span>\u26a1 Use via API<\/span>\n            <span>\u00b7<\/span>\n            <span>\ud83c\udf9b\ufe0f Built with Gradio<\/span>\n            <span>\u00b7<\/span>\n            <span>\u2699\ufe0f Settings<\/span>\n        <\/div>\n    <\/div>\n\n    <script>\n    document.getElementById('tempo').addEventListener('input', e => {\n        document.getElementById('tempo-val').textContent = e.target.value;\n    });\n\n    let latestLyrics = \"\";\n\n    \/\/ Generate Lyrics via WP AJAX\n    document.getElementById('lyrics-btn').addEventListener('click', async function() {\n        document.getElementById('loading').classList.remove('hidden');\n        document.getElementById('lyrics-section').classList.add('hidden');\n\n        let prompt = document.getElementById('prompt').value;\n        let mood = document.getElementById('mood').value;\n        let style = document.getElementById('style').value;\n\n        let response = await fetch('https:\/\/made4praise.com\/social\/wp-admin\/admin-ajax.php?action=generate_lyrics', {\n            method: \"POST\",\n            headers: { \"Content-Type\": \"application\/json\" },\n            body: JSON.stringify({ prompt, mood, style })\n        });\n\n        let data = await response.json();\n        document.getElementById('loading').classList.add('hidden');\n        document.getElementById('result').classList.remove('hidden');\n        document.getElementById('lyrics-section').classList.remove('hidden');\n        document.getElementById('lyrics').textContent = data.lyrics || \"No lyrics generated.\";\n        latestLyrics = data.lyrics || \"\";\n    });\n\n    \/\/ Generate Song using generated lyrics\n    document.getElementById('musicgen-form').addEventListener('submit', async function(e) {\n        e.preventDefault();\n        document.getElementById('loading').classList.remove('hidden');\n        document.getElementById('song-section').classList.add('hidden');\n        document.getElementById('cover-section').classList.add('hidden');\n\n        let fd = new FormData();\n        fd.append(\"data\", JSON.stringify([\n            latestLyrics || document.getElementById('prompt').value,\n            document.getElementById('style').value,\n            parseInt(document.getElementById('tempo').value),\n            document.getElementById('mood').value,\n            null\n        ]));\n\n        let fileInput = document.getElementById('melody');\n        if (fileInput.files.length > 0) {\n            fd.set(\"melody_file\", fileInput.files[0]);\n        }\n\n        let response = await fetch(\"https:\/\/KIsrael07-musicgen-web.hf.space\/run\/predict\", {\n            method: \"POST\",\n            body: fd\n        });\n\n        let result = await response.json();\n        document.getElementById('loading').classList.add('hidden');\n        document.getElementById('result').classList.remove('hidden');\n        document.getElementById('song-section').classList.remove('hidden');\n        document.getElementById('cover-section').classList.remove('hidden');\n\n        document.getElementById('audio').src = result.data[1] || \"\";\n        document.getElementById('download').href = result.data[2] || \"\";\n        document.getElementById('cover').src = result.data[3]?.url || \"\";\n    });\n    <\/script>\n    \n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e47121a elementor-widget elementor-widget-spacer\" data-id=\"e47121a\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2736","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/made4praise.com\/social\/wp-json\/wp\/v2\/pages\/2736","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/made4praise.com\/social\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/made4praise.com\/social\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/made4praise.com\/social\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/made4praise.com\/social\/wp-json\/wp\/v2\/comments?post=2736"}],"version-history":[{"count":0,"href":"https:\/\/made4praise.com\/social\/wp-json\/wp\/v2\/pages\/2736\/revisions"}],"wp:attachment":[{"href":"https:\/\/made4praise.com\/social\/wp-json\/wp\/v2\/media?parent=2736"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}