Add prompt reduction badge to debug diff
This commit is contained in:
parent
2178de9a90
commit
af6702bceb
2 changed files with 59 additions and 34 deletions
|
|
@ -292,7 +292,10 @@
|
|||
</h2>
|
||||
<pre id="payload-display"></pre>
|
||||
<div id="diff-container" class="mt-4 is-hidden">
|
||||
<label class="label">Prompt diff</label>
|
||||
<div class="is-flex is-align-items-center is-justify-content-space-between">
|
||||
<label class="label mb-0">Prompt diff</label>
|
||||
<span id="prompt-reduction" class="tag is-info is-light is-hidden">Prompt Token Reduction: 0%</span>
|
||||
</div>
|
||||
<div id="diff-display" class="box content is-family-monospace"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -71,6 +71,7 @@ document.addEventListener('DOMContentLoaded', async () => {
|
|||
const payloadDisplay = document.getElementById('payload-display');
|
||||
const diffDisplay = document.getElementById('diff-display');
|
||||
const diffContainer = document.getElementById('diff-container');
|
||||
const promptReductionLabel = document.getElementById('prompt-reduction');
|
||||
|
||||
let lastFullText = defaults.lastFullText || '';
|
||||
let lastPromptText = defaults.lastPromptText || '';
|
||||
|
|
@ -79,22 +80,6 @@ document.addEventListener('DOMContentLoaded', async () => {
|
|||
if (lastPayload) {
|
||||
payloadDisplay.textContent = lastPayload;
|
||||
}
|
||||
if (lastFullText && lastPromptText && diff_match_patch) {
|
||||
const dmp = new diff_match_patch();
|
||||
dmp.Diff_EditCost = 4;
|
||||
const diffs = dmp.diff_main(lastFullText, lastPromptText);
|
||||
dmp.diff_cleanupEfficiency(diffs);
|
||||
const hasDiff = diffs.some(d => d[0] !== 0);
|
||||
if (hasDiff) {
|
||||
diffDisplay.innerHTML = dmp.diff_prettyHtml(diffs);
|
||||
diffContainer.classList.remove('is-hidden');
|
||||
} else {
|
||||
diffDisplay.innerHTML = '';
|
||||
diffContainer.classList.add('is-hidden');
|
||||
}
|
||||
} else {
|
||||
diffContainer.classList.add('is-hidden');
|
||||
}
|
||||
themeSelect.addEventListener('change', async () => {
|
||||
markDirty();
|
||||
await applyTheme(themeSelect.value);
|
||||
|
|
@ -164,6 +149,51 @@ document.addEventListener('DOMContentLoaded', async () => {
|
|||
const tokenReductionToggle = document.getElementById('token-reduction');
|
||||
tokenReductionToggle.checked = defaults.tokenReduction === true;
|
||||
|
||||
function tokenSavingEnabled() {
|
||||
return htmlToggle.checked
|
||||
|| stripUrlToggle.checked
|
||||
|| altTextToggle.checked
|
||||
|| collapseWhitespaceToggle.checked
|
||||
|| tokenReductionToggle.checked;
|
||||
}
|
||||
|
||||
function updatePromptReductionLabel(hasDiff) {
|
||||
if (!promptReductionLabel) return;
|
||||
if (!hasDiff || !tokenSavingEnabled() || !lastFullText || !lastPromptText) {
|
||||
promptReductionLabel.classList.add('is-hidden');
|
||||
return;
|
||||
}
|
||||
const baseLength = lastFullText.length;
|
||||
const promptLength = lastPromptText.length;
|
||||
const percentSaved = baseLength > 0
|
||||
? Math.max(0, Math.round((1 - (promptLength / baseLength)) * 100))
|
||||
: 0;
|
||||
promptReductionLabel.textContent = `Prompt Token Reduction: ${percentSaved}%`;
|
||||
promptReductionLabel.classList.remove('is-hidden');
|
||||
}
|
||||
|
||||
function updateDiffDisplay() {
|
||||
if (lastFullText && lastPromptText && diff_match_patch) {
|
||||
const dmp = new diff_match_patch();
|
||||
dmp.Diff_EditCost = 4;
|
||||
const diffs = dmp.diff_main(lastFullText, lastPromptText);
|
||||
dmp.diff_cleanupEfficiency(diffs);
|
||||
const hasDiff = diffs.some(d => d[0] !== 0);
|
||||
if (hasDiff) {
|
||||
diffDisplay.innerHTML = dmp.diff_prettyHtml(diffs);
|
||||
diffContainer.classList.remove('is-hidden');
|
||||
} else {
|
||||
diffDisplay.innerHTML = '';
|
||||
diffContainer.classList.add('is-hidden');
|
||||
}
|
||||
updatePromptReductionLabel(hasDiff);
|
||||
} else {
|
||||
diffDisplay.innerHTML = '';
|
||||
diffContainer.classList.add('is-hidden');
|
||||
updatePromptReductionLabel(false);
|
||||
}
|
||||
}
|
||||
|
||||
const debugTabToggle = document.getElementById('show-debug-tab');
|
||||
const debugTabBtn = document.getElementById('debug-tab-button');
|
||||
function updateDebugTab() {
|
||||
|
|
@ -174,6 +204,14 @@ document.addEventListener('DOMContentLoaded', async () => {
|
|||
debugTabToggle.addEventListener('change', () => { updateDebugTab(); markDirty(); });
|
||||
updateDebugTab();
|
||||
|
||||
updateDiffDisplay();
|
||||
|
||||
[htmlToggle, stripUrlToggle, altTextToggle, collapseWhitespaceToggle, tokenReductionToggle].forEach(toggle => {
|
||||
toggle.addEventListener('change', () => {
|
||||
updatePromptReductionLabel(!diffContainer.classList.contains('is-hidden'));
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
const aiParams = Object.assign({}, DEFAULT_AI_PARAMS, defaults.aiParams || {});
|
||||
for (const [key, val] of Object.entries(aiParams)) {
|
||||
|
|
@ -770,23 +808,7 @@ document.addEventListener('DOMContentLoaded', async () => {
|
|||
if (latest.lastFullText !== lastFullText || latest.lastPromptText !== lastPromptText) {
|
||||
lastFullText = latest.lastFullText || '';
|
||||
lastPromptText = latest.lastPromptText || '';
|
||||
if (lastFullText && lastPromptText && diff_match_patch) {
|
||||
const dmp = new diff_match_patch();
|
||||
dmp.Diff_EditCost = 4;
|
||||
const diffs = dmp.diff_main(lastFullText, lastPromptText);
|
||||
dmp.diff_cleanupEfficiency(diffs);
|
||||
const hasDiff = diffs.some(d => d[0] !== 0);
|
||||
if (hasDiff) {
|
||||
diffDisplay.innerHTML = dmp.diff_prettyHtml(diffs);
|
||||
diffContainer.classList.remove('is-hidden');
|
||||
} else {
|
||||
diffDisplay.innerHTML = '';
|
||||
diffContainer.classList.add('is-hidden');
|
||||
}
|
||||
} else {
|
||||
diffDisplay.innerHTML = '';
|
||||
diffContainer.classList.add('is-hidden');
|
||||
}
|
||||
updateDiffDisplay();
|
||||
}
|
||||
}
|
||||
} catch {}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue