<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('ViiTorTTS音色注册')" />
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <pre><strong>ViiTorTTS 音色注册注意事项：</strong>
1. 本页面复用“ViiTorTTS配置”中的 AppId 和 SecretKey。
2. 请输入可公网访问的音频 URL，ViiTorTTS 会直接下载该文件做音色注册。
3. 建议音频为单人干净录音，语种、文本可不填；如已知内容，建议一并填写以提高注册准确性。
4. 注册成功后会自动把返回的 `voiceName` 写入音色管理，`voice_source=vt_tts`、`tts_models=clone`，可直接用于外呼任务。
</pre>
        </div>

        <div class="col-sm-12 search-collapse">
            <form id="registerForm">
                <div class="select-list">
                    <ul>
                        <li>
                            <label>音色名称：</label>
                            <input type="text" id="voice_name" name="voice_name" placeholder="可留空，留空则由平台生成" />
                        </li>
                        <li>
                            <label>语种：</label>
                            <select id="language" name="language">
                                <option value="zh-CN">中文</option>
                                <option value="yue-HK">粤语</option>
                                <option value="en-US">英文</option>
                                <option value="ja-JP">日语</option>
                                <option value="ko-KR">韩语</option>
                            </select>
                        </li>
                        <li>
                            <label>性别：</label>
                            <select id="gender" name="gender">
                                <option value="">自动/默认</option>
                                <option value="0">女声</option>
                                <option value="1">男声</option>
                            </select>
                        </li>
                        <li style="width: 100%">
                            <label>音频 URL：</label>
                            <input type="text" id="audio_url" name="audio_url" style="width: 720px" placeholder="例如：https://example.com/demo.wav" />
                        </li>
                        <li style="width: 100%">
                            <label>音频文本：</label>
                            <textarea id="text" name="text" cols="80" rows="4" placeholder="可留空；若已知录音准确文本，建议填写"></textarea>
                        </li>
                        <li>
                            <a class="btn btn-info btn-xs" href="javascript:void(0)" onclick="$.operate.registerVoice()">
                                <i class="fa fa-microphone"></i> &nbsp;提交音色注册
                            </a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="col-sm-12 search-collapse">
            <form id="resultForm">
                <div class="select-list">
                    <ul>
                        <li>
                            <label>返回音色名：</label>
                            <input type="text" id="savedVoiceCode" readonly="readonly" />
                        </li>
                        <li>
                            <label>展示名称：</label>
                            <input type="text" id="savedVoiceName" readonly="readonly" />
                        </li>
                        <li>
                            <label>语种：</label>
                            <input type="text" id="savedLanguageName" readonly="readonly" />
                        </li>
                        <li>
                            <label>实际训练音频：</label>
                            <input type="text" id="audioToTrain" readonly="readonly" style="width: 520px" />
                        </li>
                        <li style="width: 100%">
                            <label>实际训练文本：</label>
                            <textarea id="textToTrain" cols="80" rows="4" readonly="readonly"></textarea>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
    </div>
</div>

<th:block th:include="include :: footer" />
<script th:inline="javascript">
    var prefix = ctx + "aicall/vtvoiceclone";

    $.operate.registerVoice = function() {
        var audioUrl = $("#audio_url").val().trim();
        if (audioUrl === "") {
            $.modal.msgError("请先填写音频 URL");
            $("#audio_url")[0].focus();
            return;
        }
        if (audioUrl.indexOf("http://") !== 0 && audioUrl.indexOf("https://") !== 0) {
            $.modal.msgError("音频 URL 必须以 http:// 或 https:// 开头");
            $("#audio_url")[0].focus();
            return;
        }

        var formData = new FormData();
        formData.append("audio_url", audioUrl);
        formData.append("voice_name", $("#voice_name").val().trim());
        formData.append("language", $("#language").val());
        formData.append("text", $("#text").val().trim());
        formData.append("gender", $("#gender").val());

        $.modal.msg("正在提交 ViiTorTTS 音色注册，请稍后...");
        $.ajax({
            url: prefix + "/registerVoice",
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,
            success: function(respJson) {
                if (respJson.code !== 0) {
                    $.modal.msgError(respJson.msg || "ViiTorTTS 音色注册失败");
                    return;
                }
                var data = respJson.data || {};
                $("#savedVoiceCode").val(data.voiceCode || "");
                $("#savedVoiceName").val(data.voiceName || "");
                $("#savedLanguageName").val(data.languageName || "");
                $("#audioToTrain").val(data.audioToTrain || "");
                $("#textToTrain").val(data.textToTrain || "");
                $.modal.msgSuccess(respJson.msg || "ViiTorTTS 音色注册成功");
            },
            error: function() {
                $.modal.msgError("ViiTorTTS 音色注册失败");
            }
        });
    };
</script>
</body>
</html>
