gradio/frontend

1<script lang="ts">2	import { onMount } from "svelte";3	import { Image } from "@gradio/image/shared";4	import { Video } from "@gradio/video/shared";5	import type { FileData } from "@gradio/client";6 7	export let value: { text: string; files: FileData[] } = {8		text: "",9		files: []10	};11	export let type: "gallery" | "table";12	export let selected = false;13 14	let size: number;15	let el: HTMLDivElement;16 17	function set_styles(element: HTMLElement, el_width: number): void {18		element.style.setProperty(19			"--local-text-width",20			`${el_width && el_width < 150 ? el_width : 200}px`21		);22		element.style.whiteSpace = "unset";23	}24 25	onMount(() => {26		set_styles(el, size);27	});28</script>29 30<div31	class="container"32	bind:clientWidth={size}33	bind:this={el}34	class:table={type === "table"}35	class:gallery={type === "gallery"}36	class:selected37	class:border={value}38>39	<p>{value.text ? value.text : ""}</p>40	{#each value.files as file}41		{#if file.mime_type && file.mime_type.includes("image")}42			<Image src={file.url} alt="" />43		{:else if file.mime_type && file.mime_type.includes("video")}44			<Video src={file.url} alt="" loop={true} is_stream={false} />45		{:else if file.mime_type && file.mime_type.includes("audio")}46			<audio src={file.url} controls />47		{:else}48			{file.orig_name}49		{/if}50	{/each}51</div>52 53<style>54	.gallery {55		padding: var(--size-1) var(--size-2);56		display: flex;57		align-items: center;58		gap: 20px;59		overflow-x: auto;60	}61 62	div {63		overflow: hidden;64		min-width: var(--local-text-width);65		white-space: nowrap;66	}67 68	.container :global(img),69	.container :global(video) {70		object-fit: contain;71		width: 100px;72		height: 100px;73	}74 75	.container.selected {76		border-color: var(--border-color-accent);77	}78	.border.table {79		border: 2px solid var(--border-color-primary);80	}81 82	.container.table {83		margin: 0 auto;84		border-radius: var(--radius-lg);85		overflow-x: auto;86		width: max-content;87		height: max-content;88		object-fit: cover;89		padding: var(--size-2);90	}91 92	.container.gallery {93		object-fit: cover;94	}95 96	div > :global(p) {97		font-size: var(--text-lg);98		white-space: normal;99	}100</style>101