added console log

Reviewed-on: srgooglo/monstercanker#4

Dockerfile

@@ -18,4 +18,6 @@ RUN cd /home/node/app/node_api/api && npm install -D --force
 RUN cd /home/node/app/node_api/web && npm install -D --force
 RUN cd /home/node/app/node_api/web && npm run build
 
+# set to production
+ENV NODE_ENV=production
 CMD ["node", "/home/node/app/node_api/api/index.js"]

README.md

@@ -1,8 +1,8 @@
-# [monstercanker](https://monstercanker.mcommunity.fun/)
+# [monstercanker](https://msk.ragestudio.net/)
 
 Hechate un gapo la irgen
 
 
 
 ## API Usage
-```https://monstercanker.mcommunity.fun/api?random=<number|bool>```
+```https://msk.ragestudio.net/api?random=<number|bool>```

node_api/api/index.js

@@ -1,22 +1,90 @@
-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)
+
+	console.log(`Catching TTS file for id [${phraseId}]`)
+
+	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 `${process.env.NODE_ENV === "production" ? "https" : 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 +96,58 @@ 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),
+		})
+	}
+
+	return res.json(result)
+}
+
+const useLogger = (req, res, next) => {
+	const startHrTime = process.hrtime()
+
+	res.on("finish", () => {
+		let url = req.url
+		const elapsedHrTime = process.hrtime(startHrTime)
+		const elapsedTimeInMs = elapsedHrTime[0] * 1000 + elapsedHrTime[1] / 1e6
+
+		res._responseTimeMs = elapsedTimeInMs
+
+		// cut req.url if is too long
+		if (url.length > 100) {
+			url = url.substring(0, 100) + "..."
+		}
+
+		console.log(
+			`${req.method} ${res._status_code ?? res.statusCode ?? 200} ${url} ${elapsedTimeInMs}ms`,
+		)
 	})
 
-    app.use(express.static(path.join(__dirname, "..", "web", "dist",)))
+	next()
+}
 
-    // 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.use(useLogger)
+
+	app.get("/api", handleApiRequest)
+	app.use("/api/audio", express.static(audiosPath))
+	app.use(express.static(path.join(__dirname, "..", "web", "dist")))
 
 	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

@@ -3,19 +3,19 @@
 	line-height: 1.5;
 	font-weight: 400;
 
-  color-scheme    : light dark;
+	color-scheme: light dark;
-  color           : rgba(255, 255, 255, 0.87);
+	color: rgba(255, 255, 255, 0.87);
 	background-color: #242424;
 
-  font-synthesis         : none;
+	font-synthesis: none;
-  text-rendering         : optimizeLegibility;
+	text-rendering: optimizeLegibility;
-  -webkit-font-smoothing : antialiased;
+	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 }
 
 a {
-  font-weight    : 500;
+	font-weight: 500;
-  color          : #646cff;
+	color: #646cff;
 	text-decoration: inherit;
 }
 
@@ -24,28 +24,28 @@ a:hover {
 }
 
 body {
-  display       : flex;
+	display: flex;
 	flex-direction: column;
 
-  margin : 0;
+	margin: 0;
 	padding: 0;
 }
 
 h1 {
-  font-size  : 3.2em;
+	font-size: 3.2em;
 	line-height: 1.1;
 }
 
 button {
-  border-radius   : 8px;
+	border-radius: 8px;
-  border          : 1px solid transparent;
+	border: 1px solid transparent;
-  padding         : 0.6em 1.2em;
+	padding: 0.6em 1.2em;
-  font-size       : 1em;
+	font-size: 1em;
-  font-weight     : 500;
+	font-weight: 500;
-  font-family     : inherit;
+	font-family: inherit;
 	background-color: #1a1a1a;
-  cursor          : pointer;
+	cursor: pointer;
-  transition      : border-color 0.25s;
+	transition: border-color 0.25s;
 }
 
 button:hover {
@@ -58,28 +58,41 @@ button:focus-visible {
 }
 
 .app {
-  display       : flex;
+	display: flex;
 	flex-direction: column;
 
-  align-items    : center;
+	align-items: center;
 	justify-content: center;
 
-  width : 100%;
+	width: 100%;
 	height: 100vh;
 }
 
+.result {
+	display: flex;
+	flex-direction: column;
+
+	align-items: center;
+	justify-content: center;
+
+	.playback_audio {
+		font-size: 24px;
+		cursor: pointer;
+	}
+}
+
 footer {
 	position: fixed;
 
 	bottom: 10vh;
-  left  : 0;
+	left: 0;
 
-  width : 100%;
+	width: 100%;
 	height: fit-content;
 
 	display: flex;
 
-  align-items    : center;
+	align-items: center;
 	justify-content: center;
 
 	gap: 20px;

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>,
-)