feat: update docs (#25)

apps/site/docs/en/docs/getting-started/_meta.json

@@ -1,5 +1,5 @@
 [
   "introduction",
-  "quick-start.md",
+  "quick-start",
   "demo.md"
 ]

apps/site/docs/en/docs/getting-started/quick-start.md → apps/site/docs/en/docs/getting-started/quick-start.mdx

@@ -1,5 +1,8 @@
 # Quick Start
 
+import { PackageManagerTabs } from '@theme';
+
+
 In this example, we use OpenAI GPT-4o to search headphones on eBay, and then get the result items and prices in JSON format. 
 
 Remember to prepare an API key that is eligible for accessing OpenAI's GPT-4o before running.
@@ -21,9 +24,7 @@ We assume you already have a project with Puppeteer.
 
 ### add the dependency
 
-```bash
-npm install @midscene/web --save-dev
-```
+<PackageManagerTabs command="install @midscene/web --save-dev" />
 
 ### Step 1. update playwright.config.ts
 
@@ -51,7 +52,7 @@ export const test = base.extend<PlayWrightAiFixtureType>(PlaywrightAiFixture());
 
 Save the following code as `./e2e/ebay-search.spec.ts`
 
-```typescript
+```typescript title="./e2e/ebay-search.spec.ts"
 import { expect } from "@playwright/test";
 import { test } from "./fixture";
 
@@ -97,16 +98,13 @@ npx http-server ./midscene_run/report -p 9888 -o -s
 
 ### Step 1. install dependencies
 
-```bash
-npm install @midscene/web --save-dev
-npm install puppeteer ts-node --save-dev 
-```
+<PackageManagerTabs command="install @midscene/web puppeteer ts-node --save-dev" />
 
 ### Step 2. write scripts
 
 Write and save the following code as `./demo.ts`.
 
-```typescript
+```typescript title="./demo.ts"
 import puppeteer from "puppeteer";
 import { PuppeteerAgent } from "@midscene/web";
 
@@ -181,4 +179,9 @@ npx ts-node demo.ts
 
 After running, MidScene will generate a log dump, which is placed in `./midscene_run/report/latest.web-dump.json` by default. Then put this file into [Visualization Tool](/visualization/), and you will have a clearer understanding of the process.
 
+
+## View demo report
+
 Click the 'Load Demo' button in the [Visualization Tool](/visualization/), you will be able to see the results of the previous code as well as some other samples.
+
+![](/view-demo-visualization.gif)

apps/site/docs/en/index.md

@@ -3,7 +3,9 @@ pageType: home
 
 hero:
   name: MidScene.js
-  text: Joyful Automation by AI
+  text: |
+    Powered by AI
+    Joyful UI Automation
   tagline: 
   actions:
     - theme: brand
@@ -17,14 +19,14 @@ hero:
     alt: MidScene Logo
 features:
   - title: Natural Language Interaction
-    details: Describe the steps, let MidScene plan and execute for you.
-    icon: 🔍
+    details: Describe the steps and let MidScene plan and control the user interface for you
+    icon: 👆
   - title: Understand UI, Answer in JSON
-    details: Provide prompts for the desired data format, and then receive the predictable answer in JSON format.
-    icon: 🤔
+    details: Provide prompts regarding the desired data format, and then receive the expected response in JSON format.
+    icon: 🔍
   - title: Intuitive Assertion
     details: Make assertions in natural language. It’s all based on AI understanding.
-    icon: ⛳
+    icon: 🤔
   - title: Out-of-box LLM
     details: It is fine to use public multimodal LLMs like GPT-4o. There is no need for any custom training.
     icon: 🪓

apps/site/docs/zh/docs/getting-started/_meta.json

@@ -1,5 +1,5 @@
 [
   "introduction",
-  "quick-start.md",
-  "demo.md"
+  "quick-start",
+  "demo"
 ]

apps/site/docs/zh/docs/getting-started/quick-start.md → apps/site/docs/zh/docs/getting-started/quick-start.mdx

@@ -23,9 +23,7 @@ export OPENAI_API_KEY="sk-abcdefghijklmnopqrstuvwxyz"
 
 ### 新增依赖 
 
-```bash
-npm install @midscene/web --save-dev
-```
+<PackageManagerTabs command="install @midscene/web --save-dev" />
 
 ### 第一步：更新 playwright.config.ts
 
@@ -53,7 +51,7 @@ export const test = base.extend<PlayWrightAiFixtureType>(PlaywrightAiFixture());
 
 编写下方代码，保存为 `./e2e/ebay-search.spec.ts`
 
-```typescript
+```typescript title="./e2e/ebay-search.spec.ts"
 import { expect } from "@playwright/test";
 import { test } from "./fixture";
 
@@ -109,7 +107,7 @@ npm install puppeteer ts-node --save-dev
 
 编写下方代码，保存为 `./demo.ts`
 
-```typescript
+```typescript title="./demo.ts"
 import puppeteer from "puppeteer";
 import { PuppeteerAgent } from "@midscene/web";
 
@@ -186,4 +184,8 @@ npx ts-node demo.ts
 
 运行 MidScene 之后，系统会生成一个日志文件，默认存放在 `./midscene_run/report/latest.web-dump.json`。然后，你可以把这个文件导入 [可视化工具](/visualization/)，这样你就能更清楚地了解整个过程。
 
+## 访问示例报告
+
 在 [可视化工具](/visualization/) 中，点击 `Load Demo` 按钮，你将能够看到上方代码的运行结果以及其他的一些示例。
+
+![](/view-demo-visualization.gif)

apps/site/docs/zh/docs/more/prompting-tips.md

@@ -2,9 +2,9 @@
 
 你在 MidScene 编写的自然语言参数，最终都会变成提示词（Prompt）发送给大语言模型。以下是一些可以帮助提升效果的提示词工程（Prompt Engineering）技巧。
 
-## 目的是获得更稳定的响应
+## 目标是获得更稳定的响应
 
-由于 AI 常常会“幻想”，调优的目的是在多次运行中获得模型的稳定响应。大多数情况下，通过使用良好的提示，LLM 的响应效果可以变得更好。
+由于 AI 常常会“幻想”，调优的目标是在多次运行中获得模型的稳定响应。大多数情况下，通过使用良好的提示，LLM 的响应效果可以变得更好。
 
 ## 提供更详细的描述并提供样例
 

apps/site/docs/zh/index.md

@@ -3,35 +3,38 @@ pageType: home
 
 hero:
   name: MidScene.js
-  text: Joyful Automation by AI
+  text: |
+    Powered by AI
+    Joyful UI Automation
   tagline: 
   actions:
     - theme: brand
-      text: Introduction
+      text: 介绍
       link: /docs/getting-started/introduction
     - theme: alt
-      text: Quick Start
+      text: 快速开始
       link: /docs/getting-started/quick-start
   image:
     src: /midscene.png
     alt: MidScene Logo
 features:
 
-  - title: 自然语言交互
-    details: 描述操作步骤，MidScene 为你自动执行
-    icon: 🔍
+  - title: 自然语言控制界面
+    details: 描述操作步骤，MidScene 为你自动操控界面
+    icon: 👆
   - title: 理解界面，提取数据
     details: 描述你需要的数据和格式，由 MidScene 提取并生成 JSON
-    icon: 🤔
+    icon: 🔍
   - title: 描述并断言
-    details: 使用自然语言进行描述和断言
-    icon: ⛳
+    details: 使用自然语言对界面进行断言
+    icon: 🤔
   - title: 开箱即用的模型
-    details: 无需自行训练模型，直接使用 GPT-4o
+    details: 无需自行训练模型，可以直接使用 GPT-4o
     icon: 🪓
-  - title: 可视化
-    details: 使用我们的可视化工具，清晰掌握 SDK 的每个步骤
+  - title: 可视化工具
+    details: 使用配套的可视化工具，清晰掌握 SDK 的每个步骤
     icon: 🎞️
   - title: 前所未有的新体验!
-    details: 通过全新的方式编写自动化脚本 试试吧！
+    details: 更自然、更易于维护的 UI 自动化编写体验。试试吧！
+    icon: 🔥
 ---

packages/visualizer/src/index.tsx

@@ -9,6 +9,7 @@ import Timeline from './component/timeline';
 import DetailPanel from './component/detail-panel';
 import Logo from './component/assets/logo-plain.svg';
 import GlobalHoverPreview from './component/global-hover-preview';
+import demoDump from './demo-dump.json';
 import { useExecutionDump } from '@/component/store';
 import DetailSide from '@/component/detail-side';
 import Sidebar from '@/component/sidebar';
@@ -90,14 +91,8 @@ export function Visualizer(props: {
     },
   };
 
-  const loadTasksDemo = () => {
-    // setExecutionDump(actionDemo);
-    // message.info('Your are viewing the demo data.');
-  };
-
-  const loadInsightDemo = () => {
-    // loadInsightDump(InsightDemo);
-    // message.info('Your are viewing the demo data.');
+  const loadDemoDump = () => {
+    setGroupedDump(demoDump as any);
   };
 
   let mainContent: JSX.Element;
@@ -122,19 +117,16 @@ export function Visualizer(props: {
           <p className="ant-upload-text">
             The latest dump file is usually placed in{' '}
             <b>
-              <i>./midscene_run/</i>
+              <i>./midscene_run/report</i>
             </b>
           </p>
           <p className="ant-upload-text">
             All data will be processed locally by the browser. No data will be sent to the server.
           </p>
         </Dragger>
         <div className="demo-loader">
-          <Button type="link" onClick={loadTasksDemo}>
-            Load Tasks Demo
-          </Button>
-          <Button type="link" onClick={loadInsightDemo}>
-            Load Insight Demo
+          <Button type="link" onClick={loadDemoDump}>
+            Load Demo
           </Button>
         </div>
       </div>