-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
116 lines (106 loc) · 5.8 KB
/
index.html
File metadata and controls
116 lines (106 loc) · 5.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Deep Learning EA 1 - Bildklassifikation mit ml5.js</title>
<link rel="stylesheet" href="styles/style.css" />
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ml5@latest/dist/ml5.min.js"></script>
<script src="scripts/main.js"></script>
</head>
<body>
<main>
<h1>Deep Learning Einsendeaufgabe 1 - Bildklassifikation mit ml5
<p id="status"></p>
</h1> <h3>Name: Andre Zahn <br/> Hochschule: Ostfalia <br/> Matrikelnummer: 70487656 </h3>
<section id="examples">
<br/>
<h2>Aufgabe 1:</h2>
<h3>Richtig klassifizierte Beispiele:</h3>
<div id="correct-examples" class="example-group">
<div class="example-pair">
<img id="img-0" src="images/correct1.jpg" class="classify-image" />
<canvas id="chart-0"></canvas>
</div>
<div class="example-pair">
<img id="img-1" src="images/correct2.png" class="classify-image" />
<canvas id="chart-1"></canvas>
</div>
<div class="example-pair">
<img id="img-2" src="images/correct3.jpeg" class="classify-image" />
<canvas id="chart-2"></canvas>
</div>
</div>
<h3>Falsch klassifizierte Beispiele:</h3>
<div id="wrong-examples" class="example-group">
<div class="example-pair">
<img id="img-3" src="images/wrong1.jpeg" class="classify-image" />
<canvas id="chart-3"></canvas>
</div>
<div class="example-pair">
<img id="img-4" src="images/wrong2.jpeg" class="classify-image" />
<canvas id="chart-4"></canvas>
</div>
<div class="example-pair">
<img id="img-5" src="images/wrong3.jpeg" class="classify-image" />
<canvas id="chart-5"></canvas>
</div>
</div>
<h2>Aufgabe 2:</h2>
<h3>Eigenes Bild hochladen</h3>
</section>
<section id="upload-section">
<div id="drop-zone">
<p>📷 Ziehe ein Bild hierher oder klicke zum Hochladen</p>
<input type="file" id="fileElem" accept="image/*" />
</div>
<p id="upload-error" style="color: red; margin-top: 1rem;"></p>
<div id="preview-area" class="preview-flex"></div>
</section>
<section id="discussion">
<h2>Diskussion:</h2>
<p class="blocksatz">Die Bildklassifikation mit ml5 lieferte solide Ergebnisse und eine relativ hohe Treffsicherheit, insbesondere bei klar erkennbaren und stark isolierten Objekten und Abbildungen von Tieren, was auf eine gute Repräsentation im Trainingsdatensatz schließen lässt. Je mehr Details, Überlagerungen oder uneindeutige Strukturen ein Bild enthält, also je unruhiger und komplexer es ist, desto schwerer fällt es dem Modell, richtig zu klassifizieren. Sind die zu klassifizierenden
Objekte nicht stark isoliert zu sehen beziehungsweise befinden sich in einem fließenden Übergang mit dem Hintergrund, fällt eine Vorhersage schwerer. Hier wird beispielsweise ein Pferd als Antilope klassifiziert, vermutlich aufgrund ähnlicher Umrissformen und semantischer Verwandtschaft. Interessant war außerdem, dass markante Gegenstände mit charakteristischer Form, wie die E-Gitarre, zuverlässig erkannt wurden, während alltagsnahe und eher trivial geformte Objekte wie Zigaretten häufiger
falsch klassifiziert wurden. Dass Komplexität und Unschärfe die Klassifizierung erschwert, zeigt die Kletterwand mit vielen kleinen und unscharfen Elementen am drastischsten. Ich vermute, dass ml5 versucht, die groben Konturen dieses noch scheinbar eher unbekannten optischen Gebildes einem Label zuzuweisen. Denkbar ist, dass das blauweiße Muster der Wand und dessen Ecken als Kleidungsstück gedeutet werden, während die Klettergriffe als einzelne sehr chaotisch verteilte Punkte wie Flecken auf
einer Schürze, oder ein sehr ausgefallenes Muster auf einem Schlafanzug wirken. Der Einsatz von Bildern außerhalb des Trainingsdatensatzes war im Hinblick auf Grenzen und Generalisierungsfähigkeit des Modells besonders spannend und verdeutlicht, wie sehr ml5 auf klare visuelle Strukturen angewiesen ist. Typische Fehlerursachen scheinen unscharfe Kanten, visuelle Ablenkung durch Hintergrundelemente und ungewohnte Perspektiven zu sein.
</p>
</section>
<section id="documentation">
<h2>Dokumentation:</h2>
<h3>Technisch:</h3>
<p>Die wichtigsten Dateien in diesem ml5.js-Projekt sind:
<ul>
<li><b>main.js</b> mit der Java-Script Logik der Seite</li>
<li><b>style.css</b> für das Styling in CSS</li>
<li><b>index.html</b> für die Struktur der Weboberfläche</li>
</ul>
Folgende externe Frameworks wurden eingebunden:
<ul>
<li><b>ml5:</b> Bildklassifikation, MobileNet-Modell, ImageNet-Datensatz</li>
<li><b>Chart.js</b> Visualisierung der Klassifikationsergebnisse</li>
</ul>
</p>
<h3>Fachlich:</h3>
<p>Entwicklungsschritte:
<ul>
<li>Ausprobieren und "Herumspielen" mit ml5</li>
<li>Entwicklung der Grundstruktur (Ordner und Dateien)</li>
<li>Hosting auf GitHub-Pages</li>
<li>Auswahl geeigneter Bilder</li>
<li>Umsetzung und Styling entsprechend der Anforderungen</li>
<li>weiteres Styling und Optimierung</li>
</ul>
Hilfsmittel und Quellen:
<ul>
<li>https://archive-docs.ml5js.org/#/reference/image-classifier</li>
<li>https://docs.ml5js.org/#/</li>
<li>https://www.youtube.com/watch?v=pbjR20eTLVs</li>
<li>https://stackoverflow.com</li>
<li>https://chatgpt.com</li>
</ul>
</p>
</section>
</main>
</body>
</html>