matt
2444ca0811
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>
700 lines
32 KiB
HTML
700 lines
32 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<link rel="stylesheet" href="styles.css" />
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Claudia</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/marked@11.1.1/marked.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
|
|
<script type="module" src="/main.js" defer></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="app-container">
|
|
<header class="app-header">
|
|
<div class="header-content">
|
|
<div class="header-left-controls">
|
|
<button id="roleplay-btn" class="icon-btn" title="Roleplay Tools">
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
|
<path d="M2 4h12M2 8h12M2 12h12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="character-display">
|
|
<div class="avatar-circle"></div>
|
|
<span id="character-header-name"></span>
|
|
</div>
|
|
<div class="character-controls">
|
|
<div class="select-wrapper">
|
|
<select id="character-select" class="character-select"></select>
|
|
</div>
|
|
<button id="new-character-btn" class="icon-btn" title="New Character">
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
|
<path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="header-controls">
|
|
<button id="import-chat-btn" class="icon-btn" title="Import conversation">
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
|
<path d="M8 11V3M5 8l3 3 3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M3 13h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
</svg>
|
|
</button>
|
|
<button id="export-chat-btn" class="icon-btn" title="Export conversation">
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
|
<path d="M8 3v8M5 6l3-3 3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M3 13h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
</svg>
|
|
</button>
|
|
<button id="clear-btn" class="icon-btn" title="Clear conversation">
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
|
<path d="M3 4h10M6 4V3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v1M5 4v8a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
|
</svg>
|
|
</button>
|
|
<button id="settings-btn" class="icon-btn" title="Settings">
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
|
<circle cx="8" cy="8" r="2" stroke="currentColor" stroke-width="1.5"/>
|
|
<path d="M14 8c0-.5-.1-1-.3-1.4l1.2-.7-1-1.7-1.2.7c-.6-.6-1.3-1-2.1-1.2V2h-2v1.7c-.8.2-1.5.6-2.1 1.2L5.3 4.2l-1 1.7 1.2.7C5.1 7 5 7.5 5 8s.1 1 .3 1.4l-1.2.7 1 1.7 1.2-.7c.6.6 1.3 1 2.1 1.2V14h2v-1.7c.8-.2 1.5-.6 2.1-1.2l1.2.7 1-1.7-1.2-.7c.2-.4.3-.9.3-1.4z" stroke="currentColor" stroke-width="1.5" fill="none"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="chat-container" id="chat-view">
|
|
<div id="messages" class="messages-list">
|
|
<div class="message assistant">
|
|
<div class="message-content">
|
|
<p>Configure API settings to get started.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Roleplay sidebar overlay -->
|
|
<div class="roleplay-overlay" id="roleplay-overlay"></div>
|
|
|
|
<!-- Roleplay sidebar (left) -->
|
|
<div class="roleplay-panel" id="roleplay-panel">
|
|
<div class="roleplay-header">
|
|
<h2>Roleplay Tools</h2>
|
|
<button id="close-roleplay-btn" class="icon-btn">
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
|
<line x1="4" y1="4" x2="12" y2="12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
<line x1="12" y1="4" x2="4" y2="12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="roleplay-tabs">
|
|
<button class="roleplay-tab-btn active" data-tab="worldinfo">World Info</button>
|
|
<button class="roleplay-tab-btn" data-tab="authorsnote">Author's Note</button>
|
|
<button class="roleplay-tab-btn" data-tab="persona">Persona</button>
|
|
<button class="roleplay-tab-btn" data-tab="presets">Prompt Preset</button>
|
|
</div>
|
|
|
|
<div id="worldinfo-tab" class="roleplay-tab-content active">
|
|
<div class="roleplay-content">
|
|
<div class="form-group">
|
|
<label>World Info / Lorebook</label>
|
|
<p style="color: var(--text-secondary); font-size: 12px; margin-bottom: 12px;">
|
|
Create entries that inject context when keywords are mentioned.
|
|
</p>
|
|
<label for="recursion-depth" style="font-size: 13px; margin-top: 8px;">Recursion Depth</label>
|
|
<input
|
|
type="number"
|
|
id="recursion-depth"
|
|
min="0"
|
|
max="10"
|
|
value="3"
|
|
style="width: 80px; margin-bottom: 8px;"
|
|
/>
|
|
<p style="color: var(--text-secondary); font-size: 11px; margin-bottom: 12px;">
|
|
Maximum depth for cascading World Info activation. When a World Info entry is triggered, its content is scanned for additional keywords up to this depth. (Default: 3)
|
|
</p>
|
|
<button type="button" id="add-worldinfo-btn" class="btn-secondary" style="width: 100%;">
|
|
+ Add Entry
|
|
</button>
|
|
</div>
|
|
<div id="worldinfo-list" class="worldinfo-list">
|
|
<!-- World info entries will be added here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="authorsnote-tab" class="roleplay-tab-content">
|
|
<div class="roleplay-content">
|
|
<div class="form-group">
|
|
<label for="authors-note-text">Author's Note</label>
|
|
<p style="color: var(--text-secondary); font-size: 12px; margin-bottom: 8px;">
|
|
Instructions inserted near the end of the prompt before the latest messages.
|
|
</p>
|
|
<textarea
|
|
id="authors-note-text"
|
|
placeholder="Write in present tense. Focus on sensory details..."
|
|
rows="6"
|
|
></textarea>
|
|
<div style="background: var(--bg-secondary); padding: 8px; border-radius: 4px; margin-top: 8px;">
|
|
<p style="color: var(--text-secondary); font-size: 11px; margin: 0 0 4px 0; font-weight: 500;">Template Variables:</p>
|
|
<p style="color: var(--text-secondary); font-size: 11px; margin: 0; font-family: monospace;">
|
|
{{char}} - Character name<br/>
|
|
{{user}} - User/Persona name<br/>
|
|
{{date}} - Current date (YYYY-MM-DD)<br/>
|
|
{{time}} - Current time (HH:MM)
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>
|
|
<input type="checkbox" id="authors-note-enabled" />
|
|
Enable Author's Note
|
|
</label>
|
|
</div>
|
|
<button type="button" id="save-authors-note-btn" class="btn-primary" style="width: 100%;">
|
|
Save Author's Note
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="persona-tab" class="roleplay-tab-content">
|
|
<div class="roleplay-content">
|
|
<div class="form-group">
|
|
<label for="persona-name">Persona Name</label>
|
|
<input
|
|
type="text"
|
|
id="persona-name"
|
|
placeholder="Your character name"
|
|
/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="persona-description">Persona Description</label>
|
|
<p style="color: var(--text-secondary); font-size: 12px; margin-bottom: 8px;">
|
|
Describe yourself as the user in this roleplay.
|
|
</p>
|
|
<textarea
|
|
id="persona-description"
|
|
placeholder="Describe your character's appearance, personality, background..."
|
|
rows="8"
|
|
></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>
|
|
<input type="checkbox" id="persona-enabled" />
|
|
Enable Persona
|
|
</label>
|
|
</div>
|
|
<button type="button" id="save-persona-btn" class="btn-primary" style="width: 100%;">
|
|
Save Persona
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="presets-tab" class="roleplay-tab-content">
|
|
<div class="roleplay-content">
|
|
<div class="form-group">
|
|
<label for="preset-select">Prompt Preset</label>
|
|
<p style="color: var(--text-secondary); font-size: 12px; margin-bottom: 8px;">
|
|
Choose a preset to apply specialized prompting strategies for different use cases.
|
|
</p>
|
|
<select id="preset-select" style="width: 100%; margin-bottom: 12px;">
|
|
<option value="">No Preset</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Preset Info/Editor -->
|
|
<div id="preset-info" style="display: none; background: var(--bg-secondary); padding: 12px; border-radius: 6px; margin-bottom: 16px;">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
|
|
<div style="font-weight: 500; color: var(--text-primary);">
|
|
<span id="preset-name"></span>
|
|
<span id="preset-builtin-badge" style="display: none; font-size: 10px; color: var(--text-secondary); margin-left: 8px; padding: 2px 6px; background: var(--bg-primary); border-radius: 3px;">Built-in</span>
|
|
<span id="preset-modified-badge" style="display: none; font-size: 10px; color: var(--accent); margin-left: 8px; padding: 2px 6px; background: var(--bg-primary); border-radius: 3px;">Modified</span>
|
|
</div>
|
|
<div style="display: flex; gap: 4px;">
|
|
<button type="button" id="restore-preset-btn" class="worldinfo-btn" style="display: none; font-size: 11px; padding: 4px 8px;">Restore to Default</button>
|
|
<button type="button" id="duplicate-preset-btn" class="worldinfo-btn" style="display: none; font-size: 11px; padding: 4px 8px;">Duplicate</button>
|
|
<button type="button" id="delete-preset-btn" class="worldinfo-btn worldinfo-btn-danger" style="display: none; font-size: 11px; padding: 4px 8px;">Delete</button>
|
|
</div>
|
|
</div>
|
|
<p id="preset-description" style="color: var(--text-secondary); font-size: 12px; margin-bottom: 12px;"></p>
|
|
|
|
<!-- System Additions (Read-only preview for built-in, editable for custom) -->
|
|
<div id="preset-system-section" style="margin-bottom: 12px;">
|
|
<div style="font-size: 11px; color: var(--text-secondary); margin-bottom: 4px;">
|
|
<strong>System Additions:</strong>
|
|
</div>
|
|
<div id="preset-system-readonly" style="display: none; background: var(--bg-primary); padding: 8px; border-radius: 4px; font-size: 11px; white-space: pre-wrap;"></div>
|
|
<textarea id="preset-system-editable" style="display: none; width: 100%; min-height: 60px; font-size: 11px;" placeholder="Additional text to prepend to system prompt..."></textarea>
|
|
</div>
|
|
|
|
<!-- Instruction Blocks Editor -->
|
|
<div id="preset-instructions-section">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
|
|
<div style="font-size: 11px; color: var(--text-secondary);">
|
|
<strong>Instruction Blocks:</strong>
|
|
</div>
|
|
<button type="button" id="add-instruction-btn" class="worldinfo-btn" style="display: none; font-size: 11px; padding: 4px 8px;">+ Add Block</button>
|
|
</div>
|
|
<div id="preset-instructions-list" style="background: var(--bg-primary); padding: 8px; border-radius: 4px; margin-bottom: 12px;">
|
|
<!-- Instructions will be listed here -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Author's Note Default -->
|
|
<div id="preset-authors-note-section" style="margin-bottom: 12px;">
|
|
<div style="font-size: 11px; color: var(--text-secondary); margin-bottom: 4px;">
|
|
<strong>Default Author's Note:</strong>
|
|
</div>
|
|
<div id="preset-authors-note-readonly" style="display: none; background: var(--bg-primary); padding: 8px; border-radius: 4px; font-size: 11px; white-space: pre-wrap;"></div>
|
|
<textarea id="preset-authors-note-editable" style="display: none; width: 100%; min-height: 60px; font-size: 11px;" placeholder="Default Author's Note if user hasn't set one..."></textarea>
|
|
</div>
|
|
|
|
<!-- Save Changes Button (only for custom presets) -->
|
|
<button type="button" id="save-preset-changes-btn" class="btn-secondary" style="display: none; width: 100%; margin-bottom: 8px;">
|
|
Save Changes
|
|
</button>
|
|
</div>
|
|
|
|
<button type="button" id="apply-preset-btn" class="btn-primary" style="width: 100%; margin-bottom: 8px;" disabled>
|
|
Apply Preset
|
|
</button>
|
|
|
|
<button type="button" id="create-preset-btn" class="btn-secondary" style="width: 100%;">
|
|
Create Custom Preset
|
|
</button>
|
|
|
|
<p style="color: var(--text-secondary); font-size: 11px; margin-top: 12px; padding: 8px; background: var(--bg-secondary); border-radius: 4px;">
|
|
<strong>Note:</strong> Custom presets will be stored in ~/.config/claudia/presets/ and will be available across all characters.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Settings overlay backdrop -->
|
|
<div class="settings-overlay" id="settings-overlay"></div>
|
|
|
|
<div class="settings-panel" id="settings-panel">
|
|
<div class="settings-header">
|
|
<h2>Settings</h2>
|
|
<button id="close-settings-btn" class="icon-btn">
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
|
<line x1="4" y1="4" x2="12" y2="12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
<line x1="12" y1="4" x2="4" y2="12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="settings-tabs">
|
|
<button class="tab-btn active" data-tab="api">API</button>
|
|
<button class="tab-btn" data-tab="character">Character</button>
|
|
<button class="tab-btn" data-tab="appearance">Appearance</button>
|
|
</div>
|
|
|
|
<div id="api-tab" class="tab-content active">
|
|
<form id="settings-form" class="settings-form">
|
|
<div class="form-group">
|
|
<label for="api-base-url">Base URL</label>
|
|
<input
|
|
type="text"
|
|
id="api-base-url"
|
|
placeholder="https://api.anthropic.com"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="api-key">API Key</label>
|
|
<input
|
|
type="password"
|
|
id="api-key"
|
|
placeholder="sk-ant-..."
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<button type="button" id="validate-btn" class="btn-secondary">
|
|
Validate
|
|
</button>
|
|
|
|
<div id="models-group" class="form-group" style="display: none;">
|
|
<label for="model-select">Model</label>
|
|
<select id="model-select" required>
|
|
<option value="">Select a model</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>
|
|
<input type="checkbox" id="stream-toggle" />
|
|
Enable streaming responses (real-time token display)
|
|
</label>
|
|
</div>
|
|
|
|
<div id="validation-message" class="validation-message"></div>
|
|
|
|
<button type="submit" id="save-settings-btn" class="btn-primary" disabled>
|
|
Save Configuration
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div id="character-tab" class="tab-content">
|
|
<form id="character-form" class="settings-form">
|
|
<div class="form-group">
|
|
<label for="character-settings-select">Select Character</label>
|
|
<select id="character-settings-select"></select>
|
|
</div>
|
|
|
|
<!-- Basic Info Section -->
|
|
<div class="settings-section" data-section="basic">
|
|
<div class="settings-section-header">
|
|
<div class="settings-section-title">
|
|
<svg class="settings-section-icon" viewBox="0 0 16 16" fill="none">
|
|
<path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
Basic Information
|
|
</div>
|
|
</div>
|
|
<div class="settings-section-content">
|
|
<div class="form-group">
|
|
<label for="character-name">Character Name</label>
|
|
<input
|
|
type="text"
|
|
id="character-name"
|
|
placeholder="Assistant"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="character-avatar">Avatar (Optional)</label>
|
|
<div class="avatar-upload">
|
|
<div id="avatar-preview" class="avatar-preview">
|
|
<div class="avatar-circle-large"></div>
|
|
</div>
|
|
<input
|
|
type="file"
|
|
id="character-avatar"
|
|
accept="image/png,image/jpeg,image/jpg,image/webp"
|
|
style="display: none;"
|
|
/>
|
|
<button type="button" id="upload-avatar-btn" class="btn-secondary">
|
|
Choose Image
|
|
</button>
|
|
<button type="button" id="remove-avatar-btn" class="btn-secondary" style="display: none;">
|
|
Remove
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="character-system-prompt">System Prompt</label>
|
|
<textarea
|
|
id="character-system-prompt"
|
|
placeholder="You are a helpful AI assistant..."
|
|
rows="6"
|
|
required
|
|
></textarea>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="character-greeting">Greeting (Optional)</label>
|
|
<textarea
|
|
id="character-greeting"
|
|
placeholder="Hello! How can I help you today?"
|
|
rows="2"
|
|
></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Roleplay Details Section -->
|
|
<div class="settings-section collapsed" data-section="roleplay">
|
|
<div class="settings-section-header">
|
|
<div class="settings-section-title">
|
|
<svg class="settings-section-icon" viewBox="0 0 16 16" fill="none">
|
|
<path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
Roleplay Details
|
|
</div>
|
|
</div>
|
|
<div class="settings-section-content">
|
|
<div class="form-group">
|
|
<label for="character-personality">Personality Tags</label>
|
|
<input
|
|
type="text"
|
|
id="character-personality"
|
|
placeholder="helpful, friendly, knowledgeable"
|
|
/>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="character-description">Description</label>
|
|
<textarea
|
|
id="character-description"
|
|
placeholder="Detailed character description, appearance, background..."
|
|
rows="8"
|
|
></textarea>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="character-scenario">Scenario</label>
|
|
<textarea
|
|
id="character-scenario"
|
|
placeholder="The setting or situation where the character exists..."
|
|
rows="4"
|
|
></textarea>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="character-mes-example">Message Examples</label>
|
|
<textarea
|
|
id="character-mes-example"
|
|
placeholder="Example dialogue from the character..."
|
|
rows="4"
|
|
></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Advanced Settings Section -->
|
|
<div class="settings-section collapsed" data-section="advanced">
|
|
<div class="settings-section-header">
|
|
<div class="settings-section-title">
|
|
<svg class="settings-section-icon" viewBox="0 0 16 16" fill="none">
|
|
<path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
Advanced Settings
|
|
</div>
|
|
</div>
|
|
<div class="settings-section-content">
|
|
<div class="form-group">
|
|
<label for="character-post-history">Post-History Instructions</label>
|
|
<textarea
|
|
id="character-post-history"
|
|
placeholder="Instructions to apply after chat history..."
|
|
rows="3"
|
|
></textarea>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="character-alt-greetings">Alternate Greetings</label>
|
|
<textarea
|
|
id="character-alt-greetings"
|
|
placeholder="One greeting per line..."
|
|
rows="3"
|
|
></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Metadata Section -->
|
|
<div class="settings-section collapsed" data-section="metadata">
|
|
<div class="settings-section-header">
|
|
<div class="settings-section-title">
|
|
<svg class="settings-section-icon" viewBox="0 0 16 16" fill="none">
|
|
<path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
Metadata
|
|
</div>
|
|
</div>
|
|
<div class="settings-section-content">
|
|
<div class="form-group">
|
|
<label for="character-tags">Tags</label>
|
|
<input
|
|
type="text"
|
|
id="character-tags"
|
|
placeholder="fantasy, adventure, comedy"
|
|
/>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="character-creator">Creator</label>
|
|
<input
|
|
type="text"
|
|
id="character-creator"
|
|
placeholder="Card creator name"
|
|
/>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="character-version">Character Version</label>
|
|
<input
|
|
type="text"
|
|
id="character-version"
|
|
placeholder="1.0"
|
|
/>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="character-creator-notes">Creator Notes</label>
|
|
<textarea
|
|
id="character-creator-notes"
|
|
placeholder="Notes from the creator..."
|
|
rows="2"
|
|
></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="character-message" class="validation-message"></div>
|
|
|
|
<div style="display: flex; gap: 8px;">
|
|
<button type="submit" id="save-character-btn" class="btn-primary" style="flex: 1;">
|
|
Save Character
|
|
</button>
|
|
<button type="button" id="delete-character-btn" class="btn-danger">
|
|
Delete
|
|
</button>
|
|
</div>
|
|
|
|
<div style="display: flex; gap: 8px;">
|
|
<button type="button" id="import-character-btn" class="btn-secondary" style="flex: 1;">
|
|
Import v2 Card
|
|
</button>
|
|
<button type="button" id="export-character-btn" class="btn-secondary" style="flex: 1;">
|
|
Export v2 Card
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div id="appearance-tab" class="tab-content">
|
|
<div class="settings-form">
|
|
<div class="form-group">
|
|
<label for="theme-select">Theme</label>
|
|
<select id="theme-select" class="theme-select">
|
|
<option value="dark">Dark (Default)</option>
|
|
<option value="darker">Darker</option>
|
|
<option value="midnight">Midnight Blue</option>
|
|
<option value="forest">Forest</option>
|
|
<option value="sunset">Sunset</option>
|
|
<option value="light">Light</option>
|
|
</select>
|
|
<small style="color: var(--text-secondary); margin-top: 4px; display: block;">Choose your preferred color scheme</small>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="view-mode-select">View Mode</label>
|
|
<select id="view-mode-select" class="view-mode-select">
|
|
<option value="compact">Compact - Tight spacing, smaller text</option>
|
|
<option value="cozy">Cozy - Balanced spacing (Default)</option>
|
|
<option value="comfortable">Comfortable - Spacious layout</option>
|
|
</select>
|
|
<small style="color: var(--text-secondary); margin-top: 4px; display: block;">Adjust message density and spacing</small>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="font-size-slider">
|
|
Font Size: <span id="font-size-value">100%</span>
|
|
</label>
|
|
<input
|
|
type="range"
|
|
id="font-size-slider"
|
|
min="80"
|
|
max="140"
|
|
value="100"
|
|
step="10"
|
|
class="font-size-slider"
|
|
/>
|
|
<div style="display: flex; justify-content: space-between; margin-top: 4px;">
|
|
<small style="color: var(--text-secondary);">Small (80%)</small>
|
|
<small style="color: var(--text-secondary);">Large (140%)</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="theme-preview-container">
|
|
<div class="theme-preview-label">Preview</div>
|
|
<div class="theme-preview">
|
|
<div class="theme-preview-message user-preview">
|
|
<div class="theme-preview-content">User message</div>
|
|
</div>
|
|
<div class="theme-preview-message assistant-preview">
|
|
<div class="theme-preview-avatar"></div>
|
|
<div class="theme-preview-content">Assistant response</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="input-container">
|
|
<form id="chat-form" class="chat-form">
|
|
<textarea
|
|
id="message-input"
|
|
placeholder="Ask me anything..."
|
|
rows="1"
|
|
autocomplete="off"
|
|
></textarea>
|
|
<button type="submit" id="send-btn" class="send-btn">
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
<path d="M3 10L17 3L13 10L17 17L3 10Z" fill="currentColor"/>
|
|
</svg>
|
|
</button>
|
|
</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>
|
|
|
|
<!-- Avatar zoom modal -->
|
|
<div id="avatar-modal" class="avatar-modal" style="display: none;">
|
|
<div class="avatar-modal-overlay"></div>
|
|
<div class="avatar-modal-content">
|
|
<img id="avatar-modal-img" src="" alt="Avatar" />
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|