community_icon_html = """""" loading_icon_html = """""" css = """ /* share button */ #share-btn-container { display: flex; padding-left: 0.5rem !important; padding-right: 0.5rem !important; background-color: #000000; justify-content: center; align-items: center; border-radius: 9999px !important; width: 13rem; margin-top: 10px; margin-left: auto; flex: unset !important; } #share-btn { all: initial; color: #ffffff; font-weight: 600; cursor: pointer; font-family: 'IBM Plex Sans', sans-serif; margin-left: 0.5rem !important; padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; right:0; } #share-btn * { all: unset !important; } #share-btn-container div:nth-child(-n+2){ width: auto !important; min-height: 0px !important; } #share-btn-container .wrap { display: none !important; } """ share_js = """async () => { async function uploadFile(file){ const UPLOAD_URL = 'https://huggingface.co/uploads'; const response = await fetch(UPLOAD_URL, { method: 'POST', headers: { 'Content-Type': file.type, 'X-Requested-With': 'XMLHttpRequest', }, body: file, /// <- File inherits from Blob }); if(response.headers.get('Content-Type').includes('application/json')){ const data = await response.json(); return data; } const url = await response.text(); return url; } async function getInputMediaFile(mediaEl){ const res = await fetch(mediaEl.src); const blob = await res.blob(); const contentType = res.headers.get("content-type"); const ext = contentType.split("/")[1]; const videoId = Date.now() const fileName = `MusicGen-${videoId}.${ext}`; return new File([blob], fileName, { type: contentType }); } const gradioEl = document.querySelector("gradio-app").shadowRoot || document.querySelector('body > gradio-app'); const prompt = gradioEl.querySelector('#text-input textarea').value; const melody = gradioEl.querySelector('#melody-output audio'); const generated = gradioEl.querySelector('#generated-video video'); const titleTxt = `MusicGen: ${prompt.slice(0, 50)}...`; const shareBtnEl = gradioEl.querySelector('#share-btn'); const shareIconEl = gradioEl.querySelector('#share-btn-share-icon'); const loadingIconEl = gradioEl.querySelector('#share-btn-loading-icon'); if(!generated){ return; }; shareBtnEl.style.pointerEvents = 'none'; shareIconEl.style.display = 'none'; loadingIconEl.style.removeProperty('display'); const generatedFile= await getInputMediaFile(generated) const generatedURL = await uploadFile(generatedFile); let melodyURL = null; if(melody){ const melodyFile = await getInputMediaFile(melody) melodyURL = await uploadFile(melodyFile); } const descriptionMd = ` ### Text ${prompt} ### Generated Song ${generatedURL} ${(melodyURL && (typeof melodyURL === 'string'))? ` ### Melody ` : ``} made with continuation: https://huggingface.co/spaces/radames/MusicGen-Continuation `; const params = new URLSearchParams({ title: titleTxt, description: descriptionMd, }); const paramsStr = params.toString(); window.open(`https://huggingface.co/spaces/facebook/MusicGen/discussions/new?${paramsStr}`, '_blank'); shareBtnEl.style.removeProperty('pointer-events'); shareIconEl.style.removeProperty('display'); loadingIconEl.style.display = 'none'; }"""