Difference between revisions of "Template:SYSU-Software/statics/html/Projects/Description.html"

(Created page with "<div class="page-container"> <div class="ui header1"> Project</div> <div class="ui header2"> Description </div> <div class="ui header3"> Background </div> <...")
 
Line 1: Line 1:
 
<div class="page-container">
 
<div class="page-container">
  
−
     <div class="ui header1"> Project</div>
+
     <div class="header1" id="header-project"> Project </div>
  
−
     <div class="ui header2"> Description </div>
+
     <div class="header2">Welcome to CO-RAD!</div>
−
     <div class="ui header3"> Background </div>
+
     <div class="content">
 +
        The complexity of genetic circuits has made it difficult for synthetic biologists to design the artificial
 +
        biological systems. In our project, we developed <span class="caption">CO-RAD</span>, a <span class="caption">Collaborative
 +
            Optimization</span> platform with multiple functions including <span class="caption">Recommendation,
 +
            Analysis and Design</span>. With the help of CO-RAD, users can design genetic circuits easily and cooperate
 +
        with remote partners <span class="caption">in real time</span>.
 +
        More importantly, the <span class="caption">search & recommendation system in CO-RAD</span> were developed to
 +
        inspire users with some previous projects and optimize their design <span class="caption">withevolutionary
 +
            algorithm</span>. Moreover, <span class="caption">a novel numerical simulation algorithm</span>（TODO:超链接：model-simulation
 +
        for circuit）applied in CO-RAD was developed to predict the expression level of genetic circuits in no time.
 +
        Through In addition, we incorporated self-designed <span class="caption">wet-lab validation</span>（TODO:超链接：Validation）into
 +
        our project to validate the new results designed by our CO-RAD platform. In conclusion, by assisting in
 +
        collaboration and inspiration, CO-RAD makes complex biological systems accessible to researchers who want
 +
        rapid, intuitive, and high-quality
 +
        accomplish their designs.
 +
 
 +
    </div>
  
 +
    <div class="header2"> Description </div>
 
     <div class="content">
 
     <div class="content">
−
         Due to the complexity of biological systems, genetic circuit design and the limited personal experience, it is
+
         Groupwork is the bread and butter of biological system & circuit design, due to the complexity of this research
−
        very difficult for individuals to design a viable circuit alone. To this end, many synthetic biologists choose
+
        field. In consequence of the complexity of biological systems, genetic circuit design and the limited personal
−
         to work together to complete a work. Good collaboration should ensure that the collaborative approach is simple
+
        experience, it is very difficult for individuals to design a viable circuit alone.This raises the demand of
−
         and fast, and that the recommendations made by both parties are valuable when collaborating. In a collaborative
+
         effective collaboration methods. It would be better if the biologists can work face to face, in which way they
−
         approach, working together with face to face is undoubtedly the best choice for collaboration, but in many
+
         can exchange ideas with absolute ease. However, in many cases we can’t even make sure everyone works on the
−
         cases it is tough to achieve. When collaborating remotely, traditional collaboration tools, such as Google
+
         same continent, let alone in the same room, so we need appropriate ways for tele-cooperation. Sadly,
−
        Docs, couldn’t describe genetic circuits and experimental protocols integrallty and accurately. Localized
+
         traditional online tools don’t satisfy biologists’ needs. For example, genetic circuits and experimental
−
        design software, such as SBOL designer, cannot be edited online in real time, resulting in collaboration
+
        protocols cannot be precisely represented via Google Doc. Local designing software such as SBOLDesigner don’t
−
         inefficient. In addition, there are no tools to help users come up with more valuable opinions.
+
        let scientists edit online cooperatively, which brings down efficiency a lot. Besides, creative ideas and
 +
        valuable suggestions are also important in collaboration, which will have a great influence in the final result
 +
         of users’ co-design.
 
     </div>
 
     </div>
  
−
     <img src="TODO:" />
+
     <img src="images/Pr-De-4.png" />
  
−
     <div class="content"> we summarize the exiting problems in current cooperating process:
+
     <div class="content">
 +
        Therefore, we're here to solve the following problems:
 +
        <br />
 +
        (1) How to make tele-cooperation as convenient as face-to-face collaboration.
 +
        <br />
 +
        (2) How to encourage users to think of and share more creative ideas while cooperating.
 
     </div>
 
     </div>
  
−
     <ol>
+
     <div class="header2"> Solution </div>
−
         <li> How to make remote collaboration as convenient as face-to-face communication? </li>
+
 
−
         <li> How to enlighten the user's thinking and let users come up with more creative ideas when they collaborate?
+
    <div class="header3">Help users come up with more creative ideas</div>
−
         </li>
+
    <div class="ui three cards">
−
     </ol>
+
         <div class="card wide-card">
 +
            <div class="image">
 +
                <img src="https://static.igem.org/mediawiki/2018/6/63/T--SYSU-Software--Des4.png" />
 +
            </div>
 +
            <div class="content">
 +
                <div class="ui header">Search & recommendaion</div>
 +
            </div>
 +
            <div class="ui bottom attached button detail-btn" data-id="4">View Detail</div>
 +
        </div>
 +
        <div class="card wide-card">
 +
            <div class="image">
 +
                <img src="https://static.igem.org/mediawiki/2018/a/ae/T--SYSU-Software--Des5.png" />
 +
            </div>
 +
            <div class="content">
 +
                <div class="ui header">Analysis & simulation</div>
 +
            </div>
 +
            <div class="ui bottom attached button detail-btn" data-id="5">View Detail</div>
 +
        </div>
 +
        <div class="card wide-card">
 +
            <div class="image">
 +
                <img src="https://static.igem.org/mediawiki/2018/f/f3/T--SYSU-Software--Des6.png" />
 +
            </div>
 +
            <div class="content">
 +
                <div class="ui header">Guide the design</div>
 +
            </div>
 +
            <div class="ui bottom attached button detail-btn" data-id="6">View Detail</div>
 +
        </div>
 +
    </div>
 +
    <div class="ui modal" id="modal-4">
 +
        <div class="header">Search & recommendaion</div>
 +
        <div class="image content">
 +
            <div class="ui medium image">
 +
                <img src="https://static.igem.org/mediawiki/2018/6/63/T--SYSU-Software--Des4.png" />
 +
            </div>
 +
            <div class="description">
 +
                Given the experience of previous achievements provides valuable inspiration while cooperating, we
 +
                developed this function to help users quickly find the project they need.
 +
            </div>
 +
        </div>
 +
        <div class="actions">
 +
            <div class="ui black deny button">Close</div>
 +
        </div>
 +
    </div>
 +
    <div class="ui modal" id="modal-5">
 +
        <div class="header">Analysis & simulation</div>
 +
        <div class="image content">
 +
            <div class="ui medium image">
 +
                <img src="https://static.igem.org/mediawiki/2018/a/ae/T--SYSU-Software--Des5.png" />
 +
            </div>
 +
            <div class="description">
 +
                Deeper understanding of the circuit design can help users make more hypothetical opinions. Our software
 +
                analyzes circuits and gives values for CG and CAI, and builds mathematical simulation models to predict
 +
                expression levels.
 +
            </div>
 +
        </div>
 +
        <div class="actions">
 +
            <div class="ui black deny button">Close</div>
 +
        </div>
 +
    </div>
 +
    <div class="ui modal" id="modal-6">
 +
        <div class="header">Guide the design</div>
 +
        <div class="image content">
 +
            <div class="ui medium image">
 +
                <img src="https://static.igem.org/mediawiki/2018/f/f3/T--SYSU-Software--Des6.png" />
 +
            </div>
 +
            <div class="description">
 +
                Through an algorithm that simulates evolution, users can get optimal kinetic parameters for circuits,
 +
                which can assist users in modifying their circuits to reach the expected behavior.
 +
            </div>
 +
        </div>
 +
        <div class="actions">
 +
            <div class="ui black deny button">Close</div>
 +
        </div>
 +
    </div>
 +
 
 +
    <div class="header3">Solve the inconvenience of remote collaboration and communication</div>
 +
    <br />
 +
    <div class="ui three cards">
 +
        <div class="card wide-card">
 +
            <div class="image">
 +
                <img src="https://static.igem.org/mediawiki/2018/c/c9/T--SYSU-Software--Des1.png" />
 +
            </div>
 +
            <div class="content">
 +
                <div class="ui header">Real-time collaboration</div>
 +
            </div>
 +
            <div class="ui bottom attached button detail-btn" data-id="1">View Detail</div>
 +
         </div>
 +
        <div class="card wide-card">
 +
            <div class="image">
 +
                <img src="https://static.igem.org/mediawiki/2018/9/9a/T--SYSU-Software--Des2.png" />
 +
            </div>
 +
            <div class="content">
 +
                <div class="ui header">Synchroniaztion sketchpad</div>
 +
            </div>
 +
            <div class="ui bottom attached button detail-btn" data-id="2">View Detail</div>
 +
        </div>
 +
        <div class="card wide-card">
 +
            <div class="image">
 +
                <img src="https://static.igem.org/mediawiki/2018/b/b8/T--SYSU-Software--Des3.png" />
 +
            </div>
 +
            <div class="content">
 +
                <div class="ui header">SBOL support</div>
 +
            </div>
 +
            <div class="ui bottom attached button detail-btn" data-id="3">View Detail</div>
 +
        </div>
 +
    </div>
 +
    <div class="ui modal" id="modal-1">
 +
        <div class="header">Real-time collaboration</div>
 +
        <div class="image content">
 +
            <div class="ui medium image">
 +
                <img src="https://static.igem.org/mediawiki/2018/c/c9/T--SYSU-Software--Des1.png" />
 +
            </div>
 +
            <div class="description">
 +
                A real-time genetic circuit design platform where multiple users can edit one file at the same time,
 +
                just like (and even better than!) working on the same computer.
 +
            </div>
 +
        </div>
 +
        <div class="actions">
 +
            <div class="ui black deny button">Close</div>
 +
        </div>
 +
    </div>
 +
    <div class="ui modal" id="modal-2">
 +
        <div class="header">Synchroniaztion sketchpad</div>
 +
        <div class="image content">
 +
            <div class="ui medium image">
 +
                <img src="https://static.igem.org/mediawiki/2018/9/9a/T--SYSU-Software--Des2.png" />
 +
            </div>
 +
            <div class="description">
 +
                A tool that simulates pen and paper, users can express their opinions by labeling or drawing during the
 +
                communication process.
 +
            </div>
 +
        </div>
 +
        <div class="actions">
 +
            <div class="ui black deny button">Close</div>
 +
        </div>
 +
    </div>
 +
    <div class="ui modal" id="modal-3">
 +
        <div class="header">SBOL support</div>
 +
        <div class="image content">
 +
            <div class="ui medium image">
 +
                <img src="https://static.igem.org/mediawiki/2018/b/b8/T--SYSU-Software--Des3.png" />
 +
            </div>
 +
            <div class="description">
 +
                Our system is compatible with SBOL, the most common data format in the field of synthetic biology,
 +
                which means circuits edited on other software can be quickly imported into our software without
 +
                re-editing.
 +
            </div>
 +
         </div>
 +
        <div class="actions">
 +
            <div class="ui black deny button">Close</div>
 +
        </div>
 +
     </div>
 +
 
 +
    <div class="next-page-identify" data-value="3"></div> <!-- 这个是跳页标记 -->
  
−
    <div class="ui header3"> Solution </div>
 
−
    <!-- TODO:此处的样式有特殊需求 -->
 
 
</div>
 
</div>
 +
 +
<script>
 +
    $('.detail-btn').on('click', function () {
 +
        $('#modal-' + $(this).attr('data-id')).modal('show');
 +
    });
 +
</script>

Revision as of 18:48, 15 October 2018

Project
Welcome to CO-RAD!
       The complexity of genetic circuits has made it difficult for synthetic biologists to design the artificial
       biological systems. In our project, we developed CO-RAD, a Collaborative
           Optimization platform with multiple functions including Recommendation,
           Analysis and Design. With the help of CO-RAD, users can design genetic circuits easily and cooperate
       with remote partners in real time.
       More importantly, the search & recommendation system in CO-RAD were developed to
       inspire users with some previous projects and optimize their design withevolutionary
           algorithm. Moreover, a novel numerical simulation algorithm（TODO:超链接：model-simulation
       for circuit）applied in CO-RAD was developed to predict the expression level of genetic circuits in no time.
       Through In addition, we incorporated self-designed wet-lab validation（TODO:超链接：Validation）into
       our project to validate the new results designed by our CO-RAD platform. In conclusion, by assisting in
       collaboration and inspiration, CO-RAD makes complex biological systems accessible to researchers who want
       rapid, intuitive, and high-quality
       accomplish their designs.
Description 
       Groupwork is the bread and butter of biological system & circuit design, due to the complexity of this research
       field. In consequence of the complexity of biological systems, genetic circuit design and the limited personal
       experience, it is very difficult for individuals to design a viable circuit alone.This raises the demand of
       effective collaboration methods. It would be better if the biologists can work face to face, in which way they
       can exchange ideas with absolute ease. However, in many cases we can’t even make sure everyone works on the
       same continent, let alone in the same room, so we need appropriate ways for tele-cooperation. Sadly,
       traditional online tools don’t satisfy biologists’ needs. For example, genetic circuits and experimental
       protocols cannot be precisely represented via Google Doc. Local designing software such as SBOLDesigner don’t
       let scientists edit online cooperatively, which brings down efficiency a lot. Besides, creative ideas and
       valuable suggestions are also important in collaboration, which will have a great influence in the final result
       of users’ co-design.

   <img src="images/Pr-De-4.png" />

       Therefore, we're here to solve the following problems:
       

       (1) How to make tele-cooperation as convenient as face-to-face collaboration.
       

       (2) How to encourage users to think of and share more creative ideas while cooperating.
Solution
Help users come up with more creative ideas
               <img src="T--SYSU-Software--Des4.png" />
Search & recommendaion
View Detail
               <img src="T--SYSU-Software--Des5.png" />
Analysis & simulation
View Detail
               <img src="T--SYSU-Software--Des6.png" />
Guide the design
View Detail
Solve the inconvenience of remote collaboration and communication
   


               <img src="T--SYSU-Software--Des1.png" />
Real-time collaboration
View Detail
               <img src="T--SYSU-Software--Des2.png" />
Synchroniaztion sketchpad
View Detail
               <img src="T--SYSU-Software--Des3.png" />
SBOL support
View Detail

<script> 

   $('.detail-btn').on('click', function () {
       $('#modal-' + $(this).attr('data-id')).modal('show');
   });

</script>