Spaces:
Runtime error
Runtime error
File size: 2,480 Bytes
142f91b 70b8e47 142f91b 70b8e47 560b99e 70b8e47 560b99e 142f91b 560b99e 66ed450 70b8e47 66ed450 70b8e47 142f91b 560b99e 142f91b 560b99e 70b8e47 560b99e 70b8e47 142f91b |
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 |
<script lang="ts">
import { onMount } from 'svelte';
import { isLoading, loadingState } from '$lib/store';
import { PUBLIC_WS_ENDPOINT, PUBLIC_DEV_MODE } from '$env/static/public';
import type { Client, Room } from '@liveblocks/client';
import { createClient } from '@liveblocks/client';
import App from '$lib/App.svelte';
import type { Presence, Storage } from '$lib/types';
console.log('PUBLIC_DEV_MODE', PUBLIC_DEV_MODE);
const apiUrl =
PUBLIC_DEV_MODE === 'DEV'
? 'http://localhost:7860'
: '/embed/huggingface-projects/color-palette-generator-sd';
console.log(apiUrl);
let client: Client;
let room: Room;
let roomId = 'sveltekit-live-cursors';
onMount(() => {
client = createClient({
publicApiKey: 'pk_test_JlUZGH3kQmhmZQiqU2l8eIi5'
});
room = client.enter<Presence, Storage /* UserMeta, RoomEvent */>(roomId, {
initialPresence: {
cursor: null
},
initialStorage: {}
});
return () => {
if (client && room) {
client.leave(roomId);
}
};
});
</script>
<div class="max-w-screen-md mx-auto px-3 py-8 relative">
<div class="relative z-10">
<h1 class="text-3xl font-bold leading-normal">Stable Diffussion Outpainting Multiplayer</h1>
<p class="text-sm" />
<div class="relative bg-white dark:bg-black py-3">
<form class="grid grid-cols-6">
<input
class="input"
placeholder="A photo of a beautiful sunset in San Francisco"
title="Input prompt to generate image and obtain palette"
type="text"
name="prompt"
disabled={$isLoading}
/>
<button class="button" disabled={$isLoading} title="Generate Palette">
Create Palette
</button>
</form>
</div>
</div>
<div class="relative z-0">
{#if room}
<App {room} />
{/if}
</div>
</div>
<style lang="postcss" scoped>
.link {
@apply text-xs underline font-bold hover:no-underline hover:text-gray-500 visited:text-gray-500;
}
.input {
@apply text-sm disabled:opacity-50 col-span-4 md:col-span-5 italic dark:placeholder:text-black placeholder:text-white text-white dark:text-black placeholder:text-opacity-30 dark:placeholder:text-opacity-10 dark:bg-white bg-slate-900 border-2 border-black rounded-2xl px-2 shadow-sm focus:outline-none focus:border-gray-400 focus:ring-1;
}
.button {
@apply disabled:opacity-50 col-span-2 md:col-span-1 dark:bg-white dark:text-black border-2 border-black rounded-2xl ml-2 px-2 py-2 text-xs shadow-sm font-bold focus:outline-none focus:border-gray-400;
}
</style>
|