gradio

1
<script lang="ts">
2
	import type { ComponentMeta, Dependency } from "../types";
3
	import { BaseButton } from "@gradio/button";
4
	import { Block } from "@gradio/atoms";
5

6
	export let dependency: Dependency;
7
	export let dependency_failures: boolean[][];
8
	export let dependency_index: number;
9
	export let instance_map: {
10
		[id: number]: ComponentMeta;
11
	};
12
	export let run: (id: number) => Promise<void>;
13
	export let dependency_inputs: string[][];
14

15
	function format_label(label: unknown): string {
16
		return label ? "'" + label + "'" : "the";
17
	}
18
</script>
19

20
<h4>
21
	<div class="toggle-icon">
22
		<div class="toggle-dot" />
23
	</div>
24
	Input Payload
25
</h4>
26
<Block>
27
	<div class="payload-details">
28
		&#123;
29
		<div class="first-level">"data": [</div>
30
		{#each dependency.inputs as component_id, component_index}
31
			<div class="second-level">
32
				<input
33
					class=""
34
					type="text"
35
					bind:value={dependency_inputs[dependency_index][component_index]}
36
				/>
37
				{#if dependency_failures[dependency_index][component_index]}
38
					<span class="error">ERROR</span>
39
				{/if}
40

41
				<span class="type">
42
					: {instance_map[component_id].documentation?.type?.input_payload ||
43
						instance_map[component_id].documentation?.type?.payload},
44
				</span>
45
				<span class="desc">
46
					// represents {instance_map[component_id].documentation?.description
47
						?.input_payload ||
48
						instance_map[component_id].documentation?.description?.payload} of
49
					{format_label(instance_map[component_id].props.label)}
50
					<span class="name">
51
						{instance_map[component_id].props.name}
52
					</span>
53
					component
54
				</span>
55
			</div>
56
		{/each}
57
		<div class="first-level">]</div>
58
		&#125;
59
	</div>
60
</Block>
61

62
<span class="space" />
63
<BaseButton variant="primary" on:click={run.bind(null, dependency_index)}>
64
	Try It Out
65
</BaseButton>
66

67
<style>
68
	.payload-details {
69
		font-family: var(--font-mono);
70
	}
71

72
	.space {
73
		display: flex;
74
		flex-basis: 1;
75
		margin-top: var(--size-4);
76
	}
77

78
	h4 {
79
		display: flex;
80
		align-items: center;
81
		margin-top: var(--size-6);
82
		margin-bottom: var(--size-3);
83
		color: var(--body-text-color);
84
		font-weight: var(--weight-bold);
85
	}
86

87
	.toggle-icon {
88
		display: flex;
89
		align-items: center;
90
		margin-right: var(--size-2);
91
		border-radius: var(--radius-full);
92
		background: var(--color-grey-300);
93
		width: 12px;
94
		height: 4px;
95
	}
96

97
	.toggle-dot {
98
		border-radius: var(--radius-full);
99
		background: var(--color-grey-700);
100
		width: 6px;
101
		height: 6px;
102
	}
103

104
	:global(.dark) .toggle-icon {
105
		background: var(--color-grey-500);
106
	}
107

108
	:global(.dark) .toggle-dot {
109
		background: var(--color-grey-400);
110
	}
111

112
	input[type="text"] {
113
		--ring-color: transparent;
114
		margin: var(--size-1) 0;
115
		outline: none !important;
116
		box-shadow: var(--input-shadow);
117
		border: var(--input-border-width) solid var(--input-border-color);
118
		border-radius: var(--radius-lg);
119
		background: var(--input-background-fill);
120
		padding: var(--size-1-5);
121
		color: var(--body-text-color);
122
		font-weight: var(--input-text-weight);
123
		font-size: var(--input-text-size);
124
		line-height: var(--line-sm);
125
	}
126

127
	input:focus {
128
		box-shadow: var(--input-shadow-focus);
129
		border-color: var(--input-border-color-focus);
130
	}
131

132
	.error {
133
		color: var(--error-text-color);
134
	}
135

136
	.type {
137
		color: var(--block-label-text-color);
138
	}
139

140
	.desc {
141
		color: var(--body-text-color-subdued);
142
	}
143

144
	.name {
145
		text-transform: capitalize;
146
	}
147

148
	.first-level {
149
		margin-left: 1rem;
150
	}
151

152
	.second-level {
153
		margin-left: 2rem;
154
	}
155
</style>
156