Add input img as part of share button

app.py

@@ -53,7 +53,7 @@ with gr.Blocks(css=css) as demo:
 
     with gr.Row():
       with gr.Column():
-          input_img = gr.Image(type="filepath")
+          input_img = gr.Image(type="filepath", elem_id="input-img")
           with gr.Row():
             see_prompts = gr.Button("Check how your image prompts your model!")              
 

share_btn.py

@@ -23,8 +23,23 @@ share_js = """async () => {
 		return url;
 	}
 
+	async function getInputImgFile(imgEl){
+        const res = await fetch(imgEl.src);
+        const blob = await res.blob();
+        const imgId = Date.now() % 200;
+        const isPng = imgEl.src.startsWith(`data:image/png`);
+        if(isPng){
+            const fileName = `sd-perception-${{imgId}}.png`;
+            return new File([blob], fileName, { type: 'image/png' });
+        }else{
+            const fileName = `sd-perception-${{imgId}}.jpg`;
+            return new File([blob], fileName, { type: 'image/jpeg' });
+        }
+	}
+
     const gradioEl = document.querySelector('body > gradio-app');
     // const gradioEl = document.querySelector("gradio-app").shadowRoot;
+    const inputImgEl = gradioEl.querySelector('#input-img img');
     const imgEls = gradioEl.querySelectorAll('#generated-gallery img');
     const promptTxt = gradioEl.querySelector('#translated textarea').value;
     const shareBtnEl = gradioEl.querySelector('#share-btn');
@@ -48,6 +63,8 @@ share_js = """async () => {
             return new File([blob], fileName, { type: 'image/jpeg' });
         })
     );
+    const inputFile = await getInputImgFile(inputImgEl);
+    files.push(inputFile);
 
     const urls = await Promise.all(files.map((f) => uploadFile(f)));
 	const htmlImgs = urls.map(url => `<img src='${url}' width='400' height='400'>`);