File size: 3,700 Bytes
a3ae6ee 714cc60 3072414 5da61b4 b7f9ccb a3ae6ee 3072414 f91689a 17dba7d 3072414 1ee9053 3072414 229d4b4 3072414 cb6af22 3072414 17dba7d 3072414 17dba7d 714cc60 17dba7d b7f9ccb 17dba7d 3072414 17dba7d b7f9ccb 17dba7d b7f9ccb 3072414 cb6af22 3072414 5da61b4 3072414 b7f9ccb 1c8195c b7f9ccb 5da61b4 c922d39 b7f9ccb 3072414 b7f9ccb 3072414 b7f9ccb 1c8195c b7f9ccb c922d39 3072414 b7f9ccb 3072414 b7f9ccb 1c8195c 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 108 109 110 111 |
<script lang="ts">
import {
PUBLIC_DISABLE_INTRO_TILES,
PUBLIC_MODEL_ID,
PUBLIC_MODEL_NAME,
} 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";
const dispatch = createEventDispatcher<{ message: string }>();
</script>
<div class="grid lg:grid-cols-3 gap-8 my-auto">
<div class="lg:col-span-1">
<div>
<div class="text-2xl font-semibold mb-3 flex items-center">
<Logo classNames="mr-1 text-yellow-400 text-4xl" />
HuggingChat
<div
class="text-base h-6 px-2 rounded-lg text-gray-400 bg-gray-50 ml-3 flex items-center border border-gray-100 dark:bg-gray-800 dark:border-gray-700/60"
>
v0
</div>
</div>
<p class="text-base text-gray-600 dark:text-gray-400">
Making the best open source AI chat models available to everyone.
</p>
</div>
</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-5 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/{PUBLIC_MODEL_ID}"
target="_blank"
rel="noreferrer"
class="flex items-center hover:underline"
>
<CarbonArrowUpRight class="text-xs mr-1.5 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="text-xs mr-1.5 text-gray-400" />
Dataset
<div class="max-sm:hidden"> page</div>
</a>
<a
href="https://open-assistant.io/"
target="_blank"
class="flex items-center hover:underline ml-auto"
rel="noreferrer"
>
<CarbonEarth class="text-xs mr-1.5 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 lg:grid-cols-3 gap-3 lg:gap-5">
<button
type="button"
class="text-gray-600 dark:text-gray-300 p-2.5 sm: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"
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="text-gray-600 dark:text-gray-300 p-2.5 sm: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"
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="text-gray-600 dark:text-gray-300 p-2.5 sm: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"
on:click={() => dispatch("message", "How do I make a delicious lemon cheesecake?")}
>
"Assist in a task"
</button>
</div>
</div>
{/if}
</div>
|