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

 
(148 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 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;Modeling is calculating the physical phenomenon by using mathematical methods or logical algorithms. Our model aims at stimulate bacterial growth curve with DenTeeth and predicting the function of quorum sensing system. Besides, we also develop an AI which can accurately find out the best frequency for each dog using DenTeeth . Our model can be divided into the following three parts:
+
                     &#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">
−
                 <div 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 style="border-radius: 5% 0 0 5%;" 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">
 
                 </div>
 
                 </div>
−
                 <div 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">
 
                 </div>
 
                 </div>
−
                <div 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 style="border-radius: 0 5% 5% 0;" src="https://static.igem.org/mediawiki/2021/f/f6/T--NCTU_Formosa--optimized_freq_link.svg" title="fauxels" alt="hp">
 
−
                </div>               
 
 
             </div>
 
             </div>
−
                 <div id="tab01" class="tab-inner">
+
                 <div id="tab01" class="tab-inner" style="display:block;">
 +
                    <h1 class="subtopic">Prediction Model</h1>
 
                     <p>
 
                     <p>
−
                    Growth Model<br><br>
+
                     &#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.
−
                     &#8195;&#8195;Growth Model is mainly to analyze the growth of bacteria in the dog's oral cavities before and after using DenTeeth. We can not only know the effect of our product, but also predict the concentration of target proteins.
+
 
                     </p>
 
                     </p>
−
                     <img class="ReadMore1" src="https://static.igem.org/mediawiki/2021/2/22/T--NCTU_Formosa--double-chevron.svg">
+
                     <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">
 +
                    <h1 class="subtopic">Efficiency Optimization Model</h1>
 
                     <p>
 
                     <p>
−
                    Quorun Sensing Model<br><br>
+
                     &#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.
−
                     &#8195;&#8195;Growth Model is mainly to analyze the growth of bacteria in the dog's oral cavities before and after using DenTeeth. We can not only know the effect of our product, but also predict the concentration of target proteins.
+
 
                     </p>
 
                     </p>
−
                     <img class="ReadMore1" src="https://static.igem.org/mediawiki/2021/2/22/T--NCTU_Formosa--double-chevron.svg">
+
                     <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 id="tab03" class="tab-inner">
+
−
                    <p>
+
−
                    Optimized Frequency Model<br><br>
+
−
                    &#8195;&#8195;Growth Model is mainly to analyze the growth of bacteria in the dog's oral cavities before and after using DenTeeth. We can not only know the effect of our product, but also predict the concentration of target proteins.
+
−
                    </p>
+
−
                    <img class="ReadMore1" src="https://static.igem.org/mediawiki/2021/2/22/T--NCTU_Formosa--double-chevron.svg">
+
 
                 </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="p2">
+
             </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 class="ReadMore2" id="Btn_Open">
+
−
                    <img src="">
+
−
                </div>
+
−
                <div class="ReadMore2" id="Btn_Close">
+
−
                    <img src="">
+
−
                </div>
+
−
             </div>
+
 
         </div>
 
         </div>
 +
<div id="dark_mode"><span class="material-icons">
 +
dark_mode
 +
</span>Dark Mode</div>
 
     </main>
 
     </main>
 
</body>
 
</body>
Line 92: 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 125: 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{
 
     #topic2{
Line 134: Line 154:
 
     }
 
     }
 
     .s1{
 
     .s1{
−
         margin-bottom: 15%;
+
         margin-bottom: 5%;
 
     }
 
     }
 
     .s2 {
 
     .s2 {
 +
        position: relative;
 
         border-radius: 5%;
 
         border-radius: 5%;
−
         margin-top: 20%;
+
        margin-bottom: 10%;
−
         border-width: 5px;
+
         margin-top: 5%;
 +
         /*border-width: 5px;
 
         border-style: dashed;
 
         border-style: dashed;
−
         border-color: rgb(255, 193, 7);
+
         border-color: rgb(255, 193, 7);*/
 
     }
 
     }
 
     .s2 p{
 
     .s2 p{
−
         padding: 3%;
+
         padding: 3% 3% 0;
 
     }
 
     }
 
     .section p{
 
     .section p{
Line 153: 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 162: 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 175: 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 188: Line 216:
 
     .dog-txt-c{
 
     .dog-txt-c{
 
         position: absolute;
 
         position: absolute;
−
         top: 20%;
+
         top: 41%;
−
         left: 5%;
+
         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: 20%;
 
−
        left: 5%;
 
−
        line-height: 3vw;
 
−
        text-align: center;
 
 
         color: whitesmoke;
 
         color: whitesmoke;
 
         margin-left: auto;
 
         margin-left: auto;
Line 219: Line 235:
 
     }
 
     }
 
     .tab-inner{
 
     .tab-inner{
−
         width: 100%;
+
         width: 80%;
−
         height: 300px;
+
         height: 400px;
 
         background-color: #1d4eac;
 
         background-color: #1d4eac;
−
         border-radius: 10px;
+
         border-radius: 0 0 10px 10px;
 
         display: none;
 
         display: none;
 
         position: relative;
 
         position: relative;
 +
        margin-left: auto;
 +
        margin-right: auto;
 
     }
 
     }
 
     .ReadMore1{
 
     .ReadMore1{
 
         position: absolute;
 
         position: absolute;
−
         width: 5%;
+
         width: 6%;
−
         right: 0;
+
         right: 2%;
−
         bottom: 0;
+
        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 268: 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 274: Line 381:
 
         $("#nextBottom").click(function(){
 
         $("#nextBottom").click(function(){
 
             $("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(){
 
         $("#img-link1").click(function(){
−
             $("#tab01").slideToggle()
+
             $("#tab01").slideToggle();
 +
            $(".dog-img:not(#img-link1)").addClass( "op" );
 +
            $(this).removeClass( "op" );
 +
            $("#tab02").hide();
 +
            $("#tab03").hide();
 
         });
 
         });
 
         $("#img-link2").click(function(){
 
         $("#img-link2").click(function(){
−
             $("#tab02").slideToggle()
+
             $("#tab02").slideToggle();
−
        });
+
            $(".dog-img:not(#img-link2)").addClass( "op" );
−
        $("#img-link3").click(function(){
+
            $(this).removeClass( "op" );
−
             $("#tab03").slideToggle()
+
             $("#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