Improved UI of Videos , Images and GIFS in DOCS

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)
+<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'
+  }}
+/>

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'
+  }}
+/>

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)
+<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'
+  }}
+/>

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'
+  }}
+/>