The following code is designed to take a text box and translate the box from English to spanish or German.
Need to create a directory in your cloud shell environment for your translate program
then add a new file
gcloud config set project PROJECT-ID
gcloud config set project uconn-app-translate
Start with main.py
================================================
from flask import Flask, request, render_template
# START Translate requirements
from google.cloud import translate_v2 as translate
translate_client = translate.Client()
# END Translate requirements
app = Flask(__name__) # Flask is the web framework we're using
@app.route('/', methods=['POST','GET']) # This defines when the function below will be called
def translate():
if request.method == 'POST':
data = request.form.to_dict(flat=True)
result = translate_client.translate(data['inputText'],target_language=data["toLang"])
return render_template('index.html',translatedText=result['translatedText'])
else:
return render_template('index.html')
if __name__ == '__main__':
app.run(host='127.0.0.1', port=8080, debug=True)
===========================================================
next we create an app.yaml file
===========================================================
runtime: python37
===============================================================
then we need a requirements.txt file
===========================================================
Flask>=1.0.0
google-cloud-translate
===========================================================
create a template directory for the html
create an index.html file
===========================================================
<!DOCTYPE html>
<html lang="en">
<head>
<title>Translate Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css">
</head>
<body>
{# Navbar #}
<nav class="navbar navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="/">Translate</a>
</div>
</nav>
{# Input Section #}
<section>
<div class="container">
<h2>Input</h2>
{# From #}
<form method="post" action="/">
<div class="form-group">
<label for="inputText">Text to Translate</label>
<textarea name="inputText" id="inputText" class="form-control"></textarea>
</div>
<div class="form-row">
<div class="form-group col-md-3">
<label for="toLang">Translate To</label>
<select class="form-control" id="toLang" name="toLang">
<option value="en">English</option>
<option value="es">Spanish</option>
<option value="de">German</option>
</select>
</div>
<div class="offset-md-6 col-md-3">
<br>
<button type="submit" class="btn btn-primary btn-block mt-2">Translate</button>
</div>
</div>
</form>
</div>
</section>
<hr>
{# Output Section #}
<section>
<div class="container">
<h2>Output</h2>
<p>
{% if translatedText %}
{{ translatedText }}
{% else %}
Enter some text above, select a language to translate to, and click "Translate".
{% endif %}
</p>
</div>
</section>
</body>
</html>
Working Example: https://uconn-engr.uc.r.appspot.com/
Source: https://github.com/philku/gce-uconn-translate
Lab: https://github.com/philku/gce-uconn-translate/blob/master/readme.md
Language list https://cloud.google.com/translate/docs/languages
No comments:
Post a Comment