huggingface-projects/stable-diffusion-multiplayer

1<script lang="ts">2	import { createEventDispatcher, onMount } from 'svelte';3	import { useMyPresence } from '$lib/liveblocks';4	import { Status } from '$lib/types';5 6	const dispatch = createEventDispatcher();7 8	export let initPrompt = '';9 10	let prompt: string;11	let inputEl: HTMLInputElement;12	let boxEl: HTMLDivElement;13	const myPresence = useMyPresence();14 15	const onKeyup = (e: KeyboardEvent) => {16		if (e.key === 'Escape') {17			dispatch('showModal', { showModal: false });18		}19	};20 21	onMount(() => {22		inputEl.focus();23		prompt = initPrompt;24		window.addEventListener('keyup', onKeyup);25		window.addEventListener('pointerdown', cancelHandler, true);26 27		return () => {28			window.removeEventListener('keyup', onKeyup);29			window.removeEventListener('pointerdown', cancelHandler, true);30		};31	});32	let timer: NodeJS.Timeout;33	function debouce(newPrompt: string) {34		clearTimeout(timer);35		timer = setTimeout(() => {36			prompt = newPrompt;37			myPresence.update({38				currentPrompt: prompt,39				status: Status.prompting40			});41		}, 100);42	}43	function onPrompt(event: Event) {44		event.stopPropagation();45		event.preventDefault();46		event.stopImmediatePropagation();47 48		if (prompt.trim() !== '') {49			dispatch('paint');50		}51	}52	function onInput(event: Event) {53		const target = event.target as HTMLInputElement;54		debouce(target.value);55	}56	function cancelHandler(event: Event) {57		if (boxEl.contains(event.target as Node)) {58			return;59		}60		myPresence.update({61			status: Status.ready62		});63		dispatch('showModal', { showModal: false });64	}65</script>66 67<form68	class="fixed w-screen top-0 left-0 bottom-0 right-0 h-screen z-50 flex items-center justify-center bg-black bg-opacity-80"69	on:submit={onPrompt}70>71	<div72		class="flex bg-white overflow-hidden rounded-2xl w-full max-w-lg 2xl:max-w-xl"73		bind:this={boxEl}74	>75		<input76			value={prompt}77			bind:this={inputEl}78			on:click|stopPropagation79			on:input={onInput}80			class="flex-1 outline-none ring-0 border-none text-xl 2xl:text-2xl py-3 px-3"81			placeholder="Prompt and <Negative Prompt> between < >"82			title="Input prompt to generate image and  negative prompt inside brackets <NEGATIVE PROMPT>"83			type="text"84			name="prompt"85		/>86		<button87			class="font-semibold bg-blue-700 text-white border-l-2 px-5 text-xl 2xl:text-2xl spacing tracking-wide hover:saturate-150"88			type="submit"89			title="Input prompt to generate image and  negative prompt inside brackets <NEGATIVE PROMPT>"90			><span class="mr-2">🖍</span> Paint91		</button>92	</div>93</form>94