feat(tts-voice-app): add model download setup page for first-time initialization

- Add initial setup page (ModelSetup.vue) with download progress UI
- Implement model download manager in main process with progress tracking
- Add setup store for managing download state and progress
- Integrate model check on app startup, redirect to setup if needed
- Add IPC handlers for model download, extraction, and status checks
- Support downloading 4 models from ModelScope (9.09 GB total):
* GPT-SoVITS pretrained models (4.56 GB)
* G2PW Chinese pronunciation model (588.86 MB)
* FunASR speech recognition model (1.09 GB)
* Faster Whisper multilingual ASR model (2.85 GB)
- Add i18n support for setup page (zh-CN, en-US)
- Install extract-zip and tar dependencies for archive extraction
- Models saved to ~/.moyoyo-tts/models directory

tts-voice-app/package-lock.json

@@ -11,7 +11,9 @@
       "dependencies": {
         "axios": "^1.6.0",
         "element-plus": "^2.5.0",
+        "extract-zip": "^2.0.1",
         "pinia": "^2.1.7",
+        "tar": "^7.5.6",
         "vue": "^3.4.0",
         "vue-i18n": "^9.9.0",
         "vue-router": "^4.2.5"
@@ -1185,6 +1187,27 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
+    "node_modules/@isaacs/fs-minipass": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz",
+      "integrity": "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==",
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^7.0.4"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@isaacs/fs-minipass/node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -2122,7 +2145,7 @@
       "version": "20.19.30",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.30.tgz",
       "integrity": "sha512-WJtwWJu7UdlvzEAUm484QNg5eAoq5QR08KDNx7g45Usrs2NtOPiX8ugDqmKdXkyL03rBqU5dYNYVQetEpBHq2g==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "undici-types": "~6.21.0"
@@ -2168,7 +2191,6 @@
       "version": "2.10.3",
       "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz",
       "integrity": "sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==",
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -2538,6 +2560,16 @@
         "electron-builder-squirrel-windows": "24.13.3"
       }
     },
+    "node_modules/app-builder-lib/node_modules/chownr": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
+      "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/app-builder-lib/node_modules/fs-extra": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
@@ -2566,6 +2598,33 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "node_modules/app-builder-lib/node_modules/minizlib": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz",
+      "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "minipass": "^3.0.0",
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/app-builder-lib/node_modules/minizlib/node_modules/minipass": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/app-builder-lib/node_modules/semver": {
       "version": "7.7.3",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
@@ -2579,6 +2638,25 @@
         "node": ">=10"
       }
     },
+    "node_modules/app-builder-lib/node_modules/tar": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-6.2.1.tgz",
+      "integrity": "sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==",
+      "deprecated": "Old versions of tar are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exhorbitant rates) by contacting i@izs.me",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "chownr": "^2.0.0",
+        "fs-minipass": "^2.0.0",
+        "minipass": "^5.0.0",
+        "minizlib": "^2.1.1",
+        "mkdirp": "^1.0.3",
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/app-builder-lib/node_modules/universalify": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
@@ -2589,6 +2667,13 @@
         "node": ">= 10.0.0"
       }
     },
+    "node_modules/app-builder-lib/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/archiver": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/archiver/-/archiver-5.3.2.tgz",
@@ -2892,7 +2977,6 @@
       "version": "0.2.13",
       "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
       "integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": "*"
@@ -3102,13 +3186,12 @@
       }
     },
     "node_modules/chownr": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
-      "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
-      "dev": true,
-      "license": "ISC",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz",
+      "integrity": "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==",
+      "license": "BlueOak-1.0.0",
       "engines": {
-        "node": ">=10"
+        "node": ">=18"
       }
     },
     "node_modules/chromium-pickle-js": {
@@ -3410,7 +3493,6 @@
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
       "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ms": "^2.1.3"
@@ -3570,6 +3652,7 @@
       "integrity": "sha512-rcJUkMfnJpfCboZoOOPf4L29TRtEieHNOeAbYPWPxlaBw/Z1RKrRA86dOI9rwaI4tQSc/RD82zTNHprfUHXsoQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "app-builder-lib": "24.13.3",
         "builder-util": "24.13.1",
@@ -3981,7 +4064,6 @@
       "version": "1.4.5",
       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.5.tgz",
       "integrity": "sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "once": "^1.4.0"
@@ -4142,7 +4224,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz",
       "integrity": "sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "debug": "^4.1.1",
@@ -4188,7 +4269,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
       "integrity": "sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "pend": "~1.2.0"
@@ -4404,7 +4484,6 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
       "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "pump": "^3.0.0"
@@ -5238,39 +5317,26 @@
       }
     },
     "node_modules/minizlib": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz",
-      "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
-      "dev": true,
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.1.0.tgz",
+      "integrity": "sha512-KZxYo1BUkWD2TVFLr0MQoM8vUUigWD3LlD83a/75BqC+4qE0Hb1Vo5v1FgcfaNXvfXzr+5EhQ6ing/CaBijTlw==",
       "license": "MIT",
       "dependencies": {
-        "minipass": "^3.0.0",
-        "yallist": "^4.0.0"
+        "minipass": "^7.1.2"
       },
       "engines": {
-        "node": ">= 8"
+        "node": ">= 18"
       }
     },
     "node_modules/minizlib/node_modules/minipass": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
-      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
-      "dev": true,
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
       "license": "ISC",
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
       "engines": {
-        "node": ">=8"
+        "node": ">=16 || 14 >=14.17"
       }
     },
-    "node_modules/minizlib/node_modules/yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true,
-      "license": "ISC"
-    },
     "node_modules/mkdirp": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
@@ -5288,7 +5354,6 @@
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/muggle-string": {
@@ -5375,7 +5440,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
       "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "wrappy": "1"
@@ -5453,7 +5517,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
       "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/picocolors": {
@@ -5582,7 +5645,6 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.3.tgz",
       "integrity": "sha512-todwxLMY7/heScKmntwQG8CXVkWUOdYxIvY2s0VWAAMh/nd8SoYiRaKjlr7+iCs984f2P8zvrfWcDDYVb73NfA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "end-of-stream": "^1.1.0",
@@ -6111,21 +6173,19 @@
       }
     },
     "node_modules/tar": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-6.2.1.tgz",
-      "integrity": "sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==",
-      "dev": true,
-      "license": "ISC",
+      "version": "7.5.6",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.6.tgz",
+      "integrity": "sha512-xqUeu2JAIJpXyvskvU3uvQW8PAmHrtXp2KDuMJwQqW8Sqq0CaZBAQ+dKS3RBXVhU4wC5NjAdKrmh84241gO9cA==",
+      "license": "BlueOak-1.0.0",
       "dependencies": {
-        "chownr": "^2.0.0",
-        "fs-minipass": "^2.0.0",
-        "minipass": "^5.0.0",
-        "minizlib": "^2.1.1",
-        "mkdirp": "^1.0.3",
-        "yallist": "^4.0.0"
+        "@isaacs/fs-minipass": "^4.0.0",
+        "chownr": "^3.0.0",
+        "minipass": "^7.1.2",
+        "minizlib": "^3.1.0",
+        "yallist": "^5.0.0"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=18"
       }
     },
     "node_modules/tar-stream": {
@@ -6145,12 +6205,23 @@
         "node": ">=6"
       }
     },
+    "node_modules/tar/node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
     "node_modules/tar/node_modules/yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true,
-      "license": "ISC"
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz",
+      "integrity": "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==",
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=18"
+      }
     },
     "node_modules/temp-file": {
       "version": "3.4.0",
@@ -6264,7 +6335,7 @@
       "version": "6.21.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
       "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/universalify": {
@@ -6592,7 +6663,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/xmlbuilder": {
@@ -6655,7 +6725,6 @@
       "version": "2.10.0",
       "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
       "integrity": "sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "buffer-crc32": "~0.2.3",

tts-voice-app/package.json

@@ -14,24 +14,26 @@
     "build:linux": "npm run build && electron-builder --linux --config"
   },
   "dependencies": {
-    "vue": "^3.4.0",
-    "vue-router": "^4.2.5",
-    "pinia": "^2.1.7",
-    "element-plus": "^2.5.0",
     "axios": "^1.6.0",
-    "vue-i18n": "^9.9.0"
+    "element-plus": "^2.5.0",
+    "extract-zip": "^2.0.1",
+    "pinia": "^2.1.7",
+    "tar": "^7.5.6",
+    "vue": "^3.4.0",
+    "vue-i18n": "^9.9.0",
+    "vue-router": "^4.2.5"
   },
   "devDependencies": {
     "@electron-toolkit/preload": "^3.0.0",
     "@electron-toolkit/utils": "^3.0.0",
+    "@types/node": "^20.10.0",
     "@vitejs/plugin-vue": "^5.0.0",
     "electron": "^28.0.0",
-    "electron-vite": "^2.0.0",
     "electron-builder": "^24.9.1",
+    "electron-vite": "^2.0.0",
     "sass": "^1.69.0",
     "typescript": "^5.3.0",
     "vite": "^5.0.0",
-    "vue-tsc": "^1.8.0",
-    "@types/node": "^20.10.0"
+    "vue-tsc": "^1.8.0"
   }
 }

tts-voice-app/src/main/index.ts

@@ -1,18 +1,280 @@
 import { app, shell, BrowserWindow, ipcMain, protocol, dialog } from 'electron'
 import { join } from 'path'
 import { homedir, tmpdir, platform } from 'os'
-import { existsSync, mkdirSync, writeFileSync, readdirSync, readFileSync, rmSync, copyFileSync } from 'fs'
+import { existsSync, mkdirSync, writeFileSync, readdirSync, readFileSync, rmSync, copyFileSync, createWriteStream } from 'fs'
 import { electronApp, optimizer, is } from '@electron-toolkit/utils'
 import { spawn } from 'child_process'
 import https from 'https'
 import http from 'http'
+import extractZip from 'extract-zip'
+import * as tar from 'tar'
 
 // Voice storage directory
 const VOICE_STORAGE_DIR = join(homedir(), '.moyoyo-tts', 'voices')
 
+// Models storage directory
+const MODELS_DIR = join(homedir(), '.moyoyo-tts', 'models')
+
 // GPT-SoVITS project root directory (parent of tts-voice-app)
 const GPT_SOVITS_ROOT = join(__dirname, '..', '..', '..')
 
