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

(Prototype team page)
 
Line 1: Line 1:
−
{{HFUT-China}}
+
<html lang="en">
−
<html>
+
<head>
−
 
+
<meta charset="UTF-8">
−
<h2>Design</h2>
+
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
−
 
+
<title>HFUT-China | Design</title>
−
<p>
+
<link rel="stylesheet" type="text/css" href="https://2015.igem.org/Team:HFUT-China/designcss?action=raw&ctype=text/css">
−
By talking about your design work on this page, there is one medal criterion that you can attempt to meet, and one award that you can apply for. If your team is going for a gold medal by building a functional prototype, you should tell us what you did on this page. If you are going for the <a href="https://2015.igem.org/Judging/Awards#SpecialPrizes">Applied Design award</a>, you should also complete this page and tell us what you did.  
+
<link rel="stylesheet" type="text/css" href="https://2015.igem.org/Team:HFUT-China/wholecss?action=raw&ctype=text/css">
−
</p>
+
<link rel="stylesheet" type="text/css" href="https://2015.igem.org/Team:HFUT-China/subnavcss?action=raw&ctype=text/css">
−
 
+
<link rel="stylesheet" type="text/css" href="https://2015.igem.org/Team:HFUT-China/ghcss?action=raw&ctype=text/css">
−
<div class="highlightBox">
+
<link rel="stylesheet" type="text/css" href="https://2015.igem.org/Team:HFUT-China/bootstrapcss?action=raw&ctype=text/css">
−
<h4>Note</h4>
+
<script type="text/javascript" src="https://2015.igem.org/Team:HFUT-China/jqjs?action=raw&ctype=text/javascript"></script>
−
<p>In order to be considered for the <a href="https://2015.igem.org/Judging/Awards#SpecialPrizes">Best Applied Design award</a> and/or the <a href="https://2015.igem.org/Judging/Awards#Medals">functional prototype gold medal criterion</a>, you must fill out this page.</p>
+
<script type="text/javascript" src="https://2015.igem.org/Team:HFUT-China/btsjs?action=raw&ctype=text/javascript"></script>
−
</div>
+
<script>
−
 
+
    if ($('.firstHeading')) $('.firstHeading').remove();
−
<p>This is a prize for the team that has developed a synthetic biology product to solve a real world problem in the most elegant way. The students will have considered how well the product addresses the problem versus other potential solutions, how the product integrates or disrupts other products and processes, and how its lifecycle can more broadly impact our lives and environments in positive and negative ways.</p>
+
    </script>
−
 
+
    <style>
−
<p>
+
    #contentSub,
−
If you are working on art and design as your main project, please join the art and design track. If you are integrating art and design into the core of your main project, please apply for the award by completing this page.
+
    #contentcontainer,
−
</p>
+
    #footer-box,
−
 
+
    #sitesub,
−
</div>
+
    #catlinks,
−
 
+
    #search-controls,
 +
    #p-logo,
 +
    .h3,
 +
    .printfooter,
 +
    .firstHeading,
 +
    .visualClear {
 +
        display: none;
 +
    }
 +
    /*-- hides default wiki settings --*/
 +
   
 +
    #globalWrapper,
 +
    #content {
 +
        width: 100%;
 +
        height: 100%;
 +
        border: 0px;
 +
        background-color: transparent;
 +
        margin: 0px;
 +
        padding: 0px;
 +
    }
 +
    #bodyContent, #mw-content-text {
 +
        width: 100%;
 +
        height: 100%;
 +
line-height:normal;
 +
    }
 +
    /*
 +
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5, #bodyContent h6 {
 +
border-bottom: none;
 +
padding-top: 0;
 +
padding-bottom: 0;
 +
margin-bottom: 0;
 +
}
 +
#bodyContent p {
 +
font-size: 100%;
 +
line-height: 1em;
 +
}
 +
#bodyContent li {
 +
margin-bottom: 0;
 +
}
 +
#bodyContent a {
 +
font-size: 100%;
 +
}*/
 +
    </style>
 +
</head>
 +
<body>
 +
