share works, route + for hf.space

frontend/src/lib/App.svelte

@@ -124,7 +124,7 @@
 							const imgURL = await uploadImage(imgBlob, prompt, key);
 							const promptImg = {
 								prompt,
-								imgURL: imgURL,
+								imgURL: imgURL.filename,
 								position,
 								date: new Date().getTime(),
 								id: nanoid()

frontend/src/lib/Buttons/ShareWithCommunity.svelte

@@ -1,16 +1,39 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte';
 	import IconCommunity from '$lib/Icons/IconCommunity.svelte';
 	import LoadingIcon from '$lib/Icons/LoadingIcon.svelte';
+	import { uploadImage } from '$lib/utils';
+	import { canvasEl } from '$lib/store';
 
-	export let isUploading: boolean = false;
+	let isUploading: boolean = false;
 
-	const dispatch = createEventDispatcher();
-	function handleClick() {
+	async function handleClick() {
 		if (isUploading) {
 			return;
 		}
-		dispatch('createCommunityPost');
+		const blob: Blob = await new Promise((resolve) => {
+			$canvasEl.toBlob(resolve as BlobCallback, 'image/jpeg', 0.95);
+		});
+		isUploading = true;
+		await createCommunityPost(blob);
+		isUploading = false;
+	}
+
+	async function createCommunityPost(canvasBlob: Blob) {
+		const canvasURL = await uploadImage(canvasBlob, 'canvas', 'canvas');
+		const canvasImage = `<img src="${canvasURL.url}" style="width:100%" width="1000" height="1000">`;
+		const descriptionMd = `#### Stable Diffusion Multiplayer:
+<div style="display: flex; overflow: scroll; column-gap: 0.75rem;">
+${canvasImage}
+</div>`;
+
+		const params = new URLSearchParams({
+			description: descriptionMd
+		});
+		const paramsStr = params.toString();
+		window.open(
+			`https://huggingface.co/spaces/huggingface-projects/diffuse-the-rest/discussions/new?${paramsStr}`,
+			'_blank'
+		);
 	}
 </script>
 
@@ -21,7 +44,7 @@
 	title="Share with community"
 >
 	{#if isUploading}
-		<LoadingIcon classList="animate-spin max-w-[20px]" />
+		<LoadingIcon classList="animate-spin max-w-[25px]" />
 	{:else}
 		<IconCommunity />
 	{/if}

frontend/src/lib/Icons/LoadingIcon.svelte

@@ -5,7 +5,6 @@
 <svg
 	class={classList}
 	width="51"
-	height="51"
 	viewBox="0 0 21 21"
 	fill="none"
 	xmlns="http://www.w3.org/2000/svg"

frontend/src/lib/utils.ts

@@ -20,7 +20,10 @@ export function base64ToBlob(base64image: string): Promise<Blob> {
 		img.src = base64image;
 	});
 }
-export async function uploadImage(imagBlob: Blob, prompt: string, key: string): Promise<string> {
+export async function uploadImage(imagBlob: Blob, prompt: string, key: string): Promise<{
+	url: string;
+	filename: string;
+}> {
 	// simple regex slugify string	for file name
 	const promptSlug = slugify(prompt);
 
@@ -38,7 +41,7 @@ export async function uploadImage(imagBlob: Blob, prompt: string, key: string):
 	});
 	const res = await response.json();
 
-	return res.filename;
+	return res;
 }
 const MAX = 512 * 5 - 512
 

frontend/src/routes/{+layout.svelte → +/+layout.svelte}

@@ -1,5 +1,5 @@
 <script>
-	import '../app.css';
+	import '../../app.css';
 </script>
 
 <slot />

stablediffusion-infinity/app.py

@@ -313,7 +313,7 @@ async def autorize(request: Request, db: sqlite3.Connection = Depends(get_db)):
         raise Exception(response.status_code, response.text)
 
 
-@ app.post('/api/uploadfile/')
+@ app.post('/api/uploadfile')
 async def create_upload_file(background_tasks: BackgroundTasks, file: UploadFile):
     contents = await file.read()
     file_size = len(contents)