user gives model name and selects it from dropdown for images

components/FormSubmitImage.vue

@@ -25,7 +25,7 @@
     />
 
 		<!-- Model (name) selector -->
-		<Select v-model="model" :options="models ?? []" optionLabel="id" optionValue="id" placeholder="Select Model" class="min-w-60 max-w-full ml-4" />
+    <Select v-model="model" :options="models ?? []" optionLabel="name" optionValue="id" placeholder="Select Model" class="min-w-60 max-w-full ml-4" />
     <Button class="ml-4" label="Create Images" type="submit"></Button>
   </form>
 </template>

components/TrainForm.vue

@@ -39,6 +39,10 @@
         :showUploadButton="true"
         @select="onFileSelected"
       />
+
+      <div class="mt-4">
+        <InputText v-model="modelName" placeholder="Enter Model Name" />
+      </div>
     <Button label="Train" @click="submit" />
   </form>
 </template>
@@ -93,6 +97,8 @@ const onFileSelected = (event: FileUploadSelectEvent) => {
 	files.value = [...event.files];
 };
 
+const modelName = ref<string>('');
+
 const submit = async () => {
 	const zipped = await useZippedFiles(files.value);
 
@@ -101,6 +107,7 @@ const submit = async () => {
 		gender: selectedGender.value as Gender,
 		eyeColor: selectedEyeColor.value as EyeColor,
 		trainingType: selectedTrainingType.value as Training,
+    name: modelName.value || `Model_${new Date().toISOString().split('T')[0]}`,    // User input or Model_YYYY-MM-DD
 	};
 
 	emits("submit", values);

drizzle/0002_shallow_spot.sql

@@ -0,0 +1 @@
+ALTER TABLE "trainings" ADD COLUMN "name" text NOT NULL;