Spaces:
Runtime error
Runtime error
File size: 1,686 Bytes
72be512 923f391 dd24c08 72be512 923f391 72be512 923f391 72be512 923f391 dd24c08 923f391 dd24c08 923f391 dd24c08 923f391 72be512 dd24c08 72be512 |
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 IconCommunity from '$lib/Icons/IconCommunity.svelte';
import LoadingIcon from '$lib/Icons/LoadingIcon.svelte';
import { uploadImage } from '$lib/utils';
import { canvasEl, selectedRoomID } from '$lib/store';
let isUploading: boolean = false;
async function handleClick() {
if (isUploading) {
return;
}
const blob: Blob = await new Promise((resolve) => {
$canvasEl.toBlob(resolve as BlobCallback, 'image/jpeg', 0.95);
});
isUploading = true;
await createCommunityPost(blob);
isUploading = false;
}
async function createCommunityPost(canvasBlob: Blob) {
const canvasURL = await uploadImage(canvasBlob, 'canvas', 'canvas');
const canvasImage = `<img src="${canvasURL.url}" style="width:100%" width="1000" height="1000">`;
const descriptionMd = `#### Stable Diffusion Multiplayer:
### Room ${$selectedRoomID}
<div style="display: flex; overflow: scroll; column-gap: 0.75rem;">
${canvasImage}
</div>`;
const params = new URLSearchParams({
title: `Room ${$selectedRoomID}`,
description: descriptionMd
});
const paramsStr = params.toString();
window.open(
`https://huggingface.co/spaces/huggingface-projects/stable-diffusion-multiplayer/discussions/new?${paramsStr}`,
'_blank'
);
}
</script>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div
class="text-sm font-mono flex items-center justify-center bg-black gap-x-1 rounded-xl cursor-pointer px-2 py-1"
on:click={handleClick}
title="Share with community"
>
{#if isUploading}
<LoadingIcon classList={'animate-spin max-w-[25px]'} />
{:else}
<IconCommunity />
{/if}
<p class="text-white font-semibold">Share to community</p>
</div>
|