Vue 3

.eslintrc.json

@@ -20,7 +20,6 @@
         "vue/require-v-for-key": "off"
     },
     "globals": {
-        "biigle": "readonly",
-        "Vue": "readonly"
+        "biigle": "readonly"
     }
 }

.gitignore

@@ -1,2 +1,3 @@
 /vendor
 /node_modules
+hot

.npmrc

@@ -1,2 +1 @@
-@mzur:registry=https://npm.pkg.github.com
 @biigle:registry=https://npm.pkg.github.com

package.json

@@ -3,27 +3,21 @@
   "version": "0.0.1",
   "license": "GPL-3.0-only",
   "scripts": {
-    "dev": "npm run development",
-    "development": "mix",
-    "watch": "mix watch",
-    "watch-poll": "mix watch -- --watch-options-poll=1000",
-    "hot": "mix watch --hot",
-    "prod": "npm run production",
-    "production": "mix --production",
+    "dev": "vite",
+    "build": "vite build && php ../../../artisan vendor:publish --provider Biigle\\\\Modules\\\\MagicSam\\\\MagicSamServiceProvider --tag public --force",
     "lint": "eslint --ext .js,.vue --resolve-plugins-relative-to . src/resources/assets/js/"
   },
   "devDependencies": {
-    "@mzur/laravel-mix-artisan-publish": "^1.0.0",
-    "cross-env": "^5.1",
+    "@vitejs/plugin-vue": "^5.2.1",
     "eslint": "^7.3.1",
     "eslint-plugin-vue": "^7.0.0",
-    "laravel-mix": "^6.0.13",
-    "resolve-url-loader": "^5.0.0",
+    "laravel-vite-plugin": "^1.2.0",
     "sass": "^1.15.2",
-    "sass-loader": "^8.0.0",
-    "vue-loader": "^15.9.6",
-    "vue-template-compiler": "^2.6.11"
+    "vite": "^6.2.1",
+    "vite-plugin-externalize-dependencies": "^1.0.1",
+    "vite-plugin-static-copy": "^2.3.0"
   },
