Spaces:

huggingface-projects
/

stable-diffusion-multiplayer

Runtime error

radames commited on Sep 25, 2022

Commit

66ed450

unverified ·

1 Parent(s): 6e6af53

@@ -1,8 +1,12 @@
 <script lang="ts">
 	import Cursor from '$lib/Cursor.svelte';
 	import Canvas from '$lib/Canvas.svelte';
 	import type { Room } from '@liveblocks/client';
 	import { onDestroy } from 'svelte';
 	/**
 	 * The main Liveblocks code for the example.
 	 * Check in src/routes/index.svelte to see the setup code.
@@ -15,13 +19,13 @@
 	let others = room.getOthers();
 	// Subscribe to further changes
-	// const unsubscribeMyPresence = room.subscribe('my-presence', (presence) => {
-	// 	myPresence = presence;
-	// });
-	// const unsubscribeOthers = room.subscribe('others', (otherUsers) => {
-	// 	others = otherUsers;
-	// });
 	// Unsubscribe when unmounting
 	onDestroy(() => {
@@ -34,8 +38,8 @@
 		event.preventDefault();
 		room.updatePresence({
 			cursor: {
-				x: Math.round(event.clientX),
-				y: Math.round(event.clientY)
 			}
 		});
 	}
@@ -59,31 +63,41 @@
 	];
 </script>
-<main on:pointerleave={handlePointerLeave} on:pointermove={handlePointerMove}>
-	<!-- Show the current user's cursor location -->
-	<div class="text">
-		{myPresence?.cursor
-			? `${myPresence.cursor.x} × ${myPresence.cursor.y}`
-			: 'Move your cursor to broadcast its position to other people in the room.'}
 	</div>
-	<!-- When others connected, iterate through others and show their cursors -->
-	{#if others}
-		{#each [...others] as { connectionId, presence } (connectionId)}
-			{#if presence?.cursor}
-				<Cursor
-					color={COLORS[connectionId % COLORS.length]}
-					x={presence.cursor.x}
-					y={presence.cursor.y}
-				/>
-			{/if}
-		{/each}
-	{/if}
-</main>
-<Canvas />
-<h3 class="text-xl">TESTS</h3>
 <style lang="postcss" scoped>
 	main {
 		/* @apply fixed top-0 left-0 w-screen h-screen flex flex-col items-center justify-center touch-none bg-white; */

 <script lang="ts">
 	import Cursor from '$lib/Cursor.svelte';
+	import Frame from '$lib/Frame.svelte';
 	import Canvas from '$lib/Canvas.svelte';
+	import Menu from '$lib/Menu.svelte';
 	import type { Room } from '@liveblocks/client';
 	import { onDestroy } from 'svelte';
+	import { currZoomTransform } from '$lib/store';
 	/**
 	 * The main Liveblocks code for the example.
 	 * Check in src/routes/index.svelte to see the setup code.
 	let others = room.getOthers();
 	// Subscribe to further changes
+	const unsubscribeMyPresence = room.subscribe('my-presence', (presence) => {
+		myPresence = presence;
+	});
+	const unsubscribeOthers = room.subscribe('others', (otherUsers) => {
+		others = otherUsers;
+	});
 	// Unsubscribe when unmounting
 	onDestroy(() => {
 		event.preventDefault();
 		room.updatePresence({
 			cursor: {
+				x: Math.round(event.layerX),
+				y: Math.round(event.layerY)
 			}
 		});
 	}
 	];
 </script>
+<div class="relative">
+	<div class="z-0">
+		<h3 class="text-xl">TESTS</h3>
 	</div>
+	<main class="z-10 relative">
+		<!-- Show the current user's cursor location -->
+		<div class="text">
+			{myPresence?.cursor
+				? `${myPresence.cursor.x} × ${myPresence.cursor.y}`
+				: 'Move your cursor to broadcast its position to other people in the room.'}
+		</div>
+		{#if myPresence?.cursor}
+			<Frame x={myPresence.cursor.x} y={myPresence.cursor.y} transform={$currZoomTransform} />
+		{/if}
+		<!-- When others connected, iterate through others and show their cursors -->
+		{#if others}
+			{#each [...others] as { connectionId, presence } (connectionId)}
+				{#if presence?.cursor}
+					<Cursor
+						color={COLORS[connectionId % COLORS.length]}
+						x={presence.cursor.x}
+						y={presence.cursor.y}
+					/>
+					<Frame x={presence.cursor.x} y={presence.cursor.y} transform={$currZoomTransform} />
+				{/if}
+			{/each}
+		{/if}
+		<Canvas />
+	</main>
+</div>
+<div class="fixed bottom-0 left-0 right-0 z-50">
+	<Menu />
+</div>
 <style lang="postcss" scoped>
 	main {
 		/* @apply fixed top-0 left-0 w-screen h-screen flex flex-col items-center justify-center touch-none bg-white; */

frontend/src/lib/Canvas.svelte CHANGED Viewed

@@ -1,47 +1,68 @@
 <script lang="ts">
-	import { zoom, zoomIdentity } from 'd3-zoom';
-	import { select, type Selection } from 'd3-selection';
-	import { onMount, tick } from 'svelte';
-	const width = 512 * 2;
-	const height = 512 * 2;
 	let canvasEl: HTMLCanvasElement;
 	let canvasCtx: CanvasRenderingContext2D;
-	const margin = { top: 50, right: 50, bottom: 50, left: 50 };
 	const extent = [
-		[margin.left, margin.top],
-		[width - margin.right, height - margin.top]
 	] as [[number, number], [number, number]];
-	const zoomHandler = zoom()
-		.scaleExtent([0.5, 2])
-		// .translateExtent(extent)
-		.extent(extent)
-		.on('zoom', zoomed);
 	onMount(() => {
 		select(canvasEl.parentElement)
 			.call(zoomHandler as any)
-			.call(zoomHandler.transform as any, zoomIdentity);
 		canvasCtx = canvasEl.getContext('2d') as CanvasRenderingContext2D;
 		canvasCtx.fillStyle = 'red';
-		canvasCtx.rect(100, 100, 500, 500);
 		canvasCtx.fill();
 	});
 	function zoomed(e: Event) {
-		const transform = e.transform;
 		console.log(canvasEl.style.transform, transform);
-		tick().then(() => {
-			canvasEl.style.transform = `translate(${transform.x}px, ${transform.y}px) scale(${transform.k})`;
-		});
 	}
 </script>
-<div class="fixed w-screen h-screen max-h-[1024px] top-0 left-0 overflow-hidden border-4 border-black">
-	<canvas bind:this={canvasEl} {width} {height} />
 </div>
 <style lang="postcss" scoped>

 <script lang="ts">
+	import { zoom, type ZoomTransform, zoomIdentity } from 'd3-zoom';
+	import { select } from 'd3-selection';
+	import { onMount } from 'svelte';
+	import { currZoomTransform } from '$lib/store';
+	const height = 512 * 5;
+	const width = 512 * 5;
 	let canvasEl: HTMLCanvasElement;
+	let containerEl: HTMLDivElement;
 	let canvasCtx: CanvasRenderingContext2D;
+	$:{
+		console.log($currZoomTransform)
+	}
+	const margin = { top: 100, right: 100, bottom: 100, left: 100 };
 	const extent = [
+		[-margin.left, -margin.top],
+		[width + margin.right, height + margin.bottom]
 	] as [[number, number], [number, number]];
 	onMount(() => {
+		const scale = width / containerEl.clientWidth;
+		const zoomHandler = zoom()
+			.scaleExtent([1 / scale / 2, 2])
+			.translateExtent([
+				[0, 0],
+				[width, height]
+			])
+			// .translateExtent(extent)
+			.clickDistance(2)
+			.on('zoom', zoomed);
 		select(canvasEl.parentElement)
 			.call(zoomHandler as any)
+			.call(zoomHandler.scaleTo as any, 1 / scale)
+			.on('pointermove', handlePointerMove)
+			.on('pointerleave', handlePointerLeave);
 		canvasCtx = canvasEl.getContext('2d') as CanvasRenderingContext2D;
 		canvasCtx.fillStyle = 'red';
+		canvasCtx.rect(10, 10, 160, 90);
 		canvasCtx.fill();
+		canvasCtx.strokeStyle = 'blue';
+		canvasCtx.lineWidth = 5;
+		canvasCtx.strokeRect(0, 0, width, height);
 	});
 	function zoomed(e: Event) {
+		const transform = ($currZoomTransform = e.transform);
 		console.log(canvasEl.style.transform, transform);
+		canvasEl.style.transform = `translate(${transform.x}px, ${transform.y}px) scale(${transform.k})`;
+	}
+	function handlePointerMove(e: PointerEvent) {
+		// console.log(e);
+	}
+	function handlePointerLeave(e: PointerEvent) {
+		// console.log(e);
 	}
 </script>
