gradio

1
<script lang="ts">
2
	import space_logo from "./images/spaces.svg";
3
	import { _ } from "svelte-i18n";
4
	export let wrapper: HTMLDivElement;
5
	export let version: string;
6
	export let initial_height: string;
7
	export let is_embed: boolean;
8

9
	export let space: string | null;
10
	export let display: boolean;
11
	export let info: boolean;
12
	export let loaded: boolean;
13
</script>
14

15
<div
16
	bind:this={wrapper}
17
	class:app={!display && !is_embed}
18
	class:embed-container={display}
19
	class:with-info={info}
20
	class="gradio-container gradio-container-{version}"
21
	style:min-height={loaded ? "initial" : initial_height}
22
	style:flex-grow={!display ? "1" : "auto"}
23
	data-iframe-height
24
>
25
	<div class="main">
26
		<slot />
27
	</div>
28
	{#if display && space && info}
29
		<div class="info">
30
			<span>
31
				<a href="https://huggingface.co/spaces/{space}" class="title">{space}</a
32
				>
33
			</span>
34
			<span>
35
				{$_("common.built_with")}
36
				<a class="gradio" href="https://gradio.app">Gradio</a>.
37
			</span>
38
			<span>
39
				{$_("common.hosted_on")}
40
				<a class="hf" href="https://huggingface.co/spaces"
41
					><span class="space-logo">
42
						<img src={space_logo} alt="Hugging Face Space" />
43
					</span> Spaces</a
44
				>
45
			</span>
46
		</div>
47
	{/if}
48
</div>
49

50
<style>
51
	.gradio-container {
52
		display: flex;
53
		position: relative;
54
		flex-direction: column;
55
		padding: 0;
56
		min-height: 1px;
57
		overflow: hidden;
58
		color: var(--button-secondary-text-color);
59
	}
60

61
	.embed-container {
62
		margin: var(--size-4) 0px;
63
		border: 1px solid var(--button-secondary-border-color);
64
		border-radius: var(--embed-radius);
65
	}
66

67
	.with-info {
68
		padding-bottom: var(--size-7);
69
	}
70

71
	.embed-container > .main {
72
		padding: var(--size-4);
73
	}
74

75
	.app > .main {
76
		display: flex;
77
		flex-grow: 1;
78
		flex-direction: column;
79
	}
80

81
	.app {
82
		position: relative;
83
		margin: auto;
84
		padding: var(--size-4) var(--size-8);
85
		width: 100%;
86
		height: 100%;
87
	}
88

89
	@media (--screen-sm) {
90
		.app {
91
			max-width: 640px;
92
		}
93
	}
94
	@media (--screen-md) {
95
		.app {
96
			max-width: 768px;
97
		}
98
	}
99
	@media (--screen-lg) {
100
		.app {
101
			max-width: 1024px;
102
		}
103
	}
104
	@media (--screen-xl) {
105
		.app {
106
			max-width: 1280px;
107
		}
108
	}
109
	@media (--screen-xxl) {
110
		.app {
111
			max-width: 1536px;
112
		}
113
	}
114

115
	.info {
116
		display: flex;
117
		position: absolute;
118
		bottom: 0;
119
		justify-content: flex-start;
120
		border-top: 1px solid var(--button-secondary-border-color);
121
		padding: var(--size-1) var(--size-5);
122
		width: 100%;
123
		color: var(--body-text-color-subdued);
124
		font-size: var(--text-md);
125
		white-space: nowrap;
126
	}
127

128
	.info > span {
129
		word-wrap: break-word;
130
		-break: keep-all;
131
		display: block;
132
		word-break: keep-all;
133
	}
134

135
	.info > span:nth-child(1) {
136
		margin-right: 4px;
137
		min-width: 0px;
138
		max-width: max-content;
139
		overflow: hidden;
140
		color: var(--body-text-color);
141
		text-overflow: ellipsis;
142
		white-space: nowrap;
143
	}
144

145
	.info > span:nth-child(2) {
146
		margin-right: 3px;
147
	}
148

149
	.info > span:nth-child(2),
150
	.info > span:nth-child(3) {
151
		width: max-content;
152
	}
153

154
	.info > span:nth-child(3) {
155
		align-self: flex-end;
156
		justify-self: flex-end;
157
		margin-left: auto;
158
		text-align: right;
159
	}
160

161
	.info > span:nth-child(1) {
162
		flex-shrink: 9;
163
	}
164

165
	.hidden-title {
166
		position: absolute;
167
		left: var(--size-5);
168
		opacity: 0;
169
		background: var(--button-secondary-background-fill);
170
		padding-right: 4px;
171
	}
172

173
	.info a {
174
		color: var(--body-text-color);
175
	}
176

177
	.title {
178
		font-size: var(--text-sm);
179
		font-family: var(--font-mono);
180
	}
181

182
	.hf {
183
		margin-left: 5px;
184
	}
185

186
	.space-logo img {
187
		display: inline-block;
188
		margin-bottom: 4px;
189
		height: 12px;
190
	}
191

192
	a:hover {
193
		text-decoration: underline;
194
	}
195
</style>
196