Difference between revisions of "Team:HFUT-China/Design"
| Line 186: | Line 186: | ||
<br> | <br> | ||
<div style="width:100%;text-align:center"> | <div style="width:100%;text-align:center"> | ||
| − | <img src="https://static.igem.org/mediawiki/2017/3/32/DESIGN-SEARCH.PNG" width="30%" style="border:4px solid # | + | <img src="https://static.igem.org/mediawiki/2017/3/32/DESIGN-SEARCH.PNG" width="30%" style="border:4px solid #ddd; border-radius:10px;margin:2%"> |
| − | <img src="https://static.igem.org/mediawiki/2017/6/6a/DESIGN-pro.PNG" width="30%" style="border:4px solid # | + | <img src="https://static.igem.org/mediawiki/2017/6/6a/DESIGN-pro.PNG" width="30%" style="border:4px solid #ddd; border-radius:10px;margin:2%""> |
| − | <img src="https://static.igem.org/mediawiki/2017/d/d6/DESIGN-relation.PNG" width="30%" style="border:4px solid # | + | <img src="https://static.igem.org/mediawiki/2017/d/d6/DESIGN-relation.PNG" width="30%" style="border:4px solid #ddd; border-radius:10px;margin:2%""> |
| − | <img src="https://static.igem.org/mediawiki/2017/4/4d/DESIGN-system.PNG" width="30%" style="border:4px solid # | + | <img src="https://static.igem.org/mediawiki/2017/4/4d/DESIGN-system.PNG" width="30%" style="border:4px solid #ddd; border-radius:10px;margin:2%""> |
</div> | </div> | ||
<br> To make sure that user can have a suitable interaction as their expectation, there are four interfaces, | <br> To make sure that user can have a suitable interaction as their expectation, there are four interfaces, | ||
Revision as of 02:46, 2 November 2017
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 Dolphin 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 Dolphin 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
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.
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 Dolphin 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 Dolphin 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.
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.
