Merge pull request #107 from gitplayer4/en/v2

update format

Author: gitplayer4

docs/user_manual/ai/agent.md

@@ -42,13 +42,15 @@
     Access the DeepSeek Developer Platform via the link: https://platform.deepseek.com/, first complete personal real-name authentication and registration, and then make a recharge, as shown in the figure below.
 
 ![img.png](../../img/ai/DeepSeek_Developer_Platform_Billing_Page.png)
+{: .browser-mockup}
 
 ### 2.2. Step 2: Obtain the DeepSeek API Key
 
 !!! note ""
     As shown in the figure below, enter the API keys page, click "Create API key", and keep the generated API Key in a safe place for subsequent use after creation.
 
 ![img.png](../../img/ai/DeepSeek_API_Key_Creation_Page.png)
+{: .browser-mockup}
 
 ## 3. OpenClaw Installation and Deployment
 
@@ -61,13 +63,15 @@
     Enter the "Agent" management menu under "AI" management, click to enter and switch to "Model Account" management first, then click "Add model account". Select the model provider and enter the model account information as required to complete the model account creation.
 
 ![img.png](../../img/ai/1Panel_Add_Model_Account_Page.png)
+{: .browser-mockup}
 
 ### 3.2. Step 2: Create an Agent
 
 !!! note ""
     After preparing the model account, switch to the "Agent" page and click "Create Agent", then enter the relevant parameters as required, as shown in the figure below：
 
 ![img.png](../../img/ai/1Panel_Create_Agent_Parameter_Page.png)
+{: .browser-mockup}
 
 !!! note ""
     The parameter definitions during agent creation are detailed as follows:
@@ -79,11 +83,13 @@
     - Model Provider: The currently supported models are shown in the figure. Select the DeepSeek model provider added just now. If the model account for the corresponding model provider has been added, the number of model accounts will be prompted directly.
 
 ![img.png](../../img/ai/1Panel_Model_Provider_Select_Page.png)
+{: .browser-mockup}
 
 !!! note ""
     - Other Model Parameters: After selecting the model provider, the system will automatically retrieve the maintained model accounts, as shown in the figure below. You can also check "Manual input" to enter the model information manually. If no model account has been created, click "Create model account" to complete the creation.
 
 ![img.png](../../img/ai/1Panel_Model_Account_Associate_Page.png)
+{: .browser-mockup}
 
 !!! note ""
     - Token: A token for the OpenClaw Web UI access address, which is automatically generated by the system for direct access in the follow-up.
@@ -93,25 +99,27 @@
     After configuring all the above parameters, click "Confirm" directly to start the installation of OpenClaw. The installation is completed when the prompt as shown in the figure below appears.
 
 ![img.png](../../img/ai/1Panel_OpenClaw_Installation_Log.png)
+{: .browser-mockup}
 
 ### 3.3. Step 3: Verify the Successful Deployment of OpenClaw
 
 !!! note ""
     After the installation and deployment of OpenClaw are completed, enter the agent list page and click "WebUI" to jump directly to the OpenClaw page, as shown in the figure below.
 
 ![img.png](../../img/ai/1Panel_Agent_List_OpenClaw_Page.png)
+{: .browser-mockup}
 
 !!! note ""
     After entering the OpenClaw page, send a message and check if the AI assistant responds. A normal response, as shown in the figure below, indicates that OpenClaw has been successfully deployed.
 
 ![img.png](../../img/ai/OpenClaw_WebUI_Chat_Test_Page.png)
+{: .browser-mockup}
 
 ## 4. Feishu Channel Configuration
 
 !!! note ""
     Up to this point, OpenClaw has been fully deployed. Next, we will configure the Feishu channel. To configure the Feishu channel, we first need to create an available robot in Feishu. Follow the steps below to complete the configuration step by step.
 
-!!! note ""
     Note: A personal Feishu account is used in this guide. For enterprise accounts, version release and permission authorization require administrator approval, while other operation steps remain the same.
 
 ### 4.1. Step 1: Create a Custom Enterprise App
