File size: 2,694 Bytes
f437e64
767afa7
c8c5d70
64d3841
5d07536
64d3841
f437e64
2606dde
5d07536
2606dde
767afa7
 
f437e64
 
82fcab7
 
5d07536
82fcab7
 
5d07536
 
c8c5d70
 
 
 
 
82fcab7
 
 
 
fd5e4ef
82fcab7
 
 
5d07536
 
 
 
 
 
64d3841
 
767afa7
64d3841
5d07536
64d3841
 
 
 
5d07536
64d3841
5d07536
 
 
 
64d3841
 
 
 
 
 
 
 
 
5d07536
64d3841
 
 
 
c8c5d70
82fcab7
 
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
<script lang="ts">
	import { browser } from "$app/environment";
	import { base } from "$app/paths";
	import { page } from "$app/stores";
	import { PUBLIC_APP_DATA_SHARING, PUBLIC_APP_NAME, PUBLIC_VERSION } from "$env/static/public";
	import LogoHuggingFaceBorderless from "$lib/components/icons/LogoHuggingFaceBorderless.svelte";
	import Modal from "$lib/components/Modal.svelte";
	import type { LayoutData } from "../../routes/$types";
	import Logo from "./icons/Logo.svelte";
	export let settings: LayoutData["settings"];

	const isIframe = browser && window.self !== window.parent;
</script>

<Modal>
	<div
		class="flex w-full flex-col items-center gap-6 bg-gradient-to-t from-primary-500/40 via-primary-500/10 to-primary-500/0 px-4 pb-10 pt-9 text-center "
	>
		<h2 class="flex items-center text-2xl font-semibold text-gray-800">
			<Logo classNames="mr-1" />
			{PUBLIC_APP_NAME}
			<div
				class="ml-3 flex h-6 items-center rounded-lg border border-gray-100 bg-gray-50 px-2 text-base text-gray-400"
			>
				v{PUBLIC_VERSION}
			</div>
		</h2>
		<p class="px-4 text-lg font-semibold leading-snug text-gray-800 sm:px-12">
			This application is for demonstration purposes only.
		</p>
		<p class="text-base text-gray-800">
			AI is an area of active research with known problems such as biased generation and
			misinformation. Do not use this application for high-stakes decisions or advice.
		</p>
		{#if PUBLIC_APP_DATA_SHARING}
			<p class="px-2 text-sm text-gray-500">
				Your conversations will be shared with model authors unless you disable it from your
				settings.
			</p>
		{/if}
		<form
			action="{base}/{$page.data.requiresLogin ? 'login' : 'settings'}"
			target={isIframe ? "_blank" : ""}
			method="POST"
			class="flex w-full flex-col items-center gap-2"
		>
			{#if $page.data.requiresLogin}
				<button
					type="submit"
					class="mt-2 flex items-center whitespace-nowrap rounded-full bg-black px-5 py-2 text-lg font-semibold text-gray-100 transition-colors hover:bg-primary-500"
				>
					Sign in
					{#if PUBLIC_APP_NAME === "HuggingChat"}
						with <LogoHuggingFaceBorderless classNames="text-xl mr-1 ml-1.5" /> Hugging Face
					{/if}
				</button>
				<p class="mt-2 px-2 text-sm text-gray-500">to start chatting right away</p>
			{:else}
				<input type="hidden" name="ethicsModalAccepted" value={true} />
				{#each Object.entries(settings) as [key, val]}
					<input type="hidden" name={key} value={val} />
				{/each}
				<button
					type="submit"
					class="mt-2 rounded-full bg-black px-5 py-2 text-lg font-semibold text-gray-100 transition-colors hover:bg-primary-500"
				>
					Start chatting
				</button>
			{/if}
		</form>
	</div>
</Modal>