使用JavaScript将麦克风输入与ChatGPT集成

逐步指南

1. 建立HTML结构

创建一个简单的HTML结构，其中包含按钮用于启动和停止麦克风输入，以及用于ChatGPT响应的显示区域。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset=UTF-8    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Voice Input to ChatGPT</title>
</head>
<body>
    <h1>Use Your Voice to Chat with GPT</h1>
    <button id="startButton">Start Listening</button>
    <button id="stopButton" disabled>Stop Listening</button>
    <div id="response"></div>
<script src="app.js"></script>
</body>
</html>

2. 实现JavaScript语音识别和API集成

使用 Web 语音 API 捕捉语音输入并将其发送到 OpenAI API。

// Import dotenv to load environment variables from .env file
import 'dotenv/config';
import { Configuration, OpenAIApi } from 'openai';
// Initialize OpenAI API
const openai = new OpenAIApi(new Configuration({
    apiKey: process.env.OPENAI_API_KEY,
}));
// Set up speech recognition
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();
recognition.continuous = true;
recognition.interimResults = false;
const startButton = document.getElementById('startButton');
const stopButton = document.getElementById('stopButton');
const responseDiv = document.getElementById('response');
startButton.addEventListener('click', () => {
    recognition.start();
    startButton.disabled = true;
    stopButton.disabled = false;
});
stopButton.addEventListener('click', () => {
    recognition.stop();
    startButton.disabled = false;
    stopButton.disabled = true;
});
recognition.onresult = async (event) => {
    const transcript = event.results[event.results.length - 1][0].transcript.trim();
    console.log('You said: ', transcript);
    // Send the recognized text to ChatGPT
    try {
        const gptResponse = await openai.createCompletion({
            model: "text-davinci-003",
            prompt: transcript,
            max_tokens: 150,
        });
        responseDiv.innerText = gptResponse.data.choices[0].text.trim();
    } catch (error) {
        console.error("Error fetching response from ChatGPT:", error);
        responseDiv.innerText = "Error fetching response. Please try again.";
    }
};
recognition.onerror = (event) => {
    console.error("Speech recognition error detected: " + event.error);
};