Introduction: design update (#7)

* intro design update

* casing

* color

.env.example

@@ -1,7 +1,6 @@
 PUBLIC_HF_TOKEN=
 PUBLIC_ENDPOINT=https://api-inference.huggingface.co/models/OpenAssistant/oasst-sft-1-pythia-12b
-PUBLIC_MODEL_NAME=OpenAssistant/oasst-sft-1-pythia-12b
-PUBLIC_MODEL_TAGLINE=This is the first iteration English supervised-fine-tuning (SFT) model of the <a class="underline" href="https://github.com/LAION-AI/Open-Assistant">Open-Assistant</a> project. It is based on a Pythia 12B that was fine-tuned on ~22k human demonstrations of assistant conversations collected through the <a class="underline" href="https://open-assistant.io/">https://open-assistant.io/</a> human feedback web app before March 7, 2023.
+PUBLIC_MODEL_NAME=OpenAssistant/llama_30b_oasst_latcyr_1000
 PUBLIC_DISABLE_INTRO_TILES=true
 PUBLIC_USER_MESSAGE_TOKEN=<|prompter|>
 PUBLIC_ASSISTANT_MESSAGE_TOKEN=<|assistant|>

src/lib/components/chat/ChatIntroduction.svelte

@@ -1,38 +1,59 @@
 <script lang="ts">
-	import { PUBLIC_DISABLE_INTRO_TILES, PUBLIC_MODEL_NAME, PUBLIC_MODEL_TAGLINE } from '$env/static/public';
-	
-	export let title: string = 'Joi 20B Instruct';
+	import { PUBLIC_DISABLE_INTRO_TILES, PUBLIC_MODEL_NAME } from '$env/static/public';
+
+	import Logo from '$lib/components/icons/Logo.svelte';
 </script>
 
-<div class="grid grid-cols-3 gap-3 my-auto">
-	<div class="col-span-3 text-center mb-10">
-		<h1 class="text-3xl font-bold mb-1.5">{PUBLIC_MODEL_NAME || title}</h1>
-		<p class="text-lg text-gray-500">
-			{#if PUBLIC_MODEL_TAGLINE}
-				{@html PUBLIC_MODEL_TAGLINE}
-			{:else}
-				Lorem ipsum dolor sit.
-			{/if}
-		</p>
-	</div>
-	{#if PUBLIC_DISABLE_INTRO_TILES !== "true"}
-		<div class="bg-gray-50 dark:bg-gray-700 rounded-xl text-gray-500 dark:text-gray-400 p-4">
-			Create
-		</div>
-		<div class="bg-gray-50 dark:bg-gray-700 rounded-xl text-gray-500 dark:text-gray-400 p-4">
-			Discover
-		</div>
-		<div class="bg-gray-50 dark:bg-gray-700 rounded-xl text-gray-500 dark:text-gray-400 p-4">
-			Overcome
+<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-2 text-yellow-400 text-3xl" />
+				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 class="bg-gray-50 dark:bg-gray-700 rounded-xl text-gray-500 dark:text-gray-400 p-4">
-			Create
-		</div>
-		<div class="bg-gray-50 dark:bg-gray-700 rounded-xl text-gray-500 dark:text-gray-400 p-4">
-			Discover
+	</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-4 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/OpenAssistant/llama_30b_oasst_latcyr_1000" target="_blank"
+					>Model page</a
+				>
+				<a href="https://huggingface.co/datasets/OpenAssistant/oasst1" target="_blank"
+					>Dataset page</a
+				>
+				<a href="https://open-assistant.io/" target="_blank" class="ml-auto"
+					>Open Assistant website</a
+				>
+			</div>
 		</div>
-		<div class="bg-gray-50 dark:bg-gray-700 rounded-xl text-gray-500 dark:text-gray-400 p-4">
-			Overcome
+	</div>
+	{#if PUBLIC_DISABLE_INTRO_TILES}
+		<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
+					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"
+					>"Write an email from bullet list"</button
+				>
+				<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"
+					>"Code a snake game"</button
+				>
+				<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"
+					>"Assist in a task"</button
+				>
+			</div>
 		</div>
 	{/if}
 </div>

src/lib/components/icons/Logo.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	export let classNames: string = '';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="1em"
+	height="1em"
+	class={classNames}
+	viewBox="0 0 24 25"
+>
+	<path
+		fill="currentColor"
+		d="M2.7 11.4c0-4.2 3.4-7.6 7.6-7.6h4a7 7 0 0 1 7 7v.6a7 7 0 0 1-7 7H5.6l-2.3 2.1c-.2.2-.5 0-.5-.2V11.4Z"
+	/>
+</svg>