victor HF staff commited on
Commit
ef5513c
1 Parent(s): 8b86866
Files changed (4) hide show
  1. package-lock.json +8 -0
  2. package.json +4 -1
  3. src/app.html +0 -8
  4. src/routes/+page.svelte +87 -24
package-lock.json CHANGED
@@ -7,6 +7,9 @@
7
  "": {
8
  "name": "chat-ui",
9
  "version": "0.0.1",
 
 
 
10
  "devDependencies": {
11
  "@sveltejs/adapter-auto": "^2.0.0",
12
  "@sveltejs/kit": "^1.5.0",
@@ -457,6 +460,11 @@
457
  "@jridgewell/sourcemap-codec": "1.4.14"
458
  }
459
  },
 
 
 
 
 
460
  "node_modules/@nodelib/fs.scandir": {
461
  "version": "2.1.5",
462
  "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
 
7
  "": {
8
  "name": "chat-ui",
9
  "version": "0.0.1",
10
+ "dependencies": {
11
+ "@microsoft/fetch-event-source": "^2.0.1"
12
+ },
13
  "devDependencies": {
14
  "@sveltejs/adapter-auto": "^2.0.0",
15
  "@sveltejs/kit": "^1.5.0",
 
460
  "@jridgewell/sourcemap-codec": "1.4.14"
461
  }
462
  },
463
+ "node_modules/@microsoft/fetch-event-source": {
464
+ "version": "2.0.1",
465
+ "resolved": "https://registry.npmjs.org/@microsoft/fetch-event-source/-/fetch-event-source-2.0.1.tgz",
466
+ "integrity": "sha512-W6CLUJ2eBMw3Rec70qrsEW0jOm/3twwJv21mrmj2yORiaVmVYGS4sSS5yUwvQc1ZlDLYGPnClVWmUUMagKNsfA=="
467
+ },
468
  "node_modules/@nodelib/fs.scandir": {
469
  "version": "2.1.5",
470
  "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
package.json CHANGED
@@ -27,5 +27,8 @@
27
  "typescript": "^4.9.3",
28
  "vite": "^4.0.0"
29
  },
30
- "type": "module"
 
 
 
31
  }
 
27
  "typescript": "^4.9.3",
28
  "vite": "^4.0.0"
29
  },
30
+ "type": "module",
31
+ "dependencies": {
32
+ "@microsoft/fetch-event-source": "^2.0.1"
33
+ }
34
  }
src/app.html CHANGED
@@ -12,14 +12,6 @@
12
  extend: {
13
  fontSize: {
14
  smd: '0.94rem'
15
- },
16
- colors: {
17
- // 'bg-dark':
18
- // 'bg-darker':
19
- // 'text-light':
20
- // 'softlight': '#f5f5f5',
21
- // 'light': '#e0e0e0',
22
- // 'gray': '#9e9e9e',
23
  }
24
  }
25
  }
 
12
  extend: {
13
  fontSize: {
14
  smd: '0.94rem'
 
 
 
 
 
 
 
 
15
  }
16
  }
17
  }
src/routes/+page.svelte CHANGED
@@ -1,3 +1,63 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  <div class="grid h-screen w-screen md:grid-cols-[256px,1fr] overflow-hidden text-smd">
2
  <div class="max-md:hidden bg-gray-900/20 pt-6 px-6">
3
  <button
@@ -7,29 +67,28 @@
7
  </div>
8
  <div class="overflow-y-auto">
9
  <div class="max-w-4xl mx-auto px-5 pt-6 flex flex-col gap-8">
