Difference between revisions of "Team:NCTU Formosa/Model"

 
(186 intermediate revisions by 2 users not shown)
Line 2: Line 2:
 
{{NCTU_Formosa/header}}
 
{{NCTU_Formosa/header}}
 
<html>
 
<html>
−
 
 
<body>
 
<body>
 
     <main>
 
     <main>
Line 9: Line 8:
 
         </div>
 
         </div>
 
         <div class="main-content">
 
         <div class="main-content">
−
             <img src="https://static.igem.org/mediawiki/2021/0/02/T--NCTU_Formosa--next.png" id="nextBottom" />
+
             <img src="https://static.igem.org/mediawiki/2021/0/02/T--NCTU_Formosa--next.png" id="nextBottom" />
−
         
+
            <div class="section s2">
−
              
+
                <h1 class="topic" id="topic2">Overview</h1>
 +
                <!--<p id="p1">
 +
                    &#8195;&#8195;Modeling is calculating the physical phenomenon by using mathematical methods or logical algorithms.<br><br><br>-->
 +
                </p>
 +
                <p id="p2" >
 +
                    &#8195;&#8195;Oral cavity is a hotbed for pathogens of periodontal diseases, as the goal of modelling is to simulate the microenvironment incorporated with Denteeth, mainly the overturn of pathogens, and make predictions on their extinction. Therefore, we compute the competing bacterial growing patterns, and the killing effect on pathogens. Also, we propose a renew rate of the final product, considering the biobrick design in DenTeeth, including quorum sensing, target peptide expression. Altogether, the model enables DenTeeth to optimize continually with the help of reinforcement AI. The model consists of two parts:
 +
                    <ol id="list" >
 +
                        <li><a href="https://2021.igem.org/Team:NCTU_Formosa/Prediction_Model">Prediction Model(Click to this
 +
                            page)</a></li>
 +
                        <li><a href="https://2021.igem.org/Team:NCTU_Formosa/Efficiency_Optimization_Model">Efficiency
 +
                              Optimization Model(Click to this page)</a></li>
 +
                    </ol>
 +
                </p><!--
 +
                <div id="Btn_Open">
 +
                    <img class="ReadMore2" style="display: none; " id="img_Open" src="https://static.igem.org/mediawiki/2021/1/15/T--NCTU_Formosa--ellipsis.svg">
 +
                </div>
 +
                <div id="Btn_Close">
 +
                    <img class="ReadMore2" id="img_Close" src="https://static.igem.org/mediawiki/2021/5/50/T--NCTU_Formosa--close.svg">*/
 +
                </div>-->
 +
                <img src="https://static.igem.org/mediawiki/2021/2/26/T--NCTU_Formosa--rainnie_model_flow_chart.png?fbclid=IwAR0BygOOr-lu6uy3B2_jgEBJJL4l8N97nVDCRqj4ETNPZRjBqbU7NAFakiQ" class="images" id=" Growth_PE" alt=" growth curve of E. coli and P.gingivalis"/>
 +
                <div class="explanation"><svg class="icon" aria-hidden="true" data-prefix="fas" data-icon="arrow-circle-up"
 +
                    role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
 +
                    <path fill="currentColor"
 +
                        d="M8 256C8 119 119 8 256 8s248 111 248 248-111 248-248 248S8 393 8 256zm143.6 28.9l72.4-75.5V392c0 13.3 10.7 24 24 24h16c13.3 0 24-10.7 24-24V209.4l72.4 75.5c9.3 9.7 24.8 9.9 34.3.4l10.9-11c9.4-9.4 9.4-24.6 0-33.9L273 107.7c-9.4-9.4-24.6-9.4-33.9 0L106.3 240.4c-9.4 9.4-9.4 24.6 0 33.9l10.9 11c9.6 9.5 25.1 9.3 34.4-.4z">
 +
                    </path>
 +
                </svg>The structure of the model</div>
 +
                </div>
 +
 
 +
            </div>       
 +
            <div class="dog-button">
 +
                <div class="dog-img" id="img-link1">
 +
                    <div class="dog-txt">Prediction Model</div>
 +
                    <img style="border-radius: 5% 0 0 0;" src="https://static.igem.org/mediawiki/2021/3/3c/T--NCTU_Formosa--growth_model_link.svg" alt="dog">
 +
                </div>
 +
                <div class="dog-img" id="img-link2">
 +
                    <div class="dog-txt-c">Efficiency Optimization Model</div>
 +
                    <img style="border-radius: 0 5% 0 0;" src="https://static.igem.org/mediawiki/2021/8/8a/T--NCTU_Formosa--quorum_link.svg" title="Edward Jenner" alt="Design">
 +
                </div>
 +
            </div>
 +
                <div id="tab01" class="tab-inner" style="display:block;">
 +
                    <h1 class="subtopic">Prediction Model</h1>
 +
                    <p>
 +
                    &#8195;&#8195;The Prediction Model is mainly to analyze the growth of bacteria and the expression of protein and peptide. It can also predict the killing rate and sterilization rate. By this model, we can define the efficiency of DenTeeth.
 +
                    </p>
 +
                    <a href="https://2021.igem.org/Team:NCTU_Formosa/Prediction_Model"><img class="ReadMore1" src="https://static.igem.org/mediawiki/2021/2/22/T--NCTU_Formosa--double-chevron.svg"></a>
 +
                </div>
 +
                <div id="tab02" class="tab-inner">
 +
                    <h1 class="subtopic">Efficiency Optimization Model</h1>
 +
                    <p>
 +
                    &#8195;&#8195;To optimize the frequency of using DenTeeth and making our model applies to the dogs better. We input the results of the Prediction Mode to the Optimized Frequence Model and find out the best strategy.
 +
                    </p>
 +
                    <a href="https://2021.igem.org/Team:NCTU_Formosa/Efficiency_Optimization_Model"><img class="ReadMore1" src="https://static.igem.org/mediawiki/2021/2/22/T--NCTU_Formosa--double-chevron.svg"></a>
 +
                </div>
 +
 
 +
            <div style="position: relative;">
 +
                <a href="https://2021.igem.org/Team:NCTU_Formosa/Prediction_Model"><img id="NextPage" src="https://static.igem.org/mediawiki/2021/5/55/T--NCTU_Formosa--right-arrow.svg"></a>
 +
             </div> 
 
         </div>
 
         </div>
 +
<div id="dark_mode"><span class="material-icons">
 +
dark_mode
 +
</span>Dark Mode</div>
 
     </main>
 
     </main>
 
</body>
 
</body>
Line 20: Line 78:
 
     }
 
     }
 
     .main-content hr{
 
     .main-content hr{
−
         border-top: 1px solid #696969;
+
         border-top: 0 1px solid #696969;
 
         margin-top: 10%;
 
         margin-top: 10%;
 
         margin-bottom: 2%;
 
         margin-bottom: 2%;
Line 33: Line 91:
 
         margin-left: auto;
 
         margin-left: auto;
 
         margin-right: auto;
 
         margin-right: auto;
−
         margin-bottom: 8%;
+
         margin-bottom: 10%;
−
         margin-top: -12%;
+
         margin-top: -15%;
 
         display: block;
 
         display: block;
−
         width: 10% !important;
+
         width: 10%;
 
         animation: floating 3s ease-in-out infinite;
 
         animation: floating 3s ease-in-out infinite;
 
         cursor: pointer;
 
         cursor: pointer;
 
     }
 
     }
−
 
+
    #NextPage{
 +
        position: absolute;
 +
        width: 8%;
 +
        right: -15%;
 +
        bottom: -20%;
 +
    }
 +
    #NextPage:hover{
 +
        transform: scale(1.2);
 +
    }
 
     @keyframes floating {
 
     @keyframes floating {
 
         0% {
 
         0% {
Line 58: Line 124:
 
         transform: scale(1.2);
 
         transform: scale(1.2);
 
         transition: .3s;
 
         transition: .3s;
 +
        cursor: pointer;
 
     }
 
     }
  
Line 72: Line 139:
 
         font-size: 3vw;
 
         font-size: 3vw;
 
         line-height: 48px;
 
         line-height: 48px;
−
         padding: 10%;
+
         padding: 2% 10% 0;
 
     }
 
     }
−
     .topic-r{
+
     .subtopic{
−
         color: RGB(83,164,253);
+
         color: #fdcd3d;
 
         font-family: 'OtomanopeeOne', sans-serif !important;
 
         font-family: 'OtomanopeeOne', sans-serif !important;
 
         font-size: 2.5vw;
 
         font-size: 2.5vw;
−
         padding-bottom: 5%;
+
         padding: 3% 2% 4%;
−
        line-height: 30px;
+
 
     }
 
     }
−
     .ref{
+
     #topic2{
−
         font-size: 1vw;
+
         padding: 4% 10% 4%;
−
        font-family: 'Noto Sans JP', sans-serif;
+
−
        color: #696969;
+
 
     }
 
     }
−
     .subtopic i{
+
     .section{
−
         font-size: 2.5vw !important;
+
         margin-bottom: 5%;
−
         }  
+
    }
−
     .subtopic{
+
    .s1{
−
         text-align: center;
+
         margin-bottom: 5%;
−
         color: RGB(253,172,83);
+
    }
−
         line-height: 48px;
+
     .s2 {
−
         font-family: 'OtomanopeeOne', sans-serif;
+
         position: relative;
−
         font-size: 2.5vw;
+
        border-radius: 5%;
−
         padding: 8% 0 5%;
+
         margin-bottom: 10%;
 +
         margin-top: 5%;
 +
         /*border-width: 5px;
 +
        border-style: dashed;
 +
         border-color: rgb(255, 193, 7);*/
 +
    }
 +
    .s2 p{
 +
         padding: 3% 3% 0;
 
     }
 
     }
 
     .section p{
 
     .section p{
Line 104: Line 175:
 
         font-size: 2vw !important;
 
         font-size: 2vw !important;
 
         font-family: 'Noto Sans JP', sans-serif;
 
         font-family: 'Noto Sans JP', sans-serif;
 +
    }
 +
    .tab-inner p{
 +
        font-size: 2vw !important;
 +
        font-family: 'Noto Sans JP', sans-serif;
 +
        margin: 0 1.5%;
 +
        color: #ffe779;
 
     }
 
     }
 
     .images{
 
     .images{
Line 110: Line 187:
 
         margin-left: auto;
 
         margin-left: auto;
 
         margin-right: auto;
 
         margin-right: auto;
 +
    }
 +
    .dog-button {
 +
        display: flex;
 +
        width: 80%;
 +
        justify-content: space-between;
 +
        justify-content: center;
 +
        margin-left: auto;
 +
        margin-right: auto;
 +
    }
 +
    .dog-img {
 +
        flex: 1 1 auto;
 +
        position: relative;
 +
        width: 33%;
 +
    }
 +
    .dog-txt{
 +
        position: absolute;
 +
        top: 48%;
 +
        left: 13%;
 +
        text-align: center;
 +
        line-height: 3vw;
 +
        color: whitesmoke;
 +
        margin-left: auto;
 +
        margin-right: auto;
 +
        font-size: 3vw;
 +
        font-family: 'OtomanopeeOne', sans-serif ;
 +
 +
    }
 +
    .dog-txt-c{
 +
        position: absolute;
 +
        top: 41%;
 +
        left: 0%;
 +
        text-align: center;
 +
        line-height: 3vw;
 +
        color: whitesmoke;
 +
        margin-left: auto;
 +
        margin-right: auto;
 +
        font-size: 3vw;
 +
        font-family: 'OtomanopeeOne', sans-serif ;
 +
    }
 +
    .dog-img img{
 +
        width: 100%;
 +
    }
 +
    .dog-img:hover{
 +
        opacity: 0.5;
 +
        transition: 0.3s;
 +
        cursor: pointer;
 +
    }
 +
    .tab-inner{
 +
        width: 80%;
 +
        height: 400px;
 +
        background-color: #1d4eac;
 +
        border-radius: 0 0 10px 10px;
 +
        display: none;
 +
        position: relative;
 +
        margin-left: auto;
 +
        margin-right: auto;
 +
    }
 +
    .ReadMore1{
 +
        position: absolute;
 +
        width: 6%;
 +
        right: 2%;
 +
        bottom: 5%;
 +
    }
 +
    .op{
 +
        opacity: 0.9;
 +
    }
 +
    .ReadMore1:hover{
 +
        transform: scale(1.2);
 +
    }
 +
    .ReadMore2{
 +
        position: absolute;
 +
        width: 6%;
 +
        right: 50%;
 +
        bottom: 5%;
 +
    }
 +
    #img_Open:hover{
 +
        transform: scale(1.2);
 +
        cursor: pointer;
 +
    }
 +
    #img_Close:hover{
 +
        transform: scale(1.2);
 +
        cursor: pointer;
 +
    }
 +
    #list li a{
 +
        font-size: 2vw !important;
 +
    }
 +
    #list{
 +
        list-style-image: url("https://static.igem.org/mediawiki/2021/b/bc/T--NCTU_Formosa--list_image.svg");
 +
        font-family: 'Noto Sans JP', sans-serif;
 +
        padding-left: 5% !important;
 +
        font-size: 2vw !important;
 +
        padding-bottom: 5%;
 +
    }
 +
    .night{
 +
        color: whitesmoke;
 +
        background-color: #13102c !important;
 +
    }
 +
    #dark_mode{
 +
        font-size: 5px;
 +
        font-family: 'OtomanopeeOne', sans-serif  !important;
 +
    }
 +
    #dark_mode:hover {
 +
        cursor: pointer;
 +
        color: RGB(253,172,83);
 +
    } 
 +
    #dark_mode:hover .material-icons{
 +
        cursor: pointer;
 +
        color: RGB(253,172,83);
 +
    } 
 +
    .explanation {
 +
        font-size: 1.3vw;
 +
        text-align: center;
 +
        margin: 10px 0 10%;
 +
        color: RGB(253, 172, 83);
 +
    }
 +
    .explanation i{
 +
        font-size: 1.3vw;
 +
    }
 +
    .icon {
 +
        width: 1.5vw;
 +
        color: RGB(253, 172, 83);
 
     }
 
     }
 
     @media screen and (max-width: 750px){
 
     @media screen and (max-width: 750px){
 
     #nextBottom{
 
     #nextBottom{
−
         width: 10%;
+
        display: none;
 +
    }
 +
    #NextPage {
 +
         width: 15%;
 +
        right: -10%;
 +
        bottom: 5%;
 +
    }
 +
    .s2{
 +
        margin-bottom: 18%;
 
     }
 
     }
 
   .topic{
 
   .topic{
 
         font-size: 9vw;
 
         font-size: 9vw;
 
         line-height: 50px;
 
         line-height: 50px;
−
    }
 
−
    .topic-r{
 
−
        font-size: 7vw;
 
−
        line-height: 30px;
 
 
     }
 
     }
 
     .subtopic i{
 
     .subtopic i{
−
         font-size: 8vw !important;
+
         font-size: 6vw !important;
 
         }  
 
         }  
 
     .subtopic{
 
     .subtopic{
−
 
+
         line-height: 20px;
−
         line-height: 50px;
+
         font-size: 6vw;
−
         font-size: 7vw;
+
 
     }
 
     }
 
     .section p{
 
     .section p{
 
         font-size: 5vw !important;
 
         font-size: 5vw !important;
 +
    }
 +
    #list li a{
 +
            font-size: 5vw !important;
 +
            line-height: 50px;
 
     }
 
     }
 
     .section p i{
 
     .section p i{
 
         font-size: 5vw !important;
 
         font-size: 5vw !important;
 +
    }
 +
    .tab-inner p{
 +
        font-size: 4vw !important;
 
     }
 
     }
 
     .images{
 
     .images{
Line 147: Line 355:
 
         font-size: 3vw;
 
         font-size: 3vw;
 
     }  
 
     }  
 +
    .ReadMore1 {
 +
        position: absolute;
 +
        width: 13%;
 +
        right: 4%;
 +
        bottom: 3%;
 +
    }
 +
    .ReadMore2 {
 +
        width: 14%;
 +
        right: 42%;
 +
        bottom: 2%;
 +
    }
 +
    #list{
 +
        padding-bottom: 5%;
 +
    }
 +
    .explanation {
 +
        font-size: 2vw;
 +
    }
 +
    .explanation i{
 +
        font-size: 2vw;
 +
    }
 
     }
 
     }
 
