Updated doc

site/index.html

@@ -435,6 +435,16 @@
   </a>
 </li>
 <li class="md-nav__item">
+<a class="md-nav__link" href="#optimisation-du-programme">
+    Optimisation du programme
+  </a>
+</li>
+<li class="md-nav__item">
+<a class="md-nav__link" href="#ethique-du-projet">
+    Ethique du projet
+  </a>
+</li>
+<li class="md-nav__item">
 <a class="md-nav__link" href="#ameliorations-futures">
     Améliorations futures
   </a>
@@ -894,6 +904,16 @@
   </a>
 </li>
 <li class="md-nav__item">
+<a class="md-nav__link" href="#optimisation-du-programme">
+    Optimisation du programme
+  </a>
+</li>
+<li class="md-nav__item">
+<a class="md-nav__link" href="#ethique-du-projet">
+    Ethique du projet
+  </a>
+</li>
+<li class="md-nav__item">
 <a class="md-nav__link" href="#ameliorations-futures">
     Améliorations futures
   </a>
@@ -931,12 +951,15 @@
 <p>Sauf que toutes les informations sont étalées pêle-mêle sans hiérarchie ce qui fait que cela me prendrait trop de temps de tout déchiffrer à chaque fois, ce qui me fait rater des choses intéressantes.</p>
 <p>Le but du projet est donc de fournir un outil qui hiérarchise et affiche différemment les données pour faciliter leur lecture et me permettre de faire de meilleurs commentaires.</p>
 <h3 id="abstract">Abstract</h3>
-<p>Track Trends is a Formula 1 data and analysis tool.</p>
-<p>To understand everything, a little bit of context. In my free time I have multiple activities and one is to be the Live Ticker F1 for the local journal "20 minutes". to help me in this work I'm currently using the F1TV to which I'm currently subscribed because it provides me with a better video feed with better commentary than the ones from the RTS (in my opinion) but also because it gives me access to a very important video feed : the data channel</p>
-<p>See the screenshot above to see what it looks like.</p>
-<p>[note: It's a pretty HTML table but a full on video feed that contains a table (probably, so you can't access data directly)]</p>
+<p>Track Trends is a Formula 1 data is a tool that displays and interpret data.</p>
+<p>To understand everything,first ,a little bit of context. In my free time I have multiple activities and one is to be the Live Ticker F1 for the local journal "20 minutes" (Owned by Tamedia). to help me in this work I'm currently using the F1TV to which I'm currently subscribed because it provides me with a better video feed with better commentary than the ones from the RTS (in my opinion) but also because it gives me access to a very important video feed : the data channel</p>
+<p>You can see in the chapter above an example of the F1TV DATA CHANNEL.</p>
+<p>[Note : Even tough it looks like a pretty HTML table on wich you could easely get infos... Its not. Its a video feed]</p>
 <p>You can see a lot of data all well and good BUT! All the data is displayed the same in a big table which make it really hard to read totally in a hurry, which means that I miss a lot of useful information.</p>
-<p>The point of the project then is to provide with a tool that can display those data by taking into account their relevance. That would help me not miss any and provide a better commentary by never missing out battles, and be able to better write with the time I saved by using it.</p>
+<p>The point of the project then is to provide a tool that can display those data by taking into account their relevance.
+So for example a driver that is 10s away from everyone and that is doing some normal lapTimes will be less displayed or even not displayed at all so I can focus on the drivers that are battling each others.</p>
+<p>This tool would help me not miss the battles and details that are happening in the back and therefore not being broadcasted on TV.And it could be a usefull tool for anyone who wants a better insight of how the race is going by looking at the data.</p>
+<p>This kind of project already exists in the form of the AWS tool "F1 Insight" but it is not avaible to the public. We can only see some of its predictions (that are trash) and data dumps in the live feed when the TV directors feel like it.</p>
 <h3 id="description-du-besoin">Description du besoin</h3>
 <p>Comme expliqué dans le résumé, je suis Live Ticker F1. Mais pour mieux comprendre le besoin que j'ai, je pense qu'il est pertinent de comprendre comment je travaille.</p>
 <p>Pendant un Grand Prix de Formule 1 j'ai plusieurs tâches à effectuer :</p>
@@ -986,8 +1009,8 @@ La raison la plus probable étant qu'Amazon avec son service AWS propose exactem
 <p>Mais comme je possède un abonnement premium ++ à la F1TV, j'ai accès pour chaque grand prix à un flux vidéo nommé : DATA F1 CHANNEL</p>
 <p>Qui ressemble à ça :</p>
 <figure class="figure-image">
-<a class="glightbox" href="./Images/Screens/Formula1DataChannel.png"><img alt="" channel="" data="" exemple""="" src="./Images/Screens/Formula1DataChannel.png"/></a>
-<figcaption>"Data channel exemple"</figcaption>
+<a class="glightbox" href="./Images/Screens/Formula1DataChannel.png"><img alt="" channel""="" data="" de="" exemple="" la="" src="./Images/Screens/Formula1DataChannel.png"/></a>
+<figcaption>"Exemple de la Data Channel"</figcaption>
 </figure>
 <p>Donc la seule façon que je vois de récupérer ces données est de les prendre directement sur ce feed.</p>
 <p>Même si le but final de l'application est de faire pleins de choses super avec les datas, le gros du projet va surtout être la récupération des données et leur stockage.</p>
@@ -1017,8 +1040,8 @@ La raison la plus probable étant qu'Amazon avec son service AWS propose exactem
 </ul>
 <p>Voici un exemple d'interface possible pour une page :</p>
 <figure class="figure-image">
-<a class="glightbox" href="./Images/Figma/Prototype.png"><img alt="" proto""="" src="./Images/Figma/Prototype.png"/></a>
-<figcaption>"Proto"</figcaption>
+<a class="glightbox" href="./Images/Figma/Prototype.png"><img alt="" de="" fait="" figma""="" l'app="" protype="" src="./Images/Figma/Prototype.png" sur=""/></a>
+<figcaption>"Protype de l'app fait sur Figma"</figcaption>
 </figure>
 <h3 id="cas-dutilisation">Cas d'utilisation</h3>
 <hr/>
@@ -1137,21 +1160,21 @@ La raison la plus probable étant qu'Amazon avec son service AWS propose exactem
 <p>Pour rappel, Amazon héberge directement le site de la F1TV et possède les droits sur les données de la F1. C'est sous le nom de AWS (le service d'hébergement d'Amazon) que la firme apparait en tant que sponsor.</p>
 <p>On peut voir ce nom apparaître assez souvent quand on regarde un Grand Prix car comme ils ont la main-mise sur les données ils peuvent insèrer des bandeaux d'informations sur le flux public sur ce qu'il se passe voir même faire des prédictions (Bien qu'un peu bancales)</p>
 <figure class="figure-image">
-<a class="glightbox" href="./Images/Screens/AWSExample1.jpg"><img 1""="" alt="" aws="" example="" src="./Images/Screens/AWSExample1.jpg"/></a>
-<figcaption>"AWS example 1"</figcaption>
+<a class="glightbox" href="./Images/Screens/AWSExample1.jpg"><img alt="" aws="" en="" exemple="" gp""="" insertion="" src="./Images/Screens/AWSExample1.jpg"/></a>
+<figcaption>"Exemple insertion AWS en GP"</figcaption>
 </figure>
 <p>Ce service s'appelle F1 Insights (Oui c'est un meilleur nom de projet que F1 Companion mais bon) et c'est, je pense, la raison pour laquelle on ne voit aucune API publique qui permette de correctement se renseigner en donées en direct pendant un Grand Prix. Ils ont du dégotter un juteux contrat pour s'occuper de toute l'infrastructure digitale de la F1 (du moins publique) en échange d'une exclusivité totale sur certaines choses comme les Data</p>
 <figure class="figure-image">
-<a class="glightbox" href="./Images/Screens/AWSExample2.jpg"><img 2""="" alt="" aws="" example="" src="./Images/Screens/AWSExample2.jpg"/></a>
-<figcaption>"AWS example 2"</figcaption>
+<a class="glightbox" href="./Images/Screens/AWSExample2.jpg"><img alt="" d'aws""="" data="" exemple="" src="./Images/Screens/AWSExample2.jpg"/></a>
+<figcaption>"Exemple data d'AWS"</figcaption>
 </figure>
 <p>Evidemment je ne fais que conjecturer et ce que j'ai dit n'est pas à prendre au pied de la lettre mais c'est une explication possible je pense de pourquoi il est si difficile de trouver des données sur la F1 facilement en temps réel.</p>
 <p>Il existe bien quelques API un peu bancales publiques, mais le problème c'est qu'elles ne sont vraiment pas suffisante et je ne peux pas leur faire confiance quand je commente. Ce qu'il m'aurait fallut c'est une API publique et officielle qui me permette d'être sur que les données sont les bonnes et qu'elles arrivent le plus vite possible.</p>
 <p>On pourrait croire que c'est impossible car cela n'existe pas comme je l'ai dit MAIS ! Ce n'est pas complêtement vrai. En effet depuis que je possède un abonnement à la F1TV, il existe une source d'informations très précieuse qui m'aide énormément dans mon quotidien de commentateur de Formule 1. La "DATA CHANNEL".</p>
 <p>La Data Channel est une page de la F1TV qui permet, pour chaque Grand Prix, de visualiser, sous la forme d'un flux vidéo, différentes informations capitales sur la course.</p>
 <figure class="figure-image">
-<a class="glightbox" href="./Images/Screens/ScreenF1TvData.png"><img alt="" channel="" data="" example""="" src="./Images/Screens/ScreenF1TvData.png"/></a>
-<figcaption>"Data channel example"</figcaption>
+<a class="glightbox" href="./Images/Screens/ScreenF1TvData.png"><img alt="" channel""="" data="" de="" exemple="" src="./Images/Screens/ScreenF1TvData.png"/></a>
+<figcaption>"Exemple de Data Channel"</figcaption>
 </figure>
 <p>Le problème, c'est que comme je viens de le dire, ces données ne sont pas accessibles comme un tableau HTML ou un flux RSS ou un tableau JSON. C'est un flux vidéo.
 Il faut savoir qu'entretenir une diffusion de flux vidéo en 1080P pendant deux heures accessible par des milliers d'abonnés est EXTRÊMENT cher surtout quand on le compare à simplement afficher les données dans un tableau. Ce qui veut dire que ce choix est délibéré et a un sens au niveau économique.
@@ -1192,8 +1215,8 @@ Je pense donc que c'est justement pour éviter que des petits malins puissent si
 <p>Cependant Firefox de pas sa nature Open Source utilise "OpenH264" pour lire ces mêmes flux soumis à des DRM et OpenH264 n'implémente pas les mêmes restrictions.</p>
 <p>Sauf que Firefox n'est pas aussi facilement émulé que chrome et cela réduit notre choix de librairies à ... Une seule... Qui est Selenium. (Il existe aussi Pupetteer C# mais j'ai rencontré énormément de soucis avec cette dernière dès que je voulais lancer une vidéo)</p>
 <figure class="figure-image">
-<a class="glightbox" href="./Images/Screens/FirefoxLogo.png"><img alt="" developper="" firefox="" logo""="" src="./Images/Screens/FirefoxLogo.png"/></a>
-<figcaption>"Firefox Developper logo"</figcaption>
+<a class="glightbox" href="./Images/Screens/FirefoxLogo.png"><img alt="" dev="" firefox="" logo""="" src="./Images/Screens/FirefoxLogo.png"/></a>
+<figcaption>"Firefox dev logo"</figcaption>
 </figure>
 <p>{: style="height:150px;width:150px"}</p>
 <p>Mais même si la documentation est plutôt maigre parfois, c'est une bonne librairie qui permet de très bien contrôler une instance de chrome ou de Firefox.</p>
@@ -1260,8 +1283,8 @@ fullScreenButton.Click();
 <p>Si on regarde de loin on peut se dire que la structure est plutôt simple mais c'est loin d'être le cas.
 On peut y voir au moins 4 zones contenant de l'information dans un format différent.</p>
 <figure class="figure-image">
-<a class="glightbox" href="./Images/Figma/WindowZoneExplanation1.png"><img alt="" main="" src="./Images/Figma/WindowZoneExplanation1.png" zones""=""/></a>
-<figcaption>"Main zones"</figcaption>
+<a class="glightbox" href="./Images/Figma/WindowZoneExplanation1.png"><img alt="" principales""="" src="./Images/Figma/WindowZoneExplanation1.png" zones=""/></a>
+<figcaption>"Zones principales"</figcaption>
 </figure>
 <p>Dans l'exemple ci dessus on peut voir 3 zones mais on aurait également pu comprendre la zone de position des pilotes autour du circuit pour faire 4.</p>
 <p>Ces 4 zones sont très différentes et contiennent d'autres informations. Pour ce travail de diplôme je ne m'occupe que de la zone principale. Mais je pense que le titre et les infos de circuit ne prendrait pas tant de temps que ca à implémenter.</p>
