Difference between revisions of "Team:HFUT-China/Design"

Line 1: Line 1:
 
<html>
 
<html>
   
+
 
    <head>
+
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      
+
 
        <title>Team:HFUT-China</title>
+
     <title>Team:HFUT-China</title>
      
+
 
        <link href="https://2017.igem.org/Template:HFUT-China/Safety/css/headerCss?action=raw&ctype=text/css" rel="stylesheet" />
+
     <link href="https://2017.igem.org/Template:HFUT-China/Safety/css/headerCss?action=raw&ctype=text/css" rel="stylesheet" />
        <link href="https://2017.igem.org/Template:HFUT-China/Safety/css/stylewikiCss?action=raw&ctype=text/css" rel="stylesheet"
+
    <link href="https://2017.igem.org/Template:HFUT-China/Safety/css/stylewikiCss?action=raw&ctype=text/css" rel="stylesheet"
        />
+
    />
        <link href="https://2017.igem.org/Template:HFUT-China/MainPage/css/styleCss?action=raw&ctype=text/css" rel="stylesheet" />
+
    <link href="https://2017.igem.org/Template:HFUT-China/MainPage/css/styleCss?action=raw&ctype=text/css" rel="stylesheet" />
        <style>
+
    <style>
            body {
+
        body {
                background: #f7f5e6;
+
            background: #f7f5e6;
            }
+
        }
            .algorithm-title{
+
 
               
+
        .algorithm-title {}
            }
+
    </style>
        </style>
+
</head>
    </head>
+
 
   
+
<center>
    <center>
+
    <div class="header" style="z-index:999;position:fixed;left:0px;top:16px;">
<div class="header" style="z-index:999;position:fixed;left:0px;top:16px;">
+
        <ul class="nav">
  <ul class="nav">
+
            <li>
    <li><a href="https://2017.igem.org/Team:HFUT-China">&nbsp;&nbsp;Main page&nbsp;&nbsp;</a></li>
+
                <a href="https://2017.igem.org/Team:HFUT-China">&nbsp;&nbsp;Main page&nbsp;&nbsp;</a>
    <li><a href="https://2017.igem.org/Team:HFUT-China/Description">&nbsp;&nbsp;Project&nbsp;<img src="https://static.igem.org/mediawiki/2017/5/53/Xia.png" width="12px";>&nbsp;&nbsp;</a>
+
            </li>
            <ul>
+
            <li>
          <li class="selfnav hef"><a href="https://2017.igem.org/Team:HFUT-China/Description"><font class="hef">Description</font></a></li>
+
                <a href="https://2017.igem.org/Team:HFUT-China/Description">&nbsp;&nbsp;Project&nbsp;
          <li class="selfnav hef"><a href="https://2017.igem.org/Team:HFUT-China/Design"><font class="hef">Design</font></a></li>
+
                    <img src="https://static.igem.org/mediawiki/2017/5/53/Xia.png" width="12px" ;>&nbsp;&nbsp;</a>
          <li class="selfnav hef"><a href="https://2017.igem.org/Team:HFUT-China/Contribution"><font class="hef">Contribution</font></a></li>
+
                <ul>
          <li class="selfnav hef"><a href="https://2017.igem.org/Team:HFUT-China/Demonstrate"><font class="hef">Demonstrate</font></a></li>
+
                    <li class="selfnav hef">
      </ul>
+
                        <a href="https://2017.igem.org/Team:HFUT-China/Description">
    </li>
+
                            <font class="hef">Description</font>
    <li><a href="https://2017.igem.org/Team:HFUT-China/Software">&nbsp;&nbsp;Software&nbsp;<img src="https://static.igem.org/mediawiki/2017/5/53/Xia.png" width="12px";>&nbsp;&nbsp;</a>
+
                        </a>
        <ul>
+
                    </li>
<li class="selfnav"><a href="https://2017.igem.org/Team:HFUT-China/Software"><font class="hef" color="#000">Software</font></a></li>
+
                    <li class="selfnav hef">
        <li class="selfnav"><a href="https://2017.igem.org/Team:HFUT-China/Model"><font class="hef" color="#000">Model</font></a></li>
