Language translator

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