+  "type": "module",
   "dependencies": {
     "@biigle/ol": "^9.2.4",
     "magic-wand-tool": "^1.1.7",

src/MagicSamServiceProvider.php

@@ -46,7 +46,7 @@ public function boot(Modules $modules, Router $router)
         ]);
 
         $this->publishes([
-            __DIR__.'/public/assets' => public_path('vendor/magic-sam'),
+            __DIR__.'/public' => public_path('vendor/magic-sam'),
         ], 'public');
 
         if ($this->app->runningInConsole()) {

src/public/manifest.json

@@ -0,0 +1,13 @@
+{
+  "src/resources/assets/js/main.js": {
+    "file": "assets/main-BgMYDZgU.js",
+    "name": "main",
+    "src": "src/resources/assets/js/main.js",
+    "isEntry": true
+  },
+  "src/resources/assets/sass/main.scss": {
+    "file": "assets/main-BUYHXYJL.css",
+    "src": "src/resources/assets/sass/main.scss",
+    "isEntry": true
+  }
+}

src/resources/assets/js/MagicSamMixin.vue

@@ -1,12 +1,12 @@
 <script>
-import ImageEmbeddingApi from './api/image';
-import MagicSamInteraction from './ol/MagicSamInteraction';
-import {Echo} from './import';
-import {handleErrorResponse} from './import';
-import {Keyboard} from './import';
-import {Messages} from './import';
-import {Styles} from './import';
-import {Events} from './import';
+import ImageEmbeddingApi from './api/image.js';
+import MagicSamInteraction from './ol/MagicSamInteraction.js';
+import {Echo} from './import.js';
+import {handleErrorResponse} from './import.js';
+import {Keyboard} from './import.js';
+import {Messages} from './import.js';
+import {Styles} from './import.js';
+import {Events} from './import.js';
 
 let magicSamInteraction;
 let loadedImageId;
@@ -178,7 +178,7 @@ export default {
         },
     },
     created() {
-        Events.$on('settings.samThrottleInterval', this.setThrottleInterval);
+        Events.on('settings.samThrottleInterval', this.setThrottleInterval);
         Echo.getInstance().private(`user-${this.userId}`)
             .listen('.Biigle\\Modules\\MagicSam\\Events\\EmbeddingAvailable', this.handleSamEmbeddingAvailable)
             .listen('.Biigle\\Modules\\MagicSam\\Events\\EmbeddingFailed', this.handleSamEmbeddingFailed);

src/resources/assets/js/api/image.js

@@ -1,8 +1,8 @@
+import {Resource} from '../import.js';
+
 /**
  * Resource to request a SAM embedding.
  *
  * resource.save({id: 1}, {}).then(...);
- *
- * @type {Vue.resource}
  */
-export default Vue.resource('api/v1/images{/id}/sam-embedding');
+export default Resource('api/v1/images{/id}/sam-embedding');

src/resources/assets/js/components/settingsTabPlugin.vue

@@ -1,5 +1,11 @@
+<template>
+    <div class="sidebar-tab__section">
+        <h5 title="Refresh rate for updating Magic SAM proposals">Magic SAM refresh rate (<span v-text="stepName"></span>)</h5>
+        <input type="range" min="0" max="4" step="1" v-model="stepIndex" onmouseup="this.blur()">
+    </div>
+</template>
 <script>
-import {Events} from '../import';
+import {Events} from '../import.js';
 /**
  * The plugin component to edit the Magic-SAM throttle interval.
  *
@@ -27,7 +33,7 @@ export default {
     watch: {
         stepIndex(index) {
             let interval = this.steps[index];
-            Events.$emit('settings.samThrottleInterval', interval);
+            Events.emit('settings.samThrottleInterval', interval);
             this.settings.set('samRefreshRateStep', index);
         },
     },

src/resources/assets/js/import.js

@@ -1,9 +1,10 @@
 export let annotationCanvasMixins = biigle.$require('annotations.stores.canvasMixins');
 export let Echo = biigle.$require('echo');
 export let Events = biigle.$require('events');
+export let handleErrorResponse = biigle.$require('handleErrorResponse');
 export let Keyboard = biigle.$require('keyboard');
 export let Messages = biigle.$require('messages');
-export let handleErrorResponse = Messages.handleErrorResponse;
+export let Resource = biigle.$require('resource');
 export let SettingsTabPlugins = biigle.$require('annotations.components.settingsTabPlugins');
 export let Styles = biigle.$require('annotations.stores.styles');
 export let throttle = biigle.$require('utils.throttle');

src/resources/assets/js/main.js

@@ -1,5 +1,8 @@
-import './settingsTabPlugins';
-import MagicSamMixin from './MagicSamMixin';
-import {annotationCanvasMixins} from './import';
+import './settingsTabPlugins.js';
+import MagicSamMixin from './MagicSamMixin.vue';
+import {annotationCanvasMixins} from './import.js';
+import {env} from "onnxruntime-web";
 
 annotationCanvasMixins.push(MagicSamMixin);
+// This path is configured for the publish command in the MagicSamServiceProvider.
+env.wasm.wasmPaths = '/vendor/magic-sam/';

src/resources/assets/js/ol/MagicSamInteraction.js

@@ -7,7 +7,7 @@ import VectorLayer from '@biigle/ol/layer/Vector';
 import VectorSource from '@biigle/ol/source/Vector';
 import {InferenceSession, Tensor} from "onnxruntime-web";
 import {linearRingContainsXY} from '@biigle/ol/geom/flat/contains';
-import {throttle} from '../import';
+import {throttle} from '../import.js';
 
 const LONG_SIDE_LENGTH = 1024;
 
@@ -105,7 +105,7 @@ class MagicSamInteraction extends PointerInteraction {
 
         // Maybe the model is not initialized at this point so we have to wait for that,
         // too.
-        return Vue.Promise.all([npy.load(url), this.initPromise])
+        return Promise.all([npy.load(url), this.initPromise])
             .then(([npArray, ]) => {
                 this.embedding = new Tensor("float32", npArray.data, npArray.shape);
                 this._runModelWarmup();

src/resources/assets/js/settingsTabPlugins.js

@@ -1,5 +1,5 @@
-import Plugin from './components/settingsTabPlugin';
-import {SettingsTabPlugins} from './import';
+import Plugin from './components/settingsTabPlugin.vue';
+import {SettingsTabPlugins} from './import.js';
 
 /**
  * The plugin component set the SAM throttle interval.

src/resources/views/annotationsSettingsTab.blade.php

@@ -1,6 +1 @@
-<component :is="plugins.magicSam" :settings="settings" inline-template>
-    <div class="sidebar-tab__section">
-            <h5 title="Refresh rate for updating Magic SAM proposals">Magic SAM refresh rate (<span v-text="stepName"></span>)</h5>
-            <input type="range" min="0" max="4" step="1" v-model="stepIndex" onmouseup="this.blur()">
-    </div>
-</component>
+<component :is="plugins.magicSam" :settings="settings"></component>

src/resources/views/imageAnnotationPolygonTools.blade.php

@@ -1,13 +1,27 @@
-<control-button v-if="image?.tiled" icon="fa-hat-wizard" title="The magic SAM tool is not available for very large images" :disabled="true"></control-button>
-<control-button v-else v-cloak icon="fa-hat-wizard" :title="magicSamButtonTitle" :active="isMagicSamming" :loading="loadingMagicSam" :class="magicSamButtonClass" v-on:click="toggleMagicSam"></control-button>
+<control-button
+    v-if="image?.tiled"
+    icon="fa-hat-wizard"
+    title="The magic SAM tool is not available for very large images"
+    :disabled="true"
+    ></control-button>
+<control-button
+    v-else
+    icon="fa-hat-wizard"
+    :title="magicSamButtonTitle"
+    :active="isMagicSamming"
+    :loading="loadingMagicSam"
+    :class="magicSamButtonClass"
+    v-on:click="toggleMagicSam"
+    v-on:active="onActive"
+    ></control-button>
 
 @push('scripts')
-<script src="{{ cachebust_asset('vendor/magic-sam/scripts/main.js') }}"></script>
-<script type="text/javascript">
-    biigle.$declare('magic-sam.onnx-url', '{{cachebust_asset('vendor/magic-sam/'.config('magic_sam.onnx_file'))}}');
+    {{vite_hot(base_path('vendor/biigle/magic-sam/hot'), ['src/resources/assets/js/main.js'], 'vendor/magic-sam')}}
+<script type="module">
+    biigle.$declare('magic-sam.onnx-url', '{{cachebust_asset('vendor/magic-sam/assets/'.config('magic_sam.onnx_file'))}}');
 </script>
 @endpush
 
 @push('styles')
-<link rel="stylesheet" type="text/css" href="{{ cachebust_asset('vendor/magic-sam/styles/main.css') }}">
+{{vite_hot(base_path('vendor/biigle/magic-sam/hot'), ['src/resources/assets/sass/main.scss'], 'vendor/magic-sam')}}
 @endpush

src/resources/views/manualCreatingPolygons.blade.php

@@ -5,7 +5,7 @@
 </p>
 
 <p class="text-center">
-    <a href="{{asset('vendor/magic-sam/images/creating_annotations_magic_sam_1.jpg')}}"><img src="{{asset('vendor/magic-sam/images/creating_annotations_magic_sam_1.jpg')}}" width="33%"></a>
+    <a href="{{asset('vendor/magic-sam/assets/creating_annotations_magic_sam_1.jpg')}}"><img src="{{asset('vendor/magic-sam/assets/creating_annotations_magic_sam_1.jpg')}}" width="33%"></a>
 </p>
 
 <p>
@@ -17,6 +17,6 @@
 </p>
 
 <p class="text-center">
-    <a href="{{asset('vendor/magic-sam/images/creating_annotations_magic_sam_2.jpg')}}"><img src="{{asset('vendor/magic-sam/images/creating_annotations_magic_sam_2.jpg')}}" width="49%"></a>
-    <a href="{{asset('vendor/magic-sam/images/creating_annotations_magic_sam_3.jpg')}}"><img src="{{asset('vendor/magic-sam/images/creating_annotations_magic_sam_3.jpg')}}" width="49%"></a>
+    <a href="{{asset('vendor/magic-sam/assets/creating_annotations_magic_sam_2.jpg')}}"><img src="{{asset('vendor/magic-sam/assets/creating_annotations_magic_sam_2.jpg')}}" width="49%"></a>
+    <a href="{{asset('vendor/magic-sam/assets/creating_annotations_magic_sam_3.jpg')}}"><img src="{{asset('vendor/magic-sam/assets/creating_annotations_magic_sam_3.jpg')}}" width="49%"></a>
 </p>

vite.config.js

@@ -0,0 +1,54 @@
+import externalize from "vite-plugin-externalize-dependencies";
+import laravel from 'laravel-vite-plugin';
+import vue from '@vitejs/plugin-vue';
+import { defineConfig } from 'vite';
+import { viteStaticCopy } from 'vite-plugin-static-copy';
+
+export default defineConfig({
+    plugins: [
+        // Ensure that Vue is loaded through the importmap of biigle/core in dev mode.
+        externalize({externals: ["vue"]}),
+        viteStaticCopy({
+            targets: [
+                {
+                    src: 'node_modules/onnxruntime-web/dist/*.wasm',
+                    dest: 'assets',
+                },
+                {
+                    src: 'src/resources/assets/images/*',
+                    dest: 'assets',
+                },
+                {
+                    src: 'src/resources/assets/models/*',
+                    dest: 'assets',
+                },
+            ],
+        }),
+        laravel({
+            publicDirectory: 'src',
+            buildDirectory: 'public',
+            input: [
+                'src/resources/assets/sass/main.scss',
+                'src/resources/assets/js/main.js',
+            ],
+            hotFile: 'hot',
+        }),
+        vue({
+            template: {
+                transformAssetUrls: {
+                    base: null,
+                    includeAbsolute: false,
+                },
+                compilerOptions: {
+                    whitespace: 'preserve',
+                },
+            },
+        }),
+    ],
+    build: {
+        rollupOptions: {
+            // Ensure that Vue is loaded through the importmap of biigle/core in build.
+            external: ['vue'],
+        },
+    },
+});