feat: Update README with desktop and mobile interface previews; add new images for light/dark modes, settings, and history

README.md

@@ -15,39 +15,36 @@ A text-to-speech web application based on Qwen3-TTS, supporting custom voice, vo
 
 ## Interface Preview
 
-### Light & Dark Mode
+### Desktop - Light Mode
+![Light Mode](./images/lightmode-english.png)
 
+### Desktop - Dark Mode
+![Dark Mode](./images/darkmode-chinese.png)
+
+### Desktop - Voice Design List
+![Voice Design List](./images/custom-voice-list.png)
+
+### Desktop - Save Voice Design Dialog
+![Save Voice Design](./images/save-voice-design-dialog.png)
+
+### Desktop - Voice Cloning
+![Voice Cloning](./images/clone-voice-recording.png)
+
+### Mobile - Light & Dark Mode
 <table>
   <tr>
-    <td width="50%">
+    <td width="50%"><img src="./images/mobile-lightmode-custom.png" alt="Mobile Light Mode" /></td>
-      <img src="./images/lightmode-english.png" alt="Light Mode" />
+    <td width="50%"><img src="./images/mobile-darkmode-custom.png" alt="Mobile Dark Mode" /></td>
-      <p align="center"><em>Light Mode - Custom Voice</em></p>
-    </td>
-    <td width="50%">
-      <img src="./images/darkmode-chinese.png" alt="Dark Mode" />
-      <p align="center"><em>Dark Mode - Custom Voice</em></p>
-    </td>
   </tr>
 </table>
 
-### Voice Design
+### Mobile - Settings & History
-
+<table>
-<p align="center">
+  <tr>
-  <img src="./images/custom-voice-list.png" alt="Voice Design List" width="80%" />
+    <td width="50%"><img src="./images/mobile-settings.png" alt="Mobile Settings" /></td>
-</p>
+    <td width="50%"><img src="./images/mobile-history.png" alt="Mobile History" /></td>
-<p align="center"><em>Manage your custom voice designs</em></p>
+  </tr>
-
+</table>
-<p align="center">
-  <img src="./images/save-voice-design-dialog.png" alt="Save Voice Design" width="60%" />
-</p>
-<p align="center"><em>Save voice design dialog</em></p>
-
-### Voice Cloning
-
-<p align="center">
-  <img src="./images/clone-voice-recording.png" alt="Voice Cloning" width="80%" />
-</p>
-<p align="center"><em>Clone voices by recording or uploading audio</em></p>
 
 ## Tech Stack
 

README.zh.md

@@ -15,39 +15,36 @@
 
 ## 界面预览
 
-### 亮色与暗黑模式
+### 桌面端 - 亮色模式
+![亮色模式](./images/lightmode-english.png)
 
+### 桌面端 - 暗黑模式
+![暗黑模式](./images/darkmode-chinese.png)
+
+### 桌面端 - 语音设计列表
+![语音设计列表](./images/custom-voice-list.png)
+
+### 桌面端 - 保存语音设计对话框
+![保存语音设计](./images/save-voice-design-dialog.png)
+
+### 桌面端 - 语音克隆
+![语音克隆](./images/clone-voice-recording.png)
+
+### 移动端 - 亮色与暗黑模式
 <table>
   <tr>
-    <td width="50%">
+    <td width="50%"><img src="./images/mobile-lightmode-custom.png" alt="移动端亮色模式" /></td>
-      <img src="./images/lightmode-english.png" alt="亮色模式" />
+    <td width="50%"><img src="./images/mobile-darkmode-custom.png" alt="移动端暗黑模式" /></td>
-      <p align="center"><em>亮色模式 - 自定义语音</em></p>
-    </td>
-    <td width="50%">
-      <img src="./images/darkmode-chinese.png" alt="暗黑模式" />
-      <p align="center"><em>暗黑模式 - 自定义语音</em></p>
-    </td>
   </tr>
 </table>
 
-### 语音设计
+### 移动端 - 设置与历史记录
-
+<table>
-<p align="center">
+  <tr>
-  <img src="./images/custom-voice-list.png" alt="语音设计列表" width="80%" />
+    <td width="50%"><img src="./images/mobile-settings.png" alt="移动端设置" /></td>
-</p>
+    <td width="50%"><img src="./images/mobile-history.png" alt="移动端历史记录" /></td>
-<p align="center"><em>管理您的自定义语音设计</em></p>
+  </tr>
-
+</table>
-<p align="center">
-  <img src="./images/save-voice-design-dialog.png" alt="保存语音设计" width="60%" />
-</p>
-<p align="center"><em>保存语音设计对话框</em></p>
-
-### 语音克隆
-
-<p align="center">
-  <img src="./images/clone-voice-recording.png" alt="语音克隆" width="80%" />
-</p>
-<p align="center"><em>通过录音或上传音频克隆声音</em></p>
 
 ## 技术栈