taralino

Exkurs: Experiment

In diesem Exkurs hast du die Möglichkeit, anhand einer Anwendung Erfahrungen in Hinblick auf Bedeutung, Umfang und Qualität von Trainingsdaten zu sammeln. Dazu beschäftigen wir uns mit einem neuronalen Netz zur Klassifikation von Schwarz-Weiß-Bildern bestehend aus 20 x 20 Bildpunkten:

In der folgenden Anwendung sind Trainingsdaten für drei unterschiedliche Objekte einzugeben. Unter Verwendung dieser Daten kann das neuronale Netz trainiert und anschließend getestet werden.

Mache dich mit der Anwendung vertraut. Überlege dir drei unterschiedliche Objekte, die durch das neuronale Netz klassifiziert werden sollen (z.B. X, O, I oder 1, 2, 3 oder drei ganz andere Figuren).
Gib zu jedem Objekt ausreichend viele Bilder ein, die als Trainingsdaten dienen. Nutze dazu die Schaltflächen (Objekt A), (Objekt B) und (Objekt C).
Trainiere das neuronale Netz. Nutze dazu die Schaltfläche (Trainieren).
Teste das neuronale Netz, indem du weitere Objekte zeichnest und am (zuvor trainierten) neuronalen Netz auswertest (Auswerten). Die Schaltfläche (Neu) dient dazu, die Zeichenfläche zu leeren.

Führe das Experiment zuvor mehrmals durch. Wähle unterschiedliche Objekte und verändere auch den Umfang der Trainingsdaten (von nur wenigen Trainingsobjekten bis hin zu möglichst vielen). Was sind deine Beobachtungen hinsichtlich Bedeutung, Umfang und Qualität von Trainingsdaten?

Tipp: Wenn du alle Trainingsdaten löschen und von vorne beginnen möchtest, kannst du diese Seite vollständig neu laden.

Anwendung

Nutze die Zeichenfläche, um Objekt einzugeben.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="taralino.js"></script>
</head>
<body>
<script>

/*******************************************
             global variables
*******************************************/

var n = 20;

var map = [];

var prev = [];

var mousekey = "up";

var X = [];



/*******************************************
              map functions
*******************************************/

function init_map() {
  map = [];
  for (var i = 0; i < n; i++) {
    map.push([]);
    for (var j = 0; j < n; j++) map[i].push(0);
  };
};

function draw_map() {
  Canvas.clear();
  for (var y = 0; y < n; y = y+1) {
    for (var x = 0; x < n; x = x+1) {
      Canvas.box(x+0.5, n-y-0.5, 1.0, {fill:[0,0,0,map[y][x]*255]});
    };
  };
};

function add_to_map(a, b, c) {
  if ((a >= 0) && (a < n) && (b >= 0) && (b < n)) map[a][b] += c*(1-map[a][b]);
};



/*******************************************
            mouse interactions
*******************************************/

function on_mouse_down(x, y) {
  mousekey = "down";
  prev = [x,y];
  on_mouse_move(x, y);
};

function on_mouse_up(x, y) {
  mousekey = "up";
  draw_map();
};

function on_mouse_leave(x, y) {
  on_mouse_up(x, y);
};

function on_mouse_move(x, y) {
  if (mousekey == "down") {
    var c = 0.4;
    var d = 0.2;
    var e = 0.05;
    var dx = prev[0]-x;
    var dy = prev[1]-y;
    var dist = Math.sqrt(dx*dx + dy*dy);
    if (dist > 0) { dx /= dist; dy /= dist; };
    for (var h = 0; h <= dist; h += 0.2) {
      var a = Math.max(0, Math.min(Math.floor(n - (y + h*dy)), n-1));
      var b = Math.max(0, Math.min(Math.floor(x + h*dx), n-1));
      add_to_map(a, b, c);
      add_to_map(a+1, b, d);
      add_to_map(a-1, b, d);
      add_to_map(a, b+1, d);
      add_to_map(a, b-1, d);
      add_to_map(a+1, b+1, e);
      add_to_map(a+1, b-1, e);
      add_to_map(a-1, b+1, e);
      add_to_map(a-1, b-1, e);
    };
    draw_map();
    prev = [x,y];
  };
};



/*******************************************
                   setup
*******************************************/

