5

FlaskCaption - Basic Flask Project

 3 years ago
source link: https://dev.to/star_trooper/flaskcaption-basic-flask-project-p03
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
Cover image for FlaskCaption - Basic Flask Project

FlaskCaption - Basic Flask Project

Jul 20

惻2 min read

Pre-requisites:

  • 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 (app.py), a templates directory and static directory and inside static directory create styles directory.

Part 3: Coding:

  1. Open the app.py file and enter the following code:

Code app.py:

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 ":
    app.run(debug=True, threaded=True)
Enter fullscreen modeExit fullscreen mode

2.Create index.html file in templates directory:

Code index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <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')}}">
</head>
<body>
    <header>FlaskCaption</header>
    <div id="mainContainer">
        <h2>Upload Audio File</h2>
        <form method="post" enctype="multipart/form-data">
           <input type="file" name="file" id="fileinput">
           <br>
           <input type="submit" id="submitButton" value="Process"/>

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

    </div>
</body>
</html>
Enter fullscreen modeExit fullscreen mode

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

Code style.css:


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

}

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

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

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

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

#submitButton:hover{
    cursor: pointer;
}
Enter fullscreen modeExit fullscreen mode

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

flask run
Enter fullscreen modeExit 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.

Resources
Github Repository
Flask Doc
SpeechRecognition Doc


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK