voiceclone.html 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. <!DOCTYPE html>
  2. <html lang="zh" xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4. <th:block th:include="include :: header('ViiTorTTS音色注册')" />
  5. </head>
  6. <body class="gray-bg">
  7. <div class="container-div">
  8. <div class="row">
  9. <div class="col-sm-12 search-collapse">
  10. <pre><strong>ViiTorTTS 音色注册注意事项:</strong>
  11. 1. 本页面复用“ViiTorTTS配置”中的 AppId 和 SecretKey。
  12. 2. 请输入可公网访问的音频 URL,ViiTorTTS 会直接下载该文件做音色注册。
  13. 3. 建议音频为单人干净录音,语种、文本可不填;如已知内容,建议一并填写以提高注册准确性。
  14. 4. 注册成功后会自动把返回的 `voiceName` 写入音色管理,`voice_source=vt_tts`、`tts_models=clone`,可直接用于外呼任务。
  15. </pre>
  16. </div>
  17. <div class="col-sm-12 search-collapse">
  18. <form id="registerForm">
  19. <div class="select-list">
  20. <ul>
  21. <li>
  22. <label>音色名称:</label>
  23. <input type="text" id="voice_name" name="voice_name" placeholder="可留空,留空则由平台生成" />
  24. </li>
  25. <li>
  26. <label>语种:</label>
  27. <select id="language" name="language">
  28. <option value="zh-CN">中文</option>
  29. <option value="yue-HK">粤语</option>
  30. <option value="en-US">英文</option>
  31. <option value="ja-JP">日语</option>
  32. <option value="ko-KR">韩语</option>
  33. </select>
  34. </li>
  35. <li>
  36. <label>性别:</label>
  37. <select id="gender" name="gender">
  38. <option value="">自动/默认</option>
  39. <option value="0">女声</option>
  40. <option value="1">男声</option>
  41. </select>
  42. </li>
  43. <li style="width: 100%">
  44. <label>音频 URL:</label>
  45. <input type="text" id="audio_url" name="audio_url" style="width: 720px" placeholder="例如:https://example.com/demo.wav" />
  46. </li>
  47. <li style="width: 100%">
  48. <label>音频文本:</label>
  49. <textarea id="text" name="text" cols="80" rows="4" placeholder="可留空;若已知录音准确文本,建议填写"></textarea>
  50. </li>
  51. <li>
  52. <a class="btn btn-info btn-xs" href="javascript:void(0)" onclick="$.operate.registerVoice()">
  53. <i class="fa fa-microphone"></i> &nbsp;提交音色注册
  54. </a>
  55. </li>
  56. </ul>
  57. </div>
  58. </form>
  59. </div>
  60. <div class="col-sm-12 search-collapse">
  61. <form id="resultForm">
  62. <div class="select-list">
  63. <ul>
  64. <li>
  65. <label>返回音色名:</label>
  66. <input type="text" id="savedVoiceCode" readonly="readonly" />
  67. </li>
  68. <li>
  69. <label>展示名称:</label>
  70. <input type="text" id="savedVoiceName" readonly="readonly" />
  71. </li>
  72. <li>
  73. <label>语种:</label>
  74. <input type="text" id="savedLanguageName" readonly="readonly" />
  75. </li>
  76. <li>
  77. <label>实际训练音频:</label>
  78. <input type="text" id="audioToTrain" readonly="readonly" style="width: 520px" />
  79. </li>
  80. <li style="width: 100%">
  81. <label>实际训练文本:</label>
  82. <textarea id="textToTrain" cols="80" rows="4" readonly="readonly"></textarea>
  83. </li>
  84. </ul>
  85. </div>
  86. </form>
  87. </div>
  88. </div>
  89. </div>
  90. <th:block th:include="include :: footer" />
  91. <script th:inline="javascript">
  92. var prefix = ctx + "aicall/vtvoiceclone";
  93. $.operate.registerVoice = function() {
  94. var audioUrl = $("#audio_url").val().trim();
  95. if (audioUrl === "") {
  96. $.modal.msgError("请先填写音频 URL");
  97. $("#audio_url")[0].focus();
  98. return;
  99. }
  100. if (audioUrl.indexOf("http://") !== 0 && audioUrl.indexOf("https://") !== 0) {
  101. $.modal.msgError("音频 URL 必须以 http:// 或 https:// 开头");
  102. $("#audio_url")[0].focus();
  103. return;
  104. }
  105. var formData = new FormData();
  106. formData.append("audio_url", audioUrl);
  107. formData.append("voice_name", $("#voice_name").val().trim());
  108. formData.append("language", $("#language").val());
  109. formData.append("text", $("#text").val().trim());
  110. formData.append("gender", $("#gender").val());
  111. $.modal.msg("正在提交 ViiTorTTS 音色注册,请稍后...");
  112. $.ajax({
  113. url: prefix + "/registerVoice",
  114. type: "POST",
  115. data: formData,
  116. processData: false,
  117. contentType: false,
  118. success: function(respJson) {
  119. if (respJson.code !== 0) {
  120. $.modal.msgError(respJson.msg || "ViiTorTTS 音色注册失败");
  121. return;
  122. }
  123. var data = respJson.data || {};
  124. $("#savedVoiceCode").val(data.voiceCode || "");
  125. $("#savedVoiceName").val(data.voiceName || "");
  126. $("#savedLanguageName").val(data.languageName || "");
  127. $("#audioToTrain").val(data.audioToTrain || "");
  128. $("#textToTrain").val(data.textToTrain || "");
  129. $.modal.msgSuccess(respJson.msg || "ViiTorTTS 音色注册成功");
  130. },
  131. error: function() {
  132. $.modal.msgError("ViiTorTTS 音色注册失败");
  133. }
  134. });
  135. };
  136. </script>
  137. </body>
  138. </html>