How to Build A Language Translator App Using Django

Introduction

In this tutorial, we will be building a Django application that translates text to any language you may prefer. For this tutorial, we will be using a few libraries such as Django which will be our primary web server, and Google Translator.Django language translater app.

Install modules

To install the modules mentioned above run the commands below on your terminal.

pip install deep-translator

pip install Django

Create project

To begin let’s create our project by running the command below.

django-admin startproject django_translator

After running the command above a folder will be created called django_translator , now cd into the folder and now run the command below to create the app.

python3 manage.py startapp translator

Register application

Now we need to register our application to our project. To do this edit the settings.py installed apps and add your application as shown below.

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'translator',
]

Create view

Now let’s create our view as shown below in the views.py file.

from django.shortcuts import render
from deep_translator import GoogleTranslator

def translate(request):
    if request.method == 'POST':
        text = request.POST['text']
        lang = request.POST['lang']
        translated_text = handle_translation(text, lang)
        context = {'translated_text': translated_text}
    else:
        context = {}

    return render(request, 'translator/index.html', context)

def handle_translation(text, lang):
    translator = GoogleTranslator(source='auto', target=lang)
    translated_text = translator.translate(text)
    return translated_text

The above view first creates a function that takes in the text to be translated and the target language. Later the translate view takes text and target language from the user and now returns the translated text.

Create app route

Inside the translate folder create a file called urls.py and insert the code below.

from django.urls import path 
from . import views 


urlpatterns = [
    path('',views.translate,name="translate"),
]

Create templates

Now inside the translator folder create a folder called templates and inside it create a folder called translator. Inside the translator folder create a file called index.html. [ translator/templates/translator/index.html ]

Inside the index.html file insert the following.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Translator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f8f9fa;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        .container {
            max-width: 500px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }

        h1 {
            text-align: center;
            color: #1a73e8;
            font-size: 24px;
            margin-bottom: 20px;
        }

        form {
            display: flex;
            flex-direction: column;
        }

        label {
            color: #555;
            margin-bottom: 10px;
            font-weight: bold;
        }

        input[type="text"] {
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 3px;
            margin-bottom: 10px;
            font-size: 16px;
        }

        button {
            padding: 10px 20px;
            background-color: #1a73e8;
            color: #fff;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            font-size: 16px;
        }

        button:hover {
            background-color: #0d47a1;
        }

        p {
            margin-top: 20px;
            font-size: 18px;
            line-height: 1.5;
            color: #333;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Google Translate</h1>
        <form method="post">
            {% csrf_token %}
            <label for="text">Text to Translate:</label>
            <input type="text" name="text" id="text" required>
            <label for="lang">Target Language:</label>
            <input type="text" name="lang" id="lang" required>
            <button type="submit">Translate</button>
        </form>
        {% if translated_text %}
            <p>Translated Text: {{ translated_text }}</p>
        {% endif %}
    </div>
</body>
</html>

Create project route

Now in the django_translator folder inside the urls.py insert the code below.

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

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

Run

Now let’s start our application, to do so run the command below. After running the command below our application will be available at the address [ http://127.0.0.1:8000 ]