webtools/confusion.html at master · CAQ/webtools · 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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Confusion Matrix</title>
<script type='text/javascript'>

var $I = function (id) {
  return document.getElementById(id);
};

var init = function () {
  for (var idx = 0; idx <= 1; idx++) {
    var area = $I('textarea_' + idx);
    if (area.addEventListener) {
      // event handling code for sane browsers: IE9+, FF, Chrome, Opera and Safari
      area.addEventListener('input', update, false);
    } else if (area.attachEvent) {
      // IE-specific event handling code: IE8
      area.attachEvent('onpropertychange', update);
    }
  }
};

var error = function (t) {
  $I('span_error').innerHTML = t;
};

var update = function () {
  var values = [];

  for (var idx = 0; idx <= 1; idx++) {
    var t = $I('textarea_' + idx).value.trim();
    values[idx] = t.split("\n");
    if (t.length == 0) values[idx] = [];
    else if (t.indexOf('\n') < 0) values[idx] = [t];
  }
  if (values[0].length != values[1].length) {
    error("Numbers of lines mismatch (" + values[0].length + ", " + values[1].length + ").");
    return;
  } else
    error("");

  var n = values[0].length;
  var dict = {}, keys = {};
  for (var idx = 0; idx < n; idx++) {
    var v0 = values[0][idx], v1 = values[1][idx];
    keys[v0] = true;
    keys[v1] = true;
    if (v0 in dict) {
      if (v1 in dict[v0]) {
        dict[v0][v1]++;
      } else {
        dict[v0][v1] = 1;
      }
    } else {
      dict[v0] = {};
      dict[v0][v1] = 1;
    }
  }

  var html = "<table border='1'>";
  html += "<tr><th>A \\ P</th>";
  var k = 0;
  var totalByP = {};
  for (var key in keys) {
    k++;
    html += "<th>" + key + "</th>";
  }
  html += "<th><i>Total</i></th></tr>";
  for (var key0 in keys) {
    html += "<tr><th>" + key0 + "</th>";
    var total = 0;
    for (var key1 in keys) {
      var count = 0;
      if (key0 in dict && key1 in dict[key0]) count = dict[key0][key1];
      html += "<td>" + count + "</td>";
      total += count;
      if (key1 in totalByP)
        totalByP[key1] += count;
      else
        totalByP[key1] = count;
    }
    html += "<td><i>" + total + "</i></td></tr>";
  }
  html += "<tr><th><i>Total</i></th>";
  for (var key in keys) {
    html += "<td><i>" + totalByP[key] + "</i></td>";
  }
  html += "<td><i>" + n + "</i></td></tr></table>";

  $I('td_result').innerHTML = html;

};

</script>
</head>
<body onload="init();">
<h1>Confusion Matrix</h1>
<p>Plase enter the labels, one per line.  Make sure the lengths of labels are no longer than 20 characters.</p>
<table border="0">
<tr>
<th>Actual</th>
<th>Predicted</th>
<th>Matrix</th>
</tr>
<tr>
<td width="200" align="center"><textarea rows="20" cols="20" id="textarea_0"></textarea></td>
<td width="200" align="center"><textarea rows="20" cols="20" id="textarea_1"></textarea></td>
<td id="td_result" width="300" align="center"></td>
<td>Reference:<br/>
Accuracy = (True Positive + True Negative) / Total<br/>
Precision = True Positive / (True Positive + False Positive)<br/>
Recall = True Positive / (True Positive + False Negative)
</tr>
</table>
<span id="span_error" style="color:red;"></span>
</body>
</html>