From 180a2054d451d3aaabb6508b898708bc49d6f897 Mon Sep 17 00:00:00 2001 From: gitlimes Date: Tue, 2 Jan 2024 12:03:53 +0100 Subject: [PATCH] chore: gut out the tiktok-tts page (it's broken) --- pages/tiktok-tts.js | 189 +------------------------------------------- 1 file changed, 4 insertions(+), 185 deletions(-) diff --git a/pages/tiktok-tts.js b/pages/tiktok-tts.js index 50b2021..b7adf24 100644 --- a/pages/tiktok-tts.js +++ b/pages/tiktok-tts.js @@ -1,10 +1,7 @@ import Head from "next/head"; -import { useState } from "react"; import CreatableSelect from "react-select/creatable"; -const fallbackVoices = require("../public/assets/json/tiktokVoices.json"); - import GoHome from "../components/GoHome"; import Guide from "../components/Guide"; import OpenGraph from "../components/openGraph"; @@ -12,112 +9,7 @@ import Footer from "../components/Footer"; import styles from "../styles/stuffitempage.module.css"; -import { saveAs } from "file-saver"; -import absoluteUrl from "next-absolute-url"; - -export async function getServerSideProps() { - async function getVoices() { - // we fetch the voice options from oscie's repo (thanks oscie), and we parse them to json - const rawVoicesFetch = await fetch( - "https://raw.githubusercontent.com/oscie57/tiktok-voice/main/codes.md" - ); - // if fetch fails, use fallback - if (!rawVoicesFetch.ok) { - console.log( - "[warn](tiktok-tts) voice fetch failed, using fallbackVoices" - ); - return fallbackVoices; - } - - let rawVoices = await rawVoicesFetch.text(); - - // make each line its own string - rawVoices = rawVoices.split("\n"); - - // find the table header - const headerRegex = /\| *Language *\| *Voice Code *\|/; - const headerIndex = - rawVoices.findIndex((line) => line.match(headerRegex)) + 2; - - // get everything from the header down - rawVoices = rawVoices.splice(headerIndex); - - // remove empty lines - const emptyLineRegex = /\| *\| *\|/; - rawVoices = rawVoices.filter( - (line) => !line.match(emptyLineRegex) && line !== "" - ); - - /* split each line into the columns, and clean it up. - then, assign it to a { label, value } object in the voicelist array - */ - let voiceList = rawVoices.map((line) => { - const columns = line.split("|"); - const value = columns[2]?.trim().replace(/`/g, ""); - const label = `${columns[1]?.trim()} [${value}]`; - - return { - label, - value, - }; - }); - - // create the different voice categories - const englishVoices = voiceList.filter( - (voice) => - voice.label?.includes("English") || voice.label?.includes("Narrator") - ); - const disneyVoices = voiceList.filter((voice) => - voice.label?.includes("Disney") - ); - const singingVoices = voiceList.filter((voice) => - voice.label?.includes("singing") - ); - const otherVoices = voiceList.filter( - (voice) => - !voice.label?.includes("English") && - !voice.label?.includes("Disney") && - !voice.label?.includes("Narrator") && - !voice.label?.includes("singing") - ); - - // create the final voiceList object - voiceList = [ - { label: "English", options: englishVoices }, - { label: "Singing", options: singingVoices }, - { - label: "Disney", - options: disneyVoices, - }, - { label: "Other", options: otherVoices }, - ]; - - // check the validity of the voiceList. if invalid, use fallback - if (voiceList[0].options) { - return voiceList; - } else { - console.log( - "[warn](tiktok-tts) using fallback voices", - "voicelist", - voiceList - ); - return fallbackVoices; - } - } - - const voices = await getVoices(); - - return { - props: { - voices, - }, - }; -} - -export default function TikTokTTS({ voices, darkMode }) { - const [notice, setNotice] = useState(""); - const [selectedVoice, setSelectedVoice] = useState(null); - const [text, setText] = useState(); +export default function TikTokTTS({ darkMode }) { const customDropdownStyles = { light: { @@ -204,48 +96,6 @@ export default function TikTokTTS({ voices, darkMode }) { }, }; - async function getAudio() { - const ttsurl = `https://api16-normal-useast5.us.tiktokv.com/media/api/text/speech/invoke/?text_speaker=${selectedVoice.value}&req_text=${text}&speaker_map_type=0`; - const fetched = await fetch( - `https://api.allorigins.win/get?url=${encodeURIComponent(ttsurl)}`, - { - method: "POST", - } - ); - if (!fetched.ok) { - console.log(fetched); - } - - const jsondata = await fetched.json(); - const usableData = JSON.parse(jsondata.contents); - - // adapted from https://stackoverflow.com/a/27980815 - function b64toBlob(dataURI) { - const byteString = atob(dataURI); - const ab = new ArrayBuffer(byteString.length); - const ia = new Uint8Array(ab); - - for (let i = 0; i < byteString.length; i++) { - ia[i] = byteString.charCodeAt(i); - } - return new Blob([ab], { type: "audio/mp3" }); - } - - if (usableData?.message === "success") { - const v_str = usableData.data.v_str; - - const audioBlob = b64toBlob(v_str); - console.log(audioBlob); - - saveAs(audioBlob, `${selectedVoice.label}.mp3`); - - setNotice("success"); - } else { - setNotice(`Error: ${usableData.message}`); - console.log("[warn](tiktok-tts) failed to get audio", usableData); - } - } - return (
@@ -287,7 +137,7 @@ export default function TikTokTTS({ voices, darkMode }) { "No results"} placeholder="Select a voice" menuPlacement="top" @@ -297,52 +147,21 @@ export default function TikTokTTS({ voices, darkMode }) { styles={ darkMode ? customDropdownStyles.dark : customDropdownStyles.light } - onChange={setSelectedVoice} />