Disclaimer: This blog post is written with the help from ChatGPT
We shall be building a simple language translator using existing trained models.
Tech stack: Python, NextJS, Azure, AKS.
To build a simple web application for language translation using the given tech stack, you can follow these steps:
Set up the backend (Python) with FastAPI.
- Install FastAPI and Uvicorn.
pip install fastapi
pip install uvicorn
- Create a file named main.py with the following content:
from fastapi import FastAPI
import requests
app = FastAPI()
@app.post("/translate/")
async def translate(text: str, source_lang: str, target_lang: str):
# Your translation model code
translated_text = translate_text(text, source_lang, target_lang)
return {"translated_text": translated_text}
def translate_text(text, source_lang, target_lang):
# Implement your translation model here
# For example, you can use the `transformers` library from Hugging Face
# or any other translation model
return "Translated text"
Set up the frontend (NextJS).
- Install NextJS:
npx create-next-app frontend
cd frontend
- Install the necessary libraries:
npm install axios
- Create a file named pages/index.js with the following content:
import { useState } from "react";
import axios from "axios";
export default function Home() {
const [text, setText] = useState("");
const [sourceLang, setSourceLang] = useState("en");
const [targetLang, setTargetLang] = useState("es");
const [translatedText, setTranslatedText] = useState("");
const handleSubmit = async (e) => {
e.preventDefault();
const res = await axios.post("/api/translate", {
text,
source_lang: sourceLang,
target_lang: targetLang,
});
setTranslatedText(res.data.translated_text);
};
return (
<div>
<form onSubmit={handleSubmit}>
<textarea onChange={(e) => setText(e.target.value)} value={text} />
<select onChange={(e) => setSourceLang(e.target.value)} value={sourceLang}>
{/* Add your language options here */}
<option value="en">English</option>
<option value="es">Spanish</option>
</select>
<select onChange={(e) => setTargetLang(e.target.value)} value={targetLang}>
{/* Add your language options here */}
<option value="en">English</option>
<option value="es">Spanish</option>
</select>
<button type="submit">Translate</button>
</form>
<p>{translatedText}</p>
</div>
);
}
Set up the database (MongoDB).
- Install the necessary libraries:
pip install pymongo
pip install motor
- In main.py, add the following code to set up the database:
from motor.motor_asyncio import AsyncIOMotorClient
async def get_db():
client = AsyncIOMotorClient("mongodb://username:password@your_mongodb_server:27017/your_db_name")
return client.your_db_name
Deploy the backend and frontend using Azure Kubernetes Service (AKS).
First, create a container for both the frontend and backend applications. Create a Dockerfile for each application with the following content:
For the backend:
# Dockerfile
Copy code
FROM python:3.9
WORKDIR /app
COPY requirements.txt requirements.txt
RUN pip install -r requirements.txt
COPY . .
CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000"]
- For the frontend:
# Dockerfile
FROM node:14
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]
Build the Docker images:
# For backend
docker build -t your_dockerhub_username/backend .
# For frontend
docker build -t your_dockerhub_username/frontend .
Push the Docker images to Docker Hub:
# For backend
docker push your_dockerhub_username/backend
# For frontend
docker push your_dockerhub_username/frontend
Next, set up your Kubernetes cluster in AKS. Follow the Azure documentation to create and connect to the cluster: https://docs.microsoft.com/en-us/azure/aks/kubernetes-walkthrough
- Create a kustomization.yaml file to define the Kubernetes resources:
resources:
- backend-deployment.yaml
- frontend-deployment.yaml
- backend-service.yaml
- frontend-service.yaml
- Create the following YAML files to define the deployments and services for the backend and frontend:
backend-deployment.yaml:
apiVersion: apps/v1
kind: Deployment
metadata:
name: backend
spec:
replicas: 1
selector:
matchLabels:
app: backend
template:
metadata:
labels:
app: backend
spec:
containers:
- name: backend
image: your_dockerhub_username/backend
ports:
- containerPort: 8000
frontend-deployment.yaml:
apiVersion: apps/v1
kind: Deployment
metadata:
name: frontend
spec:
replicas: 1
selector:
matchLabels:
app: frontend
template:
metadata:
labels:
app: frontend
spec:
containers:
- name: frontend
image: your_dockerhub_username/frontend
ports:
- containerPort: 3000
backend-service.yaml:
apiVersion: v1
kind: Service
metadata:
name: backend
spec:
selector:
app: backend
ports:
- protocol: TCP
port: 8000
targetPort: 8000
type: LoadBalancer
frontend-service.yaml:
apiVersion: v1
kind: Service
metadata:
name: frontend
spec:
selector:
app: frontend
ports:
- protocol: TCP
port: 80
targetPort: 3000
type: LoadBalancer
Apply the Kubernetes configuration:
kubectl apply -k .
Once the services are running, use the frontend service's external IP address to access the web application.
This should give us a basic language translation web application using Python, NextJS, MongoDB, and Azure Kubernetes Service (AKS).
Improve the translation model
Currently, the translation model is just a placeholder. We can use the transformers library from Hugging Face to implement a more sophisticated translation model. For example, we can use the MarianMTModel and MarianTokenizer for translation:
from transformers import MarianMTModel, MarianTokenizer
model_name = "Helsinki-NLP/opus-mt-{src}-{tgt}"
tokenizer = MarianTokenizer.from_pretrained(model_name.format(src=source_lang, tgt=target_lang))
model = MarianMTModel.from_pretrained(model_name.format(src=source_lang, tgt=target_lang))
def translate_text(text, source_lang, target_lang):
inputs = tokenizer(text, return_tensors="pt", padding=True, truncation=True)
translated = model.generate(**inputs)
return tokenizer.decode(translated[0], skip_special_tokens=True)
- Remember to install the transformers library:
pip install transformers
Top comments (0)