Build a simple web app with Python, Flask, and Termux.
In my first article, I wrote about how we can create the simplest structure of the web app server on our android devices. In this article, I want to take you even further by building a web-based app that shall run on your android phone. The app will be a simple Flask server that accepts a text and converts that text to speech. The UI is a simple form with an input and a button, we will use this form to send the text to the server.
This article assumes you have some basic knowledge of Termux and Python because I won’t cover that part in this article.
- First Make sure Termux and Python are installed on your phone. If you have no idea how to get it done, kindly check my previous tutorial.
- Open Termux and run
pkg install vimon your Termux terminal to install vim. We will use it as the text editor to edit our python file.
- After vim has finished installing run
pkg install termux-apito install the Termux API package. We will use one of this package API in our project, the package is called termux-tts-speak read more about it here.
- Create a virtual environment by running
python3 -m venv text-to-speech
- Run
source text-to-speech/bin/activateto activate the virtual environment we just created.
- Run
pip install flaskto install/add Flask virtual environment.
- After Flask has finished installing, run
touch run.pyto create a file called run.py. You canlsand notice there is a new file called run.py created.
You can just clone the repo using git. Git is installed the same way as vim, just run pkg install git.
After git has installed clone the repo by running git clone https://github.com/Gidraf/Text-to-speech.git
- Run
vim run.pyto open the file we have just created. Here is where we will write all the code to convert text to speech using an android tts engine with the help of the Termux API.
- Tap letter
ion your keyboard to change the mode of the vim editor to edit/insert and copy and paste the code below to your vim editor.
import subprocess
from flask import Flask,request, render_templateapp = Flask(__name__)@app.route('/',methods=["GET","POST"])
def playsound():
if request.method == 'GET':
return '''<!DOCTYPE html> <html> <link rel="stylesheet" href="static/style.css"> <body> <form action="/" method="POST" style="border:1px
solid #ccc"> <div class="container"> <h1>Play sound</h1> <hr> <input id="text" type="text" placeholder="Text to play" name="text" required> <button type="submit" class="signupbtn">Play</button> </div> </div> </form>
</body>'''
text = request.values.get("text")
MyOut = subprocess.call(f'''termux-tts-speak {text}''', shell=True)
return '''<!DOCTYPE html> <html> <link rel="stylesheet" href="static/style.css"> <body> <form action="/" method="POST" style="border:1px
solid #ccc"> <div class="container"> <h1>Play sound</h1> <hr> <input id="text" type="text" placeholder="Text to play" name="text" required> <button type="submit" class="signupbtn">Play</button> </div> </div> </form>
</body>'''if __name__ =='__main__':
app.run(debug=True)
Let me explain the code above:-
First, we are importing the modules which are Flask and subprocess. The Flask package is to build the server to communicate with the browser, while the subprocess is used to run the terminal command on the Termux terminal. We are also initializing Flask class and route to home
‘/’. The route accepts two methods which areGETandPOSTit also has got a function that checks if the request method isGETor not if the method is GET, we are returning the HTML string while if it’s not we are processing the text to speech logic and returning the same HTML string. This is a simple implementation of Flask server app. If you are new to Flask I would advise you to read more about it here.
- Once done tap
ESCbutton on top of your keyboard - Run
python run.pyto start the flask server.
- Now navigate to your browser on URL localhost:5000 and notice the edit text field and a button type anything and press play button. Wait for the server to respond it may take a while since android tts engine needs to be started first
Congratulation you have just build a functional web app on your phone. If you would like to receive more of this kindly follow me or subscribe to my youtube channel. Thanks for reading.
