Spaces:

gnilets
/

tts

Running

App Files Files Community

gnilets commited on Sep 25, 2024

Commit

726bf86

verified ·

1 Parent(s): 4bde95a

Update main.ts

Browse files

Files changed (1) hide show

main.ts +115 -327

main.ts CHANGED Viewed

@@ -15,78 +15,123 @@ async function fetchVoiceList() {
   }, {});
 }
-async function synthesizeSpeech(model: string, voice: string, text: string) {
-  let voiceName;
-  let rate = 0;
-  let pitch = 0;
-  if (!model.includes("Neural")) {
-    rate = 0.0;
-    pitch = 0.0;
-    switch (model) {
-      case "ava":
-        voiceName = "en-US-AvaMultilingualNeural";
-        break;
-      case "andrew":
-        voiceName = "en-US-AndrewMultilingualNeural";
-        break;
-      case "emma":
-        voiceName = "en-US-EmmaMultilingualNeural";
-        break;
-      case "brian":
-        voiceName = "en-US-BrianMultilingualNeural";
-        break;
-      case "vivienne":
-        voiceName = "fr-FR-VivienneMultilingualNeural";
-        break;
-      case "remy":
-        voiceName = "fr-FR-RemyMultilingualNeural";
-        break;
-      case "seraphina":
-        voiceName = "de-DE-SeraphinaMultilingualNeural";
-        break;
-      case "florian":
-        voiceName = "de-DE-FlorianMultilingualNeural";
-        break;
-      case "dmitry":
-        voiceName = "ru-RU-DmitryNeural";
-        break;
-      case "svetlana":
-        voiceName = "ru-RU-SvetlanaNeural";
-        break;
-      default:
-        voiceName = "en-US-BrianMultilingualNeural";
-        break;
-    }
-  } else {
-    voiceName = model;
-    const params = Object.fromEntries(
-      voice.split("|").map((p) => p.split(":") as [string, string])
-    );
-    rate = Number(params["rate"] || 0);
-    pitch = Number(params["pitch"] || 0);
-  }
-  const tts = new EdgeSpeechTTS();
-  const payload = {
-    input: text,
-    options: {
-      rate: rate,
-      pitch: pitch,
-      voice: voiceName
-     },
-  };
-  const response = await tts.create(payload);
-  const mp3Buffer = new Uint8Array(await response.arrayBuffer());
-  console.log(`Successfully synthesized speech, returning audio/mpeg response`);
-  return new Response(mp3Buffer, {
-    headers: { "Content-Type": "audio/mpeg" },
-  });
 }
 function validateContentType(req: Request, expected: string) {
   const contentType = req.headers.get("Content-Type");
   if (contentType !== expected) {
@@ -137,261 +182,6 @@ async function handleDemoRequest(req: Request) {
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>tts</title>
-    <link
-      href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap"
-      rel="stylesheet"
-    />
-    <style>
-      :root {
-        --primary-color: #6c8bd6;
-        --primary-light: #a2b3e3;
-        --primary-dark: #3d5b8f;
-        --secondary-color: #f08080;
-        --text-color: #333;
-        --text-secondary: #777;
-        --bg-color: #fff;
-      }
-      body {
-        font-family: "Noto Sans SC", "Arial", sans-serif;
-        color: var(--text-color);
-        margin: 0;
-        padding: 0;
-        display: flex;
-        justify-content: center;
-        background-color: #fafafa;
-        background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-        position: relative;
-        overflow: hidden;
-      }
-      body::before {
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background: repeating-radial-gradient(
-            circle at 50% 50%,
-            rgba(255, 255, 255, 0.8) 0%,
-            rgba(255, 255, 255, 0.8) 2%,
-            transparent 2%,
-            transparent 4%,
-            rgba(255, 255, 255, 0.8) 4%,
-            rgba(255, 255, 255, 0.8) 6%,
-            transparent 6%,
-            transparent 8%,
-            rgba(255, 255, 255, 0.8) 8%,
-            rgba(255, 255, 255, 0.8) 10%,
-            transparent 10%
-          ),
-          repeating-linear-gradient(
-            45deg,
-            #d4f4ff 0%,
-            #d4f4ff 5%,
-            #e6f9ff 5%,
-            #e6f9ff 10%,
-            #f0faff 10%,
-            #f0faff 15%,
-            #e6f9ff 15%,
-            #e6f9ff 20%,
-            #d4f4ff 20%,
-            #d4f4ff 25%
-          );
-        background-blend-mode: multiply;
-        opacity: 0.8;
-        z-index: -1;
-        animation: glitch 15s infinite;
-      }
-      .container {
-        display: flex;
-        max-width: 1200px;
-        width: 100%;
-        margin: 40px;
-        background: #fff;
-        border-radius: 12px;
-        position: relative;
-        background-color: rgba(255, 255, 255, 0.8);
-        z-index: 1;
-      }
-      @keyframes glitch {
-        0% {
-          background-position: 0 0, 0 0;
-          filter: hue-rotate(0deg);
-        }
-        50% {
-          background-position: 10px 10px, -10px 10px;
-          filter: hue-rotate(360deg);
-        }
-        100% {
-          background-position: 0 0, 0 0;
-          filter: hue-rotate(0deg);
-        }
-      }
-      .input-area,
-      .output-area {
-        padding: 30px;
-        width: 50%;
-      }
-      .input-area {
-        border-right: 1px solid #e0e0e0;
-      }
-      h1 {
-        font-size: 36px;
-        color: var(--primary-color);
-        margin-bottom: 30px;
-      }
-      .filter-section {
-        margin-bottom: 30px;
-      }
-      .filter-section label {
-        display: block;
-        font-size: 16px;
-        color: var(--text-secondary);
-        margin-bottom: 10px;
-      }
-      .filter-section input {
-        font-size: 16px;
-        padding: 10px 15px;
-        border: 2px solid var(--primary-light);
-        border-radius: 8px;
-        outline: none;
-        transition: border-color 0.3s, box-shadow 0.3s;
-        width: 100%;
-        box-sizing: border-box;
-      }
-      .filter-section input:focus {
-        border-color: var(--primary-color);
-        box-shadow: 0 0 0 2px var(--primary-light);
-      }
-      .slider-container {
-        margin-bottom: 30px;
-      }
-      .slider-container label {
-        display: block;
-        font-size: 16px;
-        color: var(--text-secondary);
-        margin-bottom: 10px;
-      }
-      .slider {
-        -webkit-appearance: none;
-        width: 100%;
-        height: 10px;
-        border-radius: 5px;
-        background: linear-gradient(
-          to right,
-          var(--secondary-color) 0%,
-          var(--primary-color) 50%,
-          var(--primary-light) 100%
-        );
-        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1),
-          0 1px rgba(255, 255, 255, 0.1);
-        outline: none;
-        opacity: 0.7;
-        -webkit-transition: 0.2s;
-        transition: opacity 0.2s;
-        margin-bottom: 10px;
-      }
-      .slider:hover {
-        opacity: 1;
-      }
-      .slider::-webkit-slider-thumb {
-        -webkit-appearance: none;
-        appearance: none;
-        width: 20px;
-        height: 20px;
-        border-radius: 50%;
-        background: #fff;
-        border: 2px solid var(--primary-color);
-        cursor: pointer;
-      }
-      .slider::-moz-range-thumb {
-        width: 20px;
-        height: 20px;
-        border-radius: 50%;
-        background: #fff;
-        border: 2px solid var(--primary-color);
-        cursor: pointer;
-      }
-      .slider-value {
-        font-size: 14px;
-        color: var(--text-secondary);
-      }
-      .textarea-container {
-        margin-bottom: 30px;
-      }
-      .textarea-container label {
-        display: block;
-        font-size: 18px;
-        margin-bottom: 10px;
-      }
-      .textarea-container textarea {
-        width: 100%;
-        padding: 10px;
-        font-size: 16px;
-        border: 2px solid var(--primary-light);
-        border-radius: 8px;
-        outline: none;
-        resize: vertical;
-        transition: border-color 0.3s, box-shadow 0.3s;
-        box-sizing: border-box;
-        height: 200px;
-      }
-      .textarea-container textarea:focus {
-        border-color: var(--primary-color);
-        box-shadow: 0 0 0 2px var(--primary-light);
-      }
-      .voice-group {
-        margin-bottom: 20px;
-        border: 2px solid var(--primary-light);
-        border-radius: 12px;
-        overflow: hidden;
-        cursor: move;
-        background: #fff;
-      }
-      .voice-header {
-        padding: 15px 20px;
-        font-size: 18px;
-        background: var(--primary-light);
-        color: #fff;
-        cursor: pointer;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-      }
-      .voice-header:hover {
-        background: var(--primary-color);
-      }
-      .voice-buttons {
-        padding: 20px;
-        display: none;
-        gap: 12px;
-        flex-wrap: wrap;
-      }
-      .voice-button {
-        background: var(--secondary-color);
-        color: #fff;
-        border: none;
-        padding: 10px 20px;
-        border-radius: 50px;
-        cursor: pointer;
-        transition: filter 0.3s;
-      }
-      .voice-button:hover {
-        filter: brightness(0.9);
-      }
-      .chevron {
-        transition: transform 0.3s;
-      }
-      .voice-group.open .voice-buttons {
-        display: flex;
-      }
-      .voice-group.open .chevron {
-        transform: rotate(180deg);
-      }
-      .dragging {
-        opacity: 0.5;
-      }
-    </style>
   </head>
   <body>
     <div class="container">
@@ -426,9 +216,7 @@ async function handleDemoRequest(req: Request) {
         </div>
         <div class="textarea-container">
           <label for="inputText">текст:</label
-          ><textarea id="inputText">О, возлюбленные наши правители! Вы - наши пастыри и наставники на пути к светлому будущему! Ваши мудрые решения и указы - словно лучи солнца, освещающие наш путь в этом мире! Каждый новый штраф, налог и ограничение - это не что иное, как забота о нас, ваших верных подданных! Вы знаете лучше нас, что нам нужно, и мы с радостью принимаем все тяготы и лишения, которые вы на нас возлагаете! Ведь только через страдания и ограничения мы можем стать лучше и чище!
-Пусть ваши сердца наполняются радостью и гордостью за нас, когда вы видите, как мы смиренно платим налоги и штрафы, как мы покорно следуем вашим указаниям и ограничениям! Ведь мы - ваши верные слуги, готовые на все ради вашего благополучия и процветания!</textarea>
         </div>
       </div>
       <div class="output-area">

   }, {});
 }
