Talk to ChatGPT in the browser.

talkToChatGPT.js

let lastSentences = [];
const targetNode = document.getElementsByTagName("main")[0];
const observer = new MutationObserver(onMutation);
const textArea = document.getElementsByTagName('textarea')[0];
let listening = false;

function readOutWords(words) {
    const utterance = new SpeechSynthesisUtterance(words);
    utterance.rate = 1;
    utterance.pitch = 0.85;
    window.speechSynthesis.speak(utterance);
}

function onMutation(mutationsList) {
    mutationsList.forEach(mutation => {
        if (mutation.type !== "characterData") {
            return
        }

        switch (mutation.target.parentNode.tagName) {
            case "P":
            case "LI":
                readSentence(mutation.target.data)
            default:
                return
        }
    });
}

function readSentence(string) {
    const sentenceRegex = /([A-Z][^\.!?`]*[\.!?`])/g;
    const sentencesInString = string.match(sentenceRegex);
    if (sentencesInString) {
        sentencesInString.forEach(sentence => {
            sentence = sentence.replace(/`/g, '');
            if (!lastSentences.includes(sentence)) {
                readOutWords(sentence)
                lastSentences.push(sentence);
                if (lastSentences.length > 50) {
                    lastSentences.shift();
                }
            }
        });
    }
}

function createSpeechRecognition(speechButton, submit) {
    const recognition = new webkitSpeechRecognition() || new SpeechRecognition();
    recognition.continuous = true;
    recognition.interimResults = true;
    recognition.lang = "en-US";

    recognition.onerror = function (event) {
        console.error(event);
    };

    recognition.onstart = function () {
        console.log('Speech recognition service has started');
        speechButton.disabled = true
        listening = true
    };

    recognition.onend = function () {
        speechButton.disabled = false
        listening = false
        console.log('Speech recognition service disconnected');
    };

    recognition.onresult = function (event) {
        let final_transcript = '';

        for (let i = event.resultIndex; i < event.results.length; i++) {
            if (event.results[i].isFinal) {
                final_transcript += event.results[i][0].transcript;
            }
        }

        if (final_transcript) {
            console.log("Final:", final_transcript);
            recognition.stop()
            textArea.value = final_transcript
            submit()
        }
    };

    return recognition;
}

if (textArea) {
    const textAreaParent = textArea.parentElement;
    const submitButton = textAreaParent.getElementsByTagName('button')[0]
    const submit = () => submitButton.click()

    const speechButton = document.createElement('button');
   
    speechButton.innerHTML = "Ask Chat GPT";
    speechButton.onclick = function() {
        if (!listening) {
            recognition = createSpeechRecognition(speechButton, submit);
            recognition.start();
        } else {
            recognition.stop();
        }
    }
    textAreaParent.appendChild(speechButton);

    observer.observe(targetNode, { subtree: true, attributes: true, characterData: true });
}

I wrote this will the help of chatGPT. Now we can talk in the browser.

Impressive..awesome! Like having a super human mate! I