Difference between revisions of "Team:SEU/Software"

Line 1: Line 1:
 +
{{SEU/Head}}
 
<html>
 
<html>
<!-- 解决官网bug的 CSS -->
 
 
<style>
 
<style>
        /*消除官网坑爹样式*/
 
        body {
 
            margin-top:-6px;
 
            height: 100%;
 
            width: 100%;
 
        }
 
        #HQ_page p {
 
            font-size:16px;
 
            font-family:"微软雅黑";
 
        }
 
        #globalWrapper{
 
            margin: 0;
 
            padding: 0;
 
        }
 
        #content{
 
            width: 100%;
 
            padding: 0;
 
            /*margin: -12px 0 0;*/
 
        }
 
        #top_title{
 
            display: none;
 
        }
 
        #sideMenu{
 
            display: none;
 
        }
 
      #content,
 
      .vs-content,
 
      .vs-wrapper section {
 
        background-color: transparent !important;
 
      }
 
 
       .diagramWhole{
 
       .diagramWhole{
 
             width:100%;
 
             width:100%;
Line 127: Line 97:
 
         }
 
         }
 
</style>
 
</style>
 
 
     <meta charset="utf-8">
 
     <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://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">
 
 
 
 
        <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 id="fullpage" class="fullpage-default">
             <div class="section animated-row" data-section="slide02">
+
             <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 class="col-md-10 wide-col-laptop">
+
                             <div>
 
                                 <div class="row">
 
                                 <div class="row">
                                     <div class="col-md-10">
+
                                     <div class="row justify-content-center">
                                         <br><br><br><br>
+
                                         <div>
                                        <h1>User Instruction</h1>
+
                                            <div class="about-contentbox">
                                        <p align="left">This tool is developed to generate DNA-based neural networks and corresponding DNA sequences. We simply provide the reactions that are required in a single neuron, as a layer of neural network can be directly implemented by combining each neuron.</p>
+
                                                <div>
                                        <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 shown in the lower diagram. Users can also click the <b>Download Sequences</b> button to download the generated sequences as a .txt file.</p>
+
                                                    <br><br><br><br>
                                        <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>
+
                                                    <h1>User Instruction</h1>
 +
                                                    <p align="left">This tool is developed to generate DNA-based neural networks and corresponding DNA sequences. We simply provide the reactions that are required in a single neuron, as a layer of neural network can be directly implemented by combining each neuron.</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 shown 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>Our theory is able to construct a neuron with arbitrary inputs. However, due to the limitation of computation capacity of web browsers, we limit the number of inputs of each neuron to 8 (generation of a DNA-based neuron might take 0-20 seconds depending on the input size).</p>
+
                                                    <p>Our theory is able to construct a neuron with arbitrary inputs. However, due to the limitation of computation capacity of web browsers, we limit the number of inputs of each neuron to 8 (generation of a DNA-based neuron might take 0-20 seconds depending on the input size).</p>
                                        <img src="https://static.igem.org/mediawiki/2019/a/a8/T--SEU--tool.png" style="background-color: transparent;width:80%"><br><br>
+
                                                    <img src="https://static.igem.org/mediawiki/2019/a/a8/T--SEU--tool.png" style="background-color: transparent;width:80%"><br><br>
                                        <center>
+
                                                    <center>
                                        Number:
+
                                                      Number:
                                        <input type="text" id="number" name="number" value="">
+
                                                      <input type="text" id="number" name="number" value="">
                                        <button onclick="clearCanvas();draw();showSeq();" type="submit">Submit</button><br><br>
+
                                                      <button onclick="clearCanvas();draw();showSeq();" type="submit">Submit</button><br><br>
                                        <div id="alreadySubmit"></div>
+
                                                      <div id="alreadySubmit"></div>
                                        <button onclick="clearCanvas();drawWeightedSum([2*DNAseperate,2*DNAseperate]);" class="buttonInputLayer">Click to show: Weighted Sum</button>
+
                                                      <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();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>
+
                                                      <button onclick="clearCanvas();drawBackprop([2*DNAseperate,2*DNAseperate]);" class="buttonBackpropagation">Click to show: Backpropagation</button><br>
                                        </center>
+
                                                  </center>
                                    </div>
+
                                                </div>
                                    <div class="col-md-10">
+
                                                <div class="col-md-10">
                                    <body>
+
                                                    <body>
  
                                        <center>
+
                                                      <center>
 
                                              
 
                                              
                                                <div class="diagram" id="words">
+
                                                          <div class="diagram" id="words">
                                                    <canvas id="canvas"  width="1700" height="25000"></canvas><br>
+
                                                              <canvas id="canvas"  width="1700" height="25000"></canvas><br>
 
                                                     <!-- <script type="text/javascript">draw();</script> -->
 
                                                     <!-- <script type="text/javascript">draw();</script> -->
  
                                                </div>
+
                                                          </div>
  
                                                <button onclick="windowSeq();">Download Sequences</button>
+
                                                          <button onclick="windowSeq();">Download Sequences</button>
                                                <div class="sequence" id="sequence">
+
                                                          <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>
+
                                                          </div>
 
                                              
 
                                              
                                        </center>
+
                                                      </center>
                                    </body>
+
                                                  </body>
                                   
+
                                              </div>
                                    </div>
+
                                          </div>
                                   
+
                                      </div>
 
                                   </div>                       
 
                                   </div>                       
                                </div>
+
                              </div>
                            </div>
+
                          </div>
                        </div>
+
                      </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/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>-->
 
     <!--<script src="mainMess.js" type="text/javascript"></script>-->
 
</html>
 
</html>

Revision as of 05:07, 3 October 2019

Template:SEU/Head





User Instruction

This tool is developed to generate DNA-based neural networks and corresponding DNA sequences. We simply provide the reactions that are required in a single neuron, as a layer of neural network can be directly implemented by combining each neuron.

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 shown 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.

Our theory is able to construct a neuron with arbitrary inputs. However, due to the limitation of computation capacity of web browsers, we limit the number of inputs of each neuron to 8 (generation of a DNA-based neuron might take 0-20 seconds depending on the input size).



Number: