START OF PREVIOUS DISCUSSION
user:function getStream(){
    const apiUrl = 'https://pandora-s-playground-api.onrender.com/get_talk';

    let txt = document.querySelector('.overlay-section p').textContent.toLowerCase()

    const data = {
        history: [['user',txt]],
    };

    async function fetchStreamPost() {
    try {
        const response = await fetch(apiUrl, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(data),
        });

        if (!response.ok) {
        throw new Error(`Network response was not ok: ${response.statusText}`);
        }

        const reader = response.body.getReader();

        let fullData=""
        while (true) {
            const { done, value } = await reader.read();

            if (done) {
                break;
            }

            const postData = new TextDecoder().decode(value);
            fullData+=postData;
            console.log('Streamed post:', postData);
            if(fullData.endsWith('.') || fullData.endsWith(',') || fullData.endsWith('?') || fullData.endsWith('!')){
                talkVis(fullData);
                fullData="";
            }
        }
    } catch (error) {
        console.error('Error fetching stream post:', error.message);
    }
    }

    fetchStreamPost();
}

ive a problem with this code, the talkVis function that i made allows it to text2speech, however it uses webspeechapi, and i think it doesnt store the amount of calls? like i want it to say everything but its receiving the data faster than it says 
robot:Your function <code>getStream</code> fetches data as a stream and attempts to process that data as it arrives. Your description indicates that you have an issue because your <code>talkVis</code> function, which uses the Web Speech API, isn’t able to speak the incoming text fast enough to keep up with the stream. This is a common issue when dealing with streaming data and text-to-speech (TTS): the TTS service may not be able to speak as quickly as data arrives, leading to potentially missed information or buffer overflows.<br/><br/>Here’s how you can potentially handle this:<br/><br/>1. Queue the incoming data: Rather than trying to immediately send all incoming text segments to the <code>talkVis</code> function, you can queue them and make sure that only one piece of text is spoken at a time.<br/><br/>2. Handle <code>talkVis</code> scheduling: Use a mechanism to determine when the TTS has finished speaking the current text, and only then deque the next available text segment.<br/><br/>Here’s an example of how your code might be augmented to handle this with a basic queue system:<br/><pre><code class="javascript"><br/>function getStream() {<br/>    const apiUrl = ‘<a href="https://pandora-s-playground-api.onrender.com/get_talk" target="_blank">https://pandora-s-playground-api.onrender.com/get_talk</a>’;<br/>    let txt = document.querySelector(‘.overlay-section p’).textContent.toLowerCase();<br/><br/>    const data = {<br/>        history: [[‘user’, txt]],<br/>    };<br/><br/>    const speechQueue = [];<br/>    let speaking = false;<br/><br/>    async function fetchStreamPost() {<br/>        // … same as before …<br/><br/>        const reader = response.body.getReader();<br/><br/>        let fullData = “”;<br/>        while (true) {<br/>            const { done, value } = await reader.read();<br/><br/>            if (done) break;<br/>            <br/>            const fragment = new TextDecoder().decode(value);<br/>            fullData += fragment;<br/>            console.log(‘Streamed fragment:’, fragment);<br/><br/>            if (fullData.endsWith(‘.’) || fullData.endsWith(‘,’) || fullData.endsWith(‘?’) || fullData.endsWith(‘!’)) {<br/>                speechQueue.push(fullData);<br/>                fullData = “”;<br/>                if (!speaking) speakNextSegment();<br/>            }<br/>        }<br/>    } catch (error) {<br/><br/>        // … same as before …<br/><br/>    }<br/><br/>    // Call this once to start the fetch operation<br/>    fetchStreamPost();<br/>}<br/><br/>function speakNextSegment() {<br/>    if (speechQueue.length === 0) {<br/>        speaking = false;<br/>        return;<br/>    }<br/><br/>    speaking = true;<br/>    const textSegment = speechQueue.shift();<br/>    talkVis(textSegment, function() {<br/>        // This callback is called after the speech is finished<br/>        speakNextSegment();<br/>    });<br/>}<br/><br/>// Modify your talkVis to accept a callback when finished speaking<br/>function talkVis(text, callback) {<br/>    const utterance = new SpeechSynthesisUtterance(text);<br/>    <br/>    utterance.onend = function(event) {<br/>        console.log(‘SpeechSynthesisUtterance.onend’);<br/>        if (typeof callback === “function”) callback();<br/>    };<br/><br/>    utterance.onerror = function(event) {<br/>        console.error(‘SpeechSynthesisUtterance.onerror’);<br/>        if (typeof callback === “function”) callback();<br/>    };<br/><br/>    speechSynthesis.speak(utterance);<br/>}</code></pre><br/><br/>This code adds a <code>speechQueue</code> and ensures that <code>talkVis</code> is called one by one by using <code>speakNextSegment</code>. It also modifies the <code>talkVis</code> function to take a callback that is used to chain the speaking of the queued texts.
END OF PREVIOUS DISCUSSION
user: give the entire code