mirror of
https://github.com/ikawrakow/ik_llama.cpp.git
synced 2026-03-02 10:00:07 +00:00
Finalize UI
This commit is contained in:
Saood Karim
@@ -4073,7 +4073,7 @@ return html`
|
||||
e.stopPropagation();
|
||||
startRenamePrompt(prompt.filename);
|
||||
}}
|
||||
title="Load this prompt">
|
||||
title="Rename this prompt">
|
||||
<${SVG_Rename}/>
|
||||
</button>
|
||||
<button
|
||||
@@ -4202,6 +4202,108 @@ return html`
|
||||
`;
|
||||
}
|
||||
|
||||
function CompressionInfoModal({
|
||||
isOpen,
|
||||
closeModal,
|
||||
compressionData,
|
||||
cancel
|
||||
}) {
|
||||
const entries = Object.entries(compressionData || {}).map(([id, raw]) => {
|
||||
let cfg = raw;
|
||||
if (typeof raw === 'string') {
|
||||
try { cfg = JSON.parse(raw); } catch (_) {}
|
||||
}
|
||||
return { id, raw, cfg: cfg && typeof cfg === 'object' ? cfg : null };
|
||||
});
|
||||
|
||||
const first = entries[0]?.cfg || {};
|
||||
const levelNum = Number(first?.compression_level);
|
||||
const levelDisplay = Number.isFinite(levelNum) ? String(levelNum) : 'not set';
|
||||
const ratioNum = Number(first?.train_dict_samples_ratio);
|
||||
const ratioDisplay = Number.isFinite(ratioNum) ? String(ratioNum) : 'not set';
|
||||
|
||||
return html`
|
||||
<${Modal}
|
||||
isOpen=${isOpen}
|
||||
onClose=${() => closeModal("compression")}
|
||||
title="Current compression settings"
|
||||
style=${{ 'max-width': '30em' }}
|
||||
>
|
||||
<div class="vbox" style=${{ gap: '1rem' }}>
|
||||
${entries.length === 0 && html`<div>No compression data available.</div>`}
|
||||
|
||||
${entries.length > 1 && html`
|
||||
<div style=${{ color: '#b33', fontWeight: 600 }}>
|
||||
Custom/Unusual configuration detected
|
||||
</div>
|
||||
<table border="1" frame="void" rules="all" style=${{ width: '100%' }}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Compression Level</th>
|
||||
<th>Training Sample Ratio</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
${entries.map(({ id, cfg }) => {
|
||||
const lv = Number(cfg?.compression_level);
|
||||
const lvDisplay = Number.isFinite(lv) ? String(lv) : 'not set';
|
||||
const r = Number(cfg?.train_dict_samples_ratio);
|
||||
const rDisplay = Number.isFinite(r) ? String(r) : 'not set';
|
||||
return html`
|
||||
<tr>
|
||||
<td>${id}</td>
|
||||
<td>${lvDisplay}</td>
|
||||
<td>${rDisplay}</td>
|
||||
</tr>
|
||||
`;
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
`}
|
||||
|
||||
${(entries.length == 1) && html`
|
||||
<table border="1" frame="void" rules="all" style=${{ width: '100%' }}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Setting</th>
|
||||
<th>Value</th>
|
||||
<th>Notes / Docs</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Compression Level</th>
|
||||
<td>${levelDisplay}</td>
|
||||
<td>
|
||||
<small>Level 1-3: Realtime, less compression<br/>
|
||||
Level 4-11: Balanced speed/size<br/>
|
||||
Level 22: Maximum compression, archival quality, very slow</small>
|
||||
<br/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Training Sample Ratio</th>
|
||||
<td>${ratioDisplay}</td>
|
||||
<td>
|
||||
Set according to the size of the database, if set too high it will error on maintenance, but if set too low it may weaken compression.
|
||||
<br/>
|
||||
<a href="https://github.com/facebook/zstd/issues/3111#issuecomment-1098318000" target="_blank" rel="noopener">Technical Explanation</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
`}
|
||||
|
||||
${!cancel && html`
|
||||
<div class="hbox" style=${{ justifyContent: 'flex-end' }}>
|
||||
<button class="button-secondary" onClick=${() => closeModal("compression")}>Close</button>
|
||||
</div>
|
||||
`}
|
||||
</div>
|
||||
</${Modal}>
|
||||
`;
|
||||
}
|
||||
|
||||
function Widget({ isOpen, onClose, title, id, children, ...props }) {
|
||||
if (!isOpen) {
|
||||
@@ -5432,11 +5534,26 @@ export function App({ sessionStorage, templateStorage, useSessionState, useDBTem
|
||||
const [promptPreviewTokens, setPromptPreviewTokens] = useSessionState('promptPreviewTokens', defaultPresets.promptPreviewTokens);
|
||||
const [zstdTable, setZstdTable] = useState('');
|
||||
const [zstdColumn, setZstdColumn] = useState('');
|
||||
const [zstdLevel, setZstdLevel] = useState(3);
|
||||
const [zstdRatio, setZstdRatio] = useState(0.1);
|
||||
const [zstdLevel, setZstdLevel] = useState(22);
|
||||
const [zstdRatio, setZstdRatio] = useState(100);
|
||||
const [showCustomMaintenance, setShowCustomMaintenance] = useState(false);
|
||||
const [maintenanceDuration, setMaintenanceDuration] = useState('');
|
||||
const [maintenanceDbLoad, setMaintenanceDbLoad] = useState(0.5);
|
||||
const [configData, setConfigData] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const res = await fetch('/zstd_get_configs');
|
||||
const data = await res.json();
|
||||
if (data.ok) {
|
||||
console.log(data.configs);
|
||||
setConfigData(data.configs);
|
||||
}
|
||||
} catch (err) {}
|
||||
};
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
function replacePlaceholders(string,placeholders) {
|
||||
// give placeholders as json object
|
||||
@@ -7368,9 +7485,12 @@ export function App({ sessionStorage, templateStorage, useSessionState, useDBTem
|
||||
const data = await res.json();
|
||||
if (data.ok) {
|
||||
console.log(data.configs);
|
||||
setConfigData(data.configs);
|
||||
toggleModal("compression")
|
||||
}
|
||||
else {
|
||||
console.log(data.message);
|
||||
toggleModal("compression")
|
||||
}
|
||||
}}>
|
||||
Show Configs
|
||||
@@ -7380,8 +7500,9 @@ export function App({ sessionStorage, templateStorage, useSessionState, useDBTem
|
||||
<div className="hbox">
|
||||
<${InputSlider} label="Compression Level" type="number" step="1" min="1" max="22"
|
||||
readOnly=${!!cancel} value=${zstdLevel} onValueChange=${setZstdLevel}/>
|
||||
<${InputSlider} label="Samples Ratio" type="number" step="0.05" max="1"
|
||||
<${InputSlider} label="Samples Ratio" type="number" step="1" min-"1" max="100"
|
||||
readOnly=${!!cancel} value=${zstdRatio} onValueChange=${setZstdRatio}/>
|
||||
${!configData ? html`
|
||||
<button
|
||||
disabled=${!!cancel}
|
||||
onClick=${async () => {
|
||||
@@ -7394,9 +7515,23 @@ export function App({ sessionStorage, templateStorage, useSessionState, useDBTem
|
||||
train_dict_samples_ratio: zstdRatio
|
||||
})
|
||||
});
|
||||
setConfigData(true);
|
||||
}}>
|
||||
Enable
|
||||
</button>
|
||||
Enable
|
||||
</button>` : html`
|
||||
<button
|
||||
disabled=${!!cancel}
|
||||
onClick=${async () => {
|
||||
await fetch('/zstd_update_transparent', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
compression_level: zstdLevel,
|
||||
train_dict_samples_ratio: zstdRatio
|
||||
})
|
||||
});
|
||||
}}>
|
||||
Update
|
||||
</button>`}
|
||||
</div>
|
||||
|
||||
<div className="horz-separator"></div>
|
||||
@@ -7668,6 +7803,12 @@ export function App({ sessionStorage, templateStorage, useSessionState, useDBTem
|
||||
closeModal=${() => toggleModal("saved_prompts")}
|
||||
cancel=${cancel}/>
|
||||
|
||||
<${CompressionInfoModal}
|
||||
isOpen=${modalState.compression}
|
||||
closeModal=${() => closeModal("compression")}
|
||||
compressionData=${configData}
|
||||
cancel=${cancel}/>
|
||||
|
||||
<${EditorContextMenu}
|
||||
isOpen=${contextMenuState.visible}
|
||||
closeMenu=${() => setContextMenuState({ visible: false, x: 0, y: 0 })}
|
||||
|
||||
@@ -4053,6 +4053,12 @@ int main(int argc, char ** argv) {
|
||||
res.set_content(json{"ok", true}.dump(), "application/json");
|
||||
});
|
||||
|
||||
const auto handle_zstd_config_update = db_handler([](auto& db, const json& body, auto&, auto& res) {
|
||||
std::string patch_json = "{\"compression_level\": " + std::to_string(body["compression_level"].get<int>()) + ", \"train_dict_samples_ratio\": " + std::to_string(body["train_dict_samples_ratio"].get<int>()) + "}";
|
||||
db.db << "update _zstd_configs set config = json_patch(config, '" + patch_json + "')";
|
||||
res.set_content(json{{"ok", true}}.dump(), "application/json");
|
||||
});
|
||||
|
||||
//
|
||||
// Router
|
||||
//
|
||||
@@ -4130,12 +4136,13 @@ int main(int argc, char ** argv) {
|
||||
svr->Post("/sessions", handle_sessions);
|
||||
svr->Get ("/sessions", handle_sessions);
|
||||
svr->Post("/delete", handle_delete);
|
||||
//VACUUM is there for the extension but does not require the extension
|
||||
svr->Get ("/vacuum", handle_vacuum);
|
||||
//VACUUM is there for the extension but does not require the extension
|
||||
svr->Get ("/vacuum", handle_vacuum);
|
||||
if (sqlite_extension_loaded) {
|
||||
svr->Get ("/zstd_get_configs", handle_zstd_get_configs);
|
||||
svr->Post("/zstd_incremental_maintenance", handle_zstd_maintenance);
|
||||
svr->Post("/zstd_enable_transparent", handle_zstd_enable);
|
||||
svr->Post("/zstd_update_transparent", handle_zstd_config_update);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user