DEV Community

Cover image for Making your CV talk 🤖 How to combine Open AI text stream response with Eleven Lab Web socket streaming in TypeScript?
Nikola Mitic
Nikola Mitic

Posted on

3

Making your CV talk 🤖 How to combine Open AI text stream response with Eleven Lab Web socket streaming in TypeScript?

Let's briefly refer back to this part of our system design.

Eleven Labs web socket api with open AI system design

We have three parts:

  1. Fetch Relevant CMS data
  2. Fetch stream from Open AI
  3. Feed Web socket audio stream api with text stream from Open AI

Eleven Labs uses web socket api to enable for audio stream, open AI uses rest api to return text stream.

What is important here to achieve is that we do not want to wait for the open AI response before we can start streaming audio from eleven labs.

This means we need a way to send first chunk of Open AI stream as soon as possible to eleven labs.

But we have a problem, Open AI or any other LLM api (Groq as well) returns chunks which do not represent any meaningful words which eleven labs requires in order to work as intended.

This means that we need to buffer chunks into words from Open AI and only when we have our first word buffered we send a message to web socket of Eleven Labs and start streaming audio.

For this purpose I wrote textChunker which is TS version of Python example Eleven Labs has in their docs. 🔗🔗🔗 Click here to see Python version

🔗🔗🔗 Click here for TextChunker code

Example of Text Chunker usage.



  socket.onopen = async function (_event) {
    console.log("OPEN SOCKET");

    const answerSource = await getAnswerSource();
    const answerChunks = await getAnswerChunks(answerSource, question);

    const bosMessage = {
      text: " ",
      voice_settings: {
        stability: 0.5,
        similarity_boost: 0.5,
      },
      xi_api_key: process.env.ELEVEN_LABS_API_KEY,
    };

    socket.send(JSON.stringify(bosMessage));

    for await (const text of textChunker(answerChunks)) {
      socket.send(JSON.stringify({ text: text, try_trigger_generation: true }));
    }

    const eosMessage = {
      text: "",
    };

    socket.send(JSON.stringify(eosMessage));
  };


Enter fullscreen mode Exit fullscreen mode

🔗🔗🔗 For full implementation of Open AI with Eleven Labs click here


❤️If you would like to stay it touch please feel free to connect❤️

  1. X
  2. Linkedin
  3. nikola.mitic.dev@gmail.com

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay