Improvement

src/composables/useTileProcessingComposable.ts

@@ -4,26 +4,32 @@ import type { TileAnalysisResult, TileWorkerMessage } from '@/types/tileTypes'
 import { ref } from 'vue'
 
 // Constants for image processing
-const DOWNSCALE_WIDTH = 32
-const DOWNSCALE_HEIGHT = 16
+const DOWNSCALE_WIDTH = 16
+const DOWNSCALE_HEIGHT = 8
 const COLOR_SIMILARITY_THRESHOLD = 30
 const EDGE_SIMILARITY_THRESHOLD = 20
-const BATCH_SIZE = 4
+const BATCH_SIZE = 8
 
 export function useTileProcessingComposable() {
   const tileAnalysisCache = ref<Map<string, { color: { r: number; g: number; b: number }; edge: number; namePrefix: string }>>(new Map())
   const processingQueue = ref<Tile[]>([])
   let isProcessing = false
-  const worker = new Worker(new URL('@/workers/tileAnalyzerWorker.ts', import.meta.url), { type: 'module' })
 
-  worker.onmessage = (e: MessageEvent<TileAnalysisResult>) => {
-    const { tileId, color, edge, namePrefix } = e.data
-    tileAnalysisCache.value.set(tileId, { color, edge, namePrefix })
-    isProcessing = false
-    processBatch()
-  }
+  const NUM_WORKERS = 4
+  const workers = Array.from({ length: NUM_WORKERS }, () => new Worker(new URL('@/workers/tileAnalyzerWorker.ts', import.meta.url), { type: 'module' }))
+  let currentWorker = 0
 
-  async function processTileAsync(tile: Tile): Promise<void> {
+  // Modify worker message handling
+  workers.forEach((worker) => {
+    worker.onmessage = (e: MessageEvent<TileAnalysisResult>) => {
+      const { tileId, color, edge, namePrefix } = e.data
+      tileAnalysisCache.value.set(tileId, { color, edge, namePrefix })
+      isProcessing = false
+      processBatch()
+    }
+  })
+
+  async function processTileAsync(tile: Tile, worker: Worker): Promise<void> {
     if (tileAnalysisCache.value.has(tile.id)) return
 
     return new Promise((resolve) => {
@@ -60,7 +66,12 @@ export function useTileProcessingComposable() {
     isProcessing = true
 
     const batch = processingQueue.value.splice(0, BATCH_SIZE)
-    Promise.all(batch.map((tile) => processTileAsync(tile))).then(() => {
+    Promise.all(
+      batch.map((tile) => {
+        currentWorker = (currentWorker + 1) % NUM_WORKERS
+        return processTileAsync(tile, workers[currentWorker])
+      })
+    ).then(() => {
       isProcessing = false
       if (processingQueue.value.length > 0) {
         setTimeout(processBatch, 0)
@@ -87,7 +98,7 @@ export function useTileProcessingComposable() {
   }
 
   function cleanup() {
-    worker.terminate()
+    workers.forEach((worker) => worker.terminate())
   }
 
   return {