css模拟一个神经网络过程代码-html代码-BFW代码库

代码语言：html
所属分类：其他
代码描述：css模拟一个神经网络过程代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
body{
    padding: 5vw;
    
    --col: min(40vw, 200px);
}

.vars{
      
    --inputX: 0;
    --inputY: 0;
    --output1: 0;
    --output2: 0;
    --output3: 0;
    --output4: 0;
    
    --output1bias: 0.006412765611663633;
    --output2bias: 0.007072853542676219;
    --output3bias: 0.0064746685639952214;
    --output4bias: 0.004851470988693036;
    
    --weights1-1: -0.9807254999119579;
    --weights1-2: 0.9813663133332142;
    --weights1-3: -0.9817224902785696;
    --weights1-4: 0.9817919593383302;
    --weights2-1: -0.9809082670731147;
    --weights2-2: -0.9816176935504328;
    --weights2-3: 0.9815336794202348;
    --weights2-4: 0.9815925299039976;
    
 
    /* propogate */
    --output1a: calc((var(--weights1-1) * var(--inputX)) + (var(--weights2-1) * var(--inputY)));
    --output2a: calc((var(--weights1-2) * var(--inputX)) + (var(--weights2-2) * var(--inputY)));
    --output3a: calc((var(--weights1-3) * var(--inputX)) + (var(--weights2-3) * var(--inputY)));
    --output4a: calc((var(--weights1-4) * var(--inputX)) + (var(--weights2-4) * var(--inputY)));
    
    --output1b: calc(max(0, var(--output1a)) + var(--output1bias));  
    --output2b: calc(max(0, var(--output2a)) + var(--output2bias));    
    --output3b: calc(max(0, var(--output3a)) + var(--output3bias));   
    --output4b: calc(max(0, var(--output4a)) + var(--output4bias)); 
    
    /* categorise */
    --maxOut: max(var(--output1b), var(--output2b), var(--output3b), var(--output4b));
    
    --output1c: max(calc(1 - ((var(--output1b) - var(--maxOut)) * (var(--output1b) - var(--maxOut)) * 100000000)), 0);
    --output2c: max(calc(1 - ((var(--output2b) - var(--maxOut)) * (var(--output2b) - var(--maxOut)) * 100000000)), 0);
    --output3c: max(calc(1 - ((var(--output3b) - var(--maxOut)) * (var(--output3b) - var(--maxOut)) * 100000000)), 0);
    --output4c: max(calc(1 - ((var(--output4b) - var(--maxOut)) * (var(--output4b) - var(--maxOut)) * 100000000)), 0);
    
    --color1: #00ff00;
    --color2: #990000;
    --switch1: var(--color1) calc(100% * var(--output1c)), var(--color2) 0;
    --switch1outline: rgba(0,0,0, calc(100% * var(--output1c)));
    
    --switch2: var(--color1) calc(100% * var(--output2c)), var(--color2) 0;
    --switch2outline: rgba(0,0,0, calc(100% * var(--output2c)));
    
    --switch3: var(--color1) calc(100% * var(--output3c)), var(--color2) 0;
    --switch3outline: rgba(0,0,0, calc(100% * var(--output3c)));
    
    --switch4: var(--color1) calc(100% * var(--output4c)), var(--color2) 0;
    --switch4outline: rgba(0,0,0, calc(100% * var(--output4c)));
    
    
}

.output-grid{
    display:grid;
  grid-template-columns: var(--col) var(--col);
  grid-row: auto auto;
}

.clear{
    clear: both;
}

label{
    --wh: min(10vw, 60px);
    width: var(--wh);
    height: var(--wh);
    display: block;
    background-color: #bb0000;
    float: left;
    text-align: center;
    font-size: 0.2vw;
    outline: 1px solid #666;
}

input:checked + label{
    background-color: #00ff00;
    outline: 4px solid #000;
    outline-offset: -4px;
}

input:focus + label{
    outline: 8px solid #333;
    outline-offset: -8px;
    border-radius: 16px;
}


input[type="radio"]{
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}


#x-08y08:checked ~ .vars{
    --inputX: -0.8;
    --inputY: 0.8;
}
#x-06y08:checked ~ .vars{
    --inputX: -0.6;
    --inputY: 0.8;
}
#x-04y08:checked ~ .vars{
    --inputX: -0.4;
    --inputY: 0.8;
}
#x-02y08:checked ~ .vars{
    --inputX: -0.2;
    --inputY: 0.8;
}
#x02y08:checked ~ .vars{
    --inputX: 0.2;
    --inputY: 0.8;
}
#x04y08:checked ~ .vars{
    --inputX: 0.4;
    --inputY: 0.8;
}
#x06y08:checked ~ .vars{
    --inputX: 0.6;
    --inputY: 0.8;
}
#x08y08:checked ~ .vars{
    --inputX: 0.8;
    --inputY: 0.8;
}

#x-08y06:checked ~ .vars{
    --inputX: -0.8;
    --inputY: 0.6;
}
#x-06y06:checked ~ .vars{
    --inputX: -0.6;
    --inputY: 0.6;
}
#x-04y06:checked ~ .vars{
    --inputX: -0.4;
    --inputY: 0.6;
}
#x-02y06:checked ~ .vars{
    --inputX: -0.2;
    --inputY: 0.6;
}
#x02y06:checked ~ .vars{
    --inputX: 0.2;
    --inputY: 0.6;
}
#x04y06:checked ~ .vars{
    --inputX: 0.4;
    --inputY: 0.6;
}
#x06y06:checked ~ .vars{
    --inputX: 0.6;
    --inputY: 0.6;
}
#x08y06:checked ~ .vars{
    --inputX: 0.8;
    --inputY: 0.6;
}

#x-08y04:checked ~ .vars{
    --inputX: -0.8;
    --inputY: 0.4;
}
#x-06y04:checked ~ .vars{
    --inputX: -0.6;
    --inputY: 0.4;
}
#x-04y04:checked ~ .vars{
    --inputX: -0.4;
    --inputY: 0.4;
}
#x-02y04:checked ~ .vars{
    --inputX: -0.2;
    --inputY: 0.4;
}
#x02y04:checked ~ .vars{
    --inputX: 0.2;
    --inputY: 0.4;
}
#x04y04:checked ~ .vars{
    --inputX: 0.4;
    --inputY: 0.4;
}
#x06y04:checked ~ .vars{
    --inputX: 0.6;
    --inputY: 0.4;
}
#x08y04:checked ~ .vars{
    --inputX: 0.8;
    --inputY: 0.4;
}


#x-08y02:checked ~ .vars{
    --inputX: -0.8;
    --inputY: 0.2;
}
#x-06y02:checked ~ .vars{
    --inputX: -0.6;
    --inputY: 0.2;
}
#x-04y02:checked ~ .vars{
    --inputX: -0.4;
    --inputY: 0.2;
}
#x-02y02:checked ~ .vars{
    --inputX: -0.2;
    --inputY: 0.2;
}
#x02y02:checked ~ .vars{
    --inputX: 0.2;
    --inputY: 0.2;
}
#x04y02:checked ~ .vars{
    --inputX: 0.4;
    --inputY: 0.2;
}
#x06y02:checked ~ .vars{
    --inputX: 0.6;
    --inputY: 0.2;
}
#x08y02:checked ~ .vars{
    --inputX: 0.8;
    --inputY: 0.2;
}


#x-08y-02:checked ~ .vars{
    --inputX: -0.8;
    --inputY: -0.2;
}
#x-06y-02:checked ~ .vars{
    --inputX: -0.6;
    --inputY: -0.2;
}
#x-04y-02:checked ~ .vars{
    --inputX: -0.4;
    --inputY: -0.2;
}
#x-02y-02:checked ~ .vars{
    --inputX: -0.2;
    --inputY: -0.2;
}
#x02y-02:checked ~ .vars{
    --inputX: 0.2;
    --inputY: -0.2;
}
#x04y-02:checked ~ .vars{
    --inputX: 0.4;
    --inputY: -0.2;
}
#x06y-02:checked ~ .vars{
    --inputX: 0.6;
    --inputY: -0.2;
}
#x08y-02:checked ~ .vars{
    --inputX: 0.8;
    --inputY: -0.2;
}


#x-08y-04:checked ~ .vars{
    --inputX: -0.8;
    --inputY: -0.4;
}
#x-06y-04:checked ~ .vars{
    --inputX: -0.6;
    --inputY: -0.4;
}
#x-04y-04:checked ~ .vars{
    --inputX: -0.4;
    --inputY: -0.4;
}
#x-02y-04:checked ~ .vars{
    --inputX: -0.2;
    --inputY: -0.4;
}
#x02y-04:checked ~ .vars{
    --inputX: 0.2;
    --inputY: -0.4;
}
#x04y-04:checked ~ .vars{
    --inputX: 0.4;
    --inputY: -0.4;
}
#x06y-04:checked ~ .vars{
    --inputX: 0.6;
    --inputY: -0.4;
}
#x08y-04:checked ~ .vars{
    --inputX: 0.8;
    --inputY: -0.4;
}


#x-08y-06:checked ~ .vars{
    --inputX: -0.8;
    --inputY: -0.6;
}
#x-06y-06:checked ~ .vars{
    --inputX: -0.6;
    --inputY: -0.6;
}
#x-04y-06:checked ~ .vars{
    --inputX: -0.4;
    --inputY: -0.6;
}
#x-02y-06:checked ~ .vars{
    --inputX: -0.2;
    --inputY: -0.6;
}
#x02y-06:checked ~ .vars{
    --inputX: 0.2;
    --inputY: -0.6;
}
#x04y-06:checked ~ .vars{
    --inputX: 0.4;
    --inputY: -0.6;
}
#x06y-06:checked ~ .vars{
    --inputX: 0.6;
    --inputY: -0.6;
}
#x08y-06:checked ~ .vars{
    --inputX: 0.8;
    --inputY: -0.6;
}



#x-08y-08:checked ~ .vars{
    --inputX: -0.8;
    --inputY: -0.8;
}
#x-06y-08:checked ~ .vars{
    --inputX: -0.6;
    --inputY: -0.8;
}
#x-04y-08:checked ~ .vars{
    --inputX: -0.4;
    --inputY: -0.8;
}
#x-02y-08:checked ~ .vars{
    --inputX: -0.2;
    --inputY: -0.8;
}
#x02y-08:checked ~ .vars{
    --inputX: 0.2;
    --inputY: -0.8;
}
#x04y-08:checked ~ .vars{
    --inputX: 0.4;
    --inputY: -0.8;
}
#x06y-08:checked ~ .vars{
    --inputX: 0.6;
    --inputY: -0.8;
}
#x08y-08:checked ~ .vars{
    --inputX: 0.8;
    --inputY: -0.8;
}


#out-x-1y-1{
    width: var(--col);
    height: var(--col);
    background: linear-gradient(var(--switch1));
    outline: 4px solid var(--switch1outline);
    outline-offset: -4px;
}
#out-x1y-1{
    width: var(--col);
    height: var(--col);
    background: linear-gradient(var(--switch2));
    outline: 4px solid var(--switch2outline);
    outline-offset: -4px;
}
#out-x-1y1{
    width: var(--col);
    height: var(--col);
    background: linear-gradient(var(--switch3));
    outline: 4px solid var(--switch3outline);
    outline-offset: -4px;
}
#out-x1y1{
    width: var(--col);
    height: var(--col);
    background: linear-gradient(var(--switch4));
    outline: 4px solid var(--switch4outline);
    outline-offset: -4px;
}


