/* permet de creer le canevas et de faire en sorte qu'il soit reconnus dans le code html */
function setup(){
c = createCanvas(280,280);
c.parent("zone_draw");
background(255);
noCursor();
}
/* permet de passer le curseur en croix dans le cadre. */
function draw() {
cursor(CROSS);
}
/* permet de dessiner avec un trait epais */
function mouseDragged(){
line(pmouseX,pmouseY,mouseX,mouseY);
strokeWeight(15);
}
/* permet d'enregistrer en pressant la touche "entré" */
function keyTyped() {
if (keyCode == 13) {
saveCanvas(c,'photo', 'png');
}
}
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>ACCUEIL</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- TITRE -->
<img class="image_haut" alt="illustration d'une ia" src="css/img/IA_dessin.png">
<h1>Projet Informatique <br>et science du numerique :</h1>
<h2 class="titre">Intelligence artificiel Deep Learning</h2>
<!-- entete de la page -->
<!-- la division de la barre de navigation, pour qu'elle reste statique -->
<div class="nav_barre">
<div class="secondce-barre">
<span class="menu"> <a class="clique" href="Dessin.html">
La zone de dessin
</a>
</span>
<span class="menu"> <a class="clique_centre" href="Nous.html">
Qui sommes nous
</a>
</span>
<span class="menu"> <a class="clique" href="Code.html">
Tout notre code
</a>
</span>
</div>
</div>
<!-- La zone de texte -->
<div class="zone_text">
<img class="image_DL" alt="illustration d'une ia deep learning" src="css/img/DL.jpeg">
<h2 class="titre_1"> Deep Learning <h2>
<p class="explication_1">
<br>
<span class="espace_2">
Notre intérêt pour les
<a class="dans_le_text" href="https://fr.wikipedia.org/wiki/Intelligence_artificielle"
target="_blank">intelligences artificielles</a>
et en particulier le
<a class="dans_le_text" href="https://fr.wikipedia.org/wiki/Apprentissage_profond"
target="_blank">Deep Learning</a>
est apparue pendant de notre année en Première S alors que nous
étions nous les trois en option ISN.
</span>
<br>
<br>
<span class="espace_2">Lors d’un de nos cours, notre professeur
<span class="mise_en_valeur">
M.Roche
</span>
nous a présenté un documentaire présent sur la plateforme
NETFLIX, sur la création de l’intelligence artificielle Alphago.
</span>
<br>
<a class="dans_le_text" href="https://fr.wikipedia.org/wiki/AlphaGo"
target="_blank">Alphago</a>
est (pour résumer) un projet de l’entreprise Google qui
visait à battre les meilleurs joueurs du monde au
<a class="dans_le_text" href="https://fr.wikipedia.org/wiki/Go_(jeu)"
target="_blank">jeu de go</a>,
qui est réputé comme étant un des jeux les plus complexe.
En effet, il possède un espace de jeu de 19x19 cases, soit
un nombre quasi infini de possiblités de mouvements.
Les développeurs de Google ont donc développé une intelligence
artificielle qui, pour devenir meilleure devait “s'entraîner
toute seule”. Cela veut dire que ce programme jouait seul des
parties et apprenait au fur et à mesure le jeu et les bonnes
tactiques à adopter. C’est comme ça qu’est né le Deep Learing.
<br>
<span class="espace_2">
Après de longues semaines d’apprentissage le programme réussi
à battre le champion du monde en titre et donc à prouver que la
<a class="dans_le_text"
href="https://www.francetvinfo.fr/sciences/high-tech/jeu-de-go-la-machine
-plus-forte-que-l-homme_1355111.html"
target="_blank">machine peut être plus forte que l’Homme</a>.
</span>
<br>
<br>
<span class="espace_2">
Suite à cela, notre professeur nous a parlé qu’il réalisait de son côté sa propre
intelligence artificielle Deep Learning pour un autre jeu
(plus simple) et donc c’est au début de l’année que nous
est venue l’idée de faire quelque chose de (presque) similaire.
</span>
<br>
<br>
<span class="espace_2">
Nous pensions
d’abord réaliser une intelligence artificielle pour le jeu du
morpion
<a class="dans_le_text" href="easter_egg/index.html"
target="_blank">(tik tak toe)</a>.
On s’est rapidement rendu compte avec notre professeur que
l’intelligence artificielle Deep Learning était inutile pour
ce jeu car trop simple. Nous avons donc cherché sur quoi nous
pourrions mettre en place cette IA jusqu'à ce qu'on se rend
compte qu’elle pouvait aussi faire de la reconnaissance d’images.
</span>
<br>
<span class="espace_2">
Lorsque l’on a appris l'existence de la base de données
<a class="dans_le_text"
href="https://fr.wikipedia.org/wiki/Base_de_donn%C3%A9es_MNIST"
target="_blank">MINST</a>
(Base de données répertoriant des milliers d’images et de chiffres manuscrits)
nous avons pensé que cela serait une bonne
idée de faire de la reconnaissance des chiffres manuscrits
que l’on réaliserait sur un site grâce à la souris.
</span>
</p>
</div>
<!-- fin de la zone du texte -->
<!-- pied de page -->
<footer>
<p class="eggs"> copirite <a class="easter"
href="easter_egg/index.html" target="_blank" > © </a>
Paul, Mathis, Benjamin.
</p>
</footer>
</body>
</html>
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>DESSIN</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.18/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.18/addons/p5.dom.min.js"></script>
<script src="java/zone_dessin.js"></script>
</head>
<body>
<!-- TITRE -->
<img class="image_haut_1" alt="un dessin" src="css/img/image.png">
<h1>Projet Informatique <br>et science du numerique :</h1>
<h2 class="titre">LE DESSIN</h2>
<!-- entete de la page -->
<!-- divison de la zone de dessin -->
<div id="zone_draw"> </div>
<div class="information">
<p>Appuyez sur "ENTRER" pour enregistrer</p>
<p>Appuyez sur "F5" pour effacer votre dessin"<p>
</div>
<!-- la zone de texte -->
<div class="zone_text">
<div class="test">
<p class="explication_1">
C’est dans le cadre ci-dessus qu’il faut faire votre dessin.<br><br>
Pour que votre dessin soit bien reconnu par l’intelligence artificielle il faut:
<br><br>
<span class="espace_ind">
- qu’il soit bien dans le cadre, ne dépasse pas et soit bien au centre
<span class="espace_ind">
- que se soit des nombres anglais
(La base de donnée de MNIST étant en anglais
l’IA reconnais que les nombres anglais comme
par exemple, le 7 sans la barre au centre).<br>
</span>
</p>
</div>
</div>
<!-- pied de page -->
</body>
</html>
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>CODE</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- TITRE -->
<img class="image_haut_1" alt="illustration de lignes decode" src="css/img/ex_code.jpeg">
<h1>Projet Informatique <br>et science du numerique :</h1>
<h2 class="titre">NOTRE CODE</h2>
<!-- entete de la page -->
<div class="abaisser-la-barre" id="La zone de dessin">
<!-- permet de baisser la barre quand on a la souris dessus -->
<!-- l'id sert a allez sur l'onglet dont il a le titre -->
<!-- boutons pour naviguer entre les parties -->
<div class="drop_down">
<button class="dropd_bouton">JAVASCRIPT</button>
<!-- permet "d'ouvrir" les parties -->
<div class="drop_down_menu">
<a href="#La zone de dessin">La zone de dessin</a>
</div>
</div>
<div class="drop_down_centre">
<button class="dropd_bouton">HTML et CSS</button>
<!-- permet "d'ouvrir" les parties -->
<div class="drop_down_menu">
<a href="#La page d'acceuil">La page d'acceuil</a>
<a href="#La page de dessin">La page de dessin</a>
<a href="#La page sur le code">La page sur le code</a>
<a href="#La page sur nous">La page sur nous</a>
<a href="#La page du CSS">La page du CSS</a>
</div>
</div>
<div class="drop_down_d">
<button class="dropd_bouton">PYTHON</button>
<!-- permet "d'ouvrir" les parties -->
<div class="drop_down_menu">
<a href="#Préparation Guess Who">Préparation Guess Who</a>
<a href="#La préparation de l'image">La préparation de l'image</a>
<a href="#Guess Who">Guess Who</a>
</div>
</div>
</div>
<!-- Les zones de codes -->
<div class="zone_text">
<h3 class="titre_premier"> La zone de dessin, JAVASCRIPT </h3>
<div class="les_codes">
<p class="le_texte_code">
<span class="commantaire">/* permet de creer le canevas et de faire en sorte
qu'il soit reconnus dans le code html */
</span><br/>
function setup(){<br/>
<span class="espace_1">c = createCanvas(280,280);</span><br>
<span class="espace_1">c.parent("zone_draw"); </span> <br>
<span class="espace_1">background(255);</span><br>
<span class="espace_1">noCursor();</span><br>
}<br><br>
<span class="commantaire">
/* permet de passer le curseur en croix dans le cadre. */</span><br>
function draw() {<br>
<span class="espace_1">cursor(CROSS);</span><br>
}<br><br>
<span class="commantaire">
/* permet de dessiner avec un trait epais */
</span><br>
function mouseDragged(){<br>
<span class="espace_1">line(pmouseX,pmouseY,mouseX,mouseY);</span><br>
<span class="espace_1">strokeWeight(15);</span> <br>
}<br><br>
<span class="commantaire">
/* permet d'enregistrer en pressant la touche "entré" */
</span><br>
function keyTyped() {<br>
<span class="espace_1">if (keyCode == 13) {</span><br>
<span class="espace_2">saveCanvas(c,'image', 'png');</span><br>
<span class="espace_1">}</span><br>
}<br>
</p>
</div>
<h3 class="titre_autres">Guess who, PYTHON</h3>
<div class="les_codes">
<p class="le_texte_code">
from keras.models import load_model<br><br>
<span class="commantaire">#Récuperation du réseaux de neurones appelé model,
pour réutilisation</span><br>
model = load_model('model.h5')<br><br>
<span class="commantaire">
"""
L'IA va donc prédire grace au model les possibilités pour chaque numéros,
ces prédictions seront des valeurs entre 0 et 1, sachant que 1 signifie que
l'IA est sûr à 100%
Une fonction va chercher la valeurs dans le tableau la plus élevés et dire
à quelle rang elle se situe,
ce rang correspond justement à la valeur que l'IA à deviné
"""
</span><br><br>
plt.title("Estimation : " + str(np.argmax(model.predict(np.array([tabia])))))
<br><br>
<span class="commantaire"># On va créer un graphique afin d'afficher les
numéros déssinés en dessout du numéros deviné</span><br>
<span class="commantaire"># grace a une librairie spécialisé mais pour cela
on retire les axes du graphique</span><br>
plt.axis('off')<br><br>
<span class="commantaire"># Puis on récupère les valeurs du tableau destiné
à l'IA et on les donne au graphique </span><br>
<span class="commantaire"># en redimensionnant en un tableau de 28 par 28
pour le graphique</span><br>
plt.imshow(tabia.reshape(28,28), cmap='gray')<br><br>
<span class="commantaire"># On affiche ensuite ce graphique</span><br>
plt.show()<br>
</p>
</div>
</body>
</html>
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>NOUS</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- TITRE -->
<img class="image_haut_1" alt="illustration de lignes decode" src="css/img/accueil.png">
<h1>Projet Informatique <br>et science du numerique :</h1>
<h2 class="titre">Qui sommes nous ?</h2>
<!-- entete de la page -->
<div class="zone_text">
<h2 class="titre_1">Notre présentation</h2>
<div class="div_par_cases">
<img class="photo_de_profil" alt="illustration de Benjamin" src="css/img/accueil.png">
<h2 class="titre_profil">Benjamin BARDOU</h2>
<p class="description_de_gauche">
<span class="gde_letre">J</span>e suis en classe de terminal S1,
et j'ai toujours été passionné par l'informatique.
C'est donc avec grande joie que j'ai, en classe de seconde rejoint
l'enseignement d'exploration I.C.N.
Lors de cette année j'ai appris les base du code,
le Javascrips ainsi que P5.js et P5 play ce qui m'as permis de réaliser
un petit jeu de plateforme à la fin de cette année. En première,
j'ai rejoint l'option I.C.N car cela m'avais énormément plu.
C'est a ce moment que je me suis renseigner sur tout ce qui porte sur l'html.
Et donc lors de mon année de terminal, était une évidence que je prenne la spécialité I.S.N.
</p>
</div>
<div class="div_par_cases">
<img class="photo_de_profil_droite" alt="illustration de Mathis" src="css/img/accueil.png">
<h2 class="titre_profil_droite">Mathis MEDARD</h2>
<p class="description_de_droite">
<span class="gde_letre">J</span>e suis en classe de Terminale S3.
Dès le collège j’ai commencé à m’intéresser à l’informatique.
Et donc au lycée j’ai demandé l’enseignement d’exploration Informatique
et Création Numérique, cette année j’ai appris à coder en JavaScript
et à utiliser plusieurs librairies telle que P5, j’ai donc poursuivi
en Première en tant qu’option, année où j’ai pu apprendre à coder en python.
Et donc en Terminale, j’ai continué avec la spécialisation
Informatique et Sciences du Numérique et j’en suis très satisfait.
</p>
</div>
<div class="div_par_cases">
<img class="photo_de_profil" alt="illustration de Paul" src="css/img/accueil.png">
<h2 class="titre_profil">Paul COUTIN</h2>
<p class="description_de_gauche">
yoloyoloyoloyoloyoloyoloyoloyolo<br>yolo<br>yolo<br>yolo<br>yolo<br>efefzeffyoloyoloyoloyolo
</p>
</div>
</div>
</body>
</html>
*{ /*TOUT enlve la marge droite et gauche */
margin-left :0px;
margin-right :0px;
}
h1 { /*TOUT*/
text-align: center;
font-size:50px;
}
h2.titre { /*TOUT*/
font-family: Verdana;
text-align: center;
color: #3b9fed;
margin: 25px;
font-size:40px;
}
img.image_haut_1 { /*NOUS + CODE + DESSIN*/
width: 200px;
height: 200px;
float: right;
padding-right: 30px;
}
img.image_haut{ /*ACCUEIL*/
width: 230px;
height: 165px;
float: right;
}
div.nav_barre { /* TOUT reste bloquer en haut de la page */
position: -webkit-sticky; /*uniquement pour Safari */
position: sticky; /* reste bloquer en haut de la page */
border: 3px solid #7d7d7d;
border-radius: 10px;
top: 0;
padding: 2px;
background-color: #cccccc; /* couleur arriere plan */
}
div.secondce-barre { /*TOUT*/
padding: 10px;
width: 90%;
margin: auto;
}
a.clique { /*TOUT*/
background-color: #bfbfbf;
border: 1px solid #7d7d7d;
border-radius: 10px;
color: white;
padding: 10px 0px; /* "ecarte" le texte des bords */
text-align: center;
text-decoration: none; /*supprime le lien souligné*/
display: inline-block;
margin: right;
width: 32%; /* place les blocks de la meme taille */
}
a.clique_centre { /*TOUT*/
background-color: #bfbfbf;
border: 1px solid #7d7d7d;
border-radius: 10px;
color: white;
padding: 10px 0px; /* "ecarte" le texte des bords */
text-align: center;
text-decoration: none; /*supprime le lien souligné*/
display: inline-block;
width: 34%; /* place les blocks de la meme taille */
margin: auto;
}
a.clique:hover { /* TOUT passer la souris sur le blocks */
color: white;
background-color: #296da3;
transition: 0.4s;
}
a.clique_centre:hover { /* TOUT passer la souris sur le blocks */
color: white;
background-color: #296da3;
transition: 0.4s;
}
#zone_draw{ /* DESSIN zone de dessin */
margin-top: 30px;
border: 10px solid #7d7d7d;
border-radius: 10px;
margin-left: auto;
margin-right: auto;
width: 280px;
height: 280px;
}
div.information{ /*DESSIN pour le dessin */
margin-top: 20px;
padding: 10px;
width: 300px;
margin-left: auto;
margin-right: auto;
border: 3px solid #7d7d7d;
border-radius: 30px;
text-align: center;
}
img.image_DL{ /*ACCEUIl*/
width: 220px;
height: 130px;
float: right;
padding-right: 30px;
}
div.zone_text { /*TOUT*/
margin-top: 50px;
border: 5px solid #7d7d7d;
border-radius: 30px;
padding: 25px;
width: 60%;
margin-left: auto;
margin-right: auto;
}
div.div_par_cases{ /*NOUS*/
margin-top: 50px;
overflow: auto;
border: 5px solid #7d7d7d;
padding-left: 15px;
padding-right: 15px;
}
img.photo_de_profil { /*NOUS*/
float: left;
padding: 15px;
width: 260px;
height: 260px;
}
img.photo_de_profil_droite { /*NOUS*/
float: right;
padding: 15px;
width: 260px;
height: 260px;
}
h2.titre_profil{/*NOUS*/
font-size: 30px;
padding-left: 40%;
color: #3b9fed;
border-bottom: 5px solid #7d7d7d;
}
h2.titre_profil_droite{ /*NOUS*/
text-align: right;
font-size: 30px;
padding-right: 40%;
color: #296da3;
border-bottom: 5px solid #7d7d7d;
}
h2.titre_1{ /*ACCUEIL*/
color: #3b9fed;
font-size:40px;
padding-bottom: 10px;
border-bottom: 5px solid #7d7d7d;
}
p.explication_1{ /*ACCUEIL*/
font-weight: normal; /*obliger car sinon le text est en gras*/
text-align: justify;
font-family: Arial, Helvetica, sans-serif;
}
a.dans_le_text{ /*ACCUEIL*/
text-decoration: none;
color: #3b9fed;
font-style: italic;
}
a.dans_le_text:hover{ /*ACCUEIL*/
transition: 0.4s;
text-decoration: none;
color: #296da3;
font-style: italic;
}
span.mise_en_valeur{ /*ACCUEIL*/
text-decoration: underline;
font-weight: bold; /*met en gras*/
}
span.gde_letre{ /* NOUS */
float: left;
color:#296da3;
width: 0.7em;
font-size: 400%;
font-family: algerian, courier;
line-height: 80%;
}
p.description_de_droite{ /* NOUS */
text-align: justify;
}
p.description_de_gauche{ /* NOUS */
text-align: justify;
}
div.abaisser-la-barre .drop_down_centre:hover{ /*CODE*/
margin-bottom: 210px;
}
div.abaisser-la-barre .drop_down:hover{ /*CODE*/
margin-bottom: 40px;
}
div.abaisser-la-barre .drop_down_d:hover{/*CODE*/
margin-bottom: 130px;
}
div.drop_down { /*CODE pour naviguer entre les onglets*/
position: relative;
display: inline-block;
width: 32%;
}
div.drop_down_d { /*CODE pour naviguer entre les onglets*/
position: relative;
display: inline-block;
width: 32%;
}
div.drop_down_centre { /*CODE pour naviguer entre les onglets*/
position: relative;
display: inline-block;
width: 34%;
}
button.dropd_bouton { /*CODE pour naviguer entre les onglets*/
background-color: #bfbfbf;
border: 3px solid #7d7d7d;
border-radius: 10px;
color: white;
padding: 16px;
font-size: 16px;
width: 100%;
}
div.drop_down_menu { /*CODE pour naviguer entre les onglets*/
display: none;
position: absolute;
background-color: #bfbfbf; /*couleur générale des cases qui apparaissent*/
min-width: 160px;
opacity: 0.6;
}
div.drop_down_menu a { /*CODE pour naviguer entre les onglets*/
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
transition: 0.4s; /* transition des petits bloques */
}
div.drop_down_menu a:hover { /*CODE pour naviguer entre les onglets*/
background-color: #296da3; /* couleur des petites cases lorseque la souris est dessus*/
}
div.drop_down:hover .drop_down_menu { /*CODE pour naviguer entre les onglets*/
display: block;
width: 98%;
border: 3px solid #7d7d7d;
border-radius: 10px;
}
div.drop_down:hover .dropd_bouton { /*CODE pour naviguer entre les onglets*/
background-color: #296da3; /* couleur des grandes cases lorseque la souris est dessus*/
transition: 0.4s; /* transition des grands bloques */
}
div.drop_down_d:hover .drop_down_menu { /*CODE pour naviguer entre les onglets*/
display: block;
width: 98%;
border: 3px solid #7d7d7d;
border-radius: 10px;
}
div.drop_down_d:hover .dropd_bouton { /*CODE pour naviguer entre les onglets*/
background-color: #296da3; /* couleur des grandes cases lorseque la souris est dessus*/
transition: 0.4s; /* transition des grands bloques */
}
div.drop_down_centre:hover .drop_down_menu { /*CODE pour naviguer entre les onglets*/
display: block;
width: 99%;
border: 3px solid #7d7d7d;
border-radius: 10px;
}
div.drop_down_centre:hover .dropd_bouton { /*CODE pour naviguer entre les onglets*/
background-color: #296da3; /* couleur des grandes cases lorseque la souris est dessus*/
transition: 0.4s;
}
h3.titre_premier{ /*CODE*/
text-align: center;
border: 3px solid #7d7d7d;
border-radius: 10px;
background-color: #cccccc;
padding: 20px;
}
h3.titre_autres { /*CODE*/
text-align: center;
border: 3px solid #7d7d7d;
border-radius: 10px;
background-color: #cccccc;
padding: 20px;
margin-top: 100px;
}
span.espace_1{ /*CODE*/
margin-left:30px;
}
span.espace_2{ /*CODE*/
margin-left:60px;
color: white;
}
span.espace_ind{ /*ACCUEIL + NOUS*/
margin-left:60px;
}
span.espace_3{/*CODE*/
margin-left:90px;
}
span.espace_4{/*CODE*/
margin-left:120px;
}
span.espace_5{/*CODE*/
margin-left:150px;
}
span.espace_6{/*CODE*/
margin-left:180px;
}
span.espace_7{/*CODE*/
margin-left: 210px;
}
div.les_codes{/*CODE*/
margin-left: auto;
margin-right: auto;
padding: 20px;
background-color: black;
width: 90%;
}
span.commantaire{/*CODE*/
color: #3b9fed;
}
#commantaire_numero1{/*CODE*/
color: #3b9fed;
}
#commantaire_numero2{ /*CODE*/
margin-left: 120px;
}
h4.red_commantaire { /*CODE*/
color: red;
text-align: center;
}
p.le_texte_code{ /*CODE*/
color: white;
}
div.jump_a{/*CODE*/
text-align: center;
margin: auto;
padding: 10px;
}
a.saut-de-page{ /*CODE*/
color: black;
background-color: #3b9fed;
padding: 10px;
padding-left: 20%; /*permet de le centrer*/
padding-right: 20%; /*permet de le centrer*/
text-decoration: none;
}
a.saut-de-page:hover{ /*CODE*/
transition: 0.4s;
background-color: #296da3;
}
p.eggs{ /*TOUT*/
text-align: center;
font-size: 20px;
}
a.easter { /*TOUT*/
text-decoration: none; /*supprime le lien souligné*/
color: #7d7d7d;
}
a.easter:hover { /*TOUT*/
transition: 0.4s;
text-decoration: none;
color: #296da3;
}
from __future__ import print_function
import keras
from keras.datasets import mnist
from keras.models import Sequential
from keras.layers import Dense, Dropout, Flatten
from keras.layers import Conv2D, MaxPooling2D
from keras import backend as K
from sklearn.model_selection import train_test_split
# Une batch est une partie des images utilisé pour l'apprentissage, on apprend avec les données de toute une batch en premier puis on passe à une batch suivante (on apprend pas dirctement sur toute les données, c'est plus efficace)
batch_size = 128 # nb d'exmeple utilisé dans la batch
num_classes = 10 # Nombre de valeurs possible pour les données en fin (les chiffres de 0 à 9)
epochs = 12 # nb de passage à l'apprentissage sur la base => éviter le surapprentissage mais pas etre en sous-apprentissage
# on définis la dimension des images
img_rows, img_cols = 28, 28
# les images sont séparé en deux, d'un coté les images d'apprentissage, et de l'autre les images de teste
(x_train, y_train), (x_test, y_test) = mnist.load_data()
# Ici on dit que les images de teste sont elles aussi séparé en deux, d'un coté des image de teste et de l'autre des images pour validé l'apprentissage (une IA validant son apprentissage sur les valeurs qu'elle a appris ne permet pas une validation)
x_val, x_test, y_val, y_test = train_test_split(x_test, y_test)
# convention format de l'image keras, chaque tableau de valeurs comprend quatre caractériqtique, la taille de l'image, le tableau des valeurs des pixels de l'image, le nombre de colonne de l'image et le nombre de lignes de l'images.
if K.image_data_format() == 'channels_first':
x_train = x_train.reshape(x_train.shape[0], 1, img_rows, img_cols)
x_val = x_val.reshape(x_val.shape[0], 1, img_rows, img_cols)
x_test = x_test.reshape(x_test.shape[0], 1, img_rows, img_cols)
input_shape = (1, img_rows, img_cols)
else:
x_train = x_train.reshape(x_train.shape[0], img_rows, img_cols, 1)
x_val = x_val.reshape(x_val.shape[0], img_rows, img_cols, 1)
x_test = x_test.reshape(x_test.shape[0], img_rows, img_cols, 1)
input_shape = (img_rows, img_cols, 1)
# Les valeurs des pixels sont entre 0 et 255, on dit juste comment les lire "float32" etant un format d'écriture, puis on divise la valeurs des pixels par 255 pour obtenir une valeur entre 0 et 1
x_train = x_train.astype('float32')
x_test = x_test.astype('float32')
x_train /= 255
x_test /= 255
# On concertis les tableau de données en deux matrices, l'une avec les valeurs des pixels, l'autre avec les valeur des images
y_train = keras.utils.to_categorical(y_train, num_classes)
y_val = keras.utils.to_categorical(y_val, num_classes)
y_test = keras.utils.to_categorical(y_test, num_classes)
# On créé un reseau de neurones séquentiel
model = Sequential()
# add permet d'ajouter une couche au réseau,
model.add(Conv2D(32, kernel_size=(3, 3), # Conv2D déplace une fenêtre sur l'image en entrée de la couche de neurones, cette fenêtre est le filtre. La somme des produits des valeurs des filtres avec l'image est laissée passer par une fonction d'activation (relu dans le réseau) ou mise à zéro suivant si le seuil est dépassé ou pas. Une image est reconstruite au fur et à mesure que la fenêtre se déplace.
activation='relu', #=> non linéarité #Partie extraction de caractériqtique
input_shape=input_shape))
model.add(Conv2D(64, (3, 3), activation='relu')) #couche convolution
model.add(Conv2D(128, (3, 3), activation='relu'))
model.add(MaxPooling2D(pool_size=(2, 2))) # on regarde le max => agrégation spatial
model.add(Dropout(0.25)) # optimisation des paramètres avec une proba de 0.5 aux hasard, on modifie un peu les valeurs comme pour rajouter un genre de bruit, ça rend l'IA plus performante
model.add(Flatten()) # Flatten aplatit l'image (donc une matrice) sortant de la couche de neurones précédente en un vecteur.
model.add(Dense(128, activation='relu')) # Dense est une couche de neurones entièrement connecté avec la couche précédente, on l'utilise notamment pour faire la couche de sortie pour réaliser la classification
model.add(Dropout(0.5))
model.add(Dense(num_classes, activation='softmax'))
# Façon d'apprendre et de réduire l'erreur, ce sont des fonctions mathématiques qui vont être utilisé afin de modifier les poids ("loss" est un calcul de la perte, "optimizer" est la fonction utilisé pour réduire l'erreur en modifiant les poids)
model.compile(loss=keras.losses.categorical_crossentropy,
optimizer=keras.optimizers.Adadelta(),
metrics=['accuracy'])
# Apprentissage sur les images d'entrainement, les données utilisé pour validé (càd s'assurer qu'on n'a pas de sur-apprentissage ou de sous-apprentissage) l'entrainement vont être les "x_val" et "y_val"
model.fit(x_train, y_train,
batch_size=batch_size,
epochs=epochs,
verbose=1,
validation_data=(x_val, y_val))
#evaluation des performance du reseau de neurones, avec l'erreur = "loss", et la précision = "accuracy", on teste sur les valeurs test
score = model.evaluate(x_test, y_test, verbose=0)
print('Test loss:', score[0])
print('Test accuracy:', score[1])
# On enregistre le réseau et les valeurs d'apprentissage pour une utilisation ultérieur
model.save("model.h5")
import numpy as np
import matplotlib.pyplot as plt
from PIL import Image, ImageFilter
from keras.models import load_model
def imageprepare(argv):
"""
Cette fonction redimenssione l'image en une image de 28 par 28
Elle convertis ensuite cette image en un tableau de valeurs compréhensible par l'IA
La valeur d'entrée est la location d'une image en PNG.
"""
im = Image.open(argv).convert('L')
largeur = float(im.size[0])
hauteur = float(im.size[1])
nouvImage = Image.new('L', (28, 28), (255))
# Creation d'une image blanche de 28 par 28
if largeur > hauteur:
# check quelle dimension est la plus grande
# la largeur est plus gande. la largeur est redimensionné à 20 pixels.
nhauteur = int(round((28.0 / largeur * hauteur), 0))
# redimensionne la hauteur en fonction largeur
if (nhauteur == 0):
# rare cas mais il est possible donc on redimensionne à 1 pixel
nhauteur = 1
# Redimensionne le tout et on rend plus net
img = im.resize((28, nhauteur), Image.ANTIALIAS).filter(ImageFilter.SHARPEN)
wtop = int(round(((28 - nhauteur) / 2), 0))
# calcul de la taille horizontale
nouvImage.paste(img, (0, wtop))
# colle la nouvelle image sur une image blanche
else:
# la hauteur est plus gande. la hauteur est redimensionné à 20 pixels.
nlargeur = int(round((28.0 / hauteur * largeur), 0))
# redimensionne la hauteur en fonction largeur
if (nlargeur == 0):
# rare cas mais il est possible donc on redimensionne à 1 pixel
nlargeur = 1
# Redimensionne le tout et on rend plus net
img = im.resize((nlargeur, 28), Image.ANTIALIAS).filter(ImageFilter.SHARPEN)
wleft = int(round(((28 - nlargeur) / 2), 0))
# calcul de la taille verticale
nouvImage.paste(img, (wleft, 0))
# colle la nouvelle image sur une image blanche
nouvImage.save("echantillon.png" )
# Sauvegarde d'une image échantillon
tabval255 = list(nouvImage.getdata())
# On récupère les valeurs des pixels comprise entre 0 et 255
# On reduit les valeurs des pixels comprise entre 0 et 255 à de valeurs compris entr 0 et 1
tabval01 = [( 255 - x ) * 1.0 / 255.0 for x in tabval255]
return tabval01
# Conversion d'un tableau basique en un tableau Numpy comme les valeurs de MNISt
tabia = np.array(imageprepare('./image.png'))
tabia = np.array(tabia).reshape(28,28,1)
from keras.models import load_model
#Récuperation du réseaux de neurones appelé model, pour réutilisation
model = load_model('model.h5')
"""
L'IA va donc prédire grace au model les possibilités pour chaque numéros,
ces prédictions seront des valeurs entre 0 et 1, sachant que 1 signifie que l'IA est sûr à 100%
Une fonction va chercher la valeurs dans le tableau la plus élevés et dire à quelle rang elle se situe,
ce rang correspond justement à la valeur que l'IA à deviné
"""
plt.title("Estimation : " + str(np.argmax(model.predict(np.array([tabia])))))
# On va créer un graphique afin d'afficher les numéros déssinés en dessout du numéros deviné
# grace a une librairie spécialisé mais pour cela on retire les axes du graphique
plt.axis('off')
# Puis on récupère les valeurs du tableau destiné à l'IA et on les donne au graphique
# en redimensionnant en un tableau de 28 par 28 pour le graphique
plt.imshow(tabia.reshape(28,28), cmap='gray')
# On affiche ensuite ce graphique
plt.show()