机器学习(11.2)--神经网络(nn)算法的深入与优化(2) -- QuadraticCost、CorssEntropyCost、SoftMax的javascript数据演示测试代码

最新推荐文章于 2024-12-13 04:23:05 发布

雨落那秋林

最新推荐文章于 2024-12-13 04:23:05 发布

阅读量394

点赞数

分类专栏： python 机器学习 javascript 文章标签： python 机器学习 javascript cost softmax

本文链接：https://blog.youkuaiyun.com/carmelcarmen/article/details/79463460

版权

本篇文章是数据演示的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