+// Model files configuration
+interface ModelFileConfig {
+  id: string
+  name: string
+  description: string
+  url: string
+  extractTo: string
+  checkPath: string // Path to check if model is already extracted
+  size?: string // Estimated file size for display
+}
+
+const MODEL_FILES: ModelFileConfig[] = [
+  {
+    id: 'pretrained_models',
+    name: 'GPT-SoVITS 预训练模型',
+    description: '核心预训练模型文件，包含语音合成所需的基础模型',
+    url: 'https://www.modelscope.cn/models/XXXXRT/GPT-SoVITS-Pretrained/resolve/master/pretrained_models.zip',
+    extractTo: 'pretrained_models',
+    checkPath: 'pretrained_models/sv',
+    size: '4.56 GB'
+  },
+  {
+    id: 'g2pw',
+    name: 'G2PW 模型',
+    description: '中文拼音转换模型，用于文本到语音的发音转换',
+    url: 'https://www.modelscope.cn/models/XXXXRT/GPT-SoVITS-Pretrained/resolve/master/G2PWModel.zip',
+    extractTo: 'G2PWModel',
+    checkPath: 'G2PWModel',
+    size: '588.86 MB'
+  },
+  {
+    id: 'funasr',
+    name: 'FunASR 模型',
+    description: '阿里达摩院语音识别模型，用于音频转录',
+    url: 'https://www.modelscope.cn/models/XXXXRT/GPT-SoVITS-Pretrained/resolve/master/funasr.zip',
+    extractTo: 'funasr',
+    checkPath: 'funasr',
+    size: '1.09 GB'
+  },
+  {
+    id: 'faster_whisper',
+    name: 'Faster Whisper 模型',
+    description: 'OpenAI Whisper 加速版，用于多语言语音识别',
+    url: 'https://www.modelscope.cn/models/XXXXRT/GPT-SoVITS-Pretrained/resolve/master/faster-whisper.zip',
+    extractTo: 'faster-whisper',
+    checkPath: 'faster-whisper',
+    size: '2.85 GB'
+  }
+]
+
+// Model download status
+interface ModelStatus {
+  id: string
+  name: string
+  description: string
+  size?: string
+  status: 'pending' | 'downloading' | 'extracting' | 'completed' | 'error'
+  progress: number
+  error?: string
+}
+
+// Store main window reference for sending progress updates
+let mainWindow: BrowserWindow | null = null
+
+// Ensure models directory exists
+function ensureModelsDir(): void {
+  if (!existsSync(MODELS_DIR)) {
+    mkdirSync(MODELS_DIR, { recursive: true })
+  }
+}
+
+// Check if all models are installed
+function checkModelsInstalled(): { allInstalled: boolean; models: ModelStatus[] } {
+  ensureModelsDir()
+  
+  const models: ModelStatus[] = MODEL_FILES.map(model => {
+    const checkFullPath = join(MODELS_DIR, model.checkPath)
+    const isInstalled = existsSync(checkFullPath)
+    
+    return {
+      id: model.id,
+      name: model.name,
+      description: model.description,
+      size: model.size,
+      status: isInstalled ? 'completed' : 'pending',
+      progress: isInstalled ? 100 : 0
+    }
+  })
+  
+  const allInstalled = models.every(m => m.status === 'completed')
+  
+  return { allInstalled, models }
+}
+
+// Download file with progress
+function downloadFileWithProgress(
+  url: string,
+  destPath: string,
+  modelId: string,
+  onProgress: (progress: number) => void
+): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const file = createWriteStream(destPath)
+    
+    const request = https.get(url, {
+      headers: {
+        'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36'
+      }
+    }, (response) => {
+      // Handle redirects
+      if (response.statusCode === 301 || response.statusCode === 302) {
+        const redirectUrl = response.headers.location
+        if (redirectUrl) {
+          file.close()
+          rmSync(destPath, { force: true })
+          downloadFileWithProgress(redirectUrl, destPath, modelId, onProgress)
+            .then(resolve)
+            .catch(reject)
+          return
+        }
+      }
+      
+      if (response.statusCode !== 200) {
+        file.close()
+        rmSync(destPath, { force: true })
+        reject(new Error(`下载失败: HTTP ${response.statusCode}`))
+        return
+      }
+      
+      const totalSize = parseInt(response.headers['content-length'] || '0', 10)
+      let downloadedSize = 0
+      
+      response.on('data', (chunk) => {
+        downloadedSize += chunk.length
+        if (totalSize > 0) {
+          const progress = Math.round((downloadedSize / totalSize) * 100)
+          onProgress(progress)
+        }
+      })
+      
+      response.pipe(file)
+      
+      file.on('finish', () => {
+        file.close()
+        resolve()
+      })
+      
+      file.on('error', (err) => {
+        file.close()
+        rmSync(destPath, { force: true })
+        reject(err)
+      })
+    })
+    
+    request.on('error', (err) => {
+      file.close()
+      rmSync(destPath, { force: true })
+      reject(err)
+    })
+    
+    request.setTimeout(60000, () => {
+      request.destroy()
+      file.close()
+      rmSync(destPath, { force: true })
+      reject(new Error('下载超时'))
+    })
+  })
+}
+
+// Extract downloaded file
+async function extractFile(filePath: string, extractTo: string): Promise<void> {
+  const targetDir = join(MODELS_DIR, extractTo)
+  
+  // Create target directory
+  if (!existsSync(targetDir)) {
+    mkdirSync(targetDir, { recursive: true })
+  }
+  
+  if (filePath.endsWith('.zip')) {
+    // Extract ZIP file
+    await extractZip(filePath, { dir: MODELS_DIR })
+  } else if (filePath.endsWith('.tar.gz') || filePath.endsWith('.tgz')) {
+    // Extract TAR.GZ file
+    await tar.extract({
+      file: filePath,
+      cwd: targetDir
+    })
+  } else {
+    throw new Error(`不支持的文件格式: ${filePath}`)
+  }
+  
+  // Clean up downloaded archive
+  rmSync(filePath, { force: true })
+}
+
+// Download and extract a single model
+async function downloadModel(modelId: string): Promise<void> {
+  const model = MODEL_FILES.find(m => m.id === modelId)
+  if (!model) {
+    throw new Error(`未知的模型: ${modelId}`)
+  }
+  
+  ensureModelsDir()
+  
+  // Determine file extension from URL
+  const isZip = model.url.endsWith('.zip')
+  const isTarGz = model.url.endsWith('.tar.gz') || model.url.endsWith('.tgz')
+  const ext = isZip ? '.zip' : isTarGz ? '.tar.gz' : ''
+  
+  const tempFilePath = join(MODELS_DIR, `${modelId}${ext}`)
+  
+  // Send status update: downloading
+  sendModelProgress(modelId, 'downloading', 0)
+  
+  try {
+    // Download file
+    await downloadFileWithProgress(model.url, tempFilePath, modelId, (progress) => {
+      sendModelProgress(modelId, 'downloading', progress)
+    })
+    
+    // Send status update: extracting
+    sendModelProgress(modelId, 'extracting', 100)
+    
+    // Extract file
+    await extractFile(tempFilePath, model.extractTo)
+    
+    // Send status update: completed
+    sendModelProgress(modelId, 'completed', 100)
+  } catch (error) {
+    // Clean up on error
+    if (existsSync(tempFilePath)) {
+      rmSync(tempFilePath, { force: true })
+    }
+    
+    const errorMessage = error instanceof Error ? error.message : '下载失败'
+    sendModelProgress(modelId, 'error', 0, errorMessage)
+    throw error
+  }
+}
+
+// Send progress update to renderer
+function sendModelProgress(
+  modelId: string,
+  status: 'pending' | 'downloading' | 'extracting' | 'completed' | 'error',
+  progress: number,
+  error?: string
+): void {
+  if (mainWindow && !mainWindow.isDestroyed()) {
+    mainWindow.webContents.send('model-download-progress', {
+      modelId,
+      status,
+      progress,
+      error
+    })
+  }
+}
+
 // Get Python executable path based on platform
 function getPythonPath(): string {
   const isWindows = platform() === 'win32'
@@ -120,7 +382,7 @@ interface VoiceInfo {
 }
 
 function createWindow(): void {
-  const mainWindow = new BrowserWindow({
+  mainWindow = new BrowserWindow({
     width: 1200,
     height: 800,
     minWidth: 900,
@@ -137,7 +399,7 @@ function createWindow(): void {
   })
 
   mainWindow.on('ready-to-show', () => {
-    mainWindow.show()
+    mainWindow?.show()
   })
 
   mainWindow.webContents.setWindowOpenHandler((details) => {
@@ -230,6 +492,62 @@ app.whenReady().then(() => {
     return process.env['API_BASE_URL'] || 'http://localhost:8000'
   })
 
+  // IPC: 检查模型安装状态
+  ipcMain.handle('check-models-status', () => {
+    return checkModelsInstalled()
+  })
+
+  // IPC: 获取模型配置列表
+  ipcMain.handle('get-model-configs', () => {
+    return MODEL_FILES.map(m => ({
+      id: m.id,
+      name: m.name,
+      description: m.description,
+      size: m.size
+    }))
+  })
+
+  // IPC: 下载单个模型
+  ipcMain.handle('download-model', async (_, modelId: string) => {
+    try {
+      await downloadModel(modelId)
+      return { success: true }
+    } catch (error) {
+      return { 
+        success: false, 
+        error: error instanceof Error ? error.message : '下载失败' 
+      }
+    }
+  })
+
+  // IPC: 下载所有未安装的模型
+  ipcMain.handle('download-all-models', async () => {
+    const { models } = checkModelsInstalled()
+    const pendingModels = models.filter(m => m.status !== 'completed')
+    
+    const results: { modelId: string; success: boolean; error?: string }[] = []
+    
+    for (const model of pendingModels) {
+      try {
+        await downloadModel(model.id)
+        results.push({ modelId: model.id, success: true })
+      } catch (error) {
+        results.push({ 
+          modelId: model.id, 
+          success: false, 
+          error: error instanceof Error ? error.message : '下载失败' 
+        })
+      }
+    }
+    
+    return results
+  })
+
+  // IPC: 获取模型存储目录
+  ipcMain.handle('get-models-dir', () => {
+    return MODELS_DIR
+  })
+
   // IPC: 保存音色文件到本地
   ipcMain.handle('save-voice-files', async (_, request: SaveVoiceFilesRequest) => {
     try {

tts-voice-app/src/preload/index.d.ts

@@ -49,6 +49,39 @@ interface SaveAudioResult {
   error?: string
 }
 
+// Model status type
+interface ModelStatus {
+  id: string
+  name: string
+  description: string
+  size?: string
+  status: 'pending' | 'downloading' | 'extracting' | 'completed' | 'error'
+  progress: number
+  error?: string
+}
+
+// Model config type
+interface ModelConfig {
+  id: string
+  name: string
+  description: string
+  size?: string
+}
+
+// Models check result type
+interface ModelsCheckResult {
+  allInstalled: boolean
+  models: ModelStatus[]
+}
+
+// Download progress event type
+interface DownloadProgressEvent {
+  modelId: string
+  status: 'pending' | 'downloading' | 'extracting' | 'completed' | 'error'
+  progress: number
+  error?: string
+}
+
 declare global {
   interface Window {
     electron: ElectronAPI
@@ -60,6 +93,13 @@ declare global {
       getVoiceStorageDir: () => Promise<string>
       runInference: (request: InferenceRequest) => Promise<InferenceResult>
       saveAudioFile: (tempPath: string) => Promise<SaveAudioResult>
+      // Model management operations
+      checkModelsStatus: () => Promise<ModelsCheckResult>
+      getModelConfigs: () => Promise<ModelConfig[]>
+      downloadModel: (modelId: string) => Promise<{ success: boolean; error?: string }>
+      downloadAllModels: () => Promise<{ modelId: string; success: boolean; error?: string }[]>
+      getModelsDir: () => Promise<string>
+      onModelDownloadProgress: (callback: (event: DownloadProgressEvent) => void) => () => void
     }
   }
 }

tts-voice-app/src/preload/index.ts

@@ -50,6 +50,39 @@ interface SaveAudioResult {
   error?: string
 }
 
+// Model status type
+interface ModelStatus {
+  id: string
+  name: string
+  description: string
+  size?: string
+  status: 'pending' | 'downloading' | 'extracting' | 'completed' | 'error'
+  progress: number
+  error?: string
+}
+
+// Model config type
+interface ModelConfig {
+  id: string
+  name: string
+  description: string
+  size?: string
+}
+
+// Models check result type
+interface ModelsCheckResult {
+  allInstalled: boolean
+  models: ModelStatus[]
+}
+
+// Download progress event type
+interface DownloadProgressEvent {
+  modelId: string
+  status: 'pending' | 'downloading' | 'extracting' | 'completed' | 'error'
+  progress: number
+  error?: string
+}
+
 // Custom APIs for renderer
 const api = {
   getApiBaseUrl: (): Promise<string> => ipcRenderer.invoke('get-api-base-url'),
@@ -70,7 +103,30 @@ const api = {
     ipcRenderer.invoke('run-inference', request),
 
   saveAudioFile: (tempPath: string): Promise<SaveAudioResult> =>
-    ipcRenderer.invoke('save-audio-file', tempPath)
+    ipcRenderer.invoke('save-audio-file', tempPath),
+
+  // Model management operations
+  checkModelsStatus: (): Promise<ModelsCheckResult> =>
+    ipcRenderer.invoke('check-models-status'),
+
+  getModelConfigs: (): Promise<ModelConfig[]> =>
+    ipcRenderer.invoke('get-model-configs'),
+
+  downloadModel: (modelId: string): Promise<{ success: boolean; error?: string }> =>
+    ipcRenderer.invoke('download-model', modelId),
+
+  downloadAllModels: (): Promise<{ modelId: string; success: boolean; error?: string }[]> =>
+    ipcRenderer.invoke('download-all-models'),
+
+  getModelsDir: (): Promise<string> =>
+    ipcRenderer.invoke('get-models-dir'),
+
+  // Model download progress listener
+  onModelDownloadProgress: (callback: (event: DownloadProgressEvent) => void): (() => void) => {
+    const handler = (_: Electron.IpcRendererEvent, data: DownloadProgressEvent) => callback(data)
+    ipcRenderer.on('model-download-progress', handler)
+    return () => ipcRenderer.removeListener('model-download-progress', handler)
+  }
 }
 
 // Use `contextBridge` APIs to expose Electron APIs to

tts-voice-app/src/renderer/src/App.vue

@@ -1,36 +1,93 @@
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, ref, computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import Sidebar from './components/layout/Sidebar.vue'
 import { useAppStore } from './stores/app'
+import { useSetupStore } from './stores/setup'
 
 const appStore = useAppStore()
+const setupStore = useSetupStore()
+const route = useRoute()
+const router = useRouter()
 
-onMounted(() => {
+const isInitializing = ref(true)
+
+// Check if we should hide the layout (e.g., on setup page)
+const hideLayout = computed(() => route.meta?.hideLayout === true)
+
+onMounted(async () => {
   // 初始化主题
   document.documentElement.setAttribute('data-theme', appStore.theme)
+  
+  // Check if models are installed
+  try {
+    const allInstalled = await setupStore.checkModelsStatus()
+    if (!allInstalled && route.path !== '/setup') {
+      // Redirect to setup page if models are not installed
+      router.replace('/setup')
+    }
+  } catch (error) {
+    console.error('Failed to check models status:', error)
+  } finally {
+    isInitializing.value = false
+  }
 })
 </script>
 
 <template>
-  <div class="app-container">
-    <Sidebar />
-    <main class="main-content">
+  <div v-if="isInitializing" class="app-loading">
+    <div class="loading-spinner"></div>
+  </div>
+  <div v-else class="app-container" :class="{ 'no-sidebar': hideLayout }">
+    <Sidebar v-if="!hideLayout" />
+    <main class="main-content" :class="{ 'full-width': hideLayout }">
       <router-view />
     </main>
   </div>
 </template>
 
 <style lang="scss" scoped>
+.app-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  background-color: var(--bg-primary);
+  
+  .loading-spinner {
+    width: 40px;
+    height: 40px;
+    border: 3px solid var(--border-color);
+    border-top-color: var(--primary-color);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 .app-container {
   display: flex;
   height: 100vh;
   background-color: var(--bg-primary);
   color: var(--text-primary);
+  
+  &.no-sidebar {
+    display: block;
+  }
 }
 
 .main-content {
   flex: 1;
   overflow: auto;
   padding: 24px;
+  
+  &.full-width {
+    padding: 0;
+  }
 }
 </style>

tts-voice-app/src/renderer/src/locales/en-US.json

@@ -132,5 +132,24 @@
   "theme": {
     "light": "Light Mode",
     "dark": "Dark Mode"
+  },
+  "setup": {
+    "title": "Welcome to TTS Voice",
+    "subtitle": "First-time setup requires downloading necessary model files. This may take some time.",
+    "modelsTitle": "Model Files",
+    "startDownload": "Start Download",
+    "retryDownload": "Retry Download",
+    "retryFailed": "Retry Failed",
+    "continue": "Get Started",
+    "downloadingHint": "Downloading in progress, please do not close the app...",
+    "overallProgress": "Overall Progress",
+    "storageHint": "Model files will be saved to ~/.moyoyo-tts/models",
+    "status": {
+      "pending": "Pending",
+      "downloading": "Downloading",
+      "extracting": "Extracting",
+      "completed": "Completed",
+      "error": "Failed"
+    }
   }
 }

tts-voice-app/src/renderer/src/locales/zh-CN.json

@@ -132,5 +132,24 @@
   "theme": {
     "light": "浅色模式",
     "dark": "深色模式"
+  },
+  "setup": {
+    "title": "欢迎使用 TTS Voice",
+    "subtitle": "首次使用需要下载必要的模型文件，这可能需要一些时间",
+    "modelsTitle": "模型文件",
+    "startDownload": "开始下载",
+    "retryDownload": "重新下载",
+    "retryFailed": "重试失败项",
+    "continue": "开始使用",
+    "downloadingHint": "正在下载，请勿关闭应用...",
+    "overallProgress": "总体进度",
+    "storageHint": "模型文件将保存在 ~/.moyoyo-tts/models 目录",
+    "status": {
+      "pending": "等待中",
+      "downloading": "下载中",
+      "extracting": "解压中",
+      "completed": "已完成",
+      "error": "下载失败"
+    }
   }
 }

tts-voice-app/src/renderer/src/router/index.ts

@@ -6,6 +6,12 @@ const routes: RouteRecordRaw[] = [
     path: '/',
     redirect: '/tts'
   },
+  {
+    path: '/setup',
+    name: 'ModelSetup',
+    component: () => import('@/views/ModelSetup.vue'),
+    meta: { title: 'Model Setup', hideLayout: true }
+  },
   {
     path: '/tts',
     name: 'TextToSpeech',

tts-voice-app/src/renderer/src/stores/setup.ts

@@ -0,0 +1,171 @@
+import { defineStore } from 'pinia'
+import { ref, computed, onUnmounted } from 'vue'
+
+// Model status type
+export interface ModelStatus {
+  id: string
+  name: string
+  description: string
+  size?: string
+  status: 'pending' | 'downloading' | 'extracting' | 'completed' | 'error'
+  progress: number
+  error?: string
+}
+
+export const useSetupStore = defineStore('setup', () => {
+  // State
+  const models = ref<ModelStatus[]>([])
+  const isChecking = ref(false)
+  const isDownloading = ref(false)
+  const setupCompleted = ref(false)
+  
+  // Computed
+  const allModelsInstalled = computed(() => 
+    models.value.length > 0 && models.value.every(m => m.status === 'completed')
+  )
+  
+  const downloadProgress = computed(() => {
+    if (models.value.length === 0) return 0
+    const total = models.value.reduce((sum, m) => sum + m.progress, 0)
+    return Math.round(total / models.value.length)
+  })
+  
+  const hasErrors = computed(() => 
+    models.value.some(m => m.status === 'error')
+  )
+  
+  const pendingModels = computed(() => 
+    models.value.filter(m => m.status === 'pending' || m.status === 'error')
+  )
+
+  // Progress listener cleanup function
+  let cleanupProgressListener: (() => void) | null = null
+
+  // Actions
+  async function checkModelsStatus(): Promise<boolean> {
+    isChecking.value = true
+    try {
+      const result = await window.api.checkModelsStatus()
+      models.value = result.models
+      setupCompleted.value = result.allInstalled
+      return result.allInstalled
+    } catch (error) {
+      console.error('Failed to check models status:', error)
+      return false
+    } finally {
+      isChecking.value = false
+    }
+  }
+
+  function setupProgressListener(): void {
+    // Clean up existing listener
+    if (cleanupProgressListener) {
+      cleanupProgressListener()
+    }
+    
+    // Set up new listener
+    cleanupProgressListener = window.api.onModelDownloadProgress((event) => {
+      const model = models.value.find(m => m.id === event.modelId)
+      if (model) {
+        model.status = event.status
+        model.progress = event.progress
+        if (event.error) {
+          model.error = event.error
+        }
+      }
+      
+      // Check if all downloads completed
+      if (models.value.every(m => m.status === 'completed')) {
+        isDownloading.value = false
+        setupCompleted.value = true
+      }
+    })
+  }
+
+  async function startDownload(): Promise<void> {
+    isDownloading.value = true
+    
+    // Setup progress listener before starting download
+    setupProgressListener()
+    
+    try {
+      // Download models one by one
+      for (const model of models.value) {
+        if (model.status === 'completed') continue
+        
+        // Reset error state if retrying
+        if (model.status === 'error') {
+          model.error = undefined
+        }
+        
+        await window.api.downloadModel(model.id)
+      }
+    } catch (error) {
+      console.error('Download failed:', error)
+    } finally {
+      // Check final status
+      const allDone = models.value.every(m => m.status === 'completed')
+      if (allDone) {
+        setupCompleted.value = true
+      }
+      isDownloading.value = false
+    }
+  }
+
+  async function retryFailedDownloads(): Promise<void> {
+    const failedModels = models.value.filter(m => m.status === 'error')
+    if (failedModels.length === 0) return
+    
+    isDownloading.value = true
+    setupProgressListener()
+    
+    try {
+      for (const model of failedModels) {
+        model.status = 'pending'
+        model.progress = 0
+        model.error = undefined
+        await window.api.downloadModel(model.id)
+      }
+    } catch (error) {
+      console.error('Retry download failed:', error)
+    } finally {
+      const allDone = models.value.every(m => m.status === 'completed')
+      if (allDone) {
+        setupCompleted.value = true
+      }
+      isDownloading.value = false
+    }
+  }
+
+  function cleanup(): void {
+    if (cleanupProgressListener) {
+      cleanupProgressListener()
+      cleanupProgressListener = null
+    }
+  }
+
+  // Auto cleanup on unmount
+  onUnmounted(() => {
+    cleanup()
+  })
+
+  return {
+    // State
+    models,
+    isChecking,
+    isDownloading,
+    setupCompleted,
+    
+    // Computed
+    allModelsInstalled,
+    downloadProgress,
+    hasErrors,
+    pendingModels,
+    
+    // Actions
+    checkModelsStatus,
+    startDownload,
+    retryFailedDownloads,
+    cleanup
+  }
+})

tts-voice-app/src/renderer/src/views/ModelSetup.vue

@@ -0,0 +1,526 @@
+<script setup lang="ts">
+import { onMounted, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { useSetupStore } from '@/stores/setup'
+import { useI18n } from 'vue-i18n'
+import { Download, RefreshRight, ArrowRight, Loading, CircleCheck, CircleClose, Clock } from '@element-plus/icons-vue'
+
+const router = useRouter()
+const setupStore = useSetupStore()
+const { t } = useI18n()
+
+// Status icon mapping
+const statusIcons = {
+  pending: 'el-icon-time',
+  downloading: 'el-icon-loading',
+  extracting: 'el-icon-loading',
+  completed: 'el-icon-check',
+  error: 'el-icon-close'
+}
+
+// Status color mapping
+const statusColors = computed(() => ({
+  pending: 'var(--text-muted)',
+  downloading: 'var(--primary-color)',
+  extracting: 'var(--warning-color)',
+  completed: 'var(--success-color)',
+  error: 'var(--danger-color)'
+}))
+
+// Get status text
+function getStatusText(status: string): string {
+  const statusMap: Record<string, string> = {
+    pending: t('setup.status.pending'),
+    downloading: t('setup.status.downloading'),
+    extracting: t('setup.status.extracting'),
+    completed: t('setup.status.completed'),
+    error: t('setup.status.error')
+  }
+  return statusMap[status] || status
+}
+
+// Handle start download
+async function handleStartDownload(): Promise<void> {
+  await setupStore.startDownload()
+}
+
+// Handle retry failed
+async function handleRetry(): Promise<void> {
+  await setupStore.retryFailedDownloads()
+}
+
+// Handle continue to app
+function handleContinue(): void {
+  router.replace('/tts')
+}
+
+// Check models on mount
+onMounted(async () => {
+  const allInstalled = await setupStore.checkModelsStatus()
+  if (allInstalled) {
+    // All models already installed, redirect to main app
+    router.replace('/tts')
+  }
+})
+</script>
+
+<template>
+  <div class="setup-container">
+    <!-- Background decoration -->
+    <div class="bg-decoration">
+      <div class="circle circle-1"></div>
+      <div class="circle circle-2"></div>
+      <div class="circle circle-3"></div>
+    </div>
+
+    <!-- Main content -->
+    <div class="setup-content">
+      <!-- Header -->
+      <div class="setup-header">
+        <div class="logo">
+          <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <rect width="48" height="48" rx="12" fill="url(#logo-gradient)"/>
+            <path d="M14 24L22 32L34 16" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+            <defs>
+              <linearGradient id="logo-gradient" x1="0" y1="0" x2="48" y2="48">
+                <stop stop-color="#818cf8"/>
+                <stop offset="1" stop-color="#6366f1"/>
+              </linearGradient>
+            </defs>
+          </svg>
+        </div>
+        <h1 class="title">{{ t('setup.title') }}</h1>
+        <p class="subtitle">{{ t('setup.subtitle') }}</p>
+      </div>
+
+      <!-- Models list -->
+      <div class="models-card">
+        <div class="models-header">
+          <h2>{{ t('setup.modelsTitle') }}</h2>
+          <span class="models-count">
+            {{ setupStore.models.filter(m => m.status === 'completed').length }} / {{ setupStore.models.length }}
+          </span>
+        </div>
+
+        <div class="models-list">
+          <div 
+            v-for="model in setupStore.models" 
+            :key="model.id"
+            class="model-item"
+            :class="{ 'is-error': model.status === 'error' }"
+          >
+            <div class="model-info">
+              <div class="model-status">
+                <el-icon 
+                  :class="{ 'is-loading': model.status === 'downloading' || model.status === 'extracting' }"
+                  :style="{ color: statusColors[model.status] }"
+                >
+                  <component 
+                    :is="model.status === 'completed' ? 'CircleCheck' : 
+                         model.status === 'error' ? 'CircleClose' :
+                         model.status === 'downloading' || model.status === 'extracting' ? 'Loading' : 'Clock'"
+                  />
+                </el-icon>
+              </div>
+              <div class="model-details">
+                <div class="model-name">{{ model.name }}</div>
+                <div class="model-desc">{{ model.description }}</div>
+                <div v-if="model.error" class="model-error">{{ model.error }}</div>
+              </div>
+              <div class="model-size">{{ model.size }}</div>
+            </div>
+            
+            <div 
+              v-if="model.status === 'downloading' || model.status === 'extracting'" 
+              class="model-progress"
+            >
+              <el-progress 
+                :percentage="model.progress" 
+                :status="model.status === 'extracting' ? 'warning' : undefined"
+                :stroke-width="6"
+                :show-text="false"
+              />
+              <span class="progress-text">
+                {{ getStatusText(model.status) }} {{ model.progress }}%
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Overall progress -->
+        <div v-if="setupStore.isDownloading" class="overall-progress">
+          <div class="progress-label">
+            <span>{{ t('setup.overallProgress') }}</span>
+            <span>{{ setupStore.downloadProgress }}%</span>
+          </div>
+          <el-progress 
+            :percentage="setupStore.downloadProgress" 
+            :stroke-width="8"
+            :show-text="false"
+            color="var(--primary-color)"
+          />
+        </div>
+      </div>
+
+      <!-- Actions -->
+      <div class="setup-actions">
+        <el-button
+          v-if="!setupStore.allModelsInstalled && !setupStore.isDownloading"
+          type="primary"
+          size="large"
+          :loading="setupStore.isChecking"
+          @click="handleStartDownload"
+        >
+          <el-icon v-if="!setupStore.isChecking" class="btn-icon"><Download /></el-icon>
+          {{ setupStore.hasErrors ? t('setup.retryDownload') : t('setup.startDownload') }}
+        </el-button>
+
+        <el-button
+          v-if="setupStore.hasErrors && !setupStore.isDownloading"
+          type="warning"
+          size="large"
+          @click="handleRetry"
+        >
+          <el-icon class="btn-icon"><RefreshRight /></el-icon>
+          {{ t('setup.retryFailed') }}
+        </el-button>
+
+        <el-button
+          v-if="setupStore.allModelsInstalled"
+          type="primary"
+          size="large"
+          @click="handleContinue"
+        >
+          <el-icon class="btn-icon"><ArrowRight /></el-icon>
+          {{ t('setup.continue') }}
+        </el-button>
+
+        <div v-if="setupStore.isDownloading" class="downloading-hint">
+          <el-icon class="is-loading"><Loading /></el-icon>
+          <span>{{ t('setup.downloadingHint') }}</span>
+        </div>
+      </div>
+
+      <!-- Footer -->
+      <div class="setup-footer">
+        <p>{{ t('setup.storageHint') }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.setup-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #1a1a2e 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: auto;
+  padding: 40px 20px;
+}
+
+.bg-decoration {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+  pointer-events: none;
+  
+  .circle {
+    position: absolute;
+    border-radius: 50%;
+    opacity: 0.1;
+  }
+  
+  .circle-1 {
+    width: 600px;
+    height: 600px;
+    background: linear-gradient(135deg, #6366f1, #818cf8);
+    top: -200px;
+    right: -100px;
+  }
+  
+  .circle-2 {
+    width: 400px;
+    height: 400px;
+    background: linear-gradient(135deg, #10b981, #34d399);
+    bottom: -100px;
+    left: -100px;
+  }
+  
+  .circle-3 {
+    width: 300px;
+    height: 300px;
+    background: linear-gradient(135deg, #f59e0b, #fbbf24);
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+
+.setup-content {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  max-width: 640px;
+}
+
+.setup-header {
+  text-align: center;
+  margin-bottom: 40px;
+  
+  .logo {
+    width: 72px;
+    height: 72px;
+    margin: 0 auto 24px;
+    
+    svg {
+      width: 100%;
+      height: 100%;
+      filter: drop-shadow(0 8px 24px rgba(99, 102, 241, 0.4));
+    }
+  }
+  
+  .title {
+    font-size: 32px;
+    font-weight: 700;
+    color: #ffffff;
+    margin: 0 0 12px;
+    letter-spacing: -0.5px;
+  }
+  
+  .subtitle {
+    font-size: 16px;
+    color: rgba(255, 255, 255, 0.6);
+    margin: 0;
+    line-height: 1.6;
+  }
+}
+
+.models-card {
+  background: rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 20px;
+  padding: 28px;
+  margin-bottom: 32px;
+  
+  .models-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 20px;
+    
+    h2 {
+      font-size: 18px;
+      font-weight: 600;
+      color: #ffffff;
+      margin: 0;
+    }
+    
+    .models-count {
+      font-size: 14px;
+      color: rgba(255, 255, 255, 0.5);
+      background: rgba(255, 255, 255, 0.1);
+      padding: 4px 12px;
+      border-radius: 12px;
+    }
+  }
+}
+
+.models-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.model-item {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 12px;
+  padding: 16px;
+  transition: all 0.3s ease;
+  
+  &:hover {
+    background: rgba(255, 255, 255, 0.05);
+    border-color: rgba(255, 255, 255, 0.1);
+  }
+  
+  &.is-error {
+    border-color: rgba(239, 68, 68, 0.3);
+    background: rgba(239, 68, 68, 0.05);
+  }
+  
+  .model-info {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+  }
+  
+  .model-status {
+    flex-shrink: 0;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 8px;
+    
+    .el-icon {
+      font-size: 18px;
+      
+      &.is-loading {
+        animation: rotate 1s linear infinite;
+      }
+    }
+  }
+  
+  .model-details {
+    flex: 1;
+    min-width: 0;
+  }
+  
+  .model-name {
+    font-size: 15px;
+    font-weight: 500;
+    color: #ffffff;
+    margin-bottom: 4px;
+  }
+  
+  .model-desc {
+    font-size: 13px;
+    color: rgba(255, 255, 255, 0.5);
+    line-height: 1.4;
+  }
+  
+  .model-error {
+    font-size: 12px;
+    color: var(--danger-color);
+    margin-top: 6px;
+  }
+  
+  .model-size {
+    flex-shrink: 0;
+    font-size: 13px;
+    color: rgba(255, 255, 255, 0.4);
+    padding: 4px 8px;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 6px;
+  }
+  
+  .model-progress {
+    margin-top: 12px;
+    
+    .progress-text {
+      display: block;
+      font-size: 12px;
+      color: rgba(255, 255, 255, 0.5);
+      margin-top: 6px;
+      text-align: right;
+    }
+  }
+}
+
+.overall-progress {
+  margin-top: 20px;
+  padding-top: 20px;
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+  
+  .progress-label {
+    display: flex;
+    justify-content: space-between;
+    font-size: 14px;
+    color: rgba(255, 255, 255, 0.7);
+    margin-bottom: 10px;
+  }
+}
+
+.setup-actions {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  
+  .el-button {
+    min-width: 200px;
+    height: 48px;
+    font-size: 16px;
+    font-weight: 500;
+    border-radius: 12px;
+    
+    &--primary {
+      background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
+      border: none;
+      box-shadow: 0 8px 24px rgba(99, 102, 241, 0.3);
+      
+      &:hover {
+        background: linear-gradient(135deg, #818cf8 0%, #a5b4fc 100%);
+        box-shadow: 0 8px 32px rgba(99, 102, 241, 0.4);
+      }
+    }
+    
+    &--warning {
+      background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
+      border: none;
+      color: #1a1a2e;
+    }
+  }
+  
+  .btn-icon {
+    margin-right: 8px;
+  }
+  
+  .downloading-hint {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 14px;
+    color: rgba(255, 255, 255, 0.5);
+    
+    .el-icon {
+      color: var(--primary-color);
+    }
+  }
+}
+
+.setup-footer {
+  margin-top: 32px;
+  text-align: center;
+  
+  p {
+    font-size: 13px;
+    color: rgba(255, 255, 255, 0.4);
+    margin: 0;
+  }
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+// Element Plus overrides for dark theme
+:deep(.el-progress-bar__outer) {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+:deep(.el-progress-bar__inner) {
+  background: linear-gradient(90deg, #6366f1, #818cf8);
+}
+
+:deep(.el-progress--warning .el-progress-bar__inner) {
+  background: linear-gradient(90deg, #f59e0b, #fbbf24);
+}
+</style>