From 9317657051805eba0a5cdf8c69319a6f7d5bffc0 Mon Sep 17 00:00:00 2001
From: Sanket Rajendra Shinde
 <126979961+sanketshinde3001@users.noreply.github.com>
Date: Fri, 18 Oct 2024 15:05:13 +0530
Subject: [PATCH] Improved UI of Videos , Images and GIFS in DOCS

---
 .../en/docs/getting-started/introduction.mdx  | 32 +++++++++++++++++--
 .../en/docs/getting-started/quick-start.mdx   | 15 ++++++++-
 .../zh/docs/getting-started/introduction.mdx  | 32 +++++++++++++++++--
 .../zh/docs/getting-started/quick-start.mdx   | 15 ++++++++-
 4 files changed, 86 insertions(+), 8 deletions(-)

diff --git a/apps/site/docs/en/docs/getting-started/introduction.mdx b/apps/site/docs/en/docs/getting-started/introduction.mdx
index 2a0a98cb..e9ebec13 100644
--- a/apps/site/docs/en/docs/getting-started/introduction.mdx
+++ b/apps/site/docs/en/docs/getting-started/introduction.mdx
@@ -6,7 +6,7 @@ Introducing Midscene.js, an innovative SDK designed to bring joy back to program
 
 Midscene.js leverages a multimodal Large Language Model (LLM) to intuitively “understand” your user interface and carry out the necessary actions. You can simply describe the interaction steps or expected data formats, and the AI will handle the execution for you.
 
-<video src="/introduce/ai-todo.mp4" controls/>
+<video src="/introduce/ai-todo.mp4" controls style={{ borderRadius: '10px', border: '2px solid #ccc', width: '100%', margin: '20px auto', display: 'block' }}/>
 
 ## Features
 
@@ -42,10 +42,36 @@ With our visualization tool, you can easily debug the prompt and AI response. Al
 
 You may open the [Online Visualization Tool](/visualization/index.html) to see the showcase.
 
-![](/visualizer.jpg)
+<img 
+  src="/visualizer.jpg" 
+  alt="Visualizer"
+  style={{
+    width: '100%',
+    maxWidth: '900px',
+    margin: '20px auto',
+    display: 'block',
+    borderRadius: '8px',
+    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
+    border: '1px solid #eaeaea'
+  }}
+/>
 
 ## Flow Chart
 
 Here is a flowchart that describes the core process of the interaction between Midscene and AI.
 
-![](/flow.png)
\ No newline at end of file
+<img 
+  src="/flow.png" 
+  alt="Flow Diagram"
+  style={{
+    width: '100%',
+    maxWidth: '900px',
+    margin: '30px auto',
+    display: 'block',
+    borderRadius: '10px',
+    boxShadow: '0 3px 10px rgba(0, 0, 0, 0.1)',
+    border: '1px solid #ddd',
+    padding: '10px',
+    backgroundColor: '#fff'
+  }}
+/>
\ No newline at end of file
diff --git a/apps/site/docs/en/docs/getting-started/quick-start.mdx b/apps/site/docs/en/docs/getting-started/quick-start.mdx
index 78314e7b..573930af 100644
--- a/apps/site/docs/en/docs/getting-started/quick-start.mdx
+++ b/apps/site/docs/en/docs/getting-started/quick-start.mdx
@@ -212,4 +212,17 @@ Alternatively, you can import the `./midscene_run/report/latest.web-dump.json` f
 
 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)
+<img 
+  src="/view-demo-visualization.gif" 
+  alt="Demo Visualization"
+  style={{
+    width: '100%',
+    maxWidth: '800px',
+    margin: '20px auto',
+    display: 'block',
+    borderRadius: '10px',
+    boxShadow: '0 3px 10px rgba(0, 0, 0, 0.1)',
+    border: '1px solid #ddd',
+    backgroundColor: '#fff'
+  }}
+/>
diff --git a/apps/site/docs/zh/docs/getting-started/introduction.mdx b/apps/site/docs/zh/docs/getting-started/introduction.mdx
index ee4b168d..dfcf71f2 100644
--- a/apps/site/docs/zh/docs/getting-started/introduction.mdx
+++ b/apps/site/docs/zh/docs/getting-started/introduction.mdx
@@ -6,7 +6,7 @@ UI 自动化太难写了。自动化脚本里到处都是选择器，比如 `#id
 
 Midscene.js 采用了多模态大语言模型（LLM），能够直观地“理解”你的用户界面并执行必要的操作。你只需描述交互步骤或期望的数据格式，AI 就能为你完成任务。
 
-<video src="/introduce/ai-todo.mp4" controls/>
+<video src="/introduce/ai-todo.mp4" controls style={{ borderRadius: '10px', border: '2px solid #ccc', width: '100%', margin: '20px auto', display: 'block' }}/>
 
 ## 特性
 
@@ -39,10 +39,36 @@ console.log("headphones in stock", items);
 
 你可以打开 [可视化工具](/visualization/index.html) 来查看示例。
 
-![](/visualizer.jpg)
+<img 
+  src="/visualizer.jpg" 
+  alt="Visualizer"
+  style={{
+    width: '100%',
+    maxWidth: '900px',
+    margin: '20px auto',
+    display: 'block',
+    borderRadius: '8px',
+    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
+    border: '1px solid #eaeaea'
+  }}
+/>
 
 ## 流程图
 
 下图展示了 Midscene 的核心流程。
 
-![](/flow.png)
\ No newline at end of file
+<img 
+  src="/flow.png" 
+  alt="Flow Diagram"
+  style={{
+    width: '100%',
+    maxWidth: '900px',
+    margin: '30px auto',
+    display: 'block',
+    borderRadius: '10px',
+    boxShadow: '0 3px 10px rgba(0, 0, 0, 0.1)',
+    border: '1px solid #ddd',
+    padding: '10px',
+    backgroundColor: '#fff'
+  }}
+/>
\ No newline at end of file
diff --git a/apps/site/docs/zh/docs/getting-started/quick-start.mdx b/apps/site/docs/zh/docs/getting-started/quick-start.mdx
index d02ae3ef..0d49a608 100644
--- a/apps/site/docs/zh/docs/getting-started/quick-start.mdx
+++ b/apps/site/docs/zh/docs/getting-started/quick-start.mdx
@@ -220,5 +220,18 @@ npx ts-node demo.ts
 
 在[可视化工具](/visualization/)中点击"加载演示"按钮，你将能够看到之前代码的运行结果以及其他一些示例。
 
-![](/view-demo-visualization.gif)
+<img 
+  src="/view-demo-visualization.gif" 
+  alt="Demo Visualization"
+  style={{
+    width: '100%',
+    maxWidth: '800px',
+    margin: '20px auto',
+    display: 'block',
+    borderRadius: '10px',
+    boxShadow: '0 3px 10px rgba(0, 0, 0, 0.1)',
+    border: '1px solid #ddd',
+    backgroundColor: '#fff'
+  }}
+/>