CoolFace
Datasetpublic

gradio/frontend

sourceHugging Faceupdated 4h agoView on Hugging Face
1likes403kdownloads
Example.svelte49 linesDownload Raw Back to simpleimage
1<script lang="ts">2	import type { FileData } from "@gradio/client";3 4	export let value: null | FileData;5	export let type: "gallery" | "table";6	export let selected = false;7</script>8 9{#if value}10	<div11		class="container"12		class:table={type === "table"}13		class:gallery={type === "gallery"}14		class:selected15	>16		<img src={value.url} alt="" />17	</div>18{/if}19 20<style>21	.container :global(img) {22		width: 100%;23		height: 100%;24	}25 26	.container.selected {27		border-color: var(--border-color-accent);28	}29 30	.container.table {31		margin: 0 auto;32		border: 2px solid var(--border-color-primary);33		border-radius: var(--radius-lg);34		overflow: hidden;35		width: var(--size-20);36		height: var(--size-20);37		object-fit: cover;38	}39 40	.container.gallery {41		height: var(--size-20);42		max-height: var(--size-20);43		object-fit: cover;44	}45	.container img {46		object-fit: cover;47	}48</style>49 
gradio/frontend · CoolFace