Skip to content

Commit

Permalink
docs: update dev environment doc (#473)
Browse files Browse the repository at this point in the history
  • Loading branch information
plutoless authored Dec 26, 2024
1 parent 036addc commit 8f29d00
Show file tree
Hide file tree
Showing 5 changed files with 116 additions and 2 deletions.
5 changes: 4 additions & 1 deletion docs/SUMMARY.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@
* [Understand property.json](ten_agent/project_structure/property_json.md)
* [Understand extension folder](ten_agent/project_structure/extension.md)
* [Understand web server](ten_agent/project_structure/server.md)
* [Setup Development Environment](ten_agent/setup_development_env/overview.md)
* [Cloud Development in Codespace](ten_agent/setup_development_env/setting_up_development_inside_codespace.md)
* [VSCode Dev Container](ten_agent/setup_development_env/setting_up_vscode_for_development_inside_container.md)
* [Run Demo](ten_agent/demo/quickstart.md)
* [Run Playground](ten_agent/playground/quickstart.md)
* [Configure Modules](ten_agent/playground/configure_modules.md)
Expand All @@ -22,9 +25,9 @@
* [Run Voice Assistant with Realtime API](ten_agent/playground/run_va_realtime.md)
* [Run Dify Chat Bot](ten_agent/playground/run_dify.md)
* [Run Coze Chat Bot](ten_agent/playground/run_coze.md)
* [Change Language](ten_agent/playground/change_language.md)
* [Customize TEN Agent](ten_agent/customize_your_agent.md)
* [Create a Hello World Extension](ten_agent/create_a_hello_world_extension.md)
* [Setup VSCode Inside Container](ten_agent/setting_up_vscode_for_development_inside_container.md)
* [How does interrupt work in TEN-Agent](ten_agent/how_does_interrupt_work.md)
* [Create an Extension with Predefined Type](ten_agent/create_an_extension_with_predefined_type/overview.md)
* [LLM Extension](ten_agent/create_an_extension_with_predefined_type/type_llm_extension.md)
Expand Down
47 changes: 47 additions & 0 deletions docs/ten_agent/playground/change_language.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
# Change language of your agent

When we talk about the language of the agent, we are referring to following aspects,

- The language in which agent understands the user's audio input. i.e. STT language
- The language in which agent responds to the user. i.e. TTS language

You will need to configure different properties of above extensions depending on your requirements.

## Change STT language for STT + LLM + TTS agents

To change the language in which agent understands the user's audio input, you will need to change the properties of the STT extension. You can do this by following the steps below,

1. Open the playground at [localhost:3000](http://localhost:3000) to configure your agent.
2. Select "voice_assistant" graph type.
3. Click on the Button to the right of the graph selection to open the properties configuration.
4. Choose the "STT" extension from the dropdown list.
5. Change the language property to the desired language.
6. Click on `Save Change` to apply the language to the STT extension.

> Note: The language property of the STT extension differs based on the STT service provider. Please refer to the documentation of the STT service provider for the list of supported options.
## Change STT language for STT + LLM + TTS agents (Use RTC Integrated Azure STT)

To change the language in which agent understands the user's audio input, you will need to change the properties of the RTC extension, as STT extension is integrated within it. You can do this by following the steps below,

1. Open the playground at [localhost:3000](http://localhost:3000) to configure your agent.
2. Select "voice_assistant_stt_integrated" graph type.
3. Click on the Button to the right of the graph selection to open the properties configuration.
4. Choose the "RTC" extension from the dropdown list.
5. Change the language property to the desired language. For Azure, 'en-US' stands for English. You can find more language options in the Azure documentation.
6. Click on `Save Change` to apply the language to the RTC extension.

## Change language that agent speaks

> Note: The language TTS support usually are determined by the voice of the TTS. Some TTS support multilingual voices, while some support only a single language.
To change the language in which agent responds to the user, you will need to change the properties of the TTS extension. You can do this by following the steps below,

1. Open the playground at [localhost:3000](http://localhost:3000) to configure your agent.
2. Select "voice_assistant" graph type.
3. Click on the Button to the right of the graph selection to open the properties configuration.
4. Choose the "TTS" extension from the dropdown list.
5. Change the voice property to the desired voice of the language.
6. Click on `Save Change` to apply the language to the TTS extension.

> Note: The voice property of the TTS extension differs based on the TTS service provider. Please refer to the documentation of the TTS service provider for the list of supported options.
8 changes: 8 additions & 0 deletions docs/ten_agent/setup_development_env/overview.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
# Overview

The easiest way to get started with TEN Agent is to use the provided Docker container. This container includes all the necessary dependencies and configurations to run the agent. You can also customize the agent by creating your own extensions or modifying the existing ones.

While if you want to develop the agent, using suitable development tools can save you lots of time. This guide will contain following tutorials,

- Setup local development environment with VSCode to connect with your Docker container.
- Setup cloud development environment with Github Codespace.
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
# Setting up cloud development environment with Github Codespace

Github Codespace is a cloud-based development environment that allows you to develop your code directly in the cloud. It's a great way to develop your agent without having to set up a local development environment. You don't need to have a great network or powerful machine. This guide will show you how to set up a development environment for TEN Agent using Github CodeSpace.

## Step 1: Create a Codespace with TEN-Agent repository

Navigate to TEN-Agent github repository, and click on the `Code` button. Then, select `Open with Codespaces`. Github will then create a Codespace for you in a new browser tab. The first time you create a Codespace, it may take a few minutes to set up.

![Open with Codespaces](https://github.com/TEN-framework/docs/blob/main/assets/png/start_codespace.png?raw=true)

## Step 2: Start working with Codespace

Once the Codespace is ready, you will see the VSCode editor in the browser. You can start working with the TEN-Agent repository in the Codespace. You can open the terminal, create new files, and run commands just like you would in a local development environment.

The steps are similar to the process outlined in the [Quick Start](https://doc.theten.ai/ten-agent/getting_started) guide. However, there's no need to run `docker compose up` command with Codespace. You can directly start building agent using,

```bash
# Prepare .env file from .env.example and set your api keys inside it
cp ./env.example .env
# Build the agent after finish key configurations
task use
```

And once successfully built, you can run following command to start server,

```bash
task run
```

## Step 3: Start Front-end UI

As we are not using docker compose with Codespace, you will need to start the front-end UI separately. You can do this by running the following command in the terminal,

```bash
cd playground
pnpm install
pnpm dev
```

This will start the front-end UI at `localhost:3000`.

## Step 4: Access your remote setup

This is a very special step which applies to Codespace only. Codespace will automatically generate a URL for every port you exposed in your Codespace. You can find the URL by clicking on the `Ports` tab in the bottom left corner of the Codespace window.

![Ports](https://github.com/TEN-framework/docs/blob/main/assets/png/codespace_ports.png?raw=true)

All ports visibility are by default set to `private`, you can change it to `public` by right click and choose `port visibility`. Once you make it public, you can access the URL in your browser to see the front-end UI. Here we will right click on the visibility column of 3000 port, and change its visibility to `public`.

![Change Visibility](https://github.com/TEN-framework/docs/blob/main/assets/png/codespace_visibility.png?raw=true)

Now you can access the front-end UI at the URL generated by Codespace. Find the `Forwarded Address` column for port 3000, click on that and browser should start a new tab for you with your front-end UI.

![Forwarded Address](https://github.com/TEN-framework/docs/blob/main/assets/png/codespace_forwarded_addr.png?raw=true)

And that's it! You have successfully set up a development environment for TEN Agent using Github Codespace. You can now start developing your agent directly in the cloud. For debugging and development experience it's basically the same as your local VSCode experience.
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ Next, install the [Dev Containers extension](https://marketplace.visualstudio.co

## Step 3: Start the Development Environment Using Docker Compose

This step is similar to the process outlined in the [Quick Start](./quickstart.md) guide. However, instead of running:
This step is similar to the process outlined in the [Quick Start](https://doc.theten.ai/ten-agent/getting_started) guide. However, instead of running:

{% code title=">_ Terminal" %}
```shell
Expand Down

0 comments on commit 8f29d00

Please sign in to comment.