Hugging Face's logo

Spaces:
mindmime
/
gradio
Runtime error

App Files Community
gradio
File size: 2,355 Bytes 
a03b3ba
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
 
<script lang="ts">
	export let value: any;
	export let depth: number;
	export let collapsed = depth > 4;
</script>

<span class="spacer" class:mt-10={depth === 0} />
<div class="json-node">
	{#if value instanceof Array}
		{#if collapsed}
			<button
				on:click={() => {
					collapsed = false;
				}}
			>
				<span class="expand-array">expand {value.length} children</span>
			</button>
		{:else}
			[
			<div class="children">
				{#each value as node, i}
					<div>
						{i}: <svelte:self value={node} depth={depth + 1} />
						{#if i !== value.length - 1}
							,
						{/if}
					</div>
				{/each}
			</div>
			]
		{/if}
	{:else if value instanceof Object}
		{#if collapsed}
			<button
				on:click={() => {
					collapsed = false;
				}}
			>
				&#123;+{Object.keys(value).length} items&#125;
			</button>
		{:else}
			&#123;
			<div class="children">
				{#each Object.entries(value) as node, i}
					<div>
						{node[0]}: <svelte:self
							value={node[1]}
							depth={depth + 1}
							key={i}
						/><!--
		-->{#if i !== Object.keys(value).length - 1}<!--
		-->,
						{/if}
					</div>
				{/each}
			</div>
			&#125;
		{/if}
	{:else if value === null}
		<div class="json-item null">null</div>
	{:else if typeof value === "string"}
		<div class="json-item string">
			"{value}"
		</div>
	{:else if typeof value === "boolean"}
		<div class="json-item bool">
			{value.toLocaleString()}
		</div>
	{:else if typeof value === "number"}
		<div class="json-item number">
			{value}
		</div>
	{:else}
		<div class="json-item">
			{value}
		</div>
	{/if}
</div>

<style>
	.spacer {
		display: inline-block;
		width: 0;
		height: 0;
	}

	.json-node {
		display: inline;
		color: var(--body-text-color);
		line-height: var(--line-sm);
		font-family: var(--font-mono);
	}

	.expand-array {
		border: 1px solid var(--border-color-primary);
		border-radius: var(--radius-sm);
		background: var(--background-fill-secondary);
		padding: 0 var(--size-1);
		color: var(--body-text-color);
	}

	.expand-array:hover {
		background: var(--background-fill-primary);
	}

	.children {
		padding-left: var(--size-4);
	}

	.json-item {
		display: inline;
	}

	.null {
		color: var(--body-text-color-subdued);
	}

	.string {
		color: var(--color-green-500);
	}
	.number {
		color: var(--color-blue-500);
	}
	.bool {
		color: var(--color-red-500);
	}
</style>