import base_image from "./images/base.webp";
import mask_image from "./images/images_mask.png";
import audio from "./images/cantina.wav";
import video from "./images/world.mp4";
import duck from "./images/duck.glb";

const make_data = (url: string): Record<string, any> => {
	return {
		url: url,
		path: url,
		orig_name: url.split("/").pop(),
		size: Math.random() * 1000000
	};
};

export default [
	{
		name: "annotatedimage",
		props: {
			format: "webp",
			show_legend: true,
			show_label: true,
			container: true,
			min_width: 160,
			visible: true,
			elem_classes: [],
			show_fullscreen_button: true,
			name: "annotatedimage",
			_selectable: false,
			interactive: true,
			server: {},
			value: {
				image: make_data(base_image),
				annotations: [
					{
						label: "buildings",
						image: make_data(mask_image)
					}
				]
			},
			label: "Annotated Image"
		}
	},
	{
		name: "audio",
		props: {
			streamable: false,
			sources: ["upload", "microphone"],
			type: "numpy",
			show_label: true,
			container: true,
			min_width: 160,
			interactive: false,
			visible: true,
			streaming: false,
			elem_classes: [],
			format: "wav",
			autoplay: false,
			show_share_button: false,
			editable: true,
			label: "Static Audio",
			waveform_options: {
				waveform_color: null,
				waveform_progress_color: null,
				trim_region_color: null,
				show_recording_waveform: true,
				show_controls: false,
				skip_length: 5,
				sample_rate: 44100
			},
			loop: false,
			name: "audio",
			_selectable: false,
			server: {},
			value: make_data(audio)
		}
	},
	{
		name: "audio",
		props: {
			label: "Interactive Audio",
			streamable: false,
			sources: ["upload", "microphone"],
			type: "numpy",
			show_label: true,
			container: true,
			min_width: 160,
			interactive: true,
			visible: true,
			streaming: false,
			elem_classes: [],
			format: "wav",
			autoplay: false,
			show_share_button: false,
			editable: true,
			waveform_options: {
				waveform_color: null,
				waveform_progress_color: null,
				trim_region_color: null,
				show_recording_waveform: true,
				show_controls: false,
				skip_length: 5,
				sample_rate: 44100
			},
			loop: false,
			name: "audio",
			_selectable: false,
			server: {},
			value: null
		}
	},
	{
		name: "nativeplot",
		props: {
			value: {
				columns: ["time", "temperature", "humidity", "location"],
				data: [
					[1609459200000, 54, 61, "indoor"],
					[1609460936683, 65, 71, "outdoor"],
					[1609462673366, 54, 51, "indoor"],
					[1609464410050, 66, 61, "outdoor"],
					[1609466146733, 58, 63, "indoor"],
					[1609467883417, 60, 70, "outdoor"],
					[1609469620100, 51, 62, "indoor"],
					[1609471356783, 80, 64, "outdoor"],
					[1609473093467, 63, 65, "indoor"],
					[1609474830150, 63, 80, "outdoor"],
					[1609476566834, 55, 63, "indoor"],
					[1609478303517, 64, 72, "outdoor"],
					[1609480040201, 62, 61, "indoor"],
					[1609481776884, 70, 75, "outdoor"],
					[1609483513567, 65, 65, "indoor"],
					[1609485250251, 79, 70, "outdoor"],
					[1609486986934, 53, 64, "indoor"],
					[1609488723618, 76, 64, "outdoor"],
					[1609490460301, 57, 65, "indoor"],
					[1609492196984, 60, 63, "outdoor"],
					[1609493933668, 58, 64, "indoor"],
					[1609495670351, 73, 75, "outdoor"],
					[1609497407035, 60, 65, "indoor"],
					[1609499143718, 61, 65, "outdoor"],
					[1609500880402, 56, 59, "indoor"],
					[1609502617085, 77, 64, "outdoor"],
					[1609504353768, 61, 64, "indoor"],
					[1609506090452, 60, 65, "outdoor"],
					[1609507827135, 60, 62, "indoor"],
					[1609509563819, 80, 62, "outdoor"],
					[1609511300502, 61, 61, "indoor"],
					[1609513037185, 78, 63, "outdoor"],
					[1609514773869, 59, 55, "indoor"],
					[1609516510552, 77, 60, "outdoor"],
					[1609518247236, 56, 60, "indoor"],
					[1609519983919, 76, 77, "outdoor"],
					[1609521720603, 56, 59, "indoor"],
					[1609523457286, 71, 71, "outdoor"],
					[1609525193969, 61, 60, "indoor"],
					[1609526930653, 63, 74, "outdoor"],
					[1609528667336, 53, 62, "indoor"],
					[1609530404020, 77, 60, "outdoor"],
					[1609532140703, 58, 64, "indoor"],
					[1609533877386, 75, 64, "outdoor"],
					[1609535614070, 53, 56, "indoor"],
					[1609537350753, 71, 70, "outdoor"],
					[1609539087437, 52, 63, "indoor"],
					[1609540824120, 61, 76, "outdoor"],
					[1609542560804, 64, 62, "indoor"],
					[1609544297487, 73, 80, "outdoor"],
					[1609546034170, 63, 59, "indoor"],
					[1609547770854, 79, 73, "outdoor"],
					[1609549507537, 62, 60, "indoor"],
					[1609551244221, 71, 61, "outdoor"],
					[1609552980904, 59, 51, "indoor"],
					[1609554717587, 72, 62, "outdoor"],
					[1609556454271, 56, 61, "indoor"],
					[1609558190954, 68, 73, "outdoor"],
					[1609559927638, 63, 64, "indoor"],
					[1609561664321, 80, 74, "outdoor"],
					[1609563401005, 59, 62, "indoor"],
					[1609565137688, 71, 75, "outdoor"],
					[1609566874371, 61, 65, "indoor"],
					[1609568611055, 68, 79, "outdoor"],
					[1609570347738, 65, 57, "indoor"],
					[1609572084422, 67, 63, "outdoor"],
					[1609573821105, 58, 57, "indoor"],
					[1609575557788, 75, 71, "outdoor"],
					[1609577294472, 54, 61, "indoor"],
					[1609579031155, 67, 65, "outdoor"],
					[1609580767839, 60, 54, "indoor"],
					[1609582504522, 74, 71, "outdoor"],
					[1609584241206, 61, 61, "indoor"],
					[1609585977889, 73, 80, "outdoor"],
					[1609587714572, 55, 59, "indoor"],
					[1609589451256, 65, 76, "outdoor"],
					[1609591187939, 61, 62, "indoor"],
					[1609592924623, 61, 80, "outdoor"],
					[1609594661306, 53, 64, "indoor"],
					[1609596397989, 74, 60, "outdoor"],
					[1609598134673, 59, 58, "indoor"],
					[1609599871356, 64, 78, "outdoor"],
					[1609601608040, 50, 53, "indoor"],
					[1609603344723, 78, 79, "outdoor"],
					[1609605081407, 57, 55, "indoor"],
					[1609606818090, 71, 77, "outdoor"],
					[1609608554773, 57, 53, "indoor"],
					[1609610291457, 72, 71, "outdoor"],
					[1609612028140, 63, 62, "indoor"],
					[1609613764824, 61, 64, "outdoor"],
					[1609615501507, 50, 61, "indoor"],
					[1609617238190, 69, 73, "outdoor"],
					[1609618974874, 58, 63, "indoor"],
					[1609620711557, 72, 68, "outdoor"],
					[1609622448241, 52, 62, "indoor"],
					[1609624184924, 64, 67, "outdoor"],
					[1609625921608, 53, 54, "indoor"],
					[1609627658291, 67, 76, "outdoor"],
					[1609629394974, 55, 56, "indoor"],
					[1609631131658, 77, 64, "outdoor"],
					[1609632868341, 54, 65, "indoor"],
					[1609634605025, 79, 60, "outdoor"],
					[1609636341708, 53, 53, "indoor"],
					[1609638078391, 64, 76, "outdoor"],
					[1609639815075, 52, 58, "indoor"],
					[1609641551758, 72, 72, "outdoor"],
					[1609643288442, 62, 52, "indoor"],
					[1609645025125, 74, 74, "outdoor"],
					[1609646761809, 59, 53, "indoor"],
					[1609648498492, 66, 65, "outdoor"],
					[1609650235175, 50, 63, "indoor"],
					[1609651971859, 63, 70, "outdoor"],
					[1609653708542, 65, 55, "indoor"],
					[1609655445226, 63, 73, "outdoor"],
					[1609657181909, 54, 65, "indoor"],
					[1609658918592, 80, 79, "outdoor"],
					[1609660655276, 59, 51, "indoor"],
					[1609662391959, 69, 79, "outdoor"],
					[1609664128643, 58, 57, "indoor"],
					[1609665865326, 61, 63, "outdoor"],
					[1609667602010, 57, 60, "indoor"],
					[1609669338693, 69, 62, "outdoor"],
					[1609671075376, 59, 57, "indoor"],
					[1609672812060, 62, 64, "outdoor"],
					[1609674548743, 61, 60, "indoor"],
					[1609676285427, 73, 74, "outdoor"],
					[1609678022110, 50, 65, "indoor"],
					[1609679758793, 61, 68, "outdoor"],
					[1609681495477, 54, 64, "indoor"],
					[1609683232160, 62, 64, "outdoor"],
					[1609684968844, 52, 59, "indoor"],
					[1609686705527, 71, 78, "outdoor"],
					[1609688442211, 61, 51, "indoor"],
					[1609690178894, 65, 77, "outdoor"],
					[1609691915577, 53, 62, "indoor"],
					[1609693652261, 61, 79, "outdoor"],
					[1609695388944, 63, 53, "indoor"],
					[1609697125628, 67, 75, "outdoor"],
					[1609698862311, 63, 51, "indoor"],
					[1609700598994, 68, 79, "outdoor"],
					[1609702335678, 59, 59, "indoor"],
					[1609704072361, 73, 70, "outdoor"],
					[1609705809045, 60, 61, "indoor"],
					[1609707545728, 79, 80, "outdoor"],
					[1609709282412, 52, 57, "indoor"],
					[1609711019095, 72, 69, "outdoor"],
					[1609712755778, 59, 59, "indoor"],
					[1609714492462, 60, 70, "outdoor"],
					[1609716229145, 58, 52, "indoor"],
					[1609717965829, 80, 72, "outdoor"],
					[1609719702512, 55, 65, "indoor"],
					[1609721439195, 67, 64, "outdoor"],
					[1609723175879, 60, 50, "indoor"],
					[1609724912562, 70, 65, "outdoor"],
					[1609726649246, 58, 54, "indoor"],
					[1609728385929, 62, 63, "outdoor"],
					[1609730122613, 55, 50, "indoor"],
					[1609731859296, 65, 74, "outdoor"],
					[1609733595979, 55, 63, "indoor"],
					[1609735332663, 67, 69, "outdoor"],
					[1609737069346, 59, 65, "indoor"],
					[1609738806030, 71, 73, "outdoor"],
					[1609740542713, 59, 56, "indoor"],
					[1609742279396, 71, 64, "outdoor"],
					[1609744016080, 50, 51, "indoor"],
					[1609745752763, 60, 68, "outdoor"],
					[1609747489447, 56, 51, "indoor"],
					[1609749226130, 76, 74, "outdoor"],
					[1609750962814, 58, 64, "indoor"],
					[1609752699497, 80, 77, "outdoor"],
					[1609754436180, 64, 53, "indoor"],
					[1609756172864, 69, 71, "outdoor"],
					[1609757909547, 60, 50, "indoor"],
					[1609759646231, 78, 65, "outdoor"],
					[1609761382914, 65, 62, "indoor"],
					[1609763119597, 63, 69, "outdoor"],
					[1609764856281, 60, 55, "indoor"],
					[1609766592964, 72, 63, "outdoor"],
					[1609768329648, 50, 64, "indoor"],
					[1609770066331, 71, 67, "outdoor"],
					[1609771803015, 53, 56, "indoor"],
					[1609773539698, 79, 75, "outdoor"],
					[1609775276381, 54, 51, "indoor"],
					[1609777013065, 75, 76, "outdoor"],
					[1609778749748, 50, 56, "indoor"],
					[1609780486432, 78, 72, "outdoor"],
					[1609782223115, 59, 57, "indoor"],
					[1609783959798, 68, 78, "outdoor"],
					[1609785696482, 53, 53, "indoor"],
					[1609787433165, 68, 76, "outdoor"],
					[1609789169849, 65, 56, "indoor"],
					[1609790906532, 62, 80, "outdoor"],
					[1609792643216, 56, 51, "indoor"],
					[1609794379899, 72, 76, "outdoor"],
					[1609796116582, 64, 59, "indoor"],
					[1609797853266, 76, 74, "outdoor"],
					[1609799589949, 60, 60, "indoor"],
					[1609801326633, 71, 75, "outdoor"],
					[1609803063316, 53, 59, "indoor"],
					[1609804800000, 74, 78, "outdoor"]
				],
				datatypes: {
					time: "temporal",
					temperature: "quantitative",
					humidity: "quantitative",
					location: "nominal"
				},
				mark: "line"
			},
			x: "time",
			y: "temperature",
			x_label_angle: 0,
			y_label_angle: 0,
			show_label: false,
			container: true,
			min_width: 160,
			visible: true,
			elem_classes: [],
			name: "lineplot",
			_selectable: true,
			attached_events: ["select"],
			interactive: false,
			server: {}
		}
	},

	{
		name: "button",
		props: {
			value: "Static Button",
			variant: "secondary",
			visible: true,
			interactive: false,
			elem_classes: [],
			name: "button",
			_selectable: false,
			server: {}
		}
	},
	{
		name: "button",
		props: {
			value: "Interactive Button",
			variant: "secondary",
			visible: true,
			interactive: true,
			elem_classes: [],
			name: "button",
			_selectable: false,
			server: {}
		}
	},
	{
		name: "chatbot",
		props: {
			likeable: false,
			value: [
				[
					"This is **bold text**. This is *italic text*. This is a [link](https://gradio.app).",
					"I love you"
				],
				["thanks.", "I love you"]
			],
			type: "tuples",
			show_label: true,
			container: true,
			min_width: 160,
			visible: true,
			elem_classes: [],
			latex_delimiters: [{ left: "$$", right: "$$", display: true }],
			rtl: false,
			show_share_button: false,
			show_copy_button: false,
			avatar_images: [null, null],
			sanitize_html: true,
			render_markdown: true,
			bubble_full_width: true,
			line_breaks: true,
			show_copy_all_button: false,
			name: "chatbot",
			_selectable: false,
			interactive: true,
			server: {},
			label: "Interactive Chatbot"
		}
	},
	{
		name: "checkbox",
		props: {
			value: false,
			show_label: true,
			container: true,
			min_width: 160,
			interactive: false,
			visible: true,
			elem_classes: [],
			name: "checkbox",
			_selectable: false,
			server: {},
			label: "Static Checkbox"
		}
	},
	{
		name: "checkbox",
		props: {
			value: false,
			show_label: true,
			container: true,
			min_width: 160,
			interactive: true,
			visible: true,
			elem_classes: [],
			name: "checkbox",
			_selectable: false,
			server: {},
			label: "Interactive Checkbox"
		}
	},
	{
		name: "checkboxgroup",
		props: {
			choices: [
				["First Choice", "First Choice"],
				["Second Choice", "Second Choice"],
				["Third Choice", "Third Choice"]
			],
			value: ["First Choice"],
			type: "value",
			show_label: true,
			container: true,
			min_width: 160,
			interactive: false,
			visible: true,
			elem_classes: [],
			name: "checkboxgroup",
			_selectable: false,
			server: {},
			label: "Static Checkbox Group"
		}
	},
	{
		name: "checkboxgroup",
		props: {
			choices: [
				["First Choice", "First Choice"],
				["Second Choice", "Second Choice"],
				["Third Choice", "Third Choice"]
			],
			value: ["First Choice"],
			type: "value",
			show_label: true,
			container: true,
			min_width: 160,
			interactive: true,
			visible: true,
			elem_classes: [],
			name: "checkboxgroup",
			_selectable: false,
			server: {},
			label: "Interactive Checkbox Group"
		}
	},
	{
		name: "code",
		props: {
			lines: 5,
			interactive: false,
			show_label: true,
			container: true,
			min_width: 160,
			visible: true,
			elem_classes: [],
			name: "code",
			_selectable: false,
			server: {},
			value: `console.log("hello")`,
			label: "Static Code"
		}
	},
	{
		name: "code",
		props: {
			lines: 5,
			interactive: true,
			show_label: true,
			container: true,
			min_width: 160,
			visible: true,
			elem_classes: [],
			name: "code",
			_selectable: false,
			server: {},
			value: `console.log("hello")`,
			language: "js",
			label: "Interactive Code"
		}
	},
	{
		name: "colorpicker",
		props: {
			show_label: true,
			container: true,
			min_width: 160,
			interactive: false,
			visible: true,
			elem_classes: [],
			name: "colorpicker",
			_selectable: false,
			server: {},
			label: "Static Color Picker"
		}
	},
	{
		name: "colorpicker",
		props: {
			show_label: true,
			container: true,
			min_width: 160,
			interactive: true,
			visible: true,
			elem_classes: [],
			name: "colorpicker",
			_selectable: false,
			server: {},
			label: "Interactive Color Picker"
		}
	},
	{
		name: "dataframe",
		props: {
			value: {
				headers: ["A", "B", "C", "D", "E"],
				data: [
					[14, 5, 20, 14, 23],
					[4, 2, 20, 3, 45],
					[5, 54, 7, 6, 64],
					[4, 3, 3, 2, 32],
					[1, 2, 8, 6, 23]
				],
				metadata: {
					display_value: [
						["14", "5", "20", "14", "23"],
						["4", "2", "20", "3", "45"],
						["5", "54", "7", "6", "64"],
						["4", "3", "3", "2", "32"],
						["1", "2", "8", "6", "23"]
					],
					styling: [
						[
							"background-color: lightgreen",
							"",
							"background-color: lightgreen",
							"background-color: lightgreen",
							""
						],
						["", "", "background-color: lightgreen", "", ""],
						[
							"",
							"background-color: lightgreen",
							"",
							"",
							"background-color: lightgreen"
						],
						["", "", "", "", ""],
						["", "", "", "", ""]
					]
				}
			},
			headers: ["1", "2", "3"],
			row_count: [1, "dynamic"],
			col_count: [3, "dynamic"],
			datatype: "str",
			type: "pandas",
			latex_delimiters: [{ left: "$$", right: "$$", display: true }],
			show_label: true,
			min_width: 160,
			interactive: false,
			visible: true,
			elem_classes: [],
			wrap: false,
			line_breaks: true,
			column_widths: [],
			name: "dataframe",
			_selectable: false,
			server: {},
			label: "Static DataFrame"
		}
	},
	{
		name: "dataframe",
		props: {
			value: {
				headers: ["A", "B", "C", "D", "E"],
				data: [
					[14, 5, 20, 14, 23],
					[4, 2, 20, 3, 45],
					[5, 54, 7, 6, 64],
					[4, 3, 3, 2, 32],
					[1, 2, 8, 6, 23]
				],
				metadata: {
					display_value: [
						["14", "5", "20", "14", "23"],
						["4", "2", "20", "3", "45"],
						["5", "54", "7", "6", "64"],
						["4", "3", "3", "2", "32"],
						["1", "2", "8", "6", "23"]
					],
					styling: [
						[
							"background-color: lightgreen",
							"",
							"background-color: lightgreen",
							"background-color: lightgreen",
							""
						],
						["", "", "background-color: lightgreen", "", ""],
						[
							"",
							"background-color: lightgreen",
							"",
							"",
							"background-color: lightgreen"
						],
						["", "", "", "", ""],
						["", "", "", "", ""]
					]
				}
			},
			headers: ["1", "2", "3"],
			row_count: [1, "dynamic"],
			col_count: [3, "dynamic"],
			datatype: "str",
			type: "pandas",
			latex_delimiters: [{ left: "$$", right: "$$", display: true }],
			show_label: true,
			min_width: 160,
			interactive: true,
			visible: true,
			elem_classes: [],
			wrap: false,
			line_breaks: true,
			column_widths: [],
			name: "dataframe",
			_selectable: false,
			server: {},
			label: "Interactive DataFrame"
		}
	},
	{
		name: "dataset",
		props: {
			component_props: [],
			samples: [[]],
			headers: [],
			type: "values",
			samples_per_page: 10,
			visible: true,
			elem_classes: [],
			container: true,
			min_width: 160,
			name: "dataset",
			_selectable: false,
			components: [],
			component_ids: [],
			interactive: true,
			server: {},
			value: null,
			label: "Interactive Dataset"
		}
	},
	{
		name: "datetime",
		props: {
			include_time: true,
			type: "timestamp",
			show_label: true,
			min_width: 160,
			visible: true,
			elem_classes: [],
			name: "datetime",
			_selectable: false,
			interactive: true,
			server: {},
			value: "",
			label: "Interactive DateTime"
		}
	},
	{
		name: "downloadbutton",
		props: {
			label: "Static Download Button",
			variant: "secondary",
			visible: true,
			interactive: false,
			elem_classes: [],
			name: "downloadbutton",
			_selectable: false,
			server: {}
		}
	},
	{
		name: "downloadbutton",
		props: {
			variant: "secondary",
			visible: true,
			interactive: true,
			elem_classes: [],
			name: "downloadbutton",
			_selectable: false,
			server: {},
			label: "Interactive Download Button"
		}
	},
	{
		name: "dropdown",
		props: {
			choices: [
				["First Choice", "First Choice"],
				["Second Choice", "Second Choice"],
				["Third Choice", "Third Choice"]
			],
			value: "First Choice",
			type: "value",
			allow_custom_value: false,
			filterable: true,
			show_label: true,
			container: true,
			min_width: 160,
			interactive: false,
			visible: true,
			elem_classes: [],
			name: "dropdown",
			_selectable: false,
			server: {},
			label: "Static Dropdown"
		}
	},
	{
		name: "dropdown",
		props: {
			choices: [
				["First Choice", "First Choice"],
				["Second Choice", "Second Choice"],
				["Third Choice", "Third Choice"]
			],
			value: "First Choice",
			type: "value",
			allow_custom_value: false,
			filterable: true,
			show_label: true,
			container: true,
			min_width: 160,
			interactive: true,
			visible: true,
			elem_classes: [],
			name: "dropdown",
			_selectable: false,
			server: {},
			label: "Interactive Dropdown"
		}
	},

	{
		name: "file",
		props: {
			file_count: "single",
			type: "filepath",
			show_label: true,
			container: true,
			min_width: 160,
			visible: true,
			elem_classes: [],
			name: "file",
			_selectable: false,
			interactive: false,
			server: {},
			label: "Static File",
			value: [make_data(base_image), make_data(mask_image)]
		}
	},
	{
		name: "file",
		props: {
			file_count: "single",
			type: "filepath",
			show_label: true,
			container: true,
			min_width: 160,
			interactive: true,
			visible: true,
			elem_classes: [],
			name: "file",
			_selectable: false,
			server: {},
			label: "Interactive File"
		}
	},
	{
		name: "fileexplorer",
		props: {
			glob: "**/*",
			file_count: "multiple",
			root_dir: "/Users/peterallen/Projects/gradio/demo/_all_components",
			show_label: true,
			container: true,
			min_width: 160,
			interactive: false,
			visible: true,
			elem_classes: [],
			name: "fileexplorer",
			_selectable: false,
			server_fns: ["ls"],
			server: {},
			label: "Static File Explorer"
		}
	},
	{
		name: "fileexplorer",
		props: {
			glob: "**/*",
			file_count: "multiple",
			root_dir: "/Users/peterallen/Projects/gradio/demo/_all_components",
			show_label: true,
			container: true,
			min_width: 160,
			interactive: true,
			visible: true,
			elem_classes: [],
			name: "fileexplorer",
			_selectable: false,
			server_fns: ["ls"],
			server: {},
			label: "Interactive File Explorer"
		}
	},
	{
		name: "gallery",
		props: {
			value: [
				{ image: make_data(base_image) },
				{ image: make_data(mask_image) },
				{ image: make_data(base_image) },
				{ image: make_data(mask_image) },
				{ image: make_data(base_image) },
				{ image: make_data(mask_image) }
			],
			format: "webp",
			show_label: true,
			container: true,
			min_width: 160,
			visible: true,
			elem_classes: [],
			columns: 2,
			allow_preview: true,
			show_share_button: false,
			show_download_button: true,
			interactive: false,
			type: "filepath",
			show_fullscreen_button: true,
			name: "gallery",
			_selectable: false,
			server: {},
			label: "Static Gallery"
		}
	},
	{
		name: "gallery",
		props: {
			value: [
				{ image: make_data(base_image) },
				{ image: make_data(mask_image) },
				{ image: make_data(base_image) },
				{ image: make_data(mask_image) },
				{ image: make_data(base_image) },
				{ image: make_data(mask_image) }
			],
			format: "webp",
			show_label: true,
			container: true,
			min_width: 160,
			visible: true,
			elem_classes: [],
			columns: 2,
			allow_preview: true,
			show_share_button: false,
			show_download_button: true,
			interactive: true,
			type: "filepath",
			show_fullscreen_button: true,
			name: "gallery",
			_selectable: false,
			server: {},
			label: "Interactive Gallery"
		}
	},
	{
		name: "highlightedtext",
		props: {
			show_legend: true,
			show_inline_category: true,
			combine_adjacent: true,
			adjacent_separator: "",
			show_label: true,
			container: true,
			min_width: 160,
			visible: true,
			elem_classes: [],
			interactive: false,
			name: "highlightedtext",
			_selectable: false,
			server: {},
			label: "Static Highlighted Text",
			value: [
				{
					token: "The ",
					class_or_confidence: null
				},
				{
					token: "fast",
					class_or_confidence: "+"
				},
				{
					token: "quick",
					class_or_confidence: "-"
				},
				{
					token: " brown fox jump",
					class_or_confidence: null
				},
				{
					token: "s",
					class_or_confidence: "+"
				},
				{
					token: "ed",
					class_or_confidence: "-"
				},
				{
					token: " over",
					class_or_confidence: null
				},
				{
					token: " the",
					class_or_confidence: "-"
				},
				{
					token: " lazy dogs.",
					class_or_confidence: null
				}
			]
		}
	},
	{
		name: "highlightedtext",
		props: {
			show_legend: true,
			show_inline_category: true,
			combine_adjacent: true,
			adjacent_separator: "",
			show_label: true,
			container: true,
			min_width: 160,
			visible: true,
			elem_classes: [],
			interactive: true,
			name: "highlightedtext",
			_selectable: false,
			server: {},
			label: "Interactive Highlighted Text",
			value: [
				{
					token: "The ",
					class_or_confidence: null
				},
				{
					token: "fast",
					class_or_confidence: "+"
				},
				{
					token: "quick",
					class_or_confidence: "-"
				},
				{
					token: " brown fox jump",
					class_or_confidence: null
				},
				{
					token: "s",
					class_or_confidence: "+"
				},
				{
					token: "ed",
					class_or_confidence: "-"
				},
				{
					token: " over",
					class_or_confidence: null
				},
				{
					token: " the",
					class_or_confidence: "-"
				},
				{
					token: " lazy dogs.",
					class_or_confidence: null
				}
			]
		}
	},
	{
		name: "html",
		props: {
			show_label: false,
			visible: true,
			elem_classes: [],
			name: "html",
			_selectable: false,
			interactive: true,
			server: {},
			value: "<h1>hello</h1>",
			label: "Interactive HTML"
		}
	},
	{
		name: "image",
		props: {
			streamable: false,
			format: "webp",
			image_mode: "RGB",
			sources: ["upload", "webcam", "clipboard"],
			type: "numpy",
			show_label: true,
			show_download_button: true,
			container: true,
			min_width: 160,
			interactive: false,
			visible: true,
			streaming: false,
			elem_classes: [],
			mirror_webcam: true,
			show_share_button: false,
			show_fullscreen_button: true,
			name: "image",
			_selectable: false,
			server: {},
			value: make_data(base_image),
			label: "Static Image"
		}
	},
	{
		name: "image",
		props: {
			streamable: false,
			format: "webp",
			image_mode: "RGB",
			sources: ["upload", "webcam", "clipboard"],
			type: "numpy",
			show_label: true,
			show_download_button: true,
			container: true,
			min_width: 160,
			interactive: true,
			visible: true,
			streaming: false,
			elem_classes: [],
			mirror_webcam: true,
			show_share_button: false,
			show_fullscreen_button: true,
			name: "image",
			_selectable: false,
			server: {},
			value: null,
			label: "Interactive Image"
		}
	},
	{
		name: "imageeditor",
		props: {
			image_mode: "RGBA",
			sources: ["upload", "webcam", "clipboard"],
			type: "numpy",
			show_label: true,
			show_download_button: true,
			container: true,
			min_width: 160,
			interactive: true,
			visible: true,
			elem_classes: [],
			mirror_webcam: true,
			show_share_button: false,
			_selectable: false,
			transforms: ["crop"],
			eraser: { default_size: "auto" },
			brush: {
				default_size: "auto",
				colors: [
					"rgb(204, 50, 50)",
					"rgb(173, 204, 50)",
					"rgb(50, 204, 112)",
					"rgb(50, 112, 204)",
					"rgb(173, 50, 204)"
				],
				default_color: "auto",
				color_mode: "defaults"
			},
			format: "webp",
			layers: true,
			show_fullscreen_button: true,
			name: "imageeditor",
			server_fns: ["accept_blobs"],
			server: {},
			value: { background: null, layers: [], composite: null },
			label: "Interactive Image Editor"
		}
	},
	{
		name: "json",
		props: {
			show_label: true,
			container: true,
			min_width: 160,
			visible: true,
			elem_classes: [],
			open: false,
			show_indices: false,
			name: "json",
			_selectable: false,
			interactive: true,
			server: {},
			value: {
				a: 1,
				b: 2,
				c: {
					a: 1,
					b: 2,
					c: {
						a: 1,
						b: 2
					}
				}
			},
			label: "Interactive JSON"
		}
	},
	{
		name: "label",
		props: {
			value: {
				label: "First Label",
				confidences: [
					{
						label: "First Label",
						confidence: 0.7
					},
					{
						label: "Second Label",
						confidence: 0.2
					},
					{
						label: "Third Label",
						confidence: 0.1
					}
				]
			},
			show_label: true,
			container: true,
			min_width: 160,
			visible: true,
			elem_classes: [],
			name: "label",
			_selectable: false,
			interactive: false,
			server: {},
			label: "Static Label"
		}
	},
	{
		name: "markdown",
		props: {
			show_label: true,
			rtl: false,
			latex_delimiters: [{ left: "$$", right: "$$", display: true }],
			visible: true,
			elem_classes: [],
			sanitize_html: true,
			line_breaks: false,
			header_links: false,
			show_copy_button: false,
			name: "markdown",
			_selectable: false,
			interactive: true,
			server: {},
			value:
				"This is **bold text**. This is *italic text*. This is a [link](https://gradio.app).",
			label: "Interactive Markdown"
		}
	},
	{
		name: "model3d",
		props: {
			clear_color: [0, 0, 0, 0],
			camera_position: [null, null, null],
			zoom_speed: 1,
			pan_speed: 1,
			show_label: true,
			container: true,
			min_width: 160,
			interactive: false,
			visible: true,
			elem_classes: [],
			name: "model3d",
			_selectable: false,
			server: {},
			value: make_data(duck),
			label: "Static 3D Model"
		}
	},
	{
		name: "model3d",
		props: {
			clear_color: [0, 0, 0, 0],
			camera_position: [null, null, null],
			zoom_speed: 1,
			pan_speed: 1,
			show_label: true,
			container: true,
			min_width: 160,
			interactive: true,
			visible: true,
			elem_classes: [],
			name: "model3d",
			_selectable: false,
			server: {},
			value: null,
			label: "Interactive 3D Model"
		}
	},
	{
		name: "multimodaltextbox",
		props: {
			value: { text: "", files: [] },
			file_count: "single",
			lines: 1,
			max_lines: 20,
			show_label: true,
			container: true,
			min_width: 160,
			interactive: false,
			visible: true,
			autofocus: false,
			autoscroll: true,
			elem_classes: [],
			rtl: false,
			submit_btn: true,
			name: "multimodaltextbox",
			_selectable: false,
			server: {},
			label: "Static Multimodal Textbox"
		}
	},
	{
		name: "multimodaltextbox",
		props: {
			value: { text: "", files: [] },
			file_count: "single",
			lines: 1,
			max_lines: 20,
			show_label: true,
			container: true,
			min_width: 160,
			interactive: true,
			visible: true,
			autofocus: false,
			autoscroll: true,
			elem_classes: [],
			rtl: false,
			submit_btn: true,
			name: "multimodaltextbox",
			_selectable: false,
			server: {},
			label: "Interactive Multimodal Textbox"
		}
	},
	{
		name: "number",
		props: {
			show_label: true,
			container: true,
			min_width: 160,
			visible: true,
			elem_classes: [],
			step: 1,
			name: "number",
			_selectable: false,
			interactive: false,
			server: {},
			value: 0,
			label: "Static Number"
		}
	},
	{
		name: "number",
		props: {
			show_label: true,
			container: true,
			min_width: 160,
			interactive: true,
			visible: true,
			elem_classes: [],
			step: 1,
			name: "number",
			_selectable: false,
			server: {},
			value: 0,
			label: "Interactive Number"
		}
	},
	{
		name: "paramviewer",
		props: {
			language: "python",
			header: "Parameters",
			name: "paramviewer",
			_selectable: false,
			interactive: true,
			server: {},
			value: {
				number: {
					type: "int | float",
					description: "The number to round",
					default: null
				},
				ndigits: {
					type: "int",
					description: "The number of digits to round to",
					default: "0"
				}
			},
			label: "Interactive Parameter Viewer"
		}
	},
	{
		name: "plot",
		props: {
			format: "webp",
			show_label: true,
			container: true,
			min_width: 160,
			visible: true,
			elem_classes: [],
			name: "plot",
			_selectable: false,
			bokeh_version: "3.4.1",
			interactive: true,
			server: {},
			value: null,
			label: "Interactive Plot"
		}
	},
	{
		name: "radio",
		props: {
			choices: [
				["First Choice", "First Choice"],
				["Second Choice", "Second Choice"],
				["Third Choice", "Third Choice"]
			],
			value: "First Choice",
			type: "value",
			show_label: true,
			container: true,
			min_width: 160,
			interactive: false,
			visible: true,
			elem_classes: [],
			name: "radio",
			_selectable: false,
			server: {},
			label: "Static Radio"
		}
	},
	{
		name: "radio",
		props: {
			choices: [
				["First Choice", "First Choice"],
				["Second Choice", "Second Choice"],
				["Third Choice", "Third Choice"]
			],
			value: "First Choice",
			type: "value",
			show_label: true,
			container: true,
			min_width: 160,
			interactive: true,
			visible: true,
			elem_classes: [],
			name: "radio",
			_selectable: false,
			server: {},
			label: "Interactive Radio"
		}
	},
	{
		name: "slider",
		props: {
			minimum: 25,
			maximum: 100,
			value: 46,
			step: 1,
			show_label: true,
			container: true,
			min_width: 160,
			interactive: false,
			visible: true,
			elem_classes: [],
			name: "slider",
			_selectable: false,
			server: {},
			label: "Static Slider"
		}
	},
	{
		name: "slider",
		props: {
			minimum: 25,
			maximum: 100,
			value: 46,
			step: 1,
			show_label: true,
			container: true,
			min_width: 160,
			interactive: true,
			visible: true,
			elem_classes: [],
			name: "slider",
			_selectable: false,
			server: {},
			label: "Interactive Slider"
		}
	},
	{
		name: "textbox",
		props: {
			lines: 1,
			max_lines: 20,
			show_label: true,
			container: true,
			min_width: 160,
			interactive: false,
			visible: true,
			autofocus: false,
			autoscroll: true,
			elem_classes: [],
			type: "text",
			rtl: false,
			show_copy_button: false,
			name: "textbox",
			_selectable: false,
			server: {},
			value: "Hello there\n\nHello again",
			label: "Static Textbox"
		}
	},
	{
		name: "textbox",
		props: {
			lines: 1,
			max_lines: 20,
			show_label: true,
			container: true,
			min_width: 160,
			interactive: true,
			visible: true,
			autofocus: false,
			autoscroll: true,
			elem_classes: [],
			type: "text",
			rtl: false,
			show_copy_button: false,
			name: "textbox",
			_selectable: false,
			server: {},
			value: "Hello there\n\nHello again",
			label: "Interactive Textbox"
		}
	},
	{
		name: "timer",
		props: {
			value: 1,
			active: true,
			name: "timer",
			_selectable: false,
			interactive: false,
			server: {},
			label: "Static Timer"
		}
	},
	{
		name: "uploadbutton",
		props: {
			variant: "secondary",
			visible: true,
			interactive: true,
			elem_classes: [],
			type: "filepath",
			file_count: "single",
			name: "uploadbutton",
			_selectable: false,
			server: {},
			label: "Interactive Upload Button"
		}
	},
	{
		name: "uploadbutton",
		props: {
			variant: "secondary",
			visible: true,
			interactive: true,
			elem_classes: [],
			type: "filepath",
			file_count: "single",
			name: "uploadbutton",
			_selectable: false,
			server: {},
			label: "Interactive Upload Button"
		}
	},
	{
		name: "video",
		props: {
			sources: ["upload", "webcam"],
			show_label: true,
			container: true,
			min_width: 160,
			interactive: false,
			visible: true,
			elem_classes: [],
			mirror_webcam: true,
			include_audio: true,
			autoplay: false,
			show_share_button: false,
			loop: false,
			name: "video",
			_selectable: false,
			server: {},
			value: { video: make_data(video) },
			label: "Static Video"
		}
	},
	{
		name: "video",
		props: {
			sources: ["upload", "webcam"],
			show_label: true,
			container: true,
			min_width: 160,
			interactive: true,
			visible: true,
			elem_classes: [],
			mirror_webcam: true,
			include_audio: true,
			autoplay: false,
			show_share_button: false,
			loop: false,
			name: "video",
			_selectable: false,
			server: {},
			value: null,
			label: "Interactive Video"
		}
	},
	{
		name: "form",
		props: {
			scale: 0,
			min_width: 0,
			name: "form",
			interactive: true,
			server: {},
			visible: true,
			label: "Interactive Form"
		}
	},

	{ name: "column", props: { interactive: false, scale: null, server: {} } },
	{ name: "row", props: { interactive: false, scale: null, server: {} } }
];