Spaces:
Build error
Build error
chat intro
Browse files- src/lib/chat/ChatBox.svelte +26 -0
- src/lib/chat/ChatIntroduction.svelte +16 -0
- src/routes/+page.svelte +14 -48
src/lib/chat/ChatBox.svelte
ADDED
@@ -0,0 +1,26 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<script lang="ts">
|
2 |
+
export let message;
|
3 |
+
</script>
|
4 |
+
|
5 |
+
{#if message.from === 'bot'}
|
6 |
+
<div class="flex items-start justify-start gap-4 leading-relaxed">
|
7 |
+
<img
|
8 |
+
alt=""
|
9 |
+
src="https://huggingface.co/avatars/2edb18bd0206c16b433841a47f53fa8e.svg"
|
10 |
+
class="mt-5 w-3 h-3 flex-none rounded-full shadow-lg"
|
11 |
+
/>
|
12 |
+
<div
|
13 |
+
class="group relative rounded-2xl px-5 py-3.5 border border-gray-100 bg-gradient-to-br from-gray-50"
|
14 |
+
>
|
15 |
+
{message.content}
|
16 |
+
</div>
|
17 |
+
</div>
|
18 |
+
{/if}
|
19 |
+
{#if message.from === 'user'}
|
20 |
+
<div class="flex items-start justify-start gap-4">
|
21 |
+
<div class="mt-5 w-3 h-3 flex-none rounded-full" />
|
22 |
+
<div class="rounded-2xl px-5 py-3.5 text-gray-500">
|
23 |
+
{message.content}
|
24 |
+
</div>
|
25 |
+
</div>
|
26 |
+
{/if}
|
src/lib/chat/ChatIntroduction.svelte
ADDED
@@ -0,0 +1,16 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<script lang="ts">
|
2 |
+
export let title: string = '';
|
3 |
+
</script>
|
4 |
+
|
5 |
+
<div class="grid grid-cols-3 gap-3 my-auto">
|
6 |
+
<div class="col-span-3 text-center mb-10">
|
7 |
+
<h1 class="text-3xl font-bold mb-1.5">{title}</h1>
|
8 |
+
<p class="text-lg text-gray-500">Lorem ipsum dolor sit.</p>
|
9 |
+
</div>
|
10 |
+
<div class="bg-gray-50 rounded-xl text-gray-500 p-4">Create</div>
|
11 |
+
<div class="bg-gray-50 rounded-xl text-gray-500 p-4">Discover</div>
|
12 |
+
<div class="bg-gray-50 rounded-xl text-gray-500 p-4">Overcome</div>
|
13 |
+
<div class="bg-gray-50 rounded-xl text-gray-500 p-4">Create</div>
|
14 |
+
<div class="bg-gray-50 rounded-xl text-gray-500 p-4">Discover</div>
|
15 |
+
<div class="bg-gray-50 rounded-xl text-gray-500 p-4">Overcome</div>
|
16 |
+
</div>
|
src/routes/+page.svelte
CHANGED
@@ -1,5 +1,7 @@
|
|
1 |
<script lang="ts">
|
2 |
import { fetchEventSource } from '@microsoft/fetch-event-source';
|
|
|
|
|
3 |
const ENDPOINT = 'https://joi-20b.ngrok.io/generate_stream';
|
4 |
|
5 |
type Message =
|
@@ -12,28 +14,9 @@
|
|
12 |
content: string;
|
13 |
};
|
14 |
|
15 |
-
let messages: Message[] = [
|
16 |
-
{
|
17 |
-
from: 'user',
|
18 |
-
content: 'hello bot'
|
19 |
-
},
|
20 |
-
{
|
21 |
-
from: 'bot',
|
22 |
-
content: " Hello! I'm a conversational chatbot. What can I help you with today?<|endoftext|>"
|
23 |
-
},
|
24 |
-
{
|
25 |
-
from: 'user',
|
26 |
-
content: 'how are you?'
|
27 |
-
},
|
28 |
-
{
|
29 |
-
from: 'bot',
|
30 |
-
content: " I'm fine, thank you for asking. How are you?<|endoftext|>"
|
31 |
-
}
|
32 |
-
];
|
33 |
let message = '';
|
34 |
|
35 |
-
$: console.log(messages);
|
36 |
-
|
37 |
function onWrite() {
|
38 |
messages = [...messages, { from: 'user', content: message }];
|
39 |
message = '';
|
@@ -79,47 +62,30 @@
|
|
79 |
</script>
|
80 |
|
81 |
<div class="grid h-screen w-screen md:grid-cols-[280px,1fr] overflow-hidden text-smd">
|
82 |
-
<nav
|
|
|
|
|
83 |
<div class="flex-none sticky top-0 relative p-3 flex flex-col">
|
84 |
<button class="border px-12 py-2.5 rounded-lg border shadow bg-white">New Chat</button>
|
85 |
</div>
|
86 |
<div class="flex flex-col overflow-y-auto p-3 -mt-3 gap-2">
|
87 |
{#each Array(5) as _}
|
88 |
-
<a href="" class="truncate py-3 px-3 rounded-lg flex-none text-gray-400 hover:bg-gray-100">
|
89 |
Amet consectetur adipisicing elit. Eos dolorum nihil alias.
|
90 |
</a>
|
91 |
{/each}
|
92 |
</div>
|
93 |
<div class="flex flex-col p-3 gap-2">
|
94 |
-
<a href="" class="truncate
|
95 |
-
<a href="" class="truncate
|
96 |
</div>
|
97 |
</nav>
|
98 |
<div class="overflow-y-auto">
|
99 |
-
<div class="max-w-3xl xl:max-w-4xl mx-auto px-5 pt-6 flex flex-col gap-8">
|
100 |
-
{#each messages as
|
101 |
-
{
|
102 |
-
|
103 |
-
|
104 |
-
alt=""
|
105 |
-
src="https://huggingface.co/avatars/2edb18bd0206c16b433841a47f53fa8e.svg"
|
106 |
-
class="mt-5 w-3 h-3 flex-none rounded-full shadow-lg"
|
107 |
-
/>
|
108 |
-
<div
|
109 |
-
class="group relative rounded-2xl px-5 py-3.5 border border-gray-100 bg-gradient-to-br from-gray-50"
|
110 |
-
>
|
111 |
-
{content}
|
112 |
-
</div>
|
113 |
-
</div>
|
114 |
-
{/if}
|
115 |
-
{#if from === 'user'}
|
116 |
-
<div class="flex items-start justify-start gap-4">
|
117 |
-
<div class="mt-5 w-3 h-3 flex-none rounded-full" />
|
118 |
-
<div class="rounded-2xl px-5 py-3.5 text-gray-500">
|
119 |
-
{content}
|
120 |
-
</div>
|
121 |
-
</div>
|
122 |
-
{/if}
|
123 |
{/each}
|
124 |
<div class="h-32" />
|
125 |
</div>
|
|
|
1 |
<script lang="ts">
|
2 |
import { fetchEventSource } from '@microsoft/fetch-event-source';
|
3 |
+
import ChatBox from '$lib/chat/Chatbox.svelte';
|
4 |
+
import ChatIntroduction from '$lib/chat/ChatIntroduction.svelte';
|
5 |
const ENDPOINT = 'https://joi-20b.ngrok.io/generate_stream';
|
6 |
|
7 |
type Message =
|
|
|
14 |
content: string;
|
15 |
};
|
16 |
|
17 |
+
let messages: Message[] = [];
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
18 |
let message = '';
|
19 |
|
|
|
|
|
20 |
function onWrite() {
|
21 |
messages = [...messages, { from: 'user', content: message }];
|
22 |
message = '';
|
|
|
62 |
</script>
|
63 |
|
64 |
<div class="grid h-screen w-screen md:grid-cols-[280px,1fr] overflow-hidden text-smd">
|
65 |
+
<nav
|
66 |
+
class="max-md:hidden grid grid-rows-[auto,1fr,auto] grid-cols-1 max-h-screen bg-gradient-to-l from-gray-50"
|
67 |
+
>
|
68 |
<div class="flex-none sticky top-0 relative p-3 flex flex-col">
|
69 |
<button class="border px-12 py-2.5 rounded-lg border shadow bg-white">New Chat</button>
|
70 |
</div>
|
71 |
<div class="flex flex-col overflow-y-auto p-3 -mt-3 gap-2">
|
72 |
{#each Array(5) as _}
|
73 |
+
<a href="/" class="truncate py-3 px-3 rounded-lg flex-none text-gray-400 hover:bg-gray-100">
|
74 |
Amet consectetur adipisicing elit. Eos dolorum nihil alias.
|
75 |
</a>
|
76 |
{/each}
|
77 |
</div>
|
78 |
<div class="flex flex-col p-3 gap-2">
|
79 |
+
<a href="/" class="truncate py-3 px-3 rounded-lg mt-auto"> Appearance </a>
|
80 |
+
<a href="/" class="truncate py-3 px-3 rounded-lg"> Settings </a>
|
81 |
</div>
|
82 |
</nav>
|
83 |
<div class="overflow-y-auto">
|
84 |
+
<div class="max-w-3xl xl:max-w-4xl mx-auto px-5 pt-6 flex flex-col gap-8 h-full">
|
85 |
+
{#each messages as message}
|
86 |
+
<ChatBox {message} />
|
87 |
+
{:else}
|
88 |
+
<ChatIntroduction title="Joi 20B Instruct" />
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
89 |
{/each}
|
90 |
<div class="h-32" />
|
91 |
</div>
|