Skip to content
Snippets Groups Projects
Commit 3998c39b authored by Gibran Gonzalez's avatar Gibran Gonzalez
Browse files

Adds empty memes carousel, adds captions in software

parent d53cf41b
No related branches found
No related tags found
No related merge requests found
Pipeline #166357 passed
Stage: build
Stage: deploy
Hide whitespace changes
Inline Side-by-side
wiki/menu.html
+ 1
− 0
View file @ 3998c39b
......@@ -88,6 +88,7 @@
<li><a class="dropdown-item" href="{{ url_for('pages', page='communication') }}">Education and Communication</a></li>
<li><a class="dropdown-item" href="{{ url_for('pages', page='inclusivity') }}">Inclusivity</a></li>
<li><a class="dropdown-item" href="{{ url_for('pages', page='bioart') }}">Bioart</a></li>
<li><a class="dropdown-item" href="{{ url_for('pages', page='memes') }}">Memes</a></li>
</ul>
</li>
......
wiki/pages/memes.html
+ 28
− 189
View file @ 3998c39b
{% extends "layout.html" %}
{% block title %}Proposed Implementation{% endblock %}
{% block lead %}Explain how you would implement your project in the real world.{% endblock %}
{% block img_url %}https://static.igem.wiki/teams/4506/wiki/lab.jpg{% endblock %}
{% block title %}Memes{% endblock %}
{% block img_url %}https://static.igem.wiki/teams/4506/wiki/notebookpage.jpg{% endblock %}
{% block page_content %}
<div class="scroll-line-2"></div>
<nav class="page-content mt-5">
<div class="container mt-3 mw-100">
<div class="row">
<div class="sidebar col-lg-2 d-none d-lg-block">
<div class="sticky-top sidebar-container">
<h5 class="sidebar-title">Section Index</h5>
<!-- INDEX PANTALLAS GRANDES -->
<div role="button" onclick="window.scrollBy(0,document.getElementById('Titulo1').getBoundingClientRect().top-70);"
tabindex="0">
<div class="scroll-ball d-inline-block Titulo1 d-none"></div>
<h2 class="sidebar-text d-inline-block">Titulo-1</h2>
</div>
<div role="button" onclick="window.scrollBy(0,document.getElementById('Titulo2').getBoundingClientRect().top-70);"
tabindex="0">
<div class="scroll-ball d-inline-block Titulo2 d-none"></div>
<h2 class="sidebar-text d-inline-block">Titulo-2</h2>
</div>
<div role="button" onclick="window.scrollBy(0,document.getElementById('Titulo3').getBoundingClientRect().top-70);"
tabindex="0">
<div class="scroll-ball d-inline-block Titulo3 d-none"></div>
<h2 class="sidebar-text d-inline-block">Titulo-3</h2>
</div>
<div role="button" onclick="window.scrollBy(0,document.getElementById('Titulo4').getBoundingClientRect().top-70);"
tabindex="0">
<div class="scroll-ball d-inline-block Titulo4 d-none"></div>
<h2 class="sidebar-text d-inline-block">Titulo-4</h2>
</div>
<div role="button" onclick="window.scrollBy(0,document.getElementById('Titulo5').getBoundingClientRect().top-70);"
tabindex="0">
<div class="scroll-ball d-inline-block Titulo5 d-none"></div>
<h2 class="sidebar-text d-inline-block">Titulo-5</h2>
</div>
<div role="button" onclick="window.scrollBy(0,document.getElementById('Titulo6').getBoundingClientRect().top-70);"
tabindex="0">
<div class="scroll-ball d-inline-block Titulo6 d-none"></div>
<h2 class="sidebar-text d-inline-block">Titulo-6</h2>
</div>
<!-- FIN INDEX PANTALLAS GRANDES -->
</div>
<div class="row mt-4 page-content">
<div id="NotebookCarousel" class="carousel slide" data-bs-interval="false" data-bs-ride="carousel">
<div class="carousel-inner">
<!-- CONTENIDO DEL CARRUSEL -->
<div class="carousel-item active">
<img src="https://static.igem.wiki/teams/4506/wiki/team/dsc01915-2.jpg" class="d-block w-100" alt="Meme 1">
</div>
<a class="d-block d-lg-none position-fixed section-button px-1 py-3" data-bs-toggle="collapse" href="#sections" role="button" aria-expanded="false" aria-controls="collapseExample">
Sections
</a>
<div id="sections" class="collapse section-toggle position-fixed p-4">
<!-- INDEX PANTALLAS CHICAS -->
<div role="button" onclick="window.scrollBy(0,document.getElementById('Titulo1').getBoundingClientRect().top-(document.querySelector('.navbar').offsetHeight));"
tabindex="0">
<div class="scroll-ball d-inline-block Titulo1"></div>
<h2 class="sidebar-text d-inline-block">Titulo-1</h2>
</div>
<div role="button" onclick="window.scrollBy(0,document.getElementById('Titulo2').getBoundingClientRect().top-(document.querySelector('.navbar').offsetHeight));"
tabindex="0">
<div class="scroll-ball d-inline-block Titulo2"></div>
<h2 class="sidebar-text d-inline-block">Titulo-2</h2>
</div>
<div role="button" onclick="window.scrollBy(0,document.getElementById('Titulo3').getBoundingClientRect().top-(document.querySelector('.navbar').offsetHeight));"
tabindex="0">
<div class="scroll-ball d-inline-block Titulo3"></div>
<h2 class="sidebar-text d-inline-block">Titulo-3</h2>
</div>
<div role="button" onclick="window.scrollBy(0,document.getElementById('Titulo4').getBoundingClientRect().top-(document.querySelector('.navbar').offsetHeight));"
tabindex="0">
<div class="scroll-ball d-inline-block Titulo4"></div>
<h2 class="sidebar-text d-inline-block">Titulo-4</h2>
</div>
<div role="button" onclick="window.scrollBy(0,document.getElementById('Titulo5').getBoundingClientRect().top-(document.querySelector('.navbar').offsetHeight));"
tabindex="0">
<div class="scroll-ball d-inline-block Titulo5"></div>
<h2 class="sidebar-text d-inline-block">Titulo-5</h2>
</div>
<div role="button" onclick="window.scrollBy(0,document.getElementById('Titulo6').getBoundingClientRect().top-(document.querySelector('.navbar').offsetHeight));"
tabindex="0">
<div class="scroll-ball d-inline-block Titulo6"></div>
<h2 class="sidebar-text d-inline-block">Titulo-6</h2>
</div>
<!-- FIN INDEX PANTALLAS CHICAS -->
<div class="carousel-item">
<img src="https://static.igem.wiki/teams/4506/wiki/team/dsc01906-2.jpg" class="d-block w-100" alt="Meme 2">
</div>
<div class="content col-lg-9">
<!-- CONTENIDO DE LA PAGINA -->
<section id="Titulo1" class="page-section">
<div class="row">
<div class="col-5 bg-primary"></div>
<div class="col-6 border-start border-dark border-2 ms-2">
<h2>Titulo-1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat itaque odio ab. Iure neque natus nam ipsa sunt accusamus enim illum fugit doloremque cupiditate dicta, maiores, ducimus fuga ullam voluptates. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ducimus nam alias aspernatur architecto saepe voluptates, molestias obcaecati quas laudantium temporibus nobis magnam inventore ipsum provident recusandae rerum magni vel ea!</p>
</div>
</div>
</section>
<section id="Titulo2" class="page-section">
<div class="row">
<div class="col-8">
<h2>Titulo-2</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium totam libero, minima amet unde maiores omnis nam optio atque temporibus quod in quam! Ex eaque officia exercitationem sunt voluptatem minus!</p>
</div>
<div class="col-4 bg-primary"></div>
</div>
<div class="row">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officia aspernatur dolores incidunt ex nihil ipsum voluptatem deserunt doloremque hic? Vitae dolores hic quia eligendi, at eveniet nam omnis doloribus animi. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit, error perspiciatis illum blanditiis ut iusto neque asperiores ducimus itaque aspernatur maiores, alias fugit adipisci quos, facere incidunt veritatis quae sequi! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquid libero culpa ipsa rerum tempora, officiis, tenetur aperiam exercitationem tempore laborum quis neque sequi mollitia accusantium inventore quaerat ducimus explicabo aut?</p>
</div>
</section>
<section id="Titulo3" class="page-section">
<div class="row text-center">
<h2>Titulo-3</h2>
<h3 class="text-secondary">Subtitulo de titulo-3</h3>
</div>
</section>
<section id="Titulo4" class="page-section">
<div class="row">
<div class="col-6">
<h2>Titulo-4</h2>
<h3 class="text-secondary">Subtitulo de titulo-4</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorum adipisci illum tempore, blanditiis dolore consequuntur ratione sapiente mollitia earum excepturi dignissimos. Sapiente deserunt omnis nobis magni totam sed sunt deleniti. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magni iste, tenetur enim nam nobis beatae qui reprehenderit cum deserunt! Minus doloremque ex enim rem saepe architecto, exercitationem molestias debitis excepturi.</p>
</div>
<div class="col-6 border-start border-dark border-2">
<h3 class="text-secondary">Subtitulo 2 de titulo-4</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolore at tenetur odit dolorum amet animi temporibus, minima alias dicta! Odio voluptates facilis veritatis pariatur minus quis, numquam accusantium recusandae possimus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt nulla quos non dolor, possimus dolore optio ducimus ipsum reiciendis asperiores esse debitis excepturi, aspernatur officia. Illo et earum unde quam!</p>
</div>
</div>
</section>
<section id="Titulo5" class="page-section">
<h2>Titulo-5</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore pariatur blanditiis atque cupiditate officiis, veniam corporis quam quibusdam ex dolorem recusandae nihil explicabo nulla obcaecati, mollitia vero voluptatum quis. Earum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi soluta tempore eveniet. Recusandae velit, omnis, debitis ullam temporibus quisquam quasi sit quis, ad officia dicta? Saepe similique nulla fugiat ab Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magnam non maxime illum ut in quisquam fuga adipisci nesciunt velit voluptas hic officia repellendus, omnis doloremque quae vel iure vitae soluta. Lorem</p>
</section>
<section id="Titulo6" class="page-section">
<div class="row">
<div class="col-6 border-end border-dark border-2 me-2">
<h2>Titulo-6</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat itaque odio ab. Iure neque natus nam ipsa sunt accusamus enim illum fugit doloremque cupiditate dicta, maiores, ducimus fuga ullam voluptates. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ducimus nam alias aspernatur architecto saepe voluptates, molestias obcaecati quas laudantium temporibus nobis magnam inventore ipsum provident recusandae rerum magni vel ea!</p>
</div>
<div class="col-5 bg-primary"></div>
</div>
</section>
<!-- FIN CONTENIDO DE LA PAGINA -->
<div class="carousel-item">
<img src="https://static.igem.wiki/teams/4506/wiki/team/20220923-143617-2.jpg" class="d-block w-100" alt="Meme 3">
</div>
</div>
</div>
</nav>
<script>
const toggles = document.querySelector('.section-toggle');
document.addEventListener('click',function(event) {
if(toggles.classList.contains('show') && !toggles.contains(event.target)) {
toggles.classList.remove('show');
}
});
const scrollline = document.querySelector('.scroll-line-2');
function fillscrollline(){
const windowHeight = window.innerHeight;
const fullHeight = document.body.clientHeight;
const scrolled = window.scrollY;
const percentScrolled = (scrolled / (fullHeight - windowHeight)) * 100;
scrollline.style.width = percentScrolled + '%';
};
window.addEventListener('scroll', fillscrollline);
const sections = document.querySelectorAll('.page-section');
const sideBall = document.querySelectorAll('.scroll-ball')
window.addEventListener('scroll',()=> {
let current = '';
sections.forEach(section => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if(pageYOffset >= (sectionTop - sectionHeight / 3)-20){
current = section.getAttribute('id');
}
})
<!-- FIN CONTENIDO DEL CARRUSEL -->
</div>
</div>
sideBall.forEach(ball => {
ball.classList.add('d-none');
if(ball.classList.contains(current)){
ball.classList.remove('d-none')
}
})
<div class="container mt-4">
<!-- BOTONES DEL CARRUSEL -->
<div class="row d-flex justify-content-between" style="margin-left: auto; margin-right: auto;">
<button class="carousel-btn prev-btn" type="button" data-bs-target="#NotebookCarousel" data-bs-slide="prev">
<p class="prev-btn">Previous</p>
</button>
<button class="carousel-btn next-btn" type="button" data-bs-target="#NotebookCarousel" data-bs-slide="next">
<p class="next-btn">Next</p>
</button>
</div>
})
</script>
<!-- FIN BOTONES DEL CARRUSEL -->
</div>
</div>
{% endblock %}
wiki/pages/software.html
+ 15
− 1
View file @ 3998c39b
......@@ -154,7 +154,7 @@
(Yoo et al., 2013) propose a simple design, considering as the only criterion the union of the sRNA within the TIR region, this region is where the ribosome joins, with extension from the SD sequence up to the next 30 nt. It is worth mentioning that this proposal contemplates the binding energy of sRNA with mRNA, to achieve the purpose of altering the efficiency of translation, it also considers the size of 20 to 30 nts in length, since the greater the length, the greater the possibility of off-target repression, the binding energy of -30 to -40 kcal/mol is also considered.
</p>
<h4>sRNA design considering Hfq recruting and mRNA TIR targetting</h4>
<p>(Zhu et al., 2021) designed a synthetic sRNA system based on the MicC scaffold and the chaperone Hfq to control gene expression in Methylorubrum extorquens. The criteria that they used for designing the asRNA were length, location and binding free energy. Their paper also cites (Na et al. 2013), which says that an asRNA 24 nucleotides long in the translation initiation region (TIR) of the target mRNA shows high suppression activity (>90%). Their sRNA was designed accordingly. The online service DINAMelt was used to calculate the binding free energy between the asRNA and its target mRNA.</p>
<p>(Zhu et al., 2021) designed a synthetic sRNA system based on the MicC scaffold and the chaperone Hfq to control gene expression in Methylorubrum extorquens. The criteria that they used for designing the asRNA were length, location and binding free energy. Their paper <strong>also</strong> cites (Na et al. 2013), which says that an asRNA 24 nucleotides long in the translation initiation region (TIR) of the target mRNA shows high suppression activity (>90%). Their sRNA was designed accordingly. The online service DINAMelt was used to calculate the binding free energy between the asRNA and its target mRNA.</p>
</div>
</div>
</section>
......@@ -249,13 +249,27 @@
For our model’s design, the sequences were first preprocessed since many of them were not candidates and had to be dropped. The positions of hybridization were found and used to calculate training parameters. The following features, as well as their squared value, were calculated with the help of NuPack and ViennaRNA:
</p>
<p style="text-align: center;"><img src="https://static.igem.wiki/teams/4506/wiki/tablademodelo1.png" alt="our-solution" style='height: 60%; width: 60%; object-fit: cover'></p>
<p style="text-align:center;"> <h6 style="text-align: center;"><strong>Table 1.</strong> Considered features</h6></p>
<p>Thus, our final training dataset consisted of 557 observations with 40 features. The data preprocessing was in big part done with the aid of scikit learn functionalities (such as StandardScaler, LabelEncoder and train_test_split), which was then fed to a TensorFlow neural network for training.</p>
<p style="text-align: center;"><img src="https://static.igem.wiki/teams/4506/wiki/scikit-functionalities.png" alt="our-solution" style='height: 60%; width: 60%; object-fit: cover'></p>
<p style="text-align:center;"> <h6 style="text-align: center;"><strong>Figure 6.</strong> SciKit Learn and Tensorflow logos</h6></p>
<p style="text-align: center;"><img src="https://static.igem.wiki/teams/4506/wiki/diagrama-modelo.png" alt="our-solution" style='height: 60%; width: 60%; object-fit: cover'></p>
<p style="text-align:center;"> <h6 style="text-align: center;"><strong>Figure 7.</strong> Overview of model structure</h6></p>
<p style="text-align: center;"><img src="https://static.igem.wiki/teams/4506/wiki/batch-normalization.png" alt="our-solution" style='height: 60%; width: 60%; object-fit: cover'></p>
<p style="text-align:center;"> <h6 style="text-align: center;"><strong>Figure 8.</strong> Model Summary taken from Tensorflow</h6></p>
<p style="text-align: center;"><img src="https://static.igem.wiki/teams/4506/wiki/redk.png" alt="our-solution" style='height: 60%; width: 60%; object-fit: cover'></p>
<p style="text-align:center;"> <h6 style="text-align: center;"><strong>Figure 9.</strong> Keras logo</h6></p>
<p style="text-align: center;"><img src="https://static.igem.wiki/teams/4506/wiki/model-accuracy.png" alt="our-solution" style='height: 60%; width: 60%; object-fit: cover'></p>
<p style="text-align:center;"> <h6 style="text-align: center;"><strong>Figure 10.</strong> Model accuracy graph</h6></p>
<p style="text-align: center;"><img src="https://static.igem.wiki/teams/4506/wiki/precision.png" alt="our-solution" style='height: 60%; width: 60%; object-fit: cover'></p>
<p style="text-align:center;"> <h6 style="text-align: center;"><strong>Figure 11.</strong> Model metrics from Tensorflow</h6></p>
</section>
<section id= "References" class="page-section">
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment