DEV Community

Cover image for FlaskCaption - Basic Flask Project
Atharva Shirdhankar
Atharva Shirdhankar

Posted on

FlaskCaption - Basic Flask Project


  • Python 3 or higher.
  • Flask
  • Html and CSS
  • Editor - VSCode / PyCharm

Part 1: Dependencies Installation
Open terminal and install the following dependencies.
Commands :

  1. pip install flask
  2. pip install SpeechRecognition

Part 2: Setting-Up Project

  • Now create a folder give it anyname. Here, I have given folder name as Flaskproject.

  • Now, open the empty folder in VSCode or PyCharm IDE(I preferred VSCode).

  • Inside the empty folder we have to create a python file (, a templates directory and static directory and inside static directory create styles directory.

Part 3: Coding:

  1. Open the file and enter the following code:


from flask import Flask, render_template , request , redirect
import speech_recognition as sr

app = Flask(__name__)

@app.route("/", methods=["GET","POST"])
def index():
    transcript = ''
    if request.method == "POST":
         print("FORM DATA RECEIVED")

         if "file" not in request.files:
              return redirect(request.url)

         file = request.files["file"]
         if file.filename == "":
             return redirect(request.url)

         if file:
             recognizer = sr.Recognizer()  
             wavfile = sr.AudioFile(file)
             with wavfile as source:
                 data = recognizer.record(source)
             transcript = recognizer.recognize_google(data, key=None)

    return render_template('index.html' , transcript = transcript)

if __name__ == " main ":, threaded=True)
Enter fullscreen mode Exit fullscreen mode

2.Create index.html file in templates directory:

Code index.html:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FlaskProject - AudiotoText</title>
    <link rel="stylesheet" href="{{url_for('static', filename='styles/style.css')}}">
    <div id="mainContainer">
        <h2>Upload Audio File</h2>
        <form method="post" enctype="multipart/form-data">
           <input type="file" name="file" id="fileinput">
           <input type="submit" id="submitButton" value="Process"/>

        {% if transcript != "" %}
        <div class="speechTranscriptContainer">
            <h1>Transcripted Text</h1>
        {% endif %}

Enter fullscreen mode Exit fullscreen mode

3.Create a styles.css file inside static/styles directory:

Code style.css:

    margin: 0;
    padding: 0;
    background-color: aliceblue;


h1, p , input{
    font-family: cursive;

    display: flex;
    justify-content: center; 
    font-size: 50px;
    font-family: Georgia, 'Times New Roman', Times, serif;

    display: flex;
    align-items: center;
    flex-direction: column;
    border-radius: 10px;
    background-color: white;
    margin-top: 15%;   

    background-color: #0191FE;
    color: white;
    border: none;
    border-radius: 10px;
    margin-top: 10px;
    margin-left: 30%;
    padding: 10px;   

    cursor: pointer;
Enter fullscreen mode Exit fullscreen mode

Part 4: Execution
To run the flask webapp we need one command

flask run
Enter fullscreen mode Exit fullscreen mode


This command will run our flask webapp locally on port number 5000 by default.

Part 5: Output


Part 6: Final File Structure:

Some Pros of the Project:

  • The accuracy of converting the Audio(Speech) to convert text is almost 92%

Some Cons of the Project:

  • The project only take .wav file as a input.

Github Repository
Flask Doc
SpeechRecognition Doc

Top comments (2)

akionsight profile image

Well yeah its good, but I wouldn't call copying and pasting code as a "project"

star_trooper profile image
Atharva Shirdhankar

I have not added explaination for this blog I know it's incomplete without it.
I'll edit this blog soon.