Server UI Improvement - New Try

[mounta11n]

Hi, six months ago I already was in process of a pull request like this, but unfortunately due lack of time I couldnt work on it until a few days ago.

So I improved more things, fixed some bugs and cleaned up my code and here is my improved lightweight server webui with the simplicity of llama.cpp in mind.

the main features are:

User Interface.
Designed with CSS for a more appealing, clean and tidy appearance.

Well Known Style.
My initial styling inspiration was the OpenAI playground. A lot of people are already used to this design. But in the meantime I have made some more color themes.

Dark and Light Themes.
As mentioned, there are now some color themes to choose from.

CSS outsourcing.
The CSS has been moved to separate files to simplify maintenance and hacking.

Dropdown-Menus.
Convenient Drop-down menus for predefined prompt formats and system prompts have been added.

Modular structure.
Prompt formats and system prompts are stored in separate files, which makes editing very easy.

More freedom.
Prompt formats and system prompts are independent of each other and can therefore be combined as required.

Added a lot of tooltips.
With comprehensible explanations regarding each parameter.

You can finde more information here:

https://github.com/mounta11n/plusplus-camall/tree/plusplus

Here are some impressions:

[mounta11n]

Great! I like that the old UI is also available

Minor nit about the file names - prefer using kebab-case for consistency with the rest of the project:

• promptFormats.js -> prompt-formats.js
• EN_systemPrompts.js -> EN_system-prompts.js
• DE_systemPrompts.js -> DE_system-prompts.js

Alright, I have renamed the files.

I have noticed that if I want the "New UI" button and therefore the linking to the new ui and vice versa, linking back to old ui, I had to add the new files to server.cpp as static files too.
Otherwise we would have again the problem, that the user has to explicitly add the --path each time starting the server.

[mounta11n]

Please note that I have removed the german translation files and therefore the prefix "EN_" as well, since multilingual UI feature is in very early stage currently and has no relevance for now. There is a lot of work to do first.

@mofosyne that sounds great, thanks : )

some checks are in progress at this moment, I will look into it soon again.

@characharm that's a good point, but my initial idea was to work around the original old ui and keep its 'personality' (simplicity, lightweight), so without introducing new functionality if not necessary (like the prompt format handling, which I think is absolute necessary).
But I personally would be anyway totally okay with a minimalstic and subtile copy to clipboard button, if the main devs would give an okay as well. What are your thoughts @mofosyne @ggerganov?

[ggerganov]

But I personally would be anyway totally okay with a minimalstic and subtile copy to clipboard button, if the main devs would give an okay as well.

That's right, as long as the new features are reasonably simple / cosmetic we can add them.

[ggerganov]

There are some errors in the CI workflows that should be fixed

[mounta11n]

There are some errors in the CI workflows that should be fixed

I have converted the indents and added the new files into the makefile – so that should be fixed now.

But I am struggling with the suddenly occured Server Jobs error, like:

#...
 HEAD detached at c0b154a7
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
	modified:   public/index.js

no changes added to commit (use "git add" and/or "git commit -a")
Modified files: public/index.js
Repository is dirty or server deps are not built as expected
public/index.js
Error: Process completed with exit code 1.

I am wondering what this means, since until commit bc69a1e it was successful and I did not changed anything in index.js

I would be very happy if you could give me some advice @ggerganov

[ggerganov]

I think this is not related to the changes in this PR - seems like the JS library that we use has been updated upstream: #7670

[mounta11n]

Ahh okay I see, so there is nothing else I can do right now but waiting, right?

[LoopControl]

Excited at seeing this UI overhaul.

I tend to fallback to using the UI so great to see a refresh.

[mounta11n]

Hey guys, I would just like to ask politely whether there has been any progress in the meantime or how we should proceed? @mofosyne @ggerganov

[LoopControl]

@mounta11n Tried this out and it looks great.

Unfortunately, it looks like the new UI doesn't seem to be respecting any new-lines in the output and crams all the text together. If I switch back to the original UI, line breaks render correctly.

[hanishkvc]

@LoopControl @mounta11n there is a simple minded simplechat webui added to lllama.cpp now (it is under examples/server/public_simplechat). It supports both /completions and /chat/completions endpoints, auto garbage trimming, implicit chat session saving. You may want to give it a shot also.

#7548 is merged earlier today.

it doesnt try to allow control of all chat request options implicitly, or multi model interaction or so, but for basic chatting or testing it could be useful. Also its idea is to keep things simple for non-webfrontend developers to also be able to modifying it for local experimentation or testing and so.

[khimaros]

@mounta11n it seems like this new UI is not taking advantage of the KV cache at all in chat mode.

as far as i can tell from timing, each subsequent message results in re-evaluating the complete history of that chat. is this expected? see also #7185

i'm testing this with llama3 model using the llama3 prompt format. chat becomes slower as the size of the chat grows, unlike with the old UI using the default chat template.