+
                        <a href="https://2017.igem.org/Team:HFUT-China/Design">
        <li class="selfnav"><a href="https://2017.igem.org/Team:HFUT-China/Improve"><font class="hef" color="#000">Improve</font></a></li>
+
                            <font class="hef">Design</font>
        <li class="selfnav"><a href="https://2017.igem.org/Team:HFUT-China/Unit_Test"><font class="hef" color="#000">Unit Test</font></a></li></ul>
+
                        </a>
    </li>
+
                    </li>
    <li><a href="https://2017.igem.org/Team:HFUT-China/Notebook">&nbsp;&nbsp;Documents&nbsp;<img src="https://static.igem.org/mediawiki/2017/5/53/Xia.png" width="12px";>&nbsp;&nbsp;</a>
+
                    <li class="selfnav hef">
        <ul>
+
                        <a href="https://2017.igem.org/Team:HFUT-China/Contribution">
        <li class="selfnav"><a href="https://2017.igem.org/Team:HFUT-China/Notebook"><font class="hef" color="#000">Notebook</font></a></li>
+
                            <font class="hef">Contribution</font>
        <li class="selfnav"><a href="https://2017.igem.org/Team:HFUT-China/Medals"><font class="hef" color="#000">Medals</font></a></li>
+
                        </a>
<li class="selfnav"><a href="https://2017.igem.org/Team:HFUT-China/Safety"><font class="hef" color="#000">Safety</font></a></li>
+
                    </li>
        <li class="selfnav"><a href="https://2017.igem.org/Team:HFUT-China/User_guide"><font class="hef" color="#000">User guide</font></a></li>
+
                    <li class="selfnav hef">
        </ul>
+
                        <a href="https://2017.igem.org/Team:HFUT-China/Demonstrate">
    </li>
+
                            <font class="hef">Demonstrate</font>
    <li><a href="https://2017.igem.org/Team:HFUT-China/Team">Team&nbsp;<img src="https://static.igem.org/mediawiki/2017/5/53/Xia.png" width="12px";></a>
+
                        </a>
        <ul>
+
                    </li>
        <li class="selfnav"><a href="https://2017.igem.org/Team:HFUT-China/Team"><font class="hef" color="#000">Members</font></a></li>
+
                </ul>
<li class="selfnav"><a href="https://2017.igem.org/Team:HFUT-China/Attributions"><font class="hef" color="#000">Attributions</font></a></li>
+
            </li>
        <li class="selfnav"><a href="https://2017.igem.org/Team:HFUT-China/Collaborations"><font class="hef" color="#000">Collaborations</font></a></li>
+
            <li>
     
+
                <a href="https://2017.igem.org/Team:HFUT-China/Software">&nbsp;&nbsp;Software&nbsp;
        </ul>
+
                    <img src="https://static.igem.org/mediawiki/2017/5/53/Xia.png" width="12px" ;>&nbsp;&nbsp;</a>
    </li>
+
                <ul>
    <li><a href="https://2017.igem.org/Team:HFUT-China/HP/Silver">&nbsp;&nbsp;Human practice&nbsp;<img src="https://static.igem.org/mediawiki/2017/5/53/Xia.png" width="12px";>&nbsp;&nbsp;</a>
+
                    <li class="selfnav">
<ul>
+
                        <a href="https://2017.igem.org/Team:HFUT-China/Software">
        <li class="selfnav"><a href="https://2017.igem.org/Team:HFUT-China/HP/Silver"><font class="hef" color="#000">Silver HP</font></a></li>
+
                            <font class="hef" color="#000">Software</font>
        <li class="selfnav"><a href="https://2017.igem.org/Team:HFUT-China/HP/Gold_Integrated"><font class="hef" color="#000">Integrated<br>and Gold</font></a></li>
+
                        </a>
        </ul>
+
                    </li>
    </li>
+
                    <li class="selfnav">
<li><a href="https://igem.org/2017_Judging_Form?id=2466" target="blank">&nbsp;&nbsp;Judging Form&nbsp;&nbsp;</a></li>
+
                        <a href="https://2017.igem.org/Team:HFUT-China/Model">
  </ul>
+
                            <font class="hef" color="#000">Model</font>
</div>
+
                        </a>
   
+
                    </li>
        <div style="height:190px"></div>
+
                    <li class="selfnav">
        <div class="title">
+
                        <a href="https://2017.igem.org/Team:HFUT-China/Improve">
            <b>
+
                            <font class="hef" color="#000">Improve</font>
                <font color="#555555">Design</font>&nbsp;
+
                        </a>
                <!-- <font color="#0089a7">Guide</font> -->
+
                    </li>
                <div class="p">
+
                    <li class="selfnav">
                    <div class="q" style="line-height: 2.5;">
+
                        <a href="https://2017.igem.org/Team:HFUT-China/Unit_Test">
                        <br>
+
                            <font class="hef" color="#000">Unit Test</font>
                        <br>BioDesigner Dolphin is a amazing search and design assistant. To make all those things happends, we spend
+
                        </a>
                        lots of time on designing every part, every detail about BioDesign. From the user interface, user experience
+
                    </li>
                        to the algorithm and every line of code behind them, we made all of them to be perfect.
+
                </ul>
                        <br>
+
            </li>
                        <br>
+
            <li>
                    </div>
+
                <a href="https://2017.igem.org/Team:HFUT-China/Notebook">&nbsp;&nbsp;Documents&nbsp;
                    <!-- <img src="https://static.igem.org/mediawiki/2017/a/ae/Index.png" width="79%" style="box-shadow: 0px 3px 19px #ddd;margin-top:30px;border-radius:20px;"> -->
+
                    <img src="https://static.igem.org/mediawiki/2017/5/53/Xia.png" width="12px" ;>&nbsp;&nbsp;</a>
 +
                <ul>
 +
                    <li class="selfnav">
 +
                        <a href="https://2017.igem.org/Team:HFUT-China/Notebook">
 +
                            <font class="hef" color="#000">Notebook</font>
 +
                        </a>
 +
                    </li>
 +
                    <li class="selfnav">
 +
                        <a href="https://2017.igem.org/Team:HFUT-China/Medals">
 +
                            <font class="hef" color="#000">Medals</font>
 +
                        </a>
 +
                    </li>
 +
                    <li class="selfnav">
 +
                        <a href="https://2017.igem.org/Team:HFUT-China/Safety">
 +
                            <font class="hef" color="#000">Safety</font>
 +
                        </a>
 +
                    </li>
 +
                    <li class="selfnav">
 +
                        <a href="https://2017.igem.org/Team:HFUT-China/User_guide">
 +
                            <font class="hef" color="#000">User guide</font>
 +
                        </a>
 +
                    </li>
 +
                </ul>
 +
            </li>
 +
            <li>
 +
                <a href="https://2017.igem.org/Team:HFUT-China/Team">Team&nbsp;
 +
                    <img src="https://static.igem.org/mediawiki/2017/5/53/Xia.png" width="12px" ;>
 +
                </a>
 +
                <ul>
 +
                    <li class="selfnav">
 +
                        <a href="https://2017.igem.org/Team:HFUT-China/Team">
 +
                            <font class="hef" color="#000">Members</font>
 +
                        </a>
 +
                    </li>
 +
                    <li class="selfnav">
 +
                        <a href="https://2017.igem.org/Team:HFUT-China/Attributions">
 +
                            <font class="hef" color="#000">Attributions</font>
 +
                        </a>
 +
                    </li>
 +
                    <li class="selfnav">
 +
                        <a href="https://2017.igem.org/Team:HFUT-China/Collaborations">
 +
                            <font class="hef" color="#000">Collaborations</font>
 +
                        </a>
 +
                    </li>
 +
 
 +
                </ul>
 +
            </li>
 +
            <li>
 +
                <a href="https://2017.igem.org/Team:HFUT-China/HP/Silver">&nbsp;&nbsp;Human practice&nbsp;
 +
                    <img src="https://static.igem.org/mediawiki/2017/5/53/Xia.png" width="12px" ;>&nbsp;&nbsp;</a>
 +
                <ul>
 +
                    <li class="selfnav">
 +
                        <a href="https://2017.igem.org/Team:HFUT-China/HP/Silver">
 +
                            <font class="hef" color="#000">Silver HP</font>
 +
                        </a>
 +
                    </li>
 +
                    <li class="selfnav">
 +
                        <a href="https://2017.igem.org/Team:HFUT-China/HP/Gold_Integrated">
 +
                            <font class="hef" color="#000">Integrated
 +
                                <br>and Gold</font>
 +
                        </a>
 +
                    </li>
 +
                </ul>
 +
            </li>
 +
            <li>
 +
                <a href="https://igem.org/2017_Judging_Form?id=2466" target="blank">&nbsp;&nbsp;Judging Form&nbsp;&nbsp;</a>
 +
            </li>
 +
        </ul>
 +
    </div>
 +
 
 +
    <div style="height:190px"></div>
 +
    <div class="title">
 +
        <b>
 +
            <font color="#555555">Design</font>&nbsp;
 +
            <!-- <font color="#0089a7">Guide</font> -->
 +
            <div class="p">
 +
                <div class="q" style="line-height: 2.5;">
 +
                    <br>
 +
                    <br>BioDesigner Dolphin is a amazing search and design assistant. To make all those things happends, we spend
 +
                    lots of time on designing every part, every detail about BioDesign. From the user interface, user experience
 +
                    to the algorithm and every line of code behind them, we made all of them to be perfect.
 +
                    <br>
 +
                    <br>
 
                 </div>
 
                 </div>
   
+
                <!-- <img src="https://static.igem.org/mediawiki/2017/a/ae/Index.png" width="79%" style="box-shadow: 0px 3px 19px #ddd;margin-top:30px;border-radius:20px;"> -->
   
+
            </div>
                <div style="margin-top: 90px;font-family: Light;">
+
 
                    <b>
+
 
                        <font color="#333" size="6px">
+
            <div style="margin-top: 90px;font-family: Light;">
                            <br>User Interface Design</font>
+
                <b>
                    </b>
+
                    <font color="#333" size="6px">
 +
                        <br>User Interface Design</font>
 +
                </b>
 +
            </div>
 +
 
 +
            <div class="p">
 +
                <div class="q" style="line-height: 2.5;">
 +
                    <br>
 +
                    <br> Before we designed the UI of the Biodesigner, we had to consider who will use our product. certainly,
 +
                    the user of the BioDesigner is who engage in synthetic biology work like designing biology devices. But
 +
                    it is a trouble that we have no idea for the thought of them. So we tried to contact other teams of iGEM
 +
                    and talked with them about requirement of this new tool. Then, we understood that they previous habit
 +
                    of synthetic biology work is consulting many document. That is troublesome and uncertain. They need a
 +
                    powerful platform to get clear and wide information. So BioDesigner is aimed to private lots of information
 +
                    and have a friendly interaction, and focus on overcoming any trouble in user experience.
 +
                    <br>
 +
                    <br> To make sure that user can have a suitable interaction as their expectation, there are four interfaces,
 +
                    search, project, system, gene relationship. The logic of interaction is very certain. We keep the consistency
 +
                    of visual style and interacting method, but it is certain difference between interfaces. So they can
 +
                    recognize it immediately when users enter a interface, and they do not feel confused after the interface
 +
                    changed.
 +
                    <br>
 +
                    <br> By the way, the design of Logo is based on a DNA shape in a unique angle. We design it in minimalism
 +
                    style, to make sure it can give people a deep impression, and hope it can apply in any kinds of instance.
 +
                    <br>
 +
                    <br>
 
                 </div>
 
                 </div>
   
+
            </div>
                 <div class="p">
+
 
                    <div class="q" style="line-height: 2.5;">
