Difference between revisions of "Team:SEU/tool"

Line 34: Line 34:
 
       .diagramWhole{
 
       .diagramWhole{
 
             width:100%;
 
             width:100%;
             height:620px;
+
             height:920px;
 
             border:1px solid #666;
 
             border:1px solid #666;
 
             background:#fff;
 
             background:#fff;
Line 43: Line 43:
 
         }
 
         }
 
       .diagram{
 
       .diagram{
             width:100%;
+
             width:1320px;
             height:620px;
+
             height:920px;
 
             border:1px solid #666;
 
             border:1px solid #666;
 
             background:#fff;
 
             background:#fff;
 
             margin:10px auto 0;
 
             margin:10px auto 0;
 
             overflow:auto;
 
             overflow:auto;
             float: left;
+
             float: center;
 
         }
 
         }
 
         .sequence{
 
         .sequence{
             width:100%;
+
             width:1320px;
 
             height:620px;
 
             height:620px;
 
             border:1px solid #666;
 
             border:1px solid #666;
Line 58: Line 58:
 
             margin:10px auto 0;
 
             margin:10px auto 0;
 
             overflow:auto;
 
             overflow:auto;
             float: left;
+
             float: center;
 
              
 
              
 
         }
 
         }
Line 204: Line 204:
 
                                         Number:
 
                                         Number:
 
                                         <input type="text" id="number" name="number" value="">
 
                                         <input type="text" id="number" name="number" value="">
                                         <button onclick="clearCanvas();draw();" type="submit">Submit</button><br><br>
+
                                         <button onclick="clearCanvas();draw();showSeq();" type="submit">Submit</button><br><br>
                                         <button onclick="clearCanvas();drawWeightedSum([50,50]);showSeq();" type="button" id="buttonInputLayer"></button>
+
                                         <button onclick="clearCanvas();drawWeightedSum([2*DNAseperate,2*DNAseperate]);" type="button" id="buttonInputLayer"></button>
                                         <button onclick="clearCanvas();drawSubNeuron([50,50]);showSeq();" type="subNeuron" id="buttonActivation"></button>
+
                                         <button onclick="clearCanvas();drawSubNeuron([2*DNAseperate,2*DNAseperate]);" type="subNeuron" id="buttonActivation"></button>
                                         <button onclick="clearCanvas();drawBackprop([50,50]);showSeq();" type="button" id="buttonBackpropagation"></button><br>
+
                                         <button onclick="clearCanvas();drawBackprop([2*DNAseperate,2*DNAseperate]);" type="button" id="buttonBackpropagation"></button><br>
 
                                         </center>
 
                                         </center>
 
                                     </div>
 
                                     </div>
Line 216: Line 216:
 
                                              
 
                                              
 
                                                 <div class="diagram" id="words">
 
                                                 <div class="diagram" id="words">
                                                     <canvas id="canvas"  width="1200" height="10000"></canvas>
+
                                                     <canvas id="canvas"  width="2500" height="10000"></canvas><br>
 
                                                     <!-- <script type="text/javascript">draw();</script> -->
 
                                                     <!-- <script type="text/javascript">draw();</script> -->
  
 
                                                 </div>
 
                                                 </div>
 +
 
                                                 <button onclick="windowSeq();">Generate Sequence</button>
 
                                                 <button onclick="windowSeq();">Generate Sequence</button>
 
                                                 <div class="sequence" id="sequence">
 
                                                 <div class="sequence" id="sequence">

Revision as of 05:00, 24 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.



Number: