-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
5 changed files
with
142 additions
and
108 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,83 +1,20 @@ | ||
| <template> | ||
| <p> | ||
| Zum Training deiner KI benötigst du einen vorbereiteten Datensatz. Der Beispielbilder der korrekten Klasse, also entweder "Vorfahrtsstraße" oder "Vorfahrt gewähren" zuordnet. Speichere am besten alle bilder, in zwei Ordnern entsprechend Ihrer Klasse und lade sie im folgenden hoch. | ||
| Zum Training deiner KI benötigst du einen vorbereiteten Datensatz, der Beispielbilder ihrer korrekten Klasse, also entweder "Vorfahrtsstraße" oder "Vorfahrt gewähren" zuordnet. Speichere am besten alle bilder in zwei Ordnern entsprechend Ihrer Klasse und lade sie im folgenden hoch. | ||
| </p> | ||
|
|
||
| <v-card color="blue" variant="tonal"> | ||
| <template v-slot:title> | ||
| Klasse: Vorfahrtsstraße | ||
| </template> | ||
| <template v-slot:text> | ||
|
|
||
| <v-row><v-col cols="6"> | ||
| <v-file-input accept="image/png, image/jpeg, image/bmp" placeholder="Bitte füge deine Bildbeispiele für die Klasse Vorfahrtsstraße hinzu:" multiple label="Bitte füge deine Bildbeispiele für die Klasse Vorfahrtsstraße hinzu:" v-model="klasse_vorfahrt_strasse" block/> | ||
| </v-col></v-row> | ||
| <v-virtual-scroll height="150" :items="image_rows"> | ||
| <template v-slot:default="{ item }"> | ||
| <v-row style="width: 98%"> | ||
| <v-col :cols="cols" v-for="image in item"> | ||
| <v-hover v-slot="{ isHovering, props }"> | ||
| <v-img :src="image.src" v-bind="props"> | ||
| <v-btn v-if="isHovering" variant="text" icon="mdi-delete">Delete</v-btn> | ||
|
|
||
| </v-img> | ||
| </v-hover> | ||
| </v-col> | ||
| </v-row> | ||
| </template> | ||
|
|
||
|
|
||
| </v-virtual-scroll> | ||
| </template> | ||
|
|
||
| <v-card-actions> | ||
| <v-btn @click="klasse_vorfahrt_strasse=null">Auswahl Löschen</v-btn> | ||
| </v-card-actions> | ||
| </v-card> | ||
|
|
||
|
|
||
| <v-card flat> | ||
| <v-container class="ml-4 mr-4"> | ||
| <ul> | ||
| <li class="text-left">Bevor du beginnen kannst, musst du einen entsprechend gelabelten Datensatz | ||
| vorbereitet haben.</li> | ||
| <li class="text-left">Alle Bilder deines Teams sollten in zwei Ordnern auf deinem Computer | ||
| abgespeichert sein.</li> | ||
| <li class="text-left">Öffne die Webseite <a href="https://teachablemachine.withgoogle.com" | ||
| target="_blank">https://teachablemachine.withgoogle.com</a></li> | ||
| <li class="text-left">Klicke auf „Erste Schritte“</li> | ||
| <li class="text-left">Wenn du dein Projekt gerade beginnst, dann klicke auf Bildprojekt, um ein | ||
| neues Projekt zu erstellen. Ansonsten öffne ein bestehendes Projekt aus einer Datei. (Wir | ||
| erstellen ein Modell mit Standardbildern.)</li> | ||
| <li class="text-left">Erlaube der Webseite nicht auf deine Webcam zuzugreifen und lade nur | ||
| Bilder hoch, welche du selbst erstellt hast oder welche eine entsprechende Lizenz haben. | ||
| (Datenschutz)</li> | ||
| </ul> | ||
| </v-container> | ||
| </v-card> | ||
| <upload-images-for-class class_name='Vorfahrtsstraße' :available_images='klasse_vorfahrt_strasse'/> | ||
| <br> | ||
| <upload-images-for-class class_name='Vorfahrt Gewären' :available_images='klasse_vorfahrt_gewaehren'/> | ||
| </template> | ||
|
|
||
|
|
||
| <script lang="ts"> | ||
| import UploadImagesForClass from '@/components/UploadImagesForClass.vue' | ||
| export default { | ||
| props: ['klasse_vorfahrt_strasse', 'klasse_vorfahrt_gewaehren'], | ||
| data: () => ({ | ||
| klasse_vorfahrt_strasse: null, | ||
| cols: 2 | ||
| }), | ||
| computed: { | ||
| image_rows() { | ||
| if (!this.klasse_vorfahrt_strasse) { | ||
| return [] | ||
| } | ||
| let ret = [] | ||
| for (let file of this.klasse_vorfahrt_strasse) { | ||
| ret.push({'src': URL.createObjectURL(file), 'id': 'tmp'}) | ||
| } | ||
| return [ret]; | ||
| }, | ||
| } | ||
| components: {UploadImagesForClass}, | ||
| } | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
77 changes: 77 additions & 0 deletions
77
pupil-submission-page/src/components/UploadImagesForClass.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| <template> | ||
| <v-card color="blue" variant="tonal"> | ||
| <template v-slot:title> | ||
| Klasse: {{class_name}} | ||
| </template> | ||
| <template v-slot:text> | ||
|
|
||
| <v-row><v-col cols="6"> | ||
| <v-file-input accept="image/png, image/jpeg, image/bmp" placeholder="Bitte füge deine Bildbeispiele für die Klasse {{class_name}} hinzu:" multiple label="Bitte füge deine Bildbeispiele für die Klasse {{class_name}} hinzu:" v-model="to_upload" @change="update_files" block/> | ||
| </v-col></v-row> | ||
| <v-virtual-scroll height="150" :items="image_rows"> | ||
| <template v-slot:default="{ item }"> | ||
| <v-row style="width: 98%"> | ||
| <v-col :cols="cols" v-for="image in item"> | ||
| <v-hover v-slot="{ isHovering, props }"> | ||
| <v-img :src="image.src" v-bind="props"> | ||
| <v-btn v-if="isHovering" variant="text" icon="mdi-delete">Delete</v-btn> | ||
|
|
||
| </v-img> | ||
| </v-hover> | ||
| </v-col> | ||
| </v-row> | ||
| </template> | ||
|
|
||
|
|
||
| </v-virtual-scroll> | ||
| </template> | ||
|
|
||
| <v-card-actions> | ||
| <v-btn @click="available_images=null">Auswahl Löschen</v-btn> | ||
| </v-card-actions> | ||
| </v-card> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| export default { | ||
| props: ['class_name', 'available_images'], | ||
| data: () => ({ | ||
| to_upload: null, | ||
| cols: 2 | ||
| }), | ||
| computed: { | ||
| image_rows() { | ||
| if (!this.available_images) { | ||
| return [] | ||
| } | ||
| let ret = [] | ||
| let current_batch = [] | ||
| for (let file of this.available_images) { | ||
| if (current_batch.length < 11) { | ||
| current_batch.push(file) | ||
| } else { | ||
| ret.push(current_batch) | ||
| current_batch = [file] | ||
| } | ||
| } | ||
| if (current_batch.length > 0) { | ||
| ret.push(current_batch) | ||
| } | ||
| return ret; | ||
| }, | ||
| }, | ||
| methods: { | ||
| update_files(files) { | ||
| for (let file of this.to_upload) { | ||
| this.available_images.push({'src': URL.createObjectURL(file), 'file': file}) | ||
| } | ||
| this.to_upload = null | ||
| } | ||
| } | ||
| } | ||
| </script> |