victor HF staff commited on
Commit
3072414
1 Parent(s): 508e861

Introduction: design update (#7)

Browse files

* intro design update

* casing

* color

.env.example CHANGED
@@ -1,7 +1,6 @@
1
  PUBLIC_HF_TOKEN=
2
  PUBLIC_ENDPOINT=https://api-inference.huggingface.co/models/OpenAssistant/oasst-sft-1-pythia-12b
3
- PUBLIC_MODEL_NAME=OpenAssistant/oasst-sft-1-pythia-12b
4
- 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.
5
  PUBLIC_DISABLE_INTRO_TILES=true
6
  PUBLIC_USER_MESSAGE_TOKEN=<|prompter|>
7
  PUBLIC_ASSISTANT_MESSAGE_TOKEN=<|assistant|>
 
1
  PUBLIC_HF_TOKEN=
2
  PUBLIC_ENDPOINT=https://api-inference.huggingface.co/models/OpenAssistant/oasst-sft-1-pythia-12b
3
+ PUBLIC_MODEL_NAME=OpenAssistant/llama_30b_oasst_latcyr_1000
 
4
  PUBLIC_DISABLE_INTRO_TILES=true
5
  PUBLIC_USER_MESSAGE_TOKEN=<|prompter|>
6
  PUBLIC_ASSISTANT_MESSAGE_TOKEN=<|assistant|>
src/lib/components/chat/ChatIntroduction.svelte CHANGED
@@ -1,38 +1,59 @@
1
  <script lang="ts">
2
- import { PUBLIC_DISABLE_INTRO_TILES, PUBLIC_MODEL_NAME, PUBLIC_MODEL_TAGLINE } from '$env/static/public';
3
-
4
- export let title: string = 'Joi 20B Instruct';
5
  </script>
6
 
7
- <div class="grid grid-cols-3 gap-3 my-auto">
8
- <div class="col-span-3 text-center mb-10">
9
- <h1 class="text-3xl font-bold mb-1.5">{PUBLIC_MODEL_NAME || title}</h1>
10
- <p class="text-lg text-gray-500">
11
- {#if PUBLIC_MODEL_TAGLINE}
12
- {@html PUBLIC_MODEL_TAGLINE}
13
- {:else}
14
- Lorem ipsum dolor sit.
15
- {/if}
16
- </p>
17
- </div>
18
- {#if PUBLIC_DISABLE_INTRO_TILES !== "true"}
19
- <div class="bg-gray-50 dark:bg-gray-700 rounded-xl text-gray-500 dark:text-gray-400 p-4">
20
- Create
21
- </div>
22
- <div class="bg-gray-50 dark:bg-gray-700 rounded-xl text-gray-500 dark:text-gray-400 p-4">
23
- Discover
24
- </div>
25
- <div class="bg-gray-50 dark:bg-gray-700 rounded-xl text-gray-500 dark:text-gray-400 p-4">
26
- Overcome
27
  </div>
28
- <div class="bg-gray-50 dark:bg-gray-700 rounded-xl text-gray-500 dark:text-gray-400 p-4">
29
- Create
30
- </div>
31
- <div class="bg-gray-50 dark:bg-gray-700 rounded-xl text-gray-500 dark:text-gray-400 p-4">
32
- Discover
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
33
  </div>
34
- <div class="bg-gray-50 dark:bg-gray-700 rounded-xl text-gray-500 dark:text-gray-400 p-4">
35
- Overcome
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
36
  </div>
37
  {/if}
38
  </div>
 
1
  <script lang="ts">
2
+ import { PUBLIC_DISABLE_INTRO_TILES, PUBLIC_MODEL_NAME } from '$env/static/public';
3
+
4
+ import Logo from '$lib/components/icons/Logo.svelte';
5
  </script>
6
 
7
+ <div class="grid lg:grid-cols-3 gap-8 my-auto">
8
+ <div class="lg:col-span-1">
9
+ <div>
10
+ <div class="text-2xl font-bold mb-3 flex items-center">
11
+ <Logo classNames="mr-2 text-yellow-400 text-3xl" />
12
+ HuggingChat
13
+ </div>
14
+ <p class="text-lg text-gray-600 dark:text-gray-400">
15
+ Making the best open AI chat models available to everyone.
16
+ </p>
 
 
 
 
 
 
 
 
 
 
17
  </div>
18
+ </div>
19
+ <div class="lg:col-span-2 lg:pl-24">
20
+ <div class="border dark:border-gray-800 rounded-xl overflow-hidden">
21
+ <div class="p-3">
22
+ <div class="text-sm text-gray-600 dark:text-gray-400">Current Model</div>
23
+ <div class="font-semibold">{PUBLIC_MODEL_NAME}</div>
24
+ </div>
25
+ <div
26
+ 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"
27
+ >
28
+ <a href="https://huggingface.co/OpenAssistant/llama_30b_oasst_latcyr_1000" target="_blank"
29
+ >Model page</a
30
+ >
31
+ <a href="https://huggingface.co/datasets/OpenAssistant/oasst1" target="_blank"
32
+ >Dataset page</a
33
+ >
34
+ <a href="https://open-assistant.io/" target="_blank" class="ml-auto"
35
+ >Open Assistant website</a
36
+ >
37
+ </div>
38
  </div>
39
+ </div>
40
+ {#if PUBLIC_DISABLE_INTRO_TILES}
41
+ <div class="lg:col-span-3 lg:mt-12">
42
+ <p class="mb-3 text-gray-600 dark:text-gray-300">Examples</p>
43
+ <div class="grid lg:grid-cols-3 gap-3 lg:gap-5">
44
+ <button
45
+ 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"
46
+ >"Write an email from bullet list"</button
47
+ >
48
+ <button
49
+ 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"
50
+ >"Code a snake game"</button
51
+ >
52
+ <button
53
+ 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"
54
+ >"Assist in a task"</button
55
+ >
56
+ </div>
57
  </div>
58
  {/if}
59
  </div>
src/lib/components/icons/Logo.svelte ADDED
@@ -0,0 +1,16 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <script lang="ts">
2
+ export let classNames: string = '';
3
+ </script>
4
+
5
+ <svg
6
+ xmlns="http://www.w3.org/2000/svg"
7
+ width="1em"
8
+ height="1em"
9
+ class={classNames}
10
+ viewBox="0 0 24 25"
11
+ >
12
+ <path
13
+ fill="currentColor"
14
+ 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"
15
+ />
16
+ </svg>