radames commited on
Commit
db84670
1 Parent(s): 777d5c7

fix share button

Browse files

hi

@juancopi81

I've also enable `cache_examples`, but feel free to disable if you want, this might impact the build time

Files changed (2) hide show
  1. app.py +14 -2
  2. share_btn.py +9 -13
app.py CHANGED
@@ -218,13 +218,22 @@ css = """
218
  }
219
  #share-btn-container {
220
  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;
 
 
221
  }
222
  #share-btn {
223
- 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;
224
  }
225
  #share-btn * {
226
  all: unset;
227
  }
 
 
 
 
 
 
 
228
  .gr-form{
229
  flex: 1 1 50%; border-top-right-radius: 0; border-bottom-right-radius: 0;
230
  }
@@ -332,7 +341,10 @@ with block as demo:
332
  ["https://www.youtube.com/watch?v=Hk5evm1NgzA", "Spanish", "English", "trending on artstation pixiv makoto shinkai"],
333
  ["https://www.youtube.com/watch?v=sRmmQBBln9Q", "Spanish", "Spanish", "Hyper real, 4k"],
334
  ["https://www.youtube.com/watch?v=qz4Wc48KITA", "Spanish", "English", "detailed art by kay nielsen and walter crane, illustration style, watercolor"]],
335
- inputs=[url, video_language, summary_language, video_styles]
 
 
 
336
  )
337
  gr.HTML(
338
  """
 
218
  }
219
  #share-btn-container {
220
  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;
221
+ margin-top: 10px;
222
+ margin-left: auto;
223
  }
224
  #share-btn {
225
+ 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;
226
  }
227
  #share-btn * {
228
  all: unset;
229
  }
230
+ #share-btn-container div:nth-child(-n+2){
231
+ width: auto !important;
232
+ min-height: 0px !important;
233
+ }
234
+ #share-btn-container .wrap {
235
+ display: none !important;
236
+ }
237
  .gr-form{
238
  flex: 1 1 50%; border-top-right-radius: 0; border-bottom-right-radius: 0;
239
  }
 
341
  ["https://www.youtube.com/watch?v=Hk5evm1NgzA", "Spanish", "English", "trending on artstation pixiv makoto shinkai"],
342
  ["https://www.youtube.com/watch?v=sRmmQBBln9Q", "Spanish", "Spanish", "Hyper real, 4k"],
343
  ["https://www.youtube.com/watch?v=qz4Wc48KITA", "Spanish", "English", "detailed art by kay nielsen and walter crane, illustration style, watercolor"]],
344
+ inputs=[url, video_language, summary_language, video_styles],
345
+ outputs=[video_output, file_output],
346
+ fn=datapipeline,
347
+ cache_examples=True
348
  )
349
  gr.HTML(
350
  """
share_btn.py CHANGED
@@ -39,15 +39,12 @@ share_js = """async () => {
39
 
40
  });
41
  }
42
- const gradioEl = document.querySelector('body > gradio-app');
43
- // const gradioEl = document.querySelector("gradio-app").shadowRoot;
44
- const inputPromptEl = gradioEl.querySelector('#prompt-in textarea').value;
45
  const outputVideoEl = gradioEl.querySelector('#output-video video');
46
 
47
- let titleTxt = inputPromptEl;
48
- //if(titleTxt.length > 100){
49
- // titleTxt = titleTxt.slice(0, 100) + ' ...';
50
- //}
51
  const shareBtnEl = gradioEl.querySelector('#share-btn');
52
  const shareIconEl = gradioEl.querySelector('#share-btn-share-icon');
53
  const loadingIconEl = gradioEl.querySelector('#share-btn-loading-icon');
@@ -60,12 +57,11 @@ share_js = """async () => {
60
  const outputVideo = await getInputVideoFile(outputVideoEl);
61
  const urlOutputVideo = await uploadFile(outputVideo);
62
 
63
- const descriptionMd = `#### Here is my AI generated Video Summary:
64
- <video width="320" height="240" controls>
65
- <source src='${urlOutputVideo}' type="video/mp4">
66
- Your browser does not support the video tag.
67
- </video>
68
-
69
  `;
70
  const params = new URLSearchParams({
71
  title: titleTxt,
 
39
 
40
  });
41
  }
42
+ const gradioEl = document.querySelector("gradio-app").shadowRoot || document.querySelector('body > gradio-app');
43
+ const inputPromptEl = gradioEl.querySelector('#prompt-in input').value;
 
44
  const outputVideoEl = gradioEl.querySelector('#output-video video');
45
 
46
+ let titleTxt = `Video Summary: ${inputPromptEl}`;
47
+
 
 
48
  const shareBtnEl = gradioEl.querySelector('#share-btn');
49
  const shareIconEl = gradioEl.querySelector('#share-btn-share-icon');
50
  const loadingIconEl = gradioEl.querySelector('#share-btn-loading-icon');
 
57
  const outputVideo = await getInputVideoFile(outputVideoEl);
58
  const urlOutputVideo = await uploadFile(outputVideo);
59
 
60
+ const descriptionMd = `
61
+ #### Here is my AI generated Video Summary:
62
+ ##### ${inputPromptEl}
63
+
64
+ ${urlOutputVideo}
 
65
  `;
66
  const params = new URLSearchParams({
67
  title: titleTxt,