| <!doctype html>
|
| <html>
|
|
|
| <head>
|
| <meta charset="utf-8" />
|
| <meta name="viewport" content="width=device-width" />
|
| <title> Takina </title>
|
| <link rel="stylesheet" href="style.css" />
|
| <link rel="preconnect" href="https://fonts.googleapis.com">
|
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
| <link href="https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
|
| </head>
|
|
|
| <body>
|
| <div class="hero">
|
| <div class="hero-content">
|
| <img class="app-icon" src="./img/Takina.png" alt="Takina">
|
| <h1>Takina </h1>
|
| <p class="tagline">Transfert d'expressivité faciale humaine vers un robot</p>
|
| </div>
|
| </div>
|
|
|
| <div class="container">
|
| <div class="main-card">
|
| <div class="app-preview">
|
| <h2>A propos du projet</h2>
|
| <p class="project-desc">
|
| <br>Chers utilisateurs, venez découvrir notre projet intitulé Takina.<br>
|
| L'objectif est simple : un robot, une vidéo, un visage => Imitation <br>
|
| Téléversez une vidéo où on peut voir clairement un visage, il peut bouger un peu, le robot le fera
|
| !<br>
|
| De la tristesse sur ce visage? C'est pas grave, les antennes sont là pour aider à reproduire les
|
| émotions au mieux !<br>
|
| Testez Takina avec reachy-mini, et regarder ses petites antennes se lever pour vous saluer !
|
| </p>
|
| </div>
|
| <div class="app-details">
|
| <div class="preview-image">
|
| <img class="preview-demo" id="preview-image" src="./img/Takina.jpg" alt="Demo">
|
| </div>
|
| <h3 class="emotion-title">Émotions du Robot</h3>
|
| <div class="emotion-grid">
|
| <div class="emotion-box" data-image="./img/joie.jpg">😊 Joie</div>
|
| <div class="emotion-box" data-image="./img/tristesse.jpg">😢 Tristesse</div>
|
| <div class="emotion-box" data-image="./img/colere.jpg">😠 Colère</div>
|
| <div class="emotion-box" data-image="./img/surprise.jpg">😯 Surprise</div>
|
| <div class="emotion-box" data-image="./img/peur.jpg">😨 Peur</div>
|
| <div class="emotion-box" data-image="./img/degout.jpg">🤢 Dégout</div>
|
| <div class="emotion-box" data-image="./img/curieux.jpg">🧐 Curieux</div>
|
| <div class="emotion-box" data-image="./img/neutre.jpg">😐 Neutre</div>
|
|
|
| </div>
|
|
|
| <div class="download-card">
|
| <div class="manual-option">
|
| <h3>Demonstration</h3>
|
| <video class="demo-video" controls>
|
| <source src="./img/demo.mp4" type="video/mp4">
|
| </video>
|
| </div>
|
| <div class="manual-option">
|
| <h3>Ouvrir la page de l'application</h3>
|
| <a href="http://0.0.0.0:8042" target="_blank" class="install-btn">
|
| Takina App
|
| </a>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
| <div class="footer">
|
| <div class="manual-option">
|
| <p> Valentin, Allan et Eloise</p>
|
| <p>
|
| <img class="icon" src="./img/Takina.png" alt="Takina"> Takina •
|
| <a href="https://huggingface.co/Fanfnix/34nous" target="_blank">34nous</a> •
|
| </p>
|
| </div>
|
| </div>
|
| <script>
|
| const emotionBoxes = document.querySelectorAll('.emotion-box');
|
| const previewImage = document.getElementById('preview-image');
|
|
|
| emotionBoxes.forEach(box => {
|
| box.addEventListener('click', () => {
|
|
|
| const newImage = box.getAttribute('data-image');
|
| previewImage.src = newImage;
|
|
|
| emotionBoxes.forEach(b => b.classList.remove('active'));
|
| box.classList.add('active');
|
| });
|
| });
|
| </script>
|
| </body>
|
|
|
| </html> |
