File size: 1,465 Bytes
142f91b
70b8e47
73e6846
142f91b
70b8e47
73e6846
70b8e47
560b99e
70b8e47
560b99e
142f91b
 
 
 
de6cf77
560b99e
66ed450
70b8e47
 
1d701d3
70b8e47
 
 
66ed450
70b8e47
 
 
 
 
 
73e6846
304976c
73e6846
1d701d3
73e6846
70b8e47
 
 
1d701d3
70b8e47
 
 
142f91b
 
560b99e
a6e7e8f
560b99e
142f91b
a6e7e8f
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
<script lang="ts">
	import { onMount } from 'svelte';
	import { isLoading, loadingState, createPresenceStore, createStorageStore } from '$lib/store';
	import { PUBLIC_WS_ENDPOINT, PUBLIC_DEV_MODE } from '$env/static/public';
	import type { Client, Room } from '@liveblocks/client';
	import { createClient, LiveList } 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 = 'multiplayer-SD';

	onMount(() => {
		client = createClient({
			publicApiKey: 'pk_test_JlUZGH3kQmhmZQiqU2l8eIi5'
		});

		room = client.enter<Presence, Storage /* UserMeta, RoomEvent */>(roomId, {
			initialPresence: {
				cursor: null
			},
			initialStorage: { imagesList: new LiveList() }
		});

		const unsubscribePresence = createPresenceStore(room);
		createStorageStore(room);
		return () => {
			if (client && room) {
				client.leave(roomId);
				unsubscribePresence();
			}
		};
	});
</script>

<div class="max-w-screen-md mx-auto px-3 py-8 relative">
	<div class="relative">
		<h1 class="text-3xl font-bold leading-normal">Stable Diffussion Outpainting Multiplayer</h1>
	</div>
	<div class="relative">
		{#if room}
			<App {room} />
		{/if}
	</div>
</div>