@@ -120,30 +128,35 @@
     First, log in to Feishu and enter the Feishu Open Platform (link: https://open.feishu.cn/app), then access the "Developer Console" and select "Custom Apps", click "Create Custom App", as shown in the figure below.
 
 ![img.png](../../img/ai/Feishu_Open_Platform_Custom_Apps_List.png)
+{: .browser-mockup}
 
 !!! note ""
     As shown in the figure below, enter the relevant app name and basic information as required and click "Create".
 
 ![img.png](../../img/ai/Feishu_Create_Custom_App_Page.png)
+{: .browser-mockup}
 
 ### 4.2. Step 2: Create a Bot
 
 !!! note ""
     As shown in the figure below, click to create a bot to complete the bot creation process.
 
 ![img.png](../../img/ai/Feishu_Add_Bot_Feature_Page.png)
+{: .browser-mockup}
 
 !!! note ""
     After entering the bot page, click the edit button after bot configuration to define the bot name, as shown in the figure below：
 
 ![img.png](../../img/ai/Feishu_Bot_Setting_Page.png)
+{: .browser-mockup}
 
 ### 4.3. Step 3: Permission Configuration
 
 !!! note ""
     After creating the bot, click to enter "Permissions & Scopes" and then click "Batch import/export scopes".
 
 ![img.png](../../img/ai/Feishu_Permissions_Scopes_Page.png)
+{: .browser-mockup}
 
 !!! note ""
     Click "Batch import/export scopes", clear the default permission configuration information, copy and paste the permission authorization script as shown below, and click "Save".
@@ -190,68 +203,79 @@
     The effect after pasting is shown in the figure below：
 
 ![img.png](../../img/ai/Feishu_Batch_Import_Scopes_Page.png)
+{: .browser-mockup}
 
 !!! note ""
     Click "Next, Review New Scopes" and finally ensure that all permissions are enabled. For personal accounts, confirm the permissions by yourself; for enterprise accounts, administrator review is required. Ensure all permissions are enabled as shown in the figure below：
 
 ![img.png](../../img/ai/Feishu_Permissions_Scopes_Review_Page.png)
+{: .browser-mockup}
 
 ### 4.4. Step 4: Obtain Credentials and Configure in 1Panel
 
 !!! note ""
     Enter the Feishu platform and obtain the app credentials in "Credentials & Basic Info", as shown in the figure below：
 
 ![img.png](../../img/ai/Feishu_Credentials_Basic_Info_Page.png)
+{: .browser-mockup}
 
 !!! note ""
     After obtaining the credentials, enter the "Configuration" page of "Agent" in 1Panel, complete the Feishu chat channel configuration, and click "Save", as shown in the figure below：
 
 ![img.png](../../img/ai/1Panel_OpenClaw_Feishu_Channel_Config.png)
+{: .browser-mockup}
 
 ### 4.5. Step 5: Create Events and Callbacks
 
 !!! note ""
     As shown in the figure below, enter the "Events & Callbacks" menu and complete the subscription method setting and event addition respectively.
 
 ![img.png](../../img/ai/Feishu_Events_Callbacks_Page.png)
+{: .browser-mockup}
 
 #### Subscription Method Setting
 
 !!! note ""
     Select the persistent connection subscription method as shown in the figure below：
 
 ![img.png](../../img/ai/Feishu_Event_Subscription_Mode_Setting.png)
+{: .browser-mockup}
 
 #### Add Events:
 
 !!! note ""
     Enter "im.message.receive_v1" to search, check "Receive messages" based on "App-based Subscription", and finally confirm the addition.
 
 ![img.png](../../img/ai/Feishu_Add_Event_Im_Message_Receive.png)
+{: .browser-mockup}
 
 ### 4.6. Step 6: Create and Release a Version
 
 !!! note ""
     After confirmation, click "Create Version", then enter the relevant version information as required and release it. No approval is required for personal accounts, while enterprise accounts need enterprise approval.
 
 ![img.png](../../img/ai/Feishu_Create_App_Version_Page.png)
+{: .browser-mockup}
 
 ### 4.7. Step 7: Verify the Feishu Channel Configuration
 
 !!! note ""
     After completing all the above configurations, open the app in the Feishu client as shown in the figure below：
 
 ![img.png](../../img/ai/Feishu_Client_OpenClaw_Bot_List.png)
+{: .browser-mockup}
 
 !!! note ""
     Finally, perform a simple test. The prompt as shown in the figure below indicates that the configuration is successful.
 
 ![img.png](../../img/ai/Feishu_OpenClaw_Bot_Chat_Test_Page.png)
+{: .browser-mockup}
 
 # 6. Model Configuration Modification
 
 !!! note ""
     If you need to switch the model when using the OpenClaw personal AI assistant, also enter the "Agent" list, click "Configuration", enter the model switching menu, complete the model configuration modification and click "Save", as shown in the figure below：
 
 ![img.png](../../img/ai/1Panel_OpenClaw_Model_Configuration_Modify.png)
+{: .browser-mockup}
 

docs/user_manual/ai/gpu.md

@@ -3,30 +3,30 @@
 !!! note ""
     For NVIDIA graphics cards, users can visit https://www.nvidia.com/en-us/drivers/ to find and download the driver version compatible with their GPU model.
 
-    For example, if the downloaded file is `NVIDIA-Linux-x86_64-570.86.15.run`, upload it to your 1Panel server, then run the following commands in the command line to install:
+For example, if the downloaded file is `NVIDIA-Linux-x86_64-570.86.15.run`, upload it to your 1Panel server, then run the following commands in the command line to install:
 
-    ```bash
-    chmod +x NVIDIA-Linux-x86_64-570.86.15.run
-    ./NVIDIA-Linux-x86_64-570.86.15.run
-    ```
+ ```bash
+ chmod +x NVIDIA-Linux-x86_64-570.86.15.run
+ ./NVIDIA-Linux-x86_64-570.86.15.run
+ ```
 
-    > Follow the on‑screen prompts to complete the installation.
-    The `nvidia-smi` command is installed automatically with the NVIDIA driver. 1Panel uses `nvidia-smi` to retrieve GPU information.
+> Follow the on‑screen prompts to complete the installation.
+The `nvidia-smi` command is installed automatically with the NVIDIA driver. 1Panel uses `nvidia-smi` to retrieve GPU information.
 
 ## 2 View GPU Information
 
 !!! note ""
-  On the GPU monitoring page, you can view the driver version, GPU model, utilization, temperature, power consumption, and other basic metrics, as well as processes currently using the GPU.
+    On the GPU monitoring page, you can view the driver version, GPU model, utilization, temperature, power consumption, and other basic metrics, as well as processes currently using the GPU.
 
 ![img.png](../../img/ai/gpu_monitor.png)
-{: .original}
+{: .browser-mockup}
 
 ## 3 Use GPU
 
 !!! note ""
-  After installing the GPU driver, you must also install the NVIDIA Container Toolkit by following the [NVIDIA official guide](https://docs.nvidia.com/datacenter/cloud-native/container-toolkit/latest/install-guide.html) to enable GPU access in apps from the App Store or other containers.
+    After installing the GPU driver, you must also install the NVIDIA Container Toolkit by following the [NVIDIA official guide](https://docs.nvidia.com/datacenter/cloud-native/container-toolkit/latest/install-guide.html) to enable GPU access in apps from the App Store or other containers.
 
 > When installing an app from the App Store, enable `GPU Acceleration` in Advanced Settings to grant the app GPU support.
 
 ![img.png](../../img/ai/gpu_acceleration.png)
-{: .original}
+{: .browser-mockup}

docs/user_manual/ai/mcp.md

@@ -6,7 +6,7 @@
     However, in practice, manually setting up an MCP Server requires configuring numerous dependencies, resulting in a high deployment barrier for many users. To solve this problem, 1Panel v1.10.29 LTS has introduced a native **MCP Server Management** feature. This feature supports one-click deployment of MCP Server via containerization, greatly simplifying the setup process.
 
 ![img.png](../../img/ai/mcp_list.png)
-{: .original}
+{: .browser-mockup}
 
 ## 2 Create MCP Server
 
@@ -19,12 +19,12 @@
 ### 2.1 Start via npx Command
 
 ![img.png](../../img/ai/create_mcp_server.png)
-{: .original}
+{: .browser-mockup}
 
 ### 2.2 Run as Binary
 
 ![img.png](../../img/ai/mcp_binary.png)
-{: .original}
+{: .browser-mockup}
 
 ## 3 Obtain Configuration Information
 
@@ -34,7 +34,7 @@
     Users only need to copy and paste the configuration into their MCP client to use the AI assistant enhanced with MCP. This eliminates the need to manually look up or set environment variables, enabling a seamless experience from deployment to usage.
 
 ![img.png](../../img/ai/mcp_server_config.png)
-{: .original}
+{: .browser-mockup}
 
 ## 4 Unified Domain and SSE Path
 
@@ -44,7 +44,7 @@
     This approach simplifies public network configuration and centralizes operation and maintenance. Especially in large‑scale deployments and enterprise internal networks, using a unified domain avoids exposing too many ports, reduces security risks, and improves deployment flexibility, security, and maintainability.
 
 ![img.png](../../img/ai/mcp_website.png)
-{: .original}
+{: .browser-mockup}
 
 ## 5 Whitelist Access Restriction
 

docs/user_manual/ai/model.md

@@ -6,34 +6,39 @@
     To use the model management feature, you need to first install the Ollama application from the App Store. After installation, you can view the status of the Ollama application on this page and perform operations such as starting, stopping, and restarting.
 
 ![img.png](../../img/ai/overview.png)
+{: .browser-mockup}
 
 ## 2 Adding Models
 
 !!! Abstract ""
     Click "Add Model," enter the model name, and click the "Add" button to pull the corresponding model from the [Ollama Official Repository](https://ollama.com/search).
 
 ![img.png](../../img/ai/model_pull.png)
+{: .browser-mockup}
 
 ## 3 Running Models
 
 !!! Abstract ""
     Click the "Run" button in the row of a specific model to open an online terminal on the current page and interact with the model.
 
 ![img.png](../../img/ai/model_run.png)
+{: .browser-mockup}
 
 ## 4 AI Proxy Enhancement
 
 !!! Abstract ""
     This feature allows you to configure a reverse proxy for the Ollama application, supporting domain names, HTTPS, IP whitelists, and other configurations to enhance security when using large models.
 
 ![img.png](../../img/ai/api_proxy.png)
+{: .browser-mockup}
 
 ## 5 Viewing Connection Information
 
 !!! Abstract ""
     Click the "Connection Information" button at the top of the list to view the connection information for the Ollama application.
 
 ![img.png](../../img/ai/connection_info.png)
+{: .browser-mockup}
 
 > The Ollama application deployed from the App Store runs in a containerized manner. Different scenarios require selecting the corresponding connection information based on the prompts on the page.
 
@@ -75,7 +80,7 @@
     - **Mounts**: Mount additional directories for the TensorRT LLM container. Local directories on the server can be mounted to the container for access within the container.
 
 ![img.png](../../img/ai/create_trtllm.png)
-{: .original}
+{: .browser-mockup}
 
 ### 2 View Model Logs
 

docs/user_manual/appstore/installed.md

@@ -78,7 +78,7 @@
     You can also migarte the backup file to your other nodes using the **Migrate** function.
 
 ![img.png](../../img/app/migrate.png)
-
+{: .browser-mockup}
 
 
 ## 7 Upgrade

docs/user_manual/containers/compose_template.md

@@ -2,3 +2,4 @@
     Used when creating an orchestration.
 
 ![img.png](../../img/containers/compose_template_create.png)
+{: .browser-mockup}

docs/user_manual/containers/composes.md

@@ -10,7 +10,7 @@
     [Learn more about container orchestration](https://docs.docker.com/compose)
 
 ![img.png](../../img/containers/compose_create.png)
-{: .original}
+{: .browser-mockup}
 
 ## 2 Edit Orchestration
 
@@ -29,4 +29,4 @@
     Click the name in the orchestration list to enter the orchestration details page. This page displays the container list corresponding to the Compose. Starting/stopping operations for the Compose are only supported when the Compose is created by 1Panel.
 
 ![img.png](../../img/containers/compose_detail.png)
-{: .original}
+{: .browser-mockup}

docs/user_manual/containers/container.md

@@ -6,15 +6,15 @@
     - Images must be pulled manually from the Images menu
 
 ![img.png](../../img/containers/container_create.png)
-{: .original}
+{: .browser-mockup}
 
 ## 2 Inspect Container
 
 !!! note ""
     Click the target container name, and all information about the container will be displayed in the right drawer.
 
 ![img.png](../../img/containers/container_inspect.png)
-{: .original}
+{: .browser-mockup}
 
 ## 3 View Container Logs
 
@@ -24,7 +24,7 @@
     - **Download**: Download container logs
 
 ![img.png](../../img/containers/container_log.png)
-{: .original}
+{: .browser-mockup}
 
 ## 4 Access Container Console
 
@@ -34,7 +34,7 @@
     **Note**: For Alpine Linux containers, select the `/bin/ash` command. If you need to define a command other than the provided ones, switch the **Custom** option to on.
 
 ![img.png](../../img/containers/container_terminal.png)
-{: .original}
+{: .browser-mockup}
 
 ## 5 View Container Statistics
 
@@ -48,4 +48,4 @@
     **Refresh interval can be changed**.
 
 ![img.png](../../img/containers/container_monitor.png)
-{: .original}
+{: .browser-mockup}