10
- {#each Array(4) as _}
11
- <div class="flex items-start justify-start gap-4 leading-relaxed">
12
- <img
13
- src="https://huggingface.co/avatars/2edb18bd0206c16b433841a47f53fa8e.svg"
14
- class="mt-4 w-3 h-3 flex-none rounded-full shadow-lg shadow-white/40"
15
- />
16
- <div
17
- class="group relative rounded-2xl bg-gradient-to-br from-gray-800/50 to-gray-800/20 px-5 py-3.5"
18
- >
19
- Lorem ipsum, dolor sit amet consectetur adipisicing eLorem ipsum, dolor sit amet
20
- consectetur adipisicing iciis? Lorem ipsum dolor sit amet consectetur adipisicing elit.
21
- Rem, qui consequatur voluptas inventore recusandae animi voluptate consectetur aperiam,
22
- sapiente aliqm possimus quasi accusamus, dolores nobis officiis vitae tenetur? Porro,
23
- corporis.
24
  </div>
25
- </div>
26
- <div class="mb-2 flex items-start justify-start gap-4 text-gray-300/80">
27
- <div class="mt-4 w-3 h-3 flex-none rounded-full" />
28
- <div class="rounded-2xl px-5 py-3.5">
29
- Lorem ipsum, dolor sit amet consectetur adipisicing eLorem ipsum, dolor sit amet
30
- consectetur adipisicing eLorem ipsum
 
31
  </div>
32
- </div>
33
  {/each}
34
  <div class="h-32" />
35
  </div>
@@ -37,7 +96,8 @@
37
  <div
38
  class="flex items-center justify-center absolute left-[256px] right-0 px-24 bottom-0 h-32 bg-gradient-to-t from-gray-900/50 to-black/0"
39
  >
40
- <div
 
41
  class="shadow-alternate relative flex items-center rounded-xl border border-gray-900 bg-black shadow-xl flex-1 max-w-4xl"
42
  >
43
  <svg
@@ -58,9 +118,12 @@
58
  >
59
  <input
60
  class="flex-1 border-none bg-transparent px-1 py-3 pr-3 pl-10 outline-none placeholder:text-gray-400"
61
- placeholder="Ask anything..."
 
 
 
62
  />
63
- </div>
64
  <!-- <input
65
  type="text"
66
  placeholder="Type anything..."
 
1
+ <script lang="ts">
2
+ import { fetchEventSource } from '@microsoft/fetch-event-source';
3
+ const ENDPOINT = 'https://joi-20b.ngrok.io/generate_stream';
4
+ type Message =
5
+ | {
6
+ from: 'user';
7
+ content: string;
8
+ }
9
+ | {
10
+ from: 'bot';
11
+ content: string;
12
+ };
13
+
14
+ let messages: Message[] = [];
15
+ let message = '';
16
+
17
+ function onWrite() {
18
+ messages = [...messages, { from: 'user', content: message }];
19
+ message = '';
20
+ let incoming = '';
21
+ const inputs =
22
+ messages
23
+ .map((m) => (m.from === 'user' ? `User: ${m.content}\n` : `Joi:${m.content}\n`))
24
+ .join('\n') + '\nJoi:';
25
+
26
+ fetchEventSource(ENDPOINT, {
27
+ method: 'POST',
28
+ headers: {
29
+ Accept: 'text/event-stream',
30
+ 'Content-Type': 'application/json'
31
+ },
32
+ body: JSON.stringify({
33
+ inputs: inputs,
34
+ parameters: {
35
+ temperature: 0.5,
36
+ top_p: 0.95,
37
+ do_sample: true,
38
+ max_new_tokens: 512,
39
+ top_k: 4,
40
+ repetition_penalty: 1.03,
41
+ stop: ['User:']
42
+ }
43
+ }),
44
+ async onopen(response) {
45
+ if (response.ok && response.headers.get('content-type') === 'text/event-stream') {
46
+ messages = [...messages, { from: 'bot', content: incoming }];
47
+ } else {
48
+ console.error('error opening the SSE endpoint');
49
+ }
50
+ },
51
+ onmessage(msg) {
52
+ const data = JSON.parse(msg.data);
53
+ // console.log(data);
54
+ messages.at(-1)!.content += data.token.text;
55
+ messages = messages;
56
+ }
57
+ });
58
+ }
59
+ </script>
60
+
61
  <div class="grid h-screen w-screen md:grid-cols-[256px,1fr] overflow-hidden text-smd">
62
  <div class="max-md:hidden bg-gray-900/20 pt-6 px-6">
63
  <button
 
67
  </div>
68
  <div class="overflow-y-auto">
69
  <div class="max-w-4xl mx-auto px-5 pt-6 flex flex-col gap-8">
70
+ {#each messages as { from, content }}
71
+ {#if from === 'bot'}
72
+ <div class="flex items-start justify-start gap-4 leading-relaxed">
73
+ <img
74
+ src="https://huggingface.co/avatars/2edb18bd0206c16b433841a47f53fa8e.svg"
75
+ class="mt-4 w-3 h-3 flex-none rounded-full shadow-lg shadow-white/40"
76
+ />
77
+ <div
78
+ class="group relative rounded-2xl bg-gradient-to-br from-gray-800/50 to-gray-800/20 px-5 py-3.5"
79
+ >
80
+ {content}
81
+ </div>
 
 
82
  </div>
83
+ {/if}
84
+ {#if from === 'user'}
85
+ <div class="flex items-start justify-start gap-4 text-gray-300/80">
86
+ <div class="mt-4 w-3 h-3 flex-none rounded-full" />
87
+ <div class="rounded-2xl px-5 py-3.5">
88
+ {content}
89
+ </div>
90
  </div>
91
+ {/if}
92
  {/each}
93
  <div class="h-32" />
94
  </div>
 
96
  <div
97
  class="flex items-center justify-center absolute left-[256px] right-0 px-24 bottom-0 h-32 bg-gradient-to-t from-gray-900/50 to-black/0"
98
  >
99
+ <form
100
+ on:submit={onWrite}
101
  class="shadow-alternate relative flex items-center rounded-xl border border-gray-900 bg-black shadow-xl flex-1 max-w-4xl"
102
  >
103
  <svg
 
118
  >
119
  <input
120
  class="flex-1 border-none bg-transparent px-1 py-3 pr-3 pl-10 outline-none placeholder:text-gray-400"
121
+ bind:value={message}
122
+ on:submit={onWrite}
123
+ placeholder="Ask anything"
124
+ autofocus
125
  />
126
+ </form>
127
  <!-- <input
128
  type="text"
129
  placeholder="Type anything..."