+
            <div style="margin-top: 90px;font-family: Light;">
                        <br>
+
                 <b>
                        <br> Before we designed the UI of the Biodesigner, we had to consider who will use our product. certainly,
+
                    <font color="#333" size="6px">
                        the user of the BioDesigner is who engage in synthetic biology work like designing biology devices. But
+
                        <br>Algorithm</font>
                        it is a trouble that we have no idea for the thought of them. So we tried to contact other teams of iGEM
+
                </b>
                        and talked with them about requirement of this new tool. Then, we understood that they previous habit
+
            </div>
                        of synthetic biology work is consulting many document. That is troublesome and uncertain. They need a
+
 
                        powerful platform to get clear and wide information. So BioDesigner is aimed to private lots of information
+
            <div class="p">
                        and have a friendly interaction, and focus on overcoming any trouble in user experience.
+
                <div class="q" style="line-height: 2.5;">
                        <br>
+
                    <span class="algorithm-title">1. Latent Dirichlet Allocation (LDA) model</span>
                        <br> To make sure that user can have a suitable interaction as their expectation, there are four interfaces,
+
                    <br>
                        search, project, system, gene relationship. The logic of interaction is very certain. We keep
+
                    <br> For the information of all teams under each track, we tried to let our computers “understand” it, and
                        the consistency of visual style and interacting method, but it is certain difference between interfaces. So
+
                    automatically classify it into groups. Conventional LDA model is used to explore keywords of themes among
                        they can recognize it immediately when users enter a interface, and they do not feel confused after the
+
                    documents, but here we regard it as an unsupervised classifier, and unsupervised means we don’t have
                        interface changed.
+
                    to provide any manually labeled data. As a result, it can give us clusters of documents, and documents
                        <br>
+
                    in the same cluster have the same theme.
                        <br> By the way, the design of Logo is based on a DNA shape in a unique angle. We design it in minimalism
+
                    <br>
                        style, to make sure it can give people a deep impression, and hope it can apply in any kinds of instance.
+
                    <br>
                        <br>
+
                    <span class="algorithm-title">2. TF-IDF model</span>
                        <br>
+
                    <br>
                     </div>
+
                    <br> TF-IDF refers to Term Frequency–Inverse Document Frequency. We used it to excavate the keywords of a
 +
                    document.
 +
                    <br>
 +
                    <br>
 +
                    <span class="algorithm-title">3. Word2Vec</span>
 +
                    <br>
 +
                    <br> Word2Vec plays an important role in our system. Word Vector is an effective and promising substitute
 +
                    for the conventionally used one-hot encoding method in NLP (Natural Language Processing). About one-hot
 +
                    encoding, take a sentence “I love you so much” for example. We want to find a vector to represent each
 +
                    word in this sentence. What one-hot does is that it assigns “1” to the entry in this vector according
 +
                    to the word’s position in the sentence. For example, “love” in one-hot is “0 1 0 0 0” and “so” is “0
 +
                    0 0 1 0”. Nonetheless, this kind of encoding does not contain the semantic meaning of a word. If we want
 +
                    to measure the semantic similarity between two words, unless these words are identical, the similarity
 +
                    will be zero. So, researchers proposed “Word Vector”, which is a vector representing the word’s semantic
 +
                    meaning. It takes the context of the word into consideration, and the effect turns out to be excellent.
 +
                    <br>
 +
                    <br> Thus, the similarity between two words can be easily measured using L2 norm. The whole process of calculating
 +
                     word vectors is through neural networks, and the detailed structure of it can be found here.
 +
 
 
                 </div>
 
                 </div>
   
+
            </div>
                <div style="margin-top: 90px;font-family: Light;">
+
 
                    <b>
+
            <div style="margin-top: 90px;font-family: Light;">
                        <font color="#333" size="6px">
+
                <b>
                            <br>Algorithm</font>
+
                    <font color="#333" size="6px">
                    </b>
