144 lines
5.9 KiB
HTML
144 lines
5.9 KiB
HTML
<\!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Reference Text Field Test</title>
|
|
<script>
|
|
window.APP_CONFIG = {
|
|
VITE_API_BASE_URL: 'http://localhost:8002',
|
|
VITE_API_BASE_URL_WITH_PREFIX: 'http://localhost:8002/api'
|
|
};
|
|
</script>
|
|
<link rel="stylesheet" href="css/style.css">
|
|
</head>
|
|
<body>
|
|
<h1>Reference Text Field Visibility Test</h1>
|
|
|
|
<\!-- Copy of the speaker form section for testing -->
|
|
<div class="card" style="max-width: 600px; margin: 20px;">
|
|
<h3>Add New Speaker</h3>
|
|
<form id="add-speaker-form">
|
|
<div class="form-row">
|
|
<label for="speaker-name">Speaker Name:</label>
|
|
<input type="text" id="speaker-name" name="name" value="Test Speaker" required>
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="tts-backend">TTS Backend:</label>
|
|
<select id="tts-backend" name="tts_backend" required>
|
|
<option value="chatterbox">Chatterbox TTS</option>
|
|
<option value="higgs">Higgs TTS</option>
|
|
</select>
|
|
<small class="help-text">Choose the TTS engine for this speaker</small>
|
|
</div>
|
|
<div class="form-row" id="reference-text-row" style="display: none;">
|
|
<label for="reference-text">Reference Text:</label>
|
|
<textarea
|
|
id="reference-text"
|
|
name="reference_text"
|
|
maxlength="500"
|
|
rows="3"
|
|
placeholder="Enter the text that corresponds to your audio sample (required for Higgs TTS)"
|
|
></textarea>
|
|
<small class="help-text">
|
|
<span id="char-count">0</span>/500 characters - This should match what is spoken in your audio sample
|
|
</small>
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="speaker-sample">Audio Sample (WAV or MP3):</label>
|
|
<input type="file" id="speaker-sample" name="audio_file" accept=".wav,.mp3" required>
|
|
<small class="help-text">Upload a clear audio sample of the speaker's voice</small>
|
|
</div>
|
|
<div class="form-row">
|
|
<div id="validation-errors" class="error-messages" style="display: none;"></div>
|
|
</div>
|
|
<button type="submit">Add Speaker</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div id="test-log" style="margin: 20px; padding: 20px; background: #f5f5f5; border-radius: 4px;">
|
|
<h4>Test Log:</h4>
|
|
<ul id="log-list"></ul>
|
|
</div>
|
|
|
|
<script>
|
|
function log(message) {
|
|
const logList = document.getElementById('log-list');
|
|
const li = document.createElement('li');
|
|
li.textContent = `${new Date().toLocaleTimeString()}: ${message}`;
|
|
logList.appendChild(li);
|
|
}
|
|
|
|
// Copy the relevant functions from app.js for testing
|
|
const ttsBackendSelect = document.getElementById('tts-backend');
|
|
const referenceTextRow = document.getElementById('reference-text-row');
|
|
const referenceTextArea = document.getElementById('reference-text');
|
|
const charCountSpan = document.getElementById('char-count');
|
|
|
|
function toggleReferenceTextVisibility() {
|
|
const selectedBackend = ttsBackendSelect?.value;
|
|
log(`Backend changed to: ${selectedBackend}`);
|
|
|
|
if (referenceTextRow) {
|
|
if (selectedBackend === 'higgs') {
|
|
referenceTextRow.style.display = 'block';
|
|
referenceTextArea.required = true;
|
|
log('✅ Reference text field is now VISIBLE');
|
|
} else {
|
|
referenceTextRow.style.display = 'none';
|
|
referenceTextArea.required = false;
|
|
referenceTextArea.value = '';
|
|
updateCharCount();
|
|
log('✅ Reference text field is now HIDDEN');
|
|
}
|
|
}
|
|
}
|
|
|
|
function updateCharCount() {
|
|
if (referenceTextArea && charCountSpan) {
|
|
const length = referenceTextArea.value.length;
|
|
charCountSpan.textContent = length;
|
|
log(`Character count updated: ${length}/500`);
|
|
|
|
// Add visual feedback for character count
|
|
if (length > 500) {
|
|
charCountSpan.style.color = 'red';
|
|
} else if (length > 400) {
|
|
charCountSpan.style.color = 'orange';
|
|
} else {
|
|
charCountSpan.style.color = '';
|
|
}
|
|
}
|
|
}
|
|
|
|
function initializeBackendSelection() {
|
|
if (ttsBackendSelect) {
|
|
ttsBackendSelect.addEventListener('change', toggleReferenceTextVisibility);
|
|
log('✅ Event listener added for backend selection');
|
|
|
|
// Call initially to set correct visibility on page load
|
|
toggleReferenceTextVisibility();
|
|
log('✅ Initial visibility set based on default backend');
|
|
}
|
|
|
|
if (referenceTextArea) {
|
|
referenceTextArea.addEventListener('input', updateCharCount);
|
|
log('✅ Event listener added for character counting');
|
|
|
|
// Initialize character count
|
|
updateCharCount();
|
|
}
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
log('🚀 Page loaded, initializing...');
|
|
initializeBackendSelection();
|
|
log('🎉 Initialization complete\!');
|
|
|
|
// Test instructions
|
|
setTimeout(() => {
|
|
log('📝 TEST: Try changing the TTS Backend dropdown to "Higgs TTS" to see the reference text field appear');
|
|
}, 500);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
EOF < /dev/null |