push state to Spaces

frontend/src/lib/App.svelte

@@ -3,12 +3,11 @@
 	import Frame from '$lib/Frame.svelte';
 	import PaintFrame from '$lib/PaintFrame.svelte';
 	import PaintCanvas from '$lib/PaintCanvas.svelte';
-	import ShareWithCommunity from '$lib/Buttons/ShareWithCommunity.svelte';
 	import Menu from '$lib/Menu.svelte';
 	import PromptModal from '$lib/PromptModal.svelte';
 	import { COLORS } from '$lib/constants';
 	import { PUBLIC_WS_INPAINTING } from '$env/static/public';
-	import type { PromptImgKey } from '$lib/types';
+	import type { PromptImgKey, PromptImgObject } from '$lib/types';
 	import { Status } from '$lib/types';
 	import {
 		loadingState,
@@ -18,7 +17,6 @@
 		isRenderingCanvas
 	} from '$lib/store';
 	import { useMyPresence, useObject, useOthers } from '$lib/liveblocks';
-	import { base64ToBlob, uploadImage } from '$lib/utils';
 	import { nanoid } from 'nanoid';
 
 	const myPresence = useMyPresence({ addToHistory: true });
@@ -70,7 +68,7 @@
 		};
 
 		const datapayload = {
-			data: [base64Crop, prompt, 0.75, 7.5, 40, 'patchmatch']
+			data: [base64Crop, prompt, 0.75, 7.5, 40, 'patchmatch', room]
 		};
 
 		const websocket = new WebSocket(PUBLIC_WS_INPAINTING);
@@ -205,9 +203,6 @@
 		{/if}
 	</main>
 </div>
-<!-- <div class="fixed top-0 right-0 z-10 p-2">
-	<ShareWithCommunity />
-</div> -->
 <div class="fixed bottom-2 md:bottom-16 left-0 right-0 z-10 my-2">
 	<Menu on:prompt={onPrompt} {isLoading} />
 </div>

frontend/src/lib/Buttons/AboutButton.svelte

@@ -1,7 +1,7 @@
-<div class="md:w-[210px] text-sm md:flex flex-col order-last md:order-none">
-	<p class="mb-4 inline">
+<div class="md:w-[210px] text-sm md:flex flex-col order-last md:order-none py-4">
+	<p class="inline pb-3">
 		Instructions: move the <span class="text-blue-700 bg-blue-300/60 px-0.5">blue square</span>,
-		click "🖍 Paint", and prompt.
+		click "🖍 Paint".
 	</p>
 	<button on:click class="items-center inline-flex">
 		<svg width=".9em" height=".9em" viewBox="0 0 24 24" class="mr-1"

frontend/src/lib/Buttons/RoomsSelector.svelte

@@ -36,6 +36,7 @@
 		collapsed = true;
 		$page.url.searchParams.set('roomid', room.room_id);
 		window.location.search = `?${$page.url.searchParams.toString()}`;
+		window.parent.postMessage({ queryString: `?${$page.url.searchParams.toString()}` }, '*');
 	}
 </script>
 

frontend/src/lib/Buttons/ShareWithCommunity.svelte

@@ -3,6 +3,7 @@
 	import LoadingIcon from '$lib/Icons/LoadingIcon.svelte';
 	import { uploadImage } from '$lib/utils';
 	import { canvasEl, selectedRoomID } from '$lib/store';
+	import { nanoid } from 'nanoid';
 
 	let isUploading: boolean = false;
 
