# Journal de bord

## Mercredi 29 Mars 2023

----

Premier jour du travail de diplôme. Nous avons eu un briefing de mr Garcia et nous avons pu commencer à préparer le travail.

Nous avons eu les différents fichiers nescessaires à la bonne réalisation du projet et je me suis mis à faire les fichiers nescessaires

La première chose a été de faire ce mkdocs dans lequel j'ai mis un fichier yml plutôt standart qui risque de changer au fur et à mesure.

Voici le premier yml :

```
site_name: Documentation Diplome
theme:
        name: material
        palette:
        # Palette toggle for light mode
        - media: "(prefers-color-scheme: light)"
          scheme: default
          toggle:
          icon: material/brightness-7
          name: Switch to dark mode

        # Palette toggle for dark mode
        - media: "(prefers-color-scheme: dark)"
          scheme: slate
          toggle:
          icon: material/brightness-4
          name: Switch to light mode
markdown_extensions:
  - attr_list
  - md_in_html
plugins:
  - glightbox
  - with-pdf
```

Voici un example de à quoi ca ressemble en forme de site

!["Exemple mkdocs"](./Images/Screens/MkdocsExample.png)

Ensuite il m'a fallu faire une version plus à jour de mon cahier des charges car je n'y avait pas touché depuis novembre. J'ai envoyé un mail à mes enseignants pour qu'ils puissent y jeter un oeuil pour être sûr que je n'ai rien changé qui les dérangent.

Monsieur Jayr m'a demadé à l'occasion de lui faire un planning type Gantt alors je me suis mis à la tâche.

J'ai fait un planning prévisionnel et une légende les deux sont dispo dans le dossier planning de ce repertoire.

Ensuite je me suis mis à tout mettre sur git. A commencer par ce repertoire

Et c'est deja la fin de la journée ! Demain j'avance un peu sur la doc avec ce que je peux déja remplir et je finis de préparer ce dont j'ai besoin pour commencer à coder.

## Jeudi 30 Mars 2023

----

Aujourd'hui selon le planning je dois me charger des dernirers préparatifs pour commencer correctement. J'ai fait exprès de prenre du temps pour ca au début pour ne pas me créer de soucis plus loin pendant le travail.

Je vais envoyer par mail le planning que j'ai fait à mes suiveurs.

Ensuite je vais m'attaquer au squelette de la docmentation. Je vais essayer de remplir tout ce que je peux remplir dans un premier temps car cela tout ca de fait pour plus tard quitte à modifier quelques aspects au fur et à mesure.

J'ai aussi désactivé mkdocs with pdf par ce que les résultats ne sont vraiment pas ceux que j'attends et cela ralentis énormément le déploiment.

J'ai aussi rassemblé mes croquis pour le poster :

!["Croquis Poster 1"](./Images/Photos/photosCroquisPoster1jpg)
!["Croquis Poster 2"](./Images/Photos/photosCroquisPoster2jpg)

On peut voir que dans un premier temps j'ai tenté de faire un poster un peu plus stylisé et marketing. Cependant après avoir discuté avec Mr Garcia et différents profs dont un de l'HEPIA et ils m'ont indiqué que ce qui était attendu était moins du marketing qu'un diagramme de fonctionnement.

On peut voir sur les derniers posters que le coté technique ressort de plus en plus. Le but sera de faire une version encore plus technique ou on peut voir les différents fonctionnements de l'application avec les technologies utilisées.

Le défi cela va être de faire un joli poster qui soit en même temps vendeur et en même temps rempli techniquement.

Oh et j'ai eu un problème ou mon calvier et ma souris ne voulaient d'un coup plus fonctionner. Dans mon cas c'était un problème de power management des ports. J'ai eu le soucis sur mon pc fixe à la maison et sur mon pc portable également. En gros de ce que j'ai compris le soucis c'est que le pc croit que un port est trop solicité niveau puissance et du coup décide de couper l'alimentation du port USB.

