Improve Customer Support with AI-powered Voice Services
Unlock the power of Flask and revolutionize the way you deploy machine learning models!
Interested in building this app yourself? Click here to build this app step-by-step with the following CognitiveClass.ai Guided Project.
These days, many organizations are implementing AI to minimize the costs of repetitive and routine tasks that can be performed by technology while maximizing the talent of their human resources. By removing such repeating tasks from human workers’ responsibilities, AI frees workers to move to higher-value and complex tasks that technology can’t handle.
Yet, training AI can be a bit of a challenge for most companies. It takes time, knowledge, and expertise to do it properly, but don’t let that stop you. IBM Research has got you covered. They’ve recently added three new software libraries to their collection of embeddable AI solutions. These tools can be smoothly integrated into enterprise applications, making it easy to tackle a variety of tasks.
We will take a straightforward approach to show you how to use Flask to connect the machine-learning models you set up in Python connect with HTML, so anyone can interact with them through an excellent user interface and know what you have accomplished. Perfect for developers with experience in Python and HTML, but struggling to implement ML models in their applications. Bridge the gap and take your business to the next level with this easy-to-follow project!
Before diving in, let’s get a better idea of what kind of app we will build by placing an order on this pizza app.
What is Embeddable AI?
Embeddable AI refers to artificial intelligence (AI) systems that can be integrated into other software or hardware systems. These AI systems can be used to provide additional functionality, such as natural language processing, image recognition, or decision-making capabilities. AI can be embedded into mobile devices, websites, robots, and other types of systems. This allows developers to enhance the capabilities of their systems without having to build all of the AI functionality from scratch. This way, Embeddable AI can be used to enhance the user experience, automate processes, and make systems more efficient. You can learn more about Embeddable AI in the Watson Libraries.
How Flask Links Python & HTML?
Before we build an app, we need to know what experience we want to bring to audience. Let’s map out the flow of this app as shown in the figure below:
As we can see, we’ll need 3 pages to gather the user’s information, 2 pages to make sure our AI correctly understands the words from the recording, and 1 page to display the order details.
Therefore, the project directory will be shown as follow:
In this project, app.pywill be the key file where we can link Python logic and display the results in our app. First, let’s declare the library we will use.
from helperFunctions import *
from flask import Flask, render_template, request, flash, redirect, Response, url_for
app = Flask(__name__)Functional Pages
First of all, let’s focus on our first page, which is also the home page of our app — the main.html. We can navigate to this page using the render_template() function. Keep in mind that there’s no preprocessing needed before entering the home page. Yet, to ensure our app can be rerun every time we open this app, we will process some code to delete all the audio files in the current path and reset the global variables.
You’ll also notice that this function and all the other functions have a line of code above them: @app.route("/", methods=[]). It is a decorator in the Flask web framework that is used to map a specific URL route to a function. The function that follows the decorator is called when the specified route is requested. The app.route decorator takes one or more arguments, which are the URLs that should be mapped to the function. Furthermore, you can also define routes with specific methods like POST or GET.
@app.route("/")
def root():
global language, raw_address, customer_address, raw_order, pizza_size, pizza_topping, play_audio
language, raw_address, customer_address, raw_order, pizza_size, pizza_topping, play_audio = None, None, None, None, None, None, None
# remove the existing files in the folder
file = ["info.wav", "info_record.wav", "info_repeat.wav", "topping.wav", "topping_record.wav", "topping_repeat.wav", "order.wav"]
for i in file:
bash_command = str("find . -path \*/" + i + " -delete")
os.system(bash_command)
return render_template("main.html")Now we can move on to the page where we gather and save the customer’s information. In line 5, you’ll see we’ll use request.form[] to save the language choice that the customer wants to use in this app.
This code plays a crucial role in bridging the gap between user feedback in HTML and Python. You’ll notice at the beginning, there’s an import statement for from flask import Flask, render_template, request, flash, redirect, Response, url_for. This tells us that request.form is a dictionary in the Flask web framework that we can use to access data submitted in a POST request. It holds key-value pairs of form data sent from the client to the server. For instance, in main.html, we want to capture which language package the customer chooses. So, we provide a list of options and save the selected value under <select id="voice" name="voice">. In Python, we use request.form["voice"] to retrieve this value stored in the HTML.
Then, we’ll keep the audio name so we can play it once the customer enters the getInfo.html page. After that, we can use the text_to_speech function to get the audio output from embeddable AI.
@app.route("/get_info", methods=["POST"])
def get_info():
global language, play_audio
if not language:
language = request.form["voice"]
play_audio = "info.wav"
result = "Welcome to La AI Pizza Plaza, how's it going? Where should we send your delicious pizza order to?"
text_to_speech(result, play_audio, language)
return render_template("getInfo.html")Similar to the get_info, we will change our introduction, update a new audio name to the play_audio variable, and navigate to getTopping.html page.
@app.route("/get_topping", methods=["POST"])
def get_topping():
global play_audio
play_audio = "topping.wav"
result = "At La AI Pizza Plaza, we offer a mouth-watering selection of giant, large, and medium pizzas, piled high with 8 delectable toppings to choose from. " \
"See the options in the picture below and indulge in the perfect pizza for you!"
text_to_speech(result, play_audio, language)
return render_template("getTopping.html")Checking Pages
The setup is similar to the Functional Pages, but in the Checking Pages, we’ll clean up the information we gathered from the recording by using the clean_text function. In the get_info_redirect(), we’ll save the cleaned customer delivery information in the customer_address variable. Take note, in the return, there’s this line of code customerAddress=customer_address. This sends the value in customer_address to the customerAddress variable so we can display the results in HTML.
@app.route("/get_info_redirect", methods=["GET", "POST"])
def get_info_redirect():
global customer_address, play_audio
customer_address = clean_text(raw_address) # clean the stop words from audio files
play_audio = "info_repeat.wav"
result = "Just want to confirm, did ya ask for the pizza to be dropped off at " + customer_address + \
"? If not, no worries, just give the recording again button a tap."
text_to_speech(result, play_audio, language)
return render_template("getInfoRedirect.html", customerAddress=customer_address)Just like with the get_info_redirect(), we’ll be doing some pre-processing on the information we’ve gathered in the checking pages. In get_topping_redirect(), we’ll be using the clean_text() function to clean up the information from the recording, and then using the get_keywords() function to extract the keywords and save the order details in the pizza_size and pizza_topping variables.
@app.route("/get_topping_redirect", methods=["GET", "POST"])
def get_topping_redirect():
global pizza_size, pizza_topping, play_audio
clean_order = clean_text(raw_order) # clean the stop words from audio files
pizza_size, pizza_topping = get_keywords(clean_order)
play_audio = "topping_repeat.wav"
result = "Just wanted to make sure, did ya order a " + pizza_size[0] + " pizza with: " + " ".join(map(str, pizza_topping)) + \
" on it? If not, no worries, just give the recording again button another press."
text_to_speech(result, play_audio, language)
return render_template("getToppingRedirect.html", pizzaSize=pizza_size[0], pizzaTopping=pizza_topping)Result Page
Last but not least, we can finally save all the information we’ve collected and transform it into a Wav audio using the text_to_speech function. We’ll also send the value back to the HTML so we can display the final result.
@app.route("/get_order", methods=["POST"])
def get_order():
global play_audio
play_audio = "order.wav"
if not customer_address:
print("missing address")
elif not pizza_size:
print("missing pizza size")
order_size = ["Not defined"]
elif not pizza_topping:
print("missing pizza topping")
result = str("Thanks for using the La AI Pizza Plaza to place your order. Just wanted to double check that I got it right, ya want a " +
pizza_size[0] + " pizza with " + " ".join(map(str, pizza_topping)) + ". And the delivery address is " + customer_address +
", is that correct?")
text_to_speech(result, play_audio, language)
return render_template("getOrder.html", customerAddress=customer_address, orderSize=pizza_size[0], orderTopping=pizza_topping)That’s it!
Yet, don’t stop reading now! This hands-on only introduces the methods to link your HTML with Python. Uncover the secret of implementing embeddable AI APIs in your app and editing the HTML themes in this comprehensive and free CognitiveClass.ai Guided Project. Let’s upgrade your knowledge today.
Feel free to connect with me on LinkedIn as well!
