Skip to content

Commit

Permalink
improve workflow
Browse files Browse the repository at this point in the history
  • Loading branch information
@mam10eks
mam10eks committed Feb 13, 2024
1 parent e71057d commit 54b29d0
Show file tree
Hide file tree
Showing 7 changed files with 110 additions and 56 deletions.
Binary file added pupil-submission-page/src/assets/prediction-with-ki.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified pupil-submission-page/src/assets/result-fail.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified pupil-submission-page/src/assets/result-win.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 13 additions & 0 deletions pupil-submission-page/src/components/RenderedPrediction.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<template>
<v-row justify="center" align="center">
<v-col cols="4"><v-img :src="input_image.src" style="width: 100%;"/></v-col>
<v-col cols="4"><v-img src="@/assets/prediction-with-ki.png" style="width: 100%"/></v-col>
<v-col cols="4">{{prediction}}</v-col>
</v-row>
</template>

<script lang="ts">
export default {
props: ['input_image', 'prediction']
}
</script>
2 changes: 1 addition & 1 deletion pupil-submission-page/src/components/Stepper_2.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
</p>
<upload-images-for-class class_name='Vorfahrtsstra&szlig;e' :available_images='klasse_vorfahrt_strasse'/>
<br>
<upload-images-for-class class_name='Vorfahrt Gew&auml;ren' :available_images='klasse_vorfahrt_gewaehren'/>
<upload-images-for-class class_name='Vorfahrt Gew&auml;hren' :available_images='klasse_vorfahrt_gewaehren'/>
</template>

<script lang="ts">
Expand Down
149 changes: 95 additions & 54 deletions pupil-submission-page/src/components/Stepper_4.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<v-card class="mx-auto" max-width="500" min-height="500" image="@/assets/result-fail.png" title="Deine KI war in" theme="dark">
<v-card class="mx-auto" max-width="500" min-height="500" @click="show=true;" image="@/assets/result-fail.png" title="Deine KI war in" theme="dark">
<v-card-text class="py-0">
<v-row align="center" no-gutters>
<v-col class="text-h2" style="color: red;" cols="8">75 von 100</v-col>
Expand All @@ -13,65 +13,75 @@
<br><br>

<v-expansion-panels>
<v-expansion-panel title="Mengen-Tests">
<v-expansion-panel title="Quantitative Tests">
<v-expansion-panel-text>
<v-card title="Teste deine KI anhand tausender Beispiele, um die Genauigkeit zu messen" flat>
<v-container class="ml-4 mr-4">
<v-img src="@/assets/teachable_machine_screenshot_3.png" aspect-ratio="5">
<template v-slot:placeholder>
<v-row class="fill-height ma-0" align="center" justify="center">
<v-progress-circular indeterminate color="white"></v-progress-circular>
Hier etwas text (eine ganz einfache Darstellung eine Konfusion Matrix, mit guten Bildern, etc.)...

<v-row>
<v-col cols="6">
<v-card class="mx-auto" @click="show=true;" style="width: 100%" image="@/assets/result-win.png" title="Deine KI hat " theme="dark">
<v-card-text class="py-0">
<v-row align="center" no-gutters>
<v-col class="text-h2" style="color: red;" cols="8">91</v-col>
</v-row>
<br>
"Vorfahrt gew&auml;hren" Schilder korrekt erkannt.
</v-card-text>
</v-card>
</v-col>

<v-col cols="6">
<v-card class="mx-auto" @click="show=true;" style="width: 100%" image="@/assets/result-win.png" title="Deine KI hat " theme="dark">
<v-card-text class="py-0">
<v-row align="center" no-gutters>
<v-col class="text-h2" style="color: red;" cols="8">23</v-col>
</v-row>
</template>
</v-img>
<p> <br> </p>
<ul>
<li class="text-left">Um deine KI so oft testen zu lassen, kannst du sie hier
hochladen.</li>
<li class="text-left">Stelle sicher, dass du dein Model im richtigen Format
exportierst.</li>
<li class="text-left">Dafür musst du auf „Modell exportieren“ klicken und dann auf
„Tensorflow“.</li>
<li class="text-left"> Die Zipdatei lädst du herunter und im nächsten Schritt dann
hier hoch.</li>
</ul>
<br>
"Vorfahrt gew&auml;hren" Schilder f&auml;lschlich als Vorfahrtsstra&szlig;e erkannt.
</v-card-text>
</v-card>
</v-col>
</v-row>

<File />
<v-row>
<v-col cols="6">
<v-card class="mx-auto" @click="show=true;" style="width: 100%" image="@/assets/result-win.png" title="Deine KI hat " theme="dark">
<v-card-text class="py-0">
<v-row align="center" no-gutters>
<v-col class="text-h2" style="color: red;" cols="8">32</v-col>
</v-row>
<br>
"Vorfahrt gew&auml;hren" Schilder f&auml;lschlich als Vorfahrtsstra&szlig;e erkannt.
</v-card-text>
</v-card>
</v-col>

<v-col cols="6">
<v-card class="mx-auto" @click="show=true;" style="width: 100%" image="@/assets/result-win.png" title="Deine KI hat " theme="dark">
<v-card-text class="py-0">
<v-row align="center" no-gutters>
<v-col class="text-h2" style="color: red;" cols="8">87</v-col>
</v-row>
<br>
"Vorfahrt gew&auml;hren" Schilder korrekt erkannt.
</v-card-text>
</v-card>
</v-col>
</v-row>

</v-container>
</v-card>
Vergleiche deine KI doch mal mit anderen:
<v-data-table :items="items"/>
</v-expansion-panel-text>
</v-expansion-panel>

<v-expansion-panel title="Qualititative-Tests">
<v-expansion-panel title="Qualititative Tests">
<v-expansion-panel-text>
<v-container fluid class="ml-4 mr-4">
<v-row align="center" justify="center">
<v-col cols="12" md="6">
<ul>
<li class="text-left">Zum Schluss müssen die EntwicklerInnen das Modell
natürlich noch überprüfen. Hat es funktioniert? – Kann die KI die Klassen
jetzt zuverlässig unterscheiden?</li>
<li class="text-left">Dafür kannst du weitere Bilder hochladen, welche das
Modell jetzt auf die Probe stellen – hält das Auto an und gewährt Vorfahrt,
oder kommt es zu einem Unfall, weil sich die KI nicht 100% sicher war?</li>
<li class="text-left">Gehe dafür auf Datei und lade weitere Bilder, welche zu
Testzwecken dienen, hoch.</li>
<li class="text-left">Spiele ein wenig mit den Einstellungen unter „erweitert“
herum – was fällt auf? Kann das Modell verbessert werden?</li>
</ul>
</v-col>
<v-col cols="12" md="6">
<v-img src="@/assets/teachable_machine_screenshot_2.png" aspect-ratio="1.3">
<template v-slot:placeholder>
<v-row class="fill-height ma-0" align="center" justify="center">
<v-progress-circular indeterminate color="white"></v-progress-circular>
</v-row>
</template>
</v-img>
</v-col>
</v-row>
</v-container>
Bitte lade hier deine Testbilder hoch, mit denen du deine KI Qualitativ austesten moechtest.
<upload-images-for-class class_name='Testbilder' :available_images='test_bilder'/>

<div v-for="test_bild in test_bilder">
<rendered-prediction :input_image="test_bild" prediction="Vorfahrtsstra&szlig;e erkannt (64%)"/>
</div>
</v-expansion-panel-text>
</v-expansion-panel>

Expand All @@ -84,8 +94,39 @@
</v-expansion-panel>

</v-expansion-panels>

<v-dialog v-model="show" width="90%" height="90%">
<v-card>
<div v-for="f in selected_images">
<rendered-prediction :input_image="f" prediction="Vorfahrtsstra&szlig;e erkannt (64%)"/>
</div>
</v-card>
</v-dialog>
</template>

<script lang="ts" setup>
import File from "./UploadFile.vue"
<script lang="ts">
import UploadImagesForClass from '@/components/UploadImagesForClass.vue'
import RenderedPrediction from '@/components/RenderedPrediction.vue'
import someImage from '@/assets/result-fail.png'
export default {
components: {UploadImagesForClass, RenderedPrediction},
data: () => ({
items: [
{'Name': "Geheime KI", 'Korrekt': '78 von 100'},
{'Name': "Dagobert Duck", 'Korrekt': '76 von 100'},
{'Name': "Deine KI", 'Korrekt': '75 von 100'},
{'Name': "Maik's KI", 'Korrekt': '56 von 100'},
{'Name': "Luisa's KI", 'Korrekt': '34 von 100'}
],
show: false,
test_bilder: [],
selected_images: [
{'src': someImage},
{'src': someImage},
{'src': someImage},
{'src': someImage},
]
})
}
</script>
2 changes: 1 addition & 1 deletion pupil-submission-page/src/components/UploadImagesForClass.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<template v-slot:text>

<v-row><v-col cols="6">
<v-file-input accept="image/png, image/jpeg, image/bmp" placeholder="Bitte f&uuml;ge deine Bildbeispiele f&uuml;r die Klasse {{class_name}} hinzu:" multiple label="Bitte f&uuml;ge deine Bildbeispiele f&uuml;r die Klasse {{class_name}} hinzu:" v-model="to_upload" @change="update_files" block/>
<v-file-input accept="image/png, image/jpeg, image/bmp" placeholder="Bitte f&uuml;ge deine Bildbeispiele f&uuml;r die Klasse {{class_name}} hinzu:" multiple :label="'Bitte f&uuml;ge deine Bildbeispiele f&uuml;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 }">
Expand Down

0 comments on commit 54b29d0

Please sign in to comment.