Because i want to create realtime face and voice recognition to lock the door using flask web app with ludwig toolbox. If i click the record button the webpage will record my voice for 1 sec and after that my voice will get predicted and display the data as table or dict.
So my question is how to display my predict voice as table or dict to webpage (HTML) without reload the page because if i reload the page my face recognition program will getting reload too and make my program start from beginning.
Python file
from flask import Flask, render_template
from threading import Timer
import webbrowser
import speech_recognition as sr
from ludwig.api import LudwigModel
to_predict={"audio_path":["C:/Users/Laptop/Desktop/TUGAS_AKHIR/Fix_ludwig_project/Uploads/speech.wav"]}
# load the model
model_path = "results/experiment_run/model"
model = LudwigModel.load(model_path)
def execute():
result = model.predict(data_dict=to_predict)
if (result['label_predictions'] == ['Dwi'] ).any():
print ('Door Open')
z = "DOOR OPEN"
alhasil = z
return alhasil
else :
print ('Door Lock')
y = "DOOR LOCK"
alhasil = y
return alhasil
def speech():
with mic as source:
while True :
audio = r.record(source, duration=1)
try:
with open('Uploads\speech.wav', 'wb') as f:
f.write(audio.get_wav_data())
result = model.predict(data_dict=to_predict)
print(result["label_predictions"])
hasil= result.to_html()
execute()
return hasil
except ValueError:
print ('Programe error')
r = sr.Recognizer()
mic = sr.Microphone()
app=Flask(__name__)
@app.route('/')
def home():
return render_template("spchrecog.html")
@app.route('/record/')
def record():
return render_template("spchrecog.html", hasil=speech(), alhasil=execute())
def open_browser():
webbrowser.open_new('http://127.0.0.1:5000/')
if __name__ == "__main__":
Timer(0.5,open_browser).start();
app.run(port=5000)
HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Voice Recognition Ludwig</title>
<style>
a{
margin:0% 44%;
}
body{
background-image:url({{url_for("static",filename="templates/back.jpg")}});
width:auto;
}
img{
border: 4px solid black;
border-radius:130px;
width:10%;
height:10%;
}
.p1 {
color:rgb(0, 0, 0);
text-align:center;
font-size:25px;
font-family:"Lucida Console", Courier, monospace;
font-weight:bold;
}
.p2 {
color:rgb(0, 0, 0);
text-align:center;
font-size:40px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
}
div {
width: 500px;
height: 500px;
background: rgb(255, 255, 255);
position: relative;
animation-name: mymove;
animation-duration: 5s;
animation-fill-mode: forwards;
}
@keyframes mymove {
from {left: 0px;}
to {left: 500px;}
}
</style>
</head>
<body>
<p class="p1">VOICE RECOGNITION WITH LUDWIG</p>
<br><br>
<a href="/record/"><img src="{{url_for("static",filename="images.png")}}"></a><br>
<br>
<hr>
{% if hasil %}
<h2> Hasilnya adalah : </h2>
{{ hasil | safe }}
{% endif %}
<br>
<hr>
<div>
<p class="p2"> {{ alhasil }} </p>
</div>
</body>
</html>
