Difference between revisions of "Team:SEU/Software"

(Undo revision 338589 by YeZiwen (talk))
 
(118 intermediate revisions by 5 users not shown)
Line 1: Line 1:
 +
{{SEU/Header}}
 
<html>
 
<html>
−
<!-- 解决官网bug的 CSS -->
 
 
<style>
 
<style>
−
        /*消除官网坑爹样式*/
+
      .diagramWhole{
−
        body {
+
             width:100%;
−
             margin-top:-6px;
+
             height:920px;
−
             height: 100%;
+
             border:1px solid #666;
−
             width: 100%;
+
            background:#fff;
 +
            margin:10px auto 0;
 +
            overflow:auto;
 +
            float: center;
 +
 
 
         }
 
         }
−
        #HQ_page p {
+
      .diagram{
−
             font-size:16px;
+
             /*width:1320px;*/
−
             font-family:"微软雅黑";
+
            width:100%;
 +
            height:920px;
 +
            border:1px solid #666;
 +
            background:#fff;
 +
            margin:10px auto 0;
 +
            overflow:auto;
 +
             float: center;
 
         }
 
         }
−
         #globalWrapper{
+
         .sequence{
−
             margin: 0;
+
            /*width:1320px;*/
−
             padding: 0;
+
            width:100%;
 +
            height:620px;
 +
            border:1px solid #666;
 +
            background:#fff;
 +
             margin:10px auto 0;
 +
             overflow:auto;
 +
            float: center;
 +
 
 
         }
 
         }
−
         #content{
+
         .inputDiagram {
−
             width: 100%;
+
             border:0px;
−
             padding: 0;
+
            /*background-image:url(images/long-input.png);  */
−
             margin: -12px 0 0;
+
            background-repeat:no-repeat;
 +
            background-position-x:right;
 +
             padding-left:3px;
 +
             padding-right:3px;
 +
            height:18px;
 +
            font-size:11px;
 +
            width:70px;
 
         }
 
         }
−
         #top_title{
+
         .buttonBackpropagation{
−
            display: none;
+
          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;
 +
          font-size: 0px;
 +
          cursor: pointer;
 +
          /*border-radius: 50%;*/
 
         }
 
         }
−
         #sideMenu{
+
         .buttonBackpropagation:hover{
−
            display: none;
+
        border: 9px;
 +
          background: none;
 +
          font-size: 20px;
 +
          color: #ffffff;
 +
      }
 +
        .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;
 +
          font-size: 0px;
 +
          background-size: 100%;
 +
          border: 0px solid #4abe43;
 +
          cursor: pointer;
 +
          /*border-radius: 50%;*/
 +
        }
 +
        .buttonInputLayer:hover{
 +
        background: none;
 +
          font-size: 20px;
 +
          color: #ffffff;
 +
        }
 +
        .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;
 +
          font-size: 0px;
 +
          background-size: 100%;
 +
          border: 0px solid #4abe43;
 +
          cursor: pointer;
 +
          /*border-radius: 50%;*/
 +
        }
 +
        .buttonActivation:hover{
 +
          background: none;
 +
          font-size: 20px;
 +
          color: #ffffff;
 
         }
 
         }
−
      #content,
 
−
      .vs-content,
 
−
      .vs-wrapper section {
 
−
        background-color: transparent !important;
 
−
      }
 
−
 
 
</style>
 
</style>
−
    <!-- Mobile Specific Metas================================================== -->
 
−
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 
  
−
     <!-- CSS==================================================================== -->
+
     <meta charset="utf-8">
−
  <link rel="stylesheet" href="https://2019.igem.org/Template:SEU/CSS?action=raw&ctype=text/css"/>
+
    <link href="https://2019.igem.org/Template:SEU/Home_CSS?action=raw&ctype=text/css" rel="stylesheet" type="text/css">
−
        <link rel="stylesheet" href="https://2019.igem.org/Template:SEU/STYLE?action=raw&ctype=text/css"/>
+
    <link href="https://2019.igem.org/Template:SEU/Home_CSS2?action=raw&ctype=text/css" rel="stylesheet" type="text/css">
  
−
    <!-- Custom Fonts=========================================================== -->
 
−
        <link href="https://2019.igem.org/Template:SEU/Font?action=raw&ctype=text/css" rel="stylesheet" type="text/css">
 
−
<script src="https://2019.igem.org/Template:SEU/JS?action=raw&ctype=text/css" type="text/javascript"></script>
 
  
−
    <!-- Style_CSS============================================================== -->
+
        <div id="fullpage" class="fullpage-default">
−
<div class="wrap-body">
+
            <div>
−
<div class="header">
+
                <div class="section-inner">
−
<div id='cssmenu' >
+
                    <div class="about-section">
−
<ul>
+
                        <div class="row justify-content-center">
−
  <li class='has-sub'><a href='https://2019.igem.org/Team:SEU'><span>Home</span></a></li>
+
                            <div class="col-md-6">
−
  <li class=' has-sub'><a href='https://2019.igem.org/Team:SEU/Team'><span>TEAM</span></a>
+
                                <div class="row">
−
  <ul>
+
                                    <div class="col-md-6.col-md-offset-3">
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Team'><span>Team Members</span></a>
+
                                        <br><br><br><br>
−
</li>
+
                                        <h1>User Instruction</h1>
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Collaborations'><span>Collaborations</span></a>
+
                                        <p><font size="4">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.</font></p>
−
</li>
+
                                        <p><font size="4">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.</font></p>
−
  </ul>
+
                                        <p><font size="4">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.</font></p>
−
  </li>
+
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Description'><span>PROJECT</span></a>
+
−
<ul>
+
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Description'><span>Description</span></a>
+
−
</li>
+
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Design'><span>Design</span></a>
+
−
</li>
+
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Experiments'><span>Experiment</span></a>
+
−
</li>
+
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Notebook'><span>Notebook</span></a>
+
−
</li>
+
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Contribution'><span>Contribution</span></a>
+
−
</li>
+
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Results'><span>Results</span></a>
+
−
</li>
+
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Demonstrate'><span>Demonstrate</span></a>
+
−
</li>
+
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Improve'><span>Improve</span></a>
+
−
</li>
+
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Attributions'><span>Attributions</span></a>
+
−
</li>
+
−
</ul>
+
−
</li>
+
−
  <li class=' has-sub'><a href='https://2019.igem.org/Team:SEU/Parts'><span>PARTS</span></a>
+
−
<ul>
+
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Parts'><span>Parts Overview</span></a>
+
−
</li>
+
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Basic_Part'><span>Basic Parts</span></a>
+
−
</li>
+
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Composite_Part'><span>Composite Parts</span></a>
+
−
</li>
+
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Part_Collection'><span>Part Collection</span></a>
+
−
</li>
+
−
</ul>
+
−
</li>
+
−
  <li><a href='https://2019.igem.org/Team:SEU/Safety'><span>SAFETY</span></a></li>
+
−
  <li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Human_Practices'><span>HUMAN PRACTICES</span></a>
+
−
<ul>
+
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Human_Practices'><span>Human Practices</span></a>
+
−
</li>
+
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Public_Engagement'><span>Education & Engagement</span></a>
+
−
</li>
+
−
</ul>
+
−
</li>
+
−
<li class="active"><a href='https://2019.igem.org/Team:SEU/Entrepreneurship'><span>AWARDS</span></a>
+
−
<ul>
+
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Entrepreneurship'><span>Entrepreneurship</span></a>
+
−
</li>
+
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Hardware'><span>Hardware</span></a>
+
−
</li>
+
−
<li class=' has-sub'><a href='https://2019.igem.org/Team:SEU/Measurement'><span>Measurement</span></a>
+
−
</li>
+
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Model'><span>Model</span></a>
+
−
</li>
+
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Plant'><span>Plant</span></a>
+
−
</li>
+
−
<li class='has-sub'><a href='https://2019.igem.org/Team:SEU/Software'><span>Software</span></a>
+
−
</li>
+
−
</ul>
+
−
</li>
+
−
<li><a href="https://igem.org/2019_Judging_Form?team=SEU"><span>JUDGING FORM</span></a>
+
−
</ul
+
−
></div>
+
−
</div>
+
−
<!--////////////////////////////////////Container-->
+
−
  <section id="container">
+
−
    <div class="wrap-container clearfix">
+
−
      <div id="main-content">
+
−
        <div class="wrap-content">
+
−
          <article>
+
−
            <div class="art-header">
+
−
              <h1 class="entry-title">Software</h1>
