server webui easy config selection #12031

poulphunter · 2025-02-22T19:29:52Z

Add to webui a quick access for custom configurations (including prompt).

As asked by @xydac in an old PR, the chat prompts from https://github.com/f/awesome-chatgpt-prompts has been loaded in the config json file.

ngxson · 2025-02-22T20:19:51Z

From UX perspective, this will be confused for most users who are not very technical, as they expect all settings to be accessible from UI, not from a file. And from UI perspective, this breaks the UI on mobile and also make it feels messy.

So I think we should keep this as a demo for now. If more users need this, we can rethink how to make a better UX/UI.

…opdown)

poulphunter · 2025-02-23T13:08:16Z

From UX perspective, this will be confused for most users who are not very technical, as they expect all settings to be accessible from UI, not from a file. And from UI perspective, this breaks the UI on mobile and also make it feels messy.

So I think we should keep this as a demo for now. If more users need this, we can rethink how to make a better UX/UI.

Now, it's not activated when no json config file is given.
Example file is given but need to be renamed to be used.
From UX perspective, it's now on the settings button and we can manually set it or choose a preset, it's easier to understand.
UI is better on mobile but I haven't fixed legacy Settings dialog that is messy on small devices.

Is also added prompt suggestions.
I've fix the Conversation menu that always show first on mobile.

poulphunter · 2025-02-23T13:11:52Z

From UX perspective, this will be confused for most users who are not very technical, as they expect all settings to be accessible from UI, not from a file. And from UI perspective, this breaks the UI on mobile and also make it feels messy.
So I think we should keep this as a demo for now. If more users need this, we can rethink how to make a better UX/UI.

Now, it's not activated when no json config file is given. Example file is given but need to be renamed to be used. From UX perspective, it's now on the settings button and we can manually set it or choose a preset, it's easier to understand. UI is better on mobile but I haven't fixed legacy Settings dialog that is messy on small devices.

Is also added prompt suggestions. I've fix the Conversation menu that always show first on mobile.

… ideas * add translations packages * add translations packages * begining of translation * Check for reverse prompt by characters instead of tokens (ggml-org#292) (ggml-org#330) * Check for reverse prompt by characters instead of tokens (ggml-org#292) * Update main.cpp Wording. * Cleanup. * Remove unnecessary use of std::stringstream. --------- Co-authored-by: Johnman <tjohnman@github> Co-authored-by: Georgi Gerganov <ggerganov@gmail.com> * metal : fix `ggml_metal_log` vargs (ggml-org#4373) * docs: utilize the forward slash (/) as the path separator for Unix-like systems (ggml-org#11770) * close dropdown Menu function * no export here * automatic close sidebar when choice is made (mobile UX improvement) * fix closeDropDownMenu * Translation config in Header now * Translation config in Header now * French promt example * continue translation * continue translation * change refreshing when language is selected will use first config in json file if present and if in the correct language * Add languages and translations * fix loading when no prompt from language is found * fix click on manual settings if already checked in dropdown * rename Sidebar to ConversationList, better understanding, refactor code to have all that concerns this component in the same place * rename Sidebar to ConversationList, better understanding, refactor code to have all that concerns this component in the same place * rename Sidebar to ConversationList, better understanding, refactor code to have all that concerns this component in the same place * UI improvements UX is easier to understand * json reformat * UI buttons margins * configs and language selection in appcontext, improve UI * continue translation * add favicon (no more console log errors) * start changing Setting Dialog * fix color in light/auto theme * fix color in light/auto theme * UX/UI improvements, no more drawer * code refactor * code refactor, continue translation, UX/UI improvements * fix key * format * format * loading / save presets * translations * build * embed translations * remove log * code refactor, main functions in app.context * build * fix not needed, revert * New README.md for Web UI app. * prompts renamed to presets * favicon * remove unused parameter in json preset files * add favicon (no more console logs) * new build * readme and screenshoots --------- Co-authored-by: Votre Nom <Vous@exemple.com> Co-authored-by: tjohnman <tjohnman@users.noreply.github.com> Co-authored-by: Johnman <tjohnman@github> Co-authored-by: Georgi Gerganov <ggerganov@gmail.com> Co-authored-by: Finn Voorhees <finnvoorhees@gmail.com> Co-authored-by: jason_w <jason.wang@126.com> Co-authored-by: poulphunter <>

poulphunter · 2025-02-26T12:57:38Z

Big changes in last commit, translations, presets, suggestions ideas, lot's of UX/UI improvements.
Cleaner code, refactor of parts that may not be in right component etc...
Separate readme for Web UI project.
@ngxson can you review it ?

ngxson · 2025-02-26T13:24:25Z

examples/server/webui/src/i18n.tsx

+import Backend from 'i18next-http-backend';
+import LanguageDetector from 'i18next-browser-languagedetector';
+
+import translationCN from './locales/cn/translation.json';


I don't think i18n is something we should add right now. I did i18n in various web app product before and the maintenance cost is just too much.

For a small frontend project like this, i18n introduces too many works in the future.

Translation was something that was aked to me.
It's a little weird to ask translation in an app that cannot support the language you ask translation for...
This also make sens as system prompt can be in other languages and we can see "prompt master" user that don't understand well English.
It's heavy for user who begin to use something as embed model with llamafile to have a frontend that ask them for "temperature" with no language friendly explanation.

I have no vision of the future of llama cpp and parameters, if it changes a lots.
I've just in mind that only English can be maintained (with near 0 new cost) as it's the default translation used if language translation was not found.
For costs in mind, I'm not sure that Python interpreter was needed in "small frontend" (I don't consider a ~2.5Mo app as "small frontend" by the way).

ngxson

I don't have time to review everything here. Your screenshots look good, but problems are:

There are too many changes grouped into single PR, I cannot review all of them. Please at least break them down into smaller PRs.
Most of the introduced functions like i18n or questionIdeas bring too much code into the project. Since we're currently aiming for simplicity, I don't think we should add these functions right away. If you have a look on the old webui, it actually has a lot more features compare to this, but with the cost of no one maintaining it.
The code is not very clean, i.e. still many places use getElementById to bypass using proper react ref or component. This will be a lot of headaches when come to managing states.

ngxson · 2025-02-26T13:25:28Z

examples/server/webui/src/components/Header.tsx

+            className="h-4 w-4"
+          >
+            <path
+              fillRule="evenodd"


We've already moved to heroicons, so plain svg like this is not recommended

I don't think that task can be asked here as code was already messy with sometimes icon sometimes svg.
I think refactoring icon can be a separate task (with low priority since it have a very small impact).

By the way, I don't think it's wise to use lot's of libraries (as heroicons) for now, as it adds dependencies (libraries) vs near zero cost because index is compressed. To maintain there are lot's of other tasks to do with higher priority.

poulphunter · 2025-02-26T17:09:51Z

I don't have time to review everything here. Your screenshots look good, but problems are:
* There are too many changes grouped into single PR, I cannot review all of them. Please at least break them down into smaller PRs.

I've start doing it, but as you asked me to think about UX/UI, I've found lot's of code very messy (modal dialog in mobile was very hard, UX needs lot's of click to open/select/close something, some part of code where sometimes in an other component with no reason, "drawer" was very painful for UX).
It was hard to understand this code, so I've cleaned it in the same time of other functions development, a separate PR would have cost me too much time.
Also, it ask lot's of cost to separate things like "translations" and "presets" as it depends of each other to work well. I've done that in few days, separate PR would have cost few weeks...

* Most of the introduced functions like i18n or `questionIdeas` bring too much code into the project. Since we're currently aiming for simplicity, I don't think we should add these functions right away. If you have a look on the old webui, it actually has a lot more features compare to this, but with the cost of no one maintaining it.

