Skip to content

Commit 17c4c7a

Browse files
corebontscorebonts
committed
Improve small and touch screen experience
- Full screen "chat application like" interface on small screens - Smaller spacings and header
1 parent 7bfb94d commit 17c4c7a

File tree

5 files changed

+146
-48
lines changed

5 files changed

+146
-48
lines changed

‎llamafile/server/www/chatbot.css‎

Lines changed: 114 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,12 @@
44
box-sizing: border-box;
55
}
66

7+
html {
8+
--small-spacing: 0.5rem;
9+
--medium-spacing: 0.75rem;
10+
--large-spacing: 1.0rem;
11+
}
12+
713
html,
814
body {
915
height: 100%;
@@ -19,7 +25,7 @@ body {
1925
flex-direction: column;
2026
align-items: center;
2127
justify-content: flex-start;
22-
padding: 1rem;
28+
padding: var(--large-spacing);
2329
}
2430

2531
p {
@@ -38,7 +44,7 @@ p {
3844
}
3945

4046
.chat-header {
41-
padding: 1rem;
47+
padding: var(--large-spacing);
4248
background: #f8f9fa;
4349
border-bottom: 1px solid #e9ecef;
4450
border-radius: 12px 12px 0 0;
@@ -60,7 +66,7 @@ p {
6066
.chat-messages {
6167
flex: 1;
6268
overflow-y: auto;
63-
padding: 1rem;
69+
padding: var(--large-spacing);
6470
position: relative;
6571
}
6672

@@ -96,7 +102,7 @@ ul li:first-child {
96102
}
97103

98104
.message {
99-
padding: 0.75rem;
105+
padding: var(--medium-spacing);
100106
border-radius: 8px;
101107
word-wrap: break-word;
102108
background: var(--message-background);
@@ -106,6 +112,7 @@ ul li:first-child {
106112
--message-background: #e9ecef;
107113
margin-left: auto;
108114
max-width: 80%;
115+
width: max-content;
109116
}
110117

111118
.message-wrapper.assistant {
@@ -171,15 +178,15 @@ ul li:first-child {
171178
}
172179

173180
.chat-input-container {
174-
padding: 1rem;
181+
padding: var(--large-spacing);
175182
border-top: 1px solid #e9ecef;
176183
display: flex;
177-
gap: 0.5rem;
184+
gap: var(--small-spacing);
178185
}
179186

180187
.chat-input {
181188
flex: 1;
182-
padding: 0.75rem;
189+
padding: var(--medium-spacing);
183190
border: 1px solid #dee2e6;
184191
border-radius: 6px;
185192
font-size: 1rem;
@@ -242,13 +249,16 @@ ul li:first-child {
242249
border-radius: 6px;
243250
cursor: pointer;
244251
transition: color 0.2s;
252+
box-sizing: content-box;
253+
min-width: 24px;
254+
min-height: 24px;
245255
}
246256

247257
.chat-input-button-container {
248258
display: flex;
249259
flex-direction: column;
250260
align-self: flex-end;
251-
gap: 0.5em;
261+
gap: var(--small-spacing);
252262
}
253263

254264
.chat-input-button-container button img,
@@ -260,32 +270,32 @@ ul li:first-child {
260270

261271
.chat-input-button-row {
262272
display: flex;
263-
gap: 0.5rem;
273+
gap: var(--small-spacing);
264274
}
265275

266276
.chat-input-button-row button,
267277
.menu-trigger,
268-
.completions-controls button {
269-
padding: 0.5rem .5rem;
278+
.completions-controls .settings-button {
279+
padding: var(--small-spacing);
270280
background: #9299a0;
271281
}
272282

273283
.chat-input-button-row button:hover,
274284
.menu-trigger:hover,
275-
.completions-controls button:hover {
285+
.completions-controls settings-button:hover {
276286
background: #5c636a;
277287
}
278288

279289
.send-button,
280290
button.complete-button {
281291
padding: 0.75rem 1.5rem;
282-
background: #0d6efd;
292+
background-color: #0d6efd;
283293
font-size: 1rem;
284294
}
285295

286296
.send-button:hover,
287297
button.complete-button:hover {
288-
background: #0b5ed7;
298+
background-color: #0b5ed7;
289299
}
290300

291301
.send-button:disabled,
@@ -296,12 +306,12 @@ button.complete-button:disabled {
296306

297307
.stop-button {
298308
padding: 0.75rem 1.5rem;
299-
background: #dc3545;
309+
background-color: #dc3545;
300310
font-size: 1rem;
301311
}
302312

303313
.stop-button:hover {
304-
background: #bb2d3b;
314+
background-color: #bb2d3b;
305315
}
306316

307317
.stop-button:disabled {
@@ -341,8 +351,8 @@ button.complete-button:disabled {
341351

342352
pre .copy-button {
343353
position: absolute;
344-
top: 0.5rem;
345-
right: 0.5rem;
354+
top: var(--small-spacing);
355+
right: var(--small-spacing);
346356
z-index: 1;
347357
}
348358

@@ -368,7 +378,10 @@ pre .copy-button {
368378
padding: 20px;
369379
border-radius: 8px;
370380
max-width: 500px;
371-
width: 90%;
381+
width: calc(100% - var(--large-spacing));
382+
max-height: calc(100% - var(--large-spacing));
383+
display: flex;
384+
flex-direction: column;
372385
}
373386

374387
.settings-header {
@@ -378,6 +391,12 @@ pre .copy-button {
378391
margin-bottom: 20px;
379392
}
380393

394+
.settings-content {
395+
width: 100%;
396+
height: 100%;
397+
overflow: auto;
398+
}
399+
381400
.settings-header button {
382401
background: none;
383402
border: none;
@@ -503,13 +522,13 @@ pre .copy-button {
503522
flex: 1;
504523
display: flex;
505524
flex-direction: column;
506-
padding: 1rem;
525+
padding: var(--large-spacing);
507526
}
508527

509528
#completions-input {
510529
flex: 1;
511-
padding: 1rem;
512-
margin-bottom: 1rem;
530+
padding: var(--large-spacing);
531+
margin-bottom: var(--large-spacing);
513532
border: 1px solid #dee2e6;
514533
border-radius: 6px;
515534
font-size: 1rem;
@@ -520,7 +539,7 @@ pre .copy-button {
520539

521540
.completions-controls {
522541
display: flex;
523-
gap: 0.5rem;
542+
gap: var(--small-spacing);
524543
}
525544

526545
.mode-dropdown {
@@ -686,3 +705,75 @@ pre .copy-button {
686705
vertical-align: middle;
687706
margin-left: 0.2rem;
688707
}
708+
709+
@media (max-width: 768px) {
710+
html {
711+
--large-spacing: 0.5rem;
712+
--medium-spacing: 0.45rem;
713+
--small-spacing: 0.4rem;
714+
}
715+
716+
body {
717+
padding: 0;
718+
background: white;
719+
}
720+
721+
.chat-container {
722+
border-radius: 0;
723+
box-shadow: none;
724+
height: 100%;
725+
}
726+
727+
.chat-header h1 {
728+
font-size: 1rem;
729+
}
730+
731+
.chat-header img.logo {
732+
width: calc(24px + 2* 0.25rem);
733+
height: calc(24px + 2* 0.25rem);
734+
}
735+
736+
.message-wrapper.user {
737+
max-width: 90%;
738+
}
739+
740+
.message-wrapper.assistant {
741+
max-width: 100%;
742+
}
743+
744+
.chat-input {
745+
line-height: 1.25;
746+
}
747+
748+
.chat-input-button-container {
749+
display: grid;
750+
grid-template-columns: 1fr 1fr;
751+
}
752+
753+
.chat-input-button-row {
754+
display: contents;
755+
}
756+
757+
.chat-input-container .send-button,
758+
.chat-input-container .stop-button {
759+
padding: 0.25rem;
760+
font-size: 0;
761+
color: transparent !important;
762+
background-size: 24px;
763+
background-position: center;
764+
background-repeat: no-repeat;
765+
}
766+
767+
.chat-input-container .send-button {
768+
background-image: url('./send.svg');
769+
}
770+
771+
.chat-input-container .stop-button {
772+
background-image: url('./stop.svg');
773+
}
774+
775+
.completions-controls .complete-button,
776+
.completions-controls .stop-button {
777+
padding: var(--small-spacing) var(--large-spacing);
778+
}
779+
}

‎llamafile/server/www/chatbot.js‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -117,8 +117,10 @@ function createMessageElement(content) {
117117
}
118118

119119
function scrollToBottom() {
120-
if (!disableAutoScroll)
121-
document.getElementById("bottom").scrollIntoView({behavior: "instant"});
120+
if (!disableAutoScroll) {
121+
document.getElementById("bottom").scrollIntoView({ behavior: "instant" });
122+
chatMessages.scrollTop = chatMessages.scrollHeight;
123+
}
122124
}
123125

124126
function onChatInput() {
@@ -140,7 +142,7 @@ function cleanupAfterMessage() {
140142
}
141143

142144
function onWheel(e) {
143-
if (e.deltaY < 0)
145+
if (e.deltaY == undefined || e.deltaY < 0)
144146
disableAutoScroll = true;
145147
}
146148

@@ -507,7 +509,7 @@ function updateModelInfo() {
507509
document.getElementById("model-completions").textContent = modelName;
508510
}
509511
if (!flagz.nologo) {
510-
document.getElementById("logo").style.display = "inline-block";
512+
document.querySelectorAll(".logo").forEach(logo => logo.style.display = "inline-block");
511513
}
512514
}
513515

@@ -816,6 +818,7 @@ async function chatbot() {
816818
redoButton.addEventListener("click", onRedo);
817819
chatInput.addEventListener("input", onChatInput);
818820
chatInput.addEventListener("keydown", onKeyDown);
821+
chatMessages.addEventListener("touchmove", onWheel);
819822
document.addEventListener("wheel", onWheel);
820823
document.addEventListener("dragenter", onDragBegin);
821824
document.addEventListener("dragover", onDragBegin);

‎llamafile/server/www/index.html‎

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<h1>
1212
<img src="chatbot.png"
1313
width="64" height="64"
14-
id="logo" style="display:none"
14+
class="logo" style="display:none"
1515
alt="[llamafile]" title="llamafile">
1616
<span id="model">loading...</span>
1717
</h1>
@@ -50,7 +50,7 @@ <h1>
5050
<div class="completions-container" id="completions-interface" style="display:none">
5151
<div class="chat-header">
5252
<h1>
53-
<img src="chatbot.png" alt="[llamafile]" title="llamafile" width="64" height="64">
53+
<img src="chatbot.png" class="logo" alt="[llamafile]" title="llamafile" width="64" height="64">
5454
<span id="model-completions">llamafile</span>
5555
</h1>
5656
<div class="menu-dropdown">
@@ -76,25 +76,27 @@ <h1>
7676
<h2>Model Settings</h2>
7777
<button id="close-settings"><img src="close.svg" alt="[x]" width="24" height="24"></button>
7878
</div>
79-
<div class="setting-item">
80-
<label>temperature = <span id="temp-value">0.8</span></label>
81-
<input type="range" id="temperature" min="0" max="2" step="0.01" value="0.8">
82-
<p class="setting-description">How much randomness to use during sampling. Higher values improve improvisation, and lower values result in determinism.</p>
83-
</div>
84-
<div class="setting-item">
85-
<label>top_p = <span id="top-p-value">0.95</span></label>
86-
<input type="range" id="top-p" min="0.01" max="1" step="0.01" value="0.95">
87-
<p class="setting-description">Controls diversity via nucleus sampling. Reduces the probability mass from which to sample.</p>
88-
</div>
89-
<div class="setting-item">
90-
<label>presence_penalty = <span id="presence-value">0</span></label>
91-
<input type="range" id="presence-penalty" class="penalty-range" min="-2" max="2" step="0.1" value="0">
92-
<p class="setting-description">Positive values discourage repetition; negative values encourage it.</p>
93-
</div>
94-
<div class="setting-item">
95-
<label>frequency_penalty = <span id="frequency-value">0</span></label>
96-
<input type="range" id="frequency-penalty" class="penalty-range" min="-2" max="2" step="0.1" value="0">
97-
<p class="setting-description">Penalizes new tokens based on their frequency in the text so far.</p>
79+
<div class="settings-content">
80+
<div class="setting-item">
81+
<label>temperature = <span id="temp-value">0.8</span></label>
82+
<input type="range" id="temperature" min="0" max="2" step="0.01" value="0.8">
83+
<p class="setting-description">How much randomness to use during sampling. Higher values improve improvisation, and lower values result in determinism.</p>
84+
</div>
85+
<div class="setting-item">
86+
<label>top_p = <span id="top-p-value">0.95</span></label>
87+
<input type="range" id="top-p" min="0.01" max="1" step="0.01" value="0.95">
88+
<p class="setting-description">Controls diversity via nucleus sampling. Reduces the probability mass from which to sample.</p>
89+
</div>
90+
<div class="setting-item">
91+
<label>presence_penalty = <span id="presence-value">0</span></label>
92+
<input type="range" id="presence-penalty" class="penalty-range" min="-2" max="2" step="0.1" value="0">
93+
<p class="setting-description">Positive values discourage repetition; negative values encourage it.</p>
94+
</div>
95+
<div class="setting-item">
96+
<label>frequency_penalty = <span id="frequency-value">0</span></label>
97+
<input type="range" id="frequency-penalty" class="penalty-range" min="-2" max="2" step="0.1" value="0">
98+
<p class="setting-description">Penalizes new tokens based on their frequency in the text so far.</p>
99+
</div>
98100
</div>
99101
</div>
100102
</div>

‎llamafile/server/www/send.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎llamafile/server/www/stop.svg‎

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)