+
−
            </div>
+
−
            <div class="art-content">
+
  
−
              <div class="excerpt"><p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum exercitation ullamco laboris nisi ut aliquip.</p></div>
+
                                        <p><font size="4">Our theory is able to construct a neuron with arbitrary number of 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).</font></p>
−
              <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
+
                                        <center>
−
              <blockquote><p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet vultatup duista.</p></blockquote>
+
                                        <img src="https://static.igem.org/mediawiki/2019/a/a8/T--SEU--tool.png" style="background-color: transparent;width:80%"><br><br>
−
              <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril.</p>
+
                                        </center>
−
              <h2>Heading 1</h2>
+
                                        <center>
−
              <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse lorem ipsum dolor sit amet.</p>
+
                                        Number:
−
              <h2>Heading 2</h2>
+
                                        <input type="text" id="number" name="number" value="">
−
              <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. At vero eos et accusam et justo.</p>
+
                                        <button onclick="clearCanvas();draw();showSeq();" type="submit">Submit</button><br><br>
−
              <h2>Heading 3</h2>
+
                                        <div id="alreadySubmit"></div>
−
              <p>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum hendrerit in vulputate velit esse molestie.</p>
+
                                        <button onclick="clearCanvas();drawWeightedSum([2*DNAseperate,2*DNAseperate]);" class="buttonInputLayer">Click to show: Weighted Sum</button>
−
              <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
+
                                        <button onclick="clearCanvas();drawSubNeuron([2*DNAseperate,2*DNAseperate]);" class="buttonActivation">Click to show: Activation</button>
−
              <p><code>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</code></p>
+
                                        <button onclick="clearCanvas();drawBackprop([2*DNAseperate,2*DNAseperate]);" class="buttonBackpropagation">Click to show: Backpropagation</button><br>
−
              <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+
                                        </center>
−
              <div class="note">
+
                                    </div>
−
                <ol>
+
                                </div>
−
                <li>Lorem ipsum</li>
+
                            </div>
−
                <li>Sit amet vultatup nonumy</li>
+
                        </div>
−
                <li>Duista sed diam</li>
+
                    </div>
−
                </ol>
+
                </div>
−
                <div class="clear"></div>
+
−
              </div>
+
−
              <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+
−
              <p>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores.</p>
+
 
             </div>
 
             </div>
−
          </article>
+
        </div>      
−
         </div>
+
         <div id="fullpage" class="fullpage-default">
−
      </div>
+
            <div>
−
    </div>
+
                <div class="section-inner">
−
  </section>
+
                    <div class="about-section">
−
 
+
                        <div class="row justify-content-center">
−
 
+
                            <div class="col-md-10">
−
  <section class="content-box boxstyle-1 box-3">
+
                                <div class="row">
−
  <div class="zerogrid">
+
                                    <div class="col-md-12">
−
  <div class="row wrap-box"><!--Start Box-->
+
                                          <center>
−
  <div class="row">
+
                                              <div class="diagram" id="words">
−
  <div class="col-4-4">
+
                                                  <canvas id="canvas"  width="1700" height="25000"></canvas><br>
−
  <div class="wrap-col post">
+
                                                      <!-- <script type="text/javascript">draw();</script> -->
−
  <a class="button" href="a.html">Return to TEAM</a>
+
                                              </div>
−
  </div>
+
                                              <button onclick="windowSeq();">Download Sequences</button>
−
  </div>
+
                                              <div class="sequence" id="sequence">
−
  </div>
+
                                                    <!--  <canvas id="seqCanvas"  width="200" height="20000"></canvas> -->
−
  </div>
+
                                                      <!-- <script type="text/javascript">draw();</script> -->
−
  </div>
+
                                              </div>
−
  </section>
+
                                          </center>
−
<hr class="line">
+
                                    </div>
−
</div>
+
                                </div>                    
−
<script>
+
                            </div>
−
const el=document.getElementById('my-real-content');
+
                        </div>
−
document.body.appendChild(el);
+
                    </div>
−
</script>
+
                </div>
−
 
+
            </div>
 +
        </div>  
 +
    <script src="https://2019.igem.org/Template:SEU/toolJS?action=raw&ctype=text/javascript" type="text/javascript"></script>
 
</html>
 
</html>

Latest revision as of 06:35, 19 October 2019









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 number of 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: