liveblocks icon

frontend/src/lib/Buttons/PPButton.svelte

@@ -11,7 +11,7 @@
 	{#if isLoading}
 		<span>paiting... </span>{:else}
 		<span
-			class="rounded-sm h-6 w-6 flex justify-center items-center border-2 border-dashed border-violet-700 mr-2"
+			class="rounded-sm h-4 w-4 flex justify-center items-center border-2 border-dashed border-violet-700 mr-2"
 		>
 			+
 		</span>
@@ -24,6 +24,6 @@
 		@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-sm font-mono bg-violet-100 text-violet-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;
+		@apply text-xs md:text-sm font-mono bg-violet-100 text-violet-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

@@ -12,7 +12,7 @@
 		.map((_, i) => ({ label: `room ${i}`, total: ~~Math.random() * 20, capacity: 20 }));
 
 	let selectedRoomID = 0;
-	let collapsed = true;
+	let collapsed = false;
 	$: selectedRoom = rooms[selectedRoomID];
 
 	function clickHandler(event: Event) {
@@ -30,15 +30,17 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
-	class="bg-violet-100 text-violet-900 px-3 py-1 font-mono font-medium tracking-tight relative z-0 
+	class="text-xs md:text-sm bg-violet-100 text-violet-900 px-3 py-1 font-mono font-medium tracking-tight relative z-0 min-w-[25ch] 
 	{isLoading ? 'opacity-50' : ''}
 	{collapsed ? 'rounded-xl' : 'rounded-b-xl'}"
 	bind:this={boxEl}
 >
 	{#if !collapsed}
-		<div class="absolute z-20 left-0 right-0 bottom-full rounded-t-xl bg-violet-100 px-1 py-1 overflow-y-scroll max-h-80">
+		<div
+			class="absolute z-20 left-0 right-0 bottom-full rounded-t-xl bg-violet-100 px-1 overflow-y-scroll max-h-80"
+		>
 			<ul class="relative">
-				<li class="grid-row gap-2 pb-3 sticky top-0 bg-violet-100">
+				<li class="grid-row gap-2 pb-3 sticky top-0 bg-violet-100 py-2">
 					<Room />
 					<span> room </span>
 					<People />
@@ -49,7 +51,10 @@
 						<!-- svelte-ignore a11y-invalid-attribute -->
 						<a
 							href="#"
-							on:click|preventDefault={() => (selectedRoomID = i)}
+							on:click|preventDefault={() => {
+								selectedRoomID = i;
+								collapsed = true;
+							}}
 							class="grid-row gap-2 hover:bg-gray-300
 						   {i === selectedRoomID ? 'text-green-600' : ''}"
 						>

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/Menu.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { onMount, createEventDispatcher } from 'svelte';
 	import PPButton from '$lib/Buttons/PPButton.svelte';
-	import RoomsSelector from './Buttons/RoomsSelector.svelte';
+	import RoomsSelector from '$lib/Buttons/RoomsSelector.svelte';
+	import LiveBlocks from '$lib/Icons/LiveBlocks.svelte';
 	const dispatch = createEventDispatcher();
 	export let isLoading = false;
 	const onKeyup = (e: KeyboardEvent) => {
@@ -17,7 +18,10 @@
 	});
 </script>
 
-<div class="grid grid-cols-1 gap-1 w-max mx-auto">
+<div class="grid grid-cols-1 gap-1 w-max mx-auto place-items-center">
 	<PPButton {isLoading} on:click={() => dispatch('prompt')} />
 	<RoomsSelector {isLoading} />
+	<a href="https://liveblocks.io" target="_blank" rel="noopener noreferrer">
+		<LiveBlocks />
+	</a>
 </div>

frontend/src/lib/utils.ts

@@ -32,15 +32,12 @@ export async function uploadImage(imagBlob: Blob, prompt: string, key: string):
 	const formData = new FormData()
 	formData.append('file', file)
 
-	console.log('uploading image', file);
-
 	const response = await fetch(PUBLIC_UPLOAD_URL, {
 		method: 'POST',
 		body: formData
 	});
 	const res = await response.json();
 
-	console.log('uploaded images', res);
 	return res.filename;
 }
 const MAX = 512 * 5 - 512

frontend/src/routes/+page.svelte

@@ -25,7 +25,7 @@
 
 		// Add random id to room param if not set, and return the id string
 		// e.g. /?room=758df70b5e94c13289df6
-		roomId = 'multiplayer-SD';
+		roomId = 'sd-multiplayer-room-0';
 
 		// Connect to the authentication API for Liveblocks
 		client = createClient({

requirements.txt

@@ -11,4 +11,5 @@ uvicorn
 httpx
 gradio
 boto3
-python-magic
+python-magic
+fastapi-utils

run.py

@@ -1,4 +1,4 @@
 import os
 
-os.system("cd stablediffusion-infinity/PyPatchMatch && make clean && make")
+os.system("cd stablediffusion-infinity/PyPatchMatch && make")
 os.system("cd stablediffusion-infinity && python app.py")

stablediffusion-infinity/app.py

@@ -1,47 +1,57 @@
 import io
-import base64
 import os
 from random import sample
-from sched import scheduler
 
+from pathlib import Path
 import uvicorn
-from fastapi import FastAPI, Response, BackgroundTasks, HTTPException, UploadFile, File, status
+from fastapi import FastAPI, BackgroundTasks, HTTPException, UploadFile, Depends, status
 from fastapi.staticfiles import StaticFiles
 from fastapi.middleware.cors import CORSMiddleware
-
-import httpx
-from urllib.parse import urljoin
-
+from fastapi_utils.tasks import repeat_every
 
 import numpy as np
 import torch
 from torch import autocast
 from diffusers import StableDiffusionPipeline, StableDiffusionInpaintPipeline
 from PIL import Image
-from PIL import ImageOps
 import gradio as gr
-import base64
 import skimage
 import skimage.measure
 from utils import *
 import boto3
 import magic
+import sqlite3
+import requests
 
 AWS_ACCESS_KEY_ID = os.getenv('AWS_ACCESS_KEY_ID')
 AWS_SECRET_KEY = os.getenv('AWS_SECRET_KEY')
 AWS_S3_BUCKET_NAME = os.getenv('AWS_S3_BUCKET_NAME')
+LIVEBLOCKS_SECRET = os.environ.get("LIVEBLOCKS_SECRET")
+HF_TOKEN = os.environ.get("API_TOKEN") or True
+
+if (AWS_ACCESS_KEY_ID == None or AWS_SECRET_KEY == None or AWS_S3_BUCKET_NAME == None or LIVEBLOCKS_SECRET == None):
+    raise Exception("Missing environment variables")
 
 FILE_TYPES = {
     'image/png': 'png',
     'image/jpeg': 'jpg',
 }
+DB_PATH = Path("rooms.db")
+app = FastAPI()
 
-WHITES = 66846720
-MASK = Image.open("mask.png")
+print("DB_PATH", DB_PATH)
 
-app = FastAPI()
 
-auth_token = os.environ.get("API_TOKEN") or True
+def get_db():
+    db = sqlite3.connect(DB_PATH, check_same_thread=False)
+    db.execute("CREATE TABLE IF NOT EXISTS rooms (id INTEGER PRIMARY KEY AUTOINCREMENT NOT NULL, room_id TEXT NOT NULL, users_count INTEGER NOT NULL DEFAULT 0)")
+    print("Connected to database")
+    db.commit()
+    db.row_factory = sqlite3.Row
+    try:
+        yield db
+    finally:
+        db.close()
 
 
 s3 = boto3.client(service_name='s3',
@@ -63,7 +73,7 @@ def get_model():
             "CompVis/stable-diffusion-v1-4",
             revision="fp16",
             torch_dtype=torch.float16,
-            use_auth_token=auth_token,
+            use_auth_token=HF_TOKEN,
         ).to("cuda")
         inpaint = StableDiffusionInpaintPipeline(
             vae=text2img.vae,
@@ -103,7 +113,7 @@ def get_model():
     # model["img2img"]
 
 
-get_model()
+# get_model()
 
 
 def run_outpaint(
@@ -226,20 +236,56 @@ with blocks as demo:
 
 blocks.config['dev_mode'] = False
 
-# S3_HOST = "https://s3.amazonaws.com"
 
+def generateAuthToken():
+    response = requests.get(f"https://liveblocks.io/api/authorize",
+                            headers={"Authorization": f"Bearer {LIVEBLOCKS_SECRET}"})
+    if response.status_code == 200:
+        data = response.json()
+        return data["token"]
+    else:
+        raise Exception(response.status_code, response.text)
+
+
+def get_room_count(room_id: str, jwtToken: str = ''):
+    print("Getting room count" + room_id)
+    response = requests.get(
+        f"https://liveblocks.net/api/v1/room/{room_id}/users", headers={"Authorization": f"Bearer {jwtToken}", "Content-Type": "application/json"})
+    if response.status_code == 200:
+        res = response.json()
+        if "data" in res:
+            return len(res["data"])
+        else:
+            return 0
+    raise Exception("Error getting room count")
+
+
+app = gr.mount_gradio_app(app, blocks, "/gradio",
+                          gradio_api_url="http://0.0.0.0:7860/gradio/")
+
+app.on_event("startup")
+
+
+@repeat_every(seconds=10)
+async def sync_rooms(db: sqlite3.Connection = Depends(get_db)):
+    try:
+        jwtToken = generateAuthToken()
+        rooms = db.execute("SELECT * FROM rooms").fetchall()
+        print(rooms)
+        for row in rooms:
+            room_id = row["room_id"]
+            users_count = get_room_count(room_id, jwtToken)
+            print("Updating room", room_id, "with", users_count, "users")
+            cursor = db.cursor()
+            cursor.execute(
+                "UPDATE rooms SET users_count = ? WHERE room_id = ?", (users_count, room_id))
+            db.commit()
+        data = db.execute("SELECT * FROM rooms").fetchall()
+        print("Rooms updated", data)
+    except Exception as e:
+        print(e)
+        print("Rooms update failed")
 
-# @app.get("/uploads/{path:path}")
-# async def uploads(path: str, response: Response):
-#     async with httpx.AsyncClient() as client:
-#         proxy = await client.get(f"{S3_HOST}/{path}")
-#     response.body = proxy.content
-#     response.status_code = proxy.status_code
-#     response.headers['Access-Control-Allow-Origin'] = '*'
-#     response.headers['Access-Control-Allow-Methods'] = 'POST, GET, DELETE, OPTIONS'
-#     response.headers['Access-Control-Allow-Headers'] = 'Authorization, Content-Type'
-#     response.headers['Cache-Control'] = 'max-age=31536000'
-#     return response
 
 @app.post('/uploadfile/')
 async def create_upload_file(background_tasks: BackgroundTasks, file: UploadFile):
@@ -266,9 +312,6 @@ async def create_upload_file(background_tasks: BackgroundTasks, file: UploadFile
     return {"url": f'https://d26smi9133w0oo.cloudfront.net/uploads/{file.filename}', "filename": file.filename}
 
 
-app = gr.mount_gradio_app(app, blocks, "/gradio",
-                          gradio_api_url="http://0.0.0.0:7860/gradio/")
-
 app.mount("/", StaticFiles(directory="../static", html=True), name="static")
 
 origins = ["*"]