301 lines
9.3 KiB
Vue
301 lines
9.3 KiB
Vue
<template>
|
|
<div class="form-control w-full">
|
|
<label class="label">
|
|
<span class="label-text font-medium">Upload Solution Files</span>
|
|
<span class="label-text-alt text-xs">Images or GIFs only</span>
|
|
</label>
|
|
|
|
<div
|
|
class="border-2 border-dashed border-base-300 rounded-lg p-6 text-center hover:border-primary transition-colors duration-300"
|
|
:class="{ 'border-primary bg-primary/5': isDragOver }"
|
|
@drop="handleDrop"
|
|
@dragover.prevent="isDragOver = true"
|
|
@dragleave="isDragOver = false"
|
|
@dragenter.prevent
|
|
>
|
|
<input
|
|
ref="fileInput"
|
|
type="file"
|
|
multiple
|
|
accept="image/*,.gif"
|
|
class="hidden"
|
|
@change="handleFileSelect"
|
|
>
|
|
|
|
<div v-if="files.length === 0" class="space-y-4">
|
|
<div class="mx-auto w-12 h-12 text-base-content/40 flex items-center justify-center">
|
|
<i class="mdi mdi-cloud-upload text-5xl"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-base-content/70 mb-2">Drop your files here or</p>
|
|
<button
|
|
type="button"
|
|
@click="fileInput?.click()"
|
|
class="btn btn-primary btn-sm"
|
|
>
|
|
Choose Files
|
|
</button>
|
|
</div>
|
|
<p class="text-xs text-base-content/50">
|
|
Supported formats: JPG, PNG, GIF (max 10MB each)
|
|
</p>
|
|
</div>
|
|
|
|
<div v-else class="space-y-4">
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
<div
|
|
v-for="(file, index) in files"
|
|
:key="index"
|
|
class="relative group"
|
|
>
|
|
<div class="aspect-square rounded-lg overflow-hidden bg-base-200">
|
|
<img
|
|
:src="file.preview"
|
|
:alt="file.file.name"
|
|
class="w-full h-full object-cover"
|
|
>
|
|
</div>
|
|
|
|
<div class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity duration-200 rounded-lg flex items-center justify-center">
|
|
<button
|
|
@click="removeFile(index)"
|
|
class="btn btn-error btn-sm btn-circle"
|
|
>
|
|
<i class="mdi mdi-close"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="mt-2">
|
|
<p class="text-xs font-medium truncate">{{ file.file.name }}</p>
|
|
<p class="text-xs text-base-content/60">
|
|
{{ formatFileSize(file.file.size) }} • {{ file.type.toUpperCase() }}
|
|
</p>
|
|
|
|
<!-- OCR Status and Results -->
|
|
<div v-if="file.ocrProcessing" class="mt-1 flex items-center gap-1">
|
|
<span class="loading loading-spinner loading-xs"></span>
|
|
<span class="text-xs text-info">Extracting puzzle data...</span>
|
|
</div>
|
|
|
|
<div v-else-if="file.ocrError" class="mt-1">
|
|
<p class="text-xs text-error">{{ file.ocrError }}</p>
|
|
</div>
|
|
|
|
<div v-else-if="file.ocrData" class="mt-1 space-y-1">
|
|
<div class="text-xs flex items-center justify-between">
|
|
<span class="font-medium text-success">✓ OCR Complete</span>
|
|
<button
|
|
@click="retryOCR(file)"
|
|
class="btn btn-xs btn-ghost"
|
|
title="Retry OCR"
|
|
>
|
|
<i class="mdi mdi-refresh"></i>
|
|
</button>
|
|
</div>
|
|
<div class="text-xs space-y-1 bg-base-200 p-2 rounded">
|
|
<div v-if="file.ocrData.puzzle">
|
|
<strong>Puzzle:</strong> {{ file.ocrData.puzzle }}
|
|
</div>
|
|
<div v-if="file.ocrData.cost">
|
|
<strong>Cost:</strong> {{ file.ocrData.cost }}
|
|
</div>
|
|
<div v-if="file.ocrData.cycles">
|
|
<strong>Cycles:</strong> {{ file.ocrData.cycles }}
|
|
</div>
|
|
<div v-if="file.ocrData.area">
|
|
<strong>Area:</strong> {{ file.ocrData.area }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Manual OCR trigger for non-auto detected files -->
|
|
<div v-else-if="!file.ocrProcessing && !file.ocrError && !file.ocrData" class="mt-1">
|
|
<button
|
|
@click="processOCR(file)"
|
|
class="btn btn-xs btn-outline"
|
|
>
|
|
<i class="mdi mdi-text-recognition"></i>
|
|
Extract Puzzle Data
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-center">
|
|
<button
|
|
type="button"
|
|
@click="fileInput?.click()"
|
|
class="btn btn-outline btn-sm"
|
|
>
|
|
Add More Files
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="error" class="label">
|
|
<span class="label-text-alt text-error">{{ error }}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, watch, nextTick } from 'vue'
|
|
import { ocrService, type OpusMagnumData } from '../services/ocrService'
|
|
import type { SubmissionFile } from '@/types'
|
|
|
|
interface Props {
|
|
modelValue: SubmissionFile[]
|
|
}
|
|
|
|
interface Emits {
|
|
'update:modelValue': [files: SubmissionFile[]]
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
const emit = defineEmits<Emits>()
|
|
|
|
const fileInput = ref<HTMLInputElement>()
|
|
const isDragOver = ref(false)
|
|
const error = ref('')
|
|
const files = ref<SubmissionFile[]>([])
|
|
|
|
// Watch for external changes to modelValue
|
|
watch(() => props.modelValue, (newFiles) => {
|
|
files.value = newFiles
|
|
}, { immediate: true })
|
|
|
|
// Watch for internal changes and emit
|
|
watch(files, (newFiles) => {
|
|
emit('update:modelValue', newFiles)
|
|
}, { deep: true })
|
|
|
|
const handleFileSelect = (event: Event) => {
|
|
const target = event.target as HTMLInputElement
|
|
if (target.files) {
|
|
processFiles(Array.from(target.files))
|
|
}
|
|
}
|
|
|
|
const handleDrop = (event: DragEvent) => {
|
|
event.preventDefault()
|
|
isDragOver.value = false
|
|
|
|
if (event.dataTransfer?.files) {
|
|
processFiles(Array.from(event.dataTransfer.files))
|
|
}
|
|
}
|
|
|
|
const processFiles = async (newFiles: File[]) => {
|
|
error.value = ''
|
|
|
|
for (const file of newFiles) {
|
|
if (!isValidFile(file)) {
|
|
continue
|
|
}
|
|
|
|
try {
|
|
const preview = await createPreview(file)
|
|
const fileType = file.type.startsWith('image/gif') ? 'gif' : 'image'
|
|
|
|
const submissionFile: SubmissionFile = {
|
|
file,
|
|
preview,
|
|
type: fileType,
|
|
ocrProcessing: false,
|
|
ocrError: undefined,
|
|
ocrData: undefined
|
|
}
|
|
|
|
files.value.push(submissionFile)
|
|
|
|
// Start OCR processing for Opus Magnum images (with delay to ensure reactivity)
|
|
if (isOpusMagnumImage(file)) {
|
|
nextTick(() => {
|
|
processOCR(submissionFile)
|
|
})
|
|
}
|
|
} catch (err) {
|
|
error.value = `Failed to process ${file.name}`
|
|
}
|
|
}
|
|
}
|
|
|
|
const isValidFile = (file: File): boolean => {
|
|
// Check file type
|
|
if (!file.type.startsWith('image/')) {
|
|
error.value = `${file.name} is not a valid image file`
|
|
return false
|
|
}
|
|
|
|
// Check file size (10MB limit)
|
|
if (file.size > 10 * 1024 * 1024) {
|
|
error.value = `${file.name} is too large (max 10MB)`
|
|
return false
|
|
}
|
|
|
|
return true
|
|
}
|
|
|
|
const createPreview = (file: File): Promise<string> => {
|
|
return new Promise((resolve, reject) => {
|
|
const reader = new FileReader()
|
|
reader.onload = (e) => resolve(e.target?.result as string)
|
|
reader.onerror = reject
|
|
reader.readAsDataURL(file)
|
|
})
|
|
}
|
|
|
|
const removeFile = (index: number) => {
|
|
files.value.splice(index, 1)
|
|
}
|
|
|
|
const formatFileSize = (bytes: number): string => {
|
|
if (bytes === 0) return '0 Bytes'
|
|
|
|
const k = 1024
|
|
const sizes = ['Bytes', 'KB', 'MB', 'GB']
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
|
|
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
|
|
}
|
|
|
|
const isOpusMagnumImage = (file: File): boolean => {
|
|
// Basic heuristic - could be enhanced with actual image analysis
|
|
return file.type.startsWith('image/') && file.size > 50000 // > 50KB likely screenshot
|
|
}
|
|
|
|
const processOCR = async (submissionFile: SubmissionFile) => {
|
|
// Find the file in the reactive array to ensure proper reactivity
|
|
const fileIndex = files.value.findIndex(f => f.file === submissionFile.file)
|
|
if (fileIndex === -1) return
|
|
|
|
// Update the reactive array directly
|
|
files.value[fileIndex].ocrProcessing = true
|
|
files.value[fileIndex].ocrError = undefined
|
|
files.value[fileIndex].ocrData = undefined
|
|
|
|
try {
|
|
console.log('Starting OCR processing for:', submissionFile.file.name)
|
|
await ocrService.initialize()
|
|
const ocrData = await ocrService.extractOpusMagnumData(submissionFile.file)
|
|
console.log('OCR completed:', ocrData)
|
|
|
|
// Force reactivity update
|
|
await nextTick()
|
|
files.value[fileIndex].ocrData = ocrData
|
|
await nextTick()
|
|
} catch (error) {
|
|
console.error('OCR processing failed:', error)
|
|
files.value[fileIndex].ocrError = 'Failed to extract puzzle data'
|
|
} finally {
|
|
files.value[fileIndex].ocrProcessing = false
|
|
}
|
|
}
|
|
|
|
const retryOCR = (submissionFile: SubmissionFile) => {
|
|
processOCR(submissionFile)
|
|
}
|
|
</script>
|