@@ -1289,39 +1312,39 @@ On peut y voir au moins 4 zones contenant de l'information dans un format diffé
 </ul>
 <p>Voila donc un petit diagramme qui montre le découpage du programme :</p>
 <figure class="figure-image">
-<a class="glightbox" href="./Images/Figma/WindowZoneExplanationDiagram.png"><img alt="" diagramme="" src="./Images/Figma/WindowZoneExplanationDiagram.png" zones""=""/></a>
-<figcaption>"Diagramme zones"</figcaption>
+<a class="glightbox" href="./Images/Figma/WindowZoneExplanationDiagram.png"><img alt="" de="" des="" diagramme="" explicatif="" l'architecture="" src="./Images/Figma/WindowZoneExplanationDiagram.png" zones""=""/></a>
+<figcaption>"Diagramme explicatif de l'architecture des zones"</figcaption>
 </figure>
 <p>Pour visualiser encore un peu mieux comment ce découpage prend forme voici ce que chaque zone et Window contient.</p>
 <p>Main Zone :</p>
 <figure class="figure-image">
-<a class="glightbox" href="./Images/Screens/MainZoneExample.png"><img alt="" main="" src="./Images/Screens/MainZoneExample.png" zone""=""/></a>
-<figcaption>"Main zone"</figcaption>
+<a class="glightbox" href="./Images/Screens/MainZoneExample.png"><img alt="" exemple="" principale""="" src="./Images/Screens/MainZoneExample.png" zone=""/></a>
+<figcaption>"Exemple zone principale"</figcaption>
 </figure>
 <p>Driver Zone :</p>
 <figure class="figure-image">
-<a class="glightbox" href="./Images/Screens/DriverZoneExample.png"><img alt="" driver="" src="./Images/Screens/DriverZoneExample.png" zone""=""/></a>
-<figcaption>"Driver zone"</figcaption>
+<a class="glightbox" href="./Images/Screens/DriverZoneExample.png"><img alt="" de="" exemple="" pilote""="" src="./Images/Screens/DriverZoneExample.png" zone=""/></a>
+<figcaption>"Exemple zone de pilote"</figcaption>
 </figure>
 <p>Driver Position Window :</p>
 <figure class="figure-image">
-<a class="glightbox" href="./Images/Screens/DriverPositionExample.png"><img alt="" driver="" position="" src="./Images/Screens/DriverPositionExample.png" window""=""/></a>
-<figcaption>"Driver position Window"</figcaption>
+<a class="glightbox" href="./Images/Screens/DriverPositionExample.png"><img alt="" de="" exemple="" fenêtre="" position""="" src="./Images/Screens/DriverPositionExample.png"/></a>
+<figcaption>"Exemple de fenêtre de position"</figcaption>
 </figure>
 <p>Driver name Window :</p>
 <figure class="figure-image">
-<a class="glightbox" href="./Images/Screens/DriverNameExample.png"><img alt="" driver="" name="" src="./Images/Screens/DriverNameExample.png" window""=""/></a>
-<figcaption>"Driver name window"</figcaption>
+<a class="glightbox" href="./Images/Screens/DriverNameExample.png"><img alt="" de="" exemple="" fenêtre="" nom""="" src="./Images/Screens/DriverNameExample.png"/></a>
+<figcaption>"Exemple de fenêtre de nom"</figcaption>
 </figure>
 <p>Driver LapTime Window :</p>
 <figure class="figure-image">
-<a class="glightbox" href="./Images/Screens/DriverLapTimeExample.png"><img alt="" driver="" laptime="" src="./Images/Screens/DriverLapTimeExample.png" window""=""/></a>
-<figcaption>"Driver Laptime window"</figcaption>
+<a class="glightbox" href="./Images/Screens/DriverLapTimeExample.png"><img alt="" au="" de="" exemple="" fenêtre="" src="./Images/Screens/DriverLapTimeExample.png" temps="" tour""=""/></a>
+<figcaption>"Exemple de fenêtre de temps au tour"</figcaption>
 </figure>
 <p>Driver Tyre Window :</p>
 <figure class="figure-image">
-<a class="glightbox" href="./Images/Screens/DriverTyreWindowExample.png"><img alt="" driver="" src="./Images/Screens/DriverTyreWindowExample.png" tyre="" window""=""/></a>
-<figcaption>"Driver tyre window"</figcaption>
+<a class="glightbox" href="./Images/Screens/DriverTyreWindowExample.png"><img alt="" de="" exemple="" fenêtre="" pneus""="" src="./Images/Screens/DriverTyreWindowExample.png"/></a>
+<figcaption>"Exemple de fenêtre pneus"</figcaption>
 </figure>
 <p>Il existe d'autres types de Window mais ce sont les principaux.</p>
 <p>On se rend assez facilement compte que chacunes de ces windows va avoir besoin d'un traitement spécifique car la manière de reconnaitre le pneu utilisé et le temps au tour ne peut pas être la même.</p>
@@ -1338,29 +1361,29 @@ On peut y voir au moins 4 zones contenant de l'information dans un format diffé
 <p>Exemple :</p>
 <p>Prenons le chiffre 9. Dans l'image il peut être représenté de cette manière :</p>
 <figure class="figure-image">
-<a class="glightbox" href="./Images/Figma/Bad9Example.png"><img alt="" bad9exemple""="" src="./Images/Figma/Bad9Example.png"/></a>
-<figcaption>"Bad9Exemple"</figcaption>
+<a class="glightbox" href="./Images/Figma/Bad9Example.png"><img alt="" avant="" chiffre="" de="" exemple="" post="" src="./Images/Figma/Bad9Example.png" traitement""=""/></a>
+<figcaption>"Exemple de chiffre avant post traitement"</figcaption>
 </figure>
 <p>On peut voir qu'il est flou, pour nous cela ne pose pas de problème et je pense que à peu près nimporte qui peut dire que c'est un 9.</p>
 <p>Cependant comme les contours sont flous et même si on essaie de retirer le background :</p>
 <figure class="figure-image">
