portfolios_lea-jean/public/project/kapla/index.html
2022-02-17 17:36:51 +01:00

820 lines
26 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="generator" content="Source Themes Academia 4.3.1">
<meta name="generator" content="Hugo 0.89.4" />
<meta name="author" content="Léa Jean">
<meta name="description" content="Programmation de dobots avec conception et fabrication d&#39;un support et d&#39;une structure motorisé pour modifier l&#39;orientation des Kaplas.">
<link rel="alternate" hreflang="en-us" href="/portfolios/lea-jean/project/kapla/">
<meta name="theme-color" content="#60aaf3">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/academicons/1.8.6/css/academicons.min.css" integrity="sha256-uFVgMKfistnJAfoCUQigIl+JfUaP47GrRKjf6CTPVmw=" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.0/css/all.css" integrity="sha384-aOkxzJ5uQz7WBObEZcHvV5JvRW3TUc2rNPA7pe3AwnsUohiw1Vj2Rgx2KSOkF5+h" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css" integrity="sha256-ygkqlh3CYSUri3LhQxzdcm0n1EQvH2Y+U5S2idbLtxs=" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/github.min.css" crossorigin="anonymous" title="hl-light">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/dracula.min.css" crossorigin="anonymous" title="hl-dark" disabled>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700|Open+Sans|Roboto+Mono&display=swap">
<link rel="stylesheet" href="/portfolios/lea-jean/css/academia.min.9972e892666a05bd315bf8453ba138a8.css">
<link rel="manifest" href="/portfolios/lea-jean/site.webmanifest">
<link rel="icon" type="image/png" href="/portfolios/lea-jean/img/icon.png">
<link rel="apple-touch-icon" type="image/png" href="/portfolios/lea-jean/img/icon-192.png">
<link rel="canonical" href="/portfolios/lea-jean/project/kapla/">
<meta property="twitter:card" content="summary_large_image">
<meta property="og:site_name" content="Léa Jean">
<meta property="og:url" content="/portfolios/lea-jean/project/kapla/">
<meta property="og:title" content="Construction d&#39;une structure de Kapla | Léa Jean">
<meta property="og:description" content="Programmation de dobots avec conception et fabrication d&#39;un support et d&#39;une structure motorisé pour modifier l&#39;orientation des Kaplas."><meta property="og:image" content="/portfolios/lea-jean/project/kapla/featured.jpg">
<meta property="twitter:image" content="/portfolios/lea-jean/project/kapla/featured.jpg"><meta property="og:locale" content="en-us">
<meta property="article:published_time" content="2022-02-08T00:00:00&#43;00:00">
<meta property="article:modified_time" content="2022-02-08T00:00:00&#43;00:00">
<title>Construction d&#39;une structure de Kapla | Léa Jean</title>
</head>
<body id="top" data-spy="scroll" data-target="#TableOfContents" data-offset="71" >
<aside class="search-results" id="search">
<div class="container">
<section class="search-header">
<div class="row no-gutters justify-content-between mb-3">
<div class="col-6">
<h1>Search</h1>
</div>
<div class="col-6 col-search-close">
<a class="js-search" href="#"><i class="fas fa-times-circle text-muted" aria-hidden="true"></i></a>
</div>
</div>
<div id="search-box">
</div>
</section>
<section class="section-search-results">
<div id="search-hits">
</div>
</section>
</div>
</aside>
<nav class="navbar navbar-light fixed-top navbar-expand-lg py-0" id="navbar-main">
<div class="container">
<a class="navbar-brand" href="/portfolios/lea-jean/"><img src="/portfolios/lea-jean/img/lyc.png" alt="Léa Jean"></a>
<a class="navbar-brand" href="/portfolios/lea-jean/">Léa Jean</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation"><span><i class="fas fa-bars"></i></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link " href="/portfolios/lea-jean/#hero"><span>Accueil</span></a>
</li>
<li class="nav-item">
<a class="nav-link " href="/portfolios/lea-jean/#experience"><span>Parcours</span></a>
</li>
<li class="nav-item">
<a class="nav-link " href="/portfolios/lea-jean/#skills"><span>Compétences</span></a>
</li>
<li class="nav-item">
<a class="nav-link " href="/portfolios/lea-jean/#projects"><span>Réalisations</span></a>
</li>
<li class="nav-item">
<a class="nav-link " href="/portfolios/lea-jean/#contact"><span>Contact</span></a>
</li>
</ul>
</div>
</div>
</nav>
<article class="article article-project py-5" itemscope itemtype="http://schema.org/Article">
<div class="container split-header">
<div class="row justify-content-center">
<div class="col-lg-8">
<img class="img-fluid w-100" src="/portfolios/lea-jean/project/kapla/featured_huc18670c0afc38c3881ec87b5dea55f59_2574906_680x500_fill_q90_lanczos_smart1.jpg" itemprop="image" alt="">
</div>
<div class="col-lg-8">
<h1 itemprop="name">Construction d&#39;une structure de Kapla</h1>
<meta content="2022-02-08 00:00:00 &#43;0000 UTC" itemprop="datePublished">
<meta content="2022-02-08 00:00:00 &#43;0000 UTC" itemprop="dateModified">
<div class="article-metadata">
<span class="article-date">
Publié le
<time>08-02-2022</time>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="article-container">
<div class="article-style" itemprop="articleBody" style="text-align:justify;">
<h2 id="cahier-des-charges">Cahier des charges</h2>
<p>Le projet s&rsquo;est développé dans le cadre du semestre 4 du parcours robotique de l&rsquo;IUT de Bordeaux, site de Gradignan. L&rsquo;objectif est, à partir dun tableau recensant les coordonnées (base, position, orientation) des Kapla, de réaliser une structure avec ces mêmes Kapla.</p>
<p>Le matériel a disposition comprend :</p>
<ul>
<li>1 convoyeur,</li>
<li>2 dobots Magician (robots 4 axes),</li>
<li>des <a href="https://www.kapla.com/fr/">Kapla</a> de dimensions 25x20x70 mm,</li>
<li>1 caméra Intel D435i RealSense Depth,</li>
<li>1 raspberry pi,</li>
<li>et divers composants comme des servomoteurs Dynamixel MX-12W, etc&hellip;</li>
</ul>
<p>Le cycle à suivre est celui-ci :</p>
<ol>
<li>Prise d&rsquo;un Kapla dans le magasin par le dobot 1</li>
<li>Dépose sur le convoyeur pour transfert vers le dobot 2</li>
<li>Reconnaissance du Kapla</li>
<li>Prise du Kapla par le dobot 2</li>
<li>Réalisation de la structure</li>
</ol>
<p>L&rsquo;effecteur des dobots est au choix : une pince pneumatique ou une ventouse.</p>
<h2 id="planification">Planification</h2>
<p>Pour une organisation optimale, une planification du projet est nécessaire. Il faut pour cela identifier les différentes tâches à réaliser et leur chronologie, les répartir entre les membres de l&rsquo;équipe, et les répartir dans le temps de manière à respecter les jalons. Il convient alors d&rsquo;établir un GANTT.</p>
<h2 id="identification-des-problématiques-et-recherche-de-solutions">Identification des problématiques et recherche de solutions</h2>
<h3 id="problématique-1--lorientation-des-kapla">Problématique 1 : l&rsquo;orientation des Kapla</h3>
<p>Dans le magasin, les Kapla ont tous la même orientation, et il faut que le Kapla puisse prendre n&rsquo;importe quelle orientation suivant les besoins de la structure finale. Cependant, leffecteur du dobot ne peux pas effectuer de rotations suivant x et y, toutes les orientations ne sont donc pas possibles.</p>
<h4 id="recherche-de-solutions">Recherche de solutions</h4>
<p>Plusieurs solutions ont alors émergées. La première est de faire tomber le Kapla en fin de convoyeur dans une boîte avec une pente. En chutant le long de la pente, le kapla se retourne. Linconvénient est que le Kapla peut se coincer sil ne tombe pas directement dans la bonne position. Cette idée nest donc pas la plus appropriée. Pour passer outre ce problème, nous avons réfléchi à une solution semblable mais plus &ldquo;sûre&rdquo;. Nous avons donc conçu une solution motorisée en forme de “L” permettant de retourner le Kapla en activant un moteur.</p>
<h4 id="choix-de-solution">Choix de solution</h4>
<p>Nous optons ainsi de développer la structure en “L” pour le système.</p>
<h3 id="problématique-2--détection-du-kapla">Problématique 2 : détection du Kapla</h3>
<p>Pour que le système fonctionne, les dobots doivent pouvoir trouver les Kapla pour les saisir.</p>
<h4 id="recherche-de-solutions-1">Recherche de solutions</h4>
<p>Nous avons donc pensé ici à trois solutions.
La première est de reposer le transport des Kapla sur lexactitude de répétition de mouvements des robots et du convoyeur dans le but de ne pas utiliser de capteur de détection, et de tester notre convoyeur et nos dobots de manière à ce que les Kaplas puissent être posés toujours aux mêmes endroits sur le convoyeur par le dobot 1 et récupéré toujours au même endroit par le dobot 2. Or cette solution est hasardeuse.
La deuxième est dutiliser un capteur de présence laser pour retourner linformation de la présence du Kapla en bout de convoyeur. Avec ce système, la récupéreration du Kapla par le dobot 2 se fait au même endroit.
La troisième est dutiliser une caméra et une intelligence artificielle de reconnaissance dimage et de détection de centre de gravité. En ayant le centre de gravité, nous pouvons déterminer précisément le point où le dobot 2 doit saisir le Kapla. Lavantage principal de ce système est de pouvoir déterminer la position du Kapla tant quil est dans le champ de vision de la caméra, et permet de corriger des erreurs de rotation au niveau de laxe Z.</p>
<h4 id="choix-de-solution-1">Choix de solution</h4>
<p>Le choix s&rsquo;est d&rsquo;abord porté sur la troisième solution, soit une détection par caméra, solution qui par manque de temps nas pas pu aboutir. Nous avons donc finalement opté pour le capteur de présence.</p>
<h3 id="problématique-3--lecture-de-fichier">Problématique 3 : lecture de fichier</h3>
<p>Les Kaplas ne sont pas préalablement triés dans le fichier json fourni. La problématique qui se présente ici est donc l&rsquo;ordre de pose des Kapla qui nous est inconnu.</p>
<h4 id="choix-de-solution-2">Choix de solution</h4>
<p>Il convient alors de réaliser un code de tri qui, après importation du fichier
json, renvoie le fichier dans l&rsquo;ordre de dépose sur la zone de charge.</p>
<h3 id="problématique-4--choix-de-leffecteur">Problématique 4 : choix de l&rsquo;effecteur</h3>
<p>Le choix nous est donné entre une ventouse ou une pince pneumatique comme effecteur des dobots. Ce choix influe sur la prise des Kapla. Ainsi, l&rsquo;effecteur utilisé ici est une ventouse.</p>
<h2 id="modélisation-et-réalisation-de-lensemble-du-système">Modélisation et réalisation de l&rsquo;ensemble du système</h2>
<h3 id="structure-en-l">Structure en &ldquo;L&rdquo;</h3>
<p>Dans le but de pouvoir changer l&rsquo;orientation des Kapla suivant les besoin de la structure en Kapla finale, il convient de concevoir un système. Le système conçu ici est une structure en “L”. Ce nom lui vient de la forme principale de la forme de la structure qui vue de profil ressemble à un “L”.</p>
<table>
<thead>
<tr>
<th style="text-align:center"></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center"><img src="/img/dess-ens-l.png" alt="Dessin d&rsquo;ensemble" title="Dessin d'ensemble de la structure en L"></td>
<td style="text-align:center"><img src="/img/L.png" alt="Modélisation de l&rsquo;ensemble" title="Modélisation 3D de la structure en L sur OnShape"></td>
</tr>
<tr>
<td style="text-align:center"><strong>Dessin d&rsquo;ensemble de la structure en &ldquo;L&rdquo;</strong></td>
<td style="text-align:center"><strong>Modélisation 3D de la structure en &ldquo;L&rdquo; sur OnShape</strong></td>
</tr>
</tbody>
</table>
<p>Le principe de sa structure est relativement simple. Un servomoteur Dynamixel MX-12W, commandé en angle, bascule de 90° lorsqu&rsquo;on le lui demande. Le dobot 2 saisit le Kapla sur le convoyeur et le positionne à lintérieur du “L”. Ainsi, lorsque le Kapla est allongé, nous pouvons choisir si nous voulons le positionner au sol, en longueur ou en largeur. Le &ldquo;L&rdquo; dispose également dune encoche et dun côté plus long que lautre pour pouvoir positionner le Kapla debout. Ainsi, après avoir saisi le Kapla sur le convoyeur, la ventouse réalise une rotation suivant laxe z pour pouvoir positionner le Kapla dans la petite encoche.</p>
<p><img src="/img/structure-l.jpg" alt="Structure en L" title="Structure en L fabriquée"></p>
<p>Le système est d&rsquo;abord modélisé en 3D et assemblé sur le logiciel de CAO en ligne <a href="https://www.onshape.com/en/"><em>OnShape</em></a>. Ensuite, le &ldquo;L&rdquo; et sa fixation au moteur sont imprimésen PLA avec des imprimantes 3D à filament. On utilise une découpeuse laser pour réaliser le socle en PMMA et on scie une tige en métal qui fixera le &ldquo;L&rdquo; à la fixation. Enfin, on assemble le tout : les pièce du socle sont emboités, la fixation est vissée au moteur et le moteur est vissé au socle, la tige s&rsquo;insert dans la fixation et le &ldquo;L&rdquo;.</p>
<h3 id="support-de-la-caméra">Support de la caméra</h3>
<p>Dans le cas de la détection de Kapla par caméra, un support pour fixer cette dernière est nécessaire. Celui-ci se fixe sur le convoyeur et est conçu de manière à ce que la caméra donne une vue du dessus du convoyeur. Les dimensions sont pensées de manière à pouvoir fixer la caméra mais également de manière à ce que le support ne gène pas les dobots pendant leurs déplacements.</p>
<table>
<thead>
<tr>
<th style="text-align:center"></th>
<th style="text-align:center"></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center"><img src="/img/support-cam-kapla.png" alt="Dessin de définition" title="Dessin de définition du support caméra"></td>
<td style="text-align:center"><img src="/img/support-cam.png" alt="Modélisation de l&rsquo;ensemble" title="Modélisation 3D du support caméra sur OnShape"></td>
<td style="text-align:center"><img src="/img/supp-cam-kapla.jpg" alt="Modélisation" title="Support caméra fabriqué"></td>
</tr>
<tr>
<td style="text-align:center"><strong>Dessin de définition du support caméra</strong></td>
<td style="text-align:center"><strong>Modélisation 3D du support caméra sur OnShape</strong></td>
<td style="text-align:center"><strong>Support caméra fabriqué</strong></td>
</tr>
</tbody>
</table>
<p>Le support est d&rsquo;abord modélisé sur OnShape puis fabriqué. Un morceau de tôle est découpé à la cisailleuse aux dimensions voulues. La plaque est ensuite percée à la perceuse à colonne. Certains trous serviront à visser le support au convoyeur, tandis que les autres serviront à visser la caméra au support. Enfin, on plie la tôle. Afin que le support ne fléchisse pas sous le poids de la caméra, un morceau de tôle est soudé par point en renfort.</p>
<h3 id="ensemble-du-système">Ensemble du système</h3>
<table>
<thead>
<tr>
<th style="text-align:center"></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center"><img src="/img/schema-ens-kapla.jpg" alt="Schéma de l&rsquo;ensemble" title="Schéma du système"></td>
<td style="text-align:center"><img src="/img/ens-kapla.jpg" alt="Modélisation de l&rsquo;ensemble" title="Modélisation 3D du système sur OnShape"></td>
</tr>
<tr>
<td style="text-align:center"><strong>Schéma du système</strong></td>
<td style="text-align:center"><strong>Modélisation 3D du système sur OnShape</strong></td>
</tr>
</tbody>
</table>
<h2 id="programmation">Programmation</h2>
<h3 id="programmation-de-la-structure-en-l">Programmation de la structure en &ldquo;L&rdquo;</h3>
<p>Dans le but de réaliser la programmation du moteur dynamixel dans la structure, à laide dune Arduino, nous utilisons la librairie <em>ardyno</em> afin dimporter <em>“dynamixelMotor”</em>. La fonction <em>motor.goalPosition()</em> est ensuite utilisée pour set langle du moteur.</p>
<p>Par la suite, il nous est nécessaire de pouvoir exploiter ce programme avec des appellations dans un programme en python. On réalise donc une liaison port série afin de communiquer avec lArduino depuis un programme en python. Pour cela nous utiliserons la bibliothèque <em>pyserial</em> afin dimporter <em>“Serial”</em>. On pourra alors taper la commande <em>serial.Serial(port,baudrate,timeout)</em> afin de se connecter au port série de lArduino.</p>
<p><img src="/img/structure-l-vid2.gif" alt="L" title="Structure en L en fonctionnement"></p>
<h3 id="programmation-de-la-caméra">Programmation de la caméra</h3>
<p>Afin de faire une étude de la position du Kapla sur le convoyeur, il est possible d&rsquo;utiliser utiliser une caméra et une intelligence artificielle de reconnaissance dimage et de détection de centre de gravité. Un logigramme est préalablement construit pour structurer le programme. En utilisant un code trouvé sur Internet permettant de régler le filtre en direct sur une image ou une vidéo, nous choisissons les valeurs en codage HSV les plus adaptées pour extraire seulement le Kapla de l&rsquo;image.</p>
<p>Au lancement des programmes on observe lapparition de lignes vertes qui représentent les lignes verticales du Kapla, et de lignes rouges qui représentent les lignes horizontales du Kapla. Néanmoins, par faute de temps, le programme nest pas fini et on voit apparaître de nombreux problèmes sur la détermination des lignes. En achevant ce programme, il est possible de connaître les 4 coins du Kapla et de son centre.</p>
<p>Nos résultats sont les suivants :</p>
<p><img src="/img/res-cam.jpg" alt="Résultats" title="Résultats obtenus par la programmation de la caméra"></p>
<h3 id="capteur-laser">Capteur laser</h3>
<p>Comme la caméra s&rsquo;est avérée plus compliquée à utiliser et à intégrer que prévu dans la limite du temps imparti, nous avons donc utilisé le capteur pour détecter le Kapla en fin de course sur le convoyeur. Lorsque le capteur le détecte, le convoyeur s&rsquo;arrête.</p>
<h3 id="code-du-tri-des-kapla">Code du tri des Kapla</h3>
<p>Afin de faciliter la prise et la pose des Kapla, on passe par une étape de tri de ces derniers. On a décidé de prendre les Kapla du plus en bas au plus en haut (en les prenant à terre) en remontant progressivement. Le tri se fait donc selon laxe z. On parcourt ainsi la liste des positions des Kapla en les sélectionnant avec le z le plus bas.</p>
<h3 id="code-principal">Code principal</h3>
<p>Le code dit principal est le code obtenu après lintégration de tous les morceaux de code séparés. Pour la logique globale qui en découle, on établit en amont un algorithme permettant de mieux comprendre la structure et l&rsquo;algorithme de notre code. Pour le code principal, on intègre les différentes parties de code faites en amont et on les rassemble sous forme de fonctions que nous avons simplement à appeler dans le <em>main</em>.</p>
<p><img src="/img/logi-kapla.jpg" alt="Logigramme" title="Logigramme du programme"></p>
<h2 id="système-final">Système final</h2>
<table>
<thead>
<tr>
<th style="text-align:center"></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center"><img src="/img/kapla.jpg" alt="Photo du système" title="Photo du système (vue de haut)"></td>
<td style="text-align:center"><img src="/img/kapla2.jpg" alt="Photo du système" title="Photo du système (vue de côté)"></td>
</tr>
<tr>
<td style="text-align:center"><strong>Photo du système (vue de haut)</strong></td>
<td style="text-align:center"><strong>Photo du système (vue de côté)</strong></td>
</tr>
</tbody>
</table>
<p>Ci-dessous, une vidéo du système en fonctionnement à la fin du projet :</p>
<p><img src="/img/sys-kapla.gif" alt="Système en fonctionnement" title="Système en fonctionnement"></p>
</div>
<div class="article-tags">
<a class="badge badge-light" href="/portfolios/lea-jean/tags/rob/">rob</a>
<a class="badge badge-light" href="/portfolios/lea-jean/tags/gmp/">gmp</a>
</div>
<div class="media author-card" itemscope itemtype="http://schema.org/Person">
<img src="/portfolios/lea-jean/img/leebit.png" alt="Profil" height="80" width="80">
<div class="media-body">
<h5 class="card-title" style="display:flex; justify-content:center;" itemprop="name"><a href="/portfolios/lea-jean">Léa Jean</a></h5>
<h6 class="card-subtitle" style="display:flex; justify-content:center;">Volontaire en Service Civique</h6>
<ul class="network-icon" style="display:flex; justify-content:center;" aria-hidden="true">
<li>
<a itemprop="sameAs" href="/portfolios/lea-jean/#contact" >
<i class="fas fa-envelope"></i>
</a>
</li>
<li>
<a itemprop="sameAs" href="/portfolios/lea-jean/#contact" >
<i class="fas fa-phone"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</article>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.4/imagesloaded.pkgd.min.js" integrity="sha256-lqvxZrPLtfffUl2G/e7szqSvPBILGbwmsGE1MKlOi0Q=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js" integrity="sha256-CBrpuqrMhXwcLLUd5tvQ4euBHCdh7wGlDfNz8vbu/iI=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js" integrity="sha256-X5PoE3KU5l+JcX+w09p/wHl9AzK333C4hJ2I9S5mD4M=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js" integrity="sha256-aYTdUrn6Ow1DDgh5JTc3aDGnnju48y/1c8s1dgkYPQ8=" crossorigin="anonymous"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script src="/portfolios/lea-jean/js/academia.min.d691276f1564f37d5e31c2e5fb0cfcae.js"></script>
<div class="container">
<footer class="site-footer">
<div class="container" style="display:flex; justify-content: center;">
<div class="row align-items-center">
<div>
<p class="mb-0" style="text-align:center;">
Site réalisé à partir du thème :
<a href="https://themes.gohugo.io/themes/academia-hugo/" target="_blank" rel="noopener">Academia Hugo</a>.
</p>
<p style="text-align:center;">Code source modifié par <i style="color:#ffb92c;">Léa JEAN</i> et <i style="color:#ffb92c;">Habib BELARIBI</i>.</p>
</div>
<div class="col-md-6">
<ul class="list-inline network-icon text-right mb-0">
</ul>
</div>
</div>
</div>
</footer>
</div>
<div id="modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Cite</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<pre><code class="tex hljs"></code></pre>
</div>
<div class="modal-footer">
<a class="btn btn-outline-primary my-1 js-copy-cite" href="#" target="_blank">
<i class="fas fa-copy"></i> Copy
</a>
<a class="btn btn-outline-primary my-1 js-download-cite" href="#" target="_blank">
<i class="fas fa-download"></i> Download
</a>
<div id="modal-error"></div>
</div>
</div>
</div>
</div>
</body>
</html>