Auto-translating User’s Content Using Google Translate API

Share this article

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+.

Frequently Asked Questions (FAQs) about Auto-Translating User-Submitted Content Using Google Translate API

How does Google Translate API work?

Google Translate API is a powerful tool that uses machine learning technologies to automatically translate text from one language to another. It works by taking the input text, identifying the source language, and then translating it into the target language. The API uses a vast database of translations and language patterns to provide accurate and contextually correct translations. It’s a cloud-based service, meaning it can be accessed from anywhere and integrated into various applications, websites, and systems.

Is Google Translate API free to use?

No, Google Translate API is not free. It is a paid service and the cost depends on the volume of characters translated. Google offers a pay-as-you-go pricing model for the Translate API where you pay for the number of characters you translate.

How can I integrate Google Translate API into my website?

To integrate Google Translate API into your website, you need to have some basic knowledge of programming. You will need to use the API key provided by Google in your website’s code. The API key is used to authenticate your application and track usage. Once the API is integrated, it can automatically translate user-submitted content into the desired language.

Can Google Translate API translate real-time conversations?

Yes, Google Translate API can translate real-time conversations. It can be integrated into chat applications to provide real-time translation services. This can be particularly useful in customer service scenarios where the customer and the service provider speak different languages.

How accurate is Google Translate API?

Google Translate API is quite accurate for many language pairs, especially for popular languages like English, Spanish, French, and German. However, the accuracy can vary for less common languages or complex sentences. It’s important to note that while the API provides a good level of translation, it may not always capture the nuances and cultural context of certain phrases.

Can Google Translate API handle multiple languages at once?

Yes, Google Translate API can handle multiple languages at once. It can detect the source language automatically and translate the text into multiple target languages simultaneously.

Is there a character limit for Google Translate API?

Yes, there is a character limit for Google Translate API. The maximum limit is 5,000 characters per request. However, you can make multiple requests if you need to translate longer texts.

Can Google Translate API be used for commercial purposes?

Yes, Google Translate API can be used for commercial purposes. Many businesses use it to translate their website content, customer service chats, product descriptions, and more.

How fast is Google Translate API?

Google Translate API is quite fast. The translation speed depends on the length of the text and the server load at the time of the request. However, in most cases, the translation is almost instantaneous.

Can I customize the translation provided by Google Translate API?

Yes, you can customize the translation provided by Google Translate API. You can use the “glossary” feature to specify custom translations for certain words and phrases. This can be useful for translating brand names, technical terms, and other specific phrases.

Jacek BareckiJacek Barecki
View Author

Jacek is a web developer specialized in building extensive web applications, mainly e-commerce solutions. The technologies he uses on a daily basis include PHP, MySQL, HTML+CSS and JS+jQuery. During the last few years he was the head developer of a highly customized online store platform in Poland. Now he's working on the development of several e-commerce websites running in Poland and Germany, often having hundreds of thousands pageviews a day. To take a break from coding, he does challenging crossfit workouts, goes out to taste some new food or dives into an interesting psychology magazine or book.

Google Tutorials & ArticleslocalizationPHPtranslate
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form