Translator App using Django

Hey guys!!

As you all know we can make small projects with Django very easily and very fast. So in this blog we are going to build a small project using Python and Django in no time and we are going to learn a new python library i.e Translate.

In this blog we are going to make a simple Translator App with the help of Python, Django and Translate python library.

So firstly let us know what is Translate and what we can do with it.

Translate

Translate is a simple but powerful translation tool written in python with with support for multiple translation providers. By now we are integrated with Microsoft Translation API and Translated MyMemory API.

Features

  • Translate your outputs in real time
  • Do translation in your terminal using command line

Check out the latest translate documentation at Read the Docs

Let’s begin Translator Project!!

To use Translate library in your project, it should be first installed on your system.You can install Translate using the given command:-

$ pip install translate

Before starting the project, make sure you have django installed on your system or you can install it by using below command:-

$ pip install django

Now to work upon we’ll need a project directory and an app inside the project directory which we are going to make using django-admin:-

$django-admin startproject Translator
$cd Translator
$python manage.py startapp translator_app

As a result of above steps your project should have been properly configured. Check it by using below command:-

python manage.py runserver

It should look something like this:-

Now firstly go to the settings.py file of your project and configure your app i.e translator_app in INSTALLED_APPS:-

# Application definition
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    'translator_app.apps.TranslatorAppConfig',
]

Make a new file named as urls.py in translator_app and add the following code:-

from django.urls import path
from . import views

urlpatterns = [
    path('', views.home, name="home"),
    path('translated/', views.translated, name="translated")
]

Go to the urls.py file of your Translator project and map the urls of translator_app:-

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('', include("translator_app.urls")),
    path('admin/', admin.site.urls),
]

create a new directory named as templates in your translator_app directory and create two html files:-

  • home.html :- This is the home page of our app.
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

    <title>Translator</title>
  </head>
  <body>
    <div class="container">
        <br>
        <br>
        <center>
            <form action="{% url 'translated'%}" method="get">
        <div class="mb-3">
            <label for="exampleFormControlTextarea1" class="form-label"><h3>Type Text In Any Language</h3></label>
            <textarea name="text" class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
        </div>
            <br>
            <h3>Select Language to Translate Text</h3>
            <select name="lang" class="form-select" aria-label="Default select example">
                <option value="hi">Hindi</option>
                <option value="en">English</option>
                <option value="it">Italian</option>
                <option value="fr">French</option>
                <option value="zn-cn">Chinese</option>
                <option value="ja">Japanese</option>
                <option value="de">German</option>
                <option value="gu">Gujarati</option>
                <option value="bn">Bengali</option>
            </select>

            <br>
            <button type="submit" class="btn btn-primary">Translate</button>
            </form>
        </center>


    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
  </body>
</html>
  • translated.html:- This file will show the translated text.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Translated</title>
</head>
<body>
<center>
<h1>Text Successfully translated!!!</h1>
    <font color="purple">
        <h2>
            {{ translated }}
        </h2>
</body>
</html>

Now add the below code to the views.py file so that our app works in right manner.

from django.shortcuts import render
from translate import Translator
# Create your views here.
def home(request):
    return render(request,'home.html')
def translated(request):
    text = request.GET.get('text')
    lang = request.GET.get('lang')
    print(text, lang)

    # translate the text
    translator = Translator(to_lang=lang)
    translated = translator.translate(text)

    tr = translated
    return render(request, 'translated.html',{'translated':tr})

Here our Translator project is complete!!

Now run the below command to see if it’s working fine.

$python manage.py runserver
Translator output

Hope you guys have learnt something new from this short project.