victor HF staff Adrien Denat commited on
Commit
f437e64
1 Parent(s): 959e78e

Add ethics modal (#129)

Browse files

* add ethics modal

* bind ethic modal to local storage + add transition

* tweaks

* set app version in an env var

* hide version if env var is undefined

* alignement

---------

Co-authored-by: Adrien Denat <[email protected]>

.env CHANGED
@@ -14,7 +14,7 @@ PUBLIC_USER_MESSAGE_TOKEN=<|prompter|>
14
  PUBLIC_ASSISTANT_MESSAGE_TOKEN=<|assistant|>
15
  PUBLIC_SEP_TOKEN=</s>
16
  PUBLIC_PREPROMPT="Below are a series of dialogues between various people and an AI assistant. The AI tries to be helpful, polite, honest, sophisticated, emotionally aware, and humble-but-knowledgeable. The assistant is happy to help with almost anything, and will do its best to understand exactly what is needed. It also tries to avoid giving false or misleading information, and it caveats when it isn't entirely sure about the right answer. That said, the assistant is practical and really does its best, and doesn't let caution get too much in the way of being useful."
17
-
18
  # [{"endpoint": "https://api-inference.huggingface.co/models/...", authorization: "Bearer hf_<token>", weight: 1}] to load balance
19
  # Eg if one endpoint has weight 2 and the other has weight 1, the first endpoint will be called twice as often
20
  MODEL_ENDPOINTS=`[]`
 
14
  PUBLIC_ASSISTANT_MESSAGE_TOKEN=<|assistant|>
15
  PUBLIC_SEP_TOKEN=</s>
16
  PUBLIC_PREPROMPT="Below are a series of dialogues between various people and an AI assistant. The AI tries to be helpful, polite, honest, sophisticated, emotionally aware, and humble-but-knowledgeable. The assistant is happy to help with almost anything, and will do its best to understand exactly what is needed. It also tries to avoid giving false or misleading information, and it caveats when it isn't entirely sure about the right answer. That said, the assistant is practical and really does its best, and doesn't let caution get too much in the way of being useful."
17
+ PUBLIC_VERSION=0
18
  # [{"endpoint": "https://api-inference.huggingface.co/models/...", authorization: "Bearer hf_<token>", weight: 1}] to load balance
19
  # Eg if one endpoint has weight 2 and the other has weight 1, the first endpoint will be called twice as often
20
  MODEL_ENDPOINTS=`[]`
src/lib/components/EthicsModal.svelte ADDED
@@ -0,0 +1,52 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <script lang="ts">
2
+ import { PUBLIC_VERSION } from "$env/static/public";
3
+ import Logo from "$lib/components/icons/Logo.svelte";
4
+ import Modal from "$lib/components/Modal.svelte";
5
+ import { onMount } from "svelte";
6
+
7
+ let ethicsModal = false;
8
+
9
+ const LOCAL_STORAGE_KEY = "has-seen-ethics-modal";
10
+
11
+ onMount(() => {
12
+ ethicsModal = localStorage.getItem(LOCAL_STORAGE_KEY) === null;
13
+ });
14
+
15
+ const handleClick = () => {
16
+ ethicsModal = false;
17
+ localStorage.setItem(LOCAL_STORAGE_KEY, "true");
18
+ };
19
+ </script>
20
+
21
+ {#if ethicsModal}
22
+ <Modal>
23
+ <div
24
+ class="flex w-full flex-col items-center gap-6 bg-gradient-to-t from-yellow-500/40 via-yellow-500/10 to-yellow-500/0 px-4 pb-10 pt-9 text-center"
25
+ >
26
+ <h2 class="flex items-center text-2xl font-semibold text-gray-800">
27
+ <Logo classNames="text-3xl mr-1.5" />HuggingChat
28
+ {#if typeof PUBLIC_VERSION !== "undefined"}
29
+ <div
30
+ class="ml-3 flex h-6 items-center rounded-lg border border-gray-100 bg-gray-50 px-2 text-base text-gray-400"
31
+ >
32
+ v{PUBLIC_VERSION}
33
+ </div>
34
+ {/if}
35
+ </h2>
36
+ <p class="px-4 text-lg font-semibold leading-snug text-gray-800 sm:px-12">
37
+ This application is for demonstration purposes only.
38
+ </p>
39
+ <p class="text-gray-800">
40
+ AI is an area of active research with known problems such as biased generation and
41
+ misinformation. Do not use this application for high-stakes decisions or advice.
42
+ </p>
43
+ <button
44
+ type="button"
45
+ on:click={handleClick}
46
+ class="mt-2 rounded-full bg-black px-5 py-2 text-lg font-semibold text-gray-100 transition-colors hover:bg-yellow-500"
47
+ >
48
+ Start chatting
49
+ </button>
50
+ </div>
51
+ </Modal>
52
+ {/if}
src/lib/components/MobileNav.svelte CHANGED
@@ -45,7 +45,7 @@
45
  >
46
  </nav>
47
  <nav
48
- class="fixed inset-0 z-50 grid max-h-screen grid-cols-1 grid-rows-[auto,auto,1fr,auto] bg-white bg-gradient-to-l from-gray-50 dark:bg-gray-900 dark:from-gray-800/30 {isOpen
49
  ? 'block'
50
  : 'hidden'}"
51
  >
 
45
  >
46
  </nav>
47
  <nav
48
+ class="fixed inset-0 z-30 grid max-h-screen grid-cols-1 grid-rows-[auto,auto,1fr,auto] bg-white bg-gradient-to-l from-gray-50 dark:bg-gray-900 dark:from-gray-800/30 {isOpen
49
  ? 'block'
50
  : 'hidden'}"
51
  >
src/lib/components/Modal.svelte ADDED
@@ -0,0 +1,13 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <script lang="ts">
2
+ import { cubicOut } from "svelte/easing";
3
+ import { fade } from "svelte/transition";
4
+ </script>
5
+
6
+ <div
7
+ transition:fade={{ easing: cubicOut, duration: 300 }}
8
+ class="fixed inset-0 z-40 flex items-center justify-center bg-black/80 p-8 backdrop-blur-sm dark:bg-black/50"
9
+ >
10
+ <div class="-mt-10 max-w-sm overflow-hidden rounded-2xl bg-white shadow-2xl md:-mt-20">
11
+ <slot />
12
+ </div>
13
+ </div>
src/lib/components/chat/ChatIntroduction.svelte CHANGED
@@ -3,13 +3,14 @@
3
  PUBLIC_DISABLE_INTRO_TILES,
4
  PUBLIC_MODEL_ID,
5
  PUBLIC_MODEL_NAME,
 
6
  } from "$env/static/public";
7
 
8
  import Logo from "$lib/components/icons/Logo.svelte";
9
  import CarbonArrowUpRight from "~icons/carbon/arrow-up-right";
10
  import CarbonEarth from "~icons/carbon/earth";
11
  import { createEventDispatcher } from "svelte";
12
-
13
  const dispatch = createEventDispatcher<{ message: string }>();
14
  </script>
15
 
@@ -19,11 +20,13 @@
19
  <div class="mb-3 flex items-center text-2xl font-semibold">
20
  <Logo classNames="mr-1 text-yellow-400 text-4xl" />
21
  HuggingChat
22
- <div
23
- class="ml-3 flex h-6 items-center rounded-lg border border-gray-100 bg-gray-50 px-2 text-base text-gray-400 dark:border-gray-700/60 dark:bg-gray-800"
24
- >
25
- v0
26
- </div>
 
 
27
  </div>
28
  <p class="text-base text-gray-600 dark:text-gray-400">
29
  Making the community's best AI chat models available to everyone.
 
3
  PUBLIC_DISABLE_INTRO_TILES,
4
  PUBLIC_MODEL_ID,
5
  PUBLIC_MODEL_NAME,
6
+ PUBLIC_VERSION,
7
  } from "$env/static/public";
8
 
9
  import Logo from "$lib/components/icons/Logo.svelte";
10
  import CarbonArrowUpRight from "~icons/carbon/arrow-up-right";
11
  import CarbonEarth from "~icons/carbon/earth";
12
  import { createEventDispatcher } from "svelte";
13
+ console.log(PUBLIC_VERSION);
14
  const dispatch = createEventDispatcher<{ message: string }>();
15
  </script>
16
 
 
20
  <div class="mb-3 flex items-center text-2xl font-semibold">
21
  <Logo classNames="mr-1 text-yellow-400 text-4xl" />
22
  HuggingChat
23
+ {#if typeof PUBLIC_VERSION !== "undefined"}
24
+ <div
25
+ class="ml-3 flex h-6 items-center rounded-lg border border-gray-100 bg-gray-50 px-2 text-base text-gray-400 dark:border-gray-700/60 dark:bg-gray-800"
26
+ >
27
+ v{PUBLIC_VERSION}
28
+ </div>
29
+ {/if}
30
  </div>
31
  <p class="text-base text-gray-600 dark:text-gray-400">
32
  Making the community's best AI chat models available to everyone.
src/routes/+layout.svelte CHANGED
@@ -12,7 +12,10 @@
12
 
13
  import MobileNav from "$lib/components/MobileNav.svelte";
14
  import NavMenu from "$lib/components/NavMenu.svelte";
 
 
15
  import Toast from "$lib/components/Toast.svelte";
 
16
 
17
  export let data;
18
 
@@ -102,5 +105,6 @@
102
  {#if currentError}
103
  <Toast message={currentError} />
104
  {/if}
 
105
  <slot />
106
  </div>
 
12
 
13
  import MobileNav from "$lib/components/MobileNav.svelte";
14
  import NavMenu from "$lib/components/NavMenu.svelte";
15
+ import Logo from "$lib/components/icons/Logo.svelte";
16
+ import Modal from "$lib/components/Modal.svelte";
17
  import Toast from "$lib/components/Toast.svelte";
18
+ import EthicsModal from "$lib/components/EthicsModal.svelte";
19
 
20
  export let data;
21
 
 
105
  {#if currentError}
106
  <Toast message={currentError} />
107
  {/if}
108
+ <EthicsModal />
109
  <slot />
110
  </div>