File size: 3,328 Bytes
a3ae6ee
5da61b4
3072414
5da61b4
 
 
 
b7f9ccb
 
a3ae6ee
 
3072414
 
 
 
17dba7d
3072414
 
 
 
 
cb6af22
3072414
 
 
 
 
 
 
 
17dba7d
3072414
17dba7d
 
 
 
 
 
 
 
 
b7f9ccb
 
 
 
 
17dba7d
3072414
17dba7d
 
 
b7f9ccb
17dba7d
 
 
 
 
 
 
 
b7f9ccb
3072414
cb6af22
3072414
5da61b4
3072414
 
 
 
b7f9ccb
3072414
b7f9ccb
 
5da61b4
 
b7f9ccb
3072414
b7f9ccb
 
3072414
b7f9ccb
3072414
b7f9ccb
5da61b4
3072414
b7f9ccb
 
3072414
b7f9ccb
3072414
5da61b4
3072414
b7f9ccb
 
3072414
cb6af22
 
a3ae6ee
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
<script lang="ts">
	import { PUBLIC_DISABLE_INTRO_TILES, PUBLIC_MODEL_NAME } from "$env/static/public";

	import Logo from "$lib/components/icons/Logo.svelte";
	import CarbonArrowUpRight from "~icons/carbon/arrow-up-right";
	import CarbonEarth from "~icons/carbon/earth";
	import { createEventDispatcher } from "svelte";

	const dispatch = createEventDispatcher<{ message: string }>();
</script>

<div class="grid lg:grid-cols-3 gap-8 my-auto">
	<div class="lg:col-span-1">
		<div>
			<div class="text-2xl font-bold mb-3 flex items-center">
				<Logo classNames="mr-1 text-yellow-400 text-4xl" />
				HuggingChat
			</div>
			<p class="text-lg text-gray-600 dark:text-gray-400">
				Making the best open AI chat models available to everyone.
			</p>
		</div>
	</div>
	<div class="lg:col-span-2 lg:pl-24">
		<div class="border dark:border-gray-800 rounded-xl overflow-hidden">
			<div class="p-3">
				<div class="text-sm text-gray-600 dark:text-gray-400">Current Model</div>
				<div class="font-semibold">{PUBLIC_MODEL_NAME}</div>
			</div>
			<div
				class="flex items-center gap-5 px-3 py-2 bg-gray-100 rounded-xl text-sm text-gray-600 dark:text-gray-300 dark:bg-gray-800"
			>
				<a
					href="https://huggingface.co/{PUBLIC_MODEL_NAME}"
					target="_blank"
					rel="noreferrer"
					class="flex items-center hover:underline"
				>
					<CarbonArrowUpRight class="text-xs mr-1.5 text-gray-400" />
					Model
					<div class="max-sm:hidden">&nbsp;page</div>
				</a>
				<a
					href="https://huggingface.co/datasets/OpenAssistant/oasst1"
					target="_blank"
					rel="noreferrer"
					class="flex items-center hover:underline"
				>
					<CarbonArrowUpRight class="text-xs mr-1.5 text-gray-400" />
					Dataset
					<div class="max-sm:hidden">&nbsp;page</div>
				</a>
				<a
					href="https://open-assistant.io/"
					target="_blank"
					class="flex items-center hover:underline ml-auto"
					rel="noreferrer"
				>
					<CarbonEarth class="text-xs mr-1.5 text-gray-400" />
					Open Assistant Website
				</a>
			</div>
		</div>
	</div>
	{#if PUBLIC_DISABLE_INTRO_TILES !== "true"}
		<div class="lg:col-span-3 lg:mt-12">
			<p class="mb-3 text-gray-600 dark:text-gray-300">Examples</p>
			<div class="grid lg:grid-cols-3 gap-3 lg:gap-5">
				<button
					type="button"
					class="text-gray-600 dark:text-gray-300 p-4 bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 hover:bg-gray-100 border dark:border-gray-800 rounded-xl"
					on:click={() =>
						dispatch(
							"message",
							"Write an email from bullet list: \n\n- Buy milk\n- Buy eggs\n- Buy bread"
						)}
				>
					"Write an email from bullet list"
				</button>
				<button
					type="button"
					class="text-gray-600 dark:text-gray-300 p-4 bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 hover:bg-gray-100 border dark:border-gray-800 rounded-xl"
					on:click={() =>
						dispatch("message", "Code a snake game in python, the snake should be red")}
				>
					"Code a snake game"
				</button>
				<button
					type="button"
					class="text-gray-600 dark:text-gray-300 p-4 bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 hover:bg-gray-100 border dark:border-gray-800 rounded-xl"
					on:click={() => dispatch("message", "How do I make a lemon cheesecake?")}
				>
					"Assist in a task"
				</button>
			</div>
		</div>
	{/if}
</div>