vbatts/llama.cpp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

SimpleChat: Make vertical layout better responsive (flex based)

Browse source 
Also needed to make things cleaner and properly usable whether
landscape or portrait, after changing to multiline textarea rather
than single line user input.

Avoid hardcoding the chat-till-now display area height, instead
make it a flex-growable within a flex column of ui elements within
a fixed vertical area.
This commit is contained in:
HanishKVC 2024-05-20 16:13:24 +05:30
parent dfadac7813
commit 6597fafeae
3 changed files with 48 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

4
examples/server/public_simplechat/readme.md
View file

@ -12,12 +12,16 @@ and forth chatting to an extent.
User can set a system prompt, as well as try and chat with the model over a series of back and forth chat User can set a system prompt, as well as try and chat with the model over a series of back and forth chat
messages. messages.
The UI follows a responsive web design so that the layout can adapt to available display space in a usable
enough manner, in general.
NOTE: Given that the idea is for basic minimal testing, it doesnt bother with any model context length and NOTE: Given that the idea is for basic minimal testing, it doesnt bother with any model context length and
culling of old messages from the chat. culling of old messages from the chat.
NOTE: It doesnt set any parameters other than temperature for now. However if someone wants they can update NOTE: It doesnt set any parameters other than temperature for now. However if someone wants they can update
the js file as needed. the js file as needed.
## usage ## usage
first run examples/server first run examples/server

19
examples/server/public_simplechat/simplechat.css
View file

@ -3,32 +3,47 @@
* by Humans for All * by Humans for All
*/ */
.heading { #fullbody {
height: 98vh;
}
.heading {
background-color: lightgray; background-color: lightgray;
} }
.role-system { .role-system {
background-color: lightblue; background-color: lightblue;
} }
.role-user { .role-user {
background-color: lightgray; background-color: lightgray;
} }
.flex-grow { .flex-grow {
flex-grow: 1; flex-grow: 1;
} }
.float-right { .float-right {
float: right; float: right;
} }
#chat { #chat {
height: 75vh;
overflow: scroll; overflow: scroll;
flex-grow: 1;
flex-shrink: 1;
min-height: 40vh;
} }
button { button {
min-width: 8vw; min-width: 8vw;
} }
.sameline { .sameline {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
.samecolumn {
display: flex;
flex-direction: column;
}
* { * {
margin: 0.6vmin; margin: 0.6vmin;
} }

50
examples/server/public_simplechat/simplechat.html
View file

@ -12,34 +12,38 @@
<link rel="stylesheet" href="simplechat.css" /> <link rel="stylesheet" href="simplechat.css" />
</head> </head>
<body> <body>
<div class="samecolumn" id="fullbody">
<div class="sameline">
<p class="heading flex-grow" > <b> SimpleChat </b> </p>
<div class="sameline"> <div class="sameline">
<label for="api-ep">Mode:</label> <p class="heading flex-grow" > <b> SimpleChat </b> </p>
<select name="api-ep" id="api-ep"> <div class="sameline">
<option value="chat" selected>Chat</option> <label for="api-ep">Mode:</label>
<option value="completion">Completion</option> <select name="api-ep" id="api-ep">
</select> <option value="chat" selected>Chat</option>
<option value="completion">Completion</option>
</select>
</div>
</div> </div>
</div>
<div class="sameline"> <div class="sameline">
<label for="system">System</label> <label for="system">System</label>
<input type="text" name="system" id="system" class="flex-grow"/> <input type="text" name="system" id="system" class="flex-grow"/>
</div> </div>
<hr>
<div id="chat"> <hr>
<p> Enter the system prompt above, before entering/submitting any user query.</p> <div id="chat">
<p> Enter your text to the ai assistant below.</p> <p> Enter the system prompt above, before entering/submitting any user query.</p>
<p> Use shift+enter for inserting enter.</p> <p> Enter your text to the ai assistant below.</p>
<p> Refresh the page to start over fresh.</p> <p> Use shift+enter for inserting enter.</p>
</div> <p> Refresh the page to start over fresh.</p>
</div>
<hr>
<div class="sameline">
<textarea id="user" class="flex-grow" rows="3"></textarea>
<button id="submit">submit</button>
</div>
<hr>
<div class="sameline">
<textarea id="user" class="flex-grow" rows="3"></textarea>
<button id="submit">submit</button>
</div> </div>
</body> </body>
</html> </html>