Auto-translating User Submitted Content Using Google Translate API

Jacek Barecki

The Google Translate service offers a REST API which allows you to fetch translations right from your app. In this tutorial you will learn how to build a single-page site that displays user submitted opinions in different languages and allows the visitors to submit new ones. The tutorial is the continuation of the Introduction to the Google Translate API and PHP article.

Introduction

In our app we will have to implement the following functionalities:
– adding a new opinion using a web form,
– saving the opinion to the database,
– fetching the translations and saving them to database,
– displaying existing opinions along with their translations.

The technologies that we will use include:
– the SQLite database to store user opinions and translations,
– the cURL library to connect to the Google Translate API,
– the Twitter Bootstrap to get some nice look&feel.

The requests within our site will be made via AJAX calls to save and fetch the opinions just within one page.

The final app is available in a GitHub repo. You can open a live demo to see what we will achieve after going through the tutorial.

The database

The database engine

As we will store the data in an SQLite database, there is not much configuration that has to be done. SQLite describes itself as a zero-configuration and serverless database which is entirely true. The whole database is just a single file on the server. It's important to note that while SQLite helps us develop our app faster and is perfect for this kind of rapid prototyping, you should use something more secure and robust like MariaDB in production. To connect with the database using the PHP PDO extension we need a single line of code:

<?php
    $db = new PDO('sqlite:opinions.db');
?>

Then, we can just execute some queries using the $db variable as the database connection handler.

The database schema

Our database will contain two tables – one for storing the general information about an opinion and the second one with all the texts and translations:

The opinion_translations.machine field will tell us whether a certain row represents a user submitted text (machine = 0) or a machine translation (machine = 1).

To store the language codes in opinion_translations.language field we will use the same values that Google Translate uses in their API (check the documentation for the full list).

Saving the opinions

We will allow our visitors to add an opinion using a simple form:

To know what the source language of the opinion is, the form contains a hidden field specifying it:

<input type="hidden" name="language" id="inputLanguage" value="en">

If our site will allow a user to switch between different language versions, we will just have to change the inputLanguage value to the language code that is currently displayed.

When a user submits the form, our application saves the opinion to the database and then fetches the necessary translations. All the code responsible for handling the opinions is written in the Opinion class of our app:

<?php
class Opinion {

        private $_languages = array('en', 'fr', 'es');

        public function getAll() {
           ...
        }

        public function addOpinion($nick, $text, $language) {
            ...
        }

        public function addTranslation($opinion_id, $language, $text, $machine) {
        ...
        }

        ...
    }
?>

As you can see, there is a global list of all the languages used in the site stored in the _languages property. We will use it to check which translations to fetch when adding an opinion.

Getting the translations

To connect with the Google Translate API we will use a simple GoogleTranslator class that serves as a wrapper for the methods offered by the API. It offers 3 static methods whose names are the same as the ones available in the API:

<?php
    class GoogleTranslator {
        static function translate($targetLanguage, $text, $sourceLanguage = null, $prettyprint = 'true', $format = 'html') {
            ...
        }

        static function detect($text) {
            ...
        }

        static function languages() {
            ...
        }

    }

?>

Each of the methods builds a proper request URL basing on the values of the passed arguments. Then it sends a request to the API using cURL, just as it's described in the article about the Google Translate API basics.

So getting a translation using the GoogleTranslate class just looks like this:

<?php
    $translation = GoogleTranslator::translate($targetLanguage, $text, $sourceLanguage);

?>

Then we can save the translation we received from the Google API just by calling Opinion->addTranslation() method. We can add as many translations as we want on the condition that each opinion has no more than one text submitted by user (opinion_translations.machine = 0) and not more than one translation per language.

Displaying the opinions

After an opinion has been saved succesfully, we will be able to display its original content as well as its translations. Opinion->getAll() method will provide us with a list of all the opinions. We can show them nicely by displaying one opinion in a row along with the buttons that allow a visitor to switch
between different languages:

When we use the Google Translation API, there are certain regulations that we have to stick to: the attribution requirements and the HTML markup requirements.

The first document states that we have to place the Google Translate logo next to the machine translated text that we display on the site. That's why a translated by Google image shows up when displaying translated content on our opinion list. We also have to add a disclaimer which is displayed at the bottom of our page.

There are also the requirements regarding the HTML markup. When displaying a translated text we need to add a lang attribute to the element that contains the text (a div, span or any other element). The value of the attribute consists both of the source language and the target language of the translation:

 <language code of the language to which the text was translated>-x-mtfrom-<language code of original language>

So a sample opinion translated from English to French may be inserted into a page using a code like this:

<div lang="fr-x-mtfrom-en">
    J'aime vraiment vos produits.
</div>

As Google explains, adding such HTML attributes allow the search engines to distinguish between original and translated text.

Linking it all together

To connect all the parts of our application we will build a single-page site that saves a new opinion and displays the existing ones using AJAX calls. After submitting an opinion the user will be notified about the result and the opinions list will be reloaded. When something goes wrong, a nice error message will also show up.

See the demo to check how it works. As the Google Translate API is a paid service, our demo app will not fetch the actual translations. To change it after downloading the code, just enter your API key in the GoogleTranslator class and change the test mode to false:

<?php
    class GoogleTranslator {
        private static $_apiKey = '<your API key>';
        private static $_testMode = false;
        ...
    }
?>

Then your app will connect to the Google Translate API each time a new opinion is being added.

Summary

The article described how to make a single-page site that fetches and displays opinions in different languages. As you could see, mixing such technologies as SQLite, Google Translate REST API, Twitter Bootstrap and AJAX allows you to quickly set up a site that is ready to serve your customers.

You can extend the given code and add some more funcionalities like approving the opinions by a site admin or linking the opinions with products in your database.

If you have any questions or comments regarding the article, feel free to post a comment below or contact me through Google+.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • thomas

    Stop displaying auto generated translations on your websites ! It’s annoying to see our google searchs drowned by this gibberish.

  • dzdeveloper

    thank you

  • vinny42

    Automatic translations can backfire quite badly, google is known for mistranslating the most important words, reducing your text to complete nonsense.

    • arjun menon

      atleast u get the point what the author says

  • idff

    I disagree completely, you could get completely the wrong idea what the author is trying to say! (and probably will from my experience of Google translate) I’m surprised Sitepoint are advocating this, not very professional! Sorry Jacek, not dissing your technical ability, it’s the idea that anyone should actually implement this that I find extraordinary!

    • Anonymous

      Google does this on Google+ posts, and on every single foreign language website you encounter, by asking you if you want to translate the text content. It’s a great idea and a fantasitc usability trick.

  • idff

    Well, anything I’ve ever read translated to English from another language via Google has been crap. If you’re building a professional site it should be professionally translated in my opinion. And to save a lawsuit if the user translates the terms and conditions etc. It’s one thing to choose to translate text, and another when it’s done automatically! It’s what we’d all like to do eventually but it certainly has it’s problems at the moment. As you say it’s a ‘Trick’ at the moment.

  • Anonymous

    Thank you all for your comments. Of course the Google Translate service (and any other machine translation service) isn’t probably good enough to translate whole paragraphs or whole page content. But it does the job well when you want to get the meaning of a short part of text – like an opinion – written in another language. I’ve seen an example of auto translating user opinions on a site which provides hotel reviews from all over the world and I find it very useful. I have also succesfully used the Google Translate API in one of my projects to fetch translations of product reviews in an web store. The translations were not always perfect but they allowed the visitor to get the main idea of a review (e.g. is it a positive/negative review, which product features are commented etc.).