Hugging Face's logo

Spaces:
huggingchat
/
chat-ui
Paused

App Files Community
487
victor HF staff commited on
Commit
b4899ca
•
1 Parent(s): 4ab9a88

ui

Browse files
Files changed (1) hide show
  1. src/routes/+page.svelte +140 -2
src/routes/+page.svelte CHANGED
@@ -1,2 +1,140 @@
1
- <h1>Welcome to SvelteKit</h1>
2
- <p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <div class="flex bg-black/95 text-gray-300/90">
2
+ <div class="w-64">
3
+ <button class="text-white p-4 border border-white">New chat</button>
4
+ </div>
5
+ <div class="relative flex-1 overflow-y-auto">
6
+ <div class="mx-auto flex h-screen max-h-screen max-w-4xl flex-col gap-8 pt-12">
7
+ <div class="flex items-start justify-start gap-4 leading-relaxed">
8
+ <img
9
+ src="https://huggingface.co/avatars/2edb18bd0206c16b433841a47f53fa8e.svg"
10
+ class="mt-5 h-4 w-4 flex-none rounded-full shadow-lg shadow-white/40"
11
+ />
12
+ <div
13
+ class="text-blue-00 group relative rounded-2xl bg-gradient-to-br from-gray-800/50 to-gray-800/20 px-5 pt-4 pb-5"
14
+ >
15
+ Lorem ipsum, dolor sit amet consectetur adipisicing eLorem ipsum, dolor sit amet
16
+ consectetur adipisicing eLorem ipsum, dolor sit amet consectetur adipisicing eLorem ipsum,
17
+ dolor sit amet consectetur adipisicing eLorem ipsum, dolor sit amet consectetur
18
+ adipisicing eLorem ipsum, dolor sit amet consectetur adipisicing eLorem ipsum, dolor sit
19
+ amet consectetur adipisicing elit. Dolorum maiores quo officiis?
20
+ </div>
21
+ </div>
22
+ <div class="mb-2 flex items-start justify-start gap-4 text-gray-300/70">
23
+ <div class="mt-4 h-4 w-4 flex-none rounded-full" />
24
+ <div class="rounded-2xl px-4 py-3.5">
25
+ Lorem ipsum, dolor sit amet consectetur adipisicing eLorem ipsum, dolor sit amet
26
+ consectetur adipisicing eLorem ipsum
27
+ </div>
28
+ </div>
29
+ <div class="flex items-start justify-start gap-4 leading-relaxed">
30
+ <img
31
+ src="https://huggingface.co/avatars/2edb18bd0206c16b433841a47f53fa8e.svg"
32
+ class="mt-5 h-3 w-3 flex-none rounded-full bg-white"
33
+ />
34
+ <div
35
+ class="text-blue-00 rounded-2xl bg-gradient-to-br from-gray-800/50 to-gray-800/20 px-5 pt-4 pb-5"
36
+ >
37
+ <p>
38
+ Lorem ipsum, dolor sit amet consectetur adipisicing eLorem ipsum, dolor sit amet
39
+ consectetur adipisicing eLorem ipsum, dolor sit amet consectetur adipisicing eLorem
40
+ ipsum, dolor sit
41
+ </p>
42
+ <div class="mt-4 flex flex-wrap gap-4 first:mt-0">
43
+ <img
44
+ src="https://lexica-serve-encoded-images2.sharif.workers.dev/full_jpg/7a6fcbc9-3440-49b4-9c33-eaadc59a462d"
45
+ alt=""
46
+ class="max-h-[360px] rounded-xl"
47
+ />
48
+ <img
49
+ src="https://lexica-serve-encoded-images2.sharif.workers.dev/full_jpg/11d91b58-4305-45de-b608-1142ddc118a7"
50
+ alt=""
51
+ class="max-h-[360px] rounded-xl"
52
+ />
53
+ </div>
54
+ </div>
55
+ </div>
56
+ <div class="flex items-start justify-start gap-4 leading-relaxed">
57
+ <img
58
+ src="https://huggingface.co/avatars/2edb18bd0206c16b433841a47f53fa8e.svg"
59
+ class="mt-5 h-3 w-3 flex-none rounded-full bg-white"
60
+ />
61
+ <div
62
+ class="text-blue-00 rounded-2xl bg-gradient-to-br from-gray-800/50 to-gray-800/20 px-5 pt-4 pb-5"
63
+ >
64
+ <p>
65
+ Lorem ipsum, dolor sit amet consectetur adipisicing eLorem ipsum, dolor sit amet
66
+ consectetur adipisicing eLorem ipsum, dolor sit amet consectetur adipisicing eLorem
67
+ ipsum, dolor sit
68
+ </p>
69
+ <div class="mt-4 flex flex-wrap gap-4 first:mt-0">
70
+ <img
71
+ src="https://lexica-serve-encoded-images2.sharif.workers.dev/full_jpg/7a6fcbc9-3440-49b4-9c33-eaadc59a462d"
72
+ alt=""
73
+ class="max-h-[360px] rounded-xl"
74
+ />
75
+ <img
76
+ src="https://lexica-serve-encoded-images2.sharif.workers.dev/full_jpg/11d91b58-4305-45de-b608-1142ddc118a7"
77
+ alt=""
78
+ class="max-h-[360px] rounded-xl"
79
+ />
80
+ </div>
81
+ </div>
82
+ </div>
83
+ <div class="flex items-start justify-start gap-4 leading-relaxed">
84
+ <img
85
+ src="https://huggingface.co/avatars/2edb18bd0206c16b433841a47f53fa8e.svg"
86
+ class="mt-5 h-3 w-3 flex-none rounded-full bg-white"
87
+ />
88
+ <div
89
+ class="text-blue-00 rounded-2xl bg-gradient-to-br from-gray-800/50 to-gray-800/20 px-5 pt-4 pb-5"
90
+ >
91
+ <p>
92
+ Lorem ipsum, dolor sit amet consectetur adipisicing eLorem ipsum, dolor sit amet
93
+ consectetur adipisicing eLorem ipsum, dolor sit amet consectetur adipisicing eLorem
94
+ ipsum, dolor sit
95
+ </p>
96
+ <div class="mt-4 flex flex-wrap gap-4 first:mt-0">
97
+ <img
98
+ src="https://lexica-serve-encoded-images2.sharif.workers.dev/full_jpg/7a6fcbc9-3440-49b4-9c33-eaadc59a462d"
99
+ alt=""
100
+ class="max-h-[360px] rounded-xl"
101
+ />
102
+ <img
103
+ src="https://lexica-serve-encoded-images2.sharif.workers.dev/full_jpg/11d91b58-4305-45de-b608-1142ddc118a7"
104
+ alt=""
105
+ class="max-h-[360px] rounded-xl"
106
+ />
107
+ </div>
108
+ </div>
109
+ </div>
110
+ <div class="flex items-start justify-start gap-4 text-gray-300">
111
+ <div class="mt-4 h-4 w-4 flex-none rounded-full" />
112
+ <div class="rounded-2xl px-4 py-3.5">
113
+ Lorem ipsum, dolor sit amet consectetur adipisicing eLorem ipsum, dolor sit amet
114
+ consectetur adipisicing eLorem ipsum
115
+ </div>
116
+ </div>
117
+ <div class="flex items-start justify-start gap-4 leading-relaxed">
118
+ <img
119
+ src="https://huggingface.co/avatars/2edb18bd0206c16b433841a47f53fa8e.svg"
120
+ class="mt-5 h-4 w-4 flex-none rounded-full shadow-lg shadow-white/40"
121
+ />
122
+ <div
123
+ class="group relative rounded-2xl bg-gradient-to-br from-gray-800/50 to-gray-800/20 px-5 pt-4 pb-5 text-blue-900"
124
+ >
125
+ <div class="h-4 w-2 animate-pulse bg-white/20" />
126
+ </div>
127
+ </div>
128
+ </div>
129
+ <div class="fixed inset-x-0 bottom-12 mx-auto max-w-4xl">
130
+ <div
131
+ class="w-full rounded-2xl border border-black bg-gradient-to-br from-gray-800/40 to-gray-800/50 px-4 py-3.5 shadow-2xl shadow-white/5 outline-none ring-gray-700 focus:ring-1"
132
+ role="textbox"
133
+ contenteditable
134
+ >
135
+ Ask anything...
136
+ </div>
137
+ <!-- <textarea class="w-full rounded-2xl bg-slate-800/80 px-4 py-3.5 shadow-xl" rows="1" placeholder="Write anything..."></textarea> -->
138
+ </div>
139
+ </div>
140
+ </div>