Duplicate from huggingface-projects/stable-diffusion-multiplayer

Co-authored-by: Radamés Ajna <radames@users.noreply.huggingface.co>

.devcontainer/Dockerfile

@@ -0,0 +1,11 @@
+# See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.245.2/containers/codespaces-linux/.devcontainer/base.Dockerfile
+
+FROM mcr.microsoft.com/vscode/devcontainers/universal:2-focal
+
+USER root
+
+COPY packages.txt /root/packages.txt
+RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
+    && xargs -r -a /root/packages.txt apt-get install -y
+
+USER codespace

.devcontainer/devcontainer.json

@@ -0,0 +1,35 @@
+{
+	"postCreateCommand": "oryx build -p virtualenv_name=.venv --log-file /tmp/oryx-build.log --manifest-dir /tmp || echo 'Could not auto-build. Skipping.' && make set-env",
+	"hostRequirements": {
+		"gpus": 1
+	},
+	"features": {
+		"ghcr.io/devcontainers/features/nvidia-cuda:1": {
+			"installCudnn": true
+		}
+	},
+	"build": {
+		"dockerfile": "Dockerfile"
+	},
+	"customizations": {
+		"vscode": {
+			"extensions": [
+				"GitHub.vscode-pull-request-github",
+				"bradlc.vscode-tailwindcss",
+				"svelte.svelte-vscode",
+				"csstools.postcss"
+			]
+		}
+	},
+	"mounts": [
+		"source=codespaces-linux-var-lib-docker,target=/var/lib/docker,type=volume"
+	],
+	"runArgs": [
+		"--cap-add=SYS_PTRACE",
+		"--security-opt",
+		"seccomp=unconfined",
+		"--privileged",
+		"--init"
+	],
+	"remoteUser": "codespace"
+}

.devcontainer/packages.txt

@@ -0,0 +1,32 @@
+python3-opencv
+libopencv-dev
+libopencv-core-dev
+pkg-config
+libopencv-imgcodecs-dev
+libopencv-dev
+libopencv-contrib-dev
+build-essential
+cmake
+git
+pkg-config
+libgtk-3-dev
+libavcodec-dev
+libavformat-dev
+libswscale-dev
+libv4l-dev
+libxvidcore-dev
+libx264-dev
+libjpeg-dev
+libpng-dev
+libtiff-dev
+gfortran
+openexr
+libatlas-base-dev
+python3-dev
+python3-numpy
+libtbb2
+libtbb-dev
+libdc1394-22-dev
+libopenexr-dev
+libgstreamer-plugins-base1.0-dev
+libgstreamer1.0-dev

.devcontainer/setup-python-tools.sh

@@ -0,0 +1,64 @@
+#!/usr/bin/env bash
+
+set -e
+
+PYTHON=${1:-"python"}
+USERNAME=${2-"automatic"}
+
+# Make sure we run the command as non-root user
+sudoUserIf() {
+  if [ "$(id -u)" -eq 0 ] && [ "${USERNAME}" != "root" ]; then
+    sudo -u ${USERNAME} "$@"
+  else
+    "$@"
+  fi
+}
+
+installPythonPackage() {
+  PACKAGE=${1:-""}
+  VERSION=${2:-"latest"}
+
+  # pip skips installation if the package is already installed
+  echo "Installing $PACKAGE..."
+  if [ "${VERSION}" = "latest" ]; then
+    sudoUserIf ${PYTHON} -m pip install ${PACKAGE} --no-cache-dir
+  else
+    sudoUserIf ${PYTHON} -m pip install ${PACKAGE}=="${VERSION}" --no-cache-dir
+  fi
+}
+
+# If in automatic mode, determine if a user already exists, if not use vscode
+if [ "${USERNAME}" = "auto" ] || [ "${USERNAME}" = "automatic" ]; then
+    USERNAME=""
+    POSSIBLE_USERS=("vscode" "node" "codespace" "$(awk -v val=1000 -F ":" '$3==val{print $1}' /etc/passwd)")
+    for CURRENT_USER in ${POSSIBLE_USERS[@]}; do
+        if id -u ${CURRENT_USER} > /dev/null 2>&1; then
+            USERNAME=${CURRENT_USER}
+            break
+        fi
+    done
+    if [ "${USERNAME}" = "" ]; then
+        USERNAME=vscode
+    fi
+elif [ "${USERNAME}" = "none" ]; then
+    USERNAME=root
+    USER_UID=0
+    USER_GID=0
+fi
+
+# Make sure that Python is available
+if ! ${PYTHON} --version > /dev/null ; then
+  echo "You need to install Python before installing packages"
+  exit 1
+fi
+
+installPythonPackage "numpy" "latest"
+installPythonPackage "pandas" "latest"
+installPythonPackage "scipy" "latest"
+installPythonPackage "matplotlib" "latest"
+installPythonPackage "seaborn" "latest"
+installPythonPackage "scikit-learn" "latest"
+installPythonPackage "tensorflow" "latest"
+installPythonPackage "keras" "latest"
+installPythonPackage "torch" "latest"
+installPythonPackage "requests" "latest"

.gitattributes

@@ -0,0 +1,31 @@
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text

.github/workflows/size.yml

@@ -0,0 +1,16 @@
+name: Check file size
+on:               # or directly `on: [push]` to run the action on every push on any branch
+  pull_request:
+    branches: [main]
+
+  # to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+jobs:
+  sync-to-hub:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check large files
+        uses: ActionsDesk/lfs-warning@v2.0
+        with:
+          filesizelimit: 10485760 # this is 10MB so we can sync to HF Spaces

.github/workflows/sync.yml

@@ -0,0 +1,20 @@
+name: Sync to Hugging Face hub
+on:
+  push:
+    tags:
+    - '*'
+
+  # to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+jobs:
+  sync-to-hub:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - name: Push to hub
+        env:
+          HF_TOKEN: ${{ secrets.HF_TOKEN }}
+        run: git push https://radames:$HF_TOKEN@huggingface.co/spaces/huggingface-projects/stable-diffusion-multiplayer main --force

.gitignore

@@ -0,0 +1,21 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock
+venv/
+__pycache__/
+flagged/
+data
+data.db
+data.json
+rooms.db
+sd-multiplayer-data/

.nvmrc

@@ -0,0 +1 @@
+18

.vscode/extensions.json

@@ -0,0 +1,6 @@
+{
+    "recommendations": [
+        "bradlc.vscode-tailwindcss",
+        "svelte.svelte-vscode"
+    ],
+}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "terminal.integrated.defaultProfile.linux": "zsh"
+}

Makefile

@@ -0,0 +1,12 @@
+set-env:
+	pip install -r requirements.txt
+	cd frontend && npm install && cp .env.development.example .env.development && cp .env.example .env
+build-client:
+	cd frontend && npm install && npm run build && rm -rf ../static && cp -r build/ ../static/
+build-dev:
+	cd frontend && npm install && npm run build-dev && rm -rf ../static && cp -r build/ ../static/
+run-front-dev:
+	cd frontend && npm install && npm run dev
+run-prod:
+	python app.py
+build-all: run-prod

README.md

@@ -0,0 +1,14 @@
+---
+title: Stable Diffusion Multiplayer
+emoji: 👥⚙️🎨
+colorFrom: yellow
+colorTo: gray
+sdk: gradio
+sdk_version: 3.4
+app_file: run.py
+fullWidth: true
+pinned: false
+duplicated_from: huggingface-projects/stable-diffusion-multiplayer
+---
+
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

frontend/.env.development.example

@@ -0,0 +1,3 @@
+PUBLIC_WS_INPAINTING="ws://0.0.0.0:7860/gradio/queue/join"
+PUBLIC_UPLOADS="https://d26smi9133w0oo.cloudfront.net"
+PUBLIC_API_BASE="/server/api"

frontend/.env.example

@@ -0,0 +1,3 @@
+PUBLIC_WS_INPAINTING="wss://spaces.huggingface.tech/huggingface-projects/stable-diffusion-multiplayer/gradio/queue/join"
+PUBLIC_UPLOADS="https://d26smi9133w0oo.cloudfront.net"
+PUBLIC_API_BASE="/api"

frontend/.eslintignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

frontend/.eslintrc.cjs

@@ -0,0 +1,20 @@
+module.exports = {
+	root: true,
+	parser: '@typescript-eslint/parser',
+	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
+	plugins: ['svelte3', '@typescript-eslint'],
+	ignorePatterns: ['*.cjs'],
+	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
+	settings: {
+		'svelte3/typescript': () => require('typescript')
+	},
+	parserOptions: {
+		sourceType: 'module',
+		ecmaVersion: 2020
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true
+	}
+};

frontend/.gitignore

@@ -0,0 +1,12 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+.vercel
+.output
+venv/
+__pycache__/

frontend/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

frontend/.prettierignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

frontend/.prettierrc

@@ -0,0 +1,8 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"pluginSearchDirs": ["."],
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}

frontend/README.md

@@ -0,0 +1,38 @@
+# create-svelte
+
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm create svelte@latest
+
+# create a new project in my-app
+npm create svelte@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

frontend/package.json

