Dockerfile

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

node_api/api/index.js

@@ -1,90 +1,22 @@
-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
 
-const cachePath = path.join(process.cwd(), ".cache")
+async function main() {
-const audiosPath = path.join(cachePath, "audio")
+    app = express()
 
-const PollyBaseURL = "https://polly.us-east-1.amazonaws.com"
+    app.use(cors())
+    app.use(express.json())
 
-const PollyDefaultConfig = {
+    app.get("/api", async (req, res) => {
-	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
@@ -96,58 +28,17 @@ async function handleApiRequest(req, res) {
             }
         }
 
-	const result = await getPhrases({ random })
+        const phrases = await mlib({ random })
 
-	if (random) {
+        res.json(phrases)
-		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`,
-		)
     })
 
-	next()
+    app.use(express.static(path.join(__dirname, "..", "web", "dist",)))
-}
 
-async function main() {
+    // serve static react build
-	app = express()
+    app.get("*", (req, res) => {
-
+        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,8 +4,6 @@
   "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,41 +58,28 @@ 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
+const API_ENDPOINT = import.meta.env.PROD ? "/api" : `http://${window.location.hostname}:3000/api`
-	? "/api"
-	: `http://${window.location.hostname}:3000/api`
 
 const App = () => {
   const [loading, setLoading] = React.useState(true)
   const [randomWord, setRandomWord] = React.useState(null)
 
-	async function loadRandom({ random = true } = {}) {
+  async function loadRandom({
+    random = true,
+  } = {}) {
     setLoading(true)
 
     let { data } = await axios({
@@ -29,52 +29,24 @@ 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 (
+  return <div className="app">
-		<div className="app">
+    {
-			<div className="result">
+      loading ? <p>Loading...</p> : <h1>{randomWord}</h1>
-				{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">
+      <a href="https://git.ragestudio.net/srgooglo/monstercanker">GitHub</a>
-					GitHub
-				</a>
       <a href={API_ENDPOINT}>API</a>
     </footer>
   </div>
-	)
 }
 
-ReactDOM.createRoot(document.getElementById("root")).render(<App />)
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)