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

(Blanked the page)
 
Line 1: Line 1:
−
<html>
+
 
−
   
+
−
    <head>
+
−
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
−
   
+
−
        <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/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" />
+
−
        <style>
+
−
            body {
+
−
                background: #f7f5e6;
+
−
            }
+
−
            .algorithm-title{
+
−
               
+
−
            }
+
−
        </style>
+
−
    </head>
+
−
   
+
−
    <center>
+
−
        <div class="header" style="z-index:999;position:absolute">
+
−
            <ul class="nav">
+
−
                <li>
+
−
                    <a href="https://2017.igem.org/Team:HFUT-China">&nbsp;&nbsp;Main page&nbsp;&nbsp;</a>
+
−
                </li>
+
−
                <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>
+
−
                    <ul>
+
−
                        <li class="selfnav hef">
+
−
                            <a href="https://2017.igem.org/Team:HFUT-China/Description">
+
−
                                <font class="hef">Description</font>
+
−
                            </a>
+
−
                        </li>
+
−
                        <li class="selfnav hef">
+
−
                            <a href="https://2017.igem.org/Team:HFUT-China/Design">
+
−
                                <font class="hef">Design</font>
+
−
                            </a>
+
−
                        </li>
+
−
                        <li class="selfnav hef">
+
−
                            <a href="https://2017.igem.org/Team:HFUT-China/Contribution">
+
−
                                <font class="hef">Contribution</font>
+
−
                            </a>
+
−
                        </li>
+
−
                        <li class="selfnav hef">
+
−
                            <a href="https://2017.igem.org/Team:HFUT-China/Demonstrate">
+
−
                                <font class="hef">Demonstrate</font>
+
−
                            </a>
+
−
                        </li>
+
−
                    </ul>
+
−
                </li>
+
−
                <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>
+
−
                    <ul>
+
−
                        <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">
+
−
                            <a href="https://2017.igem.org/Team:HFUT-China/Model">
+
−
                                <font class="hef" color="#000">Model</font>
+
−
                            </a>
+
−
                        </li>
+
−
                        <li class="selfnav">
+
−
                            <a href="https://2017.igem.org/Team:HFUT-China/Improve">
+
−
                                <font class="hef" color="#000">Improve</font>
+
−
                            </a>
+
−
                        </li>
+
−
                    </ul>
+
−
                </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>
+
−
                    <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
+
−
                                    <br>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="#">&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/Silver">
+
−
                                <font class="hef" color="#000">Silver HP</font>
+
−
                            </a>
+
−
                        </li>
+
−
                        <li class="selfnav">
+
−
                            <a href="https://2017.igem.org/Team:HFUT-China/Gold_Integrated">
+
−
                                <font class="hef" color="#000">Integrated
+
−
                                    <br>and Gold</font>
+
−
                            </a>
+
−
                        </li>
+
−
                    </ul>
+
−
                </li>
+
−
            </ul>
+
−
        </div>
+
−
   
+
−
        <div style="height:160px"></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>
+
−
                    <!-- <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">
+
−
                            <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 style="margin-top: 90px;font-family: Light;">
+
−
                    <b>
+
−
                        <font color="#333" size="6px">
+
−
                            <br>Algorithm</font>
+
−
                    </b>
+
−
                </div>
+
−
   
+
−
                <div class="p">
+
−
                    <div class="q" style="line-height: 2.5;">
+
−
                        <span class="algorithm-title">1. Latent Dirichlet Allocation (LDA) model</span>
+
−
                        <br>
+
−
                        <br> 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.
+
−
                        <br>
+
−
                        <br>
+
−
                        <span class="algorithm-title">2. TF-IDF model</span>
+
−
                        <br>
+
−
                        <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 style="margin-top: 90px;font-family: Light;">
+
−
                    <b>
+
−
                        <font color="#333" size="6px">
+
−
                            <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 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=" ">
+
−
                    <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>
+
−
   
+
−
   
+
−
    </html>
+

Latest revision as of 13:53, 25 October 2017