</style>
 
</style>
Line 154: Line 382:
 
             $("html,body").animate({scrollTop: $("#topic1").offset().top}, 800)
 
             $("html,body").animate({scrollTop: $("#topic1").offset().top}, 800)
 
         });
 
         });
 +
 +
        $("#dark_mode").click(
 +
            function(){
 +
            $("#bodyContent").toggleClass("night");
 +
            $(".main-content").toggleClass("night");
 +
            $(".material-icons").toggleClass("night");
 +
        });
 +
 +
        $("#img-link1").click(function(){
 +
            $("#tab01").slideToggle();
 +
            $(".dog-img:not(#img-link1)").addClass( "op" );
 +
            $(this).removeClass( "op" );
 +
            $("#tab02").hide();
 +
            $("#tab03").hide();
 +
        });
 +
        $("#img-link2").click(function(){
 +
            $("#tab02").slideToggle();
 +
            $(".dog-img:not(#img-link2)").addClass( "op" );
 +
            $(this).removeClass( "op" );
 +
            $("#tab03").hide();
 +
            $("#tab01").hide();
 +
        });
 +
 +
 +
        //var display1 =$('#tab01').css('display');
 +
        //var display2 =$('#tab02').css('display');
 +
        //var display3 =$('#tab03').css('display');
 +
        //if(display1 == 'none' &amp;&amp; display2 == 'none' &amp;&amp; display3 == 'none'){
 +
          // $(".dog-img").removeClass( "op" );}; 
 +
 +
          $("#img_Open").click(function(){
 +
                $("#p2").slideDown();
 +
                $("#list").fadeIn();
 +
                $(this).hide();
 +
                $("#img_Close").fadeIn();
 +
          });
 +
          $("#img_Close").click(function(){
 +
                $("#p2").slideUp();
 +
                $("#list").fadeOut();
 +
                $(this).hide();
 +
                $("#img_Open").fadeIn();
 +
          });
 +
 
 +
    });
 +
 
 
    
 
    
