From bb6b4e922e6698776a0fc72448857cf56807a307 Mon Sep 17 00:00:00 2001 From: Hu Yueh-Wei Date: Thu, 29 Aug 2024 15:25:15 +0800 Subject: [PATCH] fix --- .../create-a-hello-world-extension.md | 190 ------------------ getting-started/publish-your-docs.md | 70 ------- getting-started/quickstart.md | 139 ------------- 3 files changed, 399 deletions(-) delete mode 100644 getting-started/create-a-hello-world-extension.md delete mode 100644 getting-started/publish-your-docs.md delete mode 100644 getting-started/quickstart.md diff --git a/getting-started/create-a-hello-world-extension.md b/getting-started/create-a-hello-world-extension.md deleted file mode 100644 index 2e39ab1..0000000 --- a/getting-started/create-a-hello-world-extension.md +++ /dev/null @@ -1,190 +0,0 @@ ---- -layout: - title: - visible: true - description: - visible: false - tableOfContents: - visible: true - outline: - visible: true - pagination: - visible: true ---- - -# Create a hello world extension - -In this chapter, we are going to create a `Hello World` extension step by step, available in Python, Go, and C++. Feel free to choose whichever language you prefer. So buckle up. - -## Prerequisites - -Before diving into this chapter, you’ll need to be familiar with the [basics covered earlier](quickstart.md). Specifically, ensure you understand how to use `docker compose up` and are aware of the services running in the background. - -## 1. Compose up the servers - -First things first, let’s start by composing the servers. Run the following command: - -{% hint style="info" %} -If the caption says `Terminal`, it means you are running the command locally. If the caption says `Bash`, it means you are running the command in the Docker container. -{% endhint %} - -{% code title=">_ Terminal" %} -```bash -docker compose up -``` -{% endcode %} - -Once the command is entered, you should see output similar to this: - -
....
-Attaching to astra_agents_dev, astra_graph_designer, astra_playground
-astra_agents_dev      | >> run graph designer server
-astra_agents_dev      | cd agents && tman dev-server
-astra_agents_dev      | :-)  Starting server at http://0.0.0.0:49483
-astra_graph_designer  |   ▲ Next.js 14.2.4
-astra_graph_designer  |   - Local:        http://localhost:3000
-astra_graph_designer  |   - Network:      http://0.0.0.0:3000
-astra_graph_designer  | 
-astra_graph_designer  |  ✓ Starting...
-astra_playground      |   ▲ Next.js 14.2.4
-astra_playground      |   - Local:        http://localhost:3000
-astra_playground      |   - Network:      http://0.0.0.0:3000
-astra_playground      | 
-astra_playground      |  ✓ Starting...
-astra_graph_designer  |  ✓ Ready in 293ms
-astra_playground      |  ✓ Ready in 293ms
-...
-
- -Now, we’ve got the following services running: - -• `astra_agents_dev` at `http://0.0.0.0:49483` (the backend server for the Graph Designer) - -• `astra_graph_designer` at `http://localhost:3000` (the UI of the Graph Designer) - -• `astra_playground` at `http://localhost:3001` (the UI of the Astra agent) - -## 2. Enter the docker container - -To work within the isolated environment, run the following command: - -{% code title=">_ Terminal" %} -```bash -docker exec -it astra_agents_dev bash -``` -{% endcode %} - -## 3. Create the hello world extension - -By running the following commands, an extension called `hello_world` will be created in Python, Go, or C++. - -{% tabs %} -{% tab title="Python" %} -
cd agents/ten_packages/extension
-
-tman install extension default_extension_python --template-mode --template-data package_name=hello_world --template-data class_name_prefix=HelloWorld
-
-cd /app
-
-{% endtab %} - -{% tab title="Go" %} -
cd agents/ten_packages/extension
-
-tman install extension default_extension_go --template-mode --template-data package_name=hello_world --template-data class_name_prefix=HelloWorld
-
-cd /app
-
-{% endtab %} - -{% tab title="C++" %} -
cd agents/ten_packages/extension
-
-tman install extension default_extension_cpp --template-mode --template-data package_name=hello_world --template-data class_name_prefix=HelloWorld
-
-cd /app
-
-{% endtab %} -{% endtabs %} - -After running the command, the log will display something like this: - -
...
-Resolving packages...
-:-)  Install successfully in xxx seconds
-...
-
- -## 4. Adding API to the extension - -Navigate into the `hello_world` directory and open manifest.json. Add the API objects with `data_in` and `cmd_out`, which we will use shortly within the Graph Designer: - -
{
-  "type": "extension",
-  "name": "hello_world",
-  "version": "0.4.1",
-  "language": "python",
-  "dependencies": [
-    {
-      "type": "system",
-      "name": "rte_runtime_python",
-      "version": "0.4.1"
-    }
-  ],
-  "api": {
-    "data_in": [
-      {
-        "name": "text_data",
-        "property": {
-          "text": {
-            "type": "string"
-          },
-          "is_final": {
-            "type": "bool"
-          }
-        }
-      }
-    ],
-    "cmd_out": [
-      {
-        "name": "flush"
-      }
-    ]
-  }
-}
-
- -For detailed information on the API and schema, please refer to [ten-api-beta.md](../ten-service/ten-api-beta.md "mention") and [ten-schema-beta.md](../ten-service/ten-schema-beta.md "mention"). - -## 5. Build the extension - -Let's use `cd /app` command to go back to the root of the project, and run `make build` to build the extension. - -{% code title=">_ Bash" %} -```bash -cd /app - -make build -``` -{% endcode %} - -## 6. Restart the server - -You don’t need to restart the server when you first build the agent. However, after making minor updates, if refreshing the page doesn’t apply the changes, you’ll need to restart the server in Docker to ensure the updates take effect. - -

Restart the server for astra_agents_dev

- -## 7. Verify the extension - -Open `http://localhost:3001` in your browser. You should see `hello_world` in the left menu. Drag it to the canvas, and connect it to the `text_data` input and `flash` output. - -You see the green and red color indicting the possible routes of node connecting. - -

hello_world extension

- -Congratulations! You’ve successfully created your first `hello_world` extension, and it’s working seamlessly within the Graph Designer canvas. - -## 8. Check the network requests - -Open Chrome DevTools, navigate to the Network panel, and monitor the requests. You should see the status codes returning as 200, indicating that the changes have been successfully processed. - diff --git a/getting-started/publish-your-docs.md b/getting-started/publish-your-docs.md deleted file mode 100644 index 3bf5370..0000000 --- a/getting-started/publish-your-docs.md +++ /dev/null @@ -1,70 +0,0 @@ ---- -layout: - title: - visible: true - description: - visible: false - tableOfContents: - visible: true - outline: - visible: true - pagination: - visible: true ---- - -# Customize your agent - -There are two primary methods to customize the Astra agent locally: - -## Using the power of graph designer (recommended) - -
- -The Graph Designer is a user-friendly, visual tool that allows you to create and modify the behavior and responses of the Astra agent without needing to write code. This approach is highly recommended for its ease of use and efficiency. By leveraging the Graph Designer, you can quickly design complex interactions and workflows through a graphical interface, making it accessible even for those with limited programming experience. - -## Editing the code yourself - -For those who prefer a more hands-on approach or need advanced customization, you can directly edit the source code of the Astra agent. This method requires a good understanding of the codebase and programming languages used in the project. By manually editing the code, you have full control over every aspect of the agent’s functionality, allowing for highly tailored and specific customizations. This approach is ideal for developers who need to implement unique features or integrate the agent with other systems. - -{% tabs %} -{% tab title="property.json" %} -
// ...
-"nodes": [
-    {
-        "type": "extension",
-        "extension_group": "default",
-        "addon": "agora_rtc",
-        "name": "agora_rtc",
-        "property": {
-            "app_id": "app-id",
-            "token": "<agora_token>",
-            "channel": "astra_agents_test",
-            "stream_id": 1234,
-            "remote_stream_id": 123,
-            "subscribe_audio": true,
-            "publish_audio": true,
-            "publish_data": true,
-            "enable_agora_asr": true,
-            "agora_asr_vendor_name": "microsoft",
-            "agora_asr_language": "en-US",
-            "agora_asr_vendor_key": "stt-key",
-            "agora_asr_vendor_region": "stt-region",
-            "agora_asr_session_control_file_path": "session_control.conf"
-        }
-    },    
-// ...
-
- - -{% endtab %} - -{% tab title="config.go" %} -
// ...
-// Default graph name
-graphNameDefault = "va.openai.azure" 
-// ...
-
-{% endtab %} -{% endtabs %} - -Save both files, then run `make build`. Your agent, complete with the intended extensions, should now be up and running. diff --git a/getting-started/quickstart.md b/getting-started/quickstart.md deleted file mode 100644 index c25e69d..0000000 --- a/getting-started/quickstart.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -layout: - title: - visible: true - description: - visible: false - tableOfContents: - visible: true - outline: - visible: true - pagination: - visible: true ---- - -# Quickstart - -In this chapter, we’ll build the Astra agent together. For additional help, check out the YouTube video tutorial at the end. - -
- -## Prerequisites - -{% tabs %} -{% tab title="API Keys" %} -* Agora App ID and App Certificate([read here on how](https://docs.agora.io/en/video-calling/get-started/manage-agora-account?platform=web)) -* Azure [speech-to-text](https://azure.microsoft.com/en-us/products/ai-services/speech-to-text) and [text-to-speech](https://azure.microsoft.com/en-us/products/ai-services/text-to-speech) API keys -* [OpenAI](https://openai.com/index/openai-api/) API key -{% endtab %} - -{% tab title="Installations" %} -* [Docker](https://www.docker.com/) / [Docker Compose](https://docs.docker.com/compose/) -* [Node.js(LTS) v18](https://nodejs.org/en) -{% endtab %} - -{% tab title="Minimum system requirements" %} -:tada: CPU >= 2 Core - -:smile: RAM >= 4 GB -{% endtab %} -{% endtabs %} - -**Docker setting on Apple Silicon** - -{% hint style="info" %} -You will need to uncheck "Use Rosetta for x86\_64/amd64 emulation on Apple Silicon" option for Docker if you are on Apple Silicon, otherwise the server is not going to work. -{% endhint %} - -

Make sure the box is unchecked

- -## Next step - -**1. Prepare config files** - -In the root of the project, use `cd` command to create \`.env\` file from example . It will be used to store information for \`docker compose\` later. - -{% code title=">_ Terminal" %} -```sh -cp ./.env.example ./.env -``` -{% endcode %} - -**2. Setup API keys & Environment variables in .env file** - -Open the `.env` file and fill in the keys and regions. This is also where you can choose to use any different extensions: - -{% code title=".env" %} -```bash -# Agora App ID and App Certificate -AGORA_APP_ID= -# Certificate is only required when enabled within Agora.io account -AGORA_APP_CERTIFICATE= - -# Azure STT key and region -AZURE_STT_KEY= -AZURE_STT_REGION= - -# Azure TTS key and region -AZURE_TTS_KEY= -AZURE_TTS_REGION= - -# OpenAI API key -OPENAI_API_KEY= -``` -{% endcode %} - -**3. Start agent builder toolkit containers** - -In the same directory, run the `docker` command to compose containers: - -{% code title=">_ Terminal" %} -```bash -docker compose up -``` -{% endcode %} - -**4. Build Astra agent** - -Open up a separate terminal window, build the agent and start the server: - -{% code title=">_ Bash" %} -```bash -docker exec -it astra_agents_dev bash -make build -``` -{% endcode %} - -**5. Start the server** - -Now the server is running at port: 8080. - -{% code title=">_ Bash" %} -```bash -make run-server -``` -{% endcode %} - -## **Finish and verify your agent** - -You can open [https://localhost:3001](https://localhost:3001/) in browser to use your graph designer. Simultaneously, open another tab at [https://localhost:3000](https://localhost:3000/) to see the customized voice agent up and running. - -Now you have the power of the Graph Designer at your fingertips to perform the magic of agent customization yourself. 🎉 - -**Graph designer** - -TEN Graph Designer (beta), a tool that requires zero coding knowledge and makes the experience of creating agentic applications smoother. - -

Graph Designer

- -## Video tutorials - -{% tabs %} -{% tab title="English" %} -{% embed url="https://www.youtube.com/watch?t=1s&v=_AZ3RedzvRg" %} -{% endtab %} - -{% tab title="中文" %} -{% embed url="https://www.youtube.com/watch?v=MbqF4c2Myrw" %} -{% endtab %} -{% endtabs %}