Spaces:
Runtime error
Runtime error
File size: 2,518 Bytes
ec3efd7 b7b124d ec3efd7 b7b124d ec3efd7 |
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 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 |
<script lang="ts">
let canvas: HTMLCanvasElement;
import { API } from '../data';
import { nanoid } from 'nanoid';
import type { Params } from '../types';
import {
selectedParams,
generateMap,
currentCanvas,
resultImage,
saveResult
} from '$lib/store';
$: (async () => {
if ($generateMap) {
const results = await predict($currentCanvas.toDataURL(), $selectedParams);
$resultImage = results;
$generateMap = false;
}
})();
$: (async () => {
if ($saveResult) {
const results = await saveImage($resultImage);
$saveResult = false;
}
})();
let predictStatus: string = '';
async function saveImage(base64Image: string) {
return new Promise((resolve, reject) => {
try {
const a = document.createElement('a');
a.download = `sucess-${Date.now()}.png`;
a.target = '_self';
a.onclick = async (e) => {
if (a.href) {
URL.revokeObjectURL(a.href);
}
a.href = base64Image;
};
requestAnimationFrame(() => {
console.log('Downloading image.');
a.click();
resolve(null);
});
} catch (err) {
reject();
}
});
}
async function predict(base64Image: string, { prompt, modifier, steps, seed }: Params) {
const response = await fetch('/predict', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
data: [base64Image, prompt+'. '+modifier, steps, seed.toString()],
}),
});
if (!response.ok) {
throw new Error('Prediction request failed.');
}
const result = await response.text();
return result;
}
</script>
<div class="relative overflow-clip flex flex-col justify-center items-center w-full h-full">
{#if $resultImage}
<img
class="image {$generateMap ? 'opacity-30' : ''}"
alt="Generative Map Result"
src={$resultImage}
width="512"
height="512"
/>
{/if}
{#if $generateMap}
<div class="loading">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
class="animate-spin max-w-[3rem]"
>
<path
fill="currentColor"
d="M20 12a8 8 0 0 1-8 8v4a12 12 0 0 0 12-12h-4Zm-2-5.3a8 8 0 0 1 2 5.3h4c0-3-1.1-5.8-3-8l-3 2.7Z"
/>
</svg>
<span class="text-xs">{predictStatus}</span>
</div>
{/if}
</div>
<!-- {/if} -->
<style lang="postcss" scoped>
.image {
@apply box-border z-0 border dark:border-gray-300 border-gray-500 aspect-[512/512];
}
.loading {
@apply absolute top-0 left-0 right-0 bottom-0 flex flex-col justify-center items-center;
}
</style>
|