From 6597fafeae64d8bfdc3cb4a05fab2b14e140719b Mon Sep 17 00:00:00 2001 From: HanishKVC Date: Mon, 20 May 2024 16:13:24 +0530 Subject: [PATCH] SimpleChat: Make vertical layout better responsive (flex based) 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. --- examples/server/public_simplechat/readme.md | 4 ++ .../server/public_simplechat/simplechat.css | 19 ++++++- .../server/public_simplechat/simplechat.html | 50 ++++++++++--------- 3 files changed, 48 insertions(+), 25 deletions(-) diff --git a/examples/server/public_simplechat/readme.md b/examples/server/public_simplechat/readme.md index 860892d4e..caf34b5f5 100644 --- a/examples/server/public_simplechat/readme.md +++ b/examples/server/public_simplechat/readme.md @@ -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 diff --git a/examples/server/public_simplechat/simplechat.css b/examples/server/public_simplechat/simplechat.css index f7ea6ec23..cee611267 100644 --- a/examples/server/public_simplechat/simplechat.css +++ b/examples/server/public_simplechat/simplechat.css @@ -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; } diff --git a/examples/server/public_simplechat/simplechat.html b/examples/server/public_simplechat/simplechat.html index 85cc73454..b76841938 100644 --- a/examples/server/public_simplechat/simplechat.html +++ b/examples/server/public_simplechat/simplechat.html @@ -12,34 +12,38 @@ +
-
-

SimpleChat

- - +

SimpleChat

+
+ + +
-
-
- - -
-
-
-

Enter the system prompt above, before entering/submitting any user query.

-

Enter your text to the ai assistant below.

-

Use shift+enter for inserting enter.

-

Refresh the page to start over fresh.

-
+
+ + +
+ +
+
+

Enter the system prompt above, before entering/submitting any user query.

+

Enter your text to the ai assistant below.

+

Use shift+enter for inserting enter.

+

Refresh the page to start over fresh.

+
+ +
+
+ + +
-
-
- -