File size: 1,329 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
<script lang="ts">
	import { createEventDispatcher } from "svelte";
	import Clear from "./img/clear.svelte";

	const dispatch = createEventDispatcher();

	export let root: string;
</script>

<div class="wrap prose">
	<h1>API Docs</h1>
	<p class="attention">
		No API Routes found for
		<code>
			{root}
		</code>
	</p>
	<p>
		To expose an API endpoint of your app in this page, set the <code>
			api_name
		</code>
		parameter of the event listener.
		<br />
		For more information, visit the
		<a href="https://gradio.app/sharing_your_app/#api-page" target="_blank">
			API Page guide
		</a>
		. To hide the API documentation button and this page, set
		<code>show_api=False</code>
		in the
		<code>Blocks.launch()</code>
		method.
	</p>
</div>

<button on:click={() => dispatch("close")}>
	<Clear />
</button>

<style>
	.wrap {
		padding: var(--size-6);
	}

	.attention {
		font-weight: var(--weight-bold);
		font-size: var(--text-lg);
	}

	.attention code {
		border: none;
		background: none;
		color: var(--color-accent);
		font-weight: var(--weight-bold);
	}

	button {
		position: absolute;
		top: var(--size-5);
		right: var(--size-6);
		width: var(--size-4);
		color: var(--body-text-color);
	}

	button:hover {
		color: var(--color-accent);
	}

	@media (--screen-md) {
		button {
			top: var(--size-6);
		}
	}
</style>