gradio/frontend

1<script context="module" lang="ts">2	export { default as BaseCode } from "./shared/Code.svelte";3	export { default as BaseCopy } from "./shared/Copy.svelte";4	export { default as BaseDownload } from "./shared/Download.svelte";5	export { default as BaseWidget } from "./shared/Widgets.svelte";6	export { default as BaseExample } from "./Example.svelte";7</script>8 9<script lang="ts">10	import { Gradio } from "@gradio/utils";11	import type { CodeProps, CodeEvents } from "./types";12	import { StatusTracker } from "@gradio/statustracker";13 14	import Code from "./shared/Code.svelte";15	import Widget from "./shared/Widgets.svelte";16	import { Block, BlockLabel, Empty } from "@gradio/atoms";17	import { Code as CodeIcon } from "@gradio/icons";18 19	const props = $props();20	const gradio = new Gradio<CodeEvents, CodeProps>(props);21 22	let dark_mode = gradio.shared.theme === "dark";23 24	let label = $derived(gradio.shared.label || gradio.i18n("code.code"));25	let old_value = $state(gradio.props.value);26	let first_change = true;27 28	$effect(() => {29		if (first_change) {30			first_change = false;31			return;32		}33		if (old_value != gradio.props.value) {34			old_value = gradio.props.value;35			gradio.dispatch("change");36		}37	});38</script>39 40<Block41	height={gradio.props.max_lines && "fit-content"}42	variant={"solid"}43	padding={false}44	elem_id={gradio.shared.elem_id}45	elem_classes={gradio.shared.elem_classes}46	visible={gradio.shared.visible}47	scale={gradio.shared.scale}48	min_width={gradio.shared.min_width}49>50	<StatusTracker51		autoscroll={gradio.shared.autoscroll}52		i18n={gradio.i18n}53		{...gradio.shared.loading_status}54		on:clear_status={() =>55			gradio.dispatch("clear_status", gradio.shared.loading_status)}56	/>57 58	{#if gradio.shared.show_label}59		<BlockLabel60			Icon={CodeIcon}61			show_label={gradio.shared.show_label}62			{label}63			float={false}64		/>65	{/if}66 67	{#if !gradio.props.value && !gradio.shared.interactive}68		<Empty unpadded_box={true} size="large">69			<CodeIcon />70		</Empty>71	{:else}72		<Widget language={gradio.props.language} value={gradio.props.value} />73 74		<Code75			bind:value={gradio.props.value}76			language={gradio.props.language}77			lines={gradio.props.lines}78			max_lines={gradio.props.max_lines}79			{dark_mode}80			wrap_lines={gradio.props.wrap_lines}81			show_line_numbers={gradio.props.show_line_numbers}82			autocomplete={gradio.props.autocomplete}83			readonly={!gradio.shared.interactive}84			on:blur={() => gradio.dispatch("blur")}85			on:focus={() => gradio.dispatch("focus")}86			on:input={() => gradio.dispatch("input")}87		/>88	{/if}89</Block>90