.vals{
    margin-top: 20px;
}
.vals>div{
    height: 25px;
    position: relative;
}

#input1:after{
    counter-reset: input1 var(--input1);
    position: absolute;
    content: "input 1: " counter(input1);
}
#input2:after{
    counter-reset: input2 var(--input2);
    position: absolute;
    content: "input 2: " counter(input2);
}

#output1:after{
    counter-reset: output1 calc(var(--output1b) * 100000);
    position: absolute;
    content: "output 1: " counter(output1);
}
#output2:after{
    counter-reset: output2 calc(var(--output2b) * 100000);
    position: absolute;
    content: "output 2: " counter(output2);
}
#output3:after{
    counter-reset: output3 calc(var(--output3b) * 100000);
    position: absolute;
    content: "output 3: " counter(output3);
}
#output4:after{
    counter-reset: output4 calc(var(--output4b) * 100000);
    position: absolute;
    content: "output 4: " counter(output4);
}



#maxOut:after{
    counter-reset: maxOut calc(var(--maxOut) * 100000);
    position: absolute;
    content: "Max Output: " counter(maxOut);
}

#output1c:after{
    counter-reset: output1c var(--output1c);
    position: absolute;
    content: "x < 0 AND y < 0: " counter(output1c);
}
#output2c:after{
    counter-reset: output2c var(--output2c);
    position: absolute;
    content: "x > 0 AND y < 0: " counter(output2c);
}
#output3c:after{
    counter-reset: output3c var(--output3c);
    position: absolute;
    content: "x < 0 AND y > 0: " counter(output3c);
}
#output4c:after{
    counter-reset: output4c var(--output4c);
    position: absolute;
    content: "x > 0 AND y > 0: " counter(output4c);
}

#weights1-1:after{
    counter-reset: weights1-1 calc(var(--weights1-1) * 1000000);
    position: absolute;
    content: "weights1-1: " counter(weights1-1);
}
#weights1-2:after{
    counter-reset: weights1-2 calc(var(--weights1-2) * 1000000);
    position: absolute;
    content: "weights1-2: " counter(weights1-2);
}
#weights1-3:after{
    counter-reset: weights1-3 calc(var(--weights1-3) * 1000000);
    position: absolute;
    content: "weights1-3: " counter(weights1-3);
}
#weights1-4:after{
    counter-reset: weights1-4 calc(var(--weights1-4) * 1000000);
    position: absolute;
    content: "weights1-4: " counter(weights1-4);
}
#weights2-1:after{
    counter-reset: weights2-1 calc(var(--weights2-1) * 1000000);
    position: absolute;
    content: "weights2-1: " counter(weights2-1);
}
#weights2-2:after{
    counter-reset: weights2-2 calc(var(--weights2-2) * 1000000);
    position: absolute;
    content: "weights2-2: " counter(weights2-2);
}
#weights2-3:after{
    counter-reset: weights2-3 calc(var(--weights2-3) * 1000000);
    position: absolute;
    content: "weights2-3: " counter(weights2-3);
}
#weights2-4:after{
    counter-reset: weights2-4 calc(var(--weights2-4) * 1000000);
    position: absolute;
    content: "weights2-4: " counter(weights2-4);
}
</style>


  
  
</head>

<body >
  <h1>Pure CSS neural network</h1>
<p>In the first section you can choose a coordinate that is the input (x and y values)</p>
<p>Once you have chosen a coordinate we use CSS to run that input through a simple neural network (pre-trained) and the guess will be displayed in the second section</p>
<p>In the third section it is possible to view some of the values generated by the system to show that the CSS is indeed operating like a neural network</p>

<h2 id="inputs">Inputs</h2>
.........完整代码请登录后点击上方下载按钮下载查看