File size: 1,509 Bytes
142f91b
70b8e47
1d701d3
142f91b
70b8e47
 
 
560b99e
70b8e47
560b99e
142f91b
 
 
 
de6cf77
560b99e
66ed450
70b8e47
 
1d701d3
70b8e47
 
 
66ed450
70b8e47
 
 
 
 
 
 
 
304976c
 
 
 
1d701d3
70b8e47
 
 
1d701d3
304976c
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
56
57
58
<script lang="ts">
	import { onMount } from 'svelte';
	import { isLoading, loadingState, createPresenceStore } 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 = 'multiplayer-SD';

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

		room = client.enter<Presence, Storage /* UserMeta, RoomEvent */>(roomId, {
			initialPresence: {
				cursor: null
			},
			initialStorage: {}
		});
		const unsubscribe = room.subscribe('history', (e) => {
			// Do something
			console.log('history', e);
		});
		const unsubscribePresence = createPresenceStore(room);
		return () => {
			if (client && room) {
				client.leave(roomId);
				unsubscribePresence();
				unsubscribe();
			}
		};
	});
</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>