Line 1: | Line 1: | ||
+ | {{SEU:Header}} | ||
<html> | <html> | ||
<!-- 解决官网bug的 CSS --> | <!-- 解决官网bug的 CSS --> | ||
<style> | <style> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
.diagramWhole{ | .diagramWhole{ | ||
width:100%; | width:100%; | ||
Line 127: | Line 98: | ||
} | } | ||
</style> | </style> | ||
− | |||
<meta charset="utf-8"> | <meta charset="utf-8"> | ||
− | |||
− | |||
− | |||
<link href="https://fonts.googleapis.com/css?family=Raleway:100,300,400,500,700,900" rel="stylesheet"> | <link href="https://fonts.googleapis.com/css?family=Raleway:100,300,400,500,700,900" rel="stylesheet"> | ||
<link href="https://2019.igem.org/Template:SEU/Home_CSS?action=raw&ctype=text/css" rel="stylesheet" type="text/css"> | <link href="https://2019.igem.org/Template:SEU/Home_CSS?action=raw&ctype=text/css" rel="stylesheet" type="text/css"> | ||
<link href="https://2019.igem.org/Template:SEU/Home_CSS2?action=raw&ctype=text/css" rel="stylesheet" type="text/css"> | <link href="https://2019.igem.org/Template:SEU/Home_CSS2?action=raw&ctype=text/css" rel="stylesheet" type="text/css"> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
<div id="fullpage" class="fullpage-default"> | <div id="fullpage" class="fullpage-default"> | ||
− | <div | + | <div> |
<div class="section-inner"> | <div class="section-inner"> | ||
<div class="about-section"> | <div class="about-section"> | ||
<div class="row justify-content-center"> | <div class="row justify-content-center"> | ||
− | <div | + | <div> |
<div class="row"> | <div class="row"> | ||
− | <div class=" | + | <div class="row justify-content-center"> |
− | <br><br><br><br> | + | <div> |
− | + | <div class="about-contentbox"> | |
− | + | <div> | |
− | + | <br><br><br><br> | |
− | + | <h1>User Instruction</h1> | |
+ | <p align="left">This is a webpage tool which showcases DNA reactions utilized to synthesize a neural network and generates corresponding DNA sequences. We simply provide the reactions that are required in a single neuron, as a layer of neural network can be implemented by combining such objects.</p> | ||
+ | <p align="left">To use this tool, users should firstly specify the number of inputs to a neuron by typing the value in the <b>Number</b> frame and click <b>Submit</b>. After clicking the <b>Submit</b> button, sequences will be generated and showed in the lower diagram. Users can also click the <b>Download Sequences</b> button to download the generated sequences as a .txt file.</p> | ||
+ | <p align="left">By cliking on the three figures below the <b>Number</b> frame, reactions utilized in the three parts of the neuron will be shown respectively. Structures of DNA strands will be given in the upper diagram.</p> | ||
− | + | <p>Though our theory is able to expand to construct a neuron with arbitrary inputs, due to the limitation of compute capacity of web browsers we limit the number of inputs of each neuron to 8.</p> | |
− | + | <img src="https://static.igem.org/mediawiki/2019/a/a8/T--SEU--tool.png" style="background-color: transparent;width:80%"><br><br> | |
− | + | <center> | |
− | + | Number: | |
− | + | <input type="text" id="number" name="number" value=""> | |
− | + | <button onclick="clearCanvas();draw();showSeq();" type="submit">Submit</button><br><br> | |
− | + | <div id="alreadySubmit"></div> | |
− | + | <button onclick="clearCanvas();drawWeightedSum([2*DNAseperate,2*DNAseperate]);" class="buttonInputLayer">Click to show: Weighted Sum</button> | |
− | + | <button onclick="clearCanvas();drawSubNeuron([2*DNAseperate,2*DNAseperate]);" class="buttonActivation">Click to show: Activation</button> | |
− | + | <button onclick="clearCanvas();drawBackprop([2*DNAseperate,2*DNAseperate]);" class="buttonBackpropagation">Click to show: Backpropagation</button><br> | |
− | + | </center> | |
− | + | </div> | |
− | + | <div> | |
− | + | <body> | |
− | + | <center> | |
− | + | <div class="diagram" id="words"> | |
− | + | <canvas id="canvas" width="2500" height="25000"></canvas><br> | |
− | + | <!-- <script type="text/javascript">draw();</script> --> | |
− | + | </div> | |
− | + | <button onclick="windowSeq();">Download Sequences</button> | |
− | + | <div class="sequence" id="sequence"> | |
<!-- <canvas id="seqCanvas" width="200" height="20000"></canvas> --> | <!-- <canvas id="seqCanvas" width="200" height="20000"></canvas> --> | ||
<!-- <script type="text/javascript">draw();</script> --> | <!-- <script type="text/javascript">draw();</script> --> | ||
− | + | </div> | |
− | + | </center> | |
− | + | </body> | |
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
</div> | </div> | ||
− | |||
− | |||
</div> | </div> | ||
</div> | </div> | ||
Line 268: | Line 165: | ||
<!-- <script src="https://2019.igem.org/Template:SEU/Home_JS?action=raw&ctype=text/javascript" type="text/javascript"></script> --> | <!-- <script src="https://2019.igem.org/Template:SEU/Home_JS?action=raw&ctype=text/javascript" type="text/javascript"></script> --> | ||
− | <script src="https://2019.igem.org/Template:SEU/toolJS?action=raw&ctype=text/javascript" type="text/javascript"></script> | + | <!-- <script src="https://2019.igem.org/Template:SEU/toolJS?action=raw&ctype=text/javascript" type="text/javascript"></script> --> |
− | + | <script src="mainMess.js" type="text/javascript"></script> | |
</html> | </html> |
Revision as of 11:49, 2 October 2019
User Instruction
This is a webpage tool which showcases DNA reactions utilized to synthesize a neural network and generates corresponding DNA sequences. We simply provide the reactions that are required in a single neuron, as a layer of neural network can be implemented by combining such objects.
To use this tool, users should firstly specify the number of inputs to a neuron by typing the value in the Number frame and click Submit. After clicking the Submit button, sequences will be generated and showed in the lower diagram. Users can also click the Download Sequences button to download the generated sequences as a .txt file.
By cliking on the three figures below the Number frame, reactions utilized in the three parts of the neuron will be shown respectively. Structures of DNA strands will be given in the upper diagram.
Though our theory is able to expand to construct a neuron with arbitrary inputs, due to the limitation of compute capacity of web browsers we limit the number of inputs of each neuron to 8.
![](https://static.igem.org/mediawiki/2019/a/a8/T--SEU--tool.png)