<nav id="globalheader" class="globalheader" role="navigation" aria-label="Global Navigation">
 +
        <div id="gh-content" class="gh-content">
 +
            <ul class="gh-nav-list navbar-nav">
 +
                <li class="gh-tab gh-tab-logo">
 +
                    <a href="https://2015.igem.org/Team:HFUT-China" class="gh-tab-link">
 +
                        <div class="gh-logo">
 +
                            <img src="https://static.igem.org/mediawiki/2015/e/eb/Logo_white_small.png" alt="35x35" class="img-rounded" style="width: 35px;height: 35px;">
 +
                        </div>
 +
                    </a>
 +
                </li>
 +
                <li class="gh-tab"><a href="https://2015.igem.org/Team:HFUT-China/Software" class="gh-tab-link">Software</a></li>
 +
                <li class="gh-tab"><a href="https://2015.igem.org/Team:HFUT-China/Design" class="gh-tab-link">Design</a></li>
 +
                <li class="gh-tab"><a href="https://2015.igem.org/Team:HFUT-China/Description" class="gh-tab-link">Description</a></li>
 +
                <li class="gh-tab"><a href="https://2015.igem.org/Team:HFUT-China/Documents" class="gh-tab-link">Documents</a></li>
 +
                <li class="gh-tab"><a href="https://2015.igem.org/Team:HFUT-China/Practices" class="gh-tab-link">Human Practices</a></li>
 +
                <li class="gh-tab"><a href="https://2015.igem.org/Team:HFUT-China/Collaborations" class="gh-tab-link">Collaborations</a></li>
 +
                <li class="gh-tab"><a href="https://2015.igem.org/Team:HFUT-China/Team" class="gh-tab-link">Team</a></li>
 +
                <li class="gh-tab"><a href="https://2015.igem.org/Team:HFUT-China/Attributions" class="gh-tab-link">Attributors</a></li>
 +
            </ul>
 +
            <!-- ul.gh-nav-list -->
 +
        </div>
 +
        <!-- div#gh-content -->
 +
    </nav>
 +
    <div class="sub-nav">
 +
    <ul class="sub-nav-list">
 +
    <li><a href="#introduction" class="nav-link">User Interface Design</a></li>
 +
    <li><a href="#functions" class="nav-link">Algorithm</a></li>
 +
    <li><a href="#ug" class="nav-link">Web Page</a></li>
 +
    <li><a href="#link" class="nav-link">Server</a></li>
 +
    </ul>
 +
    </div>
 +
    <div class="container">
 +
    <div class="info-sec" id="big-logo">
 +
    <div class="sec-content right">
 +
    <div class="photo" id="logo"></div>
 +
    <div class="info">
 +
    <h1>BioDesigner</h1>
 +
    <h3>Design, makes BioDesigner</h3>
 +
    <p>BioDesigner is a amazing 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.</p>
 +
    </div>
 +
    </div>
 +
    </div>
 +
    <div class="info-sec" id="ui">
 +
    <div class="sec-title">
 +
    <h3 class="sec-head">User Interface Design</h3>
 +
    </div>
 +
    <div class="sec-content">
 +
                <div class="whole-info">
 +
                    <p>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.</p>
 +
                    <p>To make sure that user can have a suitable interaction as their expectation, there are five interfaces, welcome, project, device design, system design, simulation. welcome interface is the first interface, and project interface connect all other interface. 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.</p>
 +
                    <p>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.</p>
 +
                </div>     
 +
            </div>
 +
    </div>
 +
    <div class="info-sec" id="algorithm">
 +
    <div class="sec-title">
 +
    <h3 class="sec-head">Algorithm</h3>
 +
    </div>
 +
            <div class="sub-title">Markov</div>
 +
    <div class="sec-content right">
 +
                    <div class="photo" id="markov-chain"></div>
 +
                    <div class="info">
 +
                        <p>The biobrick chain recommendation function was achieved by markov transition matrix, which consists of probabilities of successive biobricks. Thus, the first step is to calculate the probabilities of successive biobricks. For a given biobrick A, the probabilities of A transferring to B is calculated by the number of biobrick A transferring to B over the number of A transferring to all biobricks. The transition probabilities of any two biobricks were calculated to form the markov transition matrix. </p>
 +
                    </div>
 +
                    <div class="clear"></div>
 +
                    <div class="whole-info">The biobrick chain recommendation function was achieved by markov transition matrix, which consists of probabilities of successive biobricks. Thus, the first step is to calculate the probabilities of successive biobricks. For a given biobrick A, the probabilities of A transferring to B is calculated by the number of biobrick A transferring to B over the number of A transferring to all biobricks. The transition probabilities of any two biobricks were calculated to form the markov transition matrix. </div>
 +
                    <div class="whole-info">
 +
                        <p>For example, Given four chains: “jfa”, “f'kj”, “ruv”, “agf”. One letter represent one BioBrick. We could see BioBricks “a” and “k” follow the “f”, so the number of “f” is two (ignore the end BioBrick of chain), the number of “a” following “f” is one and the number of “k” following the “f” is one. We can calculate the probability from “f” to “a” is 1/2 and the probability from “f” to “k” is 1/2. Then, we can calculate all probability through above process. After calculate, the result is as follows: </p>
 +
                    </div>
 +
                    <div class="whole-photo" id="markov-res"></div>
 +
                    <div class="whole-info">With the given BioBricks, we calculate probabilities of next BioBricks. The probabilities and parent node of these next BioBricks are recorded. In order to save memory, we only record the BioBricks’ information with nonzero probability. When two same BioBricks have different probabilities, we compare the probabilities and save the higher probability BioBricks information. When we iterate the length size time, we would get some predicted chain whose length is user’ demand. Then we sort brobick chains according to the probabilities. Finally, we provide some predicted chains that user maybe need.</div>
 +
            </div>
 +
            <div class="clear"></div>
 +
            <div class="sub-title">Aprior</div>
 +
            <div class="sec-content">
 +
                <div class="whole-info">
 +
                    <p>First using the apriori algorithm to find frequent item sets of all parts.The first step we set a number between 0 and 1, and call this number for the support degree,the second step requires count frequency of all parts’ occurrence ,reserved the parts whose frequency of occurrence is greater than support degree ,forming the frequent item sets whose length is one . Make the above-mentioned part into pairwise combinations .And count the frequency of appearing in the original data for the each  combination of part,reserved the parts whose frequency of occurrence is greater than support degree,forming the frequent item sets whose length is two.Repeat the above steps to get all the frequent item sets.</p>
 +
                    <p>Then traverse the database to find the twins component of all part .</p>
 +
                    <p>Finally, the part and its twin components currently used in the current design chain concentrated in frequent items matching to identify highly relevant part,and these parts will be sorted according to the degree of association, the result is sorted recommend results.</p>
 +
                    <h4>Example</h4>
 +
                    <ol>
 +
                        <li>Suppose the original data is four chains: [1,3,4], [2,3,5], [2,3,5], [2,5]</li>
 +
                        <li>We set Support degree  0.5</li>
 +
                        <li>Count frequency of all parts’ occurrence,as the four chains, part1 appear twice,so the frequency of 1 is 0.5; the frequency of 2 is 0.75;the frequency of 3 is 0.75;the frequency of 4 is 0.25;the frequency of 5 is 0.75</li>
 +
                        <li>Reserve the parts whose frequency of occurrence is greater than support degree,[1,2,3,5] is the frequent item sets whose length is one</li>
 +
                        <li>Make the above-mentioned part into pairwise combinations:（1，2）、（1,3）、（1,5）、（2,3）、（2,5）、（3,5</li>
 +
                        <li>And count the frequency of appearing for the each combination of part,（1,2）：0.25；（1,3）：0.5；（1,5）：0.25；（2,3）：0.5；（2,5）：0.75；（3,5）：0.5</li>
 +
                        <li>Reserve the parts whose frequency of occurrence is greater than support degree,[（1,3）、（2,3）、（2,5）、（3,5）]is the frequent item sets whose length is two</li>
 +
                        <li>Repeat the above steps to get all the frequent item sets.[1,2,3,5];[（1,3）、（2,3）、（2,5）、（3,5）];[(2,3,5)]</li>
 +
                        <li>If the current chain is [2,3]，the recommended result is 5 and 1,and because the large degree of association with the 2,3 ,5 sort in the front.</li>
 +
                    </ol>
 +
                </div>
 +
            </div>
 +
            <div class="clear"></div>
 +
    </div>
 +
        <div class="clear"></div>
 +
    <div class="info-sec" id="web-page">
 +
    <div class="sec-title">
 +
    <h3 class="sec-head">Web Pages</h3>
 +
    </div>
 +
    <div class="sec-content left">
 +
                <div class="photo" id="pages"></div> 
 +
                <div class="info">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.</div>
 +
            </div>
 +
    </div>
 +
    <div class="info-sec" id="server">
 +
    <div class="sec-title">
 +
    <h3 class="sec-head">Server Side</h3>
 +
    </div>
 +
    <div class="sec-content left">
 +
                <div class="photo" id="server-photo"></div>
 +
                <div class="info">
 +
                    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.
 +
                </div>
 +
            </div>
 +
    </div>
 +
    </div>
 +
</body>
 
</html>
 
</html>

Revision as of 16:33, 18 September 2015

HFUT-China | Design

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 five interfaces, welcome, project, device design, system design, simulation. welcome interface is the first interface, and project interface connect all other interface. 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

Markov

The biobrick chain recommendation function was achieved by markov transition matrix, which consists of probabilities of successive biobricks. Thus, the first step is to calculate the probabilities of successive biobricks. For a given biobrick A, the probabilities of A transferring to B is calculated by the number of biobrick A transferring to B over the number of A transferring to all biobricks. The transition probabilities of any two biobricks were calculated to form the markov transition matrix.

The biobrick chain recommendation function was achieved by markov transition matrix, which consists of probabilities of successive biobricks. Thus, the first step is to calculate the probabilities of successive biobricks. For a given biobrick A, the probabilities of A transferring to B is calculated by the number of biobrick A transferring to B over the number of A transferring to all biobricks. The transition probabilities of any two biobricks were calculated to form the markov transition matrix.

For example, Given four chains: “jfa”, “f'kj”, “ruv”, “agf”. One letter represent one BioBrick. We could see BioBricks “a” and “k” follow the “f”, so the number of “f” is two (ignore the end BioBrick of chain), the number of “a” following “f” is one and the number of “k” following the “f” is one. We can calculate the probability from “f” to “a” is 1/2 and the probability from “f” to “k” is 1/2. Then, we can calculate all probability through above process. After calculate, the result is as follows:

