Skip to content

Commit f5edd50

Browse files
committed
Update docs
1 parent 4647485 commit f5edd50

10 files changed

+146
-0
lines changed
Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
---
2+
title: Realtime Avatars support with HeyGen
3+
description: Introducing HeyGen support in LLMStack / Promptly
4+
slug: /realtime-avatars-with-heygen
5+
authors: [ajhai, vegito22]
6+
tags: [heygen, realtime avatars]
7+
hide_table_of_contents: false
8+
---
9+
10+
import realtimeAvatarChatAppImage from '@site/static/img/realtime-avatar-chat-screenshot.png';
11+
12+
If you are on social media following Generative AI related news, you would have come across [HeyGen](https://www.heygen.com/) and their [Realtime Avatars](https://www.heygen.com/article/unleashing-the-power-of-realtime-avatars) which is a game changer in the field of video generation.
13+
14+
Today we are excited to announce that we are adding support for HeyGen's Realtime Avatars in LLMStack / Promptly. You can now use HeyGen's Realtime Avatars to generate videos with your avatar repeating the answer in realtime.
15+
16+
<img src={realtimeAvatarChatAppImage} alt="Realtime Avatar Chat App" style={{ maxWidth: "600px", margin: "0 auto", display: "flex", paddingTop: "20px", paddingBottom: "20px" }} />
17+
18+
:::info
19+
Check out our easy to follow [guide](/docs/guides/rag-with-realtime-avatar) to build your own avatar chatbot with built-in RAG pipeline.
20+
:::
21+
22+
Combined with LLMStack's [RAG](/blog/retrieval-augmented-generation) pipeline and no-code app builder, you can now build apps with a realtime video avatar of you answering questions from your documents, all in realtime.
Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
---
2+
id: rag-with-realtime-avatar
3+
title: Retrieval Augmented Generation with Realtime Avatar
4+
description: Use HeyGen's Realtime Avatars and LLMStack / Promptly's retrieval augmented generation (RAG) to generate videos with your avatar repeating the answer in realtime.
5+
---
6+
7+
import ReactPlayer from 'react-player';
8+
9+
import heygenConnectionImage from '@site/static/img/heygen-connection.png';
10+
import realtimeAvatarChatAppNameImage from '@site/static/img/realtime-avatar-chat-app-name.png';
11+
import realtimeAvatarChatTemplatePage1Image from '@site/static/img/realtime-avatar-chat-template-page1.png';
12+
import realtimeAvatarChatTemplatePage2Image from '@site/static/img/realtime-avatar-chat-template-page2.png';
13+
14+
If you have been following the progress in the Generative video field, you'd have come across [HeyGen](https://www.heygen.com/) as the leader in AI generated avatar videos. Their [Realtime Avatars](https://www.heygen.com/article/unleashing-the-power-of-realtime-avatars) is a game changer in the field of video generation. With its Realtime Repeat API, we can make the avatar repeat any text in realtime. Combining this with LLMs opens up a lot of possibilities.
15+
16+
In this guide, we will see how to make your HeyGen avatar answer questions in realtime from your documents. We will use the [retrieval augmented generation (RAG)](/blog/retrieval-augmented-generation) pipeline to generate answers to questions and then use the answer to generate a video with the avatar repeating the answer in realtime.
17+
18+
Here is a demo of the app we will build in this guide:
19+
20+
<ReactPlayer
21+
style={{ margin: "auto", paddingBottom: "20px" }}
22+
playing
23+
url="https://youtu.be/y8CAheAJC6o"
24+
width={"850px"}
25+
height={"500px"}
26+
config={{
27+
youtube: {
28+
playerVars: {
29+
showinfo: 0,
30+
autoplay: 1,
31+
controls: 1,
32+
},
33+
},
34+
}}
35+
/>
36+
37+
:::note
38+
To make it easy to build your own avatar chatbot, we now include a `Realtime Avatar Chat` app template which this guide is based on
39+
:::
40+
41+
### Prerequisites
42+
43+
:::info
44+
Use the [cloud version of LLMStack at Promptly](https://trypromptly.com) to follow this guide without having to install LLMStack locally.
45+
:::
46+
47+
- [LLMStack](/docs/getting-started/installation) installed and running
48+
- [HeyGen](https://heygen.com) account with [API access](https://docs.heygen.com/docs/quick-start)
49+
50+
### Get your HeyGen API Key
51+
52+
To get your HeyGen API key, login to your HeyGen account and go to [API page](https://app.heygen.com/settings?nav=API). Make sure your HeyGen account plan has API access. While you are in your HeyGen account, create your instant avatar or pick one that you want to use. Make sure you get the avatar id and voice id for the avatar you want to use.
53+
54+
### Create HeyGen Connection in LLMStack / Promptly
55+
56+
Once you have your HeyGen API key, navigate to LLMStack / Promptly [settings page](https://trypromptly.com/settings) and create a new HeyGen connection by clicking on the `+ Connection` button. Pick a name for your connection and use `API Key Authentication` as the connection type. Enter your HeyGen API key in the `API Key` field, add <b>X-Api-Key\*</b> for the `Header Key` field and click on `Save`.
57+
58+
<img src={heygenConnectionImage} alt="HeyGen Connection" style={{ maxWidth: "600px", margin: "0 auto", display: "flex", paddingTop: "20px" }} />
59+
60+
## Create LLMStack / Promptly App
61+
62+
Once you have your key added as a connection, follow these steps to create an app on LLMStack / Promptly using the `Realtime Avatar Chat` template.
63+
64+
#### Step 1:
65+
66+
Navigate to the templates section on [apps page](https://trypromptly.com/apps) and find the `Realtime Avatar Chat` template. Click on the template card and create a new app using the template. Pick a name for your app and click on `Create App`.
67+
68+
<img src={realtimeAvatarChatAppNameImage} alt="Realtime Avatar Chat App Name" style={{ maxWidth: "600px", margin: "0 auto", display: "flex", paddingTop: "20px" }} />
69+
70+
#### Step 2:
71+
72+
Once the app is created, you will be taken to the template page. Fill the avatar id and voice id for the avatar you want to use. You can find the avatar id and voice id in your HeyGen account. Pick the connection you created with your HeyGen API key and click on `Next`.
73+
74+
<img src={realtimeAvatarChatTemplatePage1Image} alt="Realtime Avatar Chat Template Page 1" style={{ maxWidth: "600px", margin: "0 auto", display: "flex", paddingTop: "20px" }} />
75+
76+
:::tip
77+
You can find the [voice ids](https://docs.heygen.com/reference/list-voices-v2) and [avatar ids](https://docs.heygen.com/reference/list-avatars-v2) in your account using the APIs listed in the [HeyGen API docs](https://docs.heygen.com/docs/quick-start).
78+
:::
79+
80+
#### Step 3:
81+
82+
In the next step, you will be asked to pick a datasource for your app. You can pick your existing datasources or create a new datasource, add documents to that datasource by clicking on the `+` button. When asked a question, the app will search for the answer in the documents in the datasource you pick here, use GPT to generate an answer and make your avatar speak the answer in realtime. Once you have picked a datasource, click on `Save App`.
83+
84+
<img src={realtimeAvatarChatTemplatePage2Image} alt="Realtime Avatar Chat Template Page 2" style={{ maxWidth: "600px", margin: "0 auto", display: "flex", paddingTop: "20px" }} />
85+
86+
#### Step 4:
87+
88+
Once the app is saved, you can preview the app by clicking on the `Preview` option in the sidebar. You can also share the app with your friends and colleagues by publishing the app and sharing the published link. You can optionally invite your friends and colleagues to collaborate on the app by adding them in the publish settings.
89+
90+
You can input a question in the input box and click on the `Submit` button to see the avatar answer your question in realtime.
91+
92+
:::tip
93+
To avoid hitting the API limits from HeyGen, you can close the session once you are done with the app. Hover over the video and click on the `Close Session` button.
94+
:::

web/docs/processors/heygen.md

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
---
2+
id: heygen
3+
title: HeyGen
4+
---
5+
6+
The `HeyGen` provider includes processors that can use your HeyGen API key and perform various actions like generating avatars in real-time and make them answer questions from your datasources.
7+
8+
## Realtime Avatar
9+
10+
### Input
11+
12+
- `task_type`: The type of task to perform. Can be `repeat`, `talk`, `create_session`, `start_session`, `close_session` and `submit_ice_candidate`. Types other than `repeat` are used internally by the processor and not for direct use.
13+
- `text`: The text to repeat.
14+
- `session_id`: The session ID to use. If not provided, a session_id from app session will be used if available.
15+
16+
### Configuration
17+
18+
- `avatar_name`: Avatar ID to use for the session. You can find this in your HeyGen account or use the API to get a list of available avatars. See their [API documentation](https://docs.heygen.com/reference/list-avatars-v2) for more details.
19+
- `voice_id`: Voice ID to use for the session. You can find this in your HeyGen account or use the API to get a list of available voices. See their [API documentation](https://docs.heygen.com/reference/list-voices-v2) for more details.
20+
- `connection_id`: The connection ID of the HeyGen account to use. Add a connection of type `API Key Authentication` from Settings > Connections (and add your HeyGen API key).
21+
- `reuse_session`: Whether to reuse the session or create a new one. If set to `true`, the session will be reused for subsequent requests. If set to `false`, a new session will be created for each `create_session` request.
22+
- `quality`: The quality of the generated video stream. Can be `low`, `medium` or `high`. Defaults to `medium`.
23+
- `input_stream`: When set to `true`, the input text will be streamed to the avatar. This is useful when you want to generate a video of the avatar speaking a long text. Defaults to `false`. This will make the avatar start speaking as soon as a sentence is available.
24+
25+
### Output
26+
27+
- `task_type`: The type of task performed.
28+
- `task_response_json`: The response from the HeyGen API.

web/docs/processors/intro.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ Let's take a look at the providers and their processors that are available in th
1818
| [Cohere](/docs/processors/cohere) | Generate |
1919
| [ElevenLabs](/docs/processors/elevenlabs) | Text to Speech |
2020
| [Google](/docs/processors/google) | Gemini, Text to Speech |
21+
| [HeyGen](/docs/processors/heygen) | Realtime Avatar |
2122
| [LinkedIn](/docs/processors/linkedin) | Profile Extractor |
2223
| [LocalAI](/docs/processors/localai) | Audio Transcription, Audio Translation, ChatGPT, ChatGPT with Vision, Completions, Image generation, Image variation, Image edit, Text to Speech |
2324
| [OpenAI](/docs/processors/openai) | Audio Transcription, Audio Translation, ChatGPT, ChatGPT with Vision, Completions, Image generation, Image variation, Image edit, Text to Speech |

web/sidebars.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,7 @@ const sidebars = {
109109
"guides/contributing",
110110
"guides/add-custom-processor",
111111
"guides/add-external-datasource",
112+
"guides/rag-with-realtime-avatar",
112113
],
113114
},
114115
"promptly",
207 KB
Loading
232 KB
Loading
1.14 MB
Loading
120 KB
Loading
73 KB
Loading

0 commit comments

Comments
 (0)