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

 
(173 intermediate revisions by 2 users not shown)
Line 2: Line 2:
 
{{NCTU_Formosa/header}}
 
{{NCTU_Formosa/header}}
 
<html>
 
<html>
−
 
−
 
 
<body>
 
<body>
 
     <main>
 
     <main>
Line 10: 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 s1">
+
             <div class="section s2">
−
                 <h1 class="topic" id="topic1">Overview</h1>
+
                 <h1 class="topic" id="topic2">Overview</h1>
−
                 <p id="p1">
+
                 <!--<p id="p1">
−
                     &#8195;&#8195;With quorum sensing and repressible promoter, our biobrick has a time span to achieve oral sterilization and restoration. With the increase of oral bacteria, it will activate the antimicrobial peptide LL-37 to inhibit the large amount of bacteria which cause tooth decay and periodontal disease. When the amount of bacteria decrease, it will activate BMP2 and STATH to repair gums and help tooth remineralization. This mechanism can avoid the formation of biofilm during the remineralization process, and it also can achieve the best efficient restoration on the condition of fewer bacteria.
+
                     &#8195;&#8195;Modeling is calculating the physical phenomenon by using mathematical methods or logical algorithms.<br><br><br>-->
 
                 </p>
 
                 </p>
−
            </div>
+
                <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-button">
−
                 <a href="https://2021.igem.org/Team:NCTU_Formosa" class="dog-img" id="img-link1">
+
                 <div class="dog-img" id="img-link1">
−
                     <div class="dog-txt">Growth Model</div>
+
                     <div class="dog-txt">Prediction Model</div>
−
                     <img src="https://static.igem.org/mediawiki/2021/3/3c/T--NCTU_Formosa--growth_model_link.svg" alt="dog">
+
                     <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">
−
                 </a>
+
                 </div>
−
                 <a href="https://2021.igem.org/Team:NCTU_Formosa/Design" class="dog-img" id="img-link2">
+
                 <div class="dog-img" id="img-link2">
−
                     <div class="dog-txt-c">Quorum Sensing Model</div>
+
                     <div class="dog-txt-c">Efficiency Optimization Model</div>
−
                     <img src="https://static.igem.org/mediawiki/2021/8/8a/T--NCTU_Formosa--quorum_link.svg" title="Edward Jenner" alt="Design">
+
                     <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">
−
                 </a>
+
                 </div>
−
                <a href="https://2021.igem.org/Team:NCTU_Formosa/Human_Practices" class="dog-img" id="img-link3">
+
−
                    <div class="dog-txt-up">Optimized Frequency Model</div>
+
−
                    <img src="https://static.igem.org/mediawiki/2021/f/f6/T--NCTU_Formosa--optimized_freq_link.svg" title="fauxels" alt="hp">
+
−
                </a>              
+
 
             </div>
 
             </div>
−
                 <div id="tab01" class="tab-inner">
+
                 <div id="tab01" class="tab-inner" style="display:block;">
−
                     <p>tab01的內容</p>
+
                    <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>
 
                 <div id="tab02" class="tab-inner">
 
                 <div id="tab02" class="tab-inner">
−
                     <p>tab02的內容</p>
+
                     <h1 class="subtopic">Efficiency Optimization Model</h1>
−
                </div>
+
                    <p>
−
                <div id="tab03" class="tab-inner">
+
                    &#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>tab03的內容</p>
+
                    </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>
  
−
             <div class="section s2">
+
             <div style="position: relative;">
−
                 <h1 class="topic" id="topic2">Assumptions of Whole Model</h1>
+
                 <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>
−
                <p id="p1">
+
             </div>
−
                    &#8195;&#8195;With quorum sensing and repressible promoter, our biobrick has a time span to achieve oral sterilization and restoration. With the increase of oral bacteria, it will activate the antimicrobial peptide LL-37 to inhibit the large amount of bacteria which cause tooth decay and periodontal disease. When the amount of bacteria decrease, it will activate BMP2 and STATH to repair gums and help tooth remineralization. This mechanism can avoid the formation of biofilm during the remineralization process, and it also can achieve the best efficient restoration on the condition of fewer bacteria.
+
−
                </p>
+
−
             </div>
+
 
         </div>
 
         </div>
 +
<div id="dark_mode"><span class="material-icons">
 +
dark_mode
 +
</span>Dark Mode</div>
 
     </main>
 
     </main>
 
</body>
 
</body>
Line 75: Line 97:
 
         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 {
Line 93: Line 124:
 
         transform: scale(1.2);
 
         transform: scale(1.2);
 
         transition: .3s;
 
         transition: .3s;
 +
        cursor: pointer;
 
     }
 
     }
  
Line 107: Line 139:
 
         font-size: 3vw;
 
         font-size: 3vw;
 
         line-height: 48px;
 
         line-height: 48px;
−
         padding: 10% 10% 5%;
+
         padding: 2% 10% 0;
 +
    }
 +
    .subtopic{
 +
        color: #fdcd3d;
 +
        font-family: 'OtomanopeeOne', sans-serif !important;
 +
        font-size: 2.5vw;
 +
        padding: 3% 2% 4%;
 +
    }
 +
    #topic2{
 +
        padding: 4% 10% 4%;
 +
    }
 +
    .section{
 +
        margin-bottom: 5%;
 +
    }
 +
    .s1{
 +
        margin-bottom: 5%;
 +
    }
 +
    .s2 {
 +
        position: relative;
 +
        border-radius: 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 116: 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 125: Line 190:
 
     .dog-button {
 
     .dog-button {
 
         display: flex;
 
         display: flex;
−
         width: 100%;
+
         width: 80%;
 
         justify-content: space-between;
 
         justify-content: space-between;
 
         justify-content: center;
 
         justify-content: center;
Line 138: Line 203:
 
     .dog-txt{
 
     .dog-txt{
 
         position: absolute;
 
         position: absolute;
−
         top: 40%;
+
         top: 48%;
−
         left: 3%;
+
         left: 13%;
 
         text-align: center;
 
         text-align: center;
 
         line-height: 3vw;
 
         line-height: 3vw;
Line 151: Line 216:
 
     .dog-txt-c{
 
     .dog-txt-c{
 
         position: absolute;
 
         position: absolute;
−
         top: 30%;
+
         top: 41%;
−
         left: 10%;
+
         left: 0%;
 
         text-align: center;
 
         text-align: center;
 
         line-height: 3vw;
 
         line-height: 3vw;
−
        color: whitesmoke;
 
−
        margin-left: auto;
 
−
        margin-right: auto;
 
−
        font-size: 3vw;
 
−
        font-family: 'OtomanopeeOne', sans-serif ;
 
−
    }
 
−
    .dog-txt-up{
 
−
        position: absolute;
 
−
        top: 25%;
 
−
        left: 5%;
 
−
        line-height: 3vw;
 
−
        text-align: center;
 
 
         color: whitesmoke;
 
         color: whitesmoke;
 
         margin-left: auto;
 
         margin-left: auto;
Line 179: Line 232:
 
         opacity: 0.5;
 
         opacity: 0.5;
 
         transition: 0.3s;
 
         transition: 0.3s;
 +
        cursor: pointer;
 
     }
 
     }
 
     .tab-inner{
 
     .tab-inner{
−
         width: 100%;
+
         width: 80%;
−
         height: 300px;
+
         height: 400px;
−
        border: 1px solid white;
+
         background-color: #1d4eac;
−
         background-color: #729fe9;
+
         border-radius: 0 0 10px 10px;
−
         border-radius: 10px;
+
 
         display: none;
 
         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 224: 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 232: Line 383:
 
         });
 
         });
  
−
         $("#img-link1").hover(function(){
+
         $("#dark_mode").click(
−
             $("#tab01").slideToggle()
+
            function(){
 +
             $("#bodyContent").toggleClass("night");
 +
            $(".main-content").toggleClass("night");
 +
            $(".material-icons").toggleClass("night");
 
         });
 
         });
−
         $("#img-link2").hover(function(){
+
 
−
             $("#tab02").slideToggle()
+
         $("#img-link1").click(function(){
 +
             $("#tab01").slideToggle();
 +
            $(".dog-img:not(#img-link1)").addClass( "op" );
 +
            $(this).removeClass( "op" );
 +
            $("#tab02").hide();
 +
            $("#tab03").hide();
 
         });
 
         });
−
         $("#img-link3").hover(function(){
+
         $("#img-link2").click(function(){
−
             $("#tab03").slideToggle()
+
             $("#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