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

feat/frontend-phase1 #1

Merged
stwhite merged 34 commits from feat/frontend-phase1 into main 2025-08-14 15:44:25 +00:00
Conversation 0 Commits 34 Files Changed 70 +70 -20
2 changed files with 70 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit f2f907452b - Show all commits

61
frontend/css/style.css
View File

@ -65,12 +65,69 @@ main {
overflow: hidden;
font-size: 1rem;
margin-bottom: 0;
table-layout: fixed;
}
#dialog-items-table th, #dialog-items-table td {
padding: 10px 12px;
border-bottom: 1px solid #e3e3e3;
padding: 7px 10px;
border: 1px solid #ddd;
text-align: left;
vertical-align: middle;
font-weight: 400;
font-size: 0.97rem;
color: #2b2b2b;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Widen the Text/Duration column */
#dialog-items-table th:nth-child(3), #dialog-items-table td:nth-child(3) {
min-width: 240px;
width: 40%;
font-weight: 400;
font-size: 1rem;
}
/* Make the Speaker (2nd) column narrower */
#dialog-items-table th:nth-child(2), #dialog-items-table td:nth-child(2) {
width: 60px;
min-width: 60px;
max-width: 60px;
text-align: center;
}
/* Make the Actions (4th) column narrower */
#dialog-items-table th:nth-child(4), #dialog-items-table td:nth-child(4) {
width: 60px;
min-width: 44px;
max-width: 60px;
text-align: center;
}
#dialog-items-table th:first-child, #dialog-items-table td.type-icon-cell {
width: 44px;
min-width: 36px;
max-width: 48px;
text-align: center;
padding-left: 0;
padding-right: 0;
}
.type-icon-cell {
text-align: center;
vertical-align: middle;
}
.dialog-type-icon {
font-size: 1.4em;
display: inline-block;
line-height: 1;
vertical-align: middle;
}
#dialog-items-table th {
background: #f3f7fa;
color: #4a90e2;

29
frontend/js/app.js
View File

@ -136,7 +136,12 @@ function initializeDialogEditor() {
// Type column
const typeTd = document.createElement('td');
typeTd.textContent = item.type === 'speech' ? 'Speech' : 'Silence';
typeTd.classList.add('type-icon-cell');
if (item.type === 'speech') {
typeTd.innerHTML = '<span class="dialog-type-icon" title="Speech" aria-label="Speech">🗣️</span>';
} else {
typeTd.innerHTML = '<span class="dialog-type-icon" title="Silence" aria-label="Silence">🤫</span>';
}
tr.appendChild(typeTd);
// Speaker column
@ -301,23 +306,8 @@ function initializeDialogEditor() {
}
if (dialogItems.length === 0) {
alert('Please add at least one speech or silence line to the dialog.');
return;
return; // Prevent further execution if no dialog items
}
// Clear previous results and show loading/status
if (generationLogPre) generationLogPre.textContent = 'Generating dialog...';
if (audioPlayer) {
audioPlayer.style.display = 'none';
audioPlayer.src = ''; // Clear previous audio source
}
if (downloadZipLink) {
downloadZipLink.style.display = 'none';
downloadZipLink.href = '#';
downloadZipLink.textContent = '';
}
if (zipArchivePlaceholder) zipArchivePlaceholder.style.display = 'block'; // Show placeholder
if (resultsDisplaySection) resultsDisplaySection.style.display = 'block'; // Make sure it's visible
const payload = {
output_base_name: outputBaseName,
dialog_items: dialogItems.map(item => {
@ -345,7 +335,10 @@ function initializeDialogEditor() {
if (generationLogPre) generationLogPre.textContent = result.log || 'No log output.';
if (result.concatenated_audio_url && audioPlayer) { // Check audioPlayer, not audioSource
audioPlayer.src = result.concatenated_audio_url.startsWith('http') ? result.concatenated_audio_url : `${API_BASE_URL_FOR_FILES}${result.concatenated_audio_url}`;
// Cache-busting: append timestamp to force reload
let audioUrl = result.concatenated_audio_url.startsWith('http') ? result.concatenated_audio_url : `${API_BASE_URL_FOR_FILES}${result.concatenated_audio_url}`;
audioUrl += (audioUrl.includes('?') ? '&' : '?') + 't=' + Date.now();
audioPlayer.src = audioUrl;
audioPlayer.load(); // Call load() after setting new source
audioPlayer.style.display = 'block';
} else {