With the given BioBricks, we calculate probabilities of next BioBricks. The probabilities and parent node of these next BioBricks are recorded. In order to save memory, we only record the BioBricks’ information with nonzero probability. When two same BioBricks have different probabilities, we compare the probabilities and save the higher probability BioBricks information. When we iterate the length size time, we would get some predicted chain whose length is user’ demand. Then we sort brobick chains according to the probabilities. Finally, we provide some predicted chains that user maybe need.
Aprior

First using the apriori algorithm to find frequent item sets of all parts.The first step we set a number between 0 and 1, and call this number for the support degree,the second step requires count frequency of all parts’ occurrence ,reserved the parts whose frequency of occurrence is greater than support degree ,forming the frequent item sets whose length is one . Make the above-mentioned part into pairwise combinations .And count the frequency of appearing in the original data for the each combination of part,reserved the parts whose frequency of occurrence is greater than support degree,forming the frequent item sets whose length is two.Repeat the above steps to get all the frequent item sets.

Then traverse the database to find the twins component of all part .

Finally, the part and its twin components currently used in the current design chain concentrated in frequent items matching to identify highly relevant part,and these parts will be sorted according to the degree of association, the result is sorted recommend results.

Example

  1. Suppose the original data is four chains: [1,3,4], [2,3,5], [2,3,5], [2,5]
  2. We set Support degree 0.5
  3. Count frequency of all parts’ occurrence,as the four chains, part1 appear twice,so the frequency of 1 is 0.5; the frequency of 2 is 0.75;the frequency of 3 is 0.75;the frequency of 4 is 0.25;the frequency of 5 is 0.75
  4. Reserve the parts whose frequency of occurrence is greater than support degree,[1,2,3,5] is the frequent item sets whose length is one
  5. Make the above-mentioned part into pairwise combinations:（1，2）、（1,3）、（1,5）、（2,3）、（2,5）、（3,5
  6. And count the frequency of appearing for the each combination of part,（1,2）：0.25；（1,3）：0.5；（1,5）：0.25；（2,3）：0.5；（2,5）：0.75；（3,5）：0.5
  7. Reserve the parts whose frequency of occurrence is greater than support degree,[（1,3）、（2,3）、（2,5）、（3,5）]is the frequent item sets whose length is two
  8. Repeat the above steps to get all the frequent item sets.[1,2,3,5];[（1,3）、（2,3）、（2,5）、（3,5）];[(2,3,5)]
  9. If the current chain is [2,3]，the recommended result is 5 and 1,and because the large degree of association with the 2,3 ,5 sort in the front.

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.