J'ai pu règler le soucis en allant dans le device manager sous universal bus controller sous power management et en décochant la case qui indique que windows peut désactiver ce port.

Je ne conseille pas ce fix si vous avez des composants de mauvaise qualité car cela pourrait être une vraie alerte cependant le fait que mes composants sont plutôt haut de gamme et le fait que mon clavier et ma souris le fassent en même temps et que ils fonctionnaient très bien depuis plus de 4 ans me font penser que c'est juste une nouvelle mise a jour de windows qui est pénible.

Demain je vais pouvoir commencer à coder pour de bon.

## Vendredi 31/03/2023

Aujourd'hui on s'occupe de la PT2 qui est la programmation de la récupèration des informations des images.

Je vais tester IronOcr

Source : https://www.c-sharpcorner.com/article/ocr-using-tesseract-in-C-Sharp/
Doc : https://ironsoftware.com/csharp/ocr/docs/
Examples : https://ironsoftware.com/csharp/ocr/examples/simple-csharp-ocr-tesseract/

Avant d'utiliser la librairie je me demande si je dois utiliser un peu de post processing pour aider à la reconnaissance.

Je peux soit utiliser l'image cropée directement :

!["Image non traitée"](./Images/Screens/BlackToWhite0.png)

Soit avec un filtre pour passer en noir et blanc laxiste

!["Image traitée laxiste"](./Images/Screens/BlackToWhite1.png)

Soit avec un filtre pour passer en noir et blanc stricte

!["Image traitée stricte"](./Images/Screens/BlackToWhite2.png)

Il va falloir faire des tests avec tous les noms et les chiffres pour trouver le plus efficace.

Bon malheureusment Iron OCR semblait être une bonne alternative mais c'est une librairie privée qui demande une license pour être utilisée. Il va falloir trouver autre chose.

En utilisant la librairie "Tesseract" qui existe on peut faire de la reconnaissance de texte avec un code plutôt simple :

```Csharp
TesseractEngine engine = new TesseractEngine(tessDataFolder.FullName,"eng", EngineMode.Default);
            
var tessImage = Pix.LoadFromMemory(ImageToByte(sample));

Page page = engine.Process(tessImage);
string text = page.GetText();
```

Voici la methode ImageToByte :
https://stackoverflow.com/questions/7350679/convert-a-bitmap-into-a-byte-array

```Csharp
public static byte[] ImageToByte(Image img)
{
    using (var stream = new MemoryStream())
    {
        img.Save(stream, System.Drawing.Imaging.ImageFormat.Png);
            return stream.ToArray();
        }
}
```

Voici le code pour traiter plusieurs textes sur une seule image :

```Csharp
Page page = engine.Process(tessImage);
            // Get the iterator for the page layout
            using (var iter = page.GetIterator())
            {
                // Loop over the elements of the page layout
                iter.Begin();
                do
                {
                    // Declare a Rect variable to hold the bounding box
                    Rect boundingBox;

                    // Get the bounding box for the current element
                    if (iter.TryGetBoundingBox(PageIteratorLevel.Word, out boundingBox))
                    {
                        g.DrawRectangle(Pens.Red,new Rectangle(boundingBox.X1,boundingBox.Y1,boundingBox.Width,boundingBox.Height));
                    }

                    // Get the text for the current element
                    var text = iter.GetText(PageIteratorLevel.Word);
                    tbxResult.Text += text.ToUpper() + Environment.NewLine;
                } while (iter.Next(PageIteratorLevel.Word));
            }
```

Etonnament, avec plus de texte, des noms qui étaient autrefois mal reconnus sont parfaitement interprêtés.

Par exemple voici un exemple de reconnaisance de texte sur tous les pilotes :

!["Screenshot de reconnaisance d'image complete"](./Images/Screens/TextRecognition1.png)

On voit que le nom Leclerc est mal reconnu. Mais voici ce que cela donne quand on prend une image qui ne contient que le nom Leclerc :

!["Screenshot de reconnaissance d'image cropée"](./Images/Screens/TextRecognition0.png)

On voit ici que le nom Leclerc est très bien reconnu.

Dans le premier exemple on peut voir que Tsunoda est reconnu comme "Reticin" ce qui n'est pas exactement pareil (lol)

Et quand on isole le nom Tsunoda dans une image seule :

!["Screenshot de reconnaissance de Tsunoda"](./Images/Screens/TextRecognition2.png)

Il le lit "RETLELYY" ce qui n'est toujours pas exactement ca...

Une meilleure résolution pourrait peut-être résoudre le problème en partie.

Jusqu'ici les images étaient en presque 720P ce qui donne ceci :

!["Tsunoda en 720P"](./Images/Screens/720PTsunoda.png)

Et j'ai lancé une récupèration d'images en 1080p pour récupèrer ceci :

!["Tsunoda en 1080P"](./Images/Screens/1080PTsunoda.png)

On peut voir une certaine différence tout de même.

Et quand on lance la reconnaissance :

!["Reconnaissance Tsunoda en 1080P"](./Images/Screens/TextRecognition3.png)

"Tsunoda n'est plus écrit "RETLELYY" mais "TSUNDDA" ce qui n'est pas parfait mais qui est déja beaucoup mieux.

J'ai essayé de mettre l'engine de Tesseract en mode "JPN" comme Tsunoda est un nom japonais mais sans succès j'ai le même résultat.

Comme la résolution est meilleure je me suis dit que peut être le filtre de passage en noir et blanc pourrait aider.

J'ai écrit cette petite methode pour convertir l'image en noir et blanc :

```Csharp
private static Bitmap ConvertToBlackAndWhite(Bitmap inputBmp)
        {
            const int BLACK_TO_WHITE_TRESHOLD = 200;
            Bitmap result = new Bitmap(inputBmp.Width, inputBmp.Height);

            for (int y = 0; y < inputBmp.Height; y++)
            {
                for (int x = 0; x < inputBmp.Width; x++)
                {
                    Color pixelColor = inputBmp.GetPixel(x,y);
                    if (pixelColor.R <= BLACK_TO_WHITE_TRESHOLD && pixelColor.G <= BLACK_TO_WHITE_TRESHOLD && pixelColor.B <= BLACK_TO_WHITE_TRESHOLD)
                    {
                        pixelColor = Color.FromArgb(0,0,0);
                    }
                    else
                    {
                        pixelColor = Color.FromArgb(255,255,255);
                    }
                    result.SetPixel(x,y,pixelColor);
                }
            }
            return result;
        }
```

Rien de bien dingue mais cela fonctionne et je peux jouer avec le BLACK_AND_WHITE_TRESHOLD pour changer son comportement.

J'ai dabord testé avec un treshold de 100 et le programme a réussi à me sortir Tsunoda en deux mots ce qui était déja très encourageant.

Et après avoir augmenté le Treshold... Tada :

!["Tsunoda 1080P avec filtre"](./Images/Screens/TextRecognition4.png)

Le programme arrive bien à reconnaitre TSUNODA. Je pense que cette tactique ne fonctionnait pas avant car la resolution était trop faible et l'aliasing se mêlait trop avec le texte pour être utilisable.

Cependant cette technique ne fonctionne pas sur tous les noms. Par example avec Leclerc :

!["Leclerc 1080P avec filtre"](./Images/Screens/TextRecognition5.png)

On récupère "Leeler'c" ce qui n'est pas bon du tout.

Mais en modulant le Treshold (ici à 150) On peut de nouveau voir Leclerc être reconnu correctement

!["Leclerc 1080P avec filtre 2"](./Images/Screens/TextRecognition6.png)

Je pense que pour avoir de bons résultats il va falloir faire un algo qui :

- Découpe l'image en autant de plus petites images pour avoir un mot par image.
- Teste voir si avec l'image originale un nom correspond à la liste de pilotes existant.
- Si cela ne marche pas, on applique le filtre en modulant le Treshold.
- Dans le cas ou on aurait pas un match parfait on fait un algo qui cherche le nom le plus proche qui existe dans la liste de noms donnés.

Seulement voila, il n'y a pas que des lettres que l'on veut récupèrer. On veut surtout pouvoir récupèrer les chiffres.

Pour les chiffres on va avoir des soucis également...

Si on essaie directement la même technique sans filtre on a des résultats comme celui ci :

!["Tentative de reconnaisance du timing"](./Images/Screens/TimingRecognition0.png)

La virgule a tendeance à se barrer ce qui est particulièrement problématique. Cependant comme les chiffres ont beaucoup moins de possibilitées que les lettres et qu'il n'y a pas de problème de langue on devrait pouvoir travailler à faire des règlage que l'on pourra ensuite utiliser.

Avec un Treshold de 165 on arrive presque à quelque chose d'intéressant :

!["Tentative 2 de reconnaissance du timing"](./Images/Screens/TimingRecognition1.png)

Le + n'est clairement pas compris mais ca n'est pas embêtant car c'est souvent redondant. On arrive cependant à isoler 3 et 259. Même si la virgule n'est pas comprise cela veut dire qu'il est tout de même possible de discriminer les secondes des milisecondes.

Maintenant avec un temps au tour :

!["Reconnaissance du timing au tour"](./Images/Screens/TimingRecognition2.png)

On arrive sans rien changer aux paramêtres à isoler minutes secondes et milisecondes. 

Il semble que la reconnaissance de chiffre soit bien plus efficace que la reconnaissance de lettres. Il va falloir faire un test à plus grande échelle avec plus d'image pour se rendre compte de la precision.

Demain ce qui serait bien cela serait que je fasse un jeu d'images avec des valeurs connues et que je fasse une batterie de tests pour voir à quel point je peux faire confiance à la reconnaissance des chiffres.

Automatiser un système de test de la sorte me sera très utile dans le futur pour vérifier la non regression de ma reconnaissance de texte quand je tenterai d'y faire des changements.

Je suis toujours curieux cependant de voir comment le programme se débrouille avec les nombres de tours qui se trouvent dans les icones de pneus.

## Lundi 3 Avril

Aujourd'hui on va faire un programme qui permet de créer un dataset qui permette de tester le programme de reconnaissance.

Je pense que le meilleur moyen de faire serait un programme qui crée le dataset et qui ensuite peut tester différentes methodes de reconnaissance.

Par la même occasion je peux développer la technologie qui va permettre de découper une image en 20 lignes ce qui me servira ensuite pour la reconnaissance.

Je me rend compte que pour faire un programme de tests je dois déja avoir une idée de la structure de mon programme.

Pour le moment je réflechis à un système de "Zones" et de "Windows". L'idée serait que une Zone est juste une sous partie d'image qui peut encore être décomposé tandis que chaque Window contient une ou plusieurs informations à récupèrer.

J'ai essayé de découper l'image pour que cela soit plus clair :

!["Main zone"](./Images/Figma/WindowZoneExplanation1.png)

Ici on peut voir que l'image est découpée en plusieurs grandes zones. Dans un premier temps on ne s'occupe que de la première.

Ensuite : 

!["Driver zone #1"](./Images/Figma/WindowZoneExplanation2.png)

On peut voir la que cette Main zone serait elle même décomposée en plusieurs plus petites zones.

Et ensuite chacunes de ces petites zones :

!["Driver windows"](./Images/Figma/WindowZoneExplanation3.png)

Sera décomposée en plusieurs windows qui elles sont des zones qui contiennent de l'information.

En gros on aurait trois types de zone :

- Les zones qui contiennent d'autres zones
- Les zones qui contiennent des Windows
- Les Windows

Cependant en y réflechissant on pourrait tout à fait avoir seulement des zones et des windows en faisant en sorte que les windows peuvent avoir une liste de windows et une liste de zones.

Une zone serait composée de :

- Une image de départ
- Un rectangle qui la positionne sur cette dernière
- Une liste de zones (potentiellement vide)
- Une liste de windows (potentiellement vide)
- Une methode qui permet de récupèrer une image de la zone
- Une methode qui permet de lancer la reconnaissance sur chaque window

Une window serait composée de :

- Une image de départ (cela peut être l'image cropée de la zone parente peu importe)
- Un rectangle qui la positionne sur cette dernière
- Une methode qui permet de récupérer un image de la window
- Une methode qui permet de lancer la reconnaisance sur l'image (Chaque type de zone doit l'implémenter)

Dans chaque window on peut imaginer que la methode qui fait la reconnaissance au lieu de retourner un objet qui peut contenir nimporte quel type d'information peut envoyer ce qu'elle vient de récupèrer dans une base de donnée ou un objet.

Par exemple une Zone de pilote pourrait très bien contenir un objet pilote et le donner à ses windows qui rempliraient ce même objet.

C'est une reflexion plus stockage que OCR mais c'est intéressant pour savoir ce que fait une window des données qu'elle récupère.

Dans un premier temps je pense que les windows vont simplement écrire dans un fichier ce qu'elles trouvent chacunes dans le format qu'elles veulent.

Pour comprendre pourquoi je me prend la tête il faut savoir que chaque window peut avoir accès à pleins d'informations différentes. On pourrait dire qu'elles retournent toutes une string sauf que si ca marche pour un temps au tour ou pour un nom de pilote, cela ne marche pas forcément pour un type de pneu ou un DRS ouver. Comme chaque window a plusieurs types de data elle devra elle même se charger de comment la traiter ET de la stocker.

Voila un diagramme qui résume comment je vois l'implémentation dans un premier temps :

!["Diagramme d'explications"](./Images/Figma/WindowZoneExplanationDiagram.png)

Voici comment se présente le squellette d'une Zone :

```Csharp
public class Zone
    {
        private Bitmap FullImage;
        private List<Zone> Zones;
        private List<Window> Windows;

        private Rectangle _bounds;
        public Rectangle Bounds { get => _bounds; private set => _bounds = value; }

        public Bitmap ZoneImage
        {
            get
            {
                Bitmap sample = new Bitmap(Bounds.Width, Bounds.Height);
                Graphics g = Graphics.FromImage(sample);
                g.DrawImage(FullImage, new Rectangle(0, 0, sample.Width, sample.Height), Bounds, GraphicsUnit.Pixel);
                return sample;
            }
        }

        public Zone(Image fullImage, Rectangle bounds)
        {
            FullImage = (Bitmap)fullImage;
            Init(bounds);
        }
        public Zone(Bitmap fullImage, Rectangle bounds)
        {
            FullImage = fullImage;
            Init(bounds);
        }
        private void Init(Rectangle bounds)
        {
            Bounds = bounds;
            Zones = new List<Zone>();
            Windows = new List<Window>();
        }
        public void AddZone(Rectangle bounds)
        {
            if(Fits(bounds))    
                Zones.Add(new Zone(ZoneImage,bounds));
        }
        public void AddWindow(Rectangle bounds)
        {
            if (Fits(bounds))
                Windows.Add(new Window(ZoneImage,bounds));
        }
        private bool Fits(Rectangle inputRectangle)
        {
            if (inputRectangle.X + inputRectangle.Width > Bounds.Width || inputRectangle.Y + inputRectangle.Height > Bounds.Height || inputRectangle.X < 0 || inputRectangle.Y < 0)
            {
                return false;
            }
            else
            {
                return true;
            }
        }
    }
```

