Creating Flask Application. Flask is a simple, lightweight web framework. It can be used to create minimal web applications and APIs. Create a file named weatherapp.py and initialize our Flask application. Flask LLP was founded in 2013. We make apps for iPhone, iPad and Apple Watch We are a small team of two working in Tokyo, Japan. Feb 06, 2019 In this article, I will show you how to deploy and publish your Flask web app on Azure. We will use an Azure App Service on Linux, which provides a highly scalable web hosting service using the.
- Quickstart: Create a Python app in Azure App Service on Linux.; 5 minutes to read +11; In this article. In this quickstart, you deploy a Python web app to App Service on Linux, Azure's highly scalable, self-patching web hosting service.You use the local Azure command-line interface (CLI) on a Mac, Linux, or Windows computer. The web app you configure uses a free App Service tier, so.
- The Python Flask app with have a new URL route. We have changed the default port to 80, the default HTTP port: from flask import Flask, flash, redirect, rendertemplate, request, session, abort.
by Salvador Villalon
Introduction
In each section, I will show pieces of code for you to follow along. All the code used in the tutorial is available in this GitHub Repository.
What is HTTP and What Does it Have to do with Flask?
HTTP is the protocol for websites. The internet uses it to interact and communicate with computers and servers. Let me give you an example of how you use it everyday.
When you type the name of a website in the address bar of your browser and you hit enter. What happens is that an HTTP request has been sent to a server.
For example, when I go to my address bar and type google.com, then hit enter, an HTTP request is sent to a Google Server. The Google Server receives the request and needs to figure how to interpret that request. The Google Server sends back an HTTP response that contains the information that my web browser receives. Then it displays what you asked for on a page in the browser.
How is Flask involved?
We will write code that will take care of the server side processing. Our code will receive requests. It will figure out what those requests are dealing with and what they are asking. It will also figure out what response to send to the user.
To do all this we will use Flask.
What is Flask?
It makes the process of designing a web application simpler. Flask lets us focuson what the users are requesting and what sort of response to give back.
Learn more about micro frameworks.
How Does a Flask App Work?
The code lets us run a basic web application that we can serve, as if it were a website.
This piece of code is stored in our main.py.
Line 1: Here we are importing the Flask module and creating a Flask web server from the Flask module.
Line 3: __name__ means this current file. In this case, it will be main.py. This current file will represent my web application.
We are creating an instance of the Flask class and calling it app. Here we are creating a new web application.
Line 5: It represents the default page. For example, if I go to a website such as “google.com/” with nothing after the slash. Then this will be the default page of Google.
Line 6–7: When the user goes to my website and they go to the default page (nothing after the slash), then the function below will get activated.
Line 9: When you run your Python script, Python assigns the name “__main__” to the script when executed.
If we import another script, the if statement will prevent other scripts from running. When we run main.py, it will change its name to __main__ and only then will that if statement activate.
Line 10: This will run the application. Having
debug=True
allows possible Python errors to appear on the web page. This will help us trace the errors.Let’s Try Running main.py
In your Terminal or Command Prompt go to the folder that contains your main.py.Then do
py main.py
or python main.py
. In your terminal or command prompt you should see this output.The important part is where it says
Running on http://127.0.0.1:5000/
.127.0.0.1 means this local computer. If you do not know the meaning of this (like I didn’t when I started — this article is really helpful), the main idea is that 127.0.0.1 and localhost refer to this local computer.
Go to that address and you should see the following:
More Fun with Flask
Earlier you saw what happened when we ran main.py with one route which was app.route(“/”).
Let’s add more routes so you can see the difference.
How To Run Flask App
In lines 9–11. we added a new route, this time to /salvador.
Now run the main.py again and go tohttp://localhost:5000/salvador.
So far we have been returning text. Let’s make our website look nicer by adding HTML and CSS.
HTML, CSS, and Virtual Environments
HTML and Templates in Flask
First create a new HTML file. I called mine home.html.
Here is some code to get you started.
Important Point To Remember
The Flask Framework looks for HTML files in a folder called templates. You need to create a templates folder and put all your HTML files in there.
Now we need to change our main.py so that we can view the HTML file we created.
Line 1: We imported
render_template()
method from the flask framework. render_template()
looks for a template (HTML file) in the templates folder. Then it will render the template for which you ask. Learn more about render_templates() function.Line 7: We change the return so that now it returns
render_template(“home.html”)
. This will let us view our HTML file.Now visit your localhost and see the changes: http://localhost:5000/.
Let’s add more pages
Let’s create an about.html inside the templates folder.
Let’s make a change similar to what we did before to our main.py.
We made three new changes:
Line 9: Change the route to
'/about'
.Line 10: Change the function so it is now
def about():
Line 11: Change the return so that now it returns
render_template('about.html')
.Now see the changes: http://localhost:5000/about.
Let’s Connect Both Pages with a Navigation
To connect both pages we can have a navigation menu on the top. We can use Flask to make the process of creating a navigation menu easier.
First, let’s create a template.html. This template.html will serve as a parent template. Our two child templates will inherit code from it.
Line 13–14: We use the function called
url_for()
. It accepts the name of the function as an argument. Right now we gave it the name of the function. More information on url_for() function.The two lines with the curly brackets will be replaced by the content of home.html and about.html. This willdepend on the URL in which the user is browsing.
These changes allow the child pages (home.html and about.html) to connect to the parent (template.html). This allows us to not have to copy the code for the navigation menu in the about.html and home.html.
Content of about.html:
Content of home.html:
Let’s try adding some CSS.
Adding CSS to Our Website
An important note to remember
In the same way as we created a folder called templates to store all our HTML templates, we need a folder called static.
In static, we will store our CSS, JavaScript, images, and other necessary files. That is why it is important that you should create a CSSfolder to store your stylesheets. After you do this, your project folder should look like this:
Linking our CSS with our HTML file
Our template.html is the one that links all pages. We can insert the code here and it will be applicable to all child pages.
Line 7: Here we are giving the path to where the template.css is located.
Now see the changes: http://localhost:5000/about.
Moving Forward with Flask and virtualenv
Now that you are familiar with using Flask, you may start using it in your future projects. One thing to always do is use virtualenv.
Why use virtualenv?
You may use Python for others projects besides web-development.
Your projects might have different versions of Python installed, different dependencies and packages.
We use virtualenv to create an isolated environment for your Python project. This means that each project can have its own dependencies regardless of what dependencies every other project has.
Getting started with virtualenv
First, run this command on your command prompt or terminal:
Second, do the following:
Here you can give a name to the environment. I usually give it a name of virtual. It will look like this:
virtualenv virtual
.After setting up virtual environment, check your project folder. It should look like this. The virtual environment needs to be created in the same directory where your app files are located.
Activating the virtual environment
Now go to your terminal or command prompt. Go to the directory that contains the file called activate. The file called activate is found inside a folder called Scripts for Windows and bin for OS X and Linux.
For OS X and Linux Environment:
For Windows Environment:
Since I am using a Windows machine, when I activate the environment it will look like this:
The next step is to install flask on your virtual environment so that we can run the application inside our environment. Run the command:
Run your application and go to http://localhost:5000/
We finally made our web application. Now we want to show the whole world our project.
(More information on virtualenv can be found in the following guides on virtualenv and Flask Official Documentation)
Let’s send it to the Cloud
To show others the project we made, we will need to learn how to use Cloud Services.
Deploy Your Web Application to the Cloud
To deploy our web application to the cloud, we will use Google App Engine (Standard Environment). This is an example of a Platform as a Service (PaaS).
PaaS refers to the delivery of operating systems and associated services over the internet without downloads or installation. The approach lets customers create and deploy applications without having to invest in the underlying infrastructure (More info on PaaS check out TechTarget).
Google App Engine is a platform as a service offering that allows developers and businesses to build and run applications using Google’s advanced infrastructure — TechOpedia.
Before you Start:
You will need a Google Account. Once you create an account, go to the Google Cloud Platform Console and create a new project. Also, you need to install the Google Cloud SDK.
At the end of this tutorial your project structure will look like this.
We will need to create three new files: app.yaml, appengine_config.py, and requirements.txt.
Content of app.yaml:
If you were to check Google’s Tutorial in the part where they talk about content of the app.yaml, it does not include the section where I wrote about libraries.
When I first attempted to deploy my simple web app, my deployment never worked. After many attempts, I learned that we needed to include the SSL library.
The SSL Library allows us to create secure connections between the client and server. Every time the user goes to our website they will need to connect to a server run by Google App Engine. We need to create a secure connection for this. (I recently learned this, so if you have a suggestions for this let me know!)
Content of appengine_config.py:
Content of requirements.txt:
Now inside our virtual environment (make sure your virtualenv is activated),we are going to install the new dependencies we have in requirements.txt. Run this command:
-t lib: This flag copies the libraries into a lib folder, which uploads to App Engine during deployment. Best malware removal software mac.
-r requirements.txt: Tells pip to install everything from requirements.txt.
Deploying the Application
To deploy the application to Google App Engine, use this command.
I usually include — project [ID of Project]
This specifies what project you are deploying. The command will look like this:
The Application
Now check the URL of your application. The application will be store in the following way:
My application is here: http://sal-flask-tutorial.appspot.com
Conclusion
From this tutorial, you all learned how to:
- Use the framework called Flask to use Python as a Server Side Language.
- Learned how to use HTML, CSS, and Flask to make a website.
- Learned how to create Virtual Environments using virtualenv.
- Use Google App Engine Standard Environment to deploy an application to the cloud.
What I learned
I learned three important things from this small project.
First, I learned about the difference between a static website and a web application
Static Websites:
- Means that the server is serving HTML, CSS, and JavaScript files to the client. The content of the site does not change when the user interacts with it.
Web Applications:
- A web application or dynamic website generates content based on retrieved data (most of the time is a database) that changes based on a user’s interaction with the site. In a web application, the server is responsible for querying, retrieving, and updating data. This causes web applications to be slower and more difficult to deploy than static websites for simple applications (Reddit).
Server Side and Client Side:
- I learned that a web application has two sides. The client side and the server side. The client side is what the user interacts with and the server side is where the all the information that the user inputted is processed.
Second, I learned about Cloud Services
Most of my previous projects were static websites, and to deploy them I used GitHub Pages. GitHub Pages is a free static site hosting service designed to host projects from a GitHub Repository.
When working with web applications, I could not use GitHub Pages to host them. GitHub Pages is only meant for static websites not for something dynamic like a web application that requires a server and a database. I had to use Cloud Services such as Amazon Web Services or Heroku
Third, I learned how to use Python as a Server Side Language
To create the server side of the web application we had to use a server side language. I learned that I could use the framework called Flask to use Python as the Server Side Language.
Next Steps:
You can build all sorts of things with Flask. I realized that Flask helps make the code behind the website easier to read. I have made the following applications during this summer of 2018 and I hope to make more.
Personal Projects
During my internship
Here is the list of resources that helped me create this tutorial:
- “App Engine — Build Scalable Web & Mobile Backends in Any Language | App Engine | Google Cloud.” Google, Google, cloud.google.com/appengine/.
- “Building a Website with Python Flask.” PythonHow, pythonhow.com/building-a-website-with-python-flask/.
- “Flask — Lecture 2 — CS50’s Web Programming with Python and JavaScript.” YouTube, 6 Feb. 2018, youtu.be/j5wysXqaIV8.
- “Getting Started with Flask on App Engine Standard Environment | App Engine Standard Environment for Python | Google Cloud.” Google, Google, cloud.google.com/appengine/docs/standard/python/getting-started/python-standard-env.
- “Installation.” Welcome | Flask (A Python Microframework), flask.pocoo.org/docs/0.12/installation/.
- “Python — Deploying Static Flask Sites for Free on Github Pages.” Reddit, www.reddit.com/r/Python/comments/1iewqt/deploying_static_flask_sites_for_free_on_github/.
- Real Python. “Python Virtual Environments: A Primer — Real Python.” Real Python, Real Python, 7 Aug. 2018, realpython.com/python-virtual-environments-a-primer/.
- “What Is Cloud Services? — Definition from WhatIs.com.” SearchITChannel, searchitchannel.techtarget.com/definition/cloud-services.
- “What Is Google App Engine (GAE)? — Definition from Techopedia.” Techopedia.com, www.techopedia.com/definition/31267/google-app-engine-gae.
If you have any suggestions or questions, feel free to leave a comment.
-->In this tutorial, you'll build a Flask web app that uses Azure Cognitive Services to translate text, analyze sentiment, and synthesize translated text into speech. Our focus is on the Python code and Flask routes that enable our application, however, we will help you out with the HTML and Javascript that pulls the app together. If you run into any issues let us know using the feedback button below.
Here's what this tutorial covers:
- Get Azure subscription keys
- Set up your development environment and install dependencies
- Create a Flask app
- Use the Translator to translate text
- Use Text Analytics to analyze positive/negative sentiment of input text and translations
- Use Speech Services to convert translated text into synthesized speech
- Run your Flask app locally
Tip
If you'd like to skip ahead and see all the code at once, the entire sample, along with build instructions are available on GitHub.
What is Flask?
Flask is a microframework for creating web applications. This means Flask provides you with tools, libraries, and technologies that allow you to build a web application. This web application can be some web pages, a blog, a wiki or go as substantive as a web-based calendar application or a commercial website.
For those of you who want to deep dive after this tutorial here are a few helpful links:
Prerequisites
Let's review the software and subscription keys that you'll need for this tutorial.
- An IDE or text editor, such as Visual Studio Code or Atom
- Chrome or Firefox
- A Translator subscription key (Note that you aren't required to select a region.)
- A Text Analytics subscription key in the West US region.
- A Speech Services subscription key in the West US region.
Create an account and subscribe to resources
As previously mentioned, you're going to need three subscription keys for this tutorial. This means that you need to create a resource within your Azure account for:
- Translator
- Text Analytics
- Speech Services
Use Create a Cognitive Services Account in the Azure portal for step-by-step instructions to create resources.
Important
For this tutorial, please create your resources in the West US region. If using a different region, you'll need to adjust the base URL in each of your Python files.
Set up your dev environment
Before you build your Flask web app, you'll need to create a working directory for your project and install a few Python packages.
Create a working directory
- Open command line (Windows) or terminal (macOS/Linux). https://powerfulnitro227.weebly.com/file-encryption-software-mac-os.html. Then, create a working directory and sub directories for your project:
- Change to your project's working directory:
Create and activate your virtual environment with virtualenv
Let's create a virtual environment for our Flask app using
virtualenv
. Using a virtual environment ensures that you have a clean environment to work from.- In your working directory, run this command to create a virtual environment:macOS/Linux:We've explicitly declared that the virtual environment should use Python 3. This ensures that users with multiple Python installations are using the correct version.Windows CMD / Windows Bash:To keep things simple, we're naming your virtual environment venv.
- The commands to activate your virtual environment will vary depending on your platform/shell:
Platform Shell Command macOS/Linux bash/zsh source venv/bin/activate
Windows bash source venv/Scripts/activate
Command Line venvScriptsactivate.bat
PowerShell venvScriptsActivate.ps1
After running this command, your command line or terminal session should be prefaced withvenv
. - You can deactivate the session at any time by typing this into the command line or terminal:
deactivate
.
Note
Python has extensive documentation for creating and managing virtual environments, see virtualenv.
Install requests
Requests is a popular module that is used to send HTTP 1.1 requests. There's no need to manually add query strings to your URLs, or to form-encode your POST data.
- To install requests, run:
Note
If you'd like to learn more about requests, see Requests: HTTP for Humans.
Install and configure Flask
Next we need to install Flask. Flask handles the routing for our web app, and allows us to make server-to-server calls that hide our subscription keys from the end user.
- To install Flask, run:Let's make sure Flask was installed. Run:The version should be printed to terminal. Anything else means something went wrong.
- To run the Flask app, you can either use the flask command or Python's -m switch with Flask. Before you can do that you need to tell your terminal which app to work with by exporting the
FLASK_APP
environment variable:macOS/Linux:Windows:
Create your Flask app
In this section, you're going to create a barebones Flask app that returns an HTML file when users hit the root of your app. Don't spend too much time trying to pick apart the code, we'll come back to update this file later.
Flask App To Mac App Computer
What is a Flask route?
Let's take a minute to talk about 'routes'. Routing is used to bind a URL to a specific function. Flask uses route decorators to register functions to specific URLs. For example, when a user navigates to the root (
/
) of our web app, index.html
is rendered.Let's take a look at one more example to hammer this home.
This code ensures that when a user navigates to
http://your-web-app.com/about
that the about.html
file is rendered.While these samples illustrate how to render html pages for a user, routes can also be used to call APIs when a button is pressed, or take any number of actions without having to navigate away from the homepage. You'll see this in action when you create routes for translation, sentiment, and speech synthesis.
Get started
- Open the project in your IDE, then create a file named
app.py
in the root of your working directory. Next, copy this code intoapp.py
and save:This code block tells the app to displayindex.html
whenever a user navigates to the root of your web app (/
). - Next, let's create the front-end for our web app. Create a file named
index.html
in thetemplates
directory. Then copy this code intotemplates/index.html
. - Let's test the Flask app. From the terminal, run:
- Open a browser and navigate to the URL provided. You should see your single page app. Press Ctrl + C to kill the app.
Translate text
Now that you have an idea of how a simple Flask app works, let's:
- Write some Python to call the Translator and return a response
- Create a Flask route to call your Python code
- Update the HTML with an area for text input and translation, a language selector, and translate button
- Write Javascript that allows users to interact with your Flask app from the HTML
Call the Translator
The first thing you need to do is write a function to call the Translator. This function will take two arguments:
text_input
and language_output
. This function is called whenever a user presses the translate button in your app. The text area in the HTML is sent as the text_input
, and the language selection value in the HTML is sent as language_output
.- Let's start by creating a file called
translate.py
in the root of your working directory. - Next, add this code to
translate.py
. This function takes two arguments:text_input
andlanguage_output
. - Add your Translator subscription key and save.
Add a route to app.py
Next, you'll need to create a route in your Flask app that calls
translate.py
. This route will be called each time a user presses the translate button in your app.For this app, your route is going to accept
POST
requests. This is because the function expects the text to translate and an output language for the translation.Flask provides helper functions to help you parse and manage each request. In the code provided,
get_json()
returns the data from the POST
request as JSON. Then using data['text']
and data['to']
, the text and output language values are passed to get_translation()
function available from translate.py
. The last step is to return the response as JSON, since you'll need to display this data in your web app.In the following sections, you'll repeat this process as you create routes for sentiment analysis and speech synthesis.
- Open
app.py
and locate the import statement at the top ofapp.py
and add the following line:Now our Flask app can use the method available viatranslate.py
. - Copy this code to the end of
app.py
and save:
Update index.html
Now that you have a function to translate text, and a route in your Flask app to call it, the next step is to start building the HTML for your app. The HTML below does a few things:
- Provides a text area where users can input text to translate.
- Includes a language selector.
- Includes HTML elements to render the detected language and confidence scores returned during translation.
- Provides a read-only text area where the translation output is displayed.
- Includes placeholders for sentiment analysis and speech synthesis code that you'll add to this file later in the tutorial.
Let's update
index.html
.- Open
index.html
and locate these code comments: - Replace the code comments with this HTML block:
The next step is to write some Javascript. This is the bridge between your HTML and Flask route.
Create main.js
The
main.js
file is the bridge between your HTML and Flask route. Your app will use a combination of jQuery, Ajax, and XMLHttpRequest to render content, and make POST
requests to your Flask routes.In the code below, content from the HTML is used to construct a request to your Flask route. Specifically, the contents of the text area and the language selector are assigned to variables, and then passed along in the request to
translate-text
.The code then iterates through the response, and updates the HTML with the translation, detected language, and confidence score.
- From your IDE, create a file named
main.js
in thestatic/scripts
directory. - Copy this code into
static/scripts/main.js
:
Test translation
Let's test translation in the app.
Navigate to the provided server address. Type text into the input area, select a language, and press translate. You should get a translation. If it doesn't work, make sure that you've added your subscription key.
Tip
If the changes you've made aren't showing up, or the app doesn't work the way you expect it to, try clearing your cache or opening a private/incognito window.
Press CTRL + c to kill the app, then head to the next section.
Analyze sentiment
The Text Analytics API can be used to perform sentiment analysis, extract key phrases from text, or detect the source language. In this app, we're going to use sentiment analysis to determine if the provided text is positive, neutral, or negative. The API returns a numeric score between 0 and 1. Scores close to 1 indicate positive sentiment, and scores close to 0 indicate negative sentiment.
In this section, you're going to do a few things:
- Write some Python to call the Text Analytics API to perform sentiment analysis and return a response
- Create a Flask route to call your Python code
- Update the HTML with an area for sentiment scores, and a button to perform analysis
- Write Javascript that allows users to interact with your Flask app from the HTML
Call the Text Analytics API
Let's write a function to call the Text Analytics API. This function will take four arguments:
input_text
, input_language
, output_text
, and output_language
. This function is called whenever a user presses the run sentiment analysis button in your app. Data provided by the user from the text area and language selector, as well as the detected language and translation output are provided with each request. The response object includes sentiment scores for the source and translation. In the following sections, you're going to write some Javascript to parse the response and use it in your app. For now, let's focus on call the Text Analytics API.- Let's create a file called
sentiment.py
in the root of your working directory. - Next, add this code to
sentiment.py
. - Add your Text Analytics subscription key and save.
Add a route to app.py
Let's create a route in your Flask app that calls
sentiment.py
. This route will be called each time a user presses the run sentiment analysis button in your app. Like the route for translation, this route is going to accept POST
requests since the function expects arguments.- Open
app.py
and locate the import statement at the top ofapp.py
and update it:Now our Flask app can use the method available viasentiment.py
. - Copy this code to the end of
app.py
and save:
Update index.html
Create Flask App
Now that you have a function to run sentiment analysis, and a route in your Flask app to call it, the next step is to start writing the HTML for your app. The HTML below does a few things:
- Adds a button to your app to run sentiment analysis
- Adds an element that explains sentiment scoring
- Adds an element to display the sentiment scores
- Open
index.html
and locate these code comments: - Replace the code comments with this HTML block:
Update main.js
In the code below, content from the HTML is used to construct a request to your Flask route. Specifically, the contents of the text area and the language selector are assigned to variables, and then passed along in the request to the
sentiment-analysis
route.The code then iterates through the response, and updates the HTML with the sentiment scores.
- From your IDE, create a file named
main.js
in thestatic
directory. - Copy this code into
static/scripts/main.js
:
Test sentiment analysis
Let's test sentiment analysis in the app.
Navigate to the provided server address. Type text into the input area, select a language, and press translate. You should get a translation. Next, press the run sentiment analysis button. You should see two scores. If it doesn't work, make sure that you've added your subscription key.
Tip
If the changes you've made aren't showing up, or the app doesn't work the way you expect it to, try clearing your cache or opening a private/incognito window.
Press CTRL + c to kill the app, then head to the next section.
Convert text-to-speech
The Text-to-speech API enables your app to convert text into natural human-like synthesized speech. The service supports standard, neural, and custom voices. Our sample app uses a handful of the available voices, for a full list, see supported languages.
In this section, you're going to do a few things:
- Write some Python to convert text-to-speech with the Text-to-speech API
- Create a Flask route to call your Python code
- Update the HTML with a button to convert text-to-speech, and an element for audio playback
- Write Javascript that allows users to interact with your Flask app
Call the Text-to-Speech API
Let's write a function to convert text-to-speech. This function will take two arguments:
input_text
and voice_font
. This function is called whenever a user presses the convert text-to-speech button in your app. input_text
is the translation output returned by the call to translate text, voice_font
is the value from the voice font selector in the HTML.- Let's create a file called
synthesize.py
in the root of your working directory. - Next, add this code to
synthesize.py
. - Add your Speech Services subscription key and save.
Add a route to app.py
Let's create a route in your Flask app that calls
synthesize.py
. This route will be called each time a user presses the convert text-to-speech button in your app. Like the routes for translation and sentiment analysis, this route is going to accept POST
requests since the function expects two arguments: the text to synthesize, and the voice font for playback.- Open
app.py
and locate the import statement at the top ofapp.py
and update it:Now our Flask app can use the method available viasynthesize.py
. - Copy this code to the end of
app.py
and save:
Update index.html
Now that you have a function to convert text-to-speech, and a route in your Flask app to call it, the next step is to start writing the HTML for your app. https://powerfulnitro227.weebly.com/ipad-data-recovery-software-mac.html. The HTML below does a few things:
- Provides a voice selection drop-down
- Adds a button to convert text-to-speech
- Adds an audio element, which is used to play back the synthesized speech
- Open
index.html
and locate these code comments: - Replace the code comments with this HTML block:
- Next, locate these code comments:
- Replace the code comments with this HTML block:
- Make sure to save your work.
Update main.js
In the code below, content from the HTML is used to construct a request to your Flask route. Specifically, the translation and the voice font are assigned to variables, and then passed along in the request to the
text-to-speech
route.The code then iterates through the response, and updates the HTML with the sentiment scores.
- From your IDE, create a file named
main.js
in thestatic
directory. - Copy this code into
static/scripts/main.js
: - You're almost done. The last thing you're going to do is add some code to
main.js
to automatically select a voice font based on the language selected for translation. Add this code block tomain.js
:
Test your app
Let's test speech synthesis in the app.
Navigate to the provided server address. Type text into the input area, select a language, and press translate. You should get a translation. Next, select a voice, then press the convert text-to-speech button. the translation should be played back as synthesized speech. If it doesn't work, make sure that you've added your subscription key.
Tip
If the changes you've made aren't showing up, or the app doesn't work the way you expect it to, try clearing your cache or opening a private/incognito window.
That's it, you have a working app that performs translations, analyzes sentiment, and synthesized speech. Press CTRL + c to kill the app. Be sure to check out the other Azure Cognitive Services.
Get the source code
The source code for this project is available on GitHub.