Spaces:
Runtime error
Runtime error
File size: 2,033 Bytes
a6e7e8f 7c37442 5636b7a 7c37442 a6e7e8f d11af81 7d4e291 7c37442 a6e7e8f 93b70aa a6e7e8f 7d4e291 d11af81 a6e7e8f 7d4e291 d11af81 5636b7a d11af81 7d4e291 d11af81 5636b7a 7d4e291 d11af81 93b70aa 5636b7a 93b70aa a6e7e8f 35946a9 7d4e291 93b70aa a6e7e8f 5636b7a a6e7e8f 5636b7a a6e7e8f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
<script lang="ts">
import { createEventDispatcher, onMount } from 'svelte';
import { useMyPresence } from '$lib/liveblocks';
import { Status } from '$lib/types';
const dispatch = createEventDispatcher();
let prompt = '';
let inputEl: HTMLInputElement;
const myPresence = useMyPresence();
const onKeyup = (e: KeyboardEvent) => {
if (e.key === 'Escape') {
cancel();
}
};
onMount(() => {
inputEl.focus();
prompt = '';
window.addEventListener('keyup', onKeyup);
return () => {
window.removeEventListener('keyup', onKeyup);
};
});
let timer: NodeJS.Timeout;
function debouce(newPrompt: string) {
clearTimeout(timer);
timer = setTimeout(() => {
prompt = newPrompt;
myPresence.update({
currentPrompt: prompt,
status: Status.prompting
});
}, 100);
}
function onPrompt() {
if (prompt.trim() !== '') {
console.log('Prompting with: ', prompt);
dispatch('paint');
}
}
function onInput(event: Event) {
const target = event.target as HTMLInputElement;
debouce(target.value);
}
function cancel() {
myPresence.update({
currentPrompt: '',
status: Status.ready
});
dispatch('close');
}
</script>
<form
class="fixed w-screen top-0 left-0 bottom-0 right-0 max-h-screen z-50 flex items-center justify-center bg-black bg-opacity-80 px-3"
on:submit|preventDefault={onPrompt}
on:click={cancel}
>
<div class="flex bg-white rounded-2xl px-2 w-full max-w-md">
<input
bind:this={inputEl}
on:click|stopPropagation
on:input={onInput}
class="input"
placeholder="Type a prompt..."
title="Input prompt to generate image and obtain palette"
type="text"
name="prompt"
/>
<button on:click|preventDefault={onPrompt} class="font-mono border-l-2 pl-2" type="submit"
>Paint</button
>
</div>
</form>
<style lang="postcss" scoped>
.input {
@apply flex-grow text-sm m-2 p-0 disabled:opacity-50 italic placeholder:text-black text-black placeholder:text-opacity-50 border-0 focus:outline-none focus:border-gray-400 focus:ring-1;
}
</style>
|