Engineering and Technology

Sean Becker


## FuboTV - Senior Software Engineer (2022 - Present)

- Migrated native video players to generic Media Source Extension (MSE) video players on Smart TV devices.
- Built ecosystem of tools to increase team efficiency:
  - Introduced datadog logging and instrumentation to enhance troubleshooting capabilities and gather feedback on releases.
  - Built tool to query logs and generate metrics using ChatGPT function calls to assist with gathering performance insights.
- [Contributed to redesigned application](https://cordcuttersnews.com/fubo-is-rolling-out-a-new-improved-user-interface-with-re-designed-apps/) (launched to 300,000+ users).

## Fubo Gaming - Software Engineer (2021 - 2022)

- Interviewed 70+ candidates for engineering roles. Scaled team from 5 to 15 engineers.
- Coordinated regulatory changes required to launch Fubo Sportsbook in Iowa, Arizona, and New Jersey.
- Rewrote authentication flow & integration between sportsbook and TV
  product; Coordinated effort between white-label provider, in-house
  designers, in-house frontend team, and in-house platform team.
- Integrated [Trustly](https://us.trustly.com) payment provider, simplifying deposit flow and substantially increasing first time deposit rate.

## Prior Employment

For information on prior employment, you can view my resume [here](/docs/resume.pdf).

Go back [home](/).


A brief summary of my professional experience.

Professional Experience


Just looking for code? You can find that [here](https://gist.github.com/seanbecker15/456ddec169eb68aa7e48d38234bb5283).

## Background

Part of the challenge while working at Fubo is that we maintain several SmartTV applications.
In order to reduce the overhead of maintenance we rely on tooling, one of which is the [ares-cli](https://webostv.developer.lge.com/develop/tools/cli-dev-guide).
Unfortunately this CLI doesn't expose functionality to wake a TV up over the network, which is problematic for test automation.
It also means that I need to get up from my desk to turn on my TV before launching a debug version of our application.

## Solution

I found several sources that wake LG over the network such as

- [home assistant](https://github.com/home-assistant/core/blob/2ad5b1c3a6140a49d1113e86e46b68165cf26884/homeassistant/components/wake_on_lan/__init__.py#L34C15-L34C32)
- [LGTVCompanion](https://github.com/JPersson77/LGTVCompanion)

Both of these solutions are embedded in bigger systems so I decided take the code from [Console.cpp](https://github.com/JPersson77/LGTVCompanion/blob/5c63223a9866bc11965a3d9c9240313694c9c3f6/LGTV%20Companion%20Console/Console.cpp#L1531) and convert it to javascript.
This can be quickly ported to another language using a good LLM like ChatGPT or Claude.

You can find the javascript code [here](https://gist.github.com/seanbecker15/456ddec169eb68aa7e48d38234bb5283).


NodeJS script to wake LG (WebOS) TV over LAN

LG TV Wake on LAN


Just looking for code? You can find that [here](https://gist.github.com/seanbecker15/49a20ef17e77682d7907f5eba8fd507b).

## Introduction

There are lots of things that make ChatGPT great under the hood, but let's face it: most people will never truly understand the internals.
That doesn't mean that the entire stack has to be a mystery!

### Why UX is important

If you've ever used the OpenAI API you'll know that it's quite slow to use the standard API without streaming. It can take 10+ seconds to a receive
a response depending on the complexity of the prompt. Although it is [probably a myth](https://www.reddit.com/r/webdev/comments/n66d0r/comment/gx5b2gl) that users will leave your website if it takes more than 3 seconds to load,
it is still super important to have good _perceived performance_. For companies working on cutting edge innovation such as OpenAI it is even more important to prove that their tool is useful.
Waiting for 10+ seconds leads to loss of context and a bad user experience.

Though the total response time is likely the same, the streaming API sends back partial responses as they are generated.
Users can see the response in real time and process the response as it is being generated. This makes a huge difference in the user experience.

### Assumptions

- I'm using React for this example, but most of this code should be very easy to plug into other frameworks.
- I'm assuming that you already have a backend endpoint that forwards the OpenAI stream to your frontend. If not, I will be making a guide on how to do that soon.

### Prerequisites

```bash
npm install eventsource-parser
```

## Let's get coding

1. Scaffold our component. We'll need a prompt input, a submit button, and a location for our results.

```javascript
import { useState, ChangeEvent } from "react";

// Assumes that you can already fetch a completion from OpenAI
import { fetchCompletion } from "./api";

const Chatbot = () => {
  const [prompt, setPrompt] = useState("");
  const [completion, setCompletion] = useState("");

  const handleResponse = async (response: Response) => {};

  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    setPrompt(e.target.value);
  };

  const handleSubmit = () => fetchCompletion(prompt)
    .then(handleResponse)

  return (
    <div>
      <div>
        <input type="text" value={prompt} onChange={handleChange} />
        <button type="button" onClick={handleSubmit}>Submit</button>
      </div>
      <p>{completion}</p>
    </div>
  );
}
```

2. Convert OpenAI stream to ReadableStream. OpenAI sends a stream of bytes. We need to convert that to a stream of strings.

```javascript
...

const Chatbot = () => {
  ...

  const handleResponse = async (response: Response) => {
    const stream = response.body;
    const textStream = stream.pipeThrough(new TextDecoderStream());
  }

  ...
}
```

3. Make ReadableStream async iterable. ReadableStream is not yet an async iterable in browsers, so we need to convert it to one.
   If our target platform were NodeJS we wouldn't need this step as ReadableStream is already an async iterable in NodeJS.

```javascript
  ...

  // Convert the stream to an async iterator.
  // Found here https://jakearchibald.com/2017/async-iterators-and-generators/#making-streams-iterate
  async function* streamAsyncIterator(stream: ReadableStream) {
    const reader = stream.getReader();
    try {
      while (true) {
        const { done, value } = await reader.read();
        if (done) return;
        yield value;
      }
    } finally {
      reader.releaseLock();
    }
  }

  ...

  const Chatbot = () => {
    ...

    const handleResponse = async (response: Response) => {
      const stream = response.body;
      const textStream = stream.pipeThrough(new TextDecoderStream());
      const asyncIteratorStream = streamAsyncIterator(textStream);
      for await (const chunk of asyncIteratorStream) {
        console.log(chunk);
      }
    }

    ...
  }
```

4. Previously we were logging each chunk to the console. Now we need to parse each chunk as an event. We'll use the `eventsource-parser` package to do this.

```javascript
...

import { createParser, ParsedEvent, ReconnectInterval } from "eventsource-parser";

...

const Chatbot = () => {
  ...

  const parseEvent = (event: ParsedEvent | ReconnectInterval) => {
    console.log(event);
  };

  const handleResponse = async (response: Response) => {
    ...
    const parser = createParser(parseEvent);
    for await (const chunk of asyncIteratorStream) {
      parser.feed(chunk);
    }
  }

  ...
}

```

5. Update completion text as we get each event. You should now see the completion text update as it is generated.

```javascript
...

const Chatbot = () => {
  ...

  const parseEvent = (event: ParsedEvent | ReconnectInterval) => {
    if (event.type !== 'event' || event.data === '[DONE]') {
      return
    }

    const delta = JSON.parse(event.data).choices[0]?.delta?.content || "";
    setCompletion((prev) => {
      if (prev) {
        return prev + delta;
      } else {
        return delta;
      }
    });
  };

  ...
}
```

## Recap

That's it! You should now have a working chatbot that can complete sentences in real time. You can find the full code [here](https://gist.github.com/seanbecker15/49a20ef17e77682d7907f5eba8fd507b).


Use the OpenAI SSE streaming API to make a chatbot that can complete sentences just like ChatGPT.

OpenAI Series: Chat-GPT Style Completion Using SSE Streaming API


- I grew up in Vernon Hills, IL
- I went to Purdue University where I majored in Computer Science and minored in Business Management
- I try to take at least one ski trip every year, usually on the west coast of the US
- I frequently listen to podcasts including Lex Fridman, Andrew Huberman, Joe Rogan, and Sam Harris
- I enjoy building all things related to technology. Please reach out if you have an idea and want advice on how to build it :)

Go back [home](/).


Just a few snippets of information to get to know me.

About Me


<ProjectList filter={({ active }) => !active} />

Go back [home](/).


This is a list of some of the projects I've worked on in the past.

Engineering and Technology

Professional Experience

LG TV Wake on LAN

OpenAI Series: Chat-GPT Style Completion Using SSE Streaming API

About Me

Past Projects