happyz
/
llama.cpp
mirror of https://github.com/ggerganov/llama.cpp.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

SimpleChatTCRV:UI theme cleanup - html+css r3 

Move the heading, sessions list and system prompt into a details
block so that user can hide them if required.

avoid the borders around chat message blocks and the chat message
role blocks within them, instead go for a subtle box shadow.

Use gradiants wrt heading, as well as chat message role based color
codings.

Update both the normal/screen view as well as the print view wr
above.
This commit is contained in:
hanishkvc 2025-11-18 11:35:30 +05:30
parent 9f782d70b8
commit 92bd3557d5
2 changed files with 40 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
tools/server/public_simplechat/index.html
View File

@ -23,21 +23,21 @@
<body> <body>
<div class="samecolumn" id="fullbody"> <div class="samecolumn" id="fullbody">
<div class="sameline" id="heading"> <details open>
<div class="heading flex-grow" > <b> SimpleChat </b> </div> <summary class="sameline" id="heading">
<div class="flex-nogrow"> <div class="heading flex-grow" > <b> SimpleChat </b> </div>
<button id="clearchat">&#x1F9F9; ClearChat</button> <div class="flex-nogrow">
<button id="settings">&#x2699; Settings</button> <button id="clearchat">&#x1F9F9; ClearChat</button>
</div> <button id="settings">&#x2699; Settings</button>
</div> </div>
</summary>
<div id="sessions-div" class="sameline"></div> <div id="sessions-div" class="sameline"></div>
<hr> <hr>
<div class="sameline"> <div class="sameline">
<label for="system-in">System</label> <label for="system-in">System</label>
<textarea name="system" id="system-in" rows="2" placeholder="e.g. you are a helpful ai assistant, who provides concise answers" class="flex-grow"></textarea> <textarea name="system" id="system-in" rows="2" placeholder="e.g. you are a helpful ai assistant, who provides concise answers" class="flex-grow"></textarea>
</div> </div>
</details>
<hr> <hr>
<div id="chat-div"> <div id="chat-div">

55
tools/server/public_simplechat/simplechat.css
View File

@ -3,15 +3,21 @@
* by Humans for All * by Humans for All
*/ */
:root {
--background-color: #f4f4f9
}
body { body {
background-color: #f8f9fa; background-color: var(--background-color);
font-family: 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
} }
#fullbody { #fullbody {
height: 98vh; height: 98vh;
} }
.heading { #heading {
background: linear-gradient(135deg, lightblue 0%, white 100%); background: linear-gradient(135deg, var(--background-color) 0%, lightblue 100%);
margin: 0;
} }
.session-selected { .session-selected {
@ -19,17 +25,16 @@ body {
} }
.role-system { .role-system {
background-color: lightblue; background: linear-gradient(135deg, lightblue 0%, var(--background-color) 100%);
} }
.role-user { .role-user {
background-color: lightgray; background: linear-gradient(135deg, lightgray 0%, var(--background-color) 100%);
} }
.role-assistant { .role-assistant {
text-align: initial; text-align: initial;
} }
.role-tool { .role-tool {
/* background-color: cornsilk; */ background: linear-gradient(135deg, var(--background-color) 0%, lightyellow 100%);
background-color: lightyellow;
} }
.role-trim { .role-trim {
background-color: lightpink; background-color: lightpink;
@ -40,24 +45,22 @@ body {
} }
.chat-message { .chat-message {
border-style: solid;
border-color: grey;
border-width: thin;
border-radius: 1vmin;
display: flex; display: flex;
border-radius: 1vmin;
margin-bottom: 2vh; margin-bottom: 2vh;
/* box-shadow: 1px 1px 4px lightslategray; */ border: none;
padding: 0.4vmin;
padding-left: 0;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
} }
.chat-message:hover { .chat-message:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
} }
.chat-message-role { .chat-message-role {
border-style: dotted; border: none;
border-color: black;
border-width: thin;
border-radius: 4px;
writing-mode: vertical-lr; writing-mode: vertical-lr;
padding-inline: 1vmin; padding-inline: 1vmin;
border-right: 1px solid rgba(0, 0, 0, 0.2);
} }
.chat-message-reasoning { .chat-message-reasoning {
border-block-style: dashed; border-block-style: dashed;
@ -159,6 +162,7 @@ button {
padding-inline: 2vmin; padding-inline: 2vmin;
border-radius: 1vmin; border-radius: 1vmin;
min-height: 3vmin; min-height: 3vmin;
border-color: lightgray;
} }
.sameline { .sameline {
@ -193,25 +197,28 @@ button {
@media print { @media print {
body {
background-color: white;
}
#fullbody { #fullbody {
height: auto; height: auto;
} }
.chat-message { .chat-message {
border-style: solid;
border-color: grey;
border-width: thin;
border-radius: 2px;
display:inherit; display:inherit;
padding: 0.4vmin;
border-radius: 1vmin;
margin-bottom: 2vh;
border: none;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
} }
.chat-message-role { .chat-message-role {
border-style: dotted;
border-color: black;
border-width: thin;
border-radius: 4px;
writing-mode:inherit; writing-mode:inherit;
max-width: fit-content;
padding-inline: 1vmin; padding-inline: 1vmin;
border: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
} }