Difference between revisions of "Team:SEU/Software"

(Prototype team page)
 
(Undo revision 338589 by YeZiwen (talk))
 
(119 intermediate revisions by 5 users not shown)
Line 1: Line 1:
−
{{SEU}}
+
{{SEU/Header}}
 
<html>
 
<html>
 +
<style>
 +
      .diagramWhole{
 +
            width:100%;
 +
            height:920px;
 +
            border:1px solid #666;
 +
            background:#fff;
 +
            margin:10px auto 0;
 +
            overflow:auto;
 +
            float: center;
  
 +
        }
 +
      .diagram{
 +
            /*width:1320px;*/
 +
            width:100%;
 +
            height:920px;
 +
            border:1px solid #666;
 +
            background:#fff;
 +
            margin:10px auto 0;
 +
            overflow:auto;
 +
            float: center;
 +
        }
 +
        .sequence{
 +
            /*width:1320px;*/
 +
            width:100%;
 +
            height:620px;
 +
            border:1px solid #666;
 +
            background:#fff;
 +
            margin:10px auto 0;
 +
            overflow:auto;
 +
            float: center;
  
−
<div class="column full_size judges-will-not-evaluate">
+
        }
−
<h3>★  ALERT! </h3>
+
        .inputDiagram {
−
<p>This page is used by the judges to evaluate your team for the <a href="https://2019.igem.org/Judging/Medals">medal criterion</a> or <a href="https://2019.igem.org/Judging/Awards"> award listed below</a>. </p>
+
            border:0px;
−
<p> Delete this box in order to be evaluated for this medal criterion and/or award. See more information at <a href="https://2019.igem.org/Judging/Pages_for_Awards"> Instructions for Pages for awards</a>.</p>
+
            /*background-image:url(images/long-input.png);  */
−
</div>
+
            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;
 +
          font-size: 0px;
 +
          cursor: pointer;
 +
          /*border-radius: 50%;*/
 +
        }
 +
        .buttonBackpropagation:hover{
 +
        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;
 +
        }
 +
</style>
  
 +
    <meta charset="utf-8">
 +
    <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">
  
−
<div class="clear"></div>
 
  
 +
        <div id="fullpage" class="fullpage-default">
 +
            <div>
 +
                <div class="section-inner">
 +
                    <div class="about-section">
 +
                        <div class="row justify-content-center">
 +
                            <div class="col-md-6">
 +
                                <div class="row">
 +
                                    <div class="col-md-6.col-md-offset-3">
 +
                                        <br><br><br><br>
 +
                                        <h1>User Instruction</h1>
 +
                                        <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>
 +
                                        <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>
 +
                                        <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>
  
−
<div class="column full_size">
+
                                        <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>
−
<h1>Software</h1>
+
                                        <center>
−
</div>
+
                                        <img src="https://static.igem.org/mediawiki/2019/a/a8/T--SEU--tool.png" style="background-color: transparent;width:80%"><br><br>
−
<div class="column two_thirds_size">
+
                                        </center>
−
<h3>Best Software Tool Special Prize</h3>
+
                                        <center>
−
<p>Regardless of the topic, iGEM projects often create or adapt computational tools to move the project forward. Because they are born out of a direct practical need, these software tools (or new computational methods) can be surprisingly useful for other teams. Without necessarily being big or complex, they can make the crucial difference to a project's success. This award tries to find and honor such "nuggets" of computational work.
+
                                        Number:
−
 
+
                                        <input type="text" id="number" name="number" value="">
−
 
+
                                        <button onclick="clearCanvas();draw();showSeq();" type="submit">Submit</button><br><br>
−
<br><br>
+
                                        <div id="alreadySubmit"></div>
−
To compete for the <a href="https://2019.igem.org/Judging/Awards">Best Software Tool prize</a>, please describe your work on this page and also fill out the description on the <a href="https://2019.igem.org/Judging/Judging_Form">judging form</a>.
+
                                        <button onclick="clearCanvas();drawWeightedSum([2*DNAseperate,2*DNAseperate]);" class="buttonInputLayer">Click to show: Weighted Sum</button>
−
<br><br>
+
                                        <button onclick="clearCanvas();drawSubNeuron([2*DNAseperate,2*DNAseperate]);" class="buttonActivation">Click to show: Activation</button>
−
To be eligible, your software has to be documented and made available under an OSI approved open source license. You must also delete the alert box on the top of this page to be eligible for this prize.
+
                                        <button onclick="clearCanvas();drawBackprop([2*DNAseperate,2*DNAseperate]);" class="buttonBackpropagation">Click to show: Backpropagation</button><br>
−
</p>
+
                                        </center>
−
 
+
                                    </div>
−
 
+
                                </div>
−
</div>
+
                            </div>
−
 
+
                        </div>
−
<div class="column third_size">
+
                    </div>
−
<div class="highlight decoration_A_full">
+
                </div>
−
<h3> Inspiration </h3>
+
            </div>
−
<p>
+
        </div>      
−
Here are a few examples from previous teams:
+
        <div id="fullpage" class="fullpage-default">
−
</p>
+
            <div>
−
<ul>
+
                <div class="section-inner">
−
<li><a href="https://2016.igem.org/Team:BostonU_HW">2016 BostonU HW</a></li>
+
                    <div class="about-section">
−
<li><a href="https://2016.igem.org/Team:Valencia_UPV">2016 Valencia UPV</a></li>
+
                        <div class="row justify-content-center">
−
<li><a href="https://2014.igem.org/Team:Heidelberg/Software">2014 Heidelberg</a></li>
+
                            <div class="col-md-10">
−
<li><a href="https://2014.igem.org/Team:Aachen/Project/Measurement_Device#Software">2014 Aachen</a></li>
+
                                <div class="row">
−
</ul>
+
                                    <div class="col-md-12">
−
</div>
+
                                          <center>
−
</div>
+
                                              <div class="diagram" id="words">
−
 
+
                                                  <canvas id="canvas"  width="1700" 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> -->
 +
                                                      <!-- <script type="text/javascript">draw();</script> -->
 +
                                              </div>
 +
                                          </center>
 +
                                    </div>
 +
                                </div>                    
 +
                            </div>
 +
                        </div>
 +
                    </div>
 +
                </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: