File size: 3,443 Bytes
97383cf
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!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>