Skip to content

fix(slides,#11508): deck 06 -- definir dense-list/xl-dense et degraisser les diapos hors canvas #22269

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
myia-ai-01 merged 1 commit into from
Oct 24, 2026
Merged

fix(slides,#11508): deck 06 -- definir dense-list/xl-dense et degraisser les diapos hors canvas #22269

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
82 changes: 71 additions & 11 deletions slides/06-apprentissage/slides.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -869,6 +869,19 @@ layout: two-cols

<!-- Architecture NN : entrée → couches cachees (activation ReLU/sigmoid) → sortie -->
</div>

<style scoped>
/* La diapo empilait texte + grille de 4 images + une image `img-fit` jusqu'a
1323 px de haut dans un canvas de 552 : les deux dernieres images tombaient
sous le champ. `dense-list` n'est definie nulle part dans le theme (classe
heritee du port Marp), donc le texte gardait sa taille par defaut. Ici :
texte condense, grille sur UNE rangee de 4 colonnes, image isolee bornee. */
:deep(ul) { font-size: 0.74em; }
:deep(li) { margin: 0; line-height: 1.14; }
:deep(.img-grid) { height: 130px !important; grid-template-columns: repeat(4, 1fr) !important; }
img { max-height: 130px !important; object-fit: contain; }
img.img-fit { max-height: 60px !important; }
</style>
---


Expand All @@ -891,13 +904,25 @@ layout: two-cols
- + normalisation
- + mise en série

<img src="./images/img_038.png" alt="img_038.png" style="display:block; margin:10px auto; max-width:100%;">
<img src="./images/img_039.png" alt="img_039.png" style="display:block; margin:10px auto; max-width:100%;">
<img src="./images/img_040.png" alt="img_040.png" style="display:block; margin:10px auto; max-width:100%;">
<img src="./images/img_041.png" alt="img_041.png" style="display:block; margin:10px auto; max-width:100%;">
<div class="img-grid">
<img src="./images/img_038.png" alt="img_038.png">
<img src="./images/img_039.png" alt="img_039.png">
<img src="./images/img_040.png" alt="img_040.png">
<img src="./images/img_041.png" alt="img_041.png">
</div>

<!-- CNN : convolution → feature maps → pooling → couches denses → classification -->

<style scoped>
/* 16 puces puis quatre images empilees en flux vertical (chacune a sa taille
naturelle, le `max-width` inline ne borne que la largeur) : la diapo montait
a 1239 px. Les images passent en grille sur une rangee, le texte se condense. */
:deep(ul) { font-size: 0.72em; }
:deep(li) { margin: 0; line-height: 1.12; }
:deep(.img-grid) { height: 100px !important; grid-template-columns: repeat(4, 1fr) !important; }
:deep(.slidev-layout) { padding-top: 24px; padding-bottom: 16px; }
</style>


---

Expand Down Expand Up @@ -1005,6 +1030,34 @@ layout: two-cols
- Opérations simples
- Passe ou pas / Ajout du signal / Activation  tanh
- Ex. Sujet de la phrase
</div>

<div class="img-grid">
<img src="./images/img_055.png" alt="img_055.png">
<img src="./images/img_056.png" alt="img_056.png">
<img src="./images/img_057.png" alt="img_057.png">
<img src="./images/img_058.png" alt="img_058.png">
</div>

<style scoped>
/* 24 puces puis SEPT images empilees en flux vertical : la diapo montait a
1794 px, soit trois canvas. `dense-list` ne condensait rien (classe heritee
du port Marp, definie depuis dans styles/index.css) ; les images passent en
grille de 4 colonnes sur deux rangees a budget fixe. */
:deep(ul) { font-size: 0.64em; }
:deep(li) { margin: 0; line-height: 1.08; }
:deep(.img-grid) { height: 80px !important; grid-template-columns: repeat(4, 1fr) !important; }
:deep(.slidev-layout) { padding-top: 22px; padding-bottom: 14px; }
</style>


---


# Réseaux récurrents - portes et variantes

<div class="dense-list">

- Porte 1: On oublie le précédent
- Porte 2: On MAJ le sujet courant
- Porte 3: On le passe en sortie pour le verbe
Expand All @@ -1018,13 +1071,19 @@ layout: two-cols
- But= tirer profit du futur
</div>

<img src="./images/img_055.png" alt="img_055.png" style="display:block; margin:10px auto; max-width:100%;">
<img src="./images/img_056.png" alt="img_056.png" style="display:block; margin:10px auto; max-width:100%;">
<img src="./images/img_057.png" alt="img_057.png" style="display:block; margin:10px auto; max-width:100%;">
<img src="./images/img_058.png" alt="img_058.png" style="display:block; margin:10px auto; max-width:100%;">
<img src="./images/img_059.png" alt="img_059.png" style="display:block; margin:10px auto; max-width:100%;">
<img src="./images/img_060.png" alt="img_060.png" style="display:block; margin:10px auto; max-width:100%;">
<img src="./images/img_061.png" alt="img_061.png" style="display:block; margin:10px auto; max-width:100%;">
<div class="img-grid">
<img src="./images/img_059.png" alt="img_059.png">
<img src="./images/img_060.png" alt="img_060.png">
<img src="./images/img_061.png" alt="img_061.png">
</div>

<style scoped>
/* Suite de la diapo precedente, scindee : 24 puces et SEPT images ne
tenaient pas dans un canvas de 552 px (mesure 1794 px avant correction). */
:deep(ul) { font-size: 0.8em; }
:deep(li) { margin: 0; line-height: 1.18; }
:deep(.img-grid) { height: 150px !important; grid-template-columns: repeat(4, 1fr) !important; }
</style>


---
Expand Down Expand Up @@ -2605,3 +2664,4 @@ layout: end

- Jean-Sylvain Boige
- jsboige@myia.org

39 changes: 39 additions & 0 deletions slides/06-apprentissage/styles/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
/* ------------------------------------------------------------------ */
/* Classes heritees du port Marp, nommees dans le markdown du deck sans */
/* jamais avoir ete definies dans theme-ia101 (meme famille de defaut */
/* que `img-grid`, deja corrige cote theme). Le rendu retombait sur le */
/* flux par defaut : les listes « denses » gardaient la taille standard */
/* et les images prenaient leur hauteur naturelle. */
/* */
/* Mesure au scanner de composition (#11508, lot L2/L3), avant ce bloc : */
/* 16 diapos sur 123 sortaient du canvas de 980x552 px. */
/* ------------------------------------------------------------------ */

/* 29 usages dans ce deck : condense une liste a puces dense. */
.dense-list ul { font-size: 0.86em; }
.dense-list li { margin: 0.06em 0; line-height: 1.25; }

/* 5 usages : variante encore plus dense, pour les listes longues. */
.dense-list.xl-dense ul { font-size: 0.72em; }
.dense-list.xl-dense li { margin: 0.02em 0; line-height: 1.16; }

/* 6 usages : image unique a faire tenir sous un bloc de texte.
(`img-fit` est deja bornee par le theme a 100 px ; la borne explicite
evite qu'un futur changement de theme la relache.) */
img.img-fit {
display: block;
margin: 4px auto;
max-width: 100%;
max-height: 100px;
object-fit: contain;
}

/* Images posees directement dans le layout, hors `.img-grid` (qui a deja */
/* son budget de 300 px), sur une diapo qui porte aussi du texte : sans */
/* borne elles prennent leur taille naturelle et empilent le contenu hors */
/* champ. Une diapo image-seule garde son image pleine page. */
/* Les images posees directement dans le layout au milieu d'un bloc de texte
sont bornees diapo par diapo (`<style scoped>` dans slides.md) : une regle
globale ici a ete essayee et REFUSEE, elle faisait remonter le compte de
debordements de 15 a 16 — la geometrie de chaque diapo demande son propre
budget, un plafond unique casse les diapos ou l'image etait deja juste. */
Loading