gradio/frontend

1<script lang="ts">2	import { BaseImage as Image } from "@gradio/image";3	import type { EditorData } from "./InteractiveImageEditor.svelte";4 5	export let value: EditorData;6	export let type: "gallery" | "table";7	export let selected = false;8</script>9 10<div11	class="container"12	class:table={type === "table"}13	class:gallery={type === "gallery"}14	class:selected15>16	<Image src={value.composite?.url || value.background?.url} alt="" />17</div>18 19<style>20	.container :global(img) {21		width: 100%;22		height: 100%;23	}24 25	.container.selected {26		border-color: var(--border-color-accent);27	}28 29	.container.table {30		margin: 0 auto;31		border: 2px solid var(--border-color-primary);32		border-radius: var(--radius-lg);33		width: var(--size-20);34		height: var(--size-20);35		object-fit: cover;36	}37 38	.container.gallery {39		border: 2px solid var(--border-color-primary);40		height: var(--size-20);41		max-height: var(--size-20);42		object-fit: cover;43	}44</style>45