-<a class="glightbox" href="./Images/Figma/Aliased9.png"><img 9""="" aliased="" alt="" src="./Images/Figma/Aliased9.png"/></a>
-<figcaption>"Aliased 9"</figcaption>
+<a class="glightbox" href="./Images/Figma/Aliased9.png"><img 9="" aliasing""="" alt="" anti="" avec="" src="./Images/Figma/Aliased9.png"/></a>
+<figcaption>"9 avec anti aliasing"</figcaption>
 </figure>
 <p>On voit que le 9 n'est pas clairement définit. En effet on pourrait le comprendre comme :</p>
 <figure class="figure-image">
-<a class="glightbox" href="./Images/Figma/Horrible9.png"><img alt="" contour""="" first="" src="./Images/Figma/Horrible9.png"/></a>
-<figcaption>"First contour"</figcaption>
+<a class="glightbox" href="./Images/Figma/Horrible9.png"><img alt="" contours""="" de="" exemple="" premier="" src="./Images/Figma/Horrible9.png"/></a>
+<figcaption>"Premier exemple de contours"</figcaption>
 </figure>
 <p>Ou comme :</p>
 <figure class="figure-image">
-<a class="glightbox" href="./Images/Figma/Clean9Example.png"><img alt="" contour""="" second="" src="./Images/Figma/Clean9Example.png"/></a>
-<figcaption>"Second contour"</figcaption>
+<a class="glightbox" href="./Images/Figma/Clean9Example.png"><img alt="" contours""="" de="" exemple="" second="" src="./Images/Figma/Clean9Example.png"/></a>
+<figcaption>"Second exemple de contours"</figcaption>
 </figure>
 <p>Voire même simplement comme :</p>
 <figure class="figure-image">
-<a class="glightbox" href="./Images/Figma/Filled9.png"><img alt="" big="" contour""="" src="./Images/Figma/Filled9.png"/></a>
-<figcaption>"Big contour"</figcaption>
+<a class="glightbox" href="./Images/Figma/Filled9.png"><img alt="" coutour="" de="" exemple="" généreux""="" src="./Images/Figma/Filled9.png"/></a>
+<figcaption>"Exemple de coutour généreux"</figcaption>
 </figure>
 <p>Et on se rend bien compte que les performances de detection ne sont pas les mêmes dans ces trois cas.</p>
 <p>Il faut donc faire un certain post traitement des images pour supprimer les éléments parasites, les couleurs, et augmenter la visibilité des contours importants.</p>
@@ -1372,8 +1395,8 @@ On peut y voir au moins 4 zones contenant de l'information dans un format diffé
 <p>Cette reconnaissance concerne donc des lettres qui font des mots ou des noms.</p>
 <p>Voici un exemple de la WINDOW nom de pilote en entrée :</p>
 <figure class="figure-image">
-<a class="glightbox" href="./Images/Screens/ExempleTextRaw.png"><img alt="" exemple="" raw""="" src="./Images/Screens/ExempleTextRaw.png"/></a>
-<figcaption>"Exemple raw"</figcaption>
+<a class="glightbox" href="./Images/Screens/ExempleTextRaw.png"><img alt="" cru""="" exemple="" src="./Images/Screens/ExempleTextRaw.png" texte=""/></a>
+<figcaption>"Exemple texte cru"</figcaption>
 </figure>
 <p>Ce texte peut paraitre bon, cependant quand on le lance dans Tesseract, il ne va pas toujours donner un résultat parfait. Il faut aussi savoir qu'il y a des noms pas mal plus pénibles que Tesseract a plus de mal à reconnaitres, soit à cause des lettres utilisées, soit car le nom est un nom d'une autre région et qui ne veut rien dire en anglais ce qui empêche l'utilisation de dictionnaire (Ex : Tsunoda est un nom japonais et parfois il est difficile pour Tesseract de le reconnaitre car si une lettre pose problême il ne peut pas trouver de contexte qui puisse l'aider).</p>
 <p>Donc pour le rendre plus facilement lisible et augmenter les chances que toutes les lettres soient découvertes, voici les étapes que j'ai mis en place.</p>
@@ -1384,18 +1407,18 @@ On peut y voir au moins 4 zones contenant de l'information dans un format diffé
 </figure>
 <p>2 : Je fais un <em>Treshhold</em> de 165 car avec moins le texte parfois prend trop du background et avec plus les lettres sont trop fines.</p>
 <figure class="figure-image">
-<a class="glightbox" href="./Images/Screens/ExempleTextTresholding.png"><img alt="" src="./Images/Screens/ExempleTextTresholding.png" treshold""=""/></a>
-<figcaption>"Treshold"</figcaption>
+<a class="glightbox" href="./Images/Screens/ExempleTextTresholding.png"><img alt="" après="" src="./Images/Screens/ExempleTextTresholding.png" texte="" treshold""=""/></a>
+<figcaption>"Texte après Treshold"</figcaption>
 </figure>
 <p>3 : Je fais un <em>Resize</em> de l'image pour avoir une meilleure résolution et permettre une meilleure détection. J'augmente la hauteur et la largeur par un facteur 2. J'ai trouvé cette valeur suffisante et aller plus haut consomme beaucoup de ressources.</p>
 <figure class="figure-image">
-<a class="glightbox" href="./Images/Screens/ExempleTextResize.png"><img alt="" resize""="" src="./Images/Screens/ExempleTextResize.png"/></a>
-<figcaption>"Resize"</figcaption>
+<a class="glightbox" href="./Images/Screens/ExempleTextResize.png"><img alt="" après="" resize""="" src="./Images/Screens/ExempleTextResize.png" texte=""/></a>
+<figcaption>"Texte après Resize"</figcaption>
 </figure>
 <p>4: Je fais une très rapide <em>Dilatation</em> du texte pour retirer le flou amené par la methode de Resize. Je n'utilise qu'une valeur de 1 car je ne veux pas trop changer comment le texte est modelé je veux juste retirer le flou.</p>
 <figure class="figure-image">
-<a class="glightbox" href="./Images/Screens/ExempleTextDilatation.png"><img alt="" dilatation""="" src="./Images/Screens/ExempleTextDilatation.png"/></a>
-<figcaption>"Dilatation"</figcaption>
+<a class="glightbox" href="./Images/Screens/ExempleTextDilatation.png"><img alt="" après="" dilatation""="" src="./Images/Screens/ExempleTextDilatation.png" texte=""/></a>
+<figcaption>"Texte après Dilatation"</figcaption>
 </figure>
 <p><em>Explication des methodes précises plus bas</em></p>
 <p>Voila pour ce qui est du post processing. Je ne dis pas que ce sont les meilleurs paramêtres possibles mais dans mes tests ce sont ceux qui ont le mieux marchés.</p>
