stwhite
/
chatterbox-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

variablized colors in the .css, tweaked them. Re-arranged buttons.

This commit is contained in:
Steve White 2025-06-06 11:33:54 -05:00
parent 252f885b5a
commit e11a4a091c
4 changed files with 142 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

191
frontend/css/style.css
View File

@ -1,11 +1,57 @@
/* Modern, clean, and accessible UI styles for Chatterbox TTS */ /* CSS Custom Properties - Color Palette */
:root {
/* Primary Colors */
--primary-blue: #163b65;
--primary-blue-dark: #357ab8;
--primary-blue-darker: #205081;
/* Background Colors */
--bg-body: #f7f9fa;
--bg-white: #fff;
--bg-light: #f3f5f7;
--bg-lighter: #f9fafb;
--bg-blue-light: #f3f7fa;
--bg-blue-lighter: #eaf1fa;
--bg-gray-light: #f7f7f7;
/* Text Colors */
--text-primary: #222;
--text-secondary: #2b2b2b;
--text-tertiary: #333;
--text-white: #fff;
--text-blue: #153f6f;
--text-blue-dark: #357ab8;
--text-blue-darker: #205081;
/* Border Colors */
--border-light: #1b0404;
--border-medium: #cfd8dc;
--border-blue: #b5c6df;
--border-gray: #e3e3e3;
/* Status Colors */
--error-bg: #e74c3c;
--error-bg-dark: #c0392b;
--warning-bg: #f9e79f;
--warning-text: #b7950b;
--warning-border: #f7ca18;
/* Header/Footer */
--header-bg: #222e3a;
/* Shadows */
--shadow-light: rgba(44,62,80,0.04);
--shadow-medium: rgba(44,62,80,0.06);
--shadow-strong: rgba(44,62,80,0.07);
}
body { body {
font-family: 'Segoe UI', 'Roboto', 'Arial', sans-serif; font-family: 'Segoe UI', 'Roboto', 'Arial', sans-serif;
line-height: 1.7; line-height: 1.7;
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: #f7f9fa; background-color: var(--bg-body);
color: #222; color: var(--text-primary);
} }
.container { .container {
@ -15,11 +61,11 @@ body {
} }
header { header {
background: #222e3a; background: var(--header-bg);
color: #fff; color: var(--text-white);
padding: 1.5rem 0 1rem 0; padding: 1.5rem 0 1rem 0;
text-align: center; text-align: center;
border-bottom: 3px solid #4a90e2; border-bottom: 3px solid var(--primary-blue);
} }
h1 { h1 {
@ -49,7 +95,6 @@ main {
padding: 0; padding: 0;
} }
#results-display.panel { #results-display.panel {
flex: 1 1 100%; flex: 1 1 100%;
min-width: 0; min-width: 0;
@ -60,7 +105,7 @@ main {
#dialog-items-table { #dialog-items-table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
background: #fff; background: var(--bg-white);
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
font-size: 1rem; font-size: 1rem;
@ -70,23 +115,22 @@ main {
#dialog-items-table th, #dialog-items-table td { #dialog-items-table th, #dialog-items-table td {
padding: 7px 10px; padding: 7px 10px;
border: 1px solid #ddd; border: 1px solid var(--border-light);
text-align: left; text-align: left;
vertical-align: middle; vertical-align: middle;
font-weight: 400; font-weight: 300;
font-size: 0.97rem; font-size: 0.97rem;
color: #2b2b2b; color: var(--text-secondary);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
/* Widen the Text/Duration column */ /* Widen the Text/Duration column */
#dialog-items-table th:nth-child(3), #dialog-items-table td:nth-child(3) { #dialog-items-table th:nth-child(3), #dialog-items-table td:nth-child(3) {
min-width: 240px; min-width: 320px;
width: 40%; width: 50%;
font-weight: 400; font-weight: 300;
font-size: 1rem; font-size: 1rem;
} }
@ -108,7 +152,6 @@ main {
padding-right: 0; padding-right: 0;
} }
#dialog-items-table th:first-child, #dialog-items-table td.type-icon-cell { #dialog-items-table th:first-child, #dialog-items-table td.type-icon-cell {
width: 44px; width: 44px;
min-width: 36px; min-width: 36px;
@ -131,14 +174,16 @@ main {
} }
#dialog-items-table th { #dialog-items-table th {
background: #f3f7fa; background: var(--bg-light);
color: #4a90e2; color: var(--primary-blue);
font-weight: 600; font-weight: 600;
font-size: 1.05rem; font-size: 1.05rem;
} }
#dialog-items-table tr:last-child td { #dialog-items-table tr:last-child td {
border-bottom: none; border-bottom: none;
} }
#dialog-items-table td.actions { #dialog-items-table td.actions {
text-align: center; text-align: center;
min-width: 110px; min-width: 110px;
@ -149,23 +194,26 @@ main {
details#generation-log-details { details#generation-log-details {
margin-bottom: 0; margin-bottom: 0;
border-radius: 4px; border-radius: 4px;
background: #f3f5f7; background: var(--bg-light);
box-shadow: 0 1px 3px rgba(44,62,80,0.04); box-shadow: 0 1px 3px var(--shadow-light);
padding: 0 0 0 0; padding: 0 0 0 0;
transition: box-shadow 0.15s; transition: box-shadow 0.15s;
} }
details#generation-log-details[open] { details#generation-log-details[open] {
box-shadow: 0 2px 8px rgba(44,62,80,0.07); box-shadow: 0 2px 8px var(--shadow-strong);
background: #f9fafb; background: var(--bg-lighter);
} }
details#generation-log-details summary { details#generation-log-details summary {
font-size: 1rem; font-size: 1rem;
color: #357ab8; color: var(--text-blue);
padding: 10px 0 6px 0; padding: 10px 0 6px 0;
outline: none; outline: none;
} }
details#generation-log-details summary:focus { details#generation-log-details summary:focus {
outline: 2px solid #4a90e2; outline: 2px solid var(--primary-blue);
border-radius: 3px; border-radius: 3px;
} }
@ -192,9 +240,9 @@ details#generation-log-details summary:focus {
} }
.card { .card {
background: #fff; background: var(--bg-white);
border-radius: 8px; border-radius: 8px;
box-shadow: 0 2px 8px rgba(44,62,80,0.07); box-shadow: 0 2px 8px var(--shadow-medium);
padding: 18px 20px; padding: 18px 20px;
margin-bottom: 18px; margin-bottom: 18px;
} }
@ -214,19 +262,19 @@ h2 {
font-size: 1.5rem; font-size: 1.5rem;
margin-top: 0; margin-top: 0;
margin-bottom: 16px; margin-bottom: 16px;
color: #4a90e2; color: var(--primary-blue);
letter-spacing: 0.5px; letter-spacing: 0.5px;
} }
h3 { h3 {
font-size: 1.1rem; font-size: 1.1rem;
margin-bottom: 10px; margin-bottom: 10px;
color: #333; color: var(--text-tertiary);
} }
.x-remove-btn { .x-remove-btn {
background: #e74c3c; background: var(--error-bg);
color: #fff; color: var(--text-white);
border: none; border: none;
border-radius: 50%; border-radius: 50%;
width: 32px; width: 32px;
@ -239,15 +287,16 @@ h3 {
cursor: pointer; cursor: pointer;
transition: background 0.15s; transition: background 0.15s;
margin: 0 3px; margin: 0 3px;
box-shadow: 0 1px 2px rgba(44,62,80,0.06); box-shadow: 0 1px 2px var(--shadow-light);
outline: none; outline: none;
padding: 0; padding: 0;
vertical-align: middle; vertical-align: middle;
} }
.x-remove-btn:hover, .x-remove-btn:focus { .x-remove-btn:hover, .x-remove-btn:focus {
background: #c0392b; background: var(--error-bg-dark);
color: #fff; color: var(--text-white);
outline: 2px solid #e74c3c; outline: 2px solid var(--error-bg);
} }
.form-row { .form-row {
@ -263,9 +312,9 @@ label {
margin-bottom: 0; margin-bottom: 0;
} }
input[type='text'], input[type='file'] { input[type='text'], input[type='file'], textarea {
padding: 8px 10px; padding: 8px 10px;
border: 1px solid #cfd8dc; border: 1px solid var(--border-medium);
border-radius: 4px; border-radius: 4px;
font-size: 1rem; font-size: 1rem;
width: 100%; width: 100%;
@ -273,14 +322,21 @@ input[type='text'], input[type='file'] {
} }
input[type='file'] { input[type='file'] {
background: #f7f7f7; background: var(--bg-gray-light);
font-size: 0.97rem; font-size: 0.97rem;
} }
.dialog-edit-textarea {
min-height: 60px;
resize: vertical;
font-family: inherit;
line-height: 1.4;
}
button { button {
padding: 9px 18px; padding: 9px 18px;
background: #4a90e2; background: var(--primary-blue);
color: #fff; color: var(--text-white);
border: none; border: none;
border-radius: 5px; border-radius: 5px;
cursor: pointer; cursor: pointer;
@ -291,9 +347,9 @@ button {
} }
.generate-line-btn, .play-line-btn { .generate-line-btn, .play-line-btn {
background: #f3f7fa; background: var(--bg-blue-light);
color: #357ab8; color: var(--text-blue);
border: 1.5px solid #b5c6df; border: 1.5px solid var(--border-blue);
border-radius: 50%; border-radius: 50%;
width: 32px; width: 32px;
height: 32px; height: 32px;
@ -303,26 +359,29 @@ button {
justify-content: center; justify-content: center;
margin: 0 3px; margin: 0 3px;
padding: 0; padding: 0;
box-shadow: 0 1px 2px rgba(44,62,80,0.06); box-shadow: 0 1px 2px var(--shadow-light);
vertical-align: middle; vertical-align: middle;
} }
.generate-line-btn:disabled, .play-line-btn:disabled { .generate-line-btn:disabled, .play-line-btn:disabled {
opacity: 0.45; opacity: 0.45;
cursor: not-allowed; cursor: not-allowed;
} }
.generate-line-btn.loading { .generate-line-btn.loading {
background: #f9e79f; background: var(--warning-bg);
color: #b7950b; color: var(--warning-text);
border-color: #f7ca18; border-color: var(--warning-border);
} }
.generate-line-btn:hover, .play-line-btn:hover { .generate-line-btn:hover, .play-line-btn:hover {
background: #eaf1fa; background: var(--bg-blue-lighter);
color: #205081; color: var(--text-blue-darker);
border-color: #357ab8; border-color: var(--text-blue);
} }
button:hover, button:focus { button:hover, button:focus {
background: #357ab8; background: var(--primary-blue-dark);
outline: none; outline: none;
} }
@ -338,7 +397,7 @@ button:hover, button:focus {
#speaker-list li { #speaker-list li {
padding: 7px 0; padding: 7px 0;
border-bottom: 1px solid #e3e3e3; border-bottom: 1px solid var(--border-gray);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@ -349,7 +408,7 @@ button:hover, button:focus {
} }
pre { pre {
background: #f3f5f7; background: var(--bg-light);
padding: 12px; padding: 12px;
border-radius: 4px; border-radius: 4px;
font-size: 0.98rem; font-size: 0.98rem;
@ -367,8 +426,8 @@ audio {
#zip-archive-link { #zip-archive-link {
display: inline-block; display: inline-block;
margin-right: 10px; margin-right: 10px;
color: #fff; color: var(--text-white);
background: #4a90e2; background: var(--primary-blue);
padding: 7px 16px; padding: 7px 16px;
border-radius: 4px; border-radius: 4px;
text-decoration: none; text-decoration: none;
@ -377,17 +436,17 @@ audio {
} }
#zip-archive-link:hover, #zip-archive-link:focus { #zip-archive-link:hover, #zip-archive-link:focus {
background: #357ab8; background: var(--primary-blue-dark);
} }
footer { footer {
text-align: center; text-align: center;
padding: 20px 0; padding: 20px 0;
background: #222e3a; background: var(--header-bg);
color: #fff; color: var(--text-white);
margin-top: 40px; margin-top: 40px;
font-size: 1rem; font-size: 1rem;
border-top: 3px solid #4a90e2; border-top: 3px solid var(--primary-blue);
} }
@media (max-width: 900px) { @media (max-width: 900px) {
@ -422,9 +481,9 @@ footer {
} }
.move-up-btn, .move-down-btn { .move-up-btn, .move-down-btn {
background: #f3f7fa; background: var(--bg-blue-light);
color: #357ab8; color: var(--text-blue);
border: 1.5px solid #b5c6df; border: 1.5px solid var(--border-blue);
border-radius: 50%; border-radius: 50%;
width: 32px; width: 32px;
height: 32px; height: 32px;
@ -434,7 +493,7 @@ footer {
justify-content: center; justify-content: center;
margin: 0 3px; margin: 0 3px;
padding: 0; padding: 0;
box-shadow: 0 1px 2px rgba(44,62,80,0.06); box-shadow: 0 1px 2px var(--shadow-light);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s; transition: background 0.15s, color 0.15s, border-color 0.15s;
@ -446,12 +505,12 @@ footer {
} }
.move-up-btn:hover:not(:disabled), .move-down-btn:hover:not(:disabled) { .move-up-btn:hover:not(:disabled), .move-down-btn:hover:not(:disabled) {
background: #eaf1fa; background: var(--bg-blue-lighter);
color: #205081; color: var(--text-blue-darker);
border-color: #357ab8; border-color: var(--text-blue);
} }
.move-up-btn:focus, .move-down-btn:focus { .move-up-btn:focus, .move-down-btn:focus {
outline: 2px solid #4a90e2; outline: 2px solid var(--primary-blue);
outline-offset: 2px; outline-offset: 2px;
} }

2
frontend/index.html
View File

@ -38,6 +38,7 @@
<div class="dialog-controls form-row"> <div class="dialog-controls form-row">
<button id="add-speech-line-btn">Add Speech Line</button> <button id="add-speech-line-btn">Add Speech Line</button>
<button id="add-silence-line-btn">Add Silence Line</button> <button id="add-silence-line-btn">Add Silence Line</button>
<button id="generate-dialog-btn">Generate Dialog</button>
</div> </div>
<div class="dialog-controls form-row"> <div class="dialog-controls form-row">
<label for="output-base-name">Output Base Name:</label> <label for="output-base-name">Output Base Name:</label>
@ -48,7 +49,6 @@
<input type="file" id="load-script-input" accept=".jsonl" style="display: none;"> <input type="file" id="load-script-input" accept=".jsonl" style="display: none;">
<button id="load-script-btn">Load Script</button> <button id="load-script-btn">Load Script</button>
</div> </div>
<button id="generate-dialog-btn">Generate Dialog</button>
</section> </section>
</div> </div>
<!-- Results below --> <!-- Results below -->

18
frontend/js/app.js
View File

@ -201,13 +201,17 @@ async function initializeDialogEditor() {
// Double-click to edit // Double-click to edit
textTd.ondblclick = () => { textTd.ondblclick = () => {
textTd.innerHTML = ''; textTd.innerHTML = '';
const input = document.createElement('input'); let input;
input.className = 'dialog-edit-input';
if (item.type === 'speech') { if (item.type === 'speech') {
input.type = 'text'; // Use textarea for speech text to enable multi-line editing
input = document.createElement('textarea');
input.className = 'dialog-edit-textarea';
input.value = item.text; input.value = item.text;
input.size = Math.max(16, item.text.length); input.rows = Math.max(2, Math.ceil(item.text.length / 50)); // Auto-size based on content
} else { } else {
// Use number input for duration
input = document.createElement('input');
input.className = 'dialog-edit-input';
input.type = 'number'; input.type = 'number';
input.value = item.duration; input.value = item.duration;
input.min = 0.1; input.min = 0.1;
@ -215,10 +219,14 @@ async function initializeDialogEditor() {
} }
input.onblur = saveEdit; input.onblur = saveEdit;
input.onkeydown = (e) => { input.onkeydown = (e) => {
if (e.key === 'Enter') { if (e.key === 'Enter' && item.type === 'silence') {
// Only auto-save on Enter for duration inputs
input.blur(); input.blur();
} else if (e.key === 'Escape') { } else if (e.key === 'Escape') {
renderDialogItems(); renderDialogItems();
} else if (e.key === 'Enter' && e.ctrlKey && item.type === 'speech') {
// Ctrl+Enter to save for speech text
input.blur();
} }
}; };
textTd.appendChild(input); textTd.appendChild(input);

3
speaker_data/speakers.yaml
View File

@ -13,3 +13,6 @@ fb84ce1c-f32d-4df9-9673-2c64e9603133:
90fcd672-ba84-441a-ac6c-0449a59653bd: 90fcd672-ba84-441a-ac6c-0449a59653bd:
name: dummy_speaker name: dummy_speaker
sample_path: speaker_samples/90fcd672-ba84-441a-ac6c-0449a59653bd.wav sample_path: speaker_samples/90fcd672-ba84-441a-ac6c-0449a59653bd.wav
a6387c23-4ca4-42b5-8aaf-5699dbabbdf0:
name: Mike
sample_path: speaker_samples/a6387c23-4ca4-42b5-8aaf-5699dbabbdf0.wav