diff --git a/.env b/.env
deleted file mode 100644
index a57c210..0000000
--- a/.env
+++ /dev/null
@@ -1 +0,0 @@
-BASE_URL='yolo8.pages.dev'
\ No newline at end of file
diff --git a/.env.development b/.env.development
new file mode 100644
index 0000000..7f43c39
--- /dev/null
+++ b/.env.development
@@ -0,0 +1,2 @@
+BASE_URL='/'
+VUE_APP_PUBLIC_PATH='/'
\ No newline at end of file
diff --git a/.env.production b/.env.production
new file mode 100644
index 0000000..e129c3d
--- /dev/null
+++ b/.env.production
@@ -0,0 +1,2 @@
+BASE_URL='/'
+VUE_APP_PUBLIC_PATH='//fastly.jsdelivr.net/gh/webees/tfjs-yolov8@cf-pages/'
\ No newline at end of file
diff --git a/.github/workflows/pages.yaml b/.github/workflows/pages.yaml
index 4f78690..0caa014 100644
--- a/.github/workflows/pages.yaml
+++ b/.github/workflows/pages.yaml
@@ -32,5 +32,5 @@ jobs:
       - name: Deploy 🚀
         uses: JamesIves/github-pages-deploy-action@v4
         with:
-          BRANCH: gh-pages
+          BRANCH: cf-pages
           FOLDER: dist
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 4325f9e..0e9cc61 100644
--- a/public/index.html
+++ b/public/index.html
@@ -12,8 +12,11 @@
     <script src="//fastly.jsdelivr.net/npm/vue@3.3/dist/vue.global<%= IS_DEV ? '.' : '.prod.' %>js"></script>
     <script src="//fastly.jsdelivr.net/npm/vue-router@4.2/dist/vue-router.global<%= IS_DEV ? '.' : '.prod.' %>js"></script>
     <script src="//fastly.jsdelivr.net/npm/vue-i18n@9.4/dist/vue-i18n.global<%= IS_DEV ? '.' : '.prod.' %>js"></script>
+    <script src="//fastly.jsdelivr.net/npm/pinia@2.1.6/dist/pinia.iife.prod.js"></script>
     <script src="//fastly.jsdelivr.net/npm/axios@1.5/dist/axios.min.js"></script>
     <script src="//fastly.jsdelivr.net/npm/vant@4.6/lib/vant.min.js"></script>
+    <script src="//fastly.jsdelivr.net/npm/@tensorflow/tfjs@4.11/dist/tf.min.js"></script>
+    <script src="//fastly.jsdelivr.net/npm/@tensorflow/tfjs-backend-webgl@4.11/dist/tf-backend-webgl.min.js"></script>
   </head>
   <body>
     <noscript>
diff --git a/src/registerServiceWorker.ts b/src/registerServiceWorker.ts
index 1bfe7b1..2ce0686 100644
--- a/src/registerServiceWorker.ts
+++ b/src/registerServiceWorker.ts
@@ -3,7 +3,7 @@
 import { register } from 'register-service-worker'
 
 if (process.env.NODE_ENV === 'production') {
-  register(`${process.env.BASE_URL}service-worker.js`, {
+  register(`/service-worker.js`, {
     ready() {
       console.log('App is being served from cache by a service worker.\n' + 'For more details, visit https://goo.gl/AFskqB')
     },
diff --git a/src/utils/tf.ts b/src/utils/tf.ts
index 01a819e..98b0058 100644
--- a/src/utils/tf.ts
+++ b/src/utils/tf.ts
@@ -4,7 +4,7 @@ import { yolo } from '@/vue-pinia'
 
 export function loadModel() {
   tf.ready().then(async () => {
-    const model = await tf.loadGraphModel(`/${yolo().name}_web_model/model.json`, {
+    const model = await tf.loadGraphModel(`${process.env.VUE_APP_PUBLIC_PATH}${yolo().name}_web_model/model.json`, {
       onProgress: progress => {
         console.log('tf.loadGraphModel', progress)
         yolo().loading = progress
diff --git a/src/vue-router.ts b/src/vue-router.ts
index 1d38084..b84a373 100644
--- a/src/vue-router.ts
+++ b/src/vue-router.ts
@@ -21,7 +21,7 @@ const routes: Array<RouteRecordRaw> = [
 ]
 
 const router = createRouter({
-  history: createWebHistory(process.env.BASE_URL),
+  history: createWebHistory('/'),
   routes,
   linkActiveClass: 'active',
   scrollBehavior(to, from, savedPosition) {
diff --git a/vue.config.js b/vue.config.js
index 48caf43..bca1bd0 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -36,7 +36,7 @@ const vueServe = c => {
 }
 
 const vueConfig = {
-  publicPath: IS_DEV ? '/' : '//fastly.jsdelivr.net/gh/webees/tfjs-yolov8@gh-pages/',
+  publicPath: process.env.VUE_APP_PUBLIC_PATH,
   outputDir: 'dist',
   productionSourceMap: IS_DEV,
   integrity: false,
@@ -50,13 +50,21 @@ const vueConfig = {
     open: false,
     proxy: null
   },
+  pwa: {
+    manifestOptions: {
+      start_url: '/'
+    }
+  },
   configureWebpack: {
     externals: {
       'vue-router': 'VueRouter',
       'vue-i18n': 'VueI18n',
       vue: 'Vue',
       axios: 'axios',
-      vant: 'vant'
+      vant: 'vant',
+      pinia: 'Pinia',
+      '@tensorflow/tfjs': 'tf',
+      '@tensorflow/tfjs-backend-webgl': 'tf.backend'
     },
     plugins: [
       require('unplugin-vue-components/webpack')({
