<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>Bild Klassifizierung mit MobileNet und p5.js<title>
<style>
/* Article Tag */
article {
border: 0px solid black;
display : grid;
grid-template-volumns: 1fr;
}
/* Section Tag */
section {
border: 0px solid red;
}
/* Ausgabe der Namen
und Warscheinlichkeiten
Output of the names
and probabilities */
span {
font-size: 24px;
font-weight: bold;
font-decoration: underline;
border: 1px solid #eadebd;
}
/* Body Tag */
body {
background-color: #293133;
color: #eadebd;
}
<style>
<head>
<body>
<article>
<section>
<table>
<tr>
<td style="border: 1px solid black; text-align: center;" colspan="2">
<span>Bild Klassifizierung mit MobileNet und p5.js<span>
<td>
<tr>
<tr>
<td style="border: 1px solid black; text-align: center;" colspan="2">
<div id="headline" style="border: 1px solid #eadebd; width: 845px; text-align: left">
Das Programm analysiert per Künstlicher Intelligenz, mittels
Tensflor <a style="color: white" href="https://www.tensorflow.org/js" target="_blanc">https://www.tensorflow.org/js<a>, Bilder
und versucht sie zu erkennen. <br>
Copyrights und Freie Bilder von <a style="color: white" href="https://pngtree.com/" target="_blanc">https://pngtree.com/free-animals-png<a>
<div>
<td>
<tr>
<tr>
<td>
<div id="images" style="border: 1px solid #eadebd; width: 420px; height: 420px">
<table>
<tr>
<td>
<img id="img1" src="./images/bird.png" width="80" title="Bird, Vogel">
<td>
<canvas id="img" style="border: 1px solid #eadebd; width: 420px; height: 420px">
<tr>
<td>
<div id="describe" style="border: 1px solid #eadebd; width: 420px; font-size: 12px">
Dieses Beispiel zeigt die Verwendung der Bilderkennung in der KI. Man kann aus einem
vorhandenen Bild auswählen oder ein eigenes Bild Hochladen. Die Bilder sollten
in Breite und Höhe 420 x 420 Pixeln betragen, werden aber auf die Größe skaliert.
<td>
<div id = "output" style="border: 1px solid #eadebd; width: 420px; font-size: 12px">
<td style="border: 1px solid #eadebd; text-align: center;" colspan="2">
Ein Bild zum Upload Auswählen:
<input id="fileupload" name="fileupload" type="file" value="Bild Wählen" accept="image/*">
<script>
// Initialisieren Sie die Image Classifier-Methode mit MobileNet. Es muss ein Rückruf übergeben werden.
// Initialize the Image Classifier method with MobileNet. A callback needs to be passed.
var classifier;
// Eine Variable für das Bild, das wir klassifizieren wollen
// A variable to hold the image we want to classify
var img;
// Variable, die den Pfad mit Namen zu dem Bild enthält
// Variable containing the path with name to the image
var loadDependImages = "images/bird.png";
// Objekte für die kleinen Bilder der zu erkennenden Objekte
// Objects for the small pictures of the objects to be recognized
var objOutput = document.getElementById("output");
var objImg = document.getElementById("img");
var objBird = document.getElementById("img1");
var objButterfly = document.getElementById("img2");
var objBee = document.getElementById("img3");
var objFlamingo = document.getElementById("img4");
var objCat = document.getElementById("img5");
var objTiger = document.getElementById("img6");
var objAudi = document.getElementById("img7");
var objFrau = document.getElementById("img8");
var objGuitar = document.getElementById("img9");
var objHeli = document.getElementById("img10");
var objFrog = document.getElementById("img11");
var objMan = document.getElementById("img12");
var objEagle = document.getElementById("img13");
var objCoin = document.getElementById("img14");
var objHouse = document.getElementById("img15");
var objApple = document.getElementById("img16");
var objCat2 = document.getElementById("img17");
var objPills = document.getElementById("img18");
var objSpider = document.getElementById("img19");
var objHippo = document.getElementById("img20");
var objSnake = document.getElementById("img21");
var objSherdog = document.getElementById("img22");
var objTree = document.getElementById("img23");
var objRetriever = document.getElementById("img24");
var objBlackbird = document.getElementById("img25");
// Hier nicht benutzte Funktion
function dataURLtoFile(dataurl, filename) {
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[2]),
n = bstr.length,
u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, {type:mime});
} // End of dataURLtoFile(dataurl, filename)
/* *********************************************************************************
* Die Funktion empfängt eine Datei vom Internet Client Browser, die dort
* über ein Dateiauswahl Fenster ausgewählt wurde.
* Aus diesm Input HTML-Element zur Dateiauswahl.
*
* <input id="fileupload" name="fileupload" type="file" value="Bild Wählen" accept="image/*"></input>
*
* Nach dem Upload wird die Datei dann im Ausgabefenster angezeigt
*
* Übergabewert:
* evt = Objekt des Event Handlers zur ausgewählten Datei
*
* Returnwert:
* Keiner
*
* ---------------------------------------------------------------------------------------------------
* The function receives a file from the Internet Client Browser, which
* has been selected via a file selection window.
* From this input HTML element for file selection.
*
* <input id="fileupload" name="fileupload" type="file" value="Select image" accept="image/*"></input>
*
* After uploading the file is displayed in the output window
*
* Transfer value:
* event = object of the event handler to the selected file
*
* Return value:
* None
*************************************************************************************** */
function uploadFile(evt) {
// Objekt der Dateiliste erstellen ...
// Create object of the file list ...
var dateien = evt.target.files;
// ... und die erste Datei auswählen (wichtig, weil IMMER ein FileList Objekt generiert wird)
// ... and select the first file (important because a FileList object is ALWAYS generated)
var uploadedImage = dateien[0];
// ... dann ein neues Objekt als Filereader erstellen ...
// ... then create a new object as a filereader ...
var reader = new FileReader();
// ... und ein neues Objekt für die gesendeten Daten ...
// ... and a new object for the sent data ...
var senddata = new Object();
// ... und dem Objekt die Metadaten der gesendeten Datei übergeben ...
// ... and pass the metadata of the sent file to the object ...
senddata.name = uploadedImage.name;
senddata.date = uploadedImage.lastModified;
senddata.size = uploadedImage.size;
senddata.type = uploadedImage.type;
// ... und wenn der Dateiinhalt empfangen wurde...
// ... and when the file content has been received...
reader.onload = function(theFileData) {
// ... Ergebnis vom FileReader auslesen ...
// ... Read result from FileReader ...
senddata.fileData = theFileData.target.result;
// ... und der Variablen zur Anzeige auf der Seite zuweisen ...
// ... and assign the variable to display on the page ...
loadDependImages = senddata.fileData;
// Klassifizierung und Anzeigen des Bildes ...
// Classify and display the image ...
preload();
setup();
}// End of reader.onload
// Die Datei einlesen und in eine Data-URL konvertieren
// Read the file and convert it to a data URL
reader.readAsDataURL(uploadedImage);
}// End of uploadFile(evt)
// Objekt des Input Button für die Dateiauswahl auf dem Rechner erzeugen ...
// Create object of the input button for the file selection on the computer ...
var objFileUpload = document.getElementById("fileupload");
// ... und Ihm einen Event handler für das "Change" Event zuweisen. Wenn ein
// Dateiname gewählt wurde ...
// ... and assign it an event handler for the “Change” event. If a
// filename selected ...
objFileUpload.addEventListener("change", function(evt){
// ... und dann die Callbach Funktion, mit dem Argument des gewählten Dateiobjekts ...
// ... and then the Callbach function, with the argument of the selected file object ...
uploadFile(evt);
});
// Event Listener für das Vogel Bild 0,0 ...
// Event listener for the bird picture 0.0 ...
objBird.addEventListener("click", function(){
loadDependImages = "images/bird.png";
// Klassifizierung und Laden ...
// Classification and loading ...
preload();
setup();
});
// Event Listener für das Schmetterling Bild 0,1 ...
// Event listener for the Butterfly picture 0,1 ...
objButterfly.addEventListener("click", function(){
loadDependImages = "images/butterfly.png";
// Klassifizierung und Laden ...
// Classification and loading ...
preload();
setup();
});
// Event Listener für das Biene Bild 0,2 ...
// Event listener for the Bee picture 0,2 ...
objBee.addEventListener("click", function(){
loadDependImages = "images/bee.png";
// Klassifizierung und Laden ...
// Classification and loading ...
preload();
setup();
});
// Event Listener für das Flamingo Bild 0,3 ...
// Event listener for the Flamingo picture 0,3 ...
objFlamingo.addEventListener("click", function(){
loadDependImages = "images/flamingo.png";
// Klassifizierung und Laden ...
// Classification and loading ...
preload();
setup();
});
// Event Listener für das Katzen Bild 0,4 ...
// Event listener for the Cat picture 0,4 ...
objCat.addEventListener("click", function(){
loadDependImages = "images/cat.png";
// Klassifizierung und Laden ..
// Classification and loading ....
preload();
setup();
});
// Event Listener für das Tiger Bild 1,0 ...
// Event listener for the Tiger picture 1,0 ...
objTiger.addEventListener("click", function(){
loadDependImages = "images/tigerhead.png";
// Klassifizierung und Laden ...
// Classification and loading ...
preload();
setup();
});
// Event Listener für das Audi Bild 1,1 ...
// Event listener for the Audi picture 1,4 ...
objAudi.addEventListener("click", function(){
loadDependImages = "images/audi.png";
// Klassifizierung und Laden ...
// Classification and loading ...
preload();
setup();
});
// Event Listener für das Frauen Bild 1,2 ...
// Event listener for the Woman picture 1,2 ...
objFrau.addEventListener("click", function(){
loadDependImages = "images/frau.png";
// Klassifizierung und Laden ...
// Classification and loading ...
preload();
setup();
});
// Event Listener für das Gitarren Bild 1,3 ...
// Event listener for the Guitar picture 1,3 ...
objGuitar.addEventListener("click", function(){
loadDependImages = "images/guitar.png";
// Klassifizierung und Laden ...
// Classification and loading ...
preload();
setup();
});
// Event Listener für das Helicopter Bild 1,4 ...
// Event listener for the Heli picture 1,4 ...
objHeli.addEventListener("click", function(){
loadDependImages = "images/heli.png";
// Klassifizierung und Laden ...
// Classification and loading ...
preload();
setup();
});
// Event Listener für das Frosch Bild 2,0 ...
// Event listener for the Frog picture 2,0 ...
objFrog.addEventListener("click", function(){
loadDependImages = "images/frosch.png";
// Klassifizierung und Laden ...
// Classification and loading ...
preload();
setup();
});
// Event Listener für das Mann Bild 2,1 ...
// Event listener for the Man picture 2,1 ...
objMan.addEventListener("click", function(){
loadDependImages = "images/mann.png";
// Klassifizierung und Laden ...
// Classification and loading ...
preload();
setup();
});
// Event Listener für das Seeadler Bild 2,2 ...
// Event listener for the Sea Eagle picture 2,2 ...
objEagle.addEventListener("click", function(){
loadDependImages = "images/seeadler.png";
// Klassifizierung und Laden ...
// Classification and loading ...
preload();
setup();
});
// Event Listener für das Seeadler Bild 2,2 ...
// Event listener for the Retriever picture 4.4 ...
objHouse.addEventListener("click", function(){
loadDependImages = "images/haus.png";
// Klassifizierung und Laden ..
// Classification and loading ....
preload();
setup();
});
// Event Listener für das Euro Bild 2,4 ...
// Event listener for the Euro picture 2,4 ...
objCoin.addEventListener("click", function(){
loadDependImages = "images/coin.png";
// Klassifizierung und Laden ...
// Classification and loading ...
preload();
setup();
});
// Event Listener für das Apfel Bild 3,0 ...
// Event listener for the Apple picture 3,0 ...
objApple.addEventListener("click", function(){
loadDependImages = "images/apple.png";
// Klassifizierung und Laden ...
// Classification and loading ...
preload();
setup();
});
// Event Listener für das Katze 2 Bild 3,1 ...
// Event listener for the Cat picture 3,1 ...
objCat2.addEventListener("click", function(){
loadDependImages = "images/cat2.png";
// Klassifizierung und Laden ...
// Classification and loading ...
preload();
setup();
});
// Event Listener für das Tabletten Bild 3,2 ...
// Event listener for the Pill picture 3,2 ...
objPills.addEventListener("click", function(){
loadDependImages = "images/pills.png";
// Klassifizierung und Laden ...
// Classification and loading ...
preload();
setup();
});
// Event Listener für das Spinnen Bild 3,3 ...
// Event listener for the Spider picture 3,3 ...
objSpider.addEventListener("click", function(){
loadDependImages = "images/spider.png";
// Klassifizierung und Laden ...
// Classification and loading ...
preload();
setup();
});
// Event Listener für das Nilpferd Bild 3,4 ...
// Event listener for the Hippopotamus picture 3,4 ...
objHippo.addEventListener("click", function(){
loadDependImages = "images/nilpferd.png";
// Klassifizierung und Laden ...
// Classification and loading ...
preload();
setup();
});
// Event Listener für das Schlange Bild 4,0 ...
// Event listener for the Snake picture 4,0 ...
objSnake.addEventListener("click", function(){
loadDependImages = "images/schlange.png";
// Klassifizierung und Laden ...
// Classification and loading ...
preload();
setup();
});
// Event Listener für das Schäferhund Bild 4,1 ...
// Event listener for the german Sheppard picture 4,1 ...
objSherdog.addEventListener("click", function(){
loadDependImages = "images/schaeferhund.png";
// Klassifizierung und Laden ...
// Classification and loading ...
preload();
setup();
});
// Event Listener für das Baum Bild 4,2 ...
// Event listener for the Tree picture 4,2 ...
objTree.addEventListener("click", function(){
loadDependImages = "images/tree.png";
// Klassifizierung und Laden ...
// Classification and loading ...
preload();
setup();
});
// Event Listener für das Retriever Bild 4,3 ...
// Event listener for the Retriever picture 4,3 ...
objRetriever.addEventListener("click", function(){
loadDependImages = "images/retriever.png";
// Klassifizierung und Laden ...
// Classification and loading ...
preload();
setup();
});
// Event Listener für das Amsel Bild 4,4 ...
// Event listener for the blackbird picture 4,4 ...
objBlackbird.addEventListener("click", function(){
loadDependImages = "images/amsel4.png";
// Klassifizierung und Laden ...
// Classification and loading ...
preload();
setup();
});
// Laden des Bildes
// Load the picture
function preload() {
// Bild Erkennung initialisieren ...
// Initialize Image Detection ...
classifier = ml5.imageClassifier('MobileNet');
// ... und Bild laden.
// ... and load the picture.
img = loadImage(loadDependImages);
}
// Klassifizieren und Anzeigen des kleiner Bildes Rechts ...
// Classify and display the small image on the right ...
function setup() {
// Klassifizierung ...
// Classify ...
classifier.classify(img, gotResult);
// Anzeigen und Größe des Bildes einstellen ...
// Display and adjust the size of the image ...
objImg.style.backgroundImage = "url('" + loadDependImages + "')";
// Skalieren der Bildes auf die richtige Größe
objImg.style.backgroundSize = "420px 420px";
// Hintergrundbild nicht wiederholen ...
// Do not repeat background image ...
objImg.style.backgroundRepeat = "no-repeat";
}// End of setup()
// A function to run when we get any errors and the results
// Eine Funktion, die ausgeführt wird, wenn wir irgendwelche
// Fehler und die Ergebnisse erhalten.
function gotResult(error, results) {
// Anzeigefehler in der Konsole
// Display error in the console
if (error) {
console.log(error);
} else {
//// Aufruf der Funktion zur Anzeige der Ergebnisse
// Call the function to display the results
out(results);
}
}// End of gotResult(error, results)
// Ausgabe aller Text Ergebnisse ... wird aufgerufen von gotResult()
// und schreibt den Namen des erkannten Bildes nebst Warscheinlichkeit
// in die Ausgabe der Tabelle.
// Output of all text results ... is called by gotResult ()
// and write the name of the detected image together with probability
// into the output of the table.
function out(results){
var s = "";
// Iteriere durch das Ergebnis Array in jQuery manier ...
// Iterate by the result array in jQuery manner ...
$.each( results, function( key, value ) {
s += (`<span style='border: 0px; font-size: 12px; color: red'>Name:</span> ${results[key].label}`+ "<br><span style='border: 0px; font-size: 12px; color: white' >Warscheinlichkeit:</span> " + Number(value.confidence * 100).toFixed(3) + " %" ) + "<br>";
});
// Ergebnisse in einem String ausgeben ...
// Output results in a string ...
objOutput.innerHTML = s;
}// End of out(results)
<script>
<section>
<article>
<body>
<html>
HTML = s;
}// End of out(results)
</script>
</section>
</article>
<body>
</html>