feat: use our new version of logo (#229)

* feat: use our new version of logo

* fix: lint

* feat: update extension screenshot

* feat: update video cover

* feat: readme

README.md

@@ -1,12 +1,12 @@
 <p align="center">
-  <img alt="Midscene.js"  width="260" src="https://github.com/user-attachments/assets/bff5e76f-ea5c-42b7-bd12-0143a04671cf">
+  <img alt="Midscene.js"  width="260" src="https://github.com/user-attachments/assets/f60de3c1-dd6f-4213-97a1-85bf7c6e79e4">
 </p>
 
 
 <h1 align="center">Midscene.js</h1>
 <div align="center">
 
-English | [简体中文](./README.zh.md) | [日本語](./README.ja.md)
+English | [简体中文](./README.zh.md)
 
 </div>
 
@@ -34,8 +34,9 @@ Midscene.js is an AI-powered automation SDK can control the page, perform assert
 - **Natural Language Interaction 👆**: Describe the steps, and let Midscene plan and control the user interface for you
 - **Understand UI, Answer in JSON 🔍**: Provide prompts regarding the desired data format, and then receive the expected response in JSON format.
 - **Intuitive Assertion 🤔**: Make assertions in natural language; it’s all based on AI understanding.
-- **Out-of-box LLM 🪓**: It is fine to use public multimodal LLMs like GPT-4o. There is no need for any custom training.
+- **Experience by Chrome Extension 🖥️**: Start immediately with the Chrome Extension. No code is needed while exploring.
 - **Visualized Report 🎞️**: With our visualized report file, you can easily understand and debug the whole process.
+- **Out-of-box LLM 🪓**: It is fine to use public multimodal LLMs like GPT-4o. There is no need for any custom training.
 - **Brand New Experience! 🔥**: Experience a whole new world of automation development. Enjoy!
 
 ## Resources 📄

README.zh.md

@@ -1,11 +1,11 @@
 <p align="center">
-  <img alt="Midscene.js"  width="260" src="https://github.com/user-attachments/assets/bff5e76f-ea5c-42b7-bd12-0143a04671cf">
+  <img alt="Midscene.js"  width="260" src="https://github.com/user-attachments/assets/f60de3c1-dd6f-4213-97a1-85bf7c6e79e4">
 </p>
 
 <h1 align="center">Midscene.js</h1>
 <div align="center">
 
-[English](./README.md) | 简体中文 | [日本語](./README.ja.md)
+[English](./README.md) | 简体中文
 
 </div>
 
@@ -31,6 +31,7 @@ Midscene.js 是一个由 AI 驱动的自动化 SDK，能够使用自然语言对
 - **自然语言互动 👆**：只需描述你的步骤，Midscene 会为你规划和操作用户界面
 - **理解UI、JSON格式回答 🔍**：你可以提出关于数据格式的要求，然后得到 JSON 格式的预期回应。
 - **直观断言 🤔**：用自然语言表达你的断言，AI 会理解并处理。
+- **Chrome 插件体验 🖥️**：通过 Chrome 插件，你可以立即开始体验，无需编写代码。
 - **开箱即用的LLM 🪓**：支持使用公开的多模态大语言模型（ 如 GPT-4o ），无需任何定制训练。
 - **可视化报告 🎞️**：通过我们的测试报告和 Playground，你可以轻松理解和调试整个过程。
 - **全新体验 🔥**：体验全新的自动化开发世界，尽情享受吧！

apps/site/rspress.config.ts

@@ -26,16 +26,16 @@ export default defineConfig({
           'https://applink.larkoffice.com/client/chat/chatter/add_by_link?link_token=291q2b25-e913-411a-8c51-191e59aab14d',
       },
     ],
-    footer: {
-      message: `
-        <footer class="footer">
-          <div class="footer-content">
-            <img src="/midscene-icon.png" alt="Midscene.js Logo" class="footer-logo" />
-            <p class="footer-text">&copy; 2024 Midscene.js. All Rights Reserved.</p>
-          </div>
-        </footer>
-      `,
-    },
+    // footer: {
+    //   message: `
+    //     <footer class="footer">
+    //       <div class="footer-content">
+    //         <img src="/midscene-icon.png" alt="Midscene.js Logo" class="footer-logo" />
+    //         <p class="footer-text">&copy; 2024 Midscene.js. All Rights Reserved.</p>
+    //       </div>
+    //     </footer>
+    //   `,
+    // },
     locales: [
       {
         lang: 'en',

apps/site/styles/index.css

@@ -1,3 +1,7 @@
+.rspress-logo {
+  height: 2.6rem;
+}
+
 /* Footer styles */
 
 .footer {

packages/visualizer/src/component/logo.less

@@ -1,5 +1,5 @@
 .logo img {
-  height: 20px;
+  height: 30px;
   line-height: 30px;
   vertical-align: baseline;
   vertical-align: -webkit-baseline-middle;

packages/visualizer/unpacked-extension/manifest.json

@@ -16,13 +16,13 @@
     "<all_urls>"
   ],
   "action": {
-    "default_icon": "icon.png",
-    "default_title": "Midscene.js Playground"
+    "default_icon": "icon128.png",
+    "default_title": "Midscene.js"
   },
   "side_panel": {
     "default_path": "./pages/sidepanel.html"
   },
   "icons": {
-    "128": "icon.png"
+    "128": "icon128.png"
   }
 }