File size: 3,432 Bytes
56909dd
 
 
 
 
 
 
 
 
 
 
 
58cd8c2
56909dd
58cd8c2
795056a
 
 
56909dd
 
 
 
 
0c7c88d
56909dd
 
 
 
599ec4b
 
 
 
56909dd
 
 
 
 
 
b647760
 
 
795056a
 
 
b647760
 
 
 
 
 
 
 
795056a
b647760
 
599ec4b
 
b647760
 
402de54
 
 
 
b647760
 
599ec4b
 
 
 
 
b647760
 
599ec4b
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
795056a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
b647760
 
 
56909dd
 
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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Audio Conversion</title>
    <!-- Include jQuery for simplicity -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<h2>Upload Audio for Conversion</h2>

<form id="uploadForm"  enctype="multipart/form-data">
    <label for="spk_id">Speaker:</label>
    <select id="weightsDropdown" name="spk_id">
    <!-- Options will be added here dynamically -->
</select>

    <br><br>

    <label for="file">Audio File:</label>
    <input type="file" id="file" name="file" required>
    <br><br>
	 <input type="hidden" name="voice_transform" value="0">

    <input type="submit" value="Convert Voice">
</form>

<!-- Status Display -->
<h3>Processing Status:</h3>
<div id="statusDisplay">Waiting for submission...</div>

<!-- Processed Audio Playback -->
<h3>Processed Audio:</h3>
<audio id="processedAudio" controls>
    <source src="" type="audio/wav">
    Your browser does not support the audio element.
</audio>

<script>
$(document).ready(function() {
    // Load weights into the dropdown
    loadWeights();

    $('#uploadForm').submit(function(e) {
        e.preventDefault();
        var formData = new FormData(this);

        $.ajax({
            url: '/convert_voice',
            type: 'POST',
            data: formData,
            timeout: 180000, // 3 minutes
            success: function(data) {
                if (data.audio_id) {
                    // Start polling for status
                    updateTaskStatus(data.audio_id);
                    $('#processedAudio source').attr('src', '/get_processed_audio/' + data.audio_id);
                    $('#processedAudio')[0].load();
                } else if (data.error) {
                    alert(data.error);
                }
            },
            cache: false,
            contentType: false,
            processData: false,
            error: function(xhr) {
                // Handle errors
                alert("Error: " + xhr.responseText);
            }
        });
    });

    function updateTaskStatus(audioId) {
        $.ajax({
            url: `/status/${audioId}`,
            type: 'GET',
            success: function(data) {
                $('#statusDisplay').text(`${data.status} - ${data.percentage}% complete`);
                if (data.status !== "Completed" && data.status !== "Failed") {
                    setTimeout(() => updateTaskStatus(audioId), 1000); // Poll every second
                } else {
                    if (data.status === "Completed") {
                        $('#processedAudio')[0].play();
                    }
                }
            },
            error: function(xhr) {
                $('#statusDisplay').text("Failed to get status.");
            }
        });
    }

    // Function to load weights into the dropdown
    function loadWeights() {
        $.ajax({
            url: '/list-weights',
            type: 'GET',
            success: function(files) {
                const dropdown = $('#weightsDropdown');
                files.forEach(function(file) {
                    dropdown.append($('<option></option>').attr('value', file).text(file));
                });
            },
            error: function(xhr) {
                alert("Error loading weights: " + xhr.responseText);
            }
        });
    }
});
</script>

</body>
</html>