File size: 3,760 Bytes
a3ae6ee 7764421 5da61b4 7764421 b7f9ccb a3ae6ee b2387f6 3072414 b2387f6 17dba7d 3072414 c8c5d70 3072414 229d4b4 959e78e 3072414 cb6af22 3072414 b2387f6 3072414 7764421 3072414 b2387f6 3072414 17dba7d 7764421 17dba7d b2387f6 17dba7d b7f9ccb 17dba7d 3072414 b2387f6 17dba7d b7f9ccb 17dba7d b2387f6 17dba7d b2387f6 17dba7d b7f9ccb 3072414 cb6af22 3072414 5da61b4 3072414 b2387f6 3072414 b7f9ccb b2387f6 b7f9ccb 5da61b4 c922d39 b7f9ccb 3072414 b7f9ccb 3072414 b7f9ccb b2387f6 b7f9ccb c922d39 3072414 b7f9ccb 3072414 b7f9ccb b2387f6 c922d39 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 100 101 102 103 104 105 106 107 |
<script lang="ts">
import { PUBLIC_DISABLE_INTRO_TILES, PUBLIC_VERSION } 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";
export let currentModel: { name: string; displayName: string };
const dispatch = createEventDispatcher<{ message: string }>();
</script>
<div class="my-auto grid gap-8 lg:grid-cols-3">
<div class="lg:col-span-1">
<div>
<div class="mb-3 flex items-center text-2xl font-semibold">
<Logo classNames="mr-1 text-yellow-400 text-4xl" />
HuggingChat
<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 dark:border-gray-700/60 dark:bg-gray-800"
>
v{PUBLIC_VERSION}
</div>
</div>
<p class="text-base text-gray-600 dark:text-gray-400">
Making the community's best AI chat models available to everyone.
</p>
</div>
</div>
<div class="lg:col-span-2 lg:pl-24">
<div class="overflow-hidden rounded-xl border dark:border-gray-800">
<div class="p-3">
<div class="text-sm text-gray-600 dark:text-gray-400">Current Model</div>
<div class="font-semibold">{currentModel.displayName}</div>
</div>
<div
class="flex items-center gap-5 rounded-xl bg-gray-100 px-3 py-2 text-sm text-gray-600 dark:bg-gray-800 dark:text-gray-300"
>
<a
href="https://huggingface.co/{currentModel.name}"
target="_blank"
rel="noreferrer"
class="flex items-center hover:underline"
>
<CarbonArrowUpRight class="mr-1.5 text-xs text-gray-400" />
Model
<div class="max-sm:hidden"> page</div>
</a>
<a
href="https://huggingface.co/datasets/OpenAssistant/oasst1"
target="_blank"
rel="noreferrer"
class="flex items-center hover:underline"
>
<CarbonArrowUpRight class="mr-1.5 text-xs text-gray-400" />
Dataset
<div class="max-sm:hidden"> page</div>
</a>
<a
href="https://open-assistant.io/"
target="_blank"
class="ml-auto flex items-center hover:underline"
rel="noreferrer"
>
<CarbonEarth class="mr-1.5 text-xs 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 gap-3 lg:grid-cols-3 lg:gap-5">
<button
type="button"
class="rounded-xl border bg-gray-50 p-2.5 text-gray-600 hover:bg-gray-100 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 sm:p-4"
on:click={() =>
dispatch(
"message",
"As a restaurant owner, write a professional email to the supplier to get these products every week: \n\n- Wine (x10)\n- Eggs (x24)\n- Bread (x12)"
)}
>
"Write an email from bullet list"
</button>
<button
type="button"
class="rounded-xl border bg-gray-50 p-2.5 text-gray-600 hover:bg-gray-100 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 sm:p-4"
on:click={() =>
dispatch(
"message",
"Code a basic snake game in python, give explanations for each step."
)}
>
"Code a snake game"
</button>
<button
type="button"
class="rounded-xl border bg-gray-50 p-2.5 text-gray-600 hover:bg-gray-100 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 sm:p-4"
on:click={() => dispatch("message", "How do I make a delicious lemon cheesecake?")}
>
"Assist in a task"
</button>
</div>
</div>
{/if}
</div>
|