+<div
+	bind:this={containerEl}
+	class="fixed w-screen h-screen top-0 left-0 overflow-hidden border-4 border-black"
+>
+	<canvas bind:this={canvasEl} {width} {height} class="absolute top-0 left-0" />
 </div>
 <style lang="postcss" scoped>

frontend/src/lib/Frame.svelte ADDED Viewed

	@@ -0,0 +1,32 @@

+<script lang="ts">
+	import { spring } from 'svelte/motion';
+	import type { ZoomTransform } from 'd3-zoom';
+	export let transform: ZoomTransform;
+	export let color = '';
+	export let x = 0;
+	export let y = 0;
+	// Spring animation for cursor
+	const coords = spring(
+		{ x, y },
+		{
+			stiffness: 0.07,
+			damping: 0.35
+		}
+	);
+	// Update spring when x and y change
+	$: coords.set({ x, y });
+</script>
+<div
+	class="frame"
+	style={`transform: translateX(${$coords.x}px) translateY(${$coords.y}px) scale(${transform.k})`}
+/>
+<style lang="postcss" scoped>
+	.frame {
+		@apply absolute top-0 left-0 border-2 border-sky-500 bg-gradient-to-b from-sky-200 w-[512px] h-[512px];
+		transform-origin: 0 0;
+	}
+</style>

frontend/src/lib/Menu.svelte ADDED Viewed

	@@ -0,0 +1,39 @@

+<script lang="ts">
+	import { currZoomTransform } from '$lib/store';
+</script>
+<div class="grid grid-cols-3 gap-3 text-sm w-max mx-auto">
+	<div class="flex items-center">
+		<input
+			id="showframes"
+			type="checkbox"
+			class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 cursor-pointer"
+		/>
+		<label for="showframes" class="text-black dark:text-white cursor-pointer ml-2"
+			>Show Frames</label
+		>
+	</div>
+	<button class="button" title="Add Prompt"> Add Prompt </button>
+	<button class="button-paint bg-violet-100 text-violet-900" title="New Paint Frame">
+		<span
+			class="rounded-sm h-5 w-5 m-1 flex justify-center items-center border-2 border-dashed border-violet-700 mr-2"
+			>+</span
+		>
+		Paint
+	</button>
+</div>
+<style lang="postcss" scoped>
+	.link {
+		@apply text-xs underline font-bold hover:no-underline hover:text-gray-500 visited:text-gray-500;
+	}
+	.input {
+		@apply disabled:opacity-50 italic dark:placeholder:text-black placeholder:text-white text-white dark:text-black placeholder:text-opacity-30 dark:placeholder:text-opacity-10 dark:bg-white bg-slate-900 border-2 border-black rounded-2xl px-2 shadow-sm focus:outline-none focus:border-gray-400 focus:ring-1;
+	}
+	.button {
+		@apply disabled:opacity-50 dark:bg-white dark:text-black bg-black text-white rounded-2xl text-xs shadow-sm focus:outline-none focus:border-gray-400;
+	}
+	.button-paint {
+		@apply flex justify-center items-center disabled:opacity-50  dark:bg-white dark:text-black rounded-2xl shadow-sm focus:outline-none focus:border-gray-400;
+	}
+</style>

frontend/src/lib/store.ts CHANGED Viewed

@@ -1,24 +1,7 @@
 import { writable } from 'svelte/store';
-import type { User } from '$lib/types';
-import { browser } from '$app/environment';
 export const loadingState = writable<string>('');
 export const isLoading = writable<boolean>(false);
