Update share_btn.py
Browse files- share_btn.py +7 -6
share_btn.py
CHANGED
@@ -8,7 +8,9 @@ loading_icon_html = """<svg id="share-btn-loading-icon" style="display:none;" cl
|
|
8 |
"
|
9 |
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" fill="none" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><circle style="opacity: 0.25;" cx="12" cy="12" r="10" stroke="white" stroke-width="4"></circle><path style="opacity: 0.75;" fill="white" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>"""
|
10 |
|
11 |
-
share_js = """
|
|
|
|
|
12 |
async function uploadFile(file){
|
13 |
const UPLOAD_URL = 'https://huggingface.co/uploads';
|
14 |
const response = await fetch(UPLOAD_URL, {
|
@@ -25,7 +27,7 @@ share_js = """async () => {
|
|
25 |
|
26 |
async function getOutputVideoFile(videoURL){
|
27 |
|
28 |
-
fetch(videoURL
|
29 |
.then(response => response.blob())
|
30 |
.then(blob => {
|
31 |
// do something with the blob;
|
@@ -42,18 +44,16 @@ share_js = """async () => {
|
|
42 |
const gradioEl = document.querySelector("gradio-app").shadowRoot || document.querySelector('body > gradio-app');
|
43 |
|
44 |
const whisper_input = gradioEl.querySelector('#text_inp textarea').value;
|
|
|
45 |
const outputVideo = gradioEl.querySelector('#video_out video');
|
46 |
const outputVideo_src = gradioEl.querySelector('#video_out video').src;
|
47 |
console.log(outputVideo_src)
|
48 |
const outputVideo_name = outputVideo_src.split('/').pop();
|
|
|
49 |
const video_url = `https://fffiloni-gpt-talking-portrait.hf.space/file=https://fffiloni-one-shot-talking-face.hf.space/file=/tmp/${outputVideo_name}`;
|
50 |
|
51 |
let titleTxt = outputVideo_name;
|
52 |
|
53 |
-
//if(titleTxt.length > 100){
|
54 |
-
// titleTxt = titleTxt.slice(0, 100) + ' ...';
|
55 |
-
//}
|
56 |
-
|
57 |
const shareBtnEl = gradioEl.querySelector('#share-btn');
|
58 |
const shareIconEl = gradioEl.querySelector('#share-btn-share-icon');
|
59 |
const loadingIconEl = gradioEl.querySelector('#share-btn-loading-icon');
|
@@ -61,6 +61,7 @@ share_js = """async () => {
|
|
61 |
if(!outputVideo){
|
62 |
return;
|
63 |
};
|
|
|
64 |
shareBtnEl.style.pointerEvents = 'none';
|
65 |
shareIconEl.style.display = 'none';
|
66 |
loadingIconEl.style.removeProperty('display');
|
|
|
8 |
"
|
9 |
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" fill="none" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><circle style="opacity: 0.25;" cx="12" cy="12" r="10" stroke="white" stroke-width="4"></circle><path style="opacity: 0.75;" fill="white" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>"""
|
10 |
|
11 |
+
share_js = """
|
12 |
+
|
13 |
+
async () => {
|
14 |
async function uploadFile(file){
|
15 |
const UPLOAD_URL = 'https://huggingface.co/uploads';
|
16 |
const response = await fetch(UPLOAD_URL, {
|
|
|
27 |
|
28 |
async function getOutputVideoFile(videoURL){
|
29 |
|
30 |
+
fetch(videoURL)
|
31 |
.then(response => response.blob())
|
32 |
.then(blob => {
|
33 |
// do something with the blob;
|
|
|
44 |
const gradioEl = document.querySelector("gradio-app").shadowRoot || document.querySelector('body > gradio-app');
|
45 |
|
46 |
const whisper_input = gradioEl.querySelector('#text_inp textarea').value;
|
47 |
+
|
48 |
const outputVideo = gradioEl.querySelector('#video_out video');
|
49 |
const outputVideo_src = gradioEl.querySelector('#video_out video').src;
|
50 |
console.log(outputVideo_src)
|
51 |
const outputVideo_name = outputVideo_src.split('/').pop();
|
52 |
+
|
53 |
const video_url = `https://fffiloni-gpt-talking-portrait.hf.space/file=https://fffiloni-one-shot-talking-face.hf.space/file=/tmp/${outputVideo_name}`;
|
54 |
|
55 |
let titleTxt = outputVideo_name;
|
56 |
|
|
|
|
|
|
|
|
|
57 |
const shareBtnEl = gradioEl.querySelector('#share-btn');
|
58 |
const shareIconEl = gradioEl.querySelector('#share-btn-share-icon');
|
59 |
const loadingIconEl = gradioEl.querySelector('#share-btn-loading-icon');
|
|
|
61 |
if(!outputVideo){
|
62 |
return;
|
63 |
};
|
64 |
+
|
65 |
shareBtnEl.style.pointerEvents = 'none';
|
66 |
shareIconEl.style.display = 'none';
|
67 |
loadingIconEl.style.removeProperty('display');
|