−
    })
 
 
</script>
 
</script>
 +
 
</html>
 
</html>
 
{{NCTU_Formosa/footer}}
 
{{NCTU_Formosa/footer}}

Latest revision as of 15:30, 30 November 2021


Loading...

Overview

  Oral cavity is a hotbed for pathogens of periodontal diseases, as the goal of modelling is to simulate the microenvironment incorporated with Denteeth, mainly the overturn of pathogens, and make predictions on their extinction. Therefore, we compute the competing bacterial growing patterns, and the killing effect on pathogens. Also, we propose a renew rate of the final product, considering the biobrick design in DenTeeth, including quorum sensing, target peptide expression. Altogether, the model enables DenTeeth to optimize continually with the help of reinforcement AI. The model consists of two parts:

  1. Prediction Model(Click to this page)
  2. Efficiency Optimization Model(Click to this page)

growth curve of E. coli and P.gingivalis
The structure of the model
Prediction Model
dog
Efficiency Optimization Model
Design

Prediction Model

  The Prediction Model is mainly to analyze the growth of bacteria and the expression of protein and peptide. It can also predict the killing rate and sterilization rate. By this model, we can define the efficiency of DenTeeth.

Efficiency Optimization Model

  To optimize the frequency of using DenTeeth and making our model applies to the dogs better. We input the results of the Prediction Mode to the Optimized Frequence Model and find out the best strategy.

dark_mode Dark Mode
footer_bg footer_nctu footer_fox
FOLLOW US
fb ig
CONTACT US
mail
LOCATION
location