gradio/frontend

1<script lang="ts">2	import { onDestroy } from "svelte";3	import { Download, Check } from "@gradio/icons";4	import { DownloadLink } from "@gradio/atoms";5	import { IconButton } from "@gradio/atoms";6 7	interface Props {8		value: string;9		language: string;10	}11 12	let { value, language }: Props = $props();13 14	let ext = $derived(get_ext_for_type(language));15 16	function get_ext_for_type(type: string): string {17		const exts: Record<string, string> = {18			py: "py",19			python: "py",20			md: "md",21			markdown: "md",22			json: "json",23			html: "html",24			css: "css",25			js: "js",26			javascript: "js",27			ts: "ts",28			typescript: "ts",29			yaml: "yaml",30			yml: "yml",31			dockerfile: "dockerfile",32			sh: "sh",33			shell: "sh",34			r: "r",35			c: "c",36			cpp: "cpp",37			latex: "tex"38		};39 40		return exts[type] || "txt";41	}42 43	let copied = $state(false);44	let timer: NodeJS.Timeout;45 46	function copy_feedback(): void {47		copied = true;48		if (timer) clearTimeout(timer);49		timer = setTimeout(() => {50			copied = false;51		}, 2000);52	}53 54	let download_value = $derived(URL.createObjectURL(new Blob([value])));55 56	onDestroy(() => {57		if (timer) clearTimeout(timer);58	});59</script>60 61<DownloadLink62	download="file.{ext}"63	href={download_value}64	onclick={copy_feedback}65>66	<IconButton Icon={copied ? Check : Download} />67</DownloadLink>68