@@ -1424,36 +1447,36 @@ On peut y voir au moins 4 zones contenant de l'information dans un format diffé
 <p>Cependant, tous ces temps possèdent le même type de post-traitement avant d'être envoyés à Tesseract.</p>
 <p>Voici un exemple de temps au tour avant toute transformation :</p>
 <figure class="figure-image">
-<a class="glightbox" href="./Images/Screens/ExempleLapTimeBefore.png"><img alt="" lap="" src="./Images/Screens/ExempleLapTimeBefore.png" time""=""/></a>
-<figcaption>"Lap time"</figcaption>
+<a class="glightbox" href="./Images/Screens/ExempleLapTimeBefore.png"><img alt="" au="" avant="" src="./Images/Screens/ExempleLapTimeBefore.png" temps="" tour="" traitement""=""/></a>
+<figcaption>"Temps au tour avant traitement"</figcaption>
 </figure>
 <p>On peut avoir l'impression que ce texte est tout à fait lisible et facile à décoder surtout quand on le voit de loin comme ca. Cependant, il faut imaginer que ces chiffres font 13 pixels de haut en comptant le flou et comme expliqué plus haut ce flou dans ces echelles est terrible.</p>
 <figure class="figure-image">
-<a class="glightbox" href="./Images/Screens/ExempleLapTimeBeforeUpscaled.png"><img alt="" lap="" src="./Images/Screens/ExempleLapTimeBeforeUpscaled.png" time""=""/></a>
-<figcaption>"Lap time"</figcaption>
+<a class="glightbox" href="./Images/Screens/ExempleLapTimeBeforeUpscaled.png"><img alt="" au="" src="./Images/Screens/ExempleLapTimeBeforeUpscaled.png" temps="" tour="" zoomé""=""/></a>
+<figcaption>"Temps au tour zoomé"</figcaption>
 </figure>
 <p>Si on donne cette image à Tesseract, les '3' deviennent des '9', des '9' deviennent des '8', des '2' deviennent eux aussi des '9', le tout parfois inversement et de manière complêtement imprévisible. Ca n'est simplement pas utilisable.</p>
 <p>Cette partie est un peu plus complexe car si la detection n'est pas fiable les chiffres sont simplement inutilisables. Si à tout moment un temps au tour de 1:39.106 devient 1:32.108 c'est juste pas possible.</p>
 <p>Voici donc les étapes de post-traitement que j'ai mis en place pour leur détection :</p>
 <p>1: J'applique un <em>Treshold</em> de 185 pour enlever les ambiguités d'alisaising et avoir une image en noir et blanc claire. La valeur de 185 est assez élevée car le but est de vraiment garder uniquement les contours. Comme les chiffres se ressemlent beaucoup plu que les lettres, il faut tenter le plus possible de conserver leur formes spécifiques. Je me suis rendu compte que cette valeur était une de celles qui marchent le mieux.</p>
 <figure class="figure-image">
-<a class="glightbox" href="./Images/Screens/ExempleLapTimeTreshold.png"><img alt="" src="./Images/Screens/ExempleLapTimeTreshold.png" treshold""=""/></a>
-<figcaption>"Treshold"</figcaption>
+<a class="glightbox" href="./Images/Screens/ExempleLapTimeTreshold.png"><img alt="" après="" au="" src="./Images/Screens/ExempleLapTimeTreshold.png" temps="" tour="" treshold""=""/></a>
+<figcaption>"Temps au tour après Treshold"</figcaption>
 </figure>
 <p>2: J'applique un <em>Resize</em> de 2 pour augmenter la résolution des chiffres et permettre une meilleure détection. Le but est d'avoir plus de pixels et donc de permettre à Tesseract de mieux utiliser ses matrices de convolution.</p>
 <figure class="figure-image">
-<a class="glightbox" href="./Images/Screens/ExempleLapTimeResize.png"><img alt="" resize""="" src="./Images/Screens/ExempleLapTimeResize.png"/></a>
-<figcaption>"Resize"</figcaption>
+<a class="glightbox" href="./Images/Screens/ExempleLapTimeResize.png"><img alt="" après="" au="" resize""="" src="./Images/Screens/ExempleLapTimeResize.png" temps="" tour=""/></a>
+<figcaption>"Temps au tour après Resize"</figcaption>
 </figure>
-<p>3: Comme le <em>Resize</em> amène du flou, j'utilise une methode de Dilatation<em> qui me permet de retirer ce flou et de remplir un peu plus certaines parties qui ont été un peu laissée par le </em>Resize*;</p>
+<p>3: Comme le <em>Resize</em> amène du flou, j'utilise une methode de <em>Dilatation</em> qui me permet de retirer ce flou et de remplir un peu plus certaines parties qui ont été un peu laissée par le <em>Resize</em>;</p>
 <figure class="figure-image">
-<a class="glightbox" href="./Images/Screens/ExempleLapTimeDilatation.png"><img alt="" dilatation""="" src="./Images/Screens/ExempleLapTimeDilatation.png"/></a>
-<figcaption>"Dilatation"</figcaption>
+<a class="glightbox" href="./Images/Screens/ExempleLapTimeDilatation.png"><img alt="" après="" au="" dilatation""="" src="./Images/Screens/ExempleLapTimeDilatation.png" temps="" tour=""/></a>
+<figcaption>"Temps au tour après Dilatation"</figcaption>
 </figure>
 <p>4: Contrairement aux mots plus haut, la rondeur ajoutée par la dilatation n'est pas vraiment désirée. En effet, elle peut rendre confuse certains chiffres et empêcher Tesseract de bien trouver le chiffre. Alors j'applique une <em>Erosion</em> qui me permet de contrecarrer en partie les rondeurs ajoutées par la dilatation et retrouver des chiffres bien formées. Pour l'<em>Erosion</em> et la <em>Dilatation</em> j'ai utilisé une valeur de 1 car je ne voulais pas trop changer les chiffres.</p>
 <figure class="figure-image">
-<a class="glightbox" href="./Images/Screens/ExempleLapTimeErode.png"><img alt="" erode""="" src="./Images/Screens/ExempleLapTimeErode.png"/></a>
-<figcaption>"Erode"</figcaption>
+<a class="glightbox" href="./Images/Screens/ExempleLapTimeErode.png"><img alt="" après="" au="" erosion""="" src="./Images/Screens/ExempleLapTimeErode.png" temps="" tour=""/></a>
+<figcaption>"Temps au tour après Erosion"</figcaption>
 </figure>
 <p><em>Explication des methodes précises plus bas</em></p>
 <p>Et avec ce post processing on retrouve de plutôts bon résultats qui demandent peu de traitement.</p>
@@ -1485,31 +1508,31 @@ On peut y voir au moins 4 zones contenant de l'information dans un format diffé
 <li>Les pneus pluie</li>
 </ul>
 <figure class="figure-image">
-<a class="glightbox" href="./Images/Photos/Tyres.png"><img alt="" src="./Images/Photos/Tyres.png" tyres""=""/></a>
-<figcaption>"Tyres"</figcaption>
+<a class="glightbox" href="./Images/Photos/Tyres.png"><img alt="" de="" gamme="" pirelli""="" pneus="" src="./Images/Photos/Tyres.png"/></a>
+<figcaption>"Gamme de pneus Pirelli"</figcaption>
 </figure>
 <p>Les trois premiers pneus sont des pneus faits pour piste sèche, le pneu intermédiaire pour piste humide et le neu pluie pour la pluie.</p>
 <p>Chaque pneu a sa durée de vie et son niveau de performance propre mais je ne vais pas rentrer dans le détail ici. Tout ce qu'il faut savoir ce que savoir sur quel pneu chaque pilote est et depuis combien de temps il les chausse est une information très importante.</p>
 <p>Chaque pneu a une couleur donnée qui permet de les différencier.</p>
 <p>Voici un exemple de ce à quoi une WINDOW de pneus peut ressembler :</p>
 <figure class="figure-image">
-<a class="glightbox" href="./Images/Screens/TyreZoneExemple3.png"><img 1""="" alt="" exemple="" src="./Images/Screens/TyreZoneExemple3.png"/></a>
-<figcaption>"Exemple 1"</figcaption>
+<a class="glightbox" href="./Images/Screens/TyreZoneExemple3.png"><img 1""="" alt="" exemple="" pneus="" src="./Images/Screens/TyreZoneExemple3.png" zone=""/></a>
+<figcaption>"Exemple zone pneus 1"</figcaption>
 </figure>
 <p>Mais cette zone peut aussi ressembler à ca :</p>
 <figure class="figure-image">
-<a class="glightbox" href="./Images/Screens/TyreZoneExemple2.png"><img 2""="" alt="" exemple="" src="./Images/Screens/TyreZoneExemple2.png"/></a>
-<figcaption>"Exemple 2"</figcaption>
+<a class="glightbox" href="./Images/Screens/TyreZoneExemple2.png"><img 2""="" alt="" exemple="" pneus="" src="./Images/Screens/TyreZoneExemple2.png" zone=""/></a>
+<figcaption>"Exemple zone pneus 2"</figcaption>
 </figure>
 <p>Mais aussi à ca :</p>
 <figure class="figure-image">
-<a class="glightbox" href="./Images/Screens/TyreZoneExemple1.png"><img 3""="" alt="" exemple="" src="./Images/Screens/TyreZoneExemple1.png"/></a>
-<figcaption>"Exemple 3"</figcaption>
+<a class="glightbox" href="./Images/Screens/TyreZoneExemple1.png"><img 3""="" alt="" exemple="" pneus="" src="./Images/Screens/TyreZoneExemple1.png" zone=""/></a>
+<figcaption>"Exemple zone pneus 3"</figcaption>
 </figure>
 <p>Voire même ca :</p>
 <figure class="figure-image">
-<a class="glightbox" href="./Images/Screens/TyreZoneExemple4.png"><img 4""="" alt="" exemple="" src="./Images/Screens/TyreZoneExemple4.png"/></a>
-<figcaption>"Exemple 4"</figcaption>
+<a class="glightbox" href="./Images/Screens/TyreZoneExemple4.png"><img 4""="" alt="" exemple="" pneus="" src="./Images/Screens/TyreZoneExemple4.png" zone=""/></a>
+<figcaption>"Exemple zone pneus 4"</figcaption>
 </figure>
 <p>Je pense que vous pouvez tout de suite comprendre la difficulté que représente la tâche de récupèration de données à partir de cette image.</p>
 <p>En gros le fonctionnement de cette zone d'information est assez simple.</p>
@@ -1526,13 +1549,13 @@ On peut y voir au moins 4 zones contenant de l'information dans un format diffé
 <p>Ensuite après avoir trouvé le premier obstacle, je récupère une zone qui doit englober le cercle.</p>
 <p>Voici un exemple avec cette image en entrée :</p>
 <figure class="figure-image">
-<a class="glightbox" href="./Images/Screens/TyreZoneFull.png"><img alt="" full="" src="./Images/Screens/TyreZoneFull.png" zone""=""/></a>
-<figcaption>"Full zone"</figcaption>
+<a class="glightbox" href="./Images/Screens/TyreZoneFull.png"><img alt="" complête""="" src="./Images/Screens/TyreZoneFull.png" zone=""/></a>
+<figcaption>"Zone complête"</figcaption>
 </figure>
 <p>Elle est automatiquement coupée de cette facon :</p>
 <figure class="figure-image">
-<a class="glightbox" href="./Images/Screens/TyreZoneCropped.png"><img alt="" cropped="" src="./Images/Screens/TyreZoneCropped.png" zone""=""/></a>
-<figcaption>"Cropped zone"</figcaption>
+<a class="glightbox" href="./Images/Screens/TyreZoneCropped.png"><img alt="" automatiquement""="" coupée="" src="./Images/Screens/TyreZoneCropped.png" zone=""/></a>
+<figcaption>"Zone coupée automatiquement"</figcaption>
 </figure>
 <p>Cela me permet d'isoler uniquement ce qui m'intéresse ce qui est très pratique pour Tesseract et pour la detection de couleur.</p>
 <p>Ensuite avec cette image je peux commencer le processus de reconnaissance.</p>
@@ -1541,38 +1564,38 @@ On peut y voir au moins 4 zones contenant de l'information dans un format diffé
 <p>Il y a cinq couleurs des pneus possibles :</p>
 <p>"#ff0000" pneu tendre/soft</p>
 <figure class="figure-image">
-<a class="glightbox" href="./Images/Photos/SoftTyreColor.png"><img alt="" color""="" soft="" src="./Images/Photos/SoftTyreColor.png" tyre=""/></a>
-<figcaption>"Soft tyre color"</figcaption>
+<a class="glightbox" href="./Images/Photos/SoftTyreColor.png"><img alt="" couleur="" d'un="" pneu="" src="./Images/Photos/SoftTyreColor.png" tendre""=""/></a>
+<figcaption>"Couleur d'un pneu tendre"</figcaption>
 </figure>
 <p>"#f5bf00" pneu medium</p>
 <figure class="figure-image">