+
                        <br>Web Pages</font>
 +
                </b>
 +
            </div>
 +
 
 +
            <div class="p">
 +
                <div class="q" style="line-height: 2.5;">
 +
                    <center>
 +
                        <img src="https://static.igem.org/mediawiki/2017/e/e6/FontEnd.jpeg" alt="" style="width:50%;">
 +
                    </center>
 +
                    <br>
 +
                    <br> For the web pages, we used the advanced HTML5 and CSS3 technology. By using media query, the pages can
 +
                    adapt to different type of screens. Also, we used bootstrap to make the page be responsive.
 +
 
 +
                    <br>
 
                 </div>
 
                 </div>
   
+
            </div>
                <div class="p">
+
 
                    <div class="q" style="line-height: 2.5;">
+
            <div style="margin-top: 90px;font-family: Light;">
                        <span class="algorithm-title">1. Latent Dirichlet Allocation (LDA) model</span>
+
                <b>
                         <br>
+
                    <font color="#333" size="6px">
                        <br> For the information of all teams under each track, we tried to let our computers “understand” it, and
+
                         <br>Server Side</font>
                        automatically classify it into groups. Conventional LDA model is used to explore keywords of themes among
+
                </b>
                        documents, but here we regard it as an unsupervised classifier, and unsupervised means we don’t have
+
            </div>
                        to provide any manually labeled data. As a result, it can give us clusters of documents, and documents
+
 
                        in the same cluster have the same theme.
+
            <div class="p">
                        <br>
+
                <div class="q" style="line-height: 2.5;">
                        <br>
+
                    <center>
                        <span class="algorithm-title">2. TF-IDF model</span>
+
                         <img src="https://static.igem.org/mediawiki/2017/3/38/BackEnd.png" alt="">
                        <br>
+
                    </center>
                        <br>
+
                    <br>
                        TF-IDF refers to Term Frequency–Inverse Document Frequency. We used it to excavate the keywords of a document.
+
                    <br> The speed of access and response are key factors in UX. To make the server response time as short as
                        <br>
+
                    it can be, we used lots of strategies. We use nginx as our server for its stability and high performance.
                        <br>
+
                    Also, by separating the static from the dynamic, the load on the server side can be balanced. For we
                         <span class="algorithm-title">3. Word2Vec</span>
+
                    use Django as the web framework and its multi threading feature, the server can also handle multiple
                        <br>
+
                    request simultaneously.
                        <br>
+
                     <br>
                        Word2Vec plays an important role in our system. Word Vector is an effective and promising substitute for the conventionally
+
                        used one-hot encoding method in NLP (Natural Language Processing). About one-hot encoding, take a sentence
+
                        “I love you so much” for example. We want to find a vector to represent each word in this sentence. What
+
                        one-hot does is that it assigns “1” to the entry in this vector according to the word’s position in the
+
                        sentence. For example, “love” in one-hot is “0 1 0 0 0” and “so” is “0 0 0 1 0”. Nonetheless, this kind
+
                        of encoding does not contain the semantic meaning of a word. If we want to measure the semantic similarity
+
                        between two words, unless these words are identical, the similarity will be zero. So, researchers proposed
+
                        “Word Vector”, which is a vector representing the word’s semantic meaning. It takes the context of the
+
                        word into consideration, and the effect turns out to be excellent.
+
                        <br>
+
                        <br> Thus, the similarity between two words can be easily measured using L2 norm. The whole process of calculating
+
                        word vectors is through neural networks, and the detailed structure of it can be found here.
+
   
+
                     </div>
+
 
                 </div>
 
                 </div>
   
+
            </div>
                <div style="margin-top: 90px;font-family: Light;">
+
 
                    <b>
+
            <div style="margin-top: 90px;font-family: Light;">
                        <font color="#333" size="6px">
+
                <b>
                            <br>Web Pages</font>
+
                    <font color="#333" size="6px">
                    </b>
+
                        <br>Human Practice</font>
                </div>
+
                </b>
   
+
            </div>
                <div class="p">
+
 
                    <div class="q" style="line-height: 2.5;">
+
            <div class="p">
                        <center>
+
                <div class="q" style="line-height: 2.5;">
                            <img src="https://static.igem.org/mediawiki/2017/e/e6/FontEnd.jpeg" alt="" style="width:50%;">
+
                    <center>
                        </center>
+
                        <img src="https://static.igem.org/mediawiki/2017/2/26/Vr1.png " width="44% " style="box-shadow: 0px 4px 10px #aaa; margin-top:30px;border-radius:20px; ">
                        <br>
+
                        <img src="https://static.igem.org/mediawiki/2017/2/26/Vr3.png " width="44% " style="box-shadow: 0px 4px 10px #aaa;margin-left:
                        <br> For the web pages, we used the advanced HTML5 and CSS3 technology. By using media query, the pages can
+
                            2%; margin-top:30px;border-radius:20px; ">
                        adapt to different type of screens. Also, we used bootstrap to make the page be responsive.
+
                    </center>
   
+
                    <br>
                        <br>
+
                    <br>This year the form of our human practice project is through a VR game—Gene War. The game is combined
                     </div>
+
                    with knowledge of synthetic biology to achieve overall the goal, which is to let people learn about synthetic
 +
                    biology with pleasure.
 +
                    <br>
 +
                    <br>To further popularize our project, we held a VR-open day. Students who major in biology can try the game
 +
                    and give feedback about it while unprofessional students can learn the fundamental knowledge about synthetic
 +
                    biology. We also interviewed students who played the game about how they felt about our game and how
 +
                    much did they know about synthetic biology. As a conclusion, the open day went very well, and have far
 +
                    surpassed our initial expectation.
 +
                     <br>
 
                 </div>
 
                 </div>
   
 
                <div style="margin-top: 90px;font-family: Light;">
 
                    <b>
 
                        <font color="#333" size="6px">
 
                            <br>Server Side</font>
 
                    </b>
 
                </div>
 
   
 
                <div class="p">
 
                    <div class="q" style="line-height: 2.5;">
 
                        <center>
 
                            <img src="https://static.igem.org/mediawiki/2017/3/38/BackEnd.png" alt="">
 
                        </center>
 
                        <br>
 
                        <br> The speed of access and response are key factors in UX. To make the server response time as short as
 
                        it can be, we used lots of strategies. We use nginx as our server for its stability and high performance.
 
                        Also, by separating the static from the dynamic, the load on the server side can be balanced. For we
 
                        use Django as the web framework and its multi threading feature, the server can also handle multiple
 
                        request simultaneously.
 
   
 
                        <br>
 
                    </div>
 
                </div>
 
   
 
   
 
   
 
   
 
        </div>
 
        <div style="height:20%;"></div>
 
        <div class="footer">
 
            <div class="foot-icon">
 
<a href="http://bio.measurex.top"  target="blank"><img src="https://static.igem.org/mediawiki/2017/f/fb/Bio.png" class="icon"></a>
 
                <a href=" ">
 
                    <img src="https://static.igem.org/mediawiki/2017/5/51/Fb.png " class="icon ">
 
                </a>
 
                <a href=" ">
 
                    <img src="https://static.igem.org/mediawiki/2017/d/da/Emial.png " class="icon ">
 
                </a>
 
                <a href=" ">
 
                    <img src="https://static.igem.org/mediawiki/2017/5/51/Git.png " class="icon ">
 
                </a>
 
 
             </div>
 
             </div>
 +
    </div>
 +
    <div style="height:20%;"></div>
 +
    <div class="footer">
 +
        <div class="foot-icon">
 +
            <a href="http://bio.measurex.top" target="blank">
 +
                <img src="https://static.igem.org/mediawiki/2017/f/fb/Bio.png" class="icon">
 +
            </a>
 +
            <a href=" ">
 +
                <img src="https://static.igem.org/mediawiki/2017/5/51/Fb.png " class="icon ">
 +
            </a>
 +
            <a href=" ">
 +
                <img src="https://static.igem.org/mediawiki/2017/d/da/Emial.png " class="icon ">
 +
            </a>
 +
            <a href=" ">
 +
                <img src="https://static.igem.org/mediawiki/2017/5/51/Git.png " class="icon ">
 +
            </a>
 
         </div>
 
         </div>
     </center>