-let initialUser: User;
-if (typeof crypto['randomUUID'] === 'undefined') {
-	initialUser = (1e7 + '').replace(/\d/g, (c) =>
-		(c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16)
-	);
-} else {
-	initialUser = crypto.randomUUID();
-}
-export const currentUser = writable<User>(
-	browser ? JSON.parse(localStorage['user'] || JSON.stringify(initialUser)) : initialUser
-);
-currentUser.subscribe((value) => {
-	if (browser) {
-		return (localStorage['user'] = JSON.stringify(value));
-	}
-});

 import { writable } from 'svelte/store';
+import { type ZoomTransform, zoomIdentity } from 'd3-zoom';
 export const loadingState = writable<string>('');
 export const isLoading = writable<boolean>(false);
+export const currZoomTransform = writable<ZoomTransform>(zoomIdentity);

frontend/src/routes/+page.svelte CHANGED Viewed

@@ -4,7 +4,6 @@
 	import { PUBLIC_WS_ENDPOINT, PUBLIC_DEV_MODE } from '$env/static/public';
 	import type { Client, Room } from '@liveblocks/client';
 	import { createClient } from '@liveblocks/client';
-	import { currentUser } from '$lib/store';
 	import App from '$lib/App.svelte';
 	import type { Presence, Storage } from '$lib/types';
@@ -14,17 +13,14 @@
 			? 'http://localhost:7860'
 			: '/embed/huggingface-projects/color-palette-generator-sd';
 	console.log(apiUrl);
 	let client: Client;
 	let room: Room;
 	let roomId = 'sveltekit-live-cursors';
-	$: {
-		console.log('whoami', $currentUser);
-	}
 	onMount(() => {
 		client = createClient({
-			publicApiKey: 'pk_live_6o9jIg1m7lFJp5kc7HgYgE3S'
 		});
 		room = client.enter<Presence, Storage /* UserMeta, RoomEvent */>(roomId, {
@@ -33,7 +29,6 @@
 			},
 			initialStorage: {}
 		});
-		console.log('room', room);
 		return () => {
 			if (client && room) {
 				client.leave(roomId);

 	import { PUBLIC_WS_ENDPOINT, PUBLIC_DEV_MODE } from '$env/static/public';
 	import type { Client, Room } from '@liveblocks/client';
 	import { createClient } from '@liveblocks/client';
 	import App from '$lib/App.svelte';
 	import type { Presence, Storage } from '$lib/types';
 			? 'http://localhost:7860'
 			: '/embed/huggingface-projects/color-palette-generator-sd';
 	console.log(apiUrl);
 	let client: Client;
 	let room: Room;
 	let roomId = 'sveltekit-live-cursors';
 	onMount(() => {
 		client = createClient({
+			publicApiKey: 'pk_test_JlUZGH3kQmhmZQiqU2l8eIi5'
 		});
 		room = client.enter<Presence, Storage /* UserMeta, RoomEvent */>(roomId, {
 			},
 			initialStorage: {}
 		});
 		return () => {
 			if (client && room) {
 				client.leave(roomId);

frontend/vite.config.dev.ts CHANGED Viewed

@@ -4,7 +4,7 @@ import type { UserConfig } from 'vite';
 const config: UserConfig = {
 	plugins: [sveltekit()],
 	server: {
-		host: "0.0.0.0",
 		proxy: {
 			'/moon': {
 				target: 'https://huggingface.co',

 const config: UserConfig = {
 	plugins: [sveltekit()],
 	server: {
+		// host: "0.0.0.0",
 		proxy: {
 			'/moon': {
 				target: 'https://huggingface.co',

package.json CHANGED Viewed

@@ -1,5 +1,8 @@
 {
   "devDependencies": {
     "@types/smoothscroll-polyfill": "^0.3.1"
   }
 }

 {
   "devDependencies": {
     "@types/smoothscroll-polyfill": "^0.3.1"
+  },
+  "dependencies": {
+    "d3-scale": "^4.0.2"
   }
 }

@@ -7,7 +7,8 @@
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script>
 		%sveltekit.head%
 	</head>
-	<body class="dark:bg-[rgb(11,15,25)] bg-white dark:text-white text-black">
 		<div>%sveltekit.body%</div>
 	</body>
 </html>

 		<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script>
 		%sveltekit.head%
 	</head>
+	<!-- <body class="dark:bg-[rgb(11,15,25)] bg-white dark:text-white text-black"> -->
+	<body>
 		<div>%sveltekit.body%</div>
 	</body>
 </html>

menu