Spaces:
Runtime error
Runtime error
<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, '"')}">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> |