support tts

node_api/api/index.js

@@ -1,22 +1,88 @@
-require('dotenv').config()
+require("dotenv").config()
+
+const path = require("node:path")
+const fs = require("node:fs")
+const axios = require("axios")
+const { aws4Interceptor } = require("aws4-axios")
 
 const express = require("express")
-const path = require("path")
 const cors = require("cors")
-const mlib = require("../../node_lib")
+
+const getPhrases = require("../../node_lib")
 
 let app = null
 
 const { LISTENING_PORT } = process.env
 const PORT = LISTENING_PORT || 3000
 
-async function main() {
+const cachePath = path.join(process.cwd(), ".cache")
-    app = express()
+const audiosPath = path.join(cachePath, "audio")
 
-    app.use(cors())
+const PollyBaseURL = "https://polly.us-east-1.amazonaws.com"
-    app.use(express.json())
 
-    app.get("/api", async (req, res) => {
+const PollyDefaultConfig = {
+	Engine: "generative",
+	VoiceId: "Lucia",
+	OutputFormat: "mp3",
+	LanguageCode: "es-ES",
+}
+
+const interceptor = aws4Interceptor({
+	options: {
+		region: "us-east-1",
+		service: "polly",
+	},
+	credentials: {
+		accessKeyId: process.env.AWS_API_KEY,
+		secretAccessKey: process.env.AWS_API_SECRET,
+	},
+})
+
+axios.interceptors.request.use(interceptor)
+
+async function synthesizePollyVoice(phrase, phraseId) {
+	if (!fs.existsSync(audiosPath)) {
+		fs.mkdirSync(audiosPath, { recursive: true })
+	}
+
+	// call to api and stream result to a file
+	const voiceResultPath = path.resolve(audiosPath, phraseId + ".mp3")
+
+	if (fs.existsSync(voiceResultPath)) {
+		fs.unlinkSync(voiceResultPath)
+	}
+
+	const voiceResultFile = fs.createWriteStream(voiceResultPath)
+
+	const { data: stream } = await axios({
+		url: `${PollyBaseURL}/v1/speech`,
+		method: "POST",
+		data: {
+			...PollyDefaultConfig,
+			Text: phrase,
+		},
+		responseType: "stream",
+	})
+
+	stream.pipe(voiceResultFile)
+
+	return new Promise((resolve, reject) => {
+		stream.on("end", () => resolve(voiceResultPath))
+		stream.on("error", (error) => reject(error))
+	})
+}
+
+async function fetchTTSAudioURL(req, phrase, phraseId) {
+	const filePath = path.join(audiosPath, `${phraseId}.mp3`)
+
+	if (!fs.existsSync(filePath)) {
+		await synthesizePollyVoice(phrase, phraseId)
+	}
+
+	return `${req.protocol}://${req.get("host")}${req.path}/audio/${phraseId}.mp3`
+}
+
+async function handleApiRequest(req, res) {
 	let { random } = req.query
 
 	// try to parse random, can be a number or a boolean
@@ -28,17 +94,38 @@ async function main() {
 		}
 	}
 
-        const phrases = await mlib({ random })
+	const result = await getPhrases({ random })
 
-        res.json(phrases)
+	if (random) {
+		const phraseId = result
+			.trim()
+			.toLowerCase()
+			.replace(/\s+/g, "_")
+			.replace(/[^\w\s]/gi, "")
+
+		return res.json({
+			id: phraseId,
+			phrase: result.trim(),
+			tts_file: await fetchTTSAudioURL(req, result, phraseId),
 		})
+	}
 
-    app.use(express.static(path.join(__dirname, "..", "web", "dist",)))
+	return res.json(result)
+}
 
-    // serve static react build
+async function main() {
-    app.get("*", (req, res) => {
+	app = express()
-        res.sendFile(path.join(__dirname, "..", "web", "dist", "index.html"))
+
-    })
+	app.use(cors())
+	app.use(express.json())
+
+	app.get("/api", handleApiRequest)
+	app.use("/api/audio", express.static(audiosPath))
+
+	app.use(express.static(path.join(__dirname, "..", "web", "dist")))
+	// app.get("*", (req, res) => {
+	// 	res.sendFile(path.join(__dirname, "..", "web", "dist", "index.html"))
+	// })
 
 	app.listen(PORT)
 

node_api/api/package.json

@@ -4,6 +4,8 @@
   "main": "index.js",
   "license": "MIT",
   "dependencies": {
+    "aws4-axios": "^3.3.15",
+    "axios": "^1.7.9",
     "cors": "^2.8.5",
     "dotenv": "^16.4.1",
     "express": "^4.18.2"

node_api/web/src/index.css

@@ -68,6 +68,19 @@ button:focus-visible {
 	height: 100vh;
 }
 
+.result {
+	display: flex;
+	flex-direction: column;
+
+	align-items: center;
+	justify-content: center;
+
+	.playback_audio {
+		font-size: 24px;
+		cursor: pointer;
+	}
+}
+
 footer {
 	position: fixed;
 

node_api/web/src/main.jsx

@@ -5,15 +5,15 @@ import axios from "axios"
 
 import "./index.css"
 
-const API_ENDPOINT = import.meta.env.PROD ? "/api" : `http://${window.location.hostname}:3000/api`
+const API_ENDPOINT = import.meta.env.PROD
+	? "/api"
+	: `http://${window.location.hostname}:3000/api`
 
 const App = () => {
 	const [loading, setLoading] = React.useState(true)
 	const [randomWord, setRandomWord] = React.useState(null)
 
-  async function loadRandom({
+	async function loadRandom({ random = true } = {}) {
-    random = true,
-  } = {}) {
 		setLoading(true)
 
 		let { data } = await axios({
@@ -29,24 +29,52 @@ const App = () => {
 		setRandomWord(data)
 	}
 
+	async function playbackCurrentWord() {
+		if (!randomWord || !randomWord.tts_file) return
+
+		const audio = new Audio()
+
+		audio.src = randomWord.tts_file
+		audio.volume = 0.5
+
+		audio.play()
+	}
+
 	React.useEffect(() => {
 		loadRandom()
 	}, [])
 
-  return <div className="app">
+	return (
-    {
+		<div className="app">
-      loading ? <p>Loading...</p> : <h1>{randomWord}</h1>
+			<div className="result">
-    }
+				{loading ? <p>Loading...</p> : <h1>{randomWord.phrase}</h1>}
+
+				<div className="playback_audio" onClick={playbackCurrentWord}>
+					<svg
+						stroke="currentColor"
+						fill="none"
+						strokeWidth="2"
+						viewBox="0 0 24 24"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+						height="1em"
+						width="1em"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
+						<path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"></path>
+					</svg>
+				</div>
+			</div>
 
 			<footer>
-      <a href="https://git.ragestudio.net/srgooglo/monstercanker">GitHub</a>
+				<a href="https://git.ragestudio.net/srgooglo/monstercanker">
+					GitHub
+				</a>
 				<a href={API_ENDPOINT}>API</a>
 			</footer>
 		</div>
+	)
 }
 
-ReactDOM.createRoot(document.getElementById("root")).render(
+ReactDOM.createRoot(document.getElementById("root")).render(<App />)
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-)