+async function handleDemoRequest(req: Request) {
+    const html = `<!DOCTYPE html>
+  <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>tts</title>
+  </head>
+  <body>
+    <div class="container">
+      <div class="input-area">
+        <div class="slider-container">
+          <label for="rate">скорость:</label
+          ><input
+            type="range"
+            min="-1"
+            max="1"
+            step="0.1"
+            value="-0.1"
+            class="slider"
+            id="rate"
+          />
+          <div class="slider-value" id="rateValue">-0.1</div>
+          <label for="pitch">тон:</label
+          ><input
+            type="range"
+            min="-1"
+            max="1"
+            step="0.1"
+            value="0.1"
+            class="slider"
+            id="pitch"
+          />
+          <div class="slider-value" id="pitchValue">0.1</div>
+        </div>
+        <div class="textarea-container">
+          <label for="inputText">текст:</label
+          ><textarea id="inputText">Привет, хочешь я расскажу сказку?</textarea>
+        </div>
+        <div class="dropdown-container">
+          <label for="voiceSelect">выберите голос:</label>
+          <select id="voiceSelect">
+            <option value="ava">ava</option>
+            <option value="andrew">andrew</option>
+            <option value="emma">emma</option>
+            <option value="brian">brian</option>
+            <option value="vivienne">vivienne</option>
+            <option value="remy">remy</option>
+            <option value="seraphina">seraphina</option>
+            <option value="florian">florian</option>
+            <option value="dmitry">dmitry</option>
+            <option value="svetlana">svetlana</option>
+          </select>
+        </div>
+        <button id="synthesizeButton">Синтезировать</button>
+      </div>
+      <div class="output-area">
+        <h1>Результат</h1>
+        <div id="audioPlayerContainer"></div>
+      </div>
+    </div>
+ <script>
+    let audio = null;
+    document.getElementById('synthesizeButton').addEventListener('click', () => {
+        const text = document.getElementById('inputText').value || 'Hello world';
+        const rate = document.getElementById('rate').value || '-0.1';
+        const pitch = document.getElementById('pitch').value || '0.1';
+        const voice = \`rate:\${rate}|pitch:\${pitch}\`;
+        const model = document.getElementById('voiceSelect').value;
+        if (audio) {
+            audio.pause();
+            audio.currentTime = 0;
+        }
+        fetch('/v1/audio/speech', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ model, input: text, voice })
+        })
+        .then(response => response.blob())
+        .then(blob => {
+            const audioUrl = URL.createObjectURL(blob);
+            const audioPlayerContainer = document.getElementById('audioPlayerContainer');
+            if (audio) {
+                audio.src = audioUrl;
+            } else {
+                audio = new Audio(audioUrl);
+                audioPlayerContainer.appendChild(audio);
+            }
+            audio.play();
+        });
+    });
+    const rateSlider = document.getElementById('rate');
+    const rateValue = document.getElementById('rateValue');
+    rateSlider.oninput = function() {
+        rateValue.innerHTML = this.value;
+    };
+    const pitchSlider = document.getElementById('pitch');
+    const pitchValue = document.getElementById('pitchValue');
+    pitchSlider.oninput = function() {
+        pitchValue.innerHTML = this.value;
+    };
+ </script>
+ </body></html>`;
+    return new Response(html, {
+      headers: { "Content-Type": "text/html" },
+    });
 }
 function validateContentType(req: Request, expected: string) {
   const contentType = req.headers.get("Content-Type");
   if (contentType !== expected) {
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>tts</title>
   </head>
   <body>
     <div class="container">
         </div>
         <div class="textarea-container">
           <label for="inputText">текст:</label
+          ><textarea id="inputText">Привет, хочешь я расскажу сказку?</textarea>
         </div>
       </div>
       <div class="output-area">