use api in front

opus_submitter/src/components/FileUpload.vue

@@ -143,10 +143,11 @@
 <script setup lang="ts">
 import { ref, watch, nextTick } from 'vue'
 import { ocrService, type OpusMagnumData } from '../services/ocrService'
-import type { SubmissionFile } from '@/types'
+import type { SubmissionFile, SteamCollectionItem } from '@/types'
 
 interface Props {
   modelValue: SubmissionFile[]
+  puzzles?: SteamCollectionItem[]
 }
 
 interface Emits {
@@ -171,6 +172,14 @@ watch(files, (newFiles) => {
   emit('update:modelValue', newFiles)
 }, { deep: true })
 
+// Watch for puzzle changes and update OCR service
+watch(() => props.puzzles, (newPuzzles) => {
+  if (newPuzzles && newPuzzles.length > 0) {
+    const puzzleNames = newPuzzles.map(puzzle => puzzle.title)
+    ocrService.setAvailablePuzzleNames(puzzleNames)
+  }
+}, { immediate: true })
+
 const handleFileSelect = (event: Event) => {
   const target = event.target as HTMLInputElement
   if (target.files) {