Universit ́ e Cadi Ayyad Facult ́ e des Sciences et Techniques Marrakech (FSTG) M ́ emoire de Projet de fin d’ ́ etude Deepfake Detection GUI Syst` emes Informatiques R ́ epartis June 25, 2020 Contributors • Author One • Author Two History Version Date Comment 1.0 xx/yy/20zz Text 2 Contents 1 Introduction g ́ en ́ erale 6 2 Contexte g ́ en ́ eral et l’analyse des besoins 7 2.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 2.2 Contexte g ́ en ́ eral . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 2.2.1 D ́ efinition du DEEPFAKE . . . . . . . . . . . . . . . . . . . . . 7 2.2.2 Histoire et l’origine du DEEPFAKE . . . . . . . . . . . . . . . 8 2.3 l’analyse des besoins . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 2.3.1 Pr ́ esentation de la probl ́ ematique : . . . . . . . . . . . . . . . . 8 2.3.2 Deepfake Detection . . . . . . . . . . . . . . . . . . . . . . . . 9 3 Conception et mod ́ elisation du projet 10 3.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 3.2 Pr ́ esentation UML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 3.3 Diagramme de cas d’utilisation . . . . . . . . . . . . . . . . . . . . . . 10 3.3.1 UML pour la version simple. . . . . . . . . . . . . . . . . . . . . 11 3.3.2 UML pour la version compl` ete. . . . . . . . . . . . . . . . . . . 12 4 Outils techniques 13 4.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 4.2 Outils utilis ́ es . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 4.2.1 Colab . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 4.2.2 PyCharm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 4.2.3 NgRok . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 4.2.4 GIT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 4.2.5 Githack . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 4.2.6 SQLite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 4.3 Langages et technologies de programmation . . . . . . . . . . . . . . . 15 4.3.1 Python . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 4.3.2 Flask . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 4.3.3 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 4.3.4 Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 4.3.5 Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 4.3.6 DropZone.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 4.3.7 JSON . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 4.3.8 LaTeX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 5 Mise en oeuvre 19 5.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 5.2 Mise en œuvre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 5.2.1 Aper ̧ cu interfaces graphiques de la version simple - Test Video - 19 3 5.2.2 Aper ̧ cu interfaces graphiques de la version simple - Train a model - . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 5.2.3 Aper ̧ cu interfaces graphiques de la version complet - Compte - 27 5.2.4 Aper ̧ cu interfaces graphiques de la version complet - Test Video - 29 5.2.5 Aper ̧ cu interfaces graphiques de la version complete - Train a model - . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 6 Conclusion g ́ en ́ erale et perspectives 34 6.1 Les d ́ efis du projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 6.2 Conclusion g ́ en ́ erale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 4 List of Figures 1 Diagramme de cas d’utilisation pour la version Simple . . . . . . . . . 11 2 Diagramme de cas d’utilisation pour la version Complet . . . . . . . . 12 3 Page d’accueil version simple . . . . . . . . . . . . . . . . . . . . . . . 19 4 Page de test version simple . . . . . . . . . . . . . . . . . . . . . . . . . 20 5 Page de test version simple lorsque le t ́ el ́ echargement est termin ́ e . . . 21 6 Page de test version simple quand clique ’start testing’ . . . . . . . . . 21 7 Page de r ́ esultats version simple ’FakeVideo’ . . . . . . . . . . . . . . . 22 8 Page de r ́ esultats version simple ’RealVideo’ . . . . . . . . . . . . . . . 23 9 Page ’Train a model’ version simple . . . . . . . . . . . . . . . . . . . . 24 10 page ’Train model’ version simple T ́ el ́ echargement complet . . . . . . . 25 11 page ’Train model’ version simple ’Start Training’ . . . . . . . . . . . . 25 12 Page ’model complete’ . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 13 Page d’accueil version complet . . . . . . . . . . . . . . . . . . . . . . 27 14 Page Cr ́ eer un compte version complet . . . . . . . . . . . . . . . . . . 28 15 Page de connexion version complet . . . . . . . . . . . . . . . . . . . . 28 16 Page de test version complet 1 . . . . . . . . . . . . . . . . . . . . . . 29 17 Page de test version complet 2 . . . . . . . . . . . . . . . . . . . . . . 30 18 Page de vid ́ eos version complet . . . . . . . . . . . . . . . . . . . . . . 31 19 Page ’Model’ version complet 1 . . . . . . . . . . . . . . . . . . . . . . 31 20 Page ’Model’ version complet 2 . . . . . . . . . . . . . . . . . . . . . . 32 21 Page mes mod` eles version complet . . . . . . . . . . . . . . . . . . . . 33 5 1 Introduction g ́ en ́ erale La manipulation du contenu visuel est devenue omnipr ́ esente et l’un des sujets les plus critiques de notre soci ́ et ́ e num ́ erique. Par exemple, DeepFakes a montr ́ e comment l’infographie et les techniques de visualisation peuvent ˆ etre utilis ́ ees pour diffamer des personnes en rempla ̧ cant leur visage par le visage d’une personne diff ́ erente. Les visages pr ́ esentent un int ́ erˆ et particulier pour les m ́ ethodes de manipulation actuelles pour diverses raisons: • premi` erement, la reconstruction et le suivi des visages humains est un domaine bien ́ etudi ́ e en vision par ordinateur , qui est le fondement de ces approches d’ ́ edition. • Deuxi` emement, les visages jouent un rˆ ole central dans la communication humaine, car le visage d’une personne peut souligner un message ou mˆ eme transmettre un message ` a part enti` ere . Les m ́ ethodes actuelles de manipulation faciale peuvent ˆ etre s ́ epar ́ ees en deux cat ́ egories: la manipulation de l’expression faciale (facial expression manipulation) et la manipulation de l’identit ́ e faciale (facial identity manipulation) . (i) L’une des techniques de manipulation des expressions faciales les plus importantes est la m ́ ethode de Thies et al. [56] appel ́ e Face2Face. Il permet le transfert des expressions faciales d’une personne ` a une autre en temps r ́ eel en utilisant uniquement du mat ́ eriel de base. Un travail de suivi tel que Synth ́ etiser Obama est capable d’animer le visage d’une personne sur la base d’une s ́ equence d’entr ́ ee audio. (ii) La manipulation d’identit ́ e est la deuxi` eme cat ́ egorie de contrefa ̧ cons faciales (fa- cial forgeries). Au lieu de changer les expressions, ces m ́ ethodes remplacent le visage d’une personne par le visage d’une autre personne. Cette cat ́ egorie est appel ́ ee ́ echange de visage. Il est devenu populaire avec des applications grand public comme Snapchat. DeepFakes effectue ́ egalement un ́ echange de visage, mais via un apprentissage en profondeur. Alors que l’ ́ echange de visage bas ́ e sur des techniques graphiques informa- tiques simples peut s’ex ́ ecuter en temps r ́ eel, DeepFakes doit ˆ etre form ́ e pour chaque paire de vid ́ eos, ce qui est une tˆ ache longue. 6 2 Contexte g ́ en ́ eral et l’analyse des besoins 2.1 Introduction Ce premier chapitre d ́ ecrit le contexte g ́ en ́ eral de notre projet et ́ egalement le pourquoi de notre choix de ce sujet, on va essayer de vous pr ́ esenter bri` evement ce que vous allez trouver bien d ́ etaill ́ e dans les chapitres qui suivent. 2.2 Contexte g ́ en ́ eral Cette ann ́ ee nous avons bien remarqu ́ e que 2020 est et restera une ann ́ ee sp ́ eciale pleine des nouvelles et des ́ ev ́ enements dont parmi eux ceux qui nous ont chang ́ e notre mode de vie compl` etement comme la Pand ́ emie Covid-19 virus qui est une de ces ́ ev ́ enements l` a qui va ˆ etre grav ́ e dans notre m ́ emoire ` a vie. Ce virus nous a d ́ evoil ́ e beaucoup de chose qu’on n’avait presque jamais fait attention, comme les nouvelles falsifi ́ ees soit des vid ́ eos ou des images qu’on trouve partout dans les m ́ edias et surtout dans les r ́ eseaux sociaux, on sait d ́ ej` a que ` a l’aide du Photoshop on peut changer n’importe quelle photo et c’est bien facile de d ́ ecouvrir si cette photo est modifi ́ ee ou pas, mais est ce qu’on peut changer, truquer les vid ́ eos ? si oui est ce qu’il y a un moyen pour la d ́ ecouvrir ? La r ́ eponse est bien OUI modifier une vid ́ eo est bien possible, et avec le d ́ eveloppement de la technologie ils ont trouv ́ e du moyen pour les d ́ etecter. Au moment ou nous avons eu la liste des projets nous avons pas h ́ esit ́ e pour le choisir DEEPFAKE DETECTION , pour plusieurs raisons comme par exemple les d ́ egˆ ats des vid ́ eos falsifi ́ ees, que ̧ ca soit au niveau de la politique ou personnelle dont plusieurs acteurs et actrices ont ́ et ́ e victimes de ce type de vid ́ eos, la deuxi` eme raison est l’int ́ erˆ et de parler et pr ́ esenter une nouvelle technologie, grˆ ace ` a ce projet et cette probl ́ ematique nos comp ́ etences en informatique sont bien d ́ evelopp ́ ees. 2.2.1 D ́ efinition du DEEPFAKE Le Deepfake est un terme qui se compose deux mots, Deep et fake : • Fake veut dire FAUX • deep vient de deep Learning qui veut dire apprentissage profond d’un intelligence artificielle, donc le deep fake veut dire un fallacieux rendu profond ́ ement cr ́ edible grˆ ace ` a une intelligence artificielle. Le terme d ́ esigne non seulement le contenu ainsi g ́ en ́ er ́ e, mais aussi les technologies utilis ́ ees ` a cet effet. 7 2.2.2 Histoire et l’origine du DEEPFAKE En 2014 un chercheur appel ́ e Ian GOODFELLOW connue par les GAN parce que c’est lui qui a cr ́ e ́ e les r ́ eseaux antagonistes g ́ en ́ eratives (Generative Adversarial Networks), a invent ́ e une nouvelle technologie qu’avec deux algorithmes s’entraˆ ınent mutuelle- ment, l’un œuvrant ` a fabriquer une image tandis que l’autre cherche, en parall` ele, ` a d ́ eterminer si cette image est fausse, entraˆ ınant de cette fa ̧ con le premier ` a faire mieux. Selon cette technologie, deux algorithmes s’entraˆ ınent mutuellement, l’un œuvrant ` a fabriquer une image tandis que l’autre cherche, en parall` ele, ` a d ́ eterminer si cette image est fausse, entraˆ ınant de cette fa ̧ con le premier ` a faire mieux. Cette technologie a per- mis d’engendrer le portrait d’Edmond de Belamy , tableau con ̧ cu par une intelligence artificielle et vendu aux ench` eres chez Christie’s en octobre 2018. Les images cr ́ e ́ ees par les GAN ont atteint un niveau de cr ́ edibilit ́ e tr` es satisfaisant, la fronti` ere entre le r ́ eel et le virtuel n’ ́ etant plus toujours perceptible. D` es avril 2018, le site Buzzfeed entend d ́ enoncer la gravit ́ e de cette pratique du faux en r ́ ealisant une vid ́ eo ` a partir du logiciel FakeApp, un deepfake qui fait dire ` a l’ancien pr ́ esident Barack Obama – avec la participation du com ́ edien Jordan Peele, tout le mal qu’il pense de son successeur ` a la Maison Blanche. En juin 2019, c’est une d ́ emarche plus incisive qui guide les deux artistes britanniques Bill Posters et Daniel Howe, en collaboration avec l’agence de communication Canny AI, lorsqu’ils postent sur Instagram une vid ́ eo deepfake faisant dire ` a Mark Zuckerberg que quiconque contrˆ ole les donn ́ ees contrˆ ole l’avenir . Avec leur vid ́ eo clairement estampill ́ ee deepfake, les artistes invitent ` a imaginer la prochaine ́ etape de notre ́ evolution num ́ erique o` u chacun pourrait ́ eventuellement avoir une copie num ́ erique, un humain universel ́ eternel. Cela changera notre fa ̧ con de partager et de raconter des histoires, de nous souvenir de nos proches et de cr ́ eer du contenu. En toute logique, ce deepfake du patron n’a pas ́ et ́ e supprim ́ e sur le r ́ eseau social. 2.3 l’analyse des besoins Le ph ́ enom` ene Deepfake est devenu tr` es populaire de nos jours grˆ ace ` a la possibilit ́ e de cr ́ eer des vid ́ eos incroyablement r ́ ealistes en utilisant les outils DeepFake en ligne *. Dans ce travail, nous nous concentrons sur l’analyse des Deepfakes des visages humains avec l’objectif de cr ́ eer un nouvel outil en ligne de d ́ etection capable de d ́ etecter une trace de m ́ edecine l ́ egale cach ́ ee dans les vid ́ eos: une sorte d’empreinte laiss ́ ee dans le processus de g ́ en ́ eration vid ́ eo. Puisqu’il s’agit d’un site de r ́ eseau social, compos ́ e d’internautes, nous avons choisi pour le nom du site: ”DFDetection”. Nous pensons que cela r ́ esume bien le sujet du site et qu’il sera facile pour les futurs utilisateurs de trouver notre site Web. 2.3.1 Pr ́ esentation de la probl ́ ematique : Une vid ́ eo truqu ́ ee de quelques secondes peut changer la vie d’une personne ` a vie, c’est pourquoi on revient pour poser la question est ce qu’il y a une solution pour 8 qu’on puisse v ́ erifier si une vid ́ eo est falsifi ́ ee ? Notre probl ́ ematique est bien donc : la conception et la r ́ ealisation d’une application de d ́ etection des Deepfakes. 2.3.2 Deepfake Detection La d ́ etection des contenus visuels manipul ́ es est une recherche d’un int ́ erˆ et intense dans les milieux universitaires et industriels, et un sujet de conversation pressant dans la soci ́ et ́ e en g ́ en ́ eral. Un type de contenu visuel manipul ́ e, des vid ́ eos de haute qualit ́ e contenant des manipulations faciales (famili` erement appel ́ ees ”deepfakes”), est devenue particuli` erement importante au cours des deux derni` eres ann ́ ees. Deepfake d ́ etections est une application qu’on a pu r ́ ealiser pour d ́ etecter la manipulation faciale. 9 3 Conception et mod ́ elisation du projet 3.1 Introduction Dans ce chapitre, nous allons pr ́ esenter notre conception et analyse bas ́ e sur l’ ́ etude faites dans le chapitre pr ́ ec ́ edant. La plupart des langages sont orient ́ es objets. Le passage de la programmation fonc- tionnelle ` a l’orient ́ e objet n’est pas facile. L’un de souci ́ etait d’avoir une id ́ ee globale en avance de ce qu’on doit programmer. L’algorithmique qui ́ etait utilis ́ e dans la programmation fonctionnelle ne pourrait pas suffire ` a lui seul. Le besoin d’avoir des m ́ ethodes ou langages pour la mod ́ elisation des langages orient ́ es objet est n ́ ecessaire. Ainsi plusieurs m ́ ethodes ou langages ont vu le jour. En occurrence UML qui nous a permis de faire la conception de notre application. De nos jours, UML poss` ede treize diagrammes qui sont class ́ es en deux cat ́ egories (dynamique et statique). Pour ce faire, on a commenc ́ e par les diagrammes de cas d’utilisation (Use Case) qui permettent de donner une vue globale de l’application. Pas seulement pour un client non avis ́ e qui aura l’id ́ ee de sa future application mais aussi pour le d ́ eveloppeur qui s’en sert pour le d ́ eveloppement des interfaces. 3.2 Pr ́ esentation UML En informatique UML (de l’anglais Unified Modeling Language), ou Langage de mod ́ elisation unifi ́ e, est un langage de mod ́ elisation graphique ` a base de pictogrammes. Il est utilis ́ e en d ́ eveloppement logiciel, et en conception orient ́ ee objet. UML est couramment utilis ́ e dans les projets logiciels. UML est l’accomplissement de la fusion de pr ́ ec ́ edents langages de mod ́ elisation ob- jet : Booch, OMT, OOSE.Principalement issu des travaux de Grady Booch, James Rumbaugh et Ivar Jacobson, UML est ` a pr ́ esent un standard d ́ efini par l’Object Man- agement Group (OMG). La derni` ere version diffus ́ ee par l’OMG est UML 2.5 bˆ eta 2 depuis septembre 2013. 3.3 Diagramme de cas d’utilisation Le diagramme de cas d’utilisation permet de d ́ eterminer les possibilit ́ es d’interf ́ erence entre le syst` eme et les acteurs, c’est-` a-dire d ́ eterminer toutes les fonctionnalit ́ es que doit fournir le syst` eme. Il permet aussi de d ́ elimiter ce dernier. (i) Chaque usage effectu ́ e par les acteurs est repr ́ esent ́ e par un cas d’utilisation. (ii) Chaque cas d’utilisation symbolise une fonctionnalit ́ e qui leur est offerte afin d’engendrer le r ́ esultat attendu. (iii) Le diagramme de cas d’utilisation d ́ ecrit l’interaction entre le syst` eme et l’acteur en d ́ eterminant les besoins de l’utilisateur et tout ce que doit faire le syst` eme pour l’acteur. 10 3.3.1 UML pour la version simple. Figure 1: Diagramme de cas d’utilisation pour la version Simple La figure 21 repr ́ esente le diagramme de cas d’utilisation version simple. Ce cas d’utilisation d ́ ebute quand l’user se connecte sur le syst` eme apr` es il va choisir l’une des options suivantes : • Tester une vid ́ eo avec le mod` ele par d ́ efaut. • Tester une vid ́ eo avec le mod` ele personnalis ́ e. • Traiter une mod` ele. 11 3.3.2 UML pour la version compl` ete. Figure 2: Diagramme de cas d’utilisation pour la version Complet La figure 2 repr ́ esente le diagramme de cas d’utilisation version complet. Ce cas d’utilisation d ́ ebute quand l’user se connecte sur le syst` eme apr` es il va choisir l’une des options suivantes : • Tester une vid ́ eo avec le mod` ele par d ́ efaut. • Tester une vid ́ eo avec le mod` ele personnalis ́ e. • Traiter une mod` ele. • Cr ́ eer un compte. • Visitez la page About. • Acc ́ eder ` a vos mod` ele. • Acc ́ eder ` a vos vid ́ eos. • Se connecter. 12 4 Outils techniques 4.1 Introduction Dans ce chapitre, nous allons pr ́ esenter les outils utilis ́ es pour la r ́ ealisation de notre projet ainsi que la raison de nos choix. La cr ́ eation et la conception d’un GUI est un processus qui implique l’utilisation de nouvelles technologies et outils qui n’ont pas ́ et ́ e inclus dans notre formation. Parmi les outils utilis ́ es, on trouve : • La langages de programmation qui nous permet de comprendre le code du repos- itory github. • Langage de balisage pour garantir une bonne pr ́ esentation visuelle. • Langage de programmation cˆ ot ́ e serveur pour la cr ́ eation d’une interface de com- munication avec ce dernier • Les syst` emes de gestion de base de donn ́ ees qui r ́ epondent aux diff ́ erentes op ́ erations de stockage et de traitement des donn ́ ees. 4.2 Outils utilis ́ es 4.2.1 Colab Google Colab est un service cloud gratuit et prend d ́ esormais en charge le GPU gratuit! Vous pouvez: • am ́ eliorez vos comp ́ etences de codage en langage de pro- grammation Python. • d ́ evelopper des applications d’apprentissage en pro- fondeur ` a l’aide de biblioth` eques populaires telles que Keras, TensorFlow, PyTorch et OpenCV. • La caract ́ eristique la plus importante qui distingue Colab des autres services cloud gratuits est: Colab fournit un GPU et est totalement gratuit. 13 4.2.2 PyCharm PyCharm est un environnement de d ́ eveloppement int ́ egr ́ e (IDE) utilis ́ e dans la programmation informatique, sp ́ ecifiquement pour le langage Python. D ́ evelopp ́ e par la soci ́ et ́ e tch` eque JetBrains, il fournit l’analyse de code, un d ́ ebogueur graphique, un testeur d’unit ́ e int ́ egr ́ e, l’int ́ egration avec des syst` emes de contrˆ ole de version (VCS) et prend en charge le d ́ eveloppement Web avec Django ainsi que Data Science avec Anaconda. PyCharm est multiplateforme, avec les versions Windows, macOS et Linux. L’ ́ edition commu- nautaire est publi ́ ee sous la licence Apache, et il existe ́ egalement l’ ́ edition profession- nelle avec des fonctionnalit ́ es suppl ́ ementaires - publi ́ ees sous une licence propri ́ etaire. 4.2.3 NgRok Ngrok est une application multiplateforme qui permet aux d ́ eveloppeurs d’exposer un serveur de d ́ eveloppement local ` a In- ternet avec un minimum d’effort. Le logiciel donne l’impression que votre serveur Web h ́ eberg ́ e localement est h ́ eberg ́ e sur un sous-domaine de ngrok.com, ce qui signifie qu’aucune adresse IP publique ou nom de domaine sur la machine locale n’est n ́ ecessaire. 4.2.4 GIT C’est un logiciel de gestion de version d ́ ecentralis ́ e, ce qui signi- fie qu’il g` ere les modifications d’un projet sans en ́ ecraser toutes les parties et qui nous a permis de contrˆ oler notre site web. 14 4.2.5 Githack raw.githack.com agit comme un proxy de mise en cache, trans- mettant les demandes au service correspondant, mettant en cache les r ́ eponses soit pendant une courte p ́ eriode (dans le cas des URL de d ́ eveloppement) soit de mani` ere permanente (dans le cas des URL CDN), et en les relayant ` a un navigateur avec les en-tˆ etes de type de contenu corrects. 4.2.6 SQLite SQLite est une biblioth` eque C qui fournit une base de donn ́ ees sur disque l ́ eg` ere qui ne n ́ ecessite pas de processus serveur dis- tinct et permet d’acc ́ eder ` a la base de donn ́ ees ` a l’aide d’une variante non standard du langage de requˆ ete SQL. Certaines ap- plications peuvent utiliser SQLite pour le stockage de donn ́ ees interne. Il est ́ egalement possible de prototyper une application ` a l’aide de SQLite, puis de porter le code sur une base de donn ́ ees plus grande telle que PostgreSQL ou Oracle. 4.3 Langages et technologies de programmation 4.3.1 Python Python est un langage de programmation interpr ́ et ́ e, multi- paradigme et multiplateformes. Il favorise la programmation imp ́ erative structur ́ ee, fonctionnelle et orient ́ ee objet. Il est pr ́ esent ́ e d’un typage dynamique fort, d’une gestion automa- tique de la m ́ emoire par ramasse-miettes et d’un syst` eme de gestion d’exceptions. Python est consid ́ er ́ e comme ́ etant en premi` ere place dans la liste de tous les langages de d ́ eveloppement de l’IA en raison de sa simplicit ́ e. Les syntaxes appartenant ` a python sont tr` es simples et peuvent ˆ etre facilement apprises. Par cons ́ equent, de nombreux algorithmes d’IA peuvent y ˆ etre facilement impl ́ ement ́ es. Python prend un temps de d ́ eveloppement court par rapport ` a d’autres langages comme Java, C ++ ou Ruby. 15 Python prend en charge les styles de programmation orient ́ es objet, fonctionnels et orient ́ es proc ́ edure. Il existe de nombreuses biblioth` eques en python, ce qui facilite nos tˆ aches. Par exemple: Numpy est une biblioth` eque pour python qui nous aide ` a r ́ esoudre de nombreux calculs scientifiques. Nous avons ́ egalement Pybrain, qui est destin ́ e ` a l’utilisation de l’apprentissage automatique en Python. 4.3.2 Flask Flask est un framework micro web ́ ecrit en Python. Il est class ́ e comme un microframework car il ne n ́ ecessite pas d’outils ou de biblioth` eques particuliers.Il n’a pas de couche d’abstraction de base de donn ́ ees, de validation de formulaire ou de tout autre composant o` u les biblioth` eques tierces pr ́ eexistantes four- nissent des fonctions communes. Cependant, Flask prend en charge les extensions qui peuvent ajouter des fonctionnalit ́ es d’application comme si elles ́ etaient impl ́ ement ́ ees dans Flask lui-mˆ eme. Des extensions existent pour les mappeurs objet-relationnels, la validation des formulaires, la gestion des t ́ el ́ echargements, diverses technologies d’authentification ouvertes et plusieurs outils communs li ́ es au framework. Les ex- tensions sont mises ` a jour beaucoup plus fr ́ equemment que le programme principal de Flask. 4.3.3 JavaScript JavaScript est un langage de programmation de scripts prin- cipalement employ ́ e dans les pages web interactives mais aussi pour les serveurs avec l’utilisation (par exemple) de Node.js. C’est un langage orient ́ e objet ` a prototype, c’est-` a-dire que les bases du langage et ses interfaces principales sont fournies par des objets qui ne sont pas des instances de classes, mais qui sont chacun ́ equip ́ es de constructeurs permettant de cr ́ eer leurs propri ́ et ́ es, et notamment une propri ́ et ́ e de prototypage qui per- met de cr ́ eer des objets h ́ eritiers personnalis ́ es. En outre, les fonctions sont des objets de premi` ere classe. Le langage supporte le paradigme objet, imp ́ eratif et fonctionnel. JavaScript est le langage poss ́ edant le plus grand ́ ecosyst` eme grˆ ace ` a son gestionnaire de d ́ ependances npm, avec environ 500 000 paquets en aoˆ ut 2017. 16 4.3.4 Ajax Ajax, abr ́ eviation de ”Asynchronous JavaScript and XML, est un ensemble de techniques de d ́ eveloppement Web utilisant de nombreuses technologies Web cˆ ot ́ e client pour cr ́ eer des applica- tions Web asynchrones. Avec Ajax, les applications Web peu- vent envoyer et r ́ ecup ́ erer des donn ́ ees d’un serveur de mani` ere asynchrone (en arri` ere-plan) sans interf ́ erer avec l’affichage et le comportement de la page existante. En d ́ ecouplant la couche d’ ́ echange de donn ́ ees de la couche de pr ́ esentation, Ajax permet aux pages Web et, par extension, aux applications Web, de modifier le contenu de mani` ere dynamique sans avoir ` a recharger la page enti` ere. les impl ́ ementations modernes utilisent g ́ en ́ eralement JSON au lieu de XML. 4.3.5 Bootstrap Bootstrap est un framework CSS gratuit et open-source des- tin ́ e au d ́ eveloppement Web frontal r ́ eactif et mobile-first. Il contient des mod` eles de conception bas ́ es sur CSS et (faculta- tivement) JavaScript pour la typographie, les formulaires, les boutons, la navigation et d’autres composants d’interface. 4.3.6 DropZone.js Dropzone.js est une biblioth` eque JavaScript l ́ eg` ere qui transforme un ́ el ́ ement HTML en dropzone. Cela sig- nifie qu’un utilisateur peut y glisser-d ́ eposer un fichier et que le fichier est t ́ el ́ echarg ́ e sur le serveur via AJAX. 17 4.3.7 JSON JSON est l’abr ́ eviation de JavaScript Object Notation, et est un moyen de stocker des informations d’une mani` ere organis ́ ee et facile d’acc` es. Il nous donne une collection de donn ́ ees lisi- bles par l’homme auxquelles nous pouvons acc ́ eder de mani` ere vraiment logique. 4.3.8 LaTeX LaTeX est un syst` eme de composition de haute qualit ́ e; il poss` ede des fonctionnalit ́ es pour la production de documenta- tion technique et scientifique. LaTeX est le outil standard pour la communication et la publication de documents scientifiques. 18 5 Mise en oeuvre 5.1 Introduction Ce chapitre est le fruit de notre travail, il pr ́ esente et explique les interfaces de notre site web DFDetection, ainsi que 5.2 Mise en œuvre Dans cette partie nous allons d ́ ecrire distinctement les interfaces graphique de notre site. 5.2.1 Aper ̧ cu interfaces graphiques de la version simple - Test Video - Lorsque l’utilisateur ouvre le site pour la premi` ere fois, il trouve un bouton qui le redirige vers la version simple , la page web ci-dessous s’affiche Figure 3: Page d’accueil version simple Lorsque l’utilisateur acc` ede ` a la page d’accueil, il aura le choix parmi les options suivantes: (en cliquant sur l’image) • Tester sa vid ́ eo • Faire un mod` ele Tout d’abord nous allons proc ́ eder par tester une vid ́ eo. 19 l’utilisateur sera redirig ́ e vers la page de test(voir figure 4) qui mentionne que lorsque le processus sera termin ́ e, l’application permettre de voir ou de t ́ el ́ echarger le r ́ esultat. L’utilisateur normalement devra choisir l’une des options suivantes : Figure 4: Page de test version simple • T ́ el ́ echarger uniquement une vid ́ eo • T ́ el ́ echarger une vid ́ eo et un mod` ele En utilisant le glisser-d ́ eposer , cette tˆ ache deviendra plus facile pour l’utilisateur. NB : Dans notre exemple ici, nous avons seulement t ́ el ́ echarg ́ e une vid ́ eo mais l’utilisateur peut ́ egalement t ́ el ́ echarger un mod` ele. 20