|
<script> |
|
import { onMount } from "svelte"; |
|
const url ="https://huggingface.co/datasets/triple-t/dummy/raw/main/stabilityai_stable-diffusion.json" |
|
|
|
let discussions = []; |
|
function fetchData(){ |
|
fetch(url) |
|
.then(response => response.json()) |
|
.then(json => { |
|
discussions = json; |
|
}) |
|
} |
|
onMount(()=>{ |
|
fetchData(); |
|
const interval = window.setInterval(fetchData, 2000); |
|
return () => { |
|
clearInterval(interval); |
|
}; |
|
}) |
|
</script> |
|
|
|
|
|
|
|
<div class="grid grid-cols-1 gap-4 p-3 "> |
|
<h1 class="text-3xl text-black dark:text-white font-semibold p-2 text-center">Show off</h1> |
|
</div> |
|
<div class="grid grid-cols-4 gap-4 p-3"> |
|
{#each discussions as item} |
|
{#if item.data.images.length > 0} |
|
<div> |
|
<h1 class="text-black dark:text-white font-semibold p-2 min-h-[8ch] text-center">{item.data.prompt}</h1> |
|
|
|
<img loading="lazy" src={item.data.images[0]} class="rounded-3xl"/> |
|
</div> |
|
{/if} |
|
{/each} |
|
|
|
</div> |
