本篇文章是数据演示的HTML，如果你不会HTML和JS，把代码复制到一个文本文件中，文本文件命名为test.html,保存后双击运行即可
本文包含 QuadraticCost（二次方代价函数）、CorssEntropyCost（交叉商代价函数）、SoftMax变化演示三部份1、代价函数：
为了让代码及数据清晰些，
在QuadraticCost（二次方代价函数）、CorssEntropyCost（交叉商代价函数）中
对神经网络的设置只有一个输入神经元(input)与一个输出神经元(output)
具体内容介绍文章为：
1.1 机器学习(11.3)--神经网络(nn)算法的深入与优化(3) -- QuadraticCost（二次方代价函数）数理分析
1.2 机器学习(11.4)--神经网络(nn)算法的深入与优化(4) -- CorssEntropyCost（交叉熵代价函数）数理分析与代码实现
2、Softmax:
Softmax的实现与神经网络本身关系并不太大，在演示中的拉动条，代表着最后算出值，而Act表示softmax转化后的值，
通过拉动条，可以看到数据变化 具体内容介绍文章为：
2.1 机器学习(11.5)--神经网络(nn)算法的深入与优化(5) -- softmax的代码实验如果你不会javascript也问题不大，你只要关心有注释的地方即可，大致的运行效果如下图
<!DOCTYPE html>
<html>
<head>
<style>
body {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.MenuBut {
display: inline-block;
margin: 10px;
padding: 5px 10px;
cursor: pointer;
border: 3px solid #0094ff;
background: #cbe9ff;
}
.MenuBut:hover {
background: #003962;
color: white;
}
.MenuBut[selected="selected"] {
background: #ffeb7a;
color: black;
}
.txtInit {
position: absolute;
left: 630px;
width: 50px;
text-align: right;
font-weight: 700;
font-size: 20px;
}
.lblInit {
text-align: right;
position: absolute;
width: 130px;
left: 500px;
}
.SoftMaxBox {
position:absolute;
width :16px;
height:16px;
cursor: pointer;
border: 2px solid #0094ff;
background: #cbe9ff;
z-index:1;
}
.SoftMaxBoxLine{
border-top: 3px solid #0094ff;
position:absolute;
width:420px;
left:20px;
z-index:0;
}
.SoftMaxBox_lbl_Z{
position:absolute;
left:20px;
}
.SoftMaxBox_lbl_Act {
position:absolute;
left:270px;
}
</style>
</head>
<body>
<div id="Menu" style="z-index:1;position:absolute">
<div id="butQuadraticCost" class="MenuBut">Quadratic Cost(二次方代价)</div>
<div id="butCorssEntropyCost" class="MenuBut">Cross Entropy Cost(交叉熵代价)</div>
<div id="butSoftmax" class="MenuBut">softmax</div>
</div>
<div id="Cost">
<canvas id="canvas" width="680" height="640" style="position:absolute;top:50px;left:50px;"></canvas>
<label id="lblData" style="position:absolute;top:680px;left:100px;"></label>
<label id="lblWeight" class="lblInit" style="top:95px;">初始化weight：</label>
<input type="text" id="txtWeight" class="txtInit" style="top:90px;" />
<label id="lblBiase" class="lblInit" style="top:125px;">初始化Biases：</label>
<input type="text" id="txtBiase" class="txtInit" style="top:120px;" />
<label id="lblLearnRate" class="lblInit" style="top:155px;">学习率：</label>
<input type="text" id="txtLearnRate" class="txtInit" style="top:150px;" />
<div id="butStart" class="MenuBut" style="position:absolute;top:180px;left:500px;">开始</div>
<div id="butStop" class="MenuBut" style="position:absolute;top:180px;left:600px;display:none;">暂停</div>
</div>
<div id="SoftMax">
</div>
<script type="text/javascript">
var zValue =null ;
function SoftMaxControl(zNumer) {
var divSoftMax = document.getElementById("SoftMax");
divSoftMax.innerHTML="";
var html = "";
zValue = [];
for (var i = 0; i < zNumer; i++) {
html += '<div id="SoftMaxBox' + (i+1) + '" class="SoftMaxBox" style="top:' + (101+i*70) + 'px;left:220px;"></div>'
+ '<div id="SoftMaxBox' + (i + 1) + 'Line" class="SoftMaxBoxLine" style="top:' + (110 + i * 70) + 'px"></div>'
+ '<label id="SoftMaxBox' + (i + 1) + '_Z" class="SoftMaxBox_lbl_Z" style="top:' + (130 + i * 70) + 'px"></label>'
+ '<label id="SoftMaxBox' + (i + 1) + '_Act" class="SoftMaxBox_lbl_Act" style="top:' + (130 + i * 70) + 'px"></label>';
var valTmp = Math.round(Math.random(1) * 5 * 1000) / 1000 * (Math.random(1) < 0.5 ? 1 : -1)
zValue.push(valTmp);
}
divSoftMax.innerHTML = html;
for (var i = 0; i < zNumer; i++) {
initDrag(i + 1);
var drag = document.getElementById('SoftMaxBox' + (i + 1));
console.log((zValue[i] * 40 + 220) + "px")
drag.style.left = (zValue[i] * 40 + 220) + "px";
}
countActZ();
}
function initDrag(index) {
var drag = document.getElementById('SoftMaxBox' + index);
if (document.attachEvent) {
drag.attachEvent('onmousedown', dragHandle);
} else {
drag.addEventListener('mousedown', dragHandle, false);
}
function dragHandle(event) {
var event = event || window.event;
var startX = drag.offsetLeft;
var startY = drag.offsetTop;
var mouseX = event.clientX;
var mouseY = event.clientY;
var deltaX = mouseX - startX;
var deltaY = mouseY - startY;
if (document.attachEvent) {
drag.attachEvent('onmousemove', moveHandle);
drag.attachEvent('onmouseup', upHandle);
drag.attachEvent('onlosecapture', upHandle);
drag.setCapture();
} else {
document.addEventListener('mousemove', moveHandle, true);
document.addEventListener('mouseup', upHandle, true);
}
function moveHandle(event) {
var event = event || window.event;
var leftTmp = (event.clientX - deltaX);
if (leftTmp <= 20) {
leftTmp = 20
}
if (leftTmp >= 420) {
leftTmp = 420
}
zValue[index - 1] = Math.round((leftTmp - 220) /40 * 1000) / 1000
countActZ();
drag.style.left = leftTmp + "px";
//drag.style.top = (event.clientY - deltaY) + "px";
}
function upHandle() {
if (document.attachEvent) {
drag.detachEvent('onmousemove', moveHandle);
drag.detachEvent('onmouseup', upHandle);
drag.detachEvent('onlosecapture', upHandle);
drag.releaseCapture();
} else {
document.removeEventListener('mousemove', moveHandle, true);
document.removeEventListener('mouseup', upHandle, true);
}
}
}
};
function countActZ() {
var result = [];
var sum = 0;
for (var i = 0; i < zValue.length; i++) {
result[i] = Math.exp(zValue[i]);
sum += result[i]
}
for (var i = 0; i < zValue.length; i++) {
var lblZ = document.getElementById('SoftMaxBox' + [i + 1] + '_Z');
var lblAct= document.getElementById('SoftMaxBox' + [i + 1] + '_Act');
lblZ.innerHTML = "z[-1]的第" + [i+1] + "个神经元的值 : " + zValue[i];
result[i] = Math.round(result[i] / sum * 1000) / 1000;
lblZ.innerHTML = "z[-1]的第" + [i + 1] + "个神经元的值 : " + zValue[i];
lblAct.innerHTML = "激活值(act)为 : " + result[i];
}
};
</script>
<script type="text/javascript">
var stoped = false;
var canvas = document.getElementById("canvas");
var lblData = document.getElementById("lblData");
var currentCost = null;
var curentTxt = null;
var epoch = 0, w , b , learnRate ;
//按件控制
(function () {
var Menu = document.getElementById("Menu");
var Cost = document.getElementById("Cost");
var SoftMax = document.getElementById("SoftMax");
var butQuadraticCost = document.getElementById("butQuadraticCost");
var butEntropyCost = document.getElementById("butEntropyCost");
var butSoftmax = document.getElementById("butSoftmax");
var butStop = document.getElementById("butStop");
var butStart = document.getElementById("butStart");
var txtWeight = document.getElementById("txtWeight");
var txtBiase = document.getElementById("txtBiase");
var txtLearnRate = document.getElementById("txtLearnRate");
function clearAllBut() {
stoped = true;
butQuadraticCost.setAttribute("selected", "");
butCorssEntropyCost.setAttribute("selected", "");
butSoftmax.setAttribute("selected", "");
butStop.style.display = "none";
}
butQuadraticCost.onclick = function () {
txtWeight.value = ''
txtBiase.value = ''
txtLearnRate.value = ''
Cost.style.display = "block";
SoftMax.style.display = "none";
clearAllBut();
curentTxt = "Quadratic Cost";
this.setAttribute("selected", "selected");
drawAxis(curentTxt);
currentCost = QuadraticCost;
};
butCorssEntropyCost.onclick = function () {
txtWeight.value = ''
txtBiase.value = ''
txtLearnRate.value = ''
Cost.style.display = "block";
SoftMax.style.display = "none";
clearAllBut();
curentTxt = "Cross Entropy Cost";
this.setAttribute("selected", "selected");
drawAxis(curentTxt);
currentCost = CorssEntropyCost;
};
butSoftmax.onclick = function () {
Cost.style.display = "none";
SoftMax.style.display = "block";
clearAllBut();
curentTxt = "softmax";
this.setAttribute("selected", "selected");
SoftMaxFunction();
};
butStart.onclick = function () {
drawAxis(curentTxt);
stoped = false;
w = parseFloat(txtWeight.value);
b = parseFloat(txtBiase.value);
learnRate = parseFloat(txtLearnRate.value);
if (isNaN(w)) {
txtWeight.value = currentCost == QuadraticCost?0.6:2;
w = currentCost == QuadraticCost ? 0.6 : 2;
}
if (isNaN(b)) {
txtBiase.value = currentCost == QuadraticCost ? 0.9 : 2;
b = currentCost == QuadraticCost ? 0.9 : 2;;
}
if (isNaN(learnRate)) {
txtLearnRate.value = currentCost == QuadraticCost ? 0.15 : 0.05;
learnRate = currentCost == QuadraticCost ? 0.15 : 0.05;
}
epoch = 0;
currentCost();
butStop.style.display = "block";
};
butStop.onclick = function () {
if (stoped===true) {
stoped = false;
butStop.innerHTML = "暂停";
currentCost();
} else {
stoped = true;
butStop.innerHTML = "继续";;
console.log(epoch)
}
};
butQuadraticCost.click();
})();
//绘制坐标
function drawAxis(text) {
canvas.height = canvas.height
var ctx = canvas.getContext("2d");
ctx.lineWidth = "1";
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = "black";
ctx.moveTo(20, 20);
ctx.lineTo(20, 620);
ctx.lineTo(680, 620);
ctx.moveTo(10, 30);
ctx.lineTo(20, 20);
ctx.lineTo(30, 30);
ctx.moveTo(670, 630);
ctx.lineTo(680, 620);
ctx.lineTo(670, 610);
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = "#0094ff"
ctx.lineWidth = "3";
ctx.moveTo(40, 50);
ctx.lineTo(80, 50);
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = "red"
ctx.lineWidth = "3";
ctx.moveTo(40, 100);
ctx.lineTo(80, 100);
ctx.stroke();
ctx.beginPath();
ctx.lineWidth = "1";
ctx.font = "16px Courier New";
ctx.strokeStyle = "black"
ctx.strokeText("Cost", 90, 55);
ctx.strokeText("output", 90, 105);
ctx.strokeText("次数(epoch)", 550, 635);
ctx.stroke();
return ctx;
}
//绘制线与显示信息
var oldPos = { epoch: null, cost: null,output:null };
function drawPoint(output,cost) {
lblData.innerHTML = "epoch : " + epoch + " output : " + Math.round(output * 1000) / 1000
+ " cost : " + Math.round(cost * 1000) / 1000;
var posEpoch = epoch + 20;
var posCost = 620 - cost * (currentCost == QuadraticCost ? 600 : 100);
var posOutput = 620 - output * (currentCost == QuadraticCost ? 600 : 100);
if (epoch > 0) {
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.strokeStyle = "red"
ctx.lineWidth = "3";
ctx.moveTo(oldPos.epoch, oldPos.cost);
ctx.lineTo(posEpoch, posCost);
ctx.stroke()
ctx.beginPath();
ctx.strokeStyle = "#0094ff"
ctx.lineWidth = "3";
ctx.moveTo(oldPos.epoch, oldPos.output);
ctx.lineTo(posEpoch, posOutput);
ctx.stroke()
}
oldPos = { epoch: posEpoch, cost: posCost, output: posOutput };
epoch++;
}
//Quadratic Cost
function QuadraticCost() {
function sigmoid(z) {
return 1.0 / (1.0 + Math.exp(-z));
}
function sigmoid_deriv(z) {
return sigmoid(z) * (1 - sigmoid(z))
}
var x_data = 1, y_data = 0;
var y;
var run = window.setInterval(function () {
if (epoch > 600 || stoped) {
window.clearInterval(run);
return;
}
//正向计算
y = x_data * w + b;
yAct = sigmoid(y);
//二次方代价计算
var cost = (yAct - y_data) * (yAct - y_data) /2
//反向计算
delta = (yAct - y_data) * sigmoid_deriv(y);
wTmp = delta * x_data;
//调整w和b
w = w - wTmp * learnRate;
b = b - delta * learnRate;
drawPoint( yAct, cost);
}, 50);
}
//Cross Entropy Cost
function CorssEntropyCost() {
function sigmoid(z) {
return 1.0 / (1.0 + Math.exp(-z));
}
function sigmoid_deriv(z) {
return sigmoid(z) * (1 - sigmoid(z))
}
var x_data = 1, y_data = 0;
var y;
var run = window.setInterval(function () {
if (epoch > 600 || stoped) {
window.clearInterval(run);
stoped = true;
return;
}
//正向计算
y = x_data * w + b;
yAct = sigmoid(y);
//交叉熵代价计算
var cost = -1 * (y_data * Math.log(yAct) + (1 - y_data) * Math.log(1 - yAct));
//反向计算
delta = (yAct - y_data) ;
wTmp = delta * x_data;
//调整w和b
w = w - wTmp * learnRate;
b = b - delta * learnRate;
drawPoint(yAct, cost);
}, 50);
}
function SoftMaxFunction() {
SoftMaxControl(5);
}
//QuadraticCost();
</script>
</body>
</html>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
