polylan/polylan-submitter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

small ui fixes

Browse Source
This commit is contained in:
Legrems
2025-11-23 12:03:07 +01:00
parent 596731a8a7
commit 012b72527b
15 changed files with 712 additions and 578 deletions
Download Patch File Download Diff File Expand all files Collapse all files
opus_submitter/src/components/SubmissionForm.vue
+146 -108
View File
@@ -5,37 +5,52 @@
<i class="mdi mdi-check-circle text-2xl text-primary"></i>
Submit Solution
</h2>
<form @submit.prevent="handleSubmit" class="space-y-6">
<!-- Detected Puzzles Summary -->
<div v-if="Object.keys(responsesByPuzzle).length > 0" class="alert alert-info">
<i class="mdi mdi-information-outline text-xl"></i>
<div class="flex-1">
<h4 class="font-bold">Detected Puzzles ({{ Object.keys(responsesByPuzzle).length }})</h4>
<div class="text-sm space-y-1 mt-1">
<div v-for="(data, puzzleName) in responsesByPuzzle" :key="puzzleName" class="flex justify-between">
<span>{{ puzzleName }}</span>
<span class="badge badge-ghost badge-sm ml-2">{{ data.files.length }} file(s)</span>
</div>
</div>
</div>
</div>
<!-- File Upload -->
<FileUpload v-model="submissionFiles" :puzzles="puzzles" />
<!-- Manual Selection Warning -->
<div v-if="filesNeedingManualSelection.length > 0" class="alert alert-warning">
<i class="mdi mdi-alert-circle text-xl"></i>
<div class="flex-1">
<div class="font-bold">Manual Puzzle Selection Required</div>
<div class="text-sm">
{{ filesNeedingManualSelection.length }} file(s) have low OCR confidence for puzzle names.
Please select the correct puzzle for each file before submitting.
</div>
</div>
</div>
<form @submit.prevent="handleSubmit" class="space-y-6">
<!-- Detected Puzzles Summary -->
<div
v-if="Object.keys(responsesByPuzzle).length > 0"
class="alert alert-info"
>
<i class="mdi mdi-information-outline text-xl"></i>
<div class="flex-1">
<h4 class="font-bold">
Detected Puzzles ({{ Object.keys(responsesByPuzzle).length }})
</h4>
<div class="text-sm space-y-1 mt-1">
<div
v-for="(data, puzzleName) in responsesByPuzzle"
:key="puzzleName"
class="flex justify-between"
>
<span>{{ puzzleName }}</span>
<span class="badge badge-ghost badge-sm ml-2"
>{{ data.files.length }} file(s)</span
>
</div>
</div>
</div>
</div>
<!-- File Upload -->
<FileUpload v-model="submissionFiles" :puzzles="puzzles" />
<!-- Manual Selection Warning -->
<div
v-if="filesNeedingManualSelection.length > 0"
class="alert alert-warning"
>
<i class="mdi mdi-alert-circle text-xl"></i>
<div class="flex-1">
<div class="font-bold">Manual Puzzle Selection Required</div>
<div class="text-sm">
{{ filesNeedingManualSelection.length }} file(s) have low OCR
confidence for puzzle names. Please select the correct puzzle for
each file before submitting.
</div>
</div>
</div>
<!-- Notes -->
<div class="form-control">
<div class="flex-1">
@@ -43,7 +58,7 @@
<span class="label-text font-medium">Notes (Optional)</span>
<span class="label-text-alt">{{ notesLength }}/500</span>
</label>
<textarea
<textarea
v-model="notes"
class="flex textarea textarea-bordered h-24 w-full resize-none"
placeholder="Add any notes about your solution, approach, or interesting findings..."
@@ -51,37 +66,43 @@
></textarea>
</div>
</div>
<!-- Manual Validation Request -->
<div class="form-control">
<label class="label cursor-pointer justify-start gap-3">
<input
type="checkbox"
<input
type="checkbox"
v-model="manualValidationRequested"
class="checkbox checkbox-primary"
/>
<div class="flex-1">
<span class="label-text font-medium">Request manual validation</span>
<span class="label-text font-medium"
>Request manual validation</span
>
<div class="label-text-alt text-xs opacity-70 mt-1">
Check this if you want an admin to manually review your submission, even if OCR confidence is high.
<br>
<em>Note: This will be automatically checked if any OCR confidence is below 50%.</em>
Check this if you want an admin to manually review your
submission, even if OCR confidence is high.
<br />
<em
>Note: This will be automatically checked if any OCR
confidence is below 80%.</em
>
</div>
</div>
</label>
</div>
<!-- Submit Button -->
<div class="card-actions justify-end">
<button
type="submit"
class="btn btn-primary"
:disabled="!canSubmit"
>
<span v-if="isSubmitting" class="loading loading-spinner loading-sm"></span>
<button type="submit" class="btn btn-primary" :disabled="!canSubmit">
<span
v-if="isSubmitting"
class="loading loading-spinner loading-sm"
></span>
<span v-if="isSubmitting">Submitting...</span>
<span v-else-if="filesNeedingManualSelection.length > 0">
Select Puzzles ({{ filesNeedingManualSelection.length }} remaining)
Select Puzzles ({{ filesNeedingManualSelection.length }}
remaining)
</span>
<span v-else>Submit Solution</span>
</button>
@@ -92,104 +113,121 @@
</template>
<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import FileUpload from '@/components/FileUpload.vue'
import type { SteamCollectionItem, SubmissionFile } from '@/types'
import { ref, computed, watch } from "vue";
import FileUpload from "@/components/FileUpload.vue";
import type { SteamCollectionItem, SubmissionFile } from "@/types";
interface Props {
puzzles: SteamCollectionItem[]
findPuzzleByName: (name: string) => SteamCollectionItem | null
puzzles: SteamCollectionItem[];
findPuzzleByName: (name: string) => SteamCollectionItem | null;
}
interface Emits {
submit: [submissionData: { files: SubmissionFile[], notes?: string, manualValidationRequested?: boolean }]
submit: [
submissionData: {
files: SubmissionFile[];
notes?: string;
manualValidationRequested?: boolean;
},
];
}
const props = defineProps<Props>()
const emit = defineEmits<Emits>()
const props = defineProps<Props>();
const emit = defineEmits<Emits>();
const submissionFiles = ref<SubmissionFile[]>([])
const notes = ref('')
const manualValidationRequested = ref(false)
const isSubmitting = ref(false)
const submissionFiles = ref<SubmissionFile[]>([]);
const notes = ref("");
const manualValidationRequested = ref(false);
const isSubmitting = ref(false);
const notesLength = computed(() => notes.value.length)
const notesLength = computed(() => notes.value.length);
const canSubmit = computed(() => {
const hasFiles = submissionFiles.value.length > 0
const noManualSelectionNeeded = !submissionFiles.value.some(file => file.needsManualPuzzleSelection)
return hasFiles &&
!isSubmitting.value &&
noManualSelectionNeeded
})
const hasFiles = submissionFiles.value.length > 0;
const noManualSelectionNeeded = !submissionFiles.value.some(
(file) => file.needsManualPuzzleSelection,
);
return hasFiles && !isSubmitting.value && noManualSelectionNeeded;
});
// Group files by detected puzzle
const responsesByPuzzle = computed(() => {
const grouped: Record<string, { puzzle: SteamCollectionItem | null, files: SubmissionFile[] }> = {}
submissionFiles.value.forEach(file => {
const grouped: Record<
string,
{ puzzle: SteamCollectionItem | null; files: SubmissionFile[] }
> = {};
submissionFiles.value.forEach((file) => {
// Use manual puzzle selection if available, otherwise fall back to OCR
const puzzleName = file.manualPuzzleSelection || file.ocrData?.puzzle
const puzzleName = file.manualPuzzleSelection || file.ocrData?.puzzle;
if (puzzleName) {
if (!grouped[puzzleName]) {
grouped[puzzleName] = {
puzzle: props.findPuzzleByName(puzzleName),
files: []
}
files: [],
};
}
grouped[puzzleName].files.push(file)
grouped[puzzleName].files.push(file);
}
})
return grouped
})
});
return grouped;
});
// Count files that need manual puzzle selection
const filesNeedingManualSelection = computed(() => {
return submissionFiles.value.filter(file => file.needsManualPuzzleSelection)
})
return submissionFiles.value.filter(
(file) => file.needsManualPuzzleSelection,
);
});
// Check if any OCR confidence is below 50%
const hasLowConfidence = computed(() => {
return submissionFiles.value.some(file => {
if (!file.ocrData?.confidence) return false
return file.ocrData.confidence.cost < 0.5 ||
file.ocrData.confidence.cycles < 0.5 ||
file.ocrData.confidence.area < 0.5
})
})
return submissionFiles.value.some((file) => {
if (!file.ocrData?.confidence) return false;
return (
file.ocrData.confidence.cost < 0.5 ||
file.ocrData.confidence.cycles < 0.5 ||
file.ocrData.confidence.area < 0.5
);
});
});
// Auto-check manual validation when confidence is low
watch(hasLowConfidence, (newValue) => {
if (newValue && !manualValidationRequested.value) {
manualValidationRequested.value = true
}
}, { immediate: true })
watch(
hasLowConfidence,
(newValue) => {
console.log(hasLowConfidence.value, newValue);
if (newValue && !manualValidationRequested.value) {
manualValidationRequested.value = true;
}
},
{ immediate: true },
);
const handleSubmit = async () => {
if (!canSubmit.value) return
isSubmitting.value = true
if (!canSubmit.value) return;
isSubmitting.value = true;
try {
// Emit the files and notes for the parent to handle API submission
emit('submit', {
emit("submit", {
files: submissionFiles.value,
notes: notes.value.trim() || undefined,
manualValidationRequested: manualValidationRequested.value
})
manualValidationRequested: manualValidationRequested.value,
});
// Reset form
submissionFiles.value = []
notes.value = ''
manualValidationRequested.value = false
submissionFiles.value = [];
notes.value = "";
manualValidationRequested.value = false;
} catch (error) {
console.error('Submission error:', error)
console.error("Submission error:", error);
} finally {
isSubmitting.value = false
isSubmitting.value = false;
}
}
};
</script>