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
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
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
the js file as needed.
## usage
first run examples/server

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

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

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

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