Slides: bases

slides/00-hello.reveal.js

+<link rel="stylesheet" href="/node_modules/reveal.js/dist/reveal.css">
+<link rel="stylesheet" href="/node_modules/reveal.js/dist/theme/black.css">
+import Reveal from 'reveal.js';
+import Markdown from 'reveal.js/plugin/markdown/markdown.esm.js';
+
+let deck = new Reveal({
+   plugins: [ Markdown ]
+})
+deck.initialize();
\ No newline at end of file

slides/01-intro.marp.md

+---
+marp: true
+theme: uncover
+color: #eee
+colorSecondary: #333
+backgroundColor: #111
+paginate: true
+---
+
+# <!-- fit --> Hello World
+
+ROBOTS ARE UPRISING. WHAT SIDE ARE YOU ON?
+
+---
+
+### On va parler de 
+# <!-- fit --> Machine Learning
+
+---
+
+## Mais pas comme ça
+
+<br />
+
+$$ I_{xx}=\int\int_Ry^2f(x,y)\cdot{}dydx $$
+
+<br />
+
+#### (Le moins possible)
+
+---
+
+## Ni comme ça
+
+![bg right](https://uproxx.com/wp-content/uploads/2015/05/angry-bender.jpg?w=650)
+
+
+###### - [the Fallacy of generalization from Fictional evidence](https://www.lesswrong.com/posts/rHBdcHGLJ7KvLJQPk/the-logical-fallacy-of-generalization-from-fictional)
+
+--- 
+
+## Encore que...
+
+![bg right grayscale](https://uproxx.com/wp-content/uploads/2015/05/angry-bender.jpg?w=650)
+
+###### - [AGI Ruin: A List of Lethalities](https://www.lesswrong.com/posts/uMQ3cqWDPHhjtiesc/agi-ruin-a-list-of-lethalities)
+
+--- 
+
+## On va parler des derniers succès
+
+#### - [Meta AI Research: CICERO](https://ai.facebook.com/blog/cicero-ai-negotiates-persuades-and-cooperates-with-people/)
+
+![bg left](./img/01-cicero.png)
+
+--- 
+
+## Et d'échecs intéressants
+
+##### - [MIT Tech review:  100s of AI tools built for covid... None helped.](https://www.technologyreview.com/2021/07/30/1030329/machine-learning-ai-failed-covid-hospital-diagnosis-pandemic/)
+
+![bg left 100%](./img/01-covid-failed.png)
+
+----
+
+## Mais aussi de révolutions en cours
+
+
+##### - [Midjourney](fixme)
+
+![bg left](./img/01-midjourney.png)
+
+---
+
+### Comment le ML peut raconter des histoires 
+
+##### - [fixme ai dungeon](https://openai.com/blog/jukebox/)
+
+![bg left 100%](./img/01-jukebox.png)
+
+----
+
+### Comment elles nous comprennent
+
+
+##### - [OpenAI Jukebox: a neural net that generates music, including rudimentary singing](https://openai.com/blog/jukebox/)
+
+![bg left 100%](./img/01-jukebox.png)
+
+----
+
+## Comment vous pourriez les comprendre
+
+--- 
+
+## Et comment leur faire faire ce que vous voulez
+
+---
+
+<!--
+_backgroundColor: white
+_color: black
+-->
+<br />
+
+## Qui suis-je?
+
+<!-- Vous pouvez me contacter -->
+
+### Paul-Louis Nech
+- ###### ✉ formation@nech.pl
+- ###### 🔗 LinkedIn.com/in/PLNech
+- ###### 💡 GitHub.com/PLNech
+
+![bg right grayscale](./img/01-me.jpg)
+
+---
+
+<!--
+_backgroundColor: white
+_color: black
+-->
+<br />
+
+## Parcours
+
+- #### EPITA 2016 | MTI
+- #### Software Engineer @Algolia
+- #### ML Engineer @Algolia
+![bg right](./img/01-me2.jpg)
+
+---
+
+## C'est quoi ce cours ?
+<!-- Plan du cours / TDs / eval -->
+<!-- Format / interactions welcome -->
+---
+
+# Les bases 
+
+## C'est quoi apprendre ?
+Le par-coeur, un problème ? 
+Guessing the teachers password 
+Learning to forget
+Comment je sais ce que je sais pas ? 
+
+## Failures of ML 
+MIT COVID FAILS 
+Gaming the game: IAs flemmardes
+Short-term goals vs long-term goals 
+Dangerous goals : Paperclip maximizer? 
+
+## C'est quoi du ML ? 
+Un thermostat ? 
+Sacs de ifs
+Amazon mechanical turk
+Elisa? Turing test ? 
+Akinator ? 
+Quelles limites aux possibilités du ML ? 
+Andrew ng's quote on limits 
+
+## Formalisme: features 
+## métriques 
+Supervisé ou non 
+
+
+
+## Pionniers & Penseurs
+
+### Turing
+
+### Dartmouth
+
+### Summer
+
+### Yann LeCun
+
+### Andrew Ng
+
+### Yudkowsky 
+
+### 
+## Adversarial perturbations 
+
+
+## Méthodes 
+### Train/test/val split
+
+## Outils
\ No newline at end of file

slides/01-intro.reveal.md

+---
+theme : "night"
+transition: "slide"
+highlightTheme: "monokai"
+logoImg: "logo.png"
+slideNumber: false
+title: "VSCode Reveal intro"
+---
+
+::: block
+*here be dragons* {style=background:red;width:500px}
+::: 
+
+---
+
+// @[vine](etVpwB7uHlw)
+
+---
+
+### Solar System Exploration, 1950s – 1960s
+
+- [ ] Mercury
+- [x] Venus
+- [x] Earth (Orbit/Moon)
+- [x] Mars
+- [ ] Jupiter
+- [ ] Saturn
+- [ ] Uranus
+- [ ] Neptune
+- [ ] Comet Haley
+
+---
+
+# some Table
+
+|             |          Grouping           ||
+First Header  | Second Header | Third Header |
+ ------------ | :-----------: | -----------: |
+Content       |          *Long Cell*        ||
+Content       |   **Cell**    |         Cell |
+                                              
+New section   |     More      |         Data |
+And more      | With an escaped '\\|'       ||
+[Prototype table]                             
+
+--
+
+First header | Second header
+-------------|---------------
+List:        | More  \
+- over       | data  \
+- several    |       \
+- lines      | 
+
+--
+
+First header | Second header
+-------------|---------------
+Merged       | Cell 1
+^^           | Cell 2
+^^           | Cell 3
+
+--
+
+
+
+---
+
+<div class="mermaid">
+sequenceDiagram
+    participant Alice
+    participant Bob 
+    Alice->>John: Hello John, how are you?
+    loop Healthcheck
+        John->>John: Fight against hypochondria
+    end
+    Note right of John: Rational thoughts <br/>prevail!
+    John-->>Alice: Great!
+    John->>Bob: How about you?
+    Bob-->>John: Jolly good!
+</div> 
+
+---
+
+<div class="mermaid">
+graph LR;
+  A(AAAA)==> B(B node);
+  B==> C(SEE SEE);
+
+  class A diag-a-styles;
+  class B diag-b-styles
+  class C diag-c-styles;
+</div>
+
+---
+
+# vscode-reveal
+
+ Awesome VS code extension using The HTML Presentation Framework Revealjs
+
+<small>Created by [Vincent B.](https://www.evilznet.com) / [@Evilznet](https://twitter.com/Evilznet)</small>
+
+---
+
+## Hello There
+
+reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do.
+
+---
+
+## Vertical Slides
+
+Slides can be nested inside of each other.
+
+Use the _Space_ key to navigate through all slides.
+
+<a href="#" class="navigate-down">
+    <img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
+</a>
+
+--
+
+## Basement Level 1
+
+Nested slides are useful for adding additional detail underneath a high level horizontal slide.
+
+--
+
+## Basement Level 2
+
+That's it, time to go back up.
+
+<a href="#/2">
+    <img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="transform: rotate(180deg); -webkit-transform: rotate(180deg);">
+</a>
+
+---
+
+## Point of View
+
+Press **ESC** to enter the slide overview.
+
+Hold down alt and click on any element to zoom in on it using [zoom.js](http://lab.hakim.se/zoom-js). Alt + click anywhere to zoom back out.
+
+> Use ctrl + click in Linux
+
+---
+
+## Touch Optimized
+
+Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides.
+
+---
+
+## Markdown support
+
+```
+  ## Markdown support
+
+  Write content using inline or external Markdown.
+  Instructions and more info available in the 
+  [readme](https://github.com/hakimel/reveal.js#markdown).
+```
+
+---
+
+## Fragments
+
+Hit the next arrow...
+
+... to step through ...
+<span class="fragment">... a</span> <span class="fragment">fragmented</span> <span class="fragment">slide.</span>
+
+Note:
+This slide has fragments which are also stepped through in the notes window.
+
+--
+
+## Fragment Styles
+
+There's different types of fragments, like:
+
+grow {.fragment .grow}
+
+shrink {.fragment .shrink}
+
+fade-out {.fragment .fade-out}
+
+fade-right{.fragment .fade-right}
+
+fade-up{.fragment .fade-up}
+
+fade-down{.fragment .fade-down}
+
+fade-left{.fragment .fade-left}
+
+--
+
+## Fragment Styles
+
+fade-in-then-out{.fragment .fade-in-then-out}
+
+fade-in-then-semi-out {.fragment .fade-in-then-semi-out"}
+
+current-visible {.fragment .current-visible}
+
+Highlight **red**{.fragment .highlight-red} **blue**{.fragment .highlight-blue} **green**{.fragment .highlight-green}
+
+---
+
+## Transition Styles
+
+You can select from different transitions, like:
+[None](?transition=none#/transitions) - [Fade](?transition=fade#/transitions) - [Slide](?transition=slide#/transitions) - [Convex](?transition=convex#/transitions) - [Concave](?transition=concave#/transitions) - [Zoom](?transition=zoom#/transitions)
+
+---
+
+## Themes
+
+reveal.js comes with a few themes built in:
+<a href="#" onclick="document.getElementById('theme').setAttribute('href','libs/reveal.js/3.8.0/css/theme/black.css'); return false;">Black (default)</a> -
+<a href="#" onclick="document.getElementById('theme').setAttribute('href','libs/reveal.js/3.8.0/css/theme/white.css'); return false;">White</a> -
+<a href="#" onclick="document.getElementById('theme').setAttribute('href','libs/reveal.js/3.8.0/css/theme/league.css'); return false;">League</a> -
+<a href="#" onclick="document.getElementById('theme').setAttribute('href','libs/reveal.js/3.8.0/css/theme/sky.css'); return false;">Sky</a> -
+<a href="#" onclick="document.getElementById('theme').setAttribute('href','libs/reveal.js/3.8.0/css/theme/beige.css'); return false;">Beige</a> -
+<a href="#" onclick="document.getElementById('theme').setAttribute('href','libs/reveal.js/3.8.0/css/theme/simple.css'); return false;">Simple</a> <br>
+<a href="#" onclick="document.getElementById('theme').setAttribute('href','libs/reveal.js/3.8.0/css/theme/serif.css'); return false;">Serif</a> -
+<a href="#" onclick="document.getElementById('theme').setAttribute('href','libs/reveal.js/3.8.0/css/theme/blood.css'); return false;">Blood</a> -
+<a href="#" onclick="document.getElementById('theme').setAttribute('href','libs/reveal.js/3.8.0/css/theme/night.css'); return false;">Night</a> -
+<a href="#" onclick="document.getElementById('theme').setAttribute('href','libs/reveal.js/3.8.0/css/theme/moon.css'); return false;">Moon</a> -
+<a href="#" onclick="document.getElementById('theme').setAttribute('href','libs/reveal.js/3.8.0/css/theme/solarized.css'); return false;">Solarized</a>
+
+---
+
+<!-- .slide: data-background="#dddddd" -->
+## Slide Backgrounds
+
+Set `data-background="#dddddd"` on a slide to change the background color. All CSS color formats are supported.
+
+[![Down arrow](https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png =178x238)](#){.navigate-down}
+
+
+--
+
+<!-- .slide: data-background="default-thumbnail.jpg" -->
+
+## Image Backgrounds
+
+```markdown
+<!-- .slide: data-background="default-thumbnail.jpg" -->
+```
+
+--
+
+<!-- .slide: data-background="default-thumbnail.jpg" data-background-repeat="repeat" data-background-size="100px" -->
+
+## TILED BACKGROUNDS
+
+```markdown
+<!-- .slide: data-background="default-thumbnail.jpg" data-background-repeat="repeat" data-background-size="100px" -->
+```
+
+--
+
+<!-- .slide: data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm" data-background-color="#000000" -->
+
+## Video Backgrounds
+
+```markdown
+<!-- .slide: data-background-video="https://upload.wikimedia.org/wikipedia/commons/transcoded/c/c0/Big_Buck_Bunny_4K.webm/Big_Buck_Bunny_4K.webm.480p.vp9.webm" data-background-color="#000000" -->
+```
+
+--
+
+<!-- .slide: data-background="http://i.giphy.com/90F8aUepslB84.gif" -->
+
+## ... and GIFs!
+
+```markdown
+<!-- .slide: data-background="http://i.giphy.com/90F8aUepslB84.gif" -->
+```
+
+---
+
+<!-- .slide: data-transition="slide" data-background="#4d7e65" data-background-transition="zoom" -->
+
+## Background Transitions
+
+Different background transitions are available via the backgroundTransition option. This one's called "zoom".
+
+---
+
+<!-- .slide: data-transition="slide" data-background="#b5533c" data-background-transition="zoom" -->
+
+## Background Transitions
+
+You can override background transitions per-slide.
+
+---
+
+## Pretty Code
+
+```js
+function linkify( selector ) {
+  if( supports3DTransforms ) {
+
+    var nodes = document.querySelectorAll( selector );
+
+    for( var i = 0, len = nodes.length; i &lt; len; i++ ) {
+      var node = nodes[i];
+
+      if( !node.className ) {
+        node.className += ' roll';
+      }
+    }
+  }
+}
+```
+
+Code syntax highlighting courtesy of [highlight.js](http://softwaremaniacs.org/soft/highlight/en/description/).
+
+---
+
+## Marvelous List
+
+*   No order here
+*   Or here
+*   Or here
+*   Or here
+
+---
+
+## Fantastic Ordered List
+
+1.  One is smaller than...
+2.  Two is smaller than...
+3.  Three!
+
+---
+
+## Tabular Tables
+
+| Tables        | Are           | Cool  |
+|-------------|:-----------:|----:|
+| col 3 is      | right-aligned | $1600 |
+| col 2 is      | centered      | $12   |
+| zebra stripes | are neat      | $1    |
+
+---
+
+{.slide id="ClevQuot"}
+## Clever Quotes
+
+These guys come in two forms, inline: <q cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">"The nice thing about standards is that there are so many to choose from"</q> and block:
+
+> "For years there has been a theory that millions of monkeys typing at random on millions of typewriters would reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue."
+
+---
+
+## Intergalactic Interconnections
+
+You can link between slides internally, [like this](#/2/3).
+
+Link to slides by an ID, e.g., [Clever Quotes](#ClevQuot).  
+However, you must have set the ID at the destination slide using:  
+`{.slide id="UniqueID"}`
+
+---
+
+## Speaker View
+
+There's a [speaker view](https://github.com/hakimel/reveal.js#speaker-notes). It includes a timer, preview of the upcoming slide as well as your speaker notes.
+
+Press the _S_ key to try it out.
+
+<aside class="notes">Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).</aside>
+
+---
+
+## Export to PDF
+
+Presentations can be [exported to PDF](https://github.com/hakimel/reveal.js#pdf-export), here's an example:
+
+<iframe data-src="https://www.slideshare.net/slideshow/embed_code/42840540" width="445" height="355" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:3px solid #666; margin-bottom:5px; max-width: 100%;" allowfullscreen=""></iframe>
+
+---
+
+## Global State
+
+Set `data-state="something"` on a slide and `"something"` will be added as a class to the document element when the slide is open. This lets you apply broader style changes, like switching the page background.
+
+---
+
+<!-- .slide: data-state="customevent" -->
+
+## State Events
+
+Additionally custom events can be triggered on a per slide basis by binding to the `data-state` name.
+```js
+Reveal.addEventListener( 'customevent', function() {
+	console.log( '"customevent" has fired' );
+} );
+```
+
+---
+
+## Take a Moment
+
+Press B or . on your keyboard to pause the presentation. This is helpful when you're on stage and want to take distracting slides off the screen.
+
+---
+
+## Much more
+
+*   Right-to-left support
+*   [Extensive JavaScript API](https://github.com/hakimel/reveal.js#api)
+*   [Auto-progression](https://github.com/hakimel/reveal.js#auto-sliding)
+*   [Parallax backgrounds](https://github.com/hakimel/reveal.js#parallax-background)
+*   [Custom keyboard bindings](https://github.com/hakimel/reveal.js#keyboard-bindings)
+
+---
+
+## Plugins
+
+--
+
+## search
+
+Handles finding a text string anywhere in the slides and showing the next occurrence to the user by navigatating to that slide and highlighting it.
+
+**Shortcut : `CTRL + SHIFT + F`**
+
+
+--
+
+## Zoom
+
+Zoom anywhere on your presentation
+
+**Shortcut : `alt + click`: Zoom in. Repeat to zoom back out.**
+
+--
+
+## Notes
+
+Add note to speaker view.
+
+Default markdown syntaxe is
+
+```text
+note: a custom note here
+```
+
+--
+
+## Chalkboard
+
+Have you ever missed the traditional classroom experience where you can quickly sketch something on a chalkboard?
+
+Just press 'b' or click on the pencil button to open and close your chalkboard.
+
+--
+
+## Chalkboard
+
+- Click the `left mouse button` to write on the chalkboard
+- Click the `right mouse button` to wipe the chalkboard
+- Click the `DEL` key to clear the chalkboard
+
+--
+
+## MAKE NOTES ON SLIDES
+
+Did you notice the <i class="fa fa-pencil"></i> button?
+
+By pressing 'c' or clicking the button you can start and stop the notes taking mode allowing you to write comments and notes directly on the slide.
+
+--
+
+## Chart
+
+Add chart from simple string
+
+--
+
+### Line chart from JSON string
+<canvas class="stretch" data-chart="line">
+<!--
+{
+ "data": {
+  "labels": ["January"," February"," March"," April"," May"," June"," July"],
+  "datasets":[
+   {
+    "data":[65,59,80,81,56,55,40],
+    "label":"My first dataset","backgroundColor":"rgba(120,120,255,.8)"
+   },
+   {
+    "data":[28,48,40,19,86,27,90],
+    "label":"My second dataset","backgroundColor":"rgba(255,120,120,.8)"
+   }
+  ]
+ }, 
+ "options": { "responsive": true }
+}
+-->
+</canvas>
+
+--
+
+### Line chart with CSV data and JSON configuration
+
+<canvas class="stretch" data-chart="line">
+My first dataset,  65, 59, 80, 81, 56, 55, 40
+<!-- This is a comment -->
+My second dataset, 28, 48, 40, 19, 86, 27, 90
+<!-- 
+{ 
+"data" : {
+	"labels" : ["Enero", "Febrero", "Marzo", "Avril", "Mayo", "Junio", "Julio"],
+	"datasets" : [{ "borderColor": "#0f0", "borderDash": ["5","10"] }, { "borderColor": "#0ff" } ]
+	}
+}
+-->
+</canvas>
+
+--
+
+### Bar chart with CSV data
+
+<canvas class="stretch" data-chart="bar">
+,January, February, March, April, May, June, July
+My first dataset, 65, 59, 80, 81, 56, 55, 40
+My second dataset, 28, 48, 40, 19, 86, 27, 90
+</canvas>
+
+--
+
+<!-- .slide: data-background="#aaaaaa" -->
+### Stacked bar chart from CSV file with JSON configuration
+<!-- By default, chart axes don't "beginAtZero", so set it to true below -->
+<!-- Hover events are broken inside reveal https://github.com/chartjs/Chart.js/issues/7178 so "events" : [""] turns it off-->
+<canvas class="stretch" data-chart="bar" data-chart-src="https://rajgoel.github.io/reveal.js-demos/chart/data.csv">
+<!-- 
+{
+  "data" : {
+    "datasets" : [
+      {"backgroundColor": "#0f0"}, 
+      {"backgroundColor": "#0ff" }
+    ]
+  },
+  "options": {
+    "events": [""],
+    "animation": {"easing": "easeOutElastic"},
+    "legend": {
+      "display": true,
+      "labels": {
+        "fontColor": "rgb(200, 0, 0)"
+      }
+    },
+    "responsive": true, 
+    "scales": { 
+      "xAxes": [{
+        "ticks": {
+          "fontColor" : "rgba(100,100,255,.8)"
+        },
+        "gridLines" : {
+          "color" : "rgba(100,100,255,.8)",
+          "zeroLineColor": "transparent"
+        },
+        "stacked": true
+        }],
+      "yAxes": [{
+        "ticks": {
+          "beginAtZero": true,
+          "fontColor" : "rgba(100,100,255,.8)"
+        },
+        "stacked": true,
+        "gridLines" : {
+          "color" : "rgba(100,100,255,.8)",
+          "zeroLineColor": "transparent"
+        }
+      }] 
+    }
+  }
+}
+-->
+</canvas>
+
+--
+
+### Pie chart
+
+<canvas class="stretch" data-chart="pie">
+,Black, Red, Green, Yellow
+My first dataset, 40, 40, 20, 6
+My second dataset, 45, 40, 25, 4
+</canvas>
+
+--
+
+## EMBEDDING A TWEET
+To embed a tweet, simply determine its URL and include the following code in your slides:
+
+```html
+<div class="tweet" data-src="TWEET_URL"></div>
+```
+
+--
+
+<div class="tweet"  data-src="https://twitter.com/Evilznet/status/1086984843056107525"></div>
+
+--
+
+## menu
+
+A SLIDEOUT MENU FOR NAVIGATING REVEAL.JS PRESENTATIONS
+
+--
+
+See the  <i class="fa fa-bars"></i>  in the corner?
+
+Click it and the menu will open from the side.
+
+Click anywhere on the slide to return to the presentation,
+or use the close button in the menu.
+
+--
+
+If you don't like the menu button,
+you can use the slide number instead.
+
+Go on, give it a go.
+
+The menu button can be hidden using the options, 
+but you need to enable the slide number link.
+
+--
+
+Or you can open the menu by pressing the m key.
+
+You can navigate the menu with the keyboard as well. 
+Just use the arrow keys and <space> or <enter> to change slides.
+
+You can disable the keyboard for the 
+menu in the options if you wish.
+
+--
+
+## LEFT OR RIGHT
+You can configure the menu to slide in from the left or right
+
+--
+
+### MARKERS
+The slide markers in the menu can be useful to show 
+you the progress through the presentation.
+
+You can hide them if you want.
+
+You can also show/hide slide numbers.
+
+--
+
+### SLIDE TITLES
+The menu uses the first heading to label each slide
+but you can specify another label if you want.
+
+Use a data-menu-title attribute in the section element to give the slide a custom label, or add a menu-title class to any element in the slide you wish.
+
+You can change the titleSelector option and use
+any elements you like as the default for labelling each slide.
+
+--
+
+## MathSVG
+
+An extension of the math.js plugin allowing to render LaTeX in SVG.
+
+--
+
+### The Lorenz Equations
+
+<span>
+\[\begin{aligned}
+\dot{x} &amp; = \sigma(y-x) \\
+\dot{y} &amp; = \rho x - y - xz \\
+\dot{z} &amp; = -\beta z + xy
+\end{aligned} \]
+</span>
+
+--
+
+### The Cauchy-Schwarz Inequality
+
+<script type="math/tex; mode=display">
+  \left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)
+</script>
+
+--
+
+### Custom footer
+
+Includes a footer in all the slides of a Reveal.js presentation (with optional exclusion of some slides) that will show the title of the presentation.
+
+
+
+--
+
+## code-focus
+
+A plugin that allows focusing on specific lines of code blocks.
+
+--
+
+### Code Focus Demo
+
+
+```html
+<section>
+  <pre><code>
+  // Useless comment.
+  alert('hi');
+  </pre></code>
+  <p class="fragment" data-code-focus="1">
+    This focuses on the comment.
+  </p>
+  <p class="fragment" data-code-focus="1-2">
+    Another fragment.
+  </p>
+</section>
+```
+
+This section is a slide. {.fragment .current-only data-code-focus=1-12}
+
+This will be highlighted by `highlight.js`. {.fragment .current-only data-code-focus=2-5}
+
+This fragment focuses on the first line. {.fragment .current-only data-code-focus=6-8}
+
+This fragment focuses on lines 1 and 2. {.fragment .current-only data-code-focus=9-11}
+
+See the next slide for a demo with the contents of this code block. {.fragment .current-only data-code-focus=1-12}
+
+---
+
+<!-- .slide: style="text-align: left;" -->
+# THE END
+
+- [Try the online editor](http://slides.com)
+- [Source code & documentation](https://github.com/hakimel/reveal.js)

slides/package.json

+{
+  "name": "ml101-slides",
+  "version": "1.0.0",
+  "description": "Slides pour le cours ML101@INTECH 2022-2023",
+  "main": "index.js",
+  "author": "PLN",
+  "license": "MIT",
+  "private": false,
+  "dependencies": {
+    "reveal.js": "^4.4.0"
+  }
+}

slides/yarn.lock

+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+reveal.js@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/reveal.js/-/reveal.js-4.4.0.tgz#bff589987a842d99bc8f6eb9b2b59f6d9941bf87"
+  integrity sha512-jIV6C9V2NEUjGzU8L6dUFGpk1KJmq7/EzP2fOW67ggc2c0Cp/PdprWxZ9Qgp46F0T2ZWDCjQ1p3Ytzy5jA6a2w==