I don't know the reason for other dev. to not maintain legacy projects (I've started to update legacy version before see that it has been replaced by a react app).
Old code was not LLM beginners friendly, it was very hard to understand to peoples I've given "packages" to begin playing with local LLM, but was easier to maintain (adapt) for me as the code was smaller.
I had thinked that if the project change from "small project" of ~250ko to a >2.5Mo react app (that don't fully work on my old browsers) for reasons like not to be a "small project" anymore but a fully usable project (not just a demo), larger community that can help improve it, etc...
I tried to make the application more accessible for non-computer scientists, I don't know if that's the direction of this project.
It have already more complex features like Python interpreter that is not necessary for lot's of peoples and hard to maintain.

* The code is not very clean, i.e. still many places use `getElementById` to bypass using proper react ref or component. This will be a lot of headaches when come to managing states.

I've done states management with the help of some coffee ! I think it can be refactored in a more understandable way.
It's explained in the documentation Readme I've added, an it make app really more intuitive.

I've start to use "getElementById" to bypass dropdown UX non-sense of DaisyUI, it's not React and is also lighter, I don't think I will change that as React isn't needed and is heavier for performances, for browsers.
But I may rewrite block visibility using "getElementById" to take full advantages of animations, theme etc...

I give you this improvements but I don't think I will maintain C++ app, so it's up to you to use it or not.
As mentioned above, if it's not in the spirit of the app, I can start a separate project.
I think I will add some other features such as cutting text into chunks for making summaries of large texts.

Votre Nom added 2 commits February 22, 2025 19:39

add config selection

ba4f3fa

Add doc to readme

1adfa45

poulphunter requested a review from ngxson as a code owner February 22, 2025 19:29

github-actions bot added examples server labels Feb 22, 2025

fix useEffect infinite loop

299d404

ngxson added the demo Demonstrate some concept or idea, not intended to be merged label Feb 22, 2025

Votre Nom added 12 commits February 23, 2025 00:23

Json configuration file, if present will now replace Settings tab.

6a0a505

reorder, first prompt is now the full configuration example

b8fe19d

prompt file not named by default

6c00bb5

new build

bd13909

load config from json at loading if json config file is present

dd5ed62

doc, example added

72926d5

add Manual settings to menu

edc6903

add prompt suggestions

2fccb87

make Config dropdown disappear when clicked (may be used for other dr…

f018a23

…opdown)

remove conversation show on app start, UX will be better without

1568aa2

new build

5994551

npm format

5e40b3e

poulphunter and others added 2 commits February 26, 2025 13:32

Merge remote-tracking branch 'upstream/master'

823ad4c

ngxson reviewed Feb 26, 2025

View reviewed changes

Merge branch 'ggml-org:master' into master

50338ed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

server webui easy config selection #12031

server webui easy config selection #12031

poulphunter commented Feb 22, 2025

Uh oh!

ngxson commented Feb 22, 2025 •

edited

Loading

Uh oh!

poulphunter commented Feb 23, 2025

Uh oh!

poulphunter commented Feb 23, 2025

Uh oh!

poulphunter commented Feb 26, 2025

Uh oh!

ngxson Feb 26, 2025

Uh oh!

poulphunter Feb 26, 2025

Uh oh!

ngxson left a comment

Uh oh!

ngxson Feb 26, 2025

Uh oh!

poulphunter Feb 26, 2025

Uh oh!

poulphunter commented Feb 26, 2025

Uh oh!

Uh oh!

server webui easy config selection #12031

Are you sure you want to change the base?

server webui easy config selection #12031

Conversation

poulphunter commented Feb 22, 2025

Uh oh!

ngxson commented Feb 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

poulphunter commented Feb 23, 2025

Uh oh!

poulphunter commented Feb 23, 2025

Uh oh!

poulphunter commented Feb 26, 2025

Uh oh!

ngxson Feb 26, 2025

Choose a reason for hiding this comment

Uh oh!

poulphunter Feb 26, 2025

Choose a reason for hiding this comment

Uh oh!

ngxson left a comment

Choose a reason for hiding this comment

Uh oh!

ngxson Feb 26, 2025

Choose a reason for hiding this comment

Uh oh!

poulphunter Feb 26, 2025

Choose a reason for hiding this comment

Uh oh!

poulphunter commented Feb 26, 2025

Uh oh!

Uh oh!

ngxson commented Feb 22, 2025 •

edited

Loading