Hugging Face's logo

Spaces:
reach-vb
/
webllm-simple-chat
Running

App Files Community
1
neetnestor commited on
Commit
5ca5f25
•
1 Parent(s): 36784c4

style: UI Improvement

Browse files
Files changed (2) hide show
  1. index.html +32 -27
  2. style.css +33 -10
index.html CHANGED
@@ -1,30 +1,35 @@
1
- <!doctype html>
2
  <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>WebLLM Chat Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
 
10
- <body>
11
- <p>Step 1: Initialize WebLLM and Download Model</p>
12
- <div class="download-container">
13
- <select id="model-selection"></select>
14
- <button id="download">Download</button>
15
- </div>
16
- <p id="download-status" class="hidden"></p>
17
-
18
- <p>Step 2: Chat</p>
19
- <div class="chat-container">
20
- <div id="chat-box" class="chat-box"></div>
21
- <div id="chat-stats" class="chat-stats hidden"></div>
22
- <div class="chat-input-container">
23
- <input type="text" id="user-input" placeholder="Type a message..." />
24
- <button id="send" disabled>Send</button>
25
- </div>
26
- </div>
27
-
28
- <script src="./index.js" type="module"></script>
29
- </body>
 
 
 
 
 
30
  </html>
 
1
+ <!DOCTYPE html>
2
  <html>
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width" />
6
+ <title>WebLLM Chat Space</title>
7
+ <link rel="stylesheet" href="style.css" />
8
+ </head>
9
 
10
+ <body>
11
+ <main>
12
+ <p>Step 1: Initialize WebLLM and Download Model</p>
13
+ <div class="download-container">
14
+ <select id="model-selection"></select>
15
+ <button id="download">Download</button>
16
+ </div>
17
+ <p id="download-status" class="hidden"></p>
18
+
19
+ <p>Step 2: Chat</p>
20
+ <div class="chat-container">
21
+ <div id="chat-box" class="chat-box"></div>
22
+ <div id="chat-stats" class="chat-stats hidden"></div>
23
+ <div class="chat-input-container">
24
+ <div class="chat-input">
25
+
26
+ <input type="text" id="user-input" placeholder="Type a message..." />
27
+ <button id="send" disabled>Send</button>
28
+ </div>
29
+ </div>
30
+ </div>
31
+ </main>
32
+
33
+ <script src="./index.js" type="module"></script>
34
+ </body>
35
  </html>
style.css CHANGED
@@ -1,7 +1,16 @@
1
  body,
2
  html {
3
  font-family: Arial, sans-serif;
 
 
 
4
  padding: 10px 20px;
 
 
 
 
 
 
5
  }
6
 
7
  .download-container {
@@ -12,8 +21,7 @@ html {
12
 
13
  #download-status {
14
  border: solid 1px black;
15
- box-shadow:
16
- 0 10px 15px -3px rgba(0, 0, 0, 0.1),
17
  0 4px 6px -2px rgba(0, 0, 0, 0.05);
18
  padding: 10px;
19
  }
@@ -24,11 +32,33 @@ html {
24
  border: 2px solid black;
25
  display: flex;
26
  flex-direction: column;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
27
  }
28
 
29
  .chat-box {
30
  overflow-y: scroll;
31
- background-color: #c3c3c3;
32
  border: 1px solid #ccc;
33
  padding: 5px;
34
  flex: 1 1;
@@ -70,13 +100,6 @@ html {
70
  background: #f1f0f0;
71
  color: #333;
72
  }
73
-
74
- .chat-input-container {
75
- min-height: 40px;
76
- flex: 0 0;
77
- display: flex;
78
- }
79
-
80
  #user-input {
81
  width: 70%;
82
  padding: 10px;
 
1
  body,
2
  html {
3
  font-family: Arial, sans-serif;
4
+ }
5
+
6
+ main {
7
  padding: 10px 20px;
8
+ max-width: 48rem;
9
+ height: 100dvh;
10
+ margin-left: auto;
11
+ margin-right: auto;
12
+ display: flex;
13
+ flex-direction: column;
14
  }
15
 
16
  .download-container {
 
21
 
22
  #download-status {
23
  border: solid 1px black;
24
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
 
25
  0 4px 6px -2px rgba(0, 0, 0, 0.05);
26
  padding: 10px;
27
  }
 
32
  border: 2px solid black;
33
  display: flex;
34
  flex-direction: column;
35
+ flex-grow: 1;
36
+ overflow: hidden;
37
+ }
38
+
39
+ .chat-input-container {
40
+ padding: 16px;
41
+ box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgb(0 0 0 / .05);;
42
+ position: relative;
43
+ }
44
+
45
+ .chat-input {
46
+ min-height: 40px;
47
+ flex: 0 0;
48
+ display: flex;
49
+ gap: 8px;
50
+ border-width: 1px;
51
+ border-radius: 0.75rem;
52
+ width: 100%;
53
+ }
54
+
55
+ .chat-input input {
56
+ flex-grow: 1;
57
+ border-radius: .5rem;
58
  }
59
 
60
  .chat-box {
61
  overflow-y: scroll;
 
62
  border: 1px solid #ccc;
63
  padding: 5px;
64
  flex: 1 1;
 
100
  background: #f1f0f0;
101
  color: #333;
102
  }
 
 
 
 
 
 
 
103
  #user-input {
104
  width: 70%;
105
  padding: 10px;