@@ -0,0 +1,52 @@
+{
+	"name": "frontend",
+	"version": "0.0.1",
+	"scripts": {
+		"dev": "NODE_ENV=development vite --config vite.config.dev.ts dev",
+		"build-dev": "vite build --mode development",
+		"build": "vite build",
+		"preview": "vite preview",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write ."
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-static": "^1.0.0-next.43",
+		"@sveltejs/kit": "^1.0.0-next.504",
+		"@tailwindcss/forms": "^0.5.3",
+		"@tailwindcss/line-clamp": "^0.4.2",
+		"@types/cookie": "^0.5.1",
+		"@types/d3-array": "^3.0.3",
+		"@types/d3-drag": "^3.0.1",
+		"@types/d3-selection": "^3.0.3",
+		"@types/d3-zoom": "^3.0.1",
+		"@typescript-eslint/eslint-plugin": "^5.38.0",
+		"@typescript-eslint/parser": "^5.38.0",
+		"autoprefixer": "^10.4.12",
+		"d3-scale": "^4.0.2",
+		"eslint": "^8.24.0",
+		"eslint-config-prettier": "^8.3.0",
+		"eslint-plugin-svelte3": "^4.0.0",
+		"postcss": "^8.4.16",
+		"prettier": "^2.6.2",
+		"prettier-plugin-svelte": "^2.7.1",
+		"svelte": "^3.46.0",
+		"svelte-check": "^2.9.1",
+		"svelte-preprocess": "^4.10.7",
+		"tailwindcss": "^3.1.8",
+		"tslib": "^2.3.1",
+		"typescript": "^4.7.4",
+		"vite": "^3.1.3"
+	},
+	"type": "module",
+	"dependencies": {
+		"@fontsource/fira-mono": "^4.5.0",
+		"@liveblocks/client": "^0.18.2",
+		"d3-array": "^3.2.0",
+		"d3-drag": "^3.0.0",
+		"d3-selection": "^3.0.0",
+		"d3-zoom": "^3.0.0",
+		"nanoid": "^4.0.0"
+	}
+}

frontend/postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

frontend/src/app.css

@@ -0,0 +1,25 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Firefox */
+.x-scroll {
+  scrollbar-width: thin;
+  scrollbar-color: white #2F6DCB;
+}
+
+/* Chrome, Edge, and Safari */
+.x-scroll::-webkit-scrollbar {
+  width: 4px;
+}
+
+.x-scroll::-webkit-scrollbar-track {
+  background: white;
+  border-radius: 100px;
+}
+
+.x-scroll::-webkit-scrollbar-thumb {
+  background-color: #2F6DCB;
+  border-radius: 100px;
+  border: 2px solid #2F6DCB;
+}

frontend/src/app.d.ts

@@ -0,0 +1,29 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+// and what to do when importing types
+import type { ZoomTransform } from 'd3-zoom';
+
+declare global {
+	namespace App {
+		// interface Locals {}
+		// interface PageData {}
+		// interface Platform {}
+		interface Window {
+			parentIFrame: unknown;
+		}
+	}
+	interface Error {
+		code: number;
+	}
+	interface Event {
+		relatedTarget: EventTarget | null;
+		transform: ZoomTransform;
+		x: number;
+		y: number;
+		subject: {
+			x: number;
+			y: number;
+		}
+		sourceEvent: PointerEvent | MouseEvent | TouchEvent
+	}
+}

frontend/src/app.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8" />
+	<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+	<script src=""></script>
+	%sveltekit.head%
+</head>
+<body class="bg-blue-200">
+	<div>%sveltekit.body%</div>
+</body>
+
+</html>

frontend/src/lib/About.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import LiveBlocks from '$lib/Icons/LiveBlocks.svelte';
+	export let classList = '';
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div
+	on:click
+	class="fixed {classList} w-screen h-screen top-0 left-0 bottom-0 right-0 z-50 items-center justify-center bg-black text-white bg-opacity-90 px-3"
+>
+	<div class="max-w-md">
+		<h2 class="font-bold text-xl font-mono mb-8">Stable Difussion Multiplayer</h2>
+		<ul>
+			<li class="mb-2">
+				Powered by <a
+					href="https://huggingface.co/docs/hub/spaces-gpus"
+					class="text-blue-400 hover:text-blue-600 underline"
+					>Hugging Face GPU Spaces
+				</a>
+			</li>
+			<li class="mb-2">
+				<a
+					href="https://huggingface.co/docs/diffusers/index"
+					class="text-blue-400 hover:text-blue-600 underline"
+				>
+					Diffusers
+				</a>
+				and
+				<a
+					href="https://github.com/runwayml/stable-diffusion"
+					target="_blank"
+					class="text-blue-400 hover:text-blue-600 underline"
+					rel="noopener noreferrer"
+				>
+					Runwayml Inpainting Stable Diffusion</a
+				>
+			</li>
+			<li class="mb-2">
+				Thanks to <a
+					href="https://twitter.com/lkwq007"
+					target="_blank"
+					rel="noopener noreferrer"
+					class="text-blue-400 hover:text-blue-600 underline"
+				>
+					Lnyan</a
+				>
+				for the original outpainting technique implemented on
+				<a
+					href="https://github.com/lkwq007/stablediffusion-infinity"
+					target="_blank"
+					rel="noopener noreferrer"
+					class="text-blue-400 hover:text-blue-600 underline"
+					>Stable Diffusion Infinity
+				</a>
+			</li>
+
+			<li class="mb-2">
+				<p class="text-base flex items-center">
+					Multiplayer API by
+					<a href="https://liveblocks.io" target="_blank" rel="noopener noreferrer">
+						<LiveBlocks classList={'ml-2'} />
+					</a>
+				</p>
+			</li>
+		</ul>
+	</div>
+</div>

frontend/src/lib/App.svelte