+
     </div>
   
+
</center>
   
+
 
    </html>
+
 
 +
</html>

Revision as of 10:50, 29 October 2017

Team:HFUT-China

Design 


BioDesigner Dolphin is a amazing search and design assistant. To make all those things happends, we spend lots of time on designing every part, every detail about BioDesign. From the user interface, user experience to the algorithm and every line of code behind them, we made all of them to be perfect.


User Interface Design


Before we designed the UI of the Biodesigner, we had to consider who will use our product. certainly, the user of the BioDesigner is who engage in synthetic biology work like designing biology devices. But it is a trouble that we have no idea for the thought of them. So we tried to contact other teams of iGEM and talked with them about requirement of this new tool. Then, we understood that they previous habit of synthetic biology work is consulting many document. That is troublesome and uncertain. They need a powerful platform to get clear and wide information. So BioDesigner is aimed to private lots of information and have a friendly interaction, and focus on overcoming any trouble in user experience.

To make sure that user can have a suitable interaction as their expectation, there are four interfaces, search, project, system, gene relationship. The logic of interaction is very certain. We keep the consistency of visual style and interacting method, but it is certain difference between interfaces. So they can recognize it immediately when users enter a interface, and they do not feel confused after the interface changed.

By the way, the design of Logo is based on a DNA shape in a unique angle. We design it in minimalism style, to make sure it can give people a deep impression, and hope it can apply in any kinds of instance.


Algorithm
1. Latent Dirichlet Allocation (LDA) model

For the information of all teams under each track, we tried to let our computers “understand” it, and automatically classify it into groups. Conventional LDA model is used to explore keywords of themes among documents, but here we regard it as an unsupervised classifier, and unsupervised means we don’t have to provide any manually labeled data. As a result, it can give us clusters of documents, and documents in the same cluster have the same theme.

2. TF-IDF model

TF-IDF refers to Term Frequency–Inverse Document Frequency. We used it to excavate the keywords of a document.

3. Word2Vec

Word2Vec plays an important role in our system. Word Vector is an effective and promising substitute for the conventionally used one-hot encoding method in NLP (Natural Language Processing). About one-hot encoding, take a sentence “I love you so much” for example. We want to find a vector to represent each word in this sentence. What one-hot does is that it assigns “1” to the entry in this vector according to the word’s position in the sentence. For example, “love” in one-hot is “0 1 0 0 0” and “so” is “0 0 0 1 0”. Nonetheless, this kind of encoding does not contain the semantic meaning of a word. If we want to measure the semantic similarity between two words, unless these words are identical, the similarity will be zero. So, researchers proposed “Word Vector”, which is a vector representing the word’s semantic meaning. It takes the context of the word into consideration, and the effect turns out to be excellent.

Thus, the similarity between two words can be easily measured using L2 norm. The whole process of calculating word vectors is through neural networks, and the detailed structure of it can be found here.

Web Pages


For the web pages, we used the advanced HTML5 and CSS3 technology. By using media query, the pages can adapt to different type of screens. Also, we used bootstrap to make the page be responsive.

Server Side


The speed of access and response are key factors in UX. To make the server response time as short as it can be, we used lots of strategies. We use nginx as our server for its stability and high performance. Also, by separating the static from the dynamic, the load on the server side can be balanced. For we use Django as the web framework and its multi threading feature, the server can also handle multiple request simultaneously.

Human Practice


This year the form of our human practice project is through a VR game—Gene War. The game is combined with knowledge of synthetic biology to achieve overall the goal, which is to let people learn about synthetic biology with pleasure.

To further popularize our project, we held a VR-open day. Students who major in biology can try the game and give feedback about it while unprofessional students can learn the fundamental knowledge about synthetic biology. We also interviewed students who played the game about how they felt about our game and how much did they know about synthetic biology. As a conclusion, the open day went very well, and have far surpassed our initial expectation.