File size: 1,641 Bytes
f437e64 |
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 |
<script lang="ts">
import { PUBLIC_VERSION } from "$env/static/public";
import Logo from "$lib/components/icons/Logo.svelte";
import Modal from "$lib/components/Modal.svelte";
import { onMount } from "svelte";
let ethicsModal = false;
const LOCAL_STORAGE_KEY = "has-seen-ethics-modal";
onMount(() => {
ethicsModal = localStorage.getItem(LOCAL_STORAGE_KEY) === null;
});
const handleClick = () => {
ethicsModal = false;
localStorage.setItem(LOCAL_STORAGE_KEY, "true");
};
</script>
{#if ethicsModal}
<Modal>
<div
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"
>
<h2 class="flex items-center text-2xl font-semibold text-gray-800">
<Logo classNames="text-3xl mr-1.5" />HuggingChat
{#if typeof PUBLIC_VERSION !== "undefined"}
<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>
{/if}
</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-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>
<button
type="button"
on:click={handleClick}
class="mt-2 rounded-full bg-black px-5 py-2 text-lg font-semibold text-gray-100 transition-colors hover:bg-yellow-500"
>
Start chatting
</button>
</div>
</Modal>
{/if}
|