Spaces:

huggingface-projects
/

stable-diffusion-multiplayer

Runtime error

App Files Files Community

radames commited on Oct 26, 2022

Commit

f32cee9

•

1 Parent(s): 34d2e2b

spells

Browse files

Files changed (5) hide show

frontend/src/app.html +1 -3
frontend/src/lib/About.svelte +52 -46
frontend/src/lib/App.svelte +1 -1
frontend/src/lib/Buttons/PPButton.svelte +1 -1
frontend/src/lib/PaintCanvas.svelte +3 -2

frontend/src/app.html CHANGED Viewed

@@ -8,9 +8,7 @@
 	<script src=""></script>
 	%sveltekit.head%
 </head>
-<!-- <body class="dark:bg-[rgb(11,15,25)] bg-white dark:text-white text-black"> -->
-<body class="bg-blue-200/20">
 	<div>%sveltekit.body%</div>
 </body>

 	<script src=""></script>
 	%sveltekit.head%
 </head>
+<body class="bg-blue-200">
 	<div>%sveltekit.body%</div>
 </body>

frontend/src/lib/About.svelte CHANGED Viewed

@@ -6,54 +6,60 @@
 <!-- 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 overflow-y-scroll"
 >
 	<div class="max-w-md">
 		<h2 class="font-bold text-xl font-mono mb-8">Stable Difussion Multiplayer</h2>
-		<p>
-			Powered by Hugging Face face GPU Spaces <a
-				href="https://huggingface.co/docs/hub/spaces-gpus"
-				class="text-blue-400 hover:text-blue-600 underline"
-				>https://huggingface.co/docs/hub/spaces-gpus</a
-			>
-			Diffusers
-			<a
-				href="https://huggingface.co/docs/diffusers/index"
-				class="text-blue-400 hover:text-blue-600 underline"
-				>https://huggingface.co/docs/diffusers/index</a
-			>
-		</p>
-		<p>
-			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 outpaiting 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>.
-		</p>
-		<p class="mb-6">
-			Runwayml Inpaiting Stable Diffusion
-			<a
-				href="https://github.com/runwayml/stable-diffusion"
-				target="_blank"
-				rel="noopener noreferrer"
-			>
-				https://github.com/runwayml/stable-diffusion</a
-			>
-		</p>
-		<p class="text-base flex items-center">
-			Multiplayer API by
-			<LiveBlocks classList="ml-2" />
-		</p>
 	</div>
 </div>

 <!-- 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 Inpaiting 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
+					<LiveBlocks classList="ml-2" />
+				</p>
+			</li>
+		</ul>
 	</div>
 </div>

frontend/src/lib/App.svelte CHANGED Viewed

@@ -8,7 +8,7 @@
 	import PromptModal from '$lib/PromptModal.svelte';
 	import { COLORS } from '$lib/constants';
 	import { PUBLIC_WS_INPAINTING } from '$env/static/public';
-	import type { PromptImgKey, Presence } from '$lib/types';
 	import { Status } from '$lib/types';
 	import { loadingState, currZoomTransform, maskEl } from '$lib/store';
 	import { useMyPresence, useObject, useOthers } from '$lib/liveblocks';

 	import PromptModal from '$lib/PromptModal.svelte';
 	import { COLORS } from '$lib/constants';
 	import { PUBLIC_WS_INPAINTING } from '$env/static/public';
+	import type { PromptImgKey } from '$lib/types';
 	import { Status } from '$lib/types';
 	import { loadingState, currZoomTransform, maskEl } from '$lib/store';
 	import { useMyPresence, useObject, useOthers } from '$lib/liveblocks';

frontend/src/lib/Buttons/PPButton.svelte CHANGED Viewed

@@ -9,7 +9,7 @@
 	title="Prompt and Paint"
 >
 	{#if isLoading}
-		<span>paiting... </span>{:else}
 		<span
 			class="rounded-sm h-4 w-4 flex justify-center items-center border-2 border-dashed border-violet-700 mr-2"
 		>

 	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"
 		>

frontend/src/lib/PaintCanvas.svelte CHANGED Viewed

@@ -68,7 +68,7 @@
 		//https://bl.ocks.org/fabiovalse/b9224bfd64ca96c47f8cdcb57b35b8e2
 		const kw = (W - margin) / w;
 		const kh = (H - margin) / h;
-		const k = min([kw, kh]);
 		const x = W / 2 - center.x * k;
 		const y = H / 2 - center.y * k;
 		return zoomIdentity.translate(x, y).scale(k);
@@ -113,6 +113,7 @@
 				(containerEl.clientHeight > containerEl.clientWidth
 					? containerEl.clientWidth
 					: containerEl.clientHeight);
 			selection.call(
 				zoomHandler.transform as any,
 				to_bbox(
@@ -189,7 +190,7 @@
 <div
 	bind:this={containerEl}
-	class="absolute top-0 left-0 right-0 bottom-0 overflow-hidden z-0 bg-blue-200/20"
 >
 	<canvas
 		bind:this={$canvasEl}

 		//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);
 				(containerEl.clientHeight > containerEl.clientWidth
 					? containerEl.clientWidth
 					: containerEl.clientHeight);
+			zoomHandler.scaleExtent([1 / scale / 2, 3]);
 			selection.call(
 				zoomHandler.transform as any,
 				to_bbox(
 <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}