Comment connecter le microphone du navigateur dans mon application flask ?

Question

J'utilise le module de reconnaissance vocale pour identifier une requête de recherche par la voix et ensuite ouvrir une page google chrome montrant le résultat de la requête. En fait, il s'agit d'un remplacement de la recherche vocale de Google, mais elle est lancée par le terminal. Mais je veux en faire une application web. J'ai créé l'application Flask :

-Recherche(répertoire)

-search.py (opens a tab using terminal directly/works independently)

-app.py (main flask app)

-static(directory)

-templates (directory)

Mais comme l'application est hébergée sur le serveur, mon search.py prend l'entrée du micro du serveur (dans ce cas, c'est le micro de mon PC/ mais sur AWS, cela ne fonctionnera pas). Comment puis-je prendre les données du navigateur du client et les utiliser dans speech.py ? Dois-je supprimer ce fichier et l'utiliser directement dans mon application principale ? Quel est le moyen le plus efficace d'exécuter cette fonctionnalité ?

Voici mon search.py script si quelqu'un veut savoir : Ça fonctionne via le terminal.

import subprocess

import speech_recognition as sr

browser_exe_path = "..."

r=sr.Recognizer()
with sr.Microphone() as source:
    print("Listening!")
    audio=r.listen(source)

    try:
        s_name=r.recognize_google(audio)
        """
        Code to open browser and search the query
        """
    except:
        print("Error!")

Answer 1

Ces deux-là seraient probablement les meilleurs moyens :

• créer un module/package de votre propre outil de reconnaissance vocale et l'importer dans votre application flask
• intégrer la fonctionnalité elle-même dans l'application.

Si vous prévoyez de l'utiliser à nouveau, il peut être judicieux de séparer la reconnaissance vocale de l'application Web, car vous pourrez alors la réutiliser. Mais vous pouvez la personnaliser beaucoup plus si vous l'intégrez, par exemple, aux fonctions de vue de votre application. De plus, vous devriez probablement mettre toute votre logique search.py dans une fonction ou une classe, afin de pouvoir l'appeler. Sinon, si vous l'importez tel qu'il est maintenant, il s'exécutera immédiatement.

Dans tous les cas, vous avez besoin d'une structure de discours qui ressemble à ceci :

1. L'utilisateur soumet un discours, soit en direct, soit enregistré, soit sous forme de fichier. Nous appellerons ce fichier vocal speech.wav (ou tout autre type de fichier, à votre choix)
2. speech.wav est lu et analysé par votre outil de reconnaissance vocale. Il peut renvoyer une liste de mots, ou simplement une chaîne de caractères. Nous appellerons cela output .
3. output est renvoyé à la page web et rendu sous forme de texte lisible par l'utilisateur.

Je vous suggère de commencer par la soumission d'un formulaire et si vous arrivez à le faire fonctionner, vous pouvez essayer une reconnaissance vocale en direct avec AJAX. Commencez de manière basique et demandez simplement à l'utilisateur d'ajouter un fichier audio ou d'en enregistrer un. Le script suivant ouvrira le navigateur de fichiers si vous êtes sur le bureau, ou fera en sorte que l'utilisateur enregistre si vous êtes sur iOS ou Android.

  <input name="audio-recording" type="file" accept="audio/*" id="audio-recording" capture>
  <label for="audio-recording">Add Audio</label>

  <p id="output"></p>

Donc une fois qu'ils ont un fichier là, vous devez y accéder. Vous pouvez vouloir le personnaliser, mais voici un script de base qui prendra le contrôle de l'audio ci-dessus. Le crédit pour ce script va aux développeurs de google.

<script>
  const recorder = document.getElementById('audio-recording');

  recorder.addEventListener('change', function(e) {
    const file = e.target.files[0];
    const url = URL.createObjectURL(file);
    // Do something with the audio file.

  });
</script>

Où il est dit // Do something with the audio file Dans ce cas, ce serait une bonne idée de faire une requête AJAX GET, qui renverrait la phrase. Mais c'est là que ça devient vraiment délicat, parce que vous devez donner les informations à flask en arguments, et non en fichier audio. Mais parce que nous avons stocké l'endroit où le fichier existe à la constante url dans notre script, nous pouvons l'utiliser comme argument, par exemple :

from flask import request, jsonify
import search # this is your own search.py that you mentioned in your question.

@app.route("/process_audio")
def process_audio():
    url = request.args.get("url")
    text = search.a_function(url) #returns the text from the audio, which you've done, so I've omitted code
    if text != None
        return jsonify(result="success",text=text)
    else:
        return jsonify(result="fail")

Il renvoie les données dans un format appelé JSON, qui est comme un pont entre le js côté client et le python côté serveur. Cela pourrait ressembler à quelque chose comme ça :

{
 "result":"success",
 "text":"This is a test voice recording"
}

Ensuite, vous devez disposer de jQuery (ou de toute autre bibliothèque js, mais jQuery est agréable et facile) pour gérer l'appel AJAX :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type=text/javascript>
        const recorder = document.getElementById('audio-recording');

  recorder.addEventListener('change', function(e) {
    const file = e.target.files[0];
    const url = URL.createObjectURL(file);
    $.getJSON('/process_audio', {
          url: url 
        }, function(data) {
          $("#output").text(data.text);
            });
            return false;

    </script>

Toutes mes excuses pour les erreurs de mise entre parenthèses. Donc, cela devrait envoyer une requête GET pour du JSON à l'URL "/audio_process", qui retournera ce que nous avons vu plus tôt, et ensuite il sortira le fichier "text" du JSON au "#output" Sélecteur HTML.

Il peut être nécessaire de déboguer un peu, mais cela semble faire l'affaire.