Hugging Face's logo

Spaces:
huggingchat
/
chat-ui
Paused

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

layout

Browse files
Files changed (2) hide show
  1. src/app.html +20 -1
  2. src/routes/+page.svelte +58 -128
src/app.html CHANGED
@@ -1,11 +1,30 @@
1
  <!DOCTYPE html>
2
- <html lang="en">
3
  <head>
4
  <meta charset="utf-8" />
5
  <link rel="icon" href="%sveltekit.assets%/favicon.png" />
6
  <meta name="viewport" content="width=device-width" />
7
  %sveltekit.head%
8
  <script src="https://cdn.tailwindcss.com"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9
  </head>
10
  <body data-sveltekit-preload-data="hover">
11
  <div style="display: contents">%sveltekit.body%</div>
 
1
  <!DOCTYPE html>
2
+ <html lang="en" class="bg-black/95 text-gray-200">
3
  <head>
4
  <meta charset="utf-8" />
5
  <link rel="icon" href="%sveltekit.assets%/favicon.png" />
6
  <meta name="viewport" content="width=device-width" />
7
  %sveltekit.head%
8
  <script src="https://cdn.tailwindcss.com"></script>
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
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
+ }
26
+ };
27
+ </script>
28
  </head>
29
  <body data-sveltekit-preload-data="hover">
30
  <div style="display: contents">%sveltekit.body%</div>
src/routes/+page.svelte CHANGED
@@ -1,140 +1,70 @@
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>
 
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-12 px-6">
3
+ <button
4
+ class="border px-12 py-2.5 rounded-lg bg-gray-800/20 border border-gray-800/50 shadow w-full"
5
+ >New Chat</button
6
+ >
7
  </div>
8
+ <div class="overflow-y-auto">
9
+ <div class="max-w-4xl mx-auto px-5 pt-12 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-5 h-3.5 w-3.5 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 h-3.5 w-3.5 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>
36
+ </div>
37
+ <div
38
+ class="flex items-center justify-center absolute left-[256px] right-0 px-5 bottom-0 h-32 bg-gradient-to-t from-black to-black/0"
39
+ >
40
+ <div
41
+ class="shadow-alternate relative flex items-center rounded-xl border border-gray-100 dark:bg-gray-950"
42
+ >
43
+ <svg
44
+ class="absolute left-3 text-gray-300 top-1/2 transform -translate-y-1/2 pointer-events-none"
45
+ xmlns="http://www.w3.org/2000/svg"
46
+ xmlns:xlink="http://www.w3.org/1999/xlink"
47
+ aria-hidden="true"
48
+ focusable="false"
49
+ role="img"
50
+ width="1em"
51
+ height="1em"
52
+ preserveAspectRatio="xMidYMid meet"
53
+ viewBox="0 0 32 32"
54
+ ><path
55
+ d="M30 28.59L22.45 21A11 11 0 1 0 21 22.45L28.59 30zM5 14a9 9 0 1 1 9 9a9 9 0 0 1-9-9z"
56
+ fill="currentColor"
57
+ /></svg
58
  >
59
+ <input
60
+ class="flex-1 border-none bg-transparent px-1 py-2 pr-3 pl-10 outline-none placeholder:text-gray-400"
61
+ placeholder="Search anything on the Hub"
62
+ />
63
  </div>
64
+ <!-- <input
65
+ type="text"
66
+ placeholder="Type anything..."
67
+ class="w-full rounded-2xl border border-black bg-black px-4 py-3.5 shadow-2xl shadow-white/5 outline-none ring-gray-700 focus:ring-1 max-w-4xl"
68
+ /> -->
69
  </div>
70
  </div>