feat: use webgpu for FlowerCaptioner

TODO.md

@@ -1,3 +1,25 @@
 ## TODO
 
+* [x] cache manager (to delete models files)
+* [x] make model options component for settings
+* [x] refactor settings - split into components
+    - [x] AppOptions
+    - [x] CreationParams
+    - [x] mutationsRates
+    - [x] AppActions
+    - [x] make new layout for settings
+* [x] change xenova/transformers to huggingface/transformers
+* [ ] test all models
+    - fp32 works on CPU(it takes ~13s), GPU(it takes ~1m30s)
+    - fp16 gives exception
+    - q8 works on CPU (Firefox, Chrome, Edge)
+    - q8 gives garbled output on Chrome and Edge (GPU)
+    - int8 gives error on session creation (Can't create a session. ERROR_CODE: 9, ERROR_MESSAGE: Could not find an implementation for ConvInteger(10) node with name '/embeddings/patch_embeddings/projection/Conv_quant')
+    - uint8 works on CPU
+    - q4 works on CPU (it takes ~24s)
+    - q4f16 gives exception.
+    - bnb4 - works on CPU (it takes ~24s)
+* [ ] fix not working on Chrome or Edge GPU
+* [ ] Firefox webGPU not supported yet. (wait for it)
+
 * [ ] refactor - split store into stores

package.json

@@ -12,7 +12,7 @@
     },
     "dependencies": {
         "@cristianglezm/flower-evolver-wasm": "^1.0.6",
-        "@xenova/transformers": "^2.17.2",
+        "@huggingface/transformers": "^3.0.2",
         "axios": "^1.7.7",
         "dexie": "^4.0.10",
         "mitt": "^3.0.1",

src/App.vue

@@ -12,54 +12,21 @@
 
 <script setup>
 
-import { onMounted, inject } from 'vue';
+import { onMounted, inject, onUnmounted } from 'vue';
 import ProgressModal from './components/ProgressModal.vue';
 import MultiProgressNodal from './components/MultiProgressModal.vue';
 import DescriptionModal from './components/DescriptionModal.vue';
 import AppTitle from './components/AppTitle.vue';
 import AppMenu from './components/AppMenu.vue';
 import AppFooter from './components/AppFooter.vue';
 import { useRoute } from 'vue-router';
-import { Captioner } from './store/AIStore/AI';
 import { useFlowersStore } from './store';
+import { useAIStore } from './store/AIStore';
 
 const routes = useRoute();
 const emitter = inject('emitter');
 const store = useFlowersStore();
-
-emitter.on('loadModel', () => {
-  setTimeout(() => {
-      emitter.emit('requestMultiProgressBar', {
-            status: "setup",
-            title: "downloading or loading model for describing flowers",
-            onLoad: async () => {
-              Captioner.getInstance((data) => {
-                  switch(data.status){
-                    case "initiate":{
-                        let event = {
-                          status: "init",
-                          name: data.file,
-                          progress: 0,
-                          total: 100
-                        };
-                        emitter.emit('requestMultiProgressBar', event);
-                    }
-                      break;
-                    case "progress":{
-                        let event = {
-                          status: "update",
-                          name: data.file,
-                          progress: data.progress
-                        };
-                        emitter.emit('requestMultiProgressBar', event);
-                    }
-                      break;
-                  }
-              });
-            }
-      });
-    }, 2000);
-});
+const AIStore = useAIStore();
 
 const isLocal = () => {
   return routes.path === '/Local' || 
@@ -68,10 +35,28 @@ const isLocal = () => {
           routes.path === '/Settings';
 };
 onMounted(() => {
+  emitter.on('App#loadModel', () => {
+    setTimeout(() => {
+        emitter.emit('requestMultiProgressBar', {
+              status: "setup",
+              title: "downloading or loading model for describing flowers",
+              onLoad: async () => {
+                AIStore.requestModelLoad();
+              }
+        });
+      }, 2000);
+  });
+  AIStore.channel.on('App#ToEmitter', (e) => {
+    emitter.emit(e.eventName, e.event);
+  });
   if(store.settings.loadModel){
-    emitter.emit('loadModel');
+    emitter.emit('App#loadModel');
   }
-})
+});
+onUnmounted(() => {
+  AIStore.channel.off('App#ToEmitter');
+  emitter.off("App#loadModel");
+});
 
   /*!
    * @license SIL Open Font License 1.1 - Copyright (c) 2023, GitHub