piper-mod / templates /index.html
broadfield-dev's picture
Create templates/index.html
97383cf verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Piper TTS Phoneme Emotion Adjuster</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
<div class="container mt-5">
<h1 class="text-center mb-4">Piper TTS Phoneme Emotion Adjuster</h1>
<div class="card">
<div class="card-body">
<h5 class="card-title">Input Piper TTS Model JSON</h5>
<textarea id="modelJson" class="form-control mb-3" rows="10" placeholder="Paste your Piper TTS model JSON here"></textarea>
<button id="processBtn" class="btn btn-primary w-100">Generate Emotion Variants</button>
</div>
</div>
<div id="results" class="mt-4"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.getElementById('processBtn').addEventListener('click', async () => {
const modelJson = document.getElementById('modelJson').value;
const resultsDiv = document.getElementById('results');
resultsDiv.innerHTML = '<p>Loading...</p>';
try {
const response = await fetch('/process_json', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ model_json: modelJson })
});
const data = await response.json();
if (data.status === 'success') {
resultsDiv.innerHTML = '';
for (const [emotion, jsonString] of Object.entries(data.results)) {
const card = document.createElement('div');
card.className = 'card mt-3';
card.innerHTML = `
<div class="card-body">
<h5 class="card-title">${emotion.charAt(0).toUpperCase() + emotion.slice(1)} Model</h5>
<pre class="json-output">${jsonString}</pre>
<button class="btn btn-secondary copy-btn" data-json="${jsonString.replace(/"/g, '&quot;')}">Copy JSON</button>
</div>
`;
resultsDiv.appendChild(card);
}
document.querySelectorAll('.copy-btn').forEach(btn => {
btn.addEventListener('click', () => {
const json = btn.getAttribute('data-json');
navigator.clipboard.writeText(json).then(() => {
btn.textContent = 'Copied!';
setTimeout(() => btn.textContent = 'Copy JSON', 2000);
});
});
});
} else {
resultsDiv.innerHTML = `<div class="alert alert-danger">${data.message}</div>`;
}
} catch (error) {
resultsDiv.innerHTML = `<div class="alert alert-danger">Error: ${error.message}</div>`;
}
});
</script>
</body>
</html>