## First heading
<iframe height="700" style="width: 100%;" scrolling="no" title="Arrow Effects + JS" src="https://codepen.io/ninhgiang/embed/QWpGEjO?height=265&theme-id=light&default-tab=html,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/ninhgiang/pen/QWpGEjO'>Arrow Effects + JS</a> by NinhGiang
(<a href='https://codepen.io/ninhgiang'>@ninhgiang</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
---
## Second heading
Abcxyz
<!DOCTYPE html>
<style>
.the-arrow {
width: 64px;
transition: all 0.2s;
}
.the-arrow.-left {
position: relative;
top: 0px; /*Căn độ cao arrow*/
left: 0;
}
.the-arrow.-left > .shaft {
width: 0;
background-color: deeppink;
}
.the-arrow.-left2 > .shaft {
width: 0;
background-color: deeppink;
}
.the-arrow > .shaft {
background-color: #999;
display: block;
height: 1px;
position: relative;
transition: all 0.2s;
transition-delay: 0;
will-change: transform;
background-color: saddlebrown;
}
.the-arrow > .shaft:before, .the-arrow > .shaft:after {
background-color: #999;
content: "";
display: block;
height: 1px;
position: absolute;
top: 0;
right: 0;
transition: all 0.2s;
transition-delay: 0s;
background-color: saddlebrown;
}
.the-arrow > .shaft:before {
transform-origin: top right;
}
.the-arrow > .shaft:after {
transform-origin: bottom right;
}
.animated-arrow {
display: inline-block;
color: transparent;
text-decoration: none;
position: relative;
transition: all 0.2s;
}
.animated-arrow:hover {
color: black;
}
.animated-arrow:hover > .the-arrow.-left > .shaft {
width: 64px;
transition-delay: 0.1s;
background-color: black;
}
.animated-arrow:hover > .the-arrow.-left > .shaft:before, .animated-arrow:hover > .the-arrow.-left > .shaft:after {
width: 8px;
transition-delay: 0.1s;
background-color: black;
}
.animated-arrow:hover > .the-arrow.-left > .shaft:before {
transform: rotate(40deg);
}
.animated-arrow:hover > .the-arrow.-left > .shaft:after {
transform: rotate(-40deg);
}
.hide {
display: none;
}
.nav {
background-color: transparent;
list-style-type: none;
text-align: center;
margin: 0;
padding: 0;
}
.nav div {
display: inline-block;
}
.nav:hover + .hide {
display: block;
}
.hover-me:hover + nav {
display: block;
}
</style>
<script type="text/javascript">
let shown = new Array();
const timer = ms => new Promise(res => setTimeout(res, ms))
async function mouseOver(tag_id) {
if (!(shown.includes(tag_id))) {
for (var i = 1; i < 5; i++) {
var id = tag_id + i.toString();
console.log(id);
document.getElementById(id).style.color = "black";
await timer(1000);
}
}
shown.push(tag_id);
}
</script>
<script async type="text/javascript" src="{{ https://raw.githubusercontent.com/NinhGiang/ninhgiang.github.io/main/index_js.js }}"></script>
<a href="/#Gem-Collection"><h1>Gem Collection</h1></a>
---
<a href="/#1-Talent-Training-Programs"><h2>1. Talent training program</h2></a>
<hr />
<p>
We provide 1-Year AI Talent Training Programs (fulltime, intensive) for 2 tracks:<br />
- AI Researchers, for excellent students with strong background in math and/or algorithms.
</p>
---
<div class="nav">
<a id="research" onmouseover="mouseOver('research')" class='animated-arrow' href='https://gem.cot.ai/uploads/upload_8c9678f420780dc17433914a42165c6b.png'>
<div id="research1">
<p>Math AIR</p>
<ul>
<li>Vector Spaces</li>
<li>Linear Algebra & Matrix Calculus</li>
<li>Optimization</li>
<li>Probability & Stats.</li>
<li>Info. Theory & Logic</li>
</ul>
</div>
<div class="the-arrow -left">
<span class="shaft"></span>
</div>
<div id="research2">
<p>AI Foundations</p>
<ul>
<li>(Non)Linear Predictors</li>
<li>CNNs, RNNs, GNNs</li>
<li>Sequence & Attention</li>
<li>Planning, Search & DRL</li>
<li>Genrative Models</li>
<li>Robotics</li>
</ul>
</div>
<div class="the-arrow -left">
<span class="shaft"></span>
</div>
<div id="research3">
<p>AI Advanced Topics</p>
<ul>
<li>Visual Intelligence</li>
<li>Language & Speech</li>
<li>RecSys & Forecast</li>
<li>Reasoning & Decision Making</li>
<li>Autonomous Vehicles</li>
<li>Advanced Robotics</li>
</ul>
</div>
<div class="the-arrow -left">
<span class="shaft"></span>
</div>
<div id="research4">
<p>AI Research</p>
<ul>
<li>Deep Embeddings</li>
<li>Deep Symbolic AI</li>
<li>Conversational AI</li>
<li>Curious Creative AI</li>
<li>Learn2Reason</li>
<li>Personalized AI & Cobots</li>
</ul>
</div>
</a>
</div>
---
<p>- Production ML Experts, for senior dev with strong software engineering skills, and for excellent students with solid background in algorithms.</p>
<p>CoTAI’s fullstack roadmap for Production ML training module:<br /></p>
<p>
These talent training programs are pay-forward, tuition-free: learn from experts & teach junior members! Follow CoTAI LinkedIn page for our announcement of next intake recruitment (Mar. 2021).<br />
</p>
---
<div class="nav">
<a id="production" onmouseover="mouseOver('production')" class='animated-arrow' href='https://gem.cot.ai/uploads/upload_66f246000e00ac0716958203076f4351.png'>
<div id="production1">
<p>Math4Dev</p>
<ul>
<li>Linear Algebra & Matrix Calculus</li>
<li>Numerical Methods & Optimization</li>
<li>Probability & Stats.</li>
</ul>
</div>
<div class="the-arrow -left">
<span class="shaft"></span>
</div>
<div id="production2">
<p>Practical ML</p>
<ul>
<li>(Non)Linear Predictors</li>
<li>CNNs, RNNs, GNNs</li>
<li>Sequence & Attention</li>
<li>DRL & Learning2Plan</li>
<li>ML with Small Data</li>
<li>Robotics</li>
</ul>
</div>
<div class="the-arrow -left">
<span class="shaft"></span>
</div>
<div id="production3">
<p>Specialized ML</p>
<ul>
<li>Visual, Language & Speech</li>
<li>Conversational AI & RecSys</li>
<li>Forecast & Decision Making</li>
<li>Generative ML & Creative AI</li>
<li>Edge AI & Model Compression</li>
<li>Autonomous Cars & Cobots</li>
</ul>
</div>
<div class="the-arrow -left">
<span class="shaft"></span>
</div>
<div id="production4">
<p>Production ML</p>
<ul>
<li>Project Planning</li>
<li>DataOps & MLOps</li>
<li>System Integration</li>
<li>Business Integration</li>
<li>MVPs & Spin-offs</li>
</ul>
</div>
</a>
</div>
---
## Last heading
<iframe height="800px" width="1500px" scrolling="no" title="Arrow Effects + JS" src="https://ninhgiang.github.io" frameborder="no" allowtransparency="true" allowfullscreen="true">
</iframe>
---
## First heading
<iframe width="100%" height="776" frameborder="0"
src="https://observablehq.com/embed/@mattdzugan/lloyds-algorithm-regular-tilings?cells=viewof+omega%2Cviewof+colorby%2Ccanvas2"></iframe>
---
## Second heading
<iframe width="100%" height="776" frameborder="0"
src="https://center-of-mass-2d.herokuapp.com/"></iframe>
---
## Third heading
<iframe width="100%" height="776" frameborder="0"
src="https://ninhgiang.github.io/plotly/squarecube.html"></iframe>
{"metaMigratedAt":"2023-06-16T00:32:21.496Z","metaMigratedFrom":"YAML","title":"Untitled","breaks":true,"slideOptions":"{\"transition\":\"slide\",\"width\":1600,\"height\":900,\"margin\":0.1,\"minScale\":0.2,\"maxScale\":2,\"allottedMinutes\":150}","contributors":"[{\"id\":\"3cb933a2-5fca-47c9-8528-018de41417da\",\"add\":37794,\"del\":28852}]"}