server/public_simplechat alternate web client ui update - uncompressed 300KB - built in client side tool calls with 0 setup - reasoning - vision #17415
+5,198
−501
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
also now track header, footer and nav so that they arent captured
Add a new send headers common helper and use the same wrt the overridden send_error as well as do_OPTIONS This ensures that if there is any error during proxy opertions, the send_error propogates to the fetch from any browser properly without browser intercepting it with a CORS error
So that the same error path is used for logical error wrt http req also, without needing a different path for it. Dont forget to return the resp text/json/..., so that the contents are passed along the promise then chain
Make the previously relatively generic flow wrt apiRequestOptions settings into a fully generic reusable by others flow. Rather had stopped short of it, when previously moved onto other things at that time.
Bring more user controllable properties into this new settings ui
Use it to handle apiEP and iRecentUserMsgCnt in more user friendly way, where they get a selection to choose from.
Use same to set a placeholder for Authorization entry in headers
Take care of the possibility of content not being there as well as take care of retrieving the tool calls for further processing. With this tool calls should work in non streaming mode also
NOTE: not a robust check, just tries to establish a http connection for now and doesnt really check if it is the specific proxy srvr of interest or not.
Also fetch info from ai-server, and place path and ctx size into current Me instance and include in show info.
Also create a top level div wrt whole. And allow class to be specified for the same as well as the top level legend, optionally
Also ensure when switching between sessions, the full set of props info is shown.
Also update the readme wrt same and related
Part 1 - add el prefix wrt the element handle related vars
Maintain the current property hierarchy to its root over recursive calls. Allow callers to specify the props to be trapped using the prop hierarchy. Pass the prop hierarchy to the fTrapper. This should allow one to trap any prop wrt its editing ui setup, irrespective of whether it is a prop of the main object passed, or a member of a child prop of the main object passed or so ... Update the setting up of ChatHistoryInCtxt and ApiEndPoint to follow the new semantic/flow.
Fix up the oversights wrt any depth trapping flow Remember to start the propWithTree being checked/trapped with : to indicate the root of the prop hierarchy and also use : as sep between the elements of the props hierarchy tree Also had forgotten about the goof up possible with using in in a condition statement to check for array to contain a entry of interest in JS, fixed it now.
Allow AutoCreated Object Properties Editing UI to be themed to an extent by assigning a id to the top level element, which is based on the legend specified. Use the same to add inline padding as well as adjust border radius wrt the elements within, for the Settings ui. And min height and border width wrt input, select and buttons within. Similarly for the default Usage,Restore and SettingsInfo summary titles, avoid border-radius. Show the string representation of the sliding window selected. Add some padding to system prompt input.
Had forgotten to use ${} for variable within a literal template
string.
Had forgotten to use the full hierarchy of props when setting the
id of elements, which is useful to map a label to a button and so.
This would have led to the wrong button being clicked when a label
with duplicated id was clicked. Ie if two different objects within
a object, have properties/fields with the same name, then previously
this would have led to a bunch of labels and buttons or so having
the same id, bcas their hierarchy was not being accounted for. This
is fixed now.
Now use javascript to trap the button click and inturn change css class to hide or show the corresponding div. This moving away from details with summary being the top level title + buttons block, avoids the warning wrt non standard use of details element, as well as gives a clear icon to end users wrt toggling the sessions+systemprompt block.
Also support w ie day of week.
Add better visual cues wrt the tool call trigger block and the user input block, and inturn remove the now unneeded horizontal seperation line between chat messages block and the tool call trigger block. Bring in the user role color gradient to the full user input block Change the TEMP roles to use -TEMP instead of .TEMP suffix, so that role based css rules get applied without any complexity that may inturn not get applied. Avoid extra newlines in the err message returned by the tool call workers. Given that now there is a proper tool call response sent back to the ai backend/server, without using user and ai text content block itself to maintain the tool call and its response info (which is what this client was doing initially and so more spacing was added to important parts to bring it into better focus, just in case).
As firefox doesnt seem to currently support anchor based relative positioning of the popover, so explicitly set the position of the popover. Also reposition the popover to be in the bottom right corner rather than the previous top center position. * Rather updated position-area css property ensures this automatically wrt chrome browsers. * while for firefox the explicit code that is added is needed. NOTE: Had added that id, just in case firefox was goofing up bcas of the element not having unique id or so, either way the firefox issue is unrelated and more fundamental lack of support for now.
Starting out with a new chat. Switching back from settings directly.
Now popover menu autocloses faster, so that it doesnt distract the user too long, if not needed. Reasoning bubble dashed border has been made thinner, so that it appears pleasant and not over bearing.
move sessions buttons div to heading block and move program name to the default block added to chat div, if there is no chat in a given chat session. cleanup the default block helpers to follow a common pattern. also make the chat message bubbles/blocks bit more prominently box shadowy
Instead of having texts submit and image, replace them with equiv unicode icons. Adjust the size of these buttons to be smaller, given that now they only contain icons in them. Switch from btn+inputfile+img to btn+inputfile wrt image loading btn given that the image will be shown in seperate dynamically created images in the user in div.
Now NSChatMessage inturn ChatMessageEx, ... have been updated to maintain a array of image data instead of a single image. Inturn the ShowMessage as well as submit logics have been updated to account for multiple images. Also fix a oversight from previous commit, where when pushing new image, I had forgotten to remove the old logic, which would have always updated the 0th image data in the array.
Update usage note wrt new icons.
Also had forgotten to rename to image_urls, when switching from single image with its corresponding field image_url to image_urls, wrt removing the same after it has been added to the content array.
This was referenced Nov 20, 2025
Contributor
Author
|
Next will be adding tool call to allow ai to use itself in a fresh chat context by letting ai create its own suitable system prompt and chat message as needed, based on its interaction with user and in turn what it is trying to achieve. |
Use variables in css for colors. Change the tool response color to be bit more soothing and kind of syncd with the user collor. However the tool call color is left bit odder, to ensure user sight goes there for validating and triggering.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Hi all
In addition to the tool calling, reasoning and vision features added in the previous PRs in this series, this version rebases to the latest master branch, also cleans up the ui a bit freeing up vertical space and adds support for multiple images as part of a single message to be sent to the ai model.
Hi @ggerganov
I hadnt noticed your response few weeks back to my previous older PR in this series, as I was in the process of adding missing features wrt this alternate simple minded web client ui ie peek at reasoning, vision and tool calling and some associated cleanup, so that I could explore some stuff which I wanted to.
If you look at this PR, you will notice that this alternate pure html + css + js based flow (avoids dependence on external / 3rd party libraries in general) now supports reasoning, vision and also tool calling (with a bunch of built in client side based tool calls with zero setup, ++) all within a uncompressed source code size of 300KB (including the python simpleproxy.py for web access and related tool calls). Also the logical ui elements have their own unique id/class, which can help theme the ui, if one wants to.
While the default web ui is around 1.2 MB or so compressed, needs one to understand svelte framework and also track the bundled modules. Also it doesnt support tool calling currently, and the plan is more towards server side / back end MCP based tool call support, if I understand correctly.
Given the above significant differences, it may make sense to continue this as a lightweight alternate ui option within llama.cpp itself, parallel to the default webui. My embedded background also biases me toward simple, flexible and functional options.
NOTE: When I revisited ai after almost a year++ wanting to explore some of the recent ai developments, I couldnt find any sensible zero or minimal setup tool calling supported open source ai clients, so I started on this series of patches/PRs.
Eitherway the final decision is up to you and team of open source developers who work on this proactively, rather than once in a bluemoon me, as to whether you would prefer to apply these into llama.cpp itself or not. Do let me know your thoughts.
NOTE: I am duplicating the response I posted 2 odd days ago to your feedback (which I had missed) to that much older PR, again here, given that lot of features have been added wrt that PR.
NOTE: The immidiate previous PR in this series was #17142