From 632e7e237b0527487f320038b146a6bb6664cbb4 Mon Sep 17 00:00:00 2001
From: EC <2340896+cyfyifanchen@users.noreply.github.com>
Date: Sat, 10 Aug 2024 22:30:03 +0800
Subject: [PATCH] Small change of readme and UI (#172)
* Small change of readme and UI
* Updating readmes
* Get rid of the banner image too obvious
---
README.md | 37 +++++++++----------
docs/readmes/README-CN.md | 34 +++++++++--------
playground/src/components/loginCard/index.tsx | 2 +-
3 files changed, 37 insertions(+), 36 deletions(-)
diff --git a/README.md b/README.md
index d5f914d2..8e82adc6 100644
--- a/README.md
+++ b/README.md
@@ -1,15 +1,13 @@
-![Astra Banner Image](https://github.com/rte-design/docs/blob/main/assets/imgs/banner-image-without-tagline.png)
-
-[![Follow on X](https://img.shields.io/twitter/follow/AstraFramework?logo=X&color=%20%23f5f5f5)](https://twitter.com/intent/follow?screen_name=AstraFramework)
+[![Follow on X](https://img.shields.io/twitter/follow/ten_platform?logo=X&color=%20%23f5f5f5)](https://twitter.com/intent/follow?screen_name=ten_platform)
[![Discussion posts](https://img.shields.io/github/discussions/rte-design/astra.ai?labelColor=%20%23FDB062&color=%20%23f79009)](https://github.com/rte-design/astra.ai/discussions/)
[![Commits](https://img.shields.io/github/commit-activity/m/rte-design/astra.ai?labelColor=%20%237d89b0&color=%20%235d6b98)](https://github.com/rte-design/astra.ai/graphs/commit-activity)
[![Issues closed](https://img.shields.io/github/issues-search?query=repo%3Arte-design%2Fastra.ai%20is%3Aclosed&label=issues%20closed&labelColor=green&color=green)](https://github.com/rte-design/ASTRA.ai/issues)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/rte-design/ASTRA.ai/pulls)
[![GitHub license](https://img.shields.io/badge/License-Apache_2.0-blue.svg?labelColor=%20%239b8afb&color=%20%237a5af8)](https://github.com/rte-design/ASTRA.ai/blob/main/LICENSE)
-[![Discord ASTRA Community](https://dcbadge.vercel.app/api/server/VnPftUzAMJ)](https://discord.gg/VnPftUzAMJ)
+[![Discord TEN Community](https://dcbadge.vercel.app/api/server/VnPftUzAMJ)](https://discord.gg/VnPftUzAMJ)
[![GitHub watchers](https://img.shields.io/github/watchers/rte-design/astra.ai?style=social&label=Watch)](https://GitHub.com/rte-design/astra.ai/watchers/?WT.mc_id=academic-105485-koreyst)
[![GitHub forks](https://img.shields.io/github/forks/rte-design/astra.ai?style=social&label=Fork)](https://GitHub.com/rte-design/astra.ai/network/?WT.mc_id=academic-105485-koreyst)
@@ -18,11 +16,11 @@
-[Lightning Fast](./docs/astra-architecture.md)
+[Documentation](https://astra-9.gitbook.io/ten-platform)
•
-[Multimodal Interactive](./docs/astra-architecture.md#astra-extension)
+[Getting Started](https://astra-9.gitbook.io/ten-platform/getting-started/quickstart)
•
-[Highly Customizable](./docs/astra-architecture.md#-astra-extension-store)
+[Tutorials](https://app.gitbook.com/o/we7IoLK5sA6RQzhItfkW/s/4KgjqM5ChU0dSGjTLZmG/~/changes/6/tutorials/how-to-build-extension-with-go)
@@ -59,7 +57,7 @@ You will need to uncheck "Use Rosetta for x86_64/amd64 emulation on Apple Silico
### Next step
-#### 1. Prepare config files
+#### 1. Modify config files
In the root of the project, create these files from the examples. They will be used to store information for Docker Compose later.
```bash
# Create .env from the example
@@ -69,7 +67,7 @@ cp ./.env.example ./.env
cp ./agents/property.json.example ./agents/property.json
```
-#### 2. Setup API keys & Environment variables in .env file
+#### 2. Setup API keys
Open the `.env` file and fill in the keys and regions. This is also where you can choose to use any different extensions:
```
# Agora App ID and Agora App Certificate
@@ -92,40 +90,39 @@ AZURE_TTS_REGION=
OPENAI_API_KEY=
```
-#### 3. Start agent builder toolkit containers
+#### 3. Start agent development containers
In the same directory, run the `docker` command to compose containers:
```bash
# Execute docker compose up to start the services
docker compose up
```
-#### 4. Build your agent and start server
+#### 4. Build agent and start server
Open up a separate terminal window, build the agent and start the server:
```bash
# Enter container to build agent
docker exec -it astra_agents_dev bash
make build
-# Run server on port 8080
+# Once the build is done, run server on port 8080
make run-server
```
-#### 5. Use graph designer to customize voice agent
-
-You can open https://localhost:3001 in browser to use your graph designer. Simultaneously, open another tab at https://localhost:3000 to see the customized voice agent up and running.
+### Finish and verify 🎉
-Now you have the power of the Graph Designer at your fingertips to perform the magic of agent customization yourself. 🎉
+#### Astra voice agent
+Open up localhost:3000 in browser to test Astra voice agent.
#### Graph designer
-TEN Graph Designer (beta), a tool that requires zero coding knowledge and makes the experience of creating agentic applications smoother.
+Open up another tab go to localhost:3001, and use graph designer to edit the flow and properties of any extensions.
![TEN Graph Designer](https://github.com/rte-design/docs/blob/main/assets/gifs/graph-designer.gif?raw=true)
-[![Follow on X](https://img.shields.io/twitter/follow/AstraFramework?logo=X&color=%20%23f5f5f5)](https://twitter.com/intent/follow?screen_name=AstraFramework)
+[![Follow on X](https://img.shields.io/twitter/follow/ten_platform?logo=X&color=%20%23f5f5f5)](https://twitter.com/intent/follow?screen_name=ten_platform)
[![Discussion posts](https://img.shields.io/github/discussions/rte-design/astra.ai?labelColor=%20%23FDB062&color=%20%23f79009)](https://github.com/rte-design/astra.ai/discussions/)
[![Commits](https://img.shields.io/github/commit-activity/m/rte-design/astra.ai?labelColor=%20%237d89b0&color=%20%235d6b98)](https://github.com/rte-design/astra.ai/graphs/commit-activity)
[![Issues closed](https://img.shields.io/github/issues-search?query=repo%3Arte-design%2Fastra.ai%20is%3Aclosed&label=issues%20closed&labelColor=green&color=green)](https://github.com/rte-design/ASTRA.ai/issues)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/rte-design/ASTRA.ai/pulls)
[![GitHub license](https://img.shields.io/badge/License-Apache_2.0-blue.svg?labelColor=%20%239b8afb&color=%20%237a5af8)](https://github.com/rte-design/ASTRA.ai/blob/main/LICENSE)
-[![WeChat](https://img.shields.io/badge/WeChat-WeChat_Group-%2307C160?logo=wechat)](https://github.com/rte-design/ASTRA.ai/issues/125)
+[![WeChat](https://img.shields.io/badge/WeChat-WeChat_Group-%2307C160?logo=wechat)](https://github.com/rte-design/ASTRA.ai/discussions/170)
[![Discord](https://dcbadge.vercel.app/api/server/VnPftUzAMJ)](https://discord.gg/VnPftUzAMJ)
@@ -22,21 +21,22 @@
-[低延迟](./docs/astra-architecture.md)
+[文档](https://astra-9.gitbook.io/ten-platform)
•
-[多模态](./docs/astra-architecture.md#astra-extension)
+[快速开始](https://astra-9.gitbook.io/ten-platform/getting-started/quickstart)
•
-[高可配](./docs/astra-architecture.md#-astra-extension-store)
+[教程](https://app.gitbook.com/o/we7IoLK5sA6RQzhItfkW/s/4KgjqM5ChU0dSGjTLZmG/~/changes/6/tutorials/how-to-build-extension-with-go)
+
-## Astra
+## Astra 语音助手
-[Astra](https://theastra.ai) 是通过 TEN 搭建出来的 voice agent, 展示了多模态,低延迟的能力。
+[Astra voice agent](https://theastra.ai) 是通过 TEN 搭建出来的 voice agent, 展示了多模态,低延迟的能力。
-[![Showcase Astra](https://github.com/rte-design/docs/blob/main/assets/gifs/astra-voice-agent.gif?raw=true)](https://theastra.ai)
+[![Showcase Astra voice agent](https://github.com/rte-design/docs/blob/main/assets/gifs/astra-voice-agent.gif?raw=true)](https://theastra.ai)
如何用搭建的 graph designer 配置 voice agent
@@ -120,13 +120,17 @@ make build
make run-server
```
-#### 5. 验证 voice agent 和 graph designer 🎉
+### 构建完成 🎉
+
+走到这里就本地构建完成了,简单 4 步,上手体验拉满!
+
+#### 验证 Astra voice agent
-现在可以打开浏览器 `http://localhost:3000` 体验 voice agent,同时可以再开浏览器的一个窗口 `http://localhost:3001` 用 graph designer 定制 voice agent。
+现在可以打开浏览器 `localhost:3000` 体验 voice agent。
-#### Graph designer
+#### 验证 Graph designer
-TEN Graph Designer (beta),通过简单拖拽和动态节点连接轻松实现多模型配置。
+同时可以再开一个 tab 在 `localhost:3001` 体验 TEN Graph Designer (beta),通过简单拖拽和动态节点连接轻松定制 Astra voice agent。
![TEN Graph Designer](https://github.com/rte-design/docs/blob/main/assets/gifs/graph-designer.gif?raw=true)
@@ -143,10 +147,10 @@ TEN Graph Designer (beta),通过简单拖拽和动态节点连接轻松实现
加入社区
- [Discord](https://discord.gg/VnPftUzAMJ):非常适合分享您的应用程序并与社区互动。
-- [WeChat Group](https://github.com/rte-design/ASTRA.ai/issues/125): 如果喜欢用微信群的社区,欢迎加入。
+- [WeChat Group](https://github.com/rte-design/ASTRA.ai/discussions/170): 如果喜欢用微信群的社区,欢迎加入。
- [Github Discussion](https://github.com/rte-design/astra.ai/discussions):非常适合提供反馈和提问。
- [GitHub Issues](https://github.com/rte-design/astra.ai/issues):最适合报告错误和提出新功能。有关更多详细信息,请参阅我们的[贡献指南](./docs/code-of-conduct/contributing.md)。
-- [X(以前的Twitter)](https://twitter.com/intent/follow?screen_name=AstraFramework):非常适合分享您的代理并与社区互动。
+- [X(以前的Twitter)](https://twitter.com/intent/follow?screen_name=ten_platform):非常适合分享您的代理并与社区互动。
代码贡献者
diff --git a/playground/src/components/loginCard/index.tsx b/playground/src/components/loginCard/index.tsx
index f672e79c..cf1b9735 100644
--- a/playground/src/components/loginCard/index.tsx
+++ b/playground/src/components/loginCard/index.tsx
@@ -53,7 +53,7 @@ const LoginCard = () => {