Le but est ensuite de créer différent types de Zones.

Par exemple la MainZone devra découper son contenu en 20 parties égales pour tenter de chopper les 20 pilotes. Il serait cool de trouver un moyen de calibrer automatiquement.

C'est peut-être possible de calibrer avec de la reconnaissance de texte, on peut essayer de lancer la reconnaissance et voir ou on trouve du texte avec un peu de chance cela pourrait donner les positions et avec ca on peut peut-être determiner des lignes.

Et voici le squelette d'une window générique

```Csharp
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Drawing;

namespace OCR_tester
{
    public class Window
    {
        private Bitmap FullImage;

        private Rectangle _bounds;
        public Rectangle Bounds { get => _bounds; private set => _bounds = value; }

        public Bitmap WindowImage
        {
            get
            {
                Bitmap sample = new Bitmap(Bounds.Width, Bounds.Height);
                Graphics g = Graphics.FromImage(sample);
                g.DrawImage(FullImage, new Rectangle(0, 0, sample.Width, sample.Height), Bounds, GraphicsUnit.Pixel);
                return sample;
            }
        }
        public Window(Bitmap fullImage, Rectangle bounds)
        {
            FullImage = fullImage;
            Bounds = bounds;
        }
        public virtual void RecoverInformations()
        {
            //Each Window type will have to implement its own way to recover the informations stored in the Window Image
        }
    }
}
```

Chaque Window pourra ainsi elle même implémenter la récupèration d'informations. La facon de les retourner/stocker est encore un peu floue.

Par exemple pour un temps au tour on peut imaginer que il fait une petite vérification dans l'objet pilote et dans le tableau des tours si il n'y a pas deja une valeur et si il n'y en a pas une alors il peut l'ajouter.

Maintenant je vais essayer de créer une Main window qui se calibre toute seule.

Alors après avoir bien galèré avec l'interface pour permettre au user de cliquer sur la form pour voir les zones qu'il crée, j'ai pu créer un zone qui fait les dimensions de MainZone et j'ai pu lancer la reconnaissance sur l'image et voir ou il trouve du texte :

!["MainZone avec carrés de texte"](./Images/Screens/AutoCalibration1.png)

Maintenant il faut que je nettoie la liste de rectangle pour exclure ceux qui sont trop grands pour être sur une seule ligne, ceux qui indiquent le nombre de tour en haut et ceux qui n'ont pas d'intérêts. On pourra ensuite isoler les lignes et créer une liste d'images.

Pour ce qui est de la ligne qui contient les "Gap interval last lap" et des chiffres sur les tours pour les pneus etc je vais juste demander à l'utilisateur de ne pas les prendre dans la screenshot. Comme ils contiennent des mots qui peuvent être utilisés plus loin dans les data je ne peux pas les blacklister et faire un système qui s'occupe de les enlever si ils existent selon le position y me prendrait trop de temps pour rien.

Après avoir filtré un peu les resultats et enlevé les zones beaucoup trop grandes, on se retrouve déja plus qu'avec ca :

!["MainZone avec de meilleurs carrés"](./Images/Screens/AutoCalibration2.png)

Comme on peut le voir, du côté gauche de l'image on a beaucoup de choses reconnues mais avec beaucoup de tailles différentes ce qui n'est pas idéal. Alors j'ajoute un filtre qui permet de ne selectionner que les data sur la droite.

!["MainZone avec de meilleurs carrés"](./Images/Screens/AutoCalibration3.png)

Maintenant il devrait être possible de faire un algorythme qui ne prend que un seul carré par ligne.

!["MainZone avec un seul carré par ligne"](./Images/Screens/AutoCalibration4.png)

Maintenant que on sait ou se trouve chaque ligne on peut faire un petit traitement et découper l'image en plusieurs windows.

Et voila :

!["Mainzone auto calibrée"](./Images/Screens/AutoCalibration5.png)
