Difference between revisions of "Team:SEU/tool"
| Line 2: | Line 2: | ||
<!-- 解决官网bug的 CSS --> | <!-- 解决官网bug的 CSS --> | ||
<style> | <style> | ||
| − | |||
/*消除官网坑爹样式*/ | /*消除官网坑爹样式*/ | ||
body { | body { | ||
| Line 20: | Line 19: | ||
width: 100%; | width: 100%; | ||
padding: 0; | padding: 0; | ||
| − | margin: -12px 0 0; | + | /*margin: -12px 0 0;*/ |
} | } | ||
#top_title{ | #top_title{ | ||
| Line 33: | Line 32: | ||
background-color: transparent !important; | background-color: transparent !important; | ||
} | } | ||
| − | + | .diagramWhole{ | |
| − | + | width:100%; | |
| − | + | height:620px; | |
| − | + | border:1px solid #666; | |
| − | + | background:#fff; | |
| − | + | margin:10px auto 0; | |
| − | + | overflow:auto; | |
| − | .diagram{ | + | float: center; |
| − | width: | + | |
| + | } | ||
| + | .diagram{ | ||
| + | width:60%; | ||
height:620px; | height:620px; | ||
border:1px solid #666; | border:1px solid #666; | ||
| Line 51: | Line 53: | ||
} | } | ||
.sequence{ | .sequence{ | ||
| − | width: | + | width:40%; |
height:620px; | height:620px; | ||
border:1px solid #666; | border:1px solid #666; | ||
| Line 60: | Line 62: | ||
} | } | ||
| − | + | .inputDiagram { | |
| − | + | border:0px; | |
| − | + | /*background-image:url(images/long-input.png); */ | |
| + | background-repeat:no-repeat; | ||
| + | background-position-x:right; | ||
| + | padding-left:3px; | ||
| + | padding-right:3px; | ||
| + | height:18px; | ||
| + | font-size:11px; | ||
| + | width:70px; | ||
| + | } | ||
| + | #buttonBackpropagation{ | ||
| + | border: 0; | ||
| + | width: 162.5px; | ||
| + | height: 155px; | ||
| + | background: url(https://static.igem.org/mediawiki/2019/d/d1/T--SEU--backpropagation.png); | ||
| + | background-repeat:no-repeat; | ||
| + | background-size: 100%; | ||
| + | border: 0px solid #4abe43; | ||
| + | /*border-radius: 50%;*/ | ||
| + | } | ||
| + | #buttonInputLayer{ | ||
| + | border: 0; | ||
| + | width: 162.5px; | ||
| + | height: 155px; | ||
| + | background: url(https://static.igem.org/mediawiki/2019/7/79/T--SEU--inputLayer.png); | ||
| + | background-repeat:no-repeat; | ||
| + | background-size: 100%; | ||
| + | border: 0px solid #4abe43; | ||
| + | /*border-radius: 50%;*/ | ||
| + | } | ||
| + | #buttonActivation{ | ||
| + | border: 0; | ||
| + | width: 162.5px; | ||
| + | height: 155px; | ||
| + | background: url(https://static.igem.org/mediawiki/2019/c/c7/T--SEU--activation.png); | ||
| + | background-repeat:no-repeat; | ||
| + | background-size: 100%; | ||
| + | border: 0px solid #4abe43; | ||
| + | /*border-radius: 50%;*/ | ||
| + | } | ||
| + | </style> | ||
| − | < | + | <meta charset="utf-8"> |
| − | + | <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
| − | + | <meta name="description" content=""> | |
| + | <meta name="author" content=""> | ||
| + | <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_CSS2?action=raw&ctype=text/css" rel="stylesheet" type="text/css"> | ||
| − | + | <header id="header"> | |
| − | + | <div class="container-fluid"style="position:fixed;"> | |
| − | + | <div class="navbar"> | |
| − | + | <a href="https://2019.igem.org/Team:SEU" id="logo" title="SEU"> | |
| + | SEU | ||
| + | </a> | ||
| + | <div class="navigation-row"> | ||
| + | <nav id="navigation"> | ||
| + | <button type="button" class="navbar-toggle"> <i class="fa fa-bars"></i> </button> | ||
| + | <div class="nav-box navbar-collapse"> | ||
| + | <ul class="navigation-menu nav navbar-nav navbars" id="nav"> | ||
| + | <li><a href="https://2019.igem.org/Team:SEU"> Home </a></li> | ||
| + | <li><a href="https://2019.igem.org/Team:SEU/Team"> Team </a> | ||
| + | <div class="popList"> | ||
| + | <a href="https://2019.igem.org/Team:SEU/Team">Team Members</a> | ||
| + | <a href="https://2019.igem.org/Team:SEU/Collaborations">Collaborations</a> | ||
| + | </div> | ||
| + | </li> | ||
| + | <li data-menuanchor="slide02" class="active"><a href="https://2019.igem.org/Team:SEU/Description"> Project </a> | ||
| + | <div class="popList"> | ||
| + | <a href="https://2019.igem.org/Team:SEU/Description">Description</a> | ||
| + | <a href="https://2019.igem.org/Team:SEU/Design">Design</a> | ||
| + | <a href="https://2019.igem.org/Team:SEU/Experiments">Experiments</a> | ||
| + | <a href="https://2019.igem.org/Team:SEU/Notebook">Notebook</a> | ||
| + | <a href="https://2019.igem.org/Team:SEU/Contribution">Contribution</a> | ||
| + | <a href="https://2019.igem.org/Team:SEU/Results">Results</a> | ||
| + | <a href="https://2019.igem.org/Team:SEU/Demonstrate">Demonstrate</a> | ||
| + | <a href="https://2019.igem.org/Team:SEU/Improve">Improve</a> | ||
| + | <a href="https://2019.igem.org/Team:SEU/Attributions">Attributions</a> | ||
| + | </div> | ||
| + | </li> | ||
| + | <li><a href="https://2019.igem.org/Team:SEU/Parts"> Parts </a> | ||
| + | <div class="popList"> | ||
| + | <a href="https://2019.igem.org/Team:SEU/Parts">Parts Overview</a> | ||
| + | <a href="https://2019.igem.org/Team:SEU/Basic_Part">Basic Parts</a> | ||
| + | <a href="https://2019.igem.org/Team:SEU/Composite_Part">Composite Parts</a> | ||
| + | <a href="https://2019.igem.org/Team:SEU/Part_Collection">Part Collection</a> | ||
| + | </div> | ||
| + | </li> | ||
| + | <li><a href="https://2019.igem.org/Team:SEU/Safety"> Safety </a></li> | ||
| + | <li><a href="https://2019.igem.org/Team:SEU/Human_Practices">Human Practices</a> | ||
| + | <div class="popList"> | ||
| + | <a href="https://2019.igem.org/Team:SEU/Human_Practices">Human Practices</a> | ||
| + | <a href="https://2019.igem.org/Team:SEU/Public_Engagement">Public Engagement</a> | ||
| + | </div> | ||
| + | </li> | ||
| + | <li><a href="https://2019.igem.org/Team:SEU/Entrepreneurship"> Awards </a> | ||
| + | <div class="popList"> | ||
| + | <a href="https://2019.igem.org/Team:SEU/Entrepreneurship">Entrepreneurship</a> | ||
| + | <a href="https://2019.igem.org/Team:SEU/Hardware">Hardware</a> | ||
| + | <a href="https://2019.igem.org/Team:SEU/Measurement">Measurement</a> | ||
| + | <a href="https://2019.igem.org/Team:SEU/Model">Model</a> | ||
| + | <a href="https://2019.igem.org/Team:SEU/Plant">Plant</a> | ||
| + | <a href="https://2019.igem.org/Team:SEU/Software">Software</a> | ||
| + | </div> | ||
| + | </li> | ||
| + | <li><a href="https://igem.org/2019_Judging_Form?team=SEU">Judging Form</a></li> | ||
| + | </ul> | ||
| + | </div> | ||
| + | </nav> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | </header> | ||
| − | + | <video autoplay muted loop id="BGVideo"> | |
| − | + | <source src="https://static.igem.org/mediawiki/2019/b/bf/T--SEU--BGVideo.mp4" type="video/mp4"> | |
| − | + | </video> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | <div id="fullpage" class="fullpage-default"> | |
| − | + | <div class="section animated-row" data-section="slide02"> | |
| − | + | <div class="section-inner"> | |
| − | + | <div class="about-section"> | |
| − | + | <div class="row justify-content-center"> | |
| + | <div class="col-md-8 wide-col-laptop"> | ||
| + | <div class="row"> | ||
| + | <div class="row justify-content-center"> | ||
| + | <div class="col-md-10"> | ||
| + | <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>. </p> | ||
| + | <p align="left">By cliking on the three buttons below the <b>Number</b> frame, both reactions and sequences utilized in the three parts of the neuron will be shown. In the result diagram below, topology of DNA sequences will be shown on the left and sequences of all single strand DNA will be shown on the right.</p> | ||
| + | <img src="https://static.igem.org/mediawiki/2019/a/a8/T--SEU--tool.png" style="background-color: transparent;width:50%"><br><br> | ||
| + | <center> | ||
| + | Input Number: | ||
| + | <input type="text" id="number" name="number" value=""> | ||
| + | <button onclick="clearCanvas();draw();" type="submit">Submit</button><br><br> | ||
| + | <button onclick="clearCanvas();drawWeightedSum([50,50]);showSeq();" type="button" id="buttonInputLayer"></button> | ||
| + | <button onclick="clearCanvas();drawSubNeuron([50,50]);showSeq();" type="subNeuron" id="buttonActivation"></button> | ||
| + | <button onclick="clearCanvas();drawBackprop([50,50]);showSeq();" type="button" id="buttonBackpropagation"></button><br> | ||
| + | </center> | ||
| + | </div> | ||
| + | <div class="col-md-10"> | ||
| + | <body> | ||
| − | + | <center> | |
| − | + | <div class="diagramWhole"> | |
| − | + | <div class="diagram" id="words"> | |
| − | + | <canvas id="canvas" width="1000" height="10000"></canvas> | |
| + | <!-- <script type="text/javascript">draw();</script> --> | ||
| − | + | </div> | |
| + | <div class="sequence" id="sequence"> | ||
| + | <!-- <canvas id="seqCanvas" width="200" height="20000"></canvas> --> | ||
| + | <!-- <script type="text/javascript">draw();</script> --> | ||
| − | </body> | + | </div> |
| + | </div> | ||
| + | </center> | ||
| + | </body> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class="col-md-10"> | ||
| + | <figure class="about-img animate" data-animate="fadeInUp"><img src="https://static.igem.org/mediawiki/2019/5/5b/T--SEU--descrip.png" class="rounded" alt=""></figure> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <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="mainMess.js" type="text/javascript"></script> --> | ||
</html> | </html> | ||
Revision as of 11:15, 22 September 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.
By cliking on the three buttons below the Number frame, both reactions and sequences utilized in the three parts of the neuron will be shown. In the result diagram below, topology of DNA sequences will be shown on the left and sequences of all single strand DNA will be shown on the right.