@@ -19,10 +20,17 @@
 	}
 
 	async function createCommunityPost(canvasBlob: Blob) {
-		const canvasURL = await uploadImage(canvasBlob, 'canvas', 'canvas');
+		const canvasURL = await uploadImage(canvasBlob, {
+			prompt: 'canvas',
+			position: { x: 0, y: 0 },
+			date: new Date().getTime(),
+			id: nanoid(),
+			room: $selectedRoomID || 'default'
+		});
 		const canvasImage = `<img src="${canvasURL.url}" style="width:100%" width="1000" height="1000">`;
 		const descriptionMd = `#### Stable Diffusion Multiplayer:
-		### Room ${$selectedRoomID}
+### [${$selectedRoomID}](https://huggingface.co/spaces/huggingface-projects/stable-diffusion-multiplayer?roomid=${$selectedRoomID})
+		
 <div style="display: flex; overflow: scroll; column-gap: 0.75rem;">
 ${canvasImage}
 </div>`;
@@ -41,12 +49,12 @@ ${canvasImage}
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
-	class="text-sm font-mono flex items-center justify-center bg-black gap-x-1 rounded-xl cursor-pointer px-2 py-1"
+	class="text-xs font-mono flex items-center justify-center bg-black gap-x-1 rounded-xl cursor-pointer px-2 py-1"
 	on:click={handleClick}
 	title="Share with community"
 >
 	{#if isUploading}
-		<LoadingIcon classList={'animate-spin max-w-[25px]'} />
+		<LoadingIcon classList={'animate-spin max-w-[25px] text-white'} />
 	{:else}
 		<IconCommunity />
 	{/if}

frontend/src/lib/Menu.svelte

@@ -3,7 +3,7 @@
 	import RoomsSelector from '$lib/Buttons/RoomsSelector.svelte';
 	import AboutButton from '$lib/Buttons/AboutButton.svelte';
 	import { toggleAbout } from '$lib/store';
-
+	import ShareWithCommunity from '$lib/Buttons/ShareWithCommunity.svelte';
 	// const broadcast = useBroadcastEvent();
 
 	const dispatch = createEventDispatcher();
@@ -14,12 +14,17 @@
 <svelte:window
 	on:keyup|preventDefault|stopPropagation={(e) => e.key === 'Enter' && dispatch('prompt')}
 />
-<div class="flex flex-col md:flex-row items-center justify-between px-4 md:px-12 gap-2 md:gap-0">
-	<AboutButton
-		on:click={() => {
-			$toggleAbout = !$toggleAbout;
-		}}
-	/>
+<div class="flex flex-col md:flex-row items-center justify-between px-4 md:px-12 gap-3 md:gap-0">
+	<div class="flex flex-col justify-center items-center">
+		<AboutButton
+			on:click={() => {
+				$toggleAbout = !$toggleAbout;
+			}}
+		/>
+		<div class="order-last max-w-[20ch]">
+			<ShareWithCommunity />
+		</div>
+	</div>
 
 	<button
 		on:click={() => dispatch('prompt')}

frontend/src/lib/PaintFrame.svelte

@@ -7,7 +7,7 @@
 	import { round } from '$lib/utils';
 
 	import type { ZoomTransform } from 'd3-zoom';
-	import { onMount, createEventDispatcher } from 'svelte';
+	import { onMount , createEventDispatcher} from 'svelte';
 
 	import { useMyPresence } from '$lib/liveblocks';
 	import { canvasEl, maskEl, loadingState, isRenderingCanvas } from '$lib/store';
@@ -272,16 +272,17 @@
 			>
 				{#if !isLoading}
 					<div class="mx-4 flex flex-col gap-2">
-						<!-- <button
+						<button
+							title="Click to prompt and paint"
 							on:click={() => dispatch('prompt')}
 							class="w-10 h-10 bg-blue-600 hover:saturate-150 shadow-2xl shadow-blue-500 rounded-lg flex items-center justify-center text-3xl"
 						>
 							🖍
-						</button> -->
+						</button>
 						<button
 							title="Draw your custom mask on the frame"
 							on:click={toggleDrawMask}
-							class="w-10 h-10 bg-blue-600 hover:saturate-150 shadow-2xl shadow-blue-500 rounded-lg flex items-center justify-center text-3xl"
+							class="w-10 h-10 bg-blue-600 hover:saturate-200 shadow-2xl shadow-blue-500 rounded-lg flex items-center justify-center text-3xl"
 						>
 							<svg class="text-white" width="1em" height="1em" viewBox="0 0 100 100"
 								><path

frontend/src/lib/types.ts

@@ -31,7 +31,7 @@ export type PromptImgObject = {
 	}
 	date: number;
 	id: string;
-	roomid: string;
+	room: string;
 };
 
 export type PromptImgKey = string;

frontend/src/lib/utils.ts

@@ -41,11 +41,6 @@ export async function uploadImage(imagBlob: Blob, params: {
 
 	const formData = new FormData()
 	formData.append('file', file)
-	formData.append('prompt', params.prompt)
-	formData.append('id', params.id)
-	formData.append('position', JSON.stringify(params.position))
-	formData.append('room', params.room)
-	formData.append('date', JSON.stringify(params.date))
 
 	const response = await fetch(PUBLIC_API_BASE + "/uploadfile", {
 		method: 'POST',

frontend/src/routes/+page.svelte

@@ -41,13 +41,17 @@
 			if (room && roomAvailable) {
 				$selectedRoomID = room.room_id;
 				const state = { roomid: room.room_id };
-				window.history.replaceState(null, '', '?' + new URLSearchParams(state).toString());
+				const queryString = '?' + new URLSearchParams(state).toString();
+				window.history.replaceState(null, '', queryString);
+				window.parent.postMessage({ queryString: queryString }, '*');
 			}
 		}
 		if (emptyRoom && !roomAvailable) {
 			selectedRoomID.set(emptyRoom.room_id);
 			const state = { roomid: emptyRoom.room_id };
-			window.history.replaceState(null, '', '?' + new URLSearchParams(state).toString());
+			const queryString = '?' + new URLSearchParams(state).toString();
+			window.history.replaceState(null, '', queryString);
+			window.parent.postMessage({ queryString: queryString }, '*');
 		}
 		loading = false;
 		return { rooms };