{"id":10020416,"date":"2024-11-25T09:45:34","date_gmt":"2024-11-25T01:45:34","guid":{"rendered":"https:\/\/itmax.cn\/?p=10020416"},"modified":"2024-11-25T09:45:34","modified_gmt":"2024-11-25T01:45:34","slug":"web-%e7%ab%af%e8%af%ad%e9%9f%b3%e5%af%b9%e8%af%9d-ai-%e7%a4%ba%e4%be%8b%ef%bc%9a%e4%bd%bf%e7%94%a8-whisper-%e5%92%8c-llama-cpp-%e6%9e%84%e5%bb%ba%e8%af%ad%e9%9f%b3%e8%81%8a%e5%a4%a9%e6%9c%ba%e5%99%a8","status":"publish","type":"post","link":"https:\/\/itmax.cn\/?p=10020416","title":{"rendered":"Web \u7aef\u8bed\u97f3\u5bf9\u8bdd AI \u793a\u4f8b\uff1a\u4f7f\u7528 Whisper \u548c llama.cpp \u6784\u5efa\u8bed\u97f3\u804a\u5929\u673a\u5668\u4eba"},"content":{"rendered":"

\u5927\u8bed\u8a00\u6a21\u578b\uff08LLM<\/code>\uff09\u4e3a\u57fa\u4e8e\u6587\u672c\u7684\u5bf9\u8bdd\u63d0\u4f9b\u4e86\u5f3a\u5927\u7684\u80fd\u529b\u3002\u90a3\u4e48\uff0c\u80fd\u5426\u8fdb\u4e00\u6b65\u6269\u5c55\uff0c\u5c06\u5176\u8f6c\u5316\u4e3a\u8bed\u97f3\u5bf9\u8bdd\u7684\u5f62\u5f0f\u5462\uff1f\u672c\u6587\u5c06\u5c55\u793a\u5982\u4f55\u4f7f\u7528 Whisper<\/code> \u8bed\u97f3\u8bc6\u522b\u548c llama.cpp<\/code> \u6784\u5efa\u4e00\u4e2a Web \u7aef\u8bed\u97f3\u804a\u5929\u673a\u5668\u4eba\u3002<\/p>\n

\u7cfb\u7edf\u6982\u89c8<\/h2>\n

\"\"<\/p>\n

\u5982\u4e0a\u56fe\u6240\u793a\uff0c\u7cfb\u7edf\u7684\u5de5\u4f5c\u6d41\u7a0b\u5982\u4e0b\uff1a<\/p>\n

    \n
  1. \u7528\u6237\u901a\u8fc7\u8bed\u97f3\u8f93\u5165\u3002<\/li>\n
  2. \u8bed\u97f3\u8bc6\u522b\uff0c\u8f6c\u6362\u4e3a\u6587\u672c\u3002<\/li>\n
  3. \u6587\u672c\u901a\u8fc7\u5927\u8bed\u8a00\u6a21\u578b\uff08LLM<\/code>\uff09\u751f\u6210\u6587\u672c\u54cd\u5e94\u3002<\/li>\n
  4. \u6700\u540e\uff0c\u6587\u672c\u8f6c\u8bed\u97f3\u64ad\u653e\u7ed3\u679c\u3002<\/li>\n<\/ol>\n

    \u7cfb\u7edf\u5b9e\u73b0<\/h2>\n

    \u7aef\u4fa7\u7684\u5177\u4f53\u5f62\u6001\uff08\u5982 web \u7aef\u3001\u684c\u9762\u7aef\u3001\u624b\u673a\u7aef\uff09\u76f4\u63a5\u5f71\u54cd\u4e86\u7b2c\u4e00\u6b65\u7528\u6237\u8bed\u8a00\u7684\u8f93\u5165\uff0c\u4ee5\u53ca\u6700\u540e\u4e00\u6b65\u54cd\u5e94\u7ed3\u679c\u7684\u8bed\u97f3\u64ad\u653e\u3002
    \u5728\u672c\u6587\u4e2d\uff0c\u6211\u4eec\u9009\u62e9\u4f7f\u7528 Web \u7aef\u4f5c\u4e3a\u793a\u4f8b\uff0c\u5229\u7528\u6d4f\u89c8\u5668\u672c\u8eab\u7684\u8bed\u8a00\u91c7\u96c6\u548c\u8bed\u97f3\u64ad\u653e\u529f\u80fd\uff0c\u6765\u5b9e\u73b0\u7528\u6237\u4e0e\u7cfb\u7edf\u7684\u4e92\u52a8\u3002<\/p>\n

    \u4e0b\u56fe\u5c55\u793a\u4e86\u7cfb\u7edf\u67b6\u6784\uff1a<\/p>\n

    \"\"<\/p>\n

    \u7528\u6237\u901a\u8fc7 Web \u7aef\u4e0e\u7cfb\u7edf\u4ea4\u4e92\uff0c\u8bed\u97f3\u6570\u636e\u901a\u8fc7 WebSocket<\/code> \u4f20\u8f93\u5230\u540e\u7aef\u670d\u52a1\uff0c\u540e\u7aef\u670d\u52a1\u4f7f\u7528 Whisper<\/code> \u5c06\u8bed\u97f3\u8f6c\u6362\u4e3a\u6587\u672c\uff0c\u63a5\u7740\u901a\u8fc7 llama.cpp<\/code> \u8c03\u7528 LLM<\/code> \u751f\u6210\u6587\u672c\u54cd\u5e94\uff0c\u6700\u540e\uff0c\u6587\u672c\u54cd\u5e94\u901a\u8fc7 WebSocket<\/code> \u53d1\u9001\u56de\u524d\u7aef\uff0c\u5e76\u5229\u7528\u6d4f\u89c8\u5668\u7684\u8bed\u97f3\u64ad\u653e\u529f\u80fd\u5c06\u5176\u6717\u8bfb\u51fa\u6765\u3002<\/p>\n

    Web \u7aef<\/h3>\n

    Web \u7aef\u7684\u5b9e\u73b0\u4e3b\u8981\u4f9d\u8d56 HTML5 \u548c JavaScript\u3002\u6211\u4eec\u4f7f\u7528\u6d4f\u89c8\u5668\u7684 Web API \u8fdb\u884c\u8bed\u97f3\u91c7\u96c6\u548c\u8bed\u97f3\u64ad\u653e\u3002\u4ee5\u4e0b\u662f\u7b80\u5316\u7684 Web \u7aef\u4ee3\u7801\u793a\u4f8b\uff1a<\/p>\n

    <!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Voice Chat AI<\/title>\n    <style>\n        #loading { display: none; font-weight: bold; color: blue }\n        #response { white-space: pre-wrap; }\n    <\/style>\n<\/head>\n<body>\n    <h1>Voice Chat AI<\/h1>\n    <button id="start">Start Recording<\/button>\n    <button id="stop" disabled>Stop Recording<\/button>\n    <p id="loading">Loading...<\/p>\n    <p>AI Response: <span id="response"><\/span><\/p>\n\n    <script>\n        let audioContext, mediaRecorder;\n        const startButton = document.getElementById("start");\n        const stopButton = document.getElementById("stop");\n        const responseElement = document.getElementById("response");\n        const loadingElement = document.getElementById("loading");\n\n        let socket = new WebSocket("ws:\/\/localhost:8765\/ws");\n\n        socket.onmessage = (event) => {\n            const data = JSON.parse(event.data);\n            const inputText = data.input || "No input detected";\n            responseElement.textContent += `\/nUser said: ${inputText}`;\n            const aiResponse = data.response || "No response from AI";\n            responseElement.textContent += `\/nAI says: ${aiResponse}\/n`;\n            loadingElement.style.display = "none";\n\n            const utterance = new SpeechSynthesisUtterance(aiResponse);\n            speechSynthesis.speak(utterance);\n        };\n\n        socket.onerror = (error) => {\n            console.error("WebSocket error:", error);\n            loadingElement.style.display = "none";\n        };\n\n        startButton.addEventListener("click", async () => {\n            audioContext = new (window.AudioContext || window.webkitAudioContext)();\n            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });\n            mediaRecorder = new MediaRecorder(stream);\n\n            const audioChunks = [];\n            mediaRecorder.ondataavailable = (event) => {\n                audioChunks.push(event.data);\n            };\n\n            mediaRecorder.onstop = () => {\n                const audioBlob = new Blob(audioChunks, { type: "audio\/webm" });\n                loadingElement.style.display = "block";\n                socket.send(audioBlob);\n            };\n\n            mediaRecorder.start();\n            startButton.disabled = true;\n            stopButton.disabled = false;\n        });\n\n        stopButton.addEventListener("click", () => {\n            mediaRecorder.stop();\n            startButton.disabled = false;\n            stopButton.disabled = true;\n        });\n    <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
    \u4e3a\u4e86\u7b80\u5316\u793a\u4f8b\u4ee3\u7801\uff0c\u4f7f\u7528\u4e86\u5f00\u59cb\u548c\u7ed3\u675f\u6309\u94ae\u6765\u624b\u52a8\u63a7\u5236\u8bed\u97f3\u7684\u5f55\u5236\u3002\u5982\u679c\u8981\u5b9e\u73b0\u5b9e\u65f6\u5bf9\u8bdd\uff0c\u9664\u4e86\u9700\u8981\u5408\u7406\u8bbe\u7f6e\u8bed\u97f3\u91c7\u96c6\u7684\u65f6\u95f4\u95f4\u9694\uff0c\u8fd8\u9700\u8981\u786e\u4fdd\u540e\u7aef\u80fd\u591f\u5feb\u901f\u54cd\u5e94\uff0c\u907f\u514d\u5ef6\u8fdf\u5f71\u54cd\u7528\u6237\u4f53\u9a8c\uff08\u8fd9\u5728\u6211\u7684\u7b14\u8bb0\u672c\u7535\u8111\u4e0a\u65e0\u6cd5\u505a\u5230\uff09\u3002<\/p>\n
    WebSocket \u670d\u52a1\u7aef<\/h3>\n
    \u670d\u52a1\u7aef\u5b9e\u73b0\u4e3a\uff1a<\/p>\n