DGSpitzer commited on
Commit
94f21e6
1 Parent(s): 2354620

Update share_btn.py

Browse files
Files changed (1) hide show
  1. share_btn.py +63 -19
share_btn.py CHANGED
@@ -22,38 +22,82 @@ share_js = """async () => {
22
  const url = await response.text();
23
  return url;
24
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
25
  const gradioEl = document.querySelector('body > gradio-app');
26
- const imgEls = gradioEl.querySelectorAll('#gallery img');
27
- const promptTxt = gradioEl.querySelector('#prompt-text-input input').value;
 
 
 
 
 
 
 
 
28
  const shareBtnEl = gradioEl.querySelector('#share-btn');
29
  const shareIconEl = gradioEl.querySelector('#share-btn-share-icon');
30
  const loadingIconEl = gradioEl.querySelector('#share-btn-loading-icon');
31
- if(!imgEls.length){
32
  return;
33
  };
34
  shareBtnEl.style.pointerEvents = 'none';
35
  shareIconEl.style.display = 'none';
36
  loadingIconEl.style.removeProperty('display');
37
- const files = await Promise.all(
38
- [...imgEls].map(async (imgEl) => {
39
- const res = await fetch(imgEl.src);
40
- const blob = await res.blob();
41
- const imgId = Date.now() % 200;
42
- const fileName = `diffuse-the-rest-${{imgId}}.jpg`;
43
- return new File([blob], fileName, { type: 'image/jpeg' });
44
- })
45
- );
46
- const urls = await Promise.all(files.map((f) => uploadFile(f)));
47
- const htmlImgs = urls.map(url => `<img src='${url}' width='400' height='400'>`);
48
- const descriptionMd = `<div style='display: flex; flex-wrap: wrap; column-gap: 0.75rem;'>
49
- ${htmlImgs.join(`\n`)}
50
- </div>`;
51
  const params = new URLSearchParams({
52
- title: promptTxt,
53
  description: descriptionMd,
54
  });
55
  const paramsStr = params.toString();
56
- window.open(`https://huggingface.co/spaces/stabilityai/stable-diffusion/discussions/new?${paramsStr}`, '_blank');
57
  shareBtnEl.style.removeProperty('pointer-events');
58
  shareIconEl.style.removeProperty('display');
59
  loadingIconEl.style.display = 'none';
 
22
  const url = await response.text();
23
  return url;
24
  }
25
+ async function getInputVideoFile(videoEl){
26
+ const res = await fetch(videoEl.src);
27
+ const blob = await res.blob();
28
+ const videoId = Date.now() % 200;
29
+ const fileName = `sd-perception-${{videoId}}.mp4`;
30
+ return new File([blob], fileName, { type: 'video/mp4' });
31
+ }
32
+ async function getInputImgFile(imgEl){
33
+ const res = await fetch(imgEl.src);
34
+ const blob = await res.blob();
35
+ const imgId = Date.now() % 200;
36
+ const isPng = imgEl.src.startsWith(`data:image/png`);
37
+ if(isPng){
38
+ const fileName = `sd-perception-${{imgId}}.png`;
39
+ return new File([blob], fileName, { type: 'image/png' });
40
+ }else{
41
+ const fileName = `sd-perception-${{imgId}}.jpg`;
42
+ return new File([blob], fileName, { type: 'image/jpeg' });
43
+ }
44
+ }
45
+ async function getOutputMusicFile(audioEL){
46
+ const res = await fetch(audioEL.src);
47
+ const blob = await res.blob();
48
+ const audioId = Date.now() % 200;
49
+ const fileName = `spectro-music-${{audioId}}.wav`;
50
+ const musicBlob = new File([blob], fileName, { type: 'audio/wav' });
51
+ console.log(musicBlob);
52
+ return musicBlob;
53
+ }
54
+
55
+ async function audioToBase64(audioFile) {
56
+ return new Promise((resolve, reject) => {
57
+ let reader = new FileReader();
58
+ reader.readAsDataURL(audioFile);
59
+ reader.onload = () => resolve(reader.result);
60
+ reader.onerror = error => reject(error);
61
+
62
+ });
63
+ }
64
  const gradioEl = document.querySelector('body > gradio-app');
65
+ // const gradioEl = document.querySelector("gradio-app").shadowRoot;
66
+ const inputPromptEl = gradioEl.querySelector('#input-prompt input').value;
67
+ const outputVideoEl = gradioEl.querySelector('#output-video video');
68
+ //const outputMusic = gradioEl.querySelector('#music-out audio');
69
+ //const outputMusic_src = gradioEl.querySelector('#music-out audio').src;
70
+
71
+ let titleTxt = inputPromptEl;
72
+ //if(titleTxt.length > 100){
73
+ // titleTxt = titleTxt.slice(0, 100) + ' ...';
74
+ //}
75
  const shareBtnEl = gradioEl.querySelector('#share-btn');
76
  const shareIconEl = gradioEl.querySelector('#share-btn-share-icon');
77
  const loadingIconEl = gradioEl.querySelector('#share-btn-loading-icon');
78
+ if(!outputVideoEl){
79
  return;
80
  };
81
  shareBtnEl.style.pointerEvents = 'none';
82
  shareIconEl.style.display = 'none';
83
  loadingIconEl.style.removeProperty('display');
84
+ const outputVideo = await getInputVideoFile(outputVideoEl);
85
+ const urlOutputVideo = await uploadFile(outputVideo);
86
+ //const outputImg = await getInputImgFile(outputvideoEl);
87
+ //const urlOutputImg = await uploadFile(outputImg);
88
+ //const musicFile = await getOutputMusicFile(outputMusic);
89
+ //const dataOutputMusic = await uploadFile(musicFile);
90
+
91
+ const descriptionMd = `#### Here is my AI generated video:
92
+
93
+ <video src='${urlOutputVideo}' style='max-height: 704px;'>
94
+ `;
 
 
 
95
  const params = new URLSearchParams({
96
+ title: titleTxt,
97
  description: descriptionMd,
98
  });
99
  const paramsStr = params.toString();
100
+ window.open(`https://huggingface.co/spaces/DGSpitzer/TXT-2-IMG-2-MUSIC-2-VIDEO-w-RIFFUSION/discussions/new?${paramsStr}`, '_blank');
101
  shareBtnEl.style.removeProperty('pointer-events');
102
  shareIconEl.style.removeProperty('display');
103
  loadingIconEl.style.display = 'none';