@@ -0,0 +1,240 @@
+<script lang="ts">
+	import Cursor from '$lib/Cursor.svelte';
+	import Frame from '$lib/Frame.svelte';
+	import PaintFrame from '$lib/PaintFrame.svelte';
+	import PaintCanvas from '$lib/PaintCanvas.svelte';
+	import Menu from '$lib/Menu.svelte';
+	import PromptModal from '$lib/PromptModal.svelte';
+	import { COLORS, FRAME_SIZE } from '$lib/constants';
+	import { PUBLIC_WS_INPAINTING } from '$env/static/public';
+	import type { PromptImgKey } from '$lib/types';
+	import { Status } from '$lib/types';
+	import { LiveObject } from '@liveblocks/client';
+
+	import {
+		loadingState,
+		currZoomTransform,
+		maskEl,
+		selectedRoomID,
+		isRenderingCanvas
+	} from '$lib/store';
+	import { useMyPresence, useObject, useOthers } from '$lib/liveblocks';
+
+	const myPresence = useMyPresence();
+	const others = useOthers();
+	let showModal = false;
+	function getKey(position: { x: number; y: number }): PromptImgKey {
+		return `${position.x}_${position.y}`;
+	}
+
+	const promptImgStorage = useObject('promptImgStorage');
+
+	$: isLoading = $myPresence?.status === Status.loading || $isRenderingCanvas || false;
+	function onShowModal(e: CustomEvent) {
+		if (isLoading) return;
+		showModal = e.detail.showModal;
+		if (showModal) {
+			myPresence.update({
+				status: Status.prompting
+			});
+		} else {
+			myPresence.update({
+				status: Status.ready
+			});
+		}
+	}
+
+	function onPaint() {
+		showModal = false;
+		generateImage();
+	}
+	function canPaint(position: { x: number; y: number }): boolean {
+		if (!$others) return true;
+		let canPaint = true;
+		for (const { presence } of $others) {
+			if (
+				position.x < presence.frame.x + FRAME_SIZE &&
+				position.x + FRAME_SIZE > presence.frame.x &&
+				position.y < presence.frame.y + FRAME_SIZE &&
+				position.y + FRAME_SIZE > presence.frame.y
+			) {
+				// can paint if presence is only  dragging
+				if (presence.status === Status.ready || presence.status === Status.dragging) {
+					canPaint = true;
+					continue;
+				}
+				canPaint = false;
+				break;
+			}
+		}
+		return canPaint;
+	}
+
+	function clearStateMsg(t = 5000) {
+		setTimeout(() => {
+			$loadingState = '';
+		}, t);
+	}
+	async function generateImage() {
+		if (isLoading) return;
+		const prompt = $myPresence.currentPrompt;
+		const position = $myPresence.frame;
+		$loadingState = 'Pending';
+		if (!canPaint(position)) {
+			$loadingState = 'Someone is already painting here';
+			myPresence.update({
+				status: Status.ready
+			});
+			clearStateMsg();
+			return;
+		}
+		const imageKey = getKey(position);
+		const room = $selectedRoomID || 'default';
+		console.log('Generating...', prompt, position);
+		myPresence.update({
+			status: Status.loading
+		});
+		const sessionHash = crypto.randomUUID();
+		const base64Crop = $maskEl.toDataURL('image/webp');
+
+		const hashpayload = {
+			fn_index: 0,
+			session_hash: sessionHash
+		};
+
+		const datapayload = {
+			data: [base64Crop, prompt, 0.75, 7.5, 40, 'patchmatch', room, imageKey]
+		};
+
+		const websocket = new WebSocket(PUBLIC_WS_INPAINTING);
+		// websocket.onopen = async function (event) {
+		// 	websocket.send(JSON.stringify({ hash: sessionHash }));
+		// };
+		websocket.onclose = (evt) => {
+			if (!evt.wasClean) {
+				$loadingState = 'Error';
+				myPresence.update({
+					status: Status.ready
+				});
+			}
+		};
+		websocket.onmessage = async function (event) {
+			try {
+				const data = JSON.parse(event.data);
+				$loadingState = '';
+				switch (data.msg) {
+					case 'send_hash':
+						websocket.send(JSON.stringify(hashpayload));
+						break;
+					case 'send_data':
+						$loadingState = 'Sending Data';
+						websocket.send(JSON.stringify({ ...hashpayload, ...datapayload }));
+						break;
+					case 'queue_full':
+						$loadingState = 'Queue full';
+						websocket.close();
+						myPresence.update({
+							status: Status.ready
+						});
+						return;
+					case 'estimation':
+						const { rank, queue_size } = data;
+						$loadingState = `On queue ${rank}/${queue_size}`;
+						break;
+					case 'process_generating':
+						$loadingState = data.success ? 'Generating' : 'Error';
+						break;
+					case 'process_completed':
+						try {
+							const params = data.output.data[0] as {
+								is_nsfw: boolean;
+								image: {
+									url: string;
+									filename: string;
+								};
+							};
+							const isNSWF = params.is_nsfw;
+							if (isNSWF) {
+								throw new Error('NFSW');
+							}
+							// const imgBlob = await base64ToBlob(imgBase64);
+							const promptImgParams = {
+								imgURL: params.image.filename
+							};
+							// const imgURL = await uploadImage(imgBlob, promptImgParams);
+							$promptImgStorage.set(imageKey, new LiveObject(promptImgParams));
+							// $promptImgStorage.set(imageKey, promptImgParams);
+
+							console.log(params.image.url);
+							$loadingState = data.success ? 'Complete' : 'Error';
+							clearStateMsg();
+							myPresence.update({
+								status: Status.ready,
+								currentPrompt: ''
+							});
+						} catch (err) {
+							const tError = err as Error;
+							$loadingState = tError?.message;
+							myPresence.update({
+								status: Status.ready
+							});
+							clearStateMsg(10000);
+						}
+						websocket.close();
+						return;
+					case 'process_starts':
+						$loadingState = 'Processing';
+						break;
+				}
+			} catch (e) {
+				console.error(e);
+				$loadingState = 'Error';
+			}
+		};
+	}
+</script>
+
+<!-- Show the current user's cursor location -->
+<div class="text touch-none pointer-events-none">
+	{$loadingState}
+</div>
+{#if showModal}
+	<PromptModal
+		on:paint={onPaint}
+		initPrompt={$myPresence?.currentPrompt}
+		on:showModal={onShowModal}
+	/>
+{/if}
+<div class="fixed top-0 left-0 z-0 w-screen h-screen min-h-[600px]">
+	<PaintCanvas />
+
+	<main class="z-10 relative">
+		<!-- When others connected, iterate through others and show their cursors -->
+		{#if $others}
+			{#each [...$others] as { connectionId, presence } (connectionId)}
+				{#if (presence?.status === Status.loading || presence?.status === Status.prompting || presence?.status === Status.masking) && presence?.frame}
+					<Frame
+						status={presence.status}
+						position={presence?.frame}
+						prompt={presence?.currentPrompt}
+						transform={$currZoomTransform}
+					/>
+				{/if}
+				{#if presence?.cursor}
+					<Cursor
+						color={COLORS[1 + (connectionId % (COLORS.length - 1))]}
+						position={presence?.cursor}
+						transform={$currZoomTransform}
+					/>
+				{/if}
+			{/each}
+		{/if}
+		<PaintFrame transform={$currZoomTransform} on:showModal={onShowModal} />
+	</main>
+</div>
+<div class="fixed bottom-0 md:bottom-16 left-0 right-0 z-10 my-2">
+	<Menu {isLoading} on:showModal={onShowModal} />
+</div>
+
+<style lang="postcss" scoped>
+</style>

frontend/src/lib/Buttons/AboutButton.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import ShareWithCommunity from './ShareWithCommunity.svelte';
+
+	export let isLoading = false;
+
+	let open = true;
+
+	onMount(() => {
+		autoOpen();
+		window.addEventListener('resize', autoOpen);
+		return () => {
+			window.removeEventListener('resize', autoOpen);
+		};
+	});
+	function autoOpen() {
+		open = window.innerWidth > 768;
+	}
+</script>
+
+<div class="md:w-[210px] text-sm md:flex flex-col order-last md:order-none">
+	<details {open}>
+		<summary class="md:hidden">More</summary>
+		<p class="inline">
+			Instructions: move the <span class="text-blue-700 bg-blue-300/60 px-0.5">blue square</span>,
+			click "🖍 Paint".
+		</p>
+		<div class="flex justify-between py-2 gap-3">
+			<button on:click class="items-center inline-flex">
+				<svg width=".9em" height=".9em" viewBox="0 0 24 24" class="mr-1"
+					><path
+						fill="currentColor"
+						fill-rule="evenodd"
+						d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10s10-4.477 10-10S17.523 2 12 2zm0 7a1 1 0 0 0-1 1a1 1 0 1 1-2 0a3 3 0 1 1 4.44 2.633a1.404 1.404 0 0 0-.383.288a.303.303 0 0 0-.057.085v.494a1 1 0 1 1-2 0V13c0-.58.253-1.047.539-1.38c.281-.33.63-.572.94-.742A1 1 0 0 0 12 9zm.999 4.011v-.004v.005zM12 15a1 1 0 1 0 0 2h.01a1 1 0 1 0 0-2H12z"
+						clip-rule="evenodd"
+					/></svg
+				>
+				About
+			</button>
+			<ShareWithCommunity {isLoading} />
+		</div>
+	</details>
+</div>

frontend/src/lib/Buttons/DragButton.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import Move from '$lib/Icons/Move.svelte';
+	export let isActive = false;
+	export let isLoading = false;
+	export let className = '';
+</script>
+
+<button
+	on:click
+	disabled={isLoading}
+	class="{className} shadow-lg bg-white rounded-full disabled:opacity-50 {isActive
+		? 'text-blue-700'
+		: 'text-gray-800'}"
+	title="Drag to Move"
+>
+	<Move />
+</button>
+
+<style lang="postcss" scoped>
+</style>

frontend/src/lib/Buttons/MaskButton.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import Mask from '$lib/Icons/Mask.svelte';
+	export let isActive = false;
+	export let isLoading = false;
+	export let className = '';
+</script>
+
+<button
+	on:click
+	disabled={isLoading}
+	class="{className} rounded-full disabled:opacity-50  {isActive ? 'text-white' : 'text-blue-200'}"
+	title="Draw to Mask"
+>
+	<Mask classList="text-3xl" />
+</button>
+
+<style lang="postcss" scoped>
+</style>

frontend/src/lib/Buttons/PPButton.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	export let isLoading = false;
+</script>
+
+<button
+	on:click
+	disabled={isLoading}
+	class="button-paint {isLoading ? 'cursor-wait' : 'cursor-pointer'}"
+	title="Prompt and Paint"
+>
+	{#if isLoading}
+		<span>painting... </span>{:else}
+		<span
+			class="rounded-sm h-4 w-4 flex justify-center items-center border-2 border-dashed border-violet-700 mr-2"
+		>
+			+
+		</span>
+		<span>Prompt + Paint</span>
+	{/if}
+</button>
+
+<style lang="postcss" scoped>
+	/* .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 text-xs md:text-sm font-mono bg-blue-100 text-blue-900 min-w-[25ch] flex justify-center items-center disabled:opacity-50 rounded-xl px-3 py-1 shadow-sm focus:outline-none focus:border-gray-400;
+	}
+</style>

frontend/src/lib/Buttons/RoomsSelector.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import Room from '$lib/Icons/Room.svelte';
+	import Pin from '$lib/Icons/Pin.svelte';
+	import People from '$lib/Icons/People.svelte';
+	import LoadingIcon from '$lib/Icons/LoadingIcon.svelte';
+	import { onMount } from 'svelte';
+	import { selectedRoomID } from '$lib/store';
+	import { MAX_CAPACITY } from '$lib/constants';
+	import { useRooms } from '$lib/liveblocks';
+	import type { RoomResponse } from '$lib/types';
+
+	export let isLoading = false;
+	let boxEl: HTMLElement;
+
+	const rooms = useRooms();
+
+	let collapsed = true;
+	$: selectedRoom = $rooms.find((room) => room.room_id === $selectedRoomID);
+	$: loadingRooms = $rooms.length > 0;
+
+	function clickHandler(event: Event) {
+		if (boxEl && !boxEl.contains(event.target as Node)) {
+			collapsed = true;
+		}
+	}
+	onMount(() => {
+		window.addEventListener('pointerdown', clickHandler, true);
+		return () => {
+			window.removeEventListener('pointerdown', clickHandler, true);
+		};
+	});
+
+	function changeRoom(room: RoomResponse) {
+		$selectedRoomID = room.room_id;
+		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>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div class="min-w-[20ch]">
+	{#if loadingRooms && selectedRoom}
+		<div
+			class="text-sm rounded-2xl md:text-smtext-gray-700 py-1 font-medium tracking-tight relative ring-1 ring-blue-500 px-2"
+			title="Choose a different room"
+			bind:this={boxEl}
+		>
+			{#if !collapsed}
+				<div
+					class="absolute left-0 right-0 bottom-full rounded-xl bg-blue-600 px-1 overflow-hidden z-0"
+				>
+					<ul class="relative overflow-hidden overflow-y-scroll max-h-72 w-full x-scroll">
+						<li class="grid-row gap-2 pb-2 sticky top-0 py-2 bg-blue-600 font-semibold">
+							<Room />
+							<span> room </span>
+							<span />
+							<People />
+							<span> players </span>
+						</li>
+						{#each $rooms as room}
+							<li>
+								<!-- svelte-ignore a11y-invalid-attribute -->
+								<a
+									href="#"
+									on:click|preventDefault={() => changeRoom(room)}
+									class="grid-row gap-2 hover:bg-gray-300
+						   {room.room_id === $selectedRoomID ? 'text-black' : ''}"
+								>
+									<span>
+										{#if room.room_id === $selectedRoomID}
+											<Pin />
+										{/if}
+									</span>
+									<span>{room.room_id} </span>
+									<span />
+									<span />
+									<span>{room.users_count} / {MAX_CAPACITY}</span>
+								</a>
+							</li>
+						{/each}
+					</ul>
+					<div class="border-t-2 border-t-gray-400 border-opacity-50" />
+				</div>
+			{/if}
+			<!-- svelte-ignore a11y-click-events-have-key-events -->
+			<div
+				class={isLoading ? 'cursor-wait' : 'cursor-pointer'}
+				on:click={() => (isLoading ? null : (collapsed = !collapsed))}
+			>
+				{#if selectedRoom}
+					<div class="grid-row gap-2">
+						<Room />
+						<span>
+							{selectedRoom?.room_id}
+						</span>
+						<span />
+						<People />
+						<span>
+							{selectedRoom?.users_count} / {MAX_CAPACITY}
+						</span>
+					</div>
+				{:else}
+					<div class="grid-row gap-2">
+						<Room />
+						<span>
+							Loading...
+							<People />
+							<span> ... / ... </span>
+						</span>
+					</div>
+				{/if}
+			</div>
+		</div>
+	{:else}
+		<div
+			class="bg-gradient-to-r from-transparent via-blue-900/20 to-transparent py-1.5 text-blue-700 rounded-full flex justify-center items-center"
+		>
+			<LoadingIcon classList="animate-spin mr-2 text-sm" /> loading rooms
+		</div>
+	{/if}
+</div>
+
+<style lang="postcss" scoped>
+	.grid-row {
+		display: grid;
+		grid-template-columns: 0.5fr 2fr 1fr 0.5fr 2fr;
+		align-items: center;
+		justify-items: flex-start;
+	}
+	.grid-row span {
+		white-space: nowrap;
+	}
+</style>

frontend/src/lib/Buttons/ShareWithCommunity.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+	import IconCommunity from '$lib/Icons/IconCommunity.svelte';
+	import LoadingIcon from '$lib/Icons/LoadingIcon.svelte';
+	import { uploadImage } from '$lib/utils';
+	import { canvasEl, selectedRoomID } from '$lib/store';
+	import { nanoid } from 'nanoid';
+
+	export let isLoading = false;
+
+	let isUploading: boolean = false;
+	async function handleClick() {
+		if (isUploading) {
+			return;
+		}
+		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) {
+		let canvasURL: {
+			url: string;
+			filename: string;
+		} | null = null;
+		try {
+			canvasURL = await uploadImage(canvasBlob, {
+				prompt: 'canvas',
+				position: { x: 0, y: 0 },
+				date: new Date().getTime(),
+				id: nanoid(),
+				room: $selectedRoomID || 'default'
+			});
+		} catch (err) {
+			console.error(err);
+		}
+		if (!canvasURL) {
+			console.error('Failed to upload image');
+			return;
+		}
+		const canvasImage = `<img src="${canvasURL.url}" style="width:100%" width="1000" height="1000">`;
+		const descriptionMd = `#### Stable Diffusion Multiplayer:
+### [${$selectedRoomID}](https://huggingface.co/spaces/huggingface-projects/stable-diffusion-multiplayer?roomid=${$selectedRoomID})
+		
+<div style="display: flex; overflow: scroll; column-gap: 0.75rem;">
+${canvasImage}
+</div>`;
+
+		const params = new URLSearchParams({
+			title: `Room ${$selectedRoomID}`,
+			description: descriptionMd
+		});
+		const paramsStr = params.toString();
+		window.open(
+			`https://huggingface.co/spaces/huggingface-projects/stable-diffusion-multiplayer/discussions/new?${paramsStr}`,
+			'_blank'
+		);
+	}
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<button
+	class="{isLoading || isUploading
+		? 'cursor-wait'
+		: 'cursor-pointer'} text-xs font-mono flex items-center justify-center bg-black gap-x-1 rounded-xl px-2 py-1 whitespace-nowrap"
+	on:click={handleClick}
+	disabled={isUploading || isLoading}
+	title="Share with community"
+>
+	{#if isUploading}
+		<LoadingIcon classList={'animate-spin max-w-[25px] text-white'} />
+	{:else}
+		<IconCommunity />
+	{/if}
+	<p class="text-white font-semibold">Share to community</p>
+</button>

frontend/src/lib/Buttons/UndoButton.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import Undo from '$lib/Icons/Undo.svelte';
+	export let isActive = false;
+	export let isLoading = false;
+	export let className = '';
+</script>
+
+<button
+	on:click
+	disabled={isLoading}
+	class="{className} bg-white rounded-full disabled:opacity-50 bg-white rounded-full {isActive
+		? 'text-blue-700'
+		: 'text-gray-800'}"
+	title="Clear Masking"
+>
+	<Undo />
+</button>
+
+<style lang="postcss" scoped>
+</style>

frontend/src/lib/Cursor.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import type { ZoomTransform } from 'd3-zoom';
+	import Cursor from '$lib/Icons/Cursor.svelte';
+	export let transform: ZoomTransform;
+	export let color = '';
+	export let position = { x: 0, y: 0 };
+
+	$: coord = {
+		x: transform.applyX(position.x),
+		y: transform.applyY(position.y)
+	};
+</script>
+
+<div
+	class="cursor text-4xl"
+	style={`transform: translateX(${coord.x}px) translateY(${coord.y}px) scale(${transform.k});`}
+>
+	<Cursor classList={'block z-0 col-span-2 row-span-2 text-8xl'} fill={color} />
+	<!-- 
+	{#if emoji}
+		<div
+			class="absolute right-0 col-start-2 row-start-2 text-8xl"
+			style={`text-shadow: 0px 5px 5px ${color}`}
+		>
+			{emoji}
+		</div>
+	{/if} -->
+</div>
+
+<style lang="postcss" scoped>
+	.cursor {
+		@apply absolute top-0 left-0 grid grid-cols-3 touch-none pointer-events-none;
+		transform-origin: 0 0;
+	}
+</style>

frontend/src/lib/Frame.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import LoadingIcon from '$lib/Icons/LoadingIcon.svelte';
+	import { FRAME_SIZE } from '$lib/constants';
+	import type { ZoomTransform } from 'd3-zoom';
+	import { Status } from '$lib/types';
+
+	export let transform: ZoomTransform;
+	export let position = { x: 0, y: 0 };
+	export let prompt = '';
+	export let status: Status;
+
+	$: coord = {
+		x: transform.applyX(position.x),
+		y: transform.applyY(position.y)
+	};
+</script>
+
+<div
+	class="absolute top-0 left-0 border-8 border-dashed border-black flex items-center justify-center bg-black/60"
+	style={`width: ${FRAME_SIZE}px;
+			height: ${FRAME_SIZE}px;
+			transform: translateX(${coord.x}px) translateY(${coord.y}px) scale(${transform.k}); transform-origin: 0 0;`}
+>
+	<div class="pointer-events-none touch-none">
+		<div class="font-bold !text-4xl text-white rounded-2xl text-center p-10">
+			{#if status === Status.loading || status === Status.processing}
+				<LoadingIcon classList={'animate-spin text-4xl inline mr-2 mx-auto text-white mb-4'} />
+				<p class="text-4xl">Someone is painting:</p>
+			{:else if status === Status.masking}
+				<p class="text-4xl">Someone is masking</p>
+			{:else if status === Status.prompting}
+				<p class="text-4xl">Someone is typing:</p>
+			{/if}
+			{#if prompt}
+				<span class="italic font-normal line-clamp-4">"{prompt}"</span>
+			{/if}
+		</div>
+	</div>
+</div>

frontend/src/lib/Icons/Cursor.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	export let classList = '';
+	export let fill = '';
+</script>
+
+<svg
+	class={classList}
+	width="1em"
+	height="1em"
+	viewBox="0 0 12 12"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M3.09022 1.77278C2.25499 1.40456 1.40358 2.25597 1.7718 3.0912L4.57875 9.45818C4.95365 10.3086 6.18455 10.2323 6.4516 9.34213L6.9637 7.63515C7.06029 7.31317 7.31219 7.06126 7.63417 6.96467L9.34117 6.45258C10.2313 6.18552 10.3076 4.95463 9.45722 4.57972L3.09022 1.77278Z"
+		{fill}
+	/>
+	<path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M3.66305 9.86091L0.856101 3.49392C0.119663 1.82347 1.82248 0.120639 3.49294 0.857077L9.85994 3.66402C11.5607 4.41383 11.4082 6.87562 9.62784 7.40973L7.92085 7.92182L7.40875 9.62881C6.87465 11.4092 4.41286 11.5617 3.66305 9.86091ZM1.77113 3.09053C1.40291 2.2553 2.25432 1.40388 3.08955 1.7721L9.45654 4.57905C10.3069 4.95395 10.2307 6.18485 9.34049 6.4519L7.6335 6.964C7.31152 7.06059 7.05961 7.3125 6.96302 7.63448L6.45093 9.34146C6.18387 10.2316 4.95298 10.3079 4.57807 9.45751L1.77113 3.09053Z"
+		fill="white"
+		fill-opacity="0.8"
+	/>
+</svg>

frontend/src/lib/Icons/IconCommunity.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	export let classNames = '';
+</script>
+
+<svg
+	class={classNames}
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	aria-hidden="true"
+	focusable="false"
+	role="img"
+	width="1em"
+	height="1em"
+	preserveAspectRatio="xMidYMid meet"
+	viewBox="0 0 32 32"
+>
+	<path
+		d="M20.6081 3C21.7684 3 22.8053 3.49196 23.5284 4.38415C23.9756 4.93678 24.4428 5.82749 24.4808 7.16133C24.9674 7.01707 25.4353 6.93643 25.8725 6.93643C26.9833 6.93643 27.9865 7.37587 28.696 8.17411C29.6075 9.19872 30.0124 10.4579 29.8361 11.7177C29.7523 12.3177 29.5581 12.8555 29.2678 13.3534C29.8798 13.8646 30.3306 14.5763 30.5485 15.4322C30.719 16.1032 30.8939 17.5006 29.9808 18.9403C30.0389 19.0342 30.0934 19.1319 30.1442 19.2318C30.6932 20.3074 30.7283 21.5229 30.2439 22.6548C29.5093 24.3704 27.6841 25.7219 24.1397 27.1727C21.9347 28.0753 19.9174 28.6523 19.8994 28.6575C16.9842 29.4379 14.3477 29.8345 12.0653 29.8345C7.87017 29.8345 4.8668 28.508 3.13831 25.8921C0.356375 21.6797 0.754104 17.8269 4.35369 14.1131C6.34591 12.058 7.67023 9.02782 7.94613 8.36275C8.50224 6.39343 9.97271 4.20438 12.4172 4.20438H12.4179C12.6236 4.20438 12.8314 4.2214 13.0364 4.25468C14.107 4.42854 15.0428 5.06476 15.7115 6.02205C16.4331 5.09583 17.134 4.359 17.7682 3.94323C18.7242 3.31737 19.6794 3 20.6081 3ZM20.6081 5.95917C20.2427 5.95917 19.7963 6.1197 19.3039 6.44225C17.7754 7.44319 14.8258 12.6772 13.7458 14.7131C13.3839 15.3952 12.7655 15.6837 12.2086 15.6837C11.1036 15.6837 10.2408 14.5497 12.1076 13.1085C14.9146 10.9402 13.9299 7.39584 12.5898 7.1776C12.5311 7.16799 12.4731 7.16355 12.4172 7.16355C11.1989 7.16355 10.6615 9.33114 10.6615 9.33114C10.6615 9.33114 9.0863 13.4148 6.38031 16.206C3.67434 18.998 3.5346 21.2388 5.50675 24.2246C6.85185 26.2606 9.42666 26.8753 12.0653 26.8753C14.8021 26.8753 17.6077 26.2139 19.1799 25.793C19.2574 25.7723 28.8193 22.984 27.6081 20.6107C27.4046 20.212 27.0693 20.0522 26.6471 20.0522C24.9416 20.0522 21.8393 22.6726 20.5057 22.6726C20.2076 22.6726 19.9976 22.5416 19.9116 22.222C19.3433 20.1173 28.552 19.2325 27.7758 16.1839C27.639 15.6445 27.2677 15.4256 26.746 15.4263C24.4923 15.4263 19.4358 19.5181 18.3759 19.5181C18.2949 19.5181 18.2368 19.4937 18.2053 19.4419C17.6743 18.557 17.9653 17.9394 21.7082 15.6009C25.4511 13.2617 28.0783 11.8545 26.5841 10.1752C26.4121 9.98141 26.1684 9.8956 25.8725 9.8956C23.6001 9.89634 18.2311 14.9403 18.2311 14.9403C18.2311 14.9403 16.7821 16.496 15.9057 16.496C15.7043 16.496 15.533 16.4139 15.4169 16.2112C14.7956 15.1296 21.1879 10.1286 21.5484 8.06535C21.7928 6.66715 21.3771 5.95917 20.6081 5.95917Z"
+		fill="#FF9D00"
+	/>
+	<path
+		d="M5.50686 24.2246C3.53472 21.2387 3.67446 18.9979 6.38043 16.206C9.08641 13.4147 10.6615 9.33111 10.6615 9.33111C10.6615 9.33111 11.2499 6.95933 12.59 7.17757C13.93 7.39581 14.9139 10.9401 12.1069 13.1084C9.29997 15.276 12.6659 16.7489 13.7459 14.713C14.8258 12.6772 17.7747 7.44316 19.304 6.44221C20.8326 5.44128 21.9089 6.00204 21.5484 8.06532C21.188 10.1286 14.795 15.1295 15.4171 16.2118C16.0391 17.2934 18.2312 14.9402 18.2312 14.9402C18.2312 14.9402 25.0907 8.49588 26.5842 10.1752C28.0776 11.8545 25.4512 13.2616 21.7082 15.6008C17.9646 17.9393 17.6744 18.557 18.2054 19.4418C18.7372 20.3266 26.9998 13.1351 27.7759 16.1838C28.5513 19.2324 19.3434 20.1173 19.9117 22.2219C20.48 24.3274 26.3979 18.2382 27.6082 20.6107C28.8193 22.9839 19.2574 25.7722 19.18 25.7929C16.0914 26.62 8.24723 28.3726 5.50686 24.2246Z"
+		fill="#FFD21E"
+	/>
+</svg>

frontend/src/lib/Icons/LiveBlocks.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+	export let classList = '';
+</script>
+
+<svg
+	class={classList}
+	width="123"
+	height="44"
+	viewBox="0 0 123 44"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<rect
+		opacity="0.5"
+		x="0.25"
+		y="0.25"
+		width="122.5"
+		height="43.5"
+		rx="6.75"
+		fill="#1F2937"
+		stroke="#3A4C64"
+		stroke-width="0.5"
+	/>
+	<path
+		d="M44.9102 16.8569H45.8514V14.778H47.1691C48.364 14.778 49.1497 14.0577 49.1497 12.9528C49.1497 11.8397 48.364 11.1277 47.1691 11.1277H44.9102V16.8569ZM47.0954 11.9461C47.7666 11.9461 48.1921 12.3308 48.1921 12.9528C48.1921 13.5667 47.7584 13.9595 47.0872 13.9595H45.8514V11.9461H47.0954Z"
+		fill="#A3BAD9"
+	/>
+	<path
+		d="M51.5649 16.9059C52.8417 16.9059 53.701 16.0465 53.701 14.7615C53.701 13.4847 52.8417 12.6172 51.5649 12.6172C50.2881 12.6172 49.4287 13.4847 49.4287 14.7615C49.4287 16.0465 50.2881 16.9059 51.5649 16.9059ZM51.5649 16.1529C50.8201 16.1529 50.3372 15.5718 50.3372 14.7615C50.3372 13.9513 50.8201 13.3702 51.5649 13.3702C52.3097 13.3702 52.8007 13.9513 52.8007 14.7615C52.8007 15.5718 52.3097 16.1529 51.5649 16.1529Z"
+		fill="#A3BAD9"
+	/>
+	<path
+		d="M55.233 16.857H56.1906L57.1073 14.0088L57.9912 16.857H58.9406L60.332 12.6665H59.4317L58.4414 15.8748L57.5247 12.6665H56.7144L55.7568 15.8748L54.7992 12.6665H53.8662L55.233 16.857Z"
+		fill="#A3BAD9"
+	/>
+	<path
+		d="M62.6424 16.9059C63.6818 16.9059 64.3857 16.2757 64.533 15.449H63.6491C63.5263 15.9156 63.1335 16.1856 62.5933 16.1856C61.8976 16.1856 61.4475 15.7191 61.4229 15.0071V14.9498H64.5821C64.5985 14.8352 64.6067 14.7206 64.6067 14.6142C64.5821 13.3865 63.7719 12.6172 62.5605 12.6172C61.3247 12.6172 60.498 13.4766 60.498 14.7697C60.498 16.0547 61.3247 16.9059 62.6424 16.9059ZM61.4556 14.3032C61.5211 13.7057 62.004 13.3292 62.5687 13.3292C63.1826 13.3292 63.6164 13.6812 63.69 14.3032H61.4556Z"
+		fill="#A3BAD9"
+	/>
+	<path
+		d="M67.4411 12.6665C66.7536 12.6665 66.418 12.9448 66.2052 13.2967L66.107 12.6665H65.3213V16.857H66.2052V14.7536C66.2052 14.107 66.4589 13.4931 67.2447 13.4931H67.6375V12.6665H67.4411Z"
+		fill="#A3BAD9"
+	/>
+	<path
+		d="M69.9725 16.9059C71.0119 16.9059 71.7158 16.2757 71.8631 15.449H70.9792C70.8564 15.9156 70.4635 16.1856 69.9234 16.1856C69.2277 16.1856 68.7775 15.7191 68.753 15.0071V14.9498H71.9122C71.9286 14.8352 71.9368 14.7206 71.9368 14.6142C71.9122 13.3865 71.1019 12.6172 69.8906 12.6172C68.6548 12.6172 67.8281 13.4766 67.8281 14.7697C67.8281 16.0547 68.6548 16.9059 69.9725 16.9059ZM68.7857 14.3032C68.8512 13.7057 69.3341 13.3292 69.8988 13.3292C70.5127 13.3292 70.9464 13.6812 71.0201 14.3032H68.7857Z"
+		fill="#A3BAD9"
+	/>
+	<path
+		d="M75.8352 13.2475C75.5651 12.8792 75.1149 12.6173 74.4765 12.6173C73.3391 12.6173 72.4961 13.4685 72.4961 14.7616C72.4961 16.1039 73.3391 16.906 74.4765 16.906C75.1395 16.906 75.5733 16.5949 75.8433 16.2266L75.9497 16.8569H76.7191V11.1277H75.8352V13.2475ZM74.6238 16.1612C73.8875 16.1612 73.4046 15.5883 73.4046 14.7616C73.4046 13.9432 73.8875 13.3702 74.6238 13.3702C75.3605 13.3702 75.8433 13.9432 75.8433 14.778C75.8433 15.5883 75.3605 16.1612 74.6238 16.1612Z"
+		fill="#A3BAD9"
+	/>
+	<path
+		d="M81.9193 12.6173C81.2727 12.6173 80.839 12.9119 80.5607 13.2884V11.1277H79.6768V16.8569H80.4461L80.5525 16.2512C80.8144 16.6277 81.2646 16.906 81.9193 16.906C83.0652 16.906 83.9 16.0466 83.9 14.7616C83.9 13.4112 83.0652 12.6173 81.9193 12.6173ZM81.772 16.1612C81.0354 16.1612 80.5525 15.5801 80.5525 14.7534C80.5525 13.9432 81.0354 13.3702 81.772 13.3702C82.5086 13.3702 82.9997 13.9432 82.9997 14.7616C82.9997 15.5883 82.5086 16.1612 81.772 16.1612Z"
+		fill="#A3BAD9"
+	/>
+	<path
+		d="M85.6277 16.8815L85.4641 17.2908C85.3331 17.6345 85.2513 17.7164 84.9075 17.7164H84.2855V18.4939H85.2349C85.8487 18.4939 86.0288 18.1911 86.2907 17.5117L88.1895 12.6665H87.2483L86.1106 15.8503L84.9402 12.6665H83.999L85.6277 16.8815Z"
+		fill="#A3BAD9"
+	/>
+	<path d="M45.1162 32.4821H47.2144V22.0654H45.1162V32.4821Z" fill="#A3BAD9" />
+	<path
+		d="M49.7329 24.0148C50.4175 24.0148 50.9532 23.5088 50.9532 22.8392C50.9532 22.1546 50.4175 21.6487 49.7329 21.6487C49.0484 21.6487 48.5127 22.1546 48.5127 22.8392C48.5127 23.5088 49.0484 24.0148 49.7329 24.0148ZM48.6764 32.482H50.7895V24.8332H48.6764V32.482Z"
+		fill="#A3BAD9"
+	/>
+	<path
+		d="M54.2461 32.4823H56.8503L59.6033 24.8335H57.4009L55.5854 30.3394L53.7402 24.8335H51.4932L54.2461 32.4823Z"
+		fill="#A3BAD9"
+	/>
+	<path
+		d="M63.718 32.5713C65.7567 32.5713 67.0811 31.3808 67.3192 29.8927H65.2507C65.0722 30.607 64.4769 30.979 63.6287 30.979C62.5722 30.979 61.8728 30.3243 61.8281 29.2379V29.1338H67.3787C67.4234 28.8957 67.4382 28.6427 67.4382 28.4195C67.4085 26.1725 65.8609 24.7439 63.5692 24.7439C61.2031 24.7439 59.6406 26.2915 59.6406 28.6725C59.6406 31.0385 61.1734 32.5713 63.718 32.5713ZM61.8728 27.7647C61.9918 26.857 62.6763 26.3064 63.5841 26.3064C64.5365 26.3064 65.1763 26.8272 65.3251 27.7647H61.8728Z"
+		fill="#A3BAD9"
+	/>
+	<path
+		d="M72.9898 24.744C71.9332 24.744 71.1891 25.1904 70.6832 25.8005V22.0654H68.585V32.4821H70.4153L70.6237 31.4404C71.1148 32.0952 71.8737 32.5714 72.9749 32.5714C75.0434 32.5714 76.5315 31.0089 76.5315 28.6428C76.5315 26.2172 75.0434 24.744 72.9898 24.744ZM72.5136 30.8601C71.3678 30.8601 70.6534 29.9523 70.6534 28.6428C70.6534 27.3482 71.3678 26.4553 72.5136 26.4553C73.6594 26.4553 74.4035 27.3482 74.4035 28.6577C74.4035 29.9672 73.6594 30.8601 72.5136 30.8601Z"
+		fill="#A3BAD9"
+	/>
+	<path d="M77.6973 32.4821H79.7955V22.0654H77.6973V32.4821Z" fill="#A3BAD9" />
+	<path
+		d="M84.9927 32.5713C87.4332 32.5713 89.0254 31.0237 89.0254 28.6576C89.0254 26.3064 87.4332 24.7439 84.9927 24.7439C82.5522 24.7439 80.96 26.3064 80.96 28.6576C80.96 31.0088 82.5522 32.5713 84.9927 32.5713ZM84.9927 30.86C83.8171 30.86 83.1028 29.9522 83.1028 28.6576C83.1028 27.3629 83.8171 26.4552 84.9927 26.4552C86.1683 26.4552 86.8975 27.3629 86.8975 28.6576C86.8975 29.9522 86.1683 30.86 84.9927 30.86Z"
+		fill="#A3BAD9"
+	/>
+	<path
+		d="M93.7816 32.5713C95.865 32.5713 97.2489 31.4254 97.5465 29.5951H95.3441C95.1953 30.3689 94.6447 30.86 93.8263 30.86C92.7251 30.86 92.0257 29.9671 92.0257 28.6576C92.0257 27.3629 92.7251 26.4552 93.8263 26.4552C94.6447 26.4552 95.1655 26.9314 95.3441 27.6903H97.5316C97.234 25.8748 95.9394 24.7439 93.856 24.7439C91.4304 24.7439 89.8828 26.2915 89.8828 28.6576C89.8828 31.0683 91.356 32.5713 93.7816 32.5713Z"
+		fill="#A3BAD9"
+	/>
+	<path
+		d="M98.6514 32.4821H100.75V30.622L101.895 29.3869L103.83 32.4821H106.256L103.354 27.8392L106.107 24.8333H103.741L100.75 28.0773V22.0654H98.6514V32.4821Z"
+		fill="#A3BAD9"
+	/>
+	<path
+		d="M106.188 29.9375C106.277 31.5744 107.72 32.5714 109.848 32.5714C111.902 32.5714 113.33 31.6042 113.33 30.0863C113.33 28.3601 111.872 27.9583 110.116 27.7798C109.015 27.6458 108.36 27.5863 108.36 27.006C108.36 26.5149 108.896 26.2173 109.714 26.2173C110.562 26.2173 111.143 26.5893 111.202 27.1994H113.211C113.107 25.6369 111.693 24.7292 109.64 24.7292C107.676 24.7143 106.351 25.7113 106.351 27.2292C106.351 28.8065 107.735 29.2083 109.521 29.4167C110.756 29.5804 111.277 29.625 111.277 30.25C111.277 30.7857 110.741 31.0685 109.863 31.0685C108.836 31.0685 108.256 30.6071 108.182 29.9375H106.188Z"
+		fill="#A3BAD9"
+	/>
+	<path
+		d="M32.4824 8.67236H11.649C10.0053 8.67236 8.67285 10.0048 8.67285 11.6486V32.4819C8.67285 34.1256 10.0053 35.4581 11.649 35.4581H32.4824C34.1261 35.4581 35.4586 34.1256 35.4586 32.4819V11.6486C35.4586 10.0048 34.1261 8.67236 32.4824 8.67236Z"
+		fill="url(#paint0_radial_253_107)"
+	/>
+	<path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M24.8953 17.78H15.0332L17.8712 20.7599V24.875L24.8953 17.78ZM19.2193 26.294H29.0814L26.2434 23.3141V19.199L19.2193 26.294Z"
+		fill="white"
+	/>
+	<defs>
+		<radialGradient
+			id="paint0_radial_253_107"
+			cx="0"
+			cy="0"
+			r="1"
+			gradientUnits="userSpaceOnUse"
+			gradientTransform="translate(4.7524 1.97593) rotate(45.3703) scale(40.7748 35.4976)"
+		>
+			<stop stop-color="#FF0099" />
+			<stop offset="1" stop-color="#FF7A00" />
+		</radialGradient>
+	</defs>
+</svg>

frontend/src/lib/Icons/LoadingIcon.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	export let classList = '';
+</script>
+
+<svg
+	class={classList}
+	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 class="opacity-50" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+	<path
+		fill="currentColor"
+		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"
+	/>
+</svg>

frontend/src/lib/Icons/Mask.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	export let classList = '';
+</script>
+
+<svg
+	class={classList}
+	width="1em"
+	height="1em"
+	viewBox="-2 -2 14 14"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M3.07066 9.3043L8.07078 4.30418L5.69582 1.92922L0.695701 6.92934C0.626865 6.99826 0.577967 7.08453 0.554193 7.17899L0 10L2.82047 9.44581C2.91516 9.42213 3.00179 9.37317 3.07066 9.3043V9.3043ZM9.68493 2.69003C9.88667 2.48823 10 2.21457 10 1.92922C10 1.64388 9.88667 1.37022 9.68493 1.16842L8.83158 0.315069C8.62978 0.11333 8.35612 0 8.07078 0C7.78543 0 7.51177 0.11333 7.30997 0.315069L6.45662 1.16842L8.83158 3.54338L9.68493 2.69003Z"
+		fill="currentColor"
+	/>
+</svg>

frontend/src/lib/Icons/Move.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	export let classList = '';
+</script>
+
+<svg
+	class={classList}
+	width="1em"
+	height="1em"
+	viewBox="0 0 11 11"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M2.4 4.26667L1 5.66667L2.4 7.06667M4.26667 2.4L5.66667 1L7.06667 2.4M7.06667 8.93333L5.66667 10.3333L4.26667 8.93333M8.93333 4.26667L10.3333 5.66667L8.93333 7.06667M1 5.66667H10.3333M5.66667 1V10.3333"
+		stroke="currentColor"
+		stroke-width="0.933333"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>

frontend/src/lib/Icons/People.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	export let classList = '';
+</script>
+
+<svg
+	class={classList}
+	height="1em"
+	width="1em"
+	viewBox="0 0 9 7"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M6.41113 3.73486C6.97158 4.11531 7.3643 4.63076 7.3643 5.31801V6.54526H8.59155C8.81654 6.54526 9.00063 6.36118 9.00063 6.13618V5.31801C9.00063 4.42621 7.5402 3.8985 6.41113 3.73486Z"
+		fill="currentColor"
+	/>
+	<path
+		d="M3.27305 3.27266C4.17677 3.27266 4.90938 2.54005 4.90938 1.63633C4.90938 0.732611 4.17677 0 3.27305 0C2.36933 0 1.63672 0.732611 1.63672 1.63633C1.63672 2.54005 2.36933 3.27266 3.27305 3.27266Z"
+		fill="currentColor"
+	/>
+	<path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M5.72716 3.27266C6.63124 3.27266 7.36349 2.54041 7.36349 1.63633C7.36349 0.732258 6.63124 0 5.72716 0C5.53489 0 5.3549 0.0409082 5.18308 0.0981798C5.53511 0.533533 5.72715 1.07646 5.72715 1.63633C5.72715 2.1962 5.53511 2.73913 5.18308 3.17448C5.3549 3.23176 5.53489 3.27266 5.72716 3.27266ZM3.27266 3.68175C2.18041 3.68175 0 4.22992 0 5.31808V6.13624C0 6.36124 0.184087 6.54533 0.409083 6.54533H6.13625C6.36124 6.54533 6.54533 6.36124 6.54533 6.13624V5.31808C6.54533 4.22992 4.36492 3.68175 3.27266 3.68175Z"
+		fill="currentColor"
+	/>
+</svg>

frontend/src/lib/Icons/Pin.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	export let classList = '';
+</script>
+
+<svg
+	class={classList}
+	height="1em"
+	viewBox="0 0 7 9"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M3.5 4.58599C3.74063 4.58599 3.94669 4.4961 4.11819 4.31633C4.2894 4.13687 4.375 3.92102 4.375 3.66879C4.375 3.41656 4.2894 3.20056 4.11819 3.02079C3.94669 2.84132 3.74063 2.75159 3.5 2.75159C3.25937 2.75159 3.05346 2.84132 2.88225 3.02079C2.71075 3.20056 2.625 3.41656 2.625 3.66879C2.625 3.92102 2.71075 4.13687 2.88225 4.31633C3.05346 4.4961 3.25937 4.58599 3.5 4.58599ZM3.5 7.95669C4.38958 7.10064 5.04948 6.32285 5.47969 5.62334C5.9099 4.92413 6.125 4.30318 6.125 3.76051C6.125 2.92739 5.87154 2.24515 5.36462 1.71378C4.858 1.18273 4.23646 0.917197 3.5 0.917197C2.76354 0.917197 2.14185 1.18273 1.63494 1.71378C1.12831 2.24515 0.875 2.92739 0.875 3.76051C0.875 4.30318 1.0901 4.92413 1.52031 5.62334C1.95052 6.32285 2.61042 7.10064 3.5 7.95669ZM3.5 9C3.44167 9 3.38333 8.98853 3.325 8.9656C3.26667 8.94267 3.21562 8.9121 3.17188 8.87389C2.10729 7.8879 1.3125 6.97269 0.7875 6.12825C0.2625 5.28352 0 4.49427 0 3.76051C0 2.61401 0.351896 1.70064 1.05569 1.02038C1.75919 0.340127 2.57396 0 3.5 0C4.42604 0 5.24081 0.340127 5.94431 1.02038C6.6481 1.70064 7 2.61401 7 3.76051C7 4.49427 6.7375 5.28352 6.2125 6.12825C5.6875 6.97269 4.89271 7.8879 3.82812 8.87389C3.78438 8.9121 3.73333 8.94267 3.675 8.9656C3.61667 8.98853 3.55833 9 3.5 9Z"
+		fill="white"
+	/>
+</svg>

frontend/src/lib/Icons/Room.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	export let classList = '';
+</script>
+
+<svg class={classList} height="1em" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<rect x="1" y="1" width="7" height="7" rx="1" stroke="#2F6DCB" />
+	<rect
+		x="3.05566"
+		y="3.05566"
+		width="2.88889"
+		height="2.88889"
+		rx="0.5"
+		fill="#2F6DCB"
+		stroke="#2F6DCB"
+	/>
+</svg>

frontend/src/lib/Icons/Undo.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	export let classList = '';
+</script>
+
+<svg
+	class={classList}
+	width="1em"
+	viewBox="0 0 10 9"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<g opacity="0.5">
+		<path
+			d="M6.33333 2.66667H2.27167L3.46733 1.47133L3 1L1 3L3 5L3.46733 4.52833L2.27267 3.33333H6.33333C6.86377 3.33333 7.37247 3.54405 7.74755 3.91912C8.12262 4.29419 8.33333 4.8029 8.33333 5.33333C8.33333 5.86377 8.12262 6.37247 7.74755 6.74755C7.37247 7.12262 6.86377 7.33333 6.33333 7.33333H3.66667V8H6.33333C7.04058 8 7.71885 7.71905 8.21895 7.21895C8.71905 6.71885 9 6.04058 9 5.33333C9 4.62609 8.71905 3.94781 8.21895 3.44772C7.71885 2.94762 7.04058 2.66667 6.33333 2.66667Z"
+			fill="black"
+			stroke="black"
+			stroke-width="0.5"
+			stroke-linejoin="round"
+		/>
+	</g>
+</svg>

frontend/src/lib/Menu.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import RoomsSelector from '$lib/Buttons/RoomsSelector.svelte';
+	import AboutButton from '$lib/Buttons/AboutButton.svelte';
+	import { toggleAbout } from '$lib/store';
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+	// const broadcast = useBroadcastEvent();
+
+	export let isLoading = false;
+</script>
+
+<svelte:window
+	on:keypress={(e) => {
+		if (e.key === 'Enter') {
+			dispatch('showModal', { showModal: true });
+		}
+	}}
+/>
+<div class="flex flex-col md:flex-row items-center justify-between px-4 md:px-12 gap-3 md:gap-0">
+	<AboutButton
+		{isLoading}
+		on:click={() => {
+			$toggleAbout = !$toggleAbout;
+		}}
+	/>
+
+	<button
+		on:click={() => dispatch('showModal', { showModal: true })}
+		title="Click to prompt, and paint. The generated image will show up in the frame."
+		disabled={isLoading}
+		class="{isLoading
+			? 'cursor-wait'
+			: 'cursor-pointer'} order-first md:order-none text-xl md:text-3xl bg-blue-600 text-white px-4 py-1 md:px-6 md:py-2 rounded-2xl ring ring-blue-500 font-semibold shadow-2xl shadow-blue-500 self-center flex items-center hover:saturate-150"
+		><span class="mr-3">🖍</span>Paint
+		<span
+			class="bg-blue-800 text-gray-300 rounded-lg px-2 py-0.5 text-base ml-4 hidden sm:flex items-center translate-y-[2px]"
+			><svg
+				class="text-sm mr-1.5"
+				width="1em"
+				height="1em"
+				viewBox="0 0 10 13"
+				fill="currentColor"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					fill-rule="evenodd"
+					clip-rule="evenodd"
+					d="M8.5 8.5V0H9.5V9.5H1.70711L4.03553 11.8284C4.2308 12.0237 4.2308 12.3403 4.03553 12.5355C3.84027 12.7308 3.52369 12.7308 3.32843 12.5355L0.146447 9.35355C-0.0488155 9.15829 -0.0488155 8.84171 0.146447 8.64645L3.32843 5.46447C3.52369 5.2692 3.84027 5.2692 4.03553 5.46447C4.2308 5.65973 4.2308 5.97631 4.03553 6.17157L1.70711 8.5H8.5Z"
+					fill="currentColor"
+				/>
+			</svg>
+			Enter</span
+		></button
+	>
+	<RoomsSelector {isLoading} />
+</div>

frontend/src/lib/PaintCanvas.svelte

@@ -0,0 +1,284 @@
+<script lang="ts">
+	import { zoom, zoomIdentity } from 'd3-zoom';
+	import { min } from 'd3-array';
+	import { select } from 'd3-selection';
+	import { onMount } from 'svelte';
+	import { PUBLIC_UPLOADS } from '$env/static/public';
+	import {
+		currZoomTransform,
+		canvasEl,
+		isRenderingCanvas,
+		canvasSize,
+		selectedRoomID
+	} from '$lib/store';
+
+	import { useMyPresence, useObject } from '$lib/liveblocks';
+	import { LiveObject } from '@liveblocks/client';
+
+	import type { PromptImgObject } from '$lib/types';
+	import { FRAME_SIZE, GRID_SIZE } from '$lib/constants';
+
+	const myPresence = useMyPresence();
+	const promptImgStorage = useObject('promptImgStorage');
+
+	const height = $canvasSize.height;
+	const width = $canvasSize.width;
+
+	let containerEl: HTMLDivElement;
+	let canvasCtx: CanvasRenderingContext2D;
+
+	const imagesOnCanvas = new Set();
+
+	function getpromptImgList(
+		promptImgList: Record<string, LiveObject<PromptImgObject> | PromptImgObject>
+	): PromptImgObject[] {
+		if (promptImgList) {
+			//sorted by last updated
+			const roomid = $selectedRoomID || '';
+			const canvasPixels = new Map();
+			for (const x of Array.from(Array(width / GRID_SIZE).keys())) {
+				for (const y of Array.from(Array(height / GRID_SIZE).keys())) {
+					canvasPixels.set(`${x * GRID_SIZE}_${y * GRID_SIZE}`, null);
+				}
+			}
+
+			// Object.values(promptImgList).map((e) => {
+			// 	let obj;
+			// 	if (e instanceof LiveObject) {
+			// 		obj = e.toObject();
+			// 	} else {
+			// 		obj = e;
+			// 	}
+			// 	// const obj = promptImg.toObject();
+			// 	if (obj.position) {
+			// 		const key = `${obj.position.x}_${obj.position.y}`;
+			// 		console.log('key', key);
+			// 		const promptImgParams = {
+			// 			imgURL: obj.imgURL
+			// 		};
+			// 		$promptImgStorage.set(key, promptImgParams);
+			// 	}
+			// });
+
+			const list: PromptImgObject[] = Object.values(promptImgList)
+				.map((e) => {
+					if (e instanceof LiveObject) {
+						return e.toObject();
+					} else {
+						return e;
+					}
+				})
+				.map((e) => {
+					const split_str = e.imgURL.split(/-|.jpg|.webp/);
+					const date = parseInt(split_str[0]);
+					const id = split_str[1];
+					const [x, y] = split_str[2].split('_');
+					const prompt = split_str.slice(3).join(' ');
+					return {
+						id,
+						date,
+						position: {
+							x: parseInt(x),
+							y: parseInt(y)
+						},
+						imgURL: e.imgURL,
+						prompt,
+						room: roomid
+					};
+				})
+				.sort((a, b) => b.date - a.date);
+
+			// init
+			for (const promptImg of list) {
+				const x = promptImg.position.x;
+				const y = promptImg.position.y;
+				for (const i of [...Array(FRAME_SIZE / GRID_SIZE).keys()]) {
+					for (const j of [...Array(FRAME_SIZE / GRID_SIZE).keys()]) {
+						const key = `${x + i * GRID_SIZE}_${y + j * GRID_SIZE}`;
+						if (!canvasPixels.get(key)) {
+							canvasPixels.set(key, promptImg.id);
+						}
+					}
+				}
+			}
+			const ids = new Set([...canvasPixels.values()]);
+			const filteredImages = list.filter((promptImg) => ids.has(promptImg.id));
+
+			// remove images that are under other images
+			list
+				.filter((promptImg) => !ids.has(promptImg.id))
+				.map((promptImg) => {
+					const key = `${promptImg.position.x}_${promptImg.position.y}`;
+					$promptImgStorage.delete(key);
+					console.log('deleted', key)
+				});
+			return filteredImages.reverse().filter((promptImg) => !imagesOnCanvas.has(promptImg.id));
+		}
+		return [];
+	}
+	let promptImgList: PromptImgObject[] = [];
+	$: promptImgList = getpromptImgList($promptImgStorage?.toObject());
+
+	$: if (promptImgList) {
+		renderImages(promptImgList);
+	}
+
+	function to_bbox(
+		W: number,
+		H: number,
+		center: { x: number; y: number },
+		w: number,
+		h: number,
+		margin: number
+	) {
+		//https://bl.ocks.org/fabiovalse/b9224bfd64ca96c47f8cdcb57b35b8e2
+		const kw = (W - margin) / w;
+		const kh = (H - margin) / h;
+		const k = min([kw, kh]) || 1;
+		const x = W / 2 - center.x * k;
+		const y = H / 2 - center.y * k;
+		return zoomIdentity.translate(x, y).scale(k);
+	}
+	onMount(() => {
+		const padding = 50;
+		const scale =
+			(width + padding * 2) /
+			(containerEl.clientHeight > containerEl.clientWidth
+				? containerEl.clientWidth
+				: containerEl.clientHeight);
+		const zoomHandler = zoom()
+			.scaleExtent([1 / scale / 2, 3])
+			// .translateExtent([
+			// 	[-padding, -padding],
+			// 	[width + padding, height + padding]
+			// ])
+			.tapDistance(10)
+			.on('zoom', zoomed);
+
+		const selection = select($canvasEl.parentElement)
+			.call(zoomHandler as any)
+			.call(
+				zoomHandler.transform as any,
+				to_bbox(
+					containerEl.clientWidth,
+					containerEl.clientHeight,
+					{ x: width / 2, y: height / 2 },
+					width,
+					height,
+					padding
+				)
+			)
+			// .call(zoomHandler.scaleTo as any, 1 / scale)
+			.on('pointermove', handlePointerMove)
+			.on('pointerleave', handlePointerLeave);
+
+		canvasCtx = $canvasEl.getContext('2d') as CanvasRenderingContext2D;
+		function zoomReset() {
+			const scale =
+				(width + padding * 2) /
+				(containerEl.clientHeight > containerEl.clientWidth
+					? containerEl.clientWidth
+					: containerEl.clientHeight);
+			zoomHandler.scaleExtent([1 / scale / 2, 3]);
+			selection.call(
+				zoomHandler.transform as any,
+				to_bbox(
+					containerEl.clientWidth,
+					containerEl.clientHeight,
+					{ x: width / 2, y: height / 2 },
+					width,
+					height,
+					padding
+				)
+			);
+		}
+		window.addEventListener('resize', zoomReset);
+		return () => {
+			window.removeEventListener('resize', zoomReset);
+		};
+	});
+
+	type ImageRendered = {
+		img: HTMLImageElement;
+		position: { x: number; y: number };
+		id: string;
+	};
+	async function renderImages(promptImgList: PromptImgObject[]) {
+		if (promptImgList.length === 0) return;
+		$isRenderingCanvas = true;
+
+		await Promise.allSettled(
+			promptImgList.map(
+				({ imgURL, position, id, room }) =>
+					new Promise<ImageRendered>((resolve, reject) => {
+						const img = new Image();
+						img.crossOrigin = 'anonymous';
+						img.onload = () => {
+							const res: ImageRendered = { img, position, id };
+							canvasCtx.drawImage(img, position.x, position.y, img.width, img.height);
+							resolve(res);
+						};
+						img.onerror = (err) => {
+							reject(err);
+						};
+						img.src = `${PUBLIC_UPLOADS}/${room}/${imgURL}`;
+					})
+			)
+		).then((values) => {
+			const images = values
+				.filter((v) => v.status === 'fulfilled')
+				.map((v) => (v as PromiseFulfilledResult<ImageRendered>).value);
+			images.forEach(({ img, position, id }) => {
+				// keep track of images already rendered
+				//re draw in order
+				imagesOnCanvas.add(id);
+				canvasCtx.drawImage(img, position.x, position.y, img.width, img.height);
+			});
+		});
+		$isRenderingCanvas = false;
+	}
+	function zoomed(e: Event) {
+		const transform = ($currZoomTransform = e.transform);
+		$canvasEl.style.transform = `translate(${transform.x}px, ${transform.y}px) scale(${transform.k})`;
+	}
+
+	// Update cursor presence to current pointer location
+	function handlePointerMove(event: PointerEvent) {
+		event.preventDefault();
+		const x = $currZoomTransform.invertX(event.clientX);
+		const y = $currZoomTransform.invertY(event.clientY);
+
+		myPresence.update({
+			cursor: {
+				x,
+				y
+			}
+		});
+	}
+
+	// When the pointer leaves the page, set cursor presence to null
+	function handlePointerLeave() {
+		myPresence.update({
+			cursor: null
+		});
+	}
+</script>
+
+<div
+	bind:this={containerEl}
+	class="absolute top-0 left-0 right-0 bottom-0 overflow-hidden z-0 bg-blue-200"
+>
+	<canvas
+		bind:this={$canvasEl}
+		{width}
+		{height}
+		class="absolute top-0 left-0 bg-white shadow-2xl shadow-blue-500/20"
+	/>
+	<slot />
+</div>
+
+<style lang="postcss" scoped>
+	canvas {
+		transform-origin: 0 0;
+	}
+</style>