Errors while onboarding `frontend` app

seyeong-han commented 2 months ago

I really enjoyed learning and using Video Understanding Models in your API playground and tried to implement the frontend app locally. But, there were some challenges to running it, and I wanna share it by raising this issue.

Challenges that I encountered

Running `frontend`

1. Absence of example `.env` file for `frontend` and `server.js`.

The .env should look like this under frontend directory.

// For frontend/src/apis/apiConfig.js
REACT_APP_API_MAIN_KEY=tlk_...
// For frontend/server.js
TWELVE_LABS_API_KEY=${REACT_APP_API_MAIN_KEY}
// For frontend/src/apis/streamEventsApis.js
REACT_APP_API_INDEX_ID=<YOUR INDEX ID>
// For frontend/server.js
REACT_APP_PORT=8000
// For frontend/src/apis/apiConfig.js
REACT_APP_BASE_SERVER=http://localhost:8000
// For frontend/src/apis/streamEventsApis.js
REACT_APP_LANGGRAPH_API_URL=http://localhost:8123
REACT_APP_LANGCHAIN_API_KEY=lsv2_...

I created REACT_APP_LANGGRAPH_API_URL to connect with jockey server sdk. The URL was set as default http://localhost:8123 by langgraph-sdk, but I couldn't connect with langgraph-sdk without apiKey.
streamEventsApis.js

const client = new Client({
    apiUrl: process.env.REACT_APP_LANGGRAPH_API_URL,
    apiKey: process.env.REACT_APP_LANGCHAIN_API_KEY,
  });

2. `react-hls-player` dependency conflict issue with `react@18.0.0`

I got the react-his-player dependency conflict issue and found it has been stopped from being maintained since 2021.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: react-hls-player@3.0.7
npm ERR! Found: react@18.0.0
npm ERR! node_modules/react
npm ERR!   react@"18.0.0" from the root project
npm ERR!   peer react@">=16.8.0" from @emotion/react@11.11.3
npm ERR!   node_modules/@emotion/react
npm ERR!     @emotion/react@"^11.11.3" from the root project
npm ERR!     peer @emotion/react@"^11.0.0-rc.0" from @emotion/styled@11.11.0
npm ERR!     node_modules/@emotion/styled
npm ERR!       @emotion/styled@"^11.11.0" from the root project
npm ERR!       3 more (@mui/material, @mui/styled-engine, @mui/system)
npm ERR!     4 more (@mui/material, @mui/styled-engine, @mui/system, react-select)
npm ERR!   32 more (@emotion/styled, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.13.1" from react-hls-player@3.0.7
npm ERR! node_modules/react-hls-player
npm ERR!   react-hls-player@"^3.0.7" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: react@16.14.0
npm ERR! node_modules/react
npm ERR!   peer react@"^16.13.1" from react-hls-player@3.0.7
npm ERR!   node_modules/react-hls-player
npm ERR!     react-hls-player@"^3.0.7" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

For the stable deployment, I suggest to use react-player to replace the react-hls-player package.

<ReactPlayer
  ref={videoRef}
  url={videoUrl}
  width="854px"
  height="520px"
  controls={true}
  playing={false}
  className="rounded"
  config={{
    file: {
      forceHLS: true,
    },
  }}
/>

3. Missing `dotenv` package in the `frontend/server.js`

I am using Ubuntu:22.04 for this implementation. I don't know if Mac OS has the same issue, but to read the .env, I needed to add this in the frontend/server.js.

require("dotenv").config();

Running `jockey server`

1. Absence of `LANGSMITH_API_KEY` instruction on `main` branch

I found that the langchain API key issue has been solved in this issue, but it wasn't merged into the main branch.

2. Permission Denied on Composing Up Langgraph

I am working on this project on Ubuntu:22.04 and got this reading permission error in run_jockey_server() of jockey/cli.py.

#5 ERROR: error from sender: open /home/young/project/twelvelabs/tl-jockey/.langgraph-data: permission denied
------
 > [langgraph-api internal] load build context:
------
failed to solve: error from sender: open /home/young/project/twelvelabs/tl-jockey/.langgraph-data: permission denied

I am using the below command as a temporary workaround. I am gonna work on recognizing the OS to determine what cli should be used.

langgraph_cli_command = [
        "sudo",
     "/home/young/miniconda3/envs/jockey/bin/langgraph",
        # "langgraph", 
        "up", 
        "-c", langgraph_json_file_path, 
        "-d", compose_file_path, 
        "--recreate", 
        "--verbose"
    ]

Todo

I am going to break down the following issues into different branches.

[x] Add LANGSMITH_API_KEY instruction in .env file to run the jockey server.
[x] Add frontend/example.env & Fix Client of langgraph-sdk & Add dotenv in frontend/server.js
[x] Fix langgraph_cli_command to solve a permission error
[x] Replace react-hls-player with react-player

james-le-twelve-labs commented 1 week ago

@seyeong-han I want to check on this issue. Looks like you still need to replace react-hls-player with react-player as the final task?

seyeong-han commented 5 days ago

@james-le-twelve-labs

Finally, I could have time to contribute to Jockey again, and I finished replacing the react-hls-player library on this PR.

Replace deprecated react hls player #105

twelvelabs-io / tl-jockey