Spaces:
Runtime error
Runtime error
File size: 1,843 Bytes
a6e7e8f 7c37442 a6e7e8f d11af81 7d4e291 7c37442 a6e7e8f 93b70aa a6e7e8f 7d4e291 d11af81 a6e7e8f 7d4e291 d11af81 7d4e291 d11af81 7d4e291 d11af81 93b70aa a6e7e8f 35946a9 7d4e291 93b70aa a6e7e8f 7d4e291 a6e7e8f d11af81 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 |
<script lang="ts">
import { createEventDispatcher, onMount } from 'svelte';
import { useMyPresence } from '$lib/liveblocks';
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,
isPrompting: true
});
}, 100);
}
function onPrompt() {
if (prompt.trim() !== '') {
console.log('Prompting with: ', prompt);
dispatch('prompt');
}
}
function onInput(event: Event) {
const target = event.target as HTMLInputElement;
debouce(target.value);
}
function cancel() {
myPresence.update({
currentPrompt: '',
isPrompting: false
});
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}
>
<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"
/>
</form>
<style lang="postcss" scoped>
.input {
@apply w-full max-w-sm text-sm disabled:opacity-50 italic placeholder:text-white text-white placeholder:text-opacity-50 bg-slate-900 border-2 border-white rounded-2xl px-2 shadow-sm focus:outline-none focus:border-gray-400 focus:ring-1;
}
</style>
|