From 5c91f20e7156ec38d417900fe7d3388d329738f8 Mon Sep 17 00:00:00 2001
From: webees <5155291+webees@users.noreply.github.com>
Date: Sat, 16 Sep 2023 07:52:20 +0800
Subject: [PATCH] cf-pages

---
 .env                         |  1 -
 .env.development             |  2 ++
 .env.production              |  2 ++
 .github/workflows/pages.yaml |  2 +-
 package-lock.json            | 16 ++++++++++------
 package.json                 |  3 ++-
 public/index.html            |  2 ++
 src/registerServiceWorker.ts |  2 +-
 src/utils/tf.ts              |  2 +-
 src/vue-router.ts            |  2 +-
 vue.config.js                | 14 ++++++++++++--
 11 files changed, 34 insertions(+), 14 deletions(-)
 delete mode 100644 .env
 create mode 100644 .env.development
 create mode 100644 .env.production

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/package-lock.json b/package-lock.json
index 4eb372f..57c32ae 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4594,9 +4594,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001418",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001418.tgz",
-      "integrity": "sha512-oIs7+JL3K9JRQ3jPZjlH6qyYDp+nBTCais7hjh0s+fuBwufc7uZ7hPYMXrDOJhV360KGMTcczMRObk0/iMqZRg==",
+      "version": "1.0.30001534",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001534.tgz",
+      "integrity": "sha512-vlPVrhsCS7XaSh2VvWluIQEzVhefrUQcEsQWSS5A5V+dM07uv1qHeQzAOTGIMy9i3e9bH15+muvI/UHojVgS/Q==",
       "dev": true,
       "funding": [
         {
@@ -4606,6 +4606,10 @@
         {
           "type": "tidelift",
           "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
       ]
     },
@@ -18272,9 +18276,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001418",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001418.tgz",
-      "integrity": "sha512-oIs7+JL3K9JRQ3jPZjlH6qyYDp+nBTCais7hjh0s+fuBwufc7uZ7hPYMXrDOJhV360KGMTcczMRObk0/iMqZRg==",
+      "version": "1.0.30001534",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001534.tgz",
+      "integrity": "sha512-vlPVrhsCS7XaSh2VvWluIQEzVhefrUQcEsQWSS5A5V+dM07uv1qHeQzAOTGIMy9i3e9bH15+muvI/UHojVgS/Q==",
       "dev": true
     },
     "case-sensitive-paths-webpack-plugin": {
diff --git a/package.json b/package.json
index 2c5c3f2..81688ab 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,8 @@
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
-    "taze": "npx taze"
+    "taze": "npx taze",
+    "ubd": "npx update-browserslist-db@latest"
   },
   "dependencies": {
     "@tensorflow/tfjs": "^4.11.0",
diff --git a/public/index.html b/public/index.html
index 4325f9e..527df3d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -14,6 +14,8 @@
     <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/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..a8ebc4f 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,23 @@ const vueConfig = {
     open: false,
     proxy: null
   },
+  pwa: {
+    manifestOptions: {
+      start_url: '/'
+    },
+    workboxOptions: {
+      maximumFileSizeToCacheInBytes: 9000000 // <---- increasing the file size to cached 9mb
+    }
+  },
   configureWebpack: {
     externals: {
       'vue-router': 'VueRouter',
       'vue-i18n': 'VueI18n',
       vue: 'Vue',
       axios: 'axios',
-      vant: 'vant'
+      vant: 'vant',
+      '@tensorflow/tfjs': 'tf',
+      '@tensorflow/tfjs-backend-webgl': 'tf.backend'
     },
     plugins: [
       require('unplugin-vue-components/webpack')({