-<a class="glightbox" href="./Images/Photos/MediumTyreColor.png"><img alt="" color""="" medium="" src="./Images/Photos/MediumTyreColor.png" tyre=""/></a>
-<figcaption>"medium tyre color"</figcaption>
+<a class="glightbox" href="./Images/Photos/MediumTyreColor.png"><img alt="" couleur="" d'un="" medium""="" pneu="" src="./Images/Photos/MediumTyreColor.png"/></a>
+<figcaption>"Couleur d'un pneu medium"</figcaption>
 </figure>
 <p>"#a4a5a8" pneu dur/hard</p>
 <figure class="figure-image">
-<a class="glightbox" href="./Images/Photos/HardTyreColor.png"><img alt="" color""="" hard="" src="./Images/Photos/HardTyreColor.png" tyre=""/></a>
-<figcaption>"Hard tyre color"</figcaption>
+<a class="glightbox" href="./Images/Photos/HardTyreColor.png"><img alt="" couleur="" d'un="" dur""="" pneu="" src="./Images/Photos/HardTyreColor.png"/></a>
+<figcaption>"Couleur d'un pneu dur"</figcaption>
 </figure>
 <p>"#00a42e" pneu inter</p>
 <figure class="figure-image">
-<a class="glightbox" href="./Images/Photos/IntermediateTyreColor.png"><img alt="" color""="" inter="" src="./Images/Photos/IntermediateTyreColor.png" tyre=""/></a>
-<figcaption>"Inter tyre color"</figcaption>
+<a class="glightbox" href="./Images/Photos/IntermediateTyreColor.png"><img alt="" couleur="" d'un="" intermédiaire""="" pneu="" src="./Images/Photos/IntermediateTyreColor.png"/></a>
+<figcaption>"Couleur d'un pneu intermédiaire"</figcaption>
 </figure>
 <p>"#2760a6" pneu pluie/wet</p>
 <figure class="figure-image">
-<a class="glightbox" href="./Images/Photos/WetTyreColor.png"><img alt="" color""="" src="./Images/Photos/WetTyreColor.png" tyre="" wet=""/></a>
-<figcaption>"Wet tyre color"</figcaption>
+<a class="glightbox" href="./Images/Photos/WetTyreColor.png"><img alt="" couleur="" d'un="" pluie""="" pneu="" src="./Images/Photos/WetTyreColor.png"/></a>
+<figcaption>"Couleur d'un pneu pluie"</figcaption>
 </figure>
 <p>Ce qui est pratique c'est que même dans les cas ou il n'y a pas beaucoup de couleur comme celui la :</p>
 <figure class="figure-image">
-<a class="glightbox" href="./Images/Screens/TyreZoneHard.png"><img alt="" but="" hard="" letter""="" only="" src="./Images/Screens/TyreZoneHard.png" the="" tyre=""/></a>
-<figcaption>"Hard tyre but only the letter"</figcaption>
+<a class="glightbox" href="./Images/Screens/TyreZoneHard.png"><img 0="" alt="" avec="" dur="" pneu="" src="./Images/Screens/TyreZoneHard.png" tours""=""/></a>
+<figcaption>"Pneu dur avec 0 tours"</figcaption>
 </figure>
 <p>On arrive à une couleur moyenne de :</p>
 <figure class="figure-image">
-<a class="glightbox" href="./Images/Screens/TyreZoneHardAVG.png"><img above""="" alt="" average="" color="" from="" picture="" src="./Images/Screens/TyreZoneHardAVG.png" the=""/></a>
-<figcaption>"The average color from the picture above"</figcaption>
+<a class="glightbox" href="./Images/Screens/TyreZoneHardAVG.png"><img alt="" après="" background""="" ci="" couleur="" de="" dessus="" du="" l'image="" moyenne="" soustraction="" src="./Images/Screens/TyreZoneHardAVG.png"/></a>
+<figcaption>"Couleur moyenne de l'image ci dessus après soustraction du background"</figcaption>
 </figure>
 <p>Et il est donc assez facile de determiner le type de pneu en question.</p>
 <p>Attention, les résultats peuvent être très vite dérangés par la couleur du pneu précédent si le découpage de la fenêtre n'a pas été assez précis.</p>
@@ -1582,25 +1605,25 @@ On peut y voir au moins 4 zones contenant de l'information dans un format diffé
 <p>Il faut donc retirer le background et ensuite la couleur. Sauf que comme le chiffre est de la couleur du background, si on retire le background et ensuite la couleur il ne reste plus rien. Il faut donc retirer le background AUTOUR du rond, et ensuite si on retire la couleur il devrait rester le chiffre sur fond blanc.</p>
 <p>Pour se faire, j'ai tiré des traits depuis les bords de l'image jusqu'à ce qu'ils rencontrent le rond. Ensuite je retire tous les pixels entre le rond et les bords de l'image ce qui nous donne ceci :</p>
 <figure class="figure-image">
-<a class="glightbox" href="./Images/Screens/TyreZoneCropedWithoutBackGround.png"><img alt="" background""="" no="" outer="" src="./Images/Screens/TyreZoneCropedWithoutBackGround.png"/></a>
-<figcaption>"No outer background"</figcaption>
+<a class="glightbox" href="./Images/Screens/TyreZoneCropedWithoutBackGround.png"><img alt="" avec="" background="" en="" le="" moins""="" pneu="" src="./Images/Screens/TyreZoneCropedWithoutBackGround.png" zone=""/></a>
+<figcaption>"Zone pneu avec le background en moins"</figcaption>
 </figure>
 <p>Ensuite on peu retirer les pixels qui ont une valeur dans un channel RGB plus haute qu'un certain seuil :</p>
 <figure class="figure-image">
