Image-Classification-vs2/index.html at main · LaraCL/Image-Classification-vs2 · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Drag and Drop Image Classification</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
  <script src="https://unpkg.com/ml5@0.12.2/dist/ml5.min.js"></script>
  <script src="util.js"></script>
  <script src="sketch.js"></script>
  <style>
    /* Stildefinitionen für die Drag-and-Drop-Zone */
    #drop_zone {
      width: 400px;
      height: 200px;
      border: 2px dashed #aaa;
      padding: 20px;
      text-align: center;
      margin-top: 20px;
      font-family: Arial, sans-serif;
      font-size: 16px;
      color: #aaa;
    }
    /* Stildefinitionen für die Thumbnail-Anzeige */
    #thumbnail {
      margin-top: 20px;
      text-align: center;
    }
    /* Stildefinitionen für die Ergebnisanzeige */
    #result {
      margin-top: 20px;
    }
    /* Stildefinitionen für die Buttons */
    button {
      margin-top: 10px;
    }
    /* Stildefinitionen für die Tabellen */
    table {
      border-collapse: collapse;
      width: 100%;
      margin-top: 20px;
    }
    table, th, td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: left;
    }
    th {
      background-color: #f2f2f2;
    }
  </style>
</head>
<body>
  <h1>Drag and Drop Image Classification</h1>

  <!-- Tabellen für die letzten Klassifizierungen -->
  <h2>Zuletzt korrekt klassifizierte Fälle</h2>
  <table id="correctTable">
    <thead>
      <tr>
        <th>Thumbnail</th>
        <th>Klassifizierung</th>
        <th>Confidence</th>
      </tr>
    </thead>
    <tbody id="correctBody"></tbody>
  </table>
  <h2>Zuletzt falsch klassifizierte Fälle</h2>
  <table id="incorrectTable">
    <thead>
      <tr>
        <th>Thumbnail</th>
        <th>Klassifizierung</th>
        <th>Confidence</th>
      </tr>
    </thead>
    <tbody id="incorrectBody"></tbody>
  </table>

  <!-- Drag-and-Drop-Zone -->
  <div id="drop_zone" ondragover="event.preventDefault()" ondrop="gotFile(event)">
    <p>Drag and Drop</p>
  </div>

  <!-- Thumbnail-Anzeige -->
  <div id="thumbnail"></div>

  <!-- Ergebnisanzeige -->
  <div id="result"></div>

  <!-- Buttons für die Klassifizierung -->
  <button id="classifyButton">Klassifizieren</button>
  <button id="correctButton" style="display: none;">Richtig klassifiziert</button>
  <button id="incorrectButton" style="display: none;">Falsch klassifiziert</button>

<h1>Projektdiskussion und Technische Details</h1>
    <h2>1) Diskussion der Ergebnisse</h2>
    <p>Bei der Anwendung von ml5.js zur Bildklassifikation auf mehreren selbst erstellten Webseiten wurden eigene Tierfotos getestet. Es wurde festgestellt, dass die Klassifikationsgenauigkeit je nach Bildkomplexität variierte. Fotos von Katzen wurden mit einer höheren Wahrscheinlichkeit korrekt klassifiziert, während komplexere Fotos mit vielen Details oder schlechter Beleuchtung häufiger falsch zugeordnet wurden. Diese Ergebnisse deuten darauf hin, dass die Leistung des Modells von der Bildqualität und den auf dem Bild präsentierten Merkmalen abhängt. Es wurde beobachtet, dass die Präzision des Modells sinkt, wenn die Fotos von den in den Trainingsdaten enthaltenen Bildern abweichen, was die Wichtigkeit einer vielfältigen und repräsentativen Trainingsdatenbasis unterstreicht. Es ist wichtig zu betonen, dass keine einzelne Seite den gesamten Umfang der Optimierungsversuche darstellt, da die Anwendung mehrfach optimiert und auf neuen Seiten getestet wurde.</p>
    <h2>2) Technische Beschreibung</h2>
    <p>Für die Implementierung der Bildklassifikationsseite wurde das Framework ml5.js verwendet, das auf TensorFlow.js basiert und das maschinelle Lernen im Browser ermöglicht. Zusätzlich wurde p5.js für das Benutzerinterface und die Drag-and-Drop-Funktionalität eingesetzt. Diese Frameworks wurden gewählt, da sie eine einfache und effektive Integration von maschinellem Lernen in Webanwendungen ohne tiefgreifende technische Vorkenntnisse ermöglichen. Die technische Herausforderung bestand darin, ein vortrainiertes Modell zu nutzen, das möglicherweise nicht optimal auf alle Arten von Tierfotos abgestimmt ist, insbesondere wenn diese von den typischen Trainingsdaten abweichen. Die Anwendung wurde fortlaufend optimiert und auf neuen Seiten getestet, um die Effektivität der Klassifikation zu verbessern.</p>
    <h2>3) Fachliche Erläuterung der Implementierung</h2>
    <p>Es wurde eine Webseite entwickelt, auf der Nutzer Bilder ihrer Tiere per Drag-and-Drop hochladen können, die anschließend mithilfe eines vortrainierten MobileNet-Modells von ml5.js klassifiziert werden. Die Ergebnisse der Klassifikation werden sofort angezeigt und Nutzer können ihre Richtigkeit bestätigen. Diese Interaktion ermöglicht es, direktes Benutzerfeedback zu sammeln, welches für die Weiterbildung und Feinabstimmung des Modells genutzt werden könnte. Die größte fachliche Herausforderung liegt darin, die Generalisierungsfähigkeit des Modells zu verbessern, damit es auch auf weniger typische oder qualitativ variierende Bilder präzise reagieren kann. Um diese Herausforderung zu meistern, wurde die Anwendung mehrfach optimiert und auf unterschiedlichen Seiten getestet, was zu einer fortlaufenden Verbesserung der Klassifikationsgenauigkeit führte.</p>

</body>
</html>