feat: implement token counter with real-time breakdown
Add comprehensive token counting functionality to provide visibility into context usage: Backend (Rust): - Add tiktoken-rs dependency for OpenAI-compatible token counting - Implement get_token_count command with detailed breakdown - Count tokens for: system prompt, preset instructions, persona, world info, author's note, message history, and current input - Per-section token breakdown for optimization insights Frontend (JavaScript/HTML/CSS): - Add token counter widget in status bar - Real-time updates as user types (debounced 300ms) - Expandable breakdown tooltip showing per-section counts - Automatic update when chat history loads or changes - Clean, minimal UI with hover interactions Features: - Accurate token counting using cl100k_base tokenizer - Debounced updates for performance - Detailed breakdown by context section - Visual indicator with total token count - Click to expand/collapse detailed breakdown - Auto-hide when no character is active This completes the "Must-Have for Basic Roleplay" features from the roadmap: ✅ World Info/Lorebooks ✅ Author's Note ✅ Token Counter - Message Examples Usage (next) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -637,6 +637,53 @@
|
||||
</form>
|
||||
<div class="status-bar">
|
||||
<span id="status-text" class="status-text">Ready</span>
|
||||
<div id="token-counter" class="token-counter" style="display: none;">
|
||||
<span id="token-count-total" class="token-count">0 tokens</span>
|
||||
<button id="token-details-btn" class="token-details-btn" title="Show breakdown">
|
||||
<svg width="12" height="12" viewBox="0 0 16 16" fill="none">
|
||||
<circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.5"/>
|
||||
<path d="M8 7v4M8 5h.01" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Token Breakdown Tooltip -->
|
||||
<div id="token-breakdown" class="token-breakdown" style="display: none;">
|
||||
<div class="token-breakdown-header">Token Breakdown</div>
|
||||
<div class="token-breakdown-list">
|
||||
<div class="token-breakdown-item">
|
||||
<span>System Prompt:</span>
|
||||
<span id="token-system">0</span>
|
||||
</div>
|
||||
<div class="token-breakdown-item">
|
||||
<span>Preset Instructions:</span>
|
||||
<span id="token-preset">0</span>
|
||||
</div>
|
||||
<div class="token-breakdown-item">
|
||||
<span>Persona:</span>
|
||||
<span id="token-persona">0</span>
|
||||
</div>
|
||||
<div class="token-breakdown-item">
|
||||
<span>World Info:</span>
|
||||
<span id="token-worldinfo">0</span>
|
||||
</div>
|
||||
<div class="token-breakdown-item">
|
||||
<span>Author's Note:</span>
|
||||
<span id="token-authorsnote">0</span>
|
||||
</div>
|
||||
<div class="token-breakdown-item">
|
||||
<span>Message History:</span>
|
||||
<span id="token-history">0</span>
|
||||
</div>
|
||||
<div class="token-breakdown-item">
|
||||
<span>Current Input:</span>
|
||||
<span id="token-input">0</span>
|
||||
</div>
|
||||
<div class="token-breakdown-total">
|
||||
<span>Total:</span>
|
||||
<span id="token-total-detail">0</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
61
src/main.js
61
src/main.js
@@ -1366,9 +1366,67 @@ function setupKeyboardShortcuts() {
|
||||
|
||||
messageInput.addEventListener('input', () => {
|
||||
autoResize(messageInput);
|
||||
updateTokenCount();
|
||||
});
|
||||
}
|
||||
|
||||
// Token Counter
|
||||
let tokenUpdateTimeout = null;
|
||||
|
||||
async function updateTokenCount() {
|
||||
// Debounce token count updates
|
||||
if (tokenUpdateTimeout) {
|
||||
clearTimeout(tokenUpdateTimeout);
|
||||
}
|
||||
|
||||
tokenUpdateTimeout = setTimeout(async () => {
|
||||
try {
|
||||
const currentInput = messageInput.value;
|
||||
const tokenData = await invoke('get_token_count', {
|
||||
characterId: null, // Use active character
|
||||
currentInput
|
||||
});
|
||||
|
||||
// Update total display
|
||||
const tokenCounter = document.getElementById('token-counter');
|
||||
const tokenCountTotal = document.getElementById('token-count-total');
|
||||
tokenCountTotal.textContent = `${tokenData.total} tokens`;
|
||||
tokenCounter.style.display = 'flex';
|
||||
|
||||
// Update breakdown
|
||||
document.getElementById('token-system').textContent = tokenData.system_prompt;
|
||||
document.getElementById('token-preset').textContent = tokenData.preset_instructions;
|
||||
document.getElementById('token-persona').textContent = tokenData.persona;
|
||||
document.getElementById('token-worldinfo').textContent = tokenData.world_info;
|
||||
document.getElementById('token-authorsnote').textContent = tokenData.authors_note;
|
||||
document.getElementById('token-history').textContent = tokenData.message_history;
|
||||
document.getElementById('token-input').textContent = tokenData.current_input;
|
||||
document.getElementById('token-total-detail').textContent = tokenData.total;
|
||||
} catch (error) {
|
||||
console.error('Failed to update token count:', error);
|
||||
// Hide token counter on error
|
||||
document.getElementById('token-counter').style.display = 'none';
|
||||
}
|
||||
}, 300); // Update after 300ms of no typing
|
||||
}
|
||||
|
||||
// Toggle token breakdown display
|
||||
document.getElementById('token-details-btn').addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
const breakdown = document.getElementById('token-breakdown');
|
||||
breakdown.style.display = breakdown.style.display === 'none' ? 'block' : 'none';
|
||||
});
|
||||
|
||||
// Close breakdown when clicking outside
|
||||
document.addEventListener('click', (e) => {
|
||||
const breakdown = document.getElementById('token-breakdown');
|
||||
const detailsBtn = document.getElementById('token-details-btn');
|
||||
|
||||
if (!breakdown.contains(e.target) && !detailsBtn.contains(e.target)) {
|
||||
breakdown.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
// Load characters and populate dropdown
|
||||
async function loadCharacters() {
|
||||
console.log('Loading characters...');
|
||||
@@ -1535,6 +1593,9 @@ async function loadChatHistory() {
|
||||
messagesContainer.innerHTML = '';
|
||||
addMessage('API configured. Ready to chat.', false, true);
|
||||
}
|
||||
|
||||
// Update token count after loading history
|
||||
updateTokenCount();
|
||||
}
|
||||
|
||||
// Clear chat history
|
||||
|
||||
@@ -761,6 +761,97 @@ body {
|
||||
color: #22c55e;
|
||||
}
|
||||
|
||||
/* Token Counter */
|
||||
.token-counter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.token-count {
|
||||
padding: 4px 8px;
|
||||
background: var(--bg-tertiary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.token-details-btn {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--text-secondary);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.token-details-btn:hover {
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.token-breakdown {
|
||||
position: absolute;
|
||||
bottom: 52px;
|
||||
right: 16px;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
z-index: 100;
|
||||
min-width: 250px;
|
||||
}
|
||||
|
||||
.token-breakdown-header {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 8px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.token-breakdown-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.token-breakdown-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.token-breakdown-item span:first-child {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.token-breakdown-item span:last-child {
|
||||
color: var(--text-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.token-breakdown-total {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--accent);
|
||||
margin-top: 8px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
|
||||
Reference in New Issue
Block a user