-<a class="glightbox" href="./Images/Screens/TyreZoneFilter1.png"><img alt="" digit""="" only="" src="./Images/Screens/TyreZoneFilter1.png"/></a>
-<figcaption>"Only digit"</figcaption>
+<a class="glightbox" href="./Images/Screens/TyreZoneFilter1.png"><img alt="" avec="" couleurs="" des="" le="" reste="" src="./Images/Screens/TyreZoneFilter1.png" supprimmées""="" zone=""/></a>
+<figcaption>"Zone avec le reste des couleurs supprimmées"</figcaption>
 </figure>
 <p>Et la on a ce que l'on veut !</p>
 <p>A partir de la c'est les filtres que l'on connait qui sont utilisés pour en faire une image plus facile à utiliser par Tesseract.</p>
 <p>1 : On effectue un <em>Resize</em> de facteur 4 (oui c'est beaucoup mais en même temps le chiffre est vraiment petit à la base) qui permet d'avoir une image d'une bien meilleure résolution.</p>
 <figure class="figure-image">
-<a class="glightbox" href="./Images/Screens/TyreZoneFilter2.png"><img 1""="" alt="" filter="" src="./Images/Screens/TyreZoneFilter2.png"/></a>
-<figcaption>"Filter 1"</figcaption>
+<a class="glightbox" href="./Images/Screens/TyreZoneFilter2.png"><img 1""="" alt="" filtre="" src="./Images/Screens/TyreZoneFilter2.png"/></a>
+<figcaption>"Filtre 1"</figcaption>
 </figure>
 <p>2: On fait une <em>Dilatation</em> de facteur 1 pour retirer tout le flou de l'image pour aider Tesseract</p>
 <figure class="figure-image">
-<a class="glightbox" href="./Images/Screens/TyreZoneAfter.png"><img alt="" result""="" src="./Images/Screens/TyreZoneAfter.png"/></a>
-<figcaption>"Result"</figcaption>
+<a class="glightbox" href="./Images/Screens/TyreZoneAfter.png"><img alt="" resultat""="" src="./Images/Screens/TyreZoneAfter.png"/></a>
+<figcaption>"Resultat"</figcaption>
 </figure>
 <p>Et on a un chiffre qui est utilisable par Tesseract !</p>
 <p><em>Explication des methodes précises plus bas</em></p>
@@ -1640,23 +1663,23 @@ C'est une étape très importante pour l'OCR car elle permet (si bien faite) d'i
 <p>Cette methode sert à augmenter la résolution d'une image pour améliorer la précision de l'algorythme de Tesseract. En effet, avec trop peu de pixels, la matrice de convolution n'est pas toujours aussi efficace.</p>
 <p>Il ne faut pas confondre cette methode d'augmentation de la taille avec une simple interpolation. En effet une augmentation de taille interpolée ne vas pas vraiment changer la résolution, l'image sera toujours aussi pixelisée, seulement, les pixels seront composées de plus de pixels comme dans l'exemple ci dessous :</p>
 <figure class="figure-image">
-<a class="glightbox" href="./Images/Photos/InterpolationExemple.png"><img alt="" exemple""="" interpolation="" src="./Images/Photos/InterpolationExemple.png"/></a>
-<figcaption>"Interpolation exemple"</figcaption>
+<a class="glightbox" href="./Images/Photos/InterpolationExemple.png"><img alt="" d'interpolation="" exemple="" linéaire""="" src="./Images/Photos/InterpolationExemple.png"/></a>
+<figcaption>"Exemple d'interpolation linéaire"</figcaption>
 </figure>
 <p>Dans mon projet j'utilise de l'interpolation bicubique qui va créer de l'information pour tenter de combler le vide et produire une image réellement plus grande et avec plus de details mais en ajoutant du flou.</p>
 <figure class="figure-image">
-<a class="glightbox" href="./Images/Photos/BicubicExample.png"><img alt="" bicubic="" exemple""="" src="./Images/Photos/BicubicExample.png"/></a>
-<figcaption>"bicubic exemple"</figcaption>
+<a class="glightbox" href="./Images/Photos/BicubicExample.png"><img alt="" d'interpolation""="" des="" différents="" exemple="" src="./Images/Photos/BicubicExample.png" types=""/></a>
+<figcaption>"Exemple des différents types d'interpolation"</figcaption>
 </figure>
 <p>Le but est d'aller chercher dans les pixels alentours les couleurs qui sont déja présente et de jouer avec des poids pour tenter de faire une prédiction de ce que ce pixel aurait été si l'image avait plus de detail.</p>
 <p>Voici un exemple assez parlant :</p>
 <figure class="figure-image">
-<a class="glightbox" href="./Images/Photos/BicubicExample1.webp"><img alt="" bicubic="" demonstration""="" src="./Images/Photos/BicubicExample1.webp"/></a>
-<figcaption>"bicubic demonstration"</figcaption>
+<a class="glightbox" href="./Images/Photos/BicubicExample1.webp"><img (avant)""="" alt="" bicubique="" exemple="" interpolation="" src="./Images/Photos/BicubicExample1.webp"/></a>
+<figcaption>"Exemple interpolation bicubique (avant)"</figcaption>
 </figure>
 <figure class="figure-image">
-<a class="glightbox" href="./Images/Photos/BicubicExample2.webp"><img alt="" bicubic="" demonstration""="" src="./Images/Photos/BicubicExample2.webp"/></a>
-<figcaption>"bicubic demonstration"</figcaption>
+<a class="glightbox" href="./Images/Photos/BicubicExample2.webp"><img (après)""="" alt="" bicubique="" exemple="" interpolation="" src="./Images/Photos/BicubicExample2.webp"/></a>
+<figcaption>"Exemple interpolation bicubique (après)"</figcaption>
 </figure>
 <p>On pourrait croire que c'est inutile mais dans le contexte de Tesseract ajouter des détails pour tenter de simuler une meilleure résolution même en créant du flou est intéressant pour mieux remplir la matrice de convolution.</p>
 <p>Mais il est possible de réduire ce flou avec d'autres méthodes également.</p>
@@ -1680,6 +1703,12 @@ C'est une étape très importante pour l'OCR car elle permet (si bien faite) d'i
 <h2 id="resume-des-difficultes-techniques">Résumé des difficultés techniques</h2>
 <hr/>
 <p>[A remplir au fur et à mesure dans la seconde moitié du travail de diplôme]</p>
+<h2 id="optimisation-du-programme">Optimisation du programme</h2>
+<hr/>
+<p>[A remplir à la fin du projet pour parler des différentes methodes d'optimisation]</p>
+<h2 id="ethique-du-projet">Ethique du projet</h2>
+<hr/>
+<p>[A remplir à la fin du projet pour parler des questions ethiques du projet (Ex: Utilisation potentiellement abusive de la F1Tv ou L'histoire des cookies)]</p>
 <h2 id="ameliorations-futures">Améliorations futures</h2>
 <hr/>
 <p>[A remplir dans les dernières semaines du travail de diplôme]</p>