llama-server UI Enhancements suggestions

[DigitalKO]

Sorry, but I am too busy and tired to dive into the code to do pull requests. So, I'm making this post.

Fix the misleading behavior

I have found two misleading behaviors with Llama.cpp.

1. When we load a model with the specified parameters from the command line (llama-server), these parameters are not reflected in the UI.
2. When we switch to another model, the old parameters in the UI are still applied, while we would expect the command-line parameters to be used.

This behavior causes bad experiences, as the model can become very disappointing.

To "fix" these behaviors, I use a hack with the help of Tampermonkey. And after switching models, I usually do a "hard refresh" of the page (Ctrl+Shift+R or Cmd+Shift+R).

    const props = fetch('/props')
    .then((response) => {
        if (!response.ok) {
            throw new Error(`HTTP error! Status: ${response.status}`);
        }
        return response.json();
    })
    .then((props) => {
        console.log(props);
        localStorage.setItem('config', JSON.stringify({
            "apiKey":"",
            "systemMessage":"You are a helpful assistant.",
            "showTokensPerSecond":true,
            "showThoughtInProgress":true,
            "excludeThoughtOnReq":true,
            "pasteLongTextToFileLen":15500,
            "samplers":"edkypmxt",
            "temperature":props['default_generation_settings']['params']['temperature'],
            "dynatemp_range":0,
            "dynatemp_exponent":1,
            "top_k":props['default_generation_settings']['params']['top_k'],
            "top_p":props['default_generation_settings']['params']['top_p'],
            "min_p":props['default_generation_settings']['params']['min_p'],
            "xtc_probability":0,
            "xtc_threshold":0.1,
            "typical_p":1,
            "repeat_last_n":64,
            "repeat_penalty":1,
            "presence_penalty":1.5,
            "frequency_penalty":0,
            "dry_multiplier":0,
            "dry_base":1.75,
            "dry_allowed_length":2,
            "dry_penalty_last_n":-1,
            "max_tokens":-1,
            "custom":"",
            "pyIntepreterEnabled":false
        }));

    })
    .catch((error) => {
        console.error('Failed to fetch /props:', error);
    });

Add import/export db feature

As the data are stored in the browser, it could be very useful to export / import easily from the UI the db.

Again, I use hacks with the help of Tampermonkey.

Export db

    // import feature

    // Create export button and add to DOM
    let exportButton = document.createElement('BUTTON');
    exportButton.classList.add("btn");
    exportButton.textContent = "📤";

    let divForButton = document.createElement('DIV');
    divForButton.classList.add("tooltip", "tooltip-bottom");
    divForButton.setAttribute("id", "export");
    divForButton.dataset.tip = "Export";
    divForButton.appendChild(exportButton);

    const observer = new MutationObserver(() => {
        const header = document.querySelector("header");
        if (header) {
            header.children[0].appendChild(divForButton);
            document.getElementById('export').addEventListener('click', exportDb);
            header.children[0].appendChild(input);
            observer.disconnect(); // stop watching once done
        }
    });

    observer.observe(document.body, { childList: true, subtree: true });

    async function exportIndexedDB(dbName) {
        const request = indexedDB.open(dbName);

        return new Promise((resolve, reject) => {
            request.onerror = () => reject(request.error);
            request.onsuccess = () => {
                const db = request.result;
                const exportData = {};
                const tx = db.transaction(db.objectStoreNames, "readonly");
                const promises = [];

                for (const storeName of db.objectStoreNames) {
                    const store = tx.objectStore(storeName);
                    const getAllRequest = store.getAll();

                    const p = new Promise((res, rej) => {
                        getAllRequest.onsuccess = () => {
                            exportData[storeName] = getAllRequest.result;
                            res();
                        };
                        getAllRequest.onerror = () => rej(getAllRequest.error);
                    });

                    promises.push(p);
                }

                tx.oncomplete = async () => {
                    try {
                        await Promise.all(promises);
                        resolve(exportData);
                    } catch (err) {
                        reject(err);
                    }
                };

                tx.onerror = () => reject(tx.error);
            };
        });
    }

    function exportDb(){
        exportIndexedDB('LlamacppWebui').then(data => {
            const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json" });
            const url = URL.createObjectURL(blob);
            const a = Object.assign(document.createElement("a"), {
                href: url,
                download: "indexeddb-export.json"
            });
            a.click();
            URL.revokeObjectURL(url);
        });
    }



    // end export

Import db

    // import function
    async function importIndexedDB(dbName, jsonData) {
        const request = indexedDB.open(dbName);

        return new Promise((resolve, reject) => {
            request.onerror = () => reject(request.error);
            request.onsuccess = () => {
                const db = request.result;
                const validStoreNames = Array.from(db.objectStoreNames).filter(name => name in jsonData);
                const tx = db.transaction(validStoreNames, "readwrite");

                for (const storeName of validStoreNames) {
                    const store = tx.objectStore(storeName);
                    for (const item of jsonData[storeName]) {
                        store.put(item);
                    }
                }

                tx.oncomplete = () => resolve("Import successful");
                tx.onerror = () => reject(tx.error);
            };

        });
    }

    // Create file input and add to DOM
    const input = document.createElement('input');
    input.type = 'file';
    input.accept = 'application/json';
    input.style.display = 'block'; // Make it visible for user interaction


    // Handle file selection
    input.addEventListener('change', () => {
        const file = input.files[0];
        const reader = new FileReader();

        reader.onload = async () => {
            const jsonData = JSON.parse(reader.result);
            try {
                const result = await importIndexedDB("LlamacppWebui", jsonData);
                location.reload(); // Reload page after successful import
            } catch (err) {
                console.error("Import failed:", err);
            }
        };

        reader.onerror = () => console.error("File read error:", reader.error);
        reader.readAsText(file);
    });

    // end import

Here the full code:

// ==UserScript==
// @name         llama.cpp server
// @namespace    http://tampermonkey.net/
// @version      2025-09-19
// @description  try to take over the world!
// @author       You
// @match        http://localhost:8090/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=undefined.localhost
// @grant        none
// @run-at      document-idle
// ==/UserScript==

(function() {
    'use strict';

    // import feature

    // Create export button and add to DOM
    let exportButton = document.createElement('BUTTON');
    exportButton.classList.add("btn");
    exportButton.textContent = "📤";

    let divForButton = document.createElement('DIV');
    divForButton.classList.add("tooltip", "tooltip-bottom");
    divForButton.setAttribute("id", "export");
    divForButton.dataset.tip = "Export";
    divForButton.appendChild(exportButton);

    const observer = new MutationObserver(() => {
        const header = document.querySelector("header");
        if (header) {
            header.children[0].appendChild(divForButton);
            document.getElementById('export').addEventListener('click', exportDb);
            header.children[0].appendChild(input);
            observer.disconnect(); // stop watching once done
        }
    });

    observer.observe(document.body, { childList: true, subtree: true });

    async function exportIndexedDB(dbName) {
        const request = indexedDB.open(dbName);

        return new Promise((resolve, reject) => {
            request.onerror = () => reject(request.error);
            request.onsuccess = () => {
                const db = request.result;
                const exportData = {};
                const tx = db.transaction(db.objectStoreNames, "readonly");
                const promises = [];

                for (const storeName of db.objectStoreNames) {
                    const store = tx.objectStore(storeName);
                    const getAllRequest = store.getAll();

                    const p = new Promise((res, rej) => {
                        getAllRequest.onsuccess = () => {
                            exportData[storeName] = getAllRequest.result;
                            res();
                        };
                        getAllRequest.onerror = () => rej(getAllRequest.error);
                    });

                    promises.push(p);
                }

                tx.oncomplete = async () => {
                    try {
                        await Promise.all(promises);
                        resolve(exportData);
                    } catch (err) {
                        reject(err);
                    }
                };

                tx.onerror = () => reject(tx.error);
            };
        });
    }

    function exportDb(){
        exportIndexedDB('LlamacppWebui').then(data => {
            const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json" });
            const url = URL.createObjectURL(blob);
            const a = Object.assign(document.createElement("a"), {
                href: url,
                download: "indexeddb-export.json"
            });
            a.click();
            URL.revokeObjectURL(url);
        });
    }



    // end export

    // import function
    async function importIndexedDB(dbName, jsonData) {
        const request = indexedDB.open(dbName);

        return new Promise((resolve, reject) => {
            request.onerror = () => reject(request.error);
            request.onsuccess = () => {
                const db = request.result;
                const validStoreNames = Array.from(db.objectStoreNames).filter(name => name in jsonData);
                const tx = db.transaction(validStoreNames, "readwrite");

                for (const storeName of validStoreNames) {
                    const store = tx.objectStore(storeName);
                    for (const item of jsonData[storeName]) {
                        store.put(item);
                    }
                }

                tx.oncomplete = () => resolve("Import successful");
                tx.onerror = () => reject(tx.error);
            };

        });
    }

    // Create file input and add to DOM
    const input = document.createElement('input');
    input.type = 'file';
    input.accept = 'application/json';
    input.style.display = 'block'; // Make it visible for user interaction


    // Handle file selection
    input.addEventListener('change', () => {
        const file = input.files[0];
        const reader = new FileReader();

        reader.onload = async () => {
            const jsonData = JSON.parse(reader.result);
            try {
                const result = await importIndexedDB("LlamacppWebui", jsonData);
                location.reload(); // Reload page after successful import
            } catch (err) {
                console.error("Import failed:", err);
            }
        };

        reader.onerror = () => console.error("File read error:", reader.error);
        reader.readAsText(file);
    });

    // end import

    // Fetch model params from server
    const props = fetch('/props')
    .then((response) => {
        if (!response.ok) {
            throw new Error(`HTTP error! Status: ${response.status}`);
        }
        return response.json();
    })
    .then((props) => {
        console.log(props);
        localStorage.setItem('config', JSON.stringify({
            "apiKey":"",
            "systemMessage":"You are a helpful assistant.",
            "showTokensPerSecond":true,
            "showThoughtInProgress":true,
            "excludeThoughtOnReq":true,
            "pasteLongTextToFileLen":15500,
            "samplers":"edkypmxt",
            "temperature":props['default_generation_settings']['params']['temperature'],
            "dynatemp_range":0,
            "dynatemp_exponent":1,
            "top_k":props['default_generation_settings']['params']['top_k'],
            "top_p":props['default_generation_settings']['params']['top_p'],
            "min_p":props['default_generation_settings']['params']['min_p'],
            "xtc_probability":0,
            "xtc_threshold":0.1,
            "typical_p":1,
            "repeat_last_n":64,
            "repeat_penalty":1,
            "presence_penalty":1.5,
            "frequency_penalty":0,
            "dry_multiplier":0,
            "dry_base":1.75,
            "dry_allowed_length":2,
            "dry_penalty_last_n":-1,
            "max_tokens":-1,
            "custom":"",
            "pyIntepreterEnabled":false
        }));

    })
    .catch((error) => {
        console.error('Failed to fetch /props:', error);
    });

})();