基于docker与Flask的语音助手网页版

1.docker的基本启用方法

# 导入docker
docker import webv2.zip webv2
# 启动docker
docker run -it --name test --privileged -p 5000:5000 -p 443:443 -p 80:80 webv2 /bin/bash

2.启动

cd work
python control.py

效果图如下，录制是语音识别功能，合成键会合成语音，下面还有个播放条

3.自定义自己的API接口

更改/work/control中的星火api接口id与key

# 星火大模型全局变量
# 以下密钥信息从控制台获取
appid = "##########  # 填写控制台中获取的 APPID 信息
api_secret = "###############"  # 填写控制台中获取的 APISecret 信息
api_key = "####################"  # 填写控制台中获取的 APIKey 信息
domain = "general"  # v1.5版本
# domain = "generalv2"    # v2.0版本
Spark_url = "ws://spark-api.xf-yun.com/v1.1/chat"  # v1.5环境的地址
# Spark_url = "ws://spark-api.xf-yun.com/v2.1/chat"  # v2.0环境的地址
text = []
# 先只实现合成助手最后一句话的语音

修改之后即可运行

4.自定义网页界面

通过修改/work/templates/index.html可以更改网页布局

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>My test page</title>
    <link href="static/images/icon.png" rel="shortcut icon">
    <!-- <link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css"> -->
    <link href="static/style.css" rel="stylesheet" src="staticstyle.css">
    <script src="static/script.js"></script>
</head>
<body>
    <div id="top">
        <div class="topbar">
            <img src="staticimageslogo.png" >
        </div>
    </div>
    <div class="nav">
        <div class="navbg">
            <ui class="navmenu">
                <li><a href="https://www.hutb.edu.cn/">学校官网</a></li>
                <li><a href="https://www.hutb.edu.cn/p222/xxgk.html">学校概况</a></li>
                <li><a href="https://www.hutb.edu.cn/p222/jgsz.html">机构设置</a></li>
                <li><a href="">语音识别</a></li>
                <li><a href="">语音合成</a></li>
                <li><a href="">语音助手</a></li>
                <li><a href="">联系我们</a></li>
                <li><a href="">其他功能</a></li>
            </ui>
        </div>
      </div>
    <div class="pic">
        <img src="static/images/1.jpg" class="center" width="1150" height="344" >
    </div>
    <div class="main">

      <div class="chat-container">
      </div>

      <div class="input-container">
        <input type="text" id="messageInput" placeholder="输入消息">
        <button id="sendButton" onclick="sendMessage()">发送</button>
        <div class="buttons">
            <button id="recordVoice" onclick="zongkaiguan()">录制</button>
            <button id="stopv" onclick="stopRecording()">停止</button>
            <button id="synthesis" onclick="syntheies_voice()">合成</button>
        </div>
      </div>
        <audio id="audioPlayer" controls></audio>
    </div>
</body>

通过更改 /work/static下的sript.js与style.css可以实现一些功能与美化页面

5. 实现自己的功能

@app.route('/process-audio', methods=['POST'])
def process_audio():
    s = recognizer.create_stream()  # to do 添加标点符号
    print("get")
    # result  = ""
    # 处理接收到的音频数据
    # audio_data = request.stream.read()
    audio_file = request.files['audio']
    audio_file.save("audio.wav")
    # process = subprocess.Popen(
    #     ffmpeg_cmd, stdout=subprocess.PIPE, stderr=subprocess.DEVNULL
    # )
    # frames_per_read = 1600
    # data = process.stdout.read(frames_per_read * 2)
    # if not data:
    #     break

    # samples = np.frombuffer(data, dtype=np.int16)
    # samples = samples.astype(np.float32) / 32768
    samples, sr = librosa.load("audio.wav")  ##改为audio1为你好测试
    s.accept_waveform(sr, samples)
    # audio = AudioSegment.from_file("audio.wav", format='webm')
    # # 导出音频为WAV格式
    # audio.export("audio.wav", format='wav')
    # samples, sample_rate = read_wave("audio.wav")
    # s.accept_waveform(sample_rate, samples)
    recognizer.decode_stream(s)
    result = s.result.text
    print(result)
    return result

相对应的sript.js代码块

function startRecording() {
    // 创建 MediaRecorder 对象
    const options = {
        audioBitsPerSecond: 44100  // 设置采样率为44.1kHz
    };
    mediaRecorder = new MediaRecorder(stream, options);
    // mediaRecorder = new MediaRecorder(stream);

    // 监听数据可用事件，将音频数据块存储到数组中
    mediaRecorder.addEventListener('dataavailable', function(event) {
        audioChunks.push(event.data);
    });

    // 监听录制停止事件，将音频数据流发送到后端进行处理
    mediaRecorder.addEventListener('stop', function() {
        // 创建 Blob 对象
        const audioBlob = new Blob(audioChunks);

        // 创建 FormData 对象，并将音频数据添加到其中
        const formData = new FormData();
        formData.append('audio', audioBlob);

        // 发送音频数据到后端（使用fetch）
        fetch('/process-audio', {
            method: 'POST',
            body: formData
        })
            .then(function(response) {
                console.log('音频数据已发送到后端');
                return response.text()
                // const result = await promiseObject;
                // console.log(result); // 打印结果："你好"
            })
            .then(function(textResponse) {
                console.log(textResponse);
                const resultTextarea = document.getElementById("messageInput");
                resultTextarea.value = textResponse;
                // return textResponse.text();
            })
            .catch(function(error) {
                console.error('发送音频数据时发生错误:', error);
            });

        // 将录制的音频数据转换为URL并在页面上播放
         audioURL = URL.createObjectURL(audioBlob);
         audioPlayer = document.getElementById('audioPlayer');
         audioPlayer.src = audioURL;

        // 重置音频数据数组
        audioChunks = [];
    });

对着写就行，JavaScript这种基础的脚本也可以问问大模型

参考项目：

sherpa-onnx 我原称之为最好用的开源语音库

paddlespeech 除了有点笨重，也还好用

本项目大模型部分基于星火大模型api

docker 镜像网盘连接：链接：https://pan.baidu.com/s/1sbYeP_7stXgMdnQjZ3wSwg?pwd=t1d3 提取码：t1d3