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

Working minimum interface for js and api

This commit is contained in:
Steve White 2025-06-05 16:47:47 -05:00
parent 9d1dc330ea
commit b5db7172cf
5 changed files with 859 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
frontend/css/style.css Normal file
View File

@ -0,0 +1,92 @@
/* Basic styles - to be expanded */
body {
font-family: sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}
header {
background: #333;
color: #fff;
padding: 1rem 0;
text-align: center;
}
main {
padding: 20px;
max-width: 960px;
margin: auto;
}
section {
background: #fff;
padding: 20px;
margin-bottom: 20px;
border-radius: 5px;
}
hr {
margin: 20px 0;
border: 0;
border-top: 1px solid #eee;
}
button {
padding: 10px 15px;
background: #333;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
margin-right: 5px; /* Add some margin between buttons */
}
button:hover {
background: #555;
}
input[type='text'], input[type='file'] {
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 4px;
width: calc(100% - 20px); /* Adjust width considering padding */
}
label {
display: block;
margin-bottom: 5px;
}
#speaker-list {
list-style: none;
padding: 0;
}
#speaker-list li {
padding: 5px 0;
border-bottom: 1px dotted #eee;
}
#speaker-list li:last-child {
border-bottom: none;
}
pre {
background: #eee;
padding: 10px;
border-radius: 4px;
white-space: pre-wrap; /* Allow wrapping */
word-wrap: break-word; /* Break long words */
}
footer {
text-align: center;
padding: 20px;
background: #333;
color: #fff;
margin-top: 30px;
}

87
frontend/index.html Normal file
View File

@ -0,0 +1,87 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chatterbox TTS Frontend</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1>Chatterbox TTS</h1>
</header>
<main>
<section id="speaker-management">
<h2>Speaker Management</h2>
<div id="speaker-list-container">
<h3>Available Speakers</h3>
<ul id="speaker-list">
<!-- Speakers will be populated here by JavaScript -->
</ul>
</div>
<div id="add-speaker-container">
<h3>Add New Speaker</h3>
<form id="add-speaker-form">
<div>
<label for="speaker-name">Speaker Name:</label>
<input type="text" id="speaker-name" name="name" required>
</div>
<div>
<label for="speaker-sample">Audio Sample (WAV or MP3):</label>
<input type="file" id="speaker-sample" name="audio_file" accept=".wav,.mp3" required>
</div>
<button type="submit">Add Speaker</button>
</form>
</div>
</section>
<hr>
<section id="dialog-editor">
<h2>Dialog Editor</h2>
<div id="dialog-items-container">
<!-- Dialog items will be added here by JavaScript -->
</div>
<div id="temp-input-area">
<!-- Temporary inputs for speech/silence will go here -->
</div>
<div class="dialog-controls">
<button id="add-speech-line-btn">Add Speech Line</button>
<button id="add-silence-line-btn">Add Silence Line</button>
</div>
<div class="dialog-controls">
<label for="output-base-name">Output Base Name:</label>
<input type="text" id="output-base-name" name="output-base-name" value="dialog_output" required>
</div>
<button id="generate-dialog-btn">Generate Dialog</button>
</section>
<hr>
<section id="results-display">
<h2>Results</h2>
<div>
<h3>Log:</h3>
<pre id="generation-log-content">(Generation log will appear here)</pre>
</div>
<div>
<h3>Concatenated Audio:</h3>
<audio id="concatenated-audio-player" controls src=""></audio>
</div>
<div>
<h3>Download Archive:</h3>
<a id="zip-archive-link" href="#" download style="display: none;">Download ZIP</a>
<p id="zip-archive-placeholder">(ZIP download link will appear here)</p>
</div>
</section>
</main>
<footer>
<p>&copy; 2024 Chatterbox TTS</p>
</footer>
<script src="js/api.js" type="module"></script>
<script src="js/app.js" type="module" defer></script>
</body>
</html>

131
frontend/js/api.js Normal file
View File

@ -0,0 +1,131 @@
// frontend/js/api.js
const API_BASE_URL = 'http://localhost:8000/api'; // Assuming backend runs on port 8000
/**
* Fetches the list of available speakers.
* @returns {Promise<Array<Object>>} A promise that resolves to an array of speaker objects.
* @throws {Error} If the network response is not ok.
*/
export async function getSpeakers() {
const response = await fetch(`${API_BASE_URL}/speakers/`);
if (!response.ok) {
const errorData = await response.json().catch(() => ({ message: response.statusText }));
throw new Error(`Failed to fetch speakers: ${errorData.detail || errorData.message || response.statusText}`);
}
return response.json();
}
// We will add more functions here: addSpeaker, deleteSpeaker, generateDialog
// ... (keep API_BASE_URL and getSpeakers)
/**
* Adds a new speaker.
* @param {FormData} formData - The form data containing speaker name and audio file.
* Example: formData.append('name', 'New Speaker');
* formData.append('audio_sample_file', fileInput.files[0]);
* @returns {Promise<Object>} A promise that resolves to the new speaker object.
* @throws {Error} If the network response is not ok.
*/
export async function addSpeaker(formData) {
const response = await fetch(`${API_BASE_URL}/speakers/`, {
method: 'POST',
body: formData, // FormData sets Content-Type to multipart/form-data automatically
});
if (!response.ok) {
console.log('API_JS_ADD_SPEAKER: Entered !response.ok block. Status:', response.status, 'StatusText:', response.statusText);
let errorPayload = { detail: `Request failed with status ${response.status}` }; // Default payload
try {
console.log('API_JS_ADD_SPEAKER: Attempting to parse error response as JSON...');
errorPayload = await response.json();
console.log('API_JS_ADD_SPEAKER: Successfully parsed error JSON:', errorPayload);
} catch (e) {
console.warn('API_JS_ADD_SPEAKER: Failed to parse error response as JSON. Error:', e);
// Use statusText if JSON parsing fails
errorPayload = { detail: response.statusText || `Request failed with status ${response.status} and no JSON body.`, parseError: e.toString() };
}
console.error('--- BEGIN SERVER ERROR PAYLOAD (addSpeaker) ---');
console.error('Status:', response.status);
console.error('Status Text:', response.statusText);
console.error('Parsed Payload:', errorPayload);
console.error('--- END SERVER ERROR PAYLOAD (addSpeaker) ---');
let detailedMessage = "Unknown error";
if (errorPayload && errorPayload.detail) {
if (typeof errorPayload.detail === 'string') {
detailedMessage = errorPayload.detail;
} else {
// If detail is an array (FastAPI validation errors) or object, stringify it.
detailedMessage = JSON.stringify(errorPayload.detail);
}
} else if (errorPayload && errorPayload.message) {
detailedMessage = errorPayload.message;
} else if (response.statusText) {
detailedMessage = response.statusText;
} else {
detailedMessage = `HTTP error ${response.status}`;
}
console.log(`API_JS_ADD_SPEAKER: Constructed detailedMessage: "${detailedMessage}"`);
console.log(`API_JS_ADD_SPEAKER: Throwing error with message: "Failed to add speaker: ${detailedMessage}"`);
throw new Error(`Failed to add speaker: ${detailedMessage}`);
}
return response.json();
}
// ... (keep API_BASE_URL, getSpeakers, addSpeaker)
/**
* Deletes a speaker by their ID.
* @param {string} speakerId - The ID of the speaker to delete.
* @returns {Promise<Object>} A promise that resolves to the response data (e.g., success message).
* @throws {Error} If the network response is not ok.
*/
export async function deleteSpeaker(speakerId) {
const response = await fetch(`${API_BASE_URL}/speakers/${speakerId}/`, {
method: 'DELETE',
});
if (!response.ok) {
const errorData = await response.json().catch(() => ({ message: response.statusText }));
throw new Error(`Failed to delete speaker ${speakerId}: ${errorData.detail || errorData.message || response.statusText}`);
}
// Handle 204 No Content specifically, as .json() would fail
if (response.status === 204) {
return { message: `Speaker ${speakerId} deleted successfully.` };
}
return response.json();
}
// ... (keep API_BASE_URL, getSpeakers, addSpeaker, deleteSpeaker)
/**
* Generates a dialog by sending a payload to the backend.
* @param {Object} dialogPayload - The payload for dialog generation.
* Example:
* {
* output_base_name: "my_dialog",
* dialog_items: [
* { type: "speech", speaker_id: "speaker1", text: "Hello world.", exaggeration: 1.0, cfg_weight: 2.0, temperature: 0.7 },
* { type: "silence", duration_ms: 500 },
* { type: "speech", speaker_id: "speaker2", text: "How are you?" }
* ]
* }
* @returns {Promise<Object>} A promise that resolves to the dialog generation response (log, file URLs).
* @throws {Error} If the network response is not ok.
*/
export async function generateDialog(dialogPayload) {
const response = await fetch(`${API_BASE_URL}/dialog/generate/`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(dialogPayload),
});
if (!response.ok) {
const errorData = await response.json().catch(() => ({ message: response.statusText }));
throw new Error(`Failed to generate dialog: ${errorData.detail || errorData.message || response.statusText}`);
}
return response.json();
}

353
frontend/js/app.js Normal file
View File

@ -0,0 +1,353 @@
import { getSpeakers, addSpeaker, deleteSpeaker, generateDialog } from './api.js';
const API_BASE_URL = 'http://localhost:8000'; // Assuming backend runs here
// This should match the base URL from which FastAPI serves static files
// If your main app is at http://localhost:8000, and static files are served from /generated_audio relative to that,
// then this should be http://localhost:8000. The backend will return paths like /generated_audio/...
const API_BASE_URL_FOR_FILES = 'http://localhost:8000';
document.addEventListener('DOMContentLoaded', () => {
console.log('DOM fully loaded and parsed');
initializeSpeakerManagement();
initializeDialogEditor(); // Placeholder for now
initializeResultsDisplay(); // Placeholder for now
});
// --- Speaker Management --- //
const speakerListUL = document.getElementById('speaker-list');
const addSpeakerForm = document.getElementById('add-speaker-form');
function initializeSpeakerManagement() {
loadSpeakers();
if (addSpeakerForm) {
addSpeakerForm.addEventListener('submit', async (event) => {
event.preventDefault();
const formData = new FormData(addSpeakerForm);
const speakerName = formData.get('name');
const audioFile = formData.get('audio_file');
if (!speakerName || !audioFile || audioFile.size === 0) {
alert('Please provide a speaker name and an audio file.');
return;
}
try {
const newSpeaker = await addSpeaker(formData);
alert(`Speaker added: ${newSpeaker.name} (ID: ${newSpeaker.id})`);
addSpeakerForm.reset();
loadSpeakers(); // Refresh speaker list
} catch (error) {
console.error('Failed to add speaker:', error);
alert('Error adding speaker: ' + error.message);
}
});
}
}
async function loadSpeakers() {
if (!speakerListUL) return;
try {
const speakers = await getSpeakers();
speakerListUL.innerHTML = ''; // Clear existing list
if (speakers.length === 0) {
const listItem = document.createElement('li');
listItem.textContent = 'No speakers available.';
speakerListUL.appendChild(listItem);
return;
}
speakers.forEach(speaker => {
const listItem = document.createElement('li');
listItem.textContent = `${speaker.name} (ID: ${speaker.id || 'N/A'}) `;
const deleteBtn = document.createElement('button');
deleteBtn.textContent = 'Delete';
deleteBtn.classList.add('delete-speaker-btn');
deleteBtn.onclick = () => handleDeleteSpeaker(speaker.id);
listItem.appendChild(deleteBtn);
speakerListUL.appendChild(listItem);
});
} catch (error) {
console.error('Failed to load speakers:', error);
speakerListUL.innerHTML = '<li>Error loading speakers. See console for details.</li>';
alert('Error loading speakers: ' + error.message);
}
}
async function handleDeleteSpeaker(speakerId) {
if (!speakerId) {
alert('Cannot delete speaker: Speaker ID is missing.');
return;
}
if (!confirm(`Are you sure you want to delete speaker ${speakerId}?`)) return;
try {
await deleteSpeaker(speakerId);
alert(`Speaker ${speakerId} deleted successfully.`);
loadSpeakers(); // Refresh speaker list
} catch (error) {
console.error(`Failed to delete speaker ${speakerId}:`, error);
alert(`Error deleting speaker: ${error.message}`);
}
}
// --- Dialog Editor --- //
let dialogItems = []; // Holds the sequence of speech/silence items
let availableSpeakersCache = []; // To populate speaker dropdown
function initializeDialogEditor() {
const dialogItemsContainer = document.getElementById('dialog-items-container');
const addSpeechLineBtn = document.getElementById('add-speech-line-btn');
const addSilenceLineBtn = document.getElementById('add-silence-line-btn');
const outputBaseNameInput = document.getElementById('output-base-name');
const generateDialogBtn = document.getElementById('generate-dialog-btn');
// Results Display Elements
const generationLogPre = document.getElementById('generation-log-content'); // Corrected ID
const audioPlayer = document.getElementById('concatenated-audio-player'); // Corrected ID
// audioSource will be the audioPlayer itself, no separate element by default in the HTML
const downloadZipLink = document.getElementById('zip-archive-link'); // Corrected ID
const zipArchivePlaceholder = document.getElementById('zip-archive-placeholder');
const resultsDisplaySection = document.getElementById('results-display');
let dialogItems = [];
let availableSpeakersCache = []; // Cache for speaker names and IDs
// Function to render the current dialogItems array to the DOM
function renderDialogItems() {
if (!dialogItemsContainer) return;
dialogItemsContainer.innerHTML = ''; // Clear existing items
dialogItems.forEach((item, index) => {
const li = document.createElement('li');
li.classList.add('dialog-item');
if (item.type === 'speech') {
const speaker = availableSpeakersCache.find(s => s.id === item.speaker_id);
const speakerName = speaker ? speaker.name : 'Unknown Speaker';
li.textContent = `Speech: [${speakerName}] "${item.text.substring(0, 30)}${item.text.length > 30 ? '...' : ''}"`;
} else if (item.type === 'silence') {
li.textContent = `Silence: ${item.duration}s`;
}
const removeBtn = document.createElement('button');
removeBtn.textContent = 'Remove';
removeBtn.classList.add('remove-dialog-item-btn');
removeBtn.onclick = () => {
dialogItems.splice(index, 1);
renderDialogItems();
};
li.appendChild(removeBtn);
dialogItemsContainer.appendChild(li);
});
}
const tempInputArea = document.getElementById('temp-input-area');
function clearTempInputArea() {
if (tempInputArea) tempInputArea.innerHTML = '';
}
if (addSpeechLineBtn) {
addSpeechLineBtn.addEventListener('click', async () => {
clearTempInputArea(); // Clear any previous inputs
if (availableSpeakersCache.length === 0) {
try {
availableSpeakersCache = await getSpeakers();
} catch (error) {
alert('Could not load speakers. Please try again.');
console.error('Error fetching speakers for dialog:', error);
return;
}
}
if (availableSpeakersCache.length === 0) {
alert('No speakers available. Please add a speaker first.');
return;
}
const speakerSelectLabel = document.createElement('label');
speakerSelectLabel.textContent = 'Speaker: ';
speakerSelectLabel.htmlFor = 'temp-speaker-select';
const speakerSelect = document.createElement('select');
speakerSelect.id = 'temp-speaker-select';
availableSpeakersCache.forEach(speaker => {
const option = document.createElement('option');
option.value = speaker.id;
option.textContent = speaker.name;
speakerSelect.appendChild(option);
});
const textInputLabel = document.createElement('label');
textInputLabel.textContent = ' Text: ';
textInputLabel.htmlFor = 'temp-speech-text';
const textInput = document.createElement('textarea');
textInput.id = 'temp-speech-text';
textInput.rows = 2;
textInput.placeholder = 'Enter speech text';
const addButton = document.createElement('button');
addButton.textContent = 'Add Speech';
addButton.onclick = () => {
const speakerId = speakerSelect.value;
const text = textInput.value.trim();
if (!speakerId || !text) {
alert('Please select a speaker and enter text.');
return;
}
dialogItems.push({ type: 'speech', speaker_id: speakerId, text: text });
renderDialogItems();
clearTempInputArea();
};
const cancelButton = document.createElement('button');
cancelButton.textContent = 'Cancel';
cancelButton.onclick = clearTempInputArea;
if (tempInputArea) {
tempInputArea.appendChild(speakerSelectLabel);
tempInputArea.appendChild(speakerSelect);
tempInputArea.appendChild(textInputLabel);
tempInputArea.appendChild(textInput);
tempInputArea.appendChild(addButton);
tempInputArea.appendChild(cancelButton);
}
});
}
if (addSilenceLineBtn) {
addSilenceLineBtn.addEventListener('click', () => {
clearTempInputArea(); // Clear any previous inputs
const durationInputLabel = document.createElement('label');
durationInputLabel.textContent = 'Duration (s): ';
durationInputLabel.htmlFor = 'temp-silence-duration';
const durationInput = document.createElement('input');
durationInput.type = 'number';
durationInput.id = 'temp-silence-duration';
durationInput.step = '0.1';
durationInput.min = '0.1';
durationInput.placeholder = 'e.g., 0.5';
const addButton = document.createElement('button');
addButton.textContent = 'Add Silence';
addButton.onclick = () => {
const duration = parseFloat(durationInput.value);
if (isNaN(duration) || duration <= 0) {
alert('Invalid duration. Please enter a positive number.');
return;
}
dialogItems.push({ type: 'silence', duration: duration });
renderDialogItems();
clearTempInputArea();
};
const cancelButton = document.createElement('button');
cancelButton.textContent = 'Cancel';
cancelButton.onclick = clearTempInputArea;
if (tempInputArea) {
tempInputArea.appendChild(durationInputLabel);
tempInputArea.appendChild(durationInput);
tempInputArea.appendChild(addButton);
tempInputArea.appendChild(cancelButton);
}
});
}
if (generateDialogBtn && outputBaseNameInput) {
generateDialogBtn.addEventListener('click', async () => {
const outputBaseName = outputBaseNameInput.value.trim();
if (!outputBaseName) {
alert('Please enter an output base name.');
outputBaseNameInput.focus();
return;
}
if (dialogItems.length === 0) {
alert('Please add at least one speech or silence line to the dialog.');
return;
}
// 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 => {
// For now, we are not collecting TTS params in the UI for speech items.
// The backend will use defaults. If we add UI for these later, they'd be included here.
if (item.type === 'speech') {
return {
type: item.type,
speaker_id: item.speaker_id,
text: item.text,
// exaggeration: item.exaggeration, // Example for future UI enhancement
// cfg_weight: item.cfg_weight,
// temperature: item.temperature
};
}
return item; // for silence items
})
};
try {
console.log('Generating dialog with payload:', JSON.stringify(payload, null, 2));
const result = await generateDialog(payload);
console.log('Dialog generation successful:', result);
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}`;
audioPlayer.load(); // Call load() after setting new source
audioPlayer.style.display = 'block';
} else {
if (audioPlayer) audioPlayer.style.display = 'none'; // Ensure it's hidden if no URL
if (generationLogPre) generationLogPre.textContent += '\nNo concatenated audio URL found.';
}
if (result.zip_archive_url && downloadZipLink) {
downloadZipLink.href = result.zip_archive_url.startsWith('http') ? result.zip_archive_url : `${API_BASE_URL_FOR_FILES}${result.zip_archive_url}`;
downloadZipLink.textContent = `Download ${outputBaseName}.zip`;
downloadZipLink.style.display = 'block';
if (zipArchivePlaceholder) zipArchivePlaceholder.style.display = 'none'; // Hide placeholder
} else {
if (downloadZipLink) downloadZipLink.style.display = 'none';
if (zipArchivePlaceholder) zipArchivePlaceholder.style.display = 'block'; // Show placeholder if no link
if (generationLogPre) generationLogPre.textContent += '\nNo ZIP archive URL found.';
}
} catch (error) {
console.error('Dialog generation failed:', error);
if (generationLogPre) generationLogPre.textContent = `Error generating dialog: ${error.message}`;
alert(`Error generating dialog: ${error.message}`);
}
});
}
console.log('Dialog Editor Initialized');
renderDialogItems(); // Initial render (empty)
}
// --- Results Display --- //
function initializeResultsDisplay() {
const generationLogContent = document.getElementById('generation-log-content');
const concatenatedAudioPlayer = document.getElementById('concatenated-audio-player');
const zipArchiveLink = document.getElementById('zip-archive-link');
const zipArchivePlaceholder = document.getElementById('zip-archive-placeholder');
// Functions to update these elements will be called by the generateDialog handler
// e.g., updateLog(message), setAudioSource(url), setZipLink(url)
console.log('Results Display Initialized');
}

196
frontend/tests/api.test.js Normal file
View File

@ -0,0 +1,196 @@
// frontend/tests/api.test.js
// Import the function to test (adjust path if your structure is different)
// We might need to configure Jest or use Babel for ES module syntax if this causes issues.
import { getSpeakers, addSpeaker, deleteSpeaker, generateDialog } from '../js/api.js';
// Mock the global fetch function
global.fetch = jest.fn();
const API_BASE_URL = 'http://localhost:8000/api'; // Centralize for all tests
describe('API Client - getSpeakers', () => {
beforeEach(() => {
// Clear all instances and calls to constructor and all methods:
fetch.mockClear();
});
it('should fetch speakers successfully', async () => {
const mockSpeakers = [{ id: '1', name: 'Speaker 1' }, { id: '2', name: 'Speaker 2' }];
fetch.mockResolvedValueOnce({
ok: true,
json: async () => mockSpeakers,
});
const speakers = await getSpeakers();
expect(fetch).toHaveBeenCalledTimes(1);
expect(fetch).toHaveBeenCalledWith(`${API_BASE_URL}/speakers`);
expect(speakers).toEqual(mockSpeakers);
});
it('should throw an error if the network response is not ok', async () => {
fetch.mockResolvedValueOnce({
ok: false,
statusText: 'Not Found',
json: async () => ({ detail: 'Speakers not found' }) // Simulate FastAPI error response
});
await expect(getSpeakers()).rejects.toThrow('Failed to fetch speakers: Speakers not found');
expect(fetch).toHaveBeenCalledTimes(1);
});
it('should throw a generic error if parsing error response fails', async () => {
fetch.mockResolvedValueOnce({
ok: false,
statusText: 'Internal Server Error',
json: async () => { throw new Error('Failed to parse error JSON'); } // Simulate error during .json()
});
await expect(getSpeakers()).rejects.toThrow('Failed to fetch speakers: Internal Server Error');
expect(fetch).toHaveBeenCalledTimes(1);
});
it('should throw an error if fetch itself fails (network error)', async () => {
fetch.mockRejectedValueOnce(new TypeError('Network failed'));
await expect(getSpeakers()).rejects.toThrow('Network failed'); // This will be the original fetch error
expect(fetch).toHaveBeenCalledTimes(1);
});
});
describe('API Client - addSpeaker', () => {
beforeEach(() => {
fetch.mockClear();
});
it('should add a speaker successfully', async () => {
const mockFormData = new FormData(); // In a real scenario, this would have data
mockFormData.append('name', 'Test Speaker');
// mockFormData.append('audio_sample_file', new File([''], 'sample.wav')); // File creation in Node test needs more setup or a mock
const mockResponse = { id: '3', name: 'Test Speaker', message: 'Speaker added successfully' };
fetch.mockResolvedValueOnce({
ok: true,
json: async () => mockResponse,
});
const result = await addSpeaker(mockFormData);
expect(fetch).toHaveBeenCalledTimes(1);
expect(fetch).toHaveBeenCalledWith(`${API_BASE_URL}/speakers`, {
method: 'POST',
body: mockFormData,
});
expect(result).toEqual(mockResponse);
});
it('should throw an error if adding a speaker fails', async () => {
const mockFormData = new FormData();
fetch.mockResolvedValueOnce({
ok: false,
statusText: 'Bad Request',
json: async () => ({ detail: 'Invalid speaker data' }),
});
await expect(addSpeaker(mockFormData)).rejects.toThrow('Failed to add speaker: Invalid speaker data');
expect(fetch).toHaveBeenCalledTimes(1);
});
});
describe('API Client - deleteSpeaker', () => {
beforeEach(() => {
fetch.mockClear();
});
it('should delete a speaker successfully with JSON response', async () => {
const speakerId = 'test-speaker-id-123';
const mockResponse = { message: `Speaker ${speakerId} deleted successfully` };
fetch.mockResolvedValueOnce({
ok: true,
status: 200, // Or any 2xx status that might return JSON
json: async () => mockResponse,
});
const result = await deleteSpeaker(speakerId);
expect(fetch).toHaveBeenCalledTimes(1);
expect(fetch).toHaveBeenCalledWith(`${API_BASE_URL}/speakers/${speakerId}`, {
method: 'DELETE',
});
expect(result).toEqual(mockResponse);
});
it('should handle successful deletion with 204 No Content response', async () => {
const speakerId = 'test-speaker-id-204';
fetch.mockResolvedValueOnce({
ok: true,
status: 204,
statusText: 'No Content',
// .json() is not called by the function if status is 204
});
const result = await deleteSpeaker(speakerId);
expect(fetch).toHaveBeenCalledTimes(1);
expect(fetch).toHaveBeenCalledWith(`${API_BASE_URL}/speakers/${speakerId}`, {
method: 'DELETE',
});
expect(result).toEqual({ message: `Speaker ${speakerId} deleted successfully.` });
});
it('should throw an error if deleting a speaker fails (e.g., speaker not found)', async () => {
const speakerId = 'non-existent-speaker-id';
fetch.mockResolvedValueOnce({
ok: false,
status: 404,
statusText: 'Not Found',
json: async () => ({ detail: 'Speaker not found' }),
});
await expect(deleteSpeaker(speakerId)).rejects.toThrow(`Failed to delete speaker ${speakerId}: Speaker not found`);
expect(fetch).toHaveBeenCalledTimes(1);
});
});
describe('API Client - generateDialog', () => {
beforeEach(() => {
fetch.mockClear();
});
it('should generate dialog successfully', async () => {
const mockPayload = {
output_base_name: "test_dialog",
dialog_items: [
{ type: "speech", speaker_id: "spk_1", text: "Hello.", exaggeration: 1.0, cfg_weight: 3.0, temperature: 0.5 },
{ type: "silence", duration_ms: 250 }
]
};
const mockResponse = {
log: "Dialog generated.",
concatenated_audio_url: "/audio/test_dialog_concatenated.wav",
zip_archive_url: "/audio/test_dialog.zip"
};
fetch.mockResolvedValueOnce({
ok: true,
json: async () => mockResponse,
});
const result = await generateDialog(mockPayload);
expect(fetch).toHaveBeenCalledTimes(1);
expect(fetch).toHaveBeenCalledWith(`${API_BASE_URL}/dialog/generate`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(mockPayload),
});
expect(result).toEqual(mockResponse);
});
it('should throw an error if dialog generation fails', async () => {
const mockPayload = { output_base_name: "fail_dialog", dialog_items: [] }; // Example invalid payload
fetch.mockResolvedValueOnce({
ok: false,
statusText: 'Bad Request',
json: async () => ({ detail: 'Invalid dialog data' }),
});
await expect(generateDialog(mockPayload)).rejects.toThrow('Failed to generate dialog: Invalid dialog data');
expect(fetch).toHaveBeenCalledTimes(1);
});
});