Update share_btn.py

share_btn.py

@@ -9,20 +9,20 @@ loading_icon_html = """<svg id="share-btn-loading-icon" style="display:none;" cl
    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>"""
 
 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
-		});
-		const url = await response.text();
-		return url;
-	}
-	
+    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
+        });
+        const url = await response.text();
+        return url;
+    }
+    
     async function getInputImgFile(imgEl){
         const res = await fetch(imgEl.src);
         const blob = await res.blob();
@@ -35,12 +35,15 @@ share_js = """async () => {
             const fileName = `sd-perception-${{imgId}}.jpg`;
             return new File([blob], fileName, { type: 'image/jpeg' });
         }
-	}
-    
+    }
+    console.log("test")
     const gradioEl = document.querySelector("gradio-app").shadowRoot || document.querySelector('body > gradio-app');
-    const selectedLoRA = gradioEl.querySelector('#selected_lora').innerHTML;
-    const inputPrompt = gradioEl.querySelector('#prompt input').value;
-    const outputImgEl = gradioEl.querySelector('#result-image img');
+    const randomLoRA_1 = gradioEl.querySelector('#component-7 img');
+    const randomLoRA_1_title = gradioEl.querySelector('#component-7 [data-testid="block-label"] span').innerHTML
+    const randomLoRA_2 = gradioEl.querySelector('#component-7 img')
+    const randomLoRA_2_title = gradioEl.querySelector('component-7 [data-testid="block-label"] span').innerHTML
+    const prompt = gradioEl.querySelector('#prompt textarea').value
+    const outputImgEl = gradioEl.querySelector('#component-22 img');
     
     const shareBtnEl = gradioEl.querySelector('#share-btn');
     const shareIconEl = gradioEl.querySelector('#share-btn-share-icon');
@@ -51,22 +54,34 @@ share_js = """async () => {
     loadingIconEl.style.removeProperty('display');
     
     const inputFile = await getInputImgFile(outputImgEl);
-    const urlInputImg = await uploadFile(inputFile);
+    const urlOutputImg = await uploadFile(inputFile);
+
+    const inputFile = await getInputImgFile(randomLoRA_1);
+    const urlLoRA1 = await uploadFile(inputFile);
+
+    const inputFile = await getInputImgFile(randomLoRA_2);
+    const urlLoRA2 = await uploadFile(inputFile);
     
     const descriptionMd = `
-${selectedLoRA}
+
+| {randomLoRA_1_title} |   | {randomLoRA_2_title}|
+|---------|-----------|---------|
+| ![{randomLoRA_1_title}]({urlLoRA1}) | + | ![{randomLoRA_1_title}]({urlLoRA2}) |
+
 ### Prompt
 ${inputPrompt}
+
 #### Generated Image:
 <img src="${urlInputImg}" />
 `;
+    console.log(descriptionMd)
     const params = new URLSearchParams({
-        title: inputPrompt,
+        title: prompt,
         description: descriptionMd,
         preview: true
     });
-	const paramsStr = params.toString();
-	window.open(`https://huggingface.co/spaces/multimodalart/LoraTheExplorer/discussions/new?${paramsStr}`, '_blank');
+    const paramsStr = params.toString();
+    window.open(`https://huggingface.co/spaces/multimodalart/lora-roulette/discussions/new?${paramsStr}`, '_blank');
     shareBtnEl.style.removeProperty('pointer-events');
     shareIconEl.style.removeProperty('display');
     loadingIconEl.style.display = 'none';