function i2a(i) {
  if (i == 0) return "A";
  if (i == 1) return "B";
  if (i == 2) return "C";
  return "";
};

function setup() {
  // Canvas
  Canvas.init([0,n], [0,n], {width:320, background:"#f4f4f4"});
  init_map();
  draw_map();
  // Buttons
  Button.add("A", "Objekt A");
  Button.add("B", "Objekt B");
  Button.add("C", "Objekt C");
  Button.add("T", "Trainieren");
  Button.add("N", "Neu");
  Button.add("E", "Auswerten");
  // Sketch
  Sketch.init([0,10], [0,3.5], {width:320, background:"#f4f4f4"});
  draw_result([0,0,0]);
  // NeuralNetwork
  NeuralNetwork.init([n*n,10,3]);
  // append
  for (var i = 0; i < 3; i++) {
    var h = document.createElement("div");
    h.innerHTML = '<div style="text-align:center;margin-top:8px;"><div id="trainingsdata' + i.toFixed(0) + '" style="text-align:left;display:inline-block;width:320px;"><div style="font-size:14px;font-family:Tahoma,Geneva,sans-serif;margin:4px 0;">Trainingsdaten Objekt ' + i2a(i) + '</div></div></div>';
    document.body.appendChild(h);
  };
};



/*******************************************
                sketch_draw
*******************************************/

function color_gradient(q) {
  var c = [26,124,208];
  var d = [66,188,66];
  return [q*c[0]+(1-q)*d[0], q*c[1]+(1-q)*d[1], q*c[2]+(1-q)*d[2]];
};

function draw_result(r) {
  Sketch.clear();

  Sketch.text(2, 2.7, "Objekt A");
  Sketch.text(5, 2.7, "Objekt B");
  Sketch.text(8, 2.7, "Objekt C");

  Sketch.circle(2, 1.4, 0.8, {fill:color_gradient(r[0])});
  Sketch.circle(5, 1.4, 0.8, {fill:color_gradient(r[1])});
  Sketch.circle(8, 1.4, 0.8, {fill:color_gradient(r[2])});
  Sketch.text(2, 1.4, r[0].toFixed(2), {fill:"white"});
  Sketch.text(5, 1.4, r[1].toFixed(2), {fill:"white"});
  Sketch.text(8, 1.4, r[2].toFixed(2), {fill:"white"});

  Sketch.draw();
};



/*******************************************
                on_click
*******************************************/

function button_clear() {
  init_map();
  draw_map();
  draw_result([0,0,0]);
};


function map_to_vector() {
  var t = 0;
  var h = [];
  for (var y = 0; y < n; y = y+1) {
    for (var x = 0; x < n; x = x+1) {
      h.push(map[y][x]);
      t += map[y][x];
    };
  };
  return {h:h, t:t};
};


function button_add(k) {
  var T = map_to_vector();
  if (T.t <= 1e-6) return;
  var o = [0,0,0];
  o[k] = 1;
  X.push({input:T.h, output:o, index:k});
  button_clear();
  var M = Picture.gradient(Picture.vector(T.h),[0,255],[244,0]);
  var d = document.createElement("div");
  var h = "pic" + (1e10*Math.random()).toFixed(0);
  d.setAttribute("id", h);
  d.style.display = "inline-block";
  d.style.marginRight = "4px";
  document.getElementById("trainingsdata"+k.toFixed(0)).appendChild(d);
  Picture.draw(M, {zoom:2, div:h});
};


function button_train() {
  if (X.length < 6) {
    popup("Bitte gib mehr Trainingsdaten ein.");
    return;
  };
  NeuralNetwork.init([n*n,10,3]);
  NeuralNetwork.train(X, {iterations:100, batch_size:X.length});
  button_clear();
  popup("Trainingsphase erfolgreich abgeschlossen.");
};


function button_evaluate() {
  var T = map_to_vector();
  if (T.t <= 1e-6) return;
  var r = NeuralNetwork.evaluate(T.h);
  draw_result(r);
};


function on_click(id) {
  if (id == "N") button_clear();
  if (id == "A") button_add(0);
  if (id == "B") button_add(1);
  if (id == "C") button_add(2);
  if (id == "T") button_train();
  if (id == "E") button_evaluate();
};


</script>
</body>
</html>

Vorschau Download Kopie speichern