images and thumbnail

yp-edu · Jan 11, 2024 · bc52f68 · bc52f68
1 parent 4be61ea
commit bc52f68
Show file tree

Hide file tree

Showing 11 changed files with 91 additions and 33 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,3 +3,5 @@ _site
 .jekyll-cache
 .jekyll-metadata
 vendor
+
+pages/**/*.png
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -4,7 +4,6 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-
 {% seo %}
     <link rel="stylesheet" href="{{ "/assets/css/style.css?v=" | append: site.github.version | relative_url }}">
     <!--[if lt IE 9]>

diff --git a/_layouts/listing.html b/_layouts/listing.html
@@ -27,9 +27,16 @@ <h1>{{ title }} <a href="/{{ title | downcase}}/feed.xml"><i class="fa-solid fa-
         <small>{{ item.publishedOn | date: "%-d %B %Y" }}</small>
         {% endif %}
         <h3><a href="{{ item.url }}">{{ item.title }}</a></h3>
-        {% if item.tldr %}
-          <p class="tldr"><small>{{ item.tldr}}</small></p>
-        {% endif %}
+        <div class="thumbnail">
+          {% if item.image %}
+            <a href="{{ item.url }}"><img src="/assets/images/{{ item.image }}" alt="{{ item.title }}" class="thumbnail" /></a>
+          {% endif %}
+          {% if item.tldr %}
+            <p class="tldr">
+              <small>{{ item.tldr}}</small>
+            </p>
+          {% endif %}
+        </div>
     {% endif %}
   {% endfor %}
 {% endif %}

diff --git a/_plugins/custom-mark.rb b/_plugins/custom-mark.rb
@@ -76,6 +76,9 @@ def convert(content)
       end
       #parsed_html = parsed_html.gsub(/<h([1-6])\sid="([a-z]|\-)*">/, '<h\1>')
       parsed_html = parsed_html.gsub(/<h2(\sid="([a-z]|\-)*")?>(\s*.*)<\/h2>/, '<h2\1># \3</h2>')
+
+      parsed_html = parsed_html.gsub(/<img(.*)\ssrc="\.(.*)\/((?:(?!\/).)*)"(.*)/, '<img\1 src="/assets/images/\3"\4')
+      parsed_html = parsed_html.gsub(/<img(.*)\ssrc="((?:(?!\/).)*)"(.*)/, '<img\1 src="/assets/images/\2"\3')
       parsed_html
     end
   end

diff --git a/_sass/blockquotes.scss b/_sass/blockquotes.scss
@@ -5,7 +5,7 @@ blockquote {
   padding: 0.5rem 1rem;
 }
 
-blockquote em {
+blockquote .callout-title em {
   font-style: normal;
   font-weight: 950;
   font-size: 16px;

diff --git a/_sass/custom-theme.scss b/_sass/custom-theme.scss
@@ -18,6 +18,25 @@ body {
   padding-right: 2rem;
   text-rendering: geometricPrecision;
 }
+img{
+  max-width: 100%;
+}
+img.thumbnail{
+  max-width: 120px;
+  margin:-10px 0 0px 0;
+}
+.im-center img{
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 100%;
+}
+div.thumbnail{
+  display: flex;
+  flex-direction: row;
+  align-items: end;
+  gap: 10px;
+}
 
 header {
   display: flex;
@@ -119,6 +138,14 @@ a {
   border-bottom: 1px solid #c07c7310;
 }
 
+a:has(> img) {
+  border-bottom: none;
+  margin:0px 0 20px 0;
+}
+a:has(> img):hover {
+  border-bottom: none;
+}
+
 strong {
   color: #2bbc8a;
 }
@@ -151,13 +178,6 @@ small a:hover {
   margin:0 auto;
 }
 
-blockquote {
-  border-left:1px solid #e5e5e5;
-  margin:0;
-  padding:0 0 0 20px;
-  font-style:italic;
-}
-
 details > summary {
   list-style: none;
 }

diff --git a/_sass/gist.scss b/_sass/gist.scss
@@ -18,12 +18,13 @@ body .gist .pl-pdb {
 body .gist .pl-c,
 body .gist .pl-c span,
 body .gist .pl-pdc {
-     color: #bc9458;
+     color: #e0d1bb;
      font-style: italic;
 }
 body .gist .pl-c1,
 body .gist .pl-pdc1,
-body .gist .pl-scp {
+body .gist .pl-scp, 
+body .gist .pl-s {
      color: #6c99bb;
 }
 body .gist .pl-ent,
@@ -52,7 +53,7 @@ body .gist .pl-pdi {
 body .gist .pl-sra,
 body .gist .pl-src,
 body .gist .pl-sre {
-     color: #cc3;
+     color: rgb(247, 247, 54);
 }
 body .gist .pl-mdht,
 body .gist .pl-mi1 {
@@ -61,7 +62,7 @@ body .gist .pl-mi1 {
 }
 body .gist .pl-md,
 body .gist .pl-mdhf {
-     color: #b83426;
+     color: #b86826;
      background: rgba(64, 0, 0, .5);
 }
 body .gist .pl-ib,
@@ -79,9 +80,6 @@ body .gist .pl-cn,
 body .gist .pl-coc,
 body .gist .pl-enc,
 body .gist .pl-ens,
-body .gist .pl-k,
-body .gist .pl-kos,
-body .gist .pl-kou,
 body .gist .pl-mh .pl-pdh,
 body .gist .pl-mp,
 body .gist .pl-mp .pl-s3,
@@ -91,7 +89,6 @@ body .gist .pl-mri,
 body .gist .pl-pde,
 body .gist .pl-pse,
 body .gist .pl-pse .pl-s2,
-body .gist .pl-s,
 body .gist .pl-st,
 body .gist .pl-stp,
 body .gist .pl-sv,
@@ -101,7 +98,12 @@ body .gist .pl-vi,
 body .gist .pl-vpf,
 body .gist .pl-vpu,
 body .gist .pl-mdr {
-     color: #cc7833;
+     color: #33adcc;
+}
+body .gist .pl-k,
+body .gist .pl-kos,
+body .gist .pl-kou {
+    color: rgb(204, 92, 204);
 }
 body .gist .pl-cos,
 body .gist .pl-ml,
@@ -110,7 +112,7 @@ body .gist .pl-s1,
 body .gist .pl-sol,
 body .gist .pl-mb,
 body .gist .pl-pdb {
-     color: #a5c261;
+     color: rgb(213, 226, 142);
 }
 body .gist .pl-e,
 body .gist .pl-en,
@@ -122,7 +124,7 @@ body .gist .pl-smi,
 body .gist .pl-smp,
 body .gist .pl-mdh,
 body .gist .pl-mdi {
-     color: #ffc66d;
+     color: #97405a;
 }
 body .gist .pl-ef,
 body .gist .pl-enf,
@@ -139,7 +141,7 @@ body .gist .pl-smc,
 body .gist .pl-som,
 body .gist .pl-sr,
 body .gist .pl-enti {
-     color: #b83426;
+     color: #5e26b8;
 }
 
 body .gist .gist-file {

diff --git a/assets/images/lrp_bias_relevance.png b/assets/images/lrp_bias_relevance.png
diff --git a/assets/images/lrp_main_image.png b/assets/images/lrp_main_image.png
diff --git a/pages/_drafts/layer-wise-relevance-propagation.md b/pages/_drafts/layer-wise-relevance-propagation.md
@@ -1,20 +1,25 @@
 ---
 title: Layer-Wise Relevance Propagation
-tldr: 
-tags: 
+tldr: LRP is a method that produces pixel relevances for a given output which doesn't to be terminal. Technically the computation happens using a single back-progation pass.
+tags:
+  - XAI
 references: 
 aliases: 
 crossposts: 
 publishedOn: 
 editedOn: 
 authors:
   - "[[Yoann Poupart]]"
-readingTime:
+readingTime: 
+image: /assets/images/lrp_main_image.png
+description: The description
 ---
 > [!caution] WIP
 > 
 > This article is a work in progress.
 
+![post image](lrp_main_image.png)
+
 > [!tldr] TL;DR
 > 
 > LRP is a method that produces pixel relevances for a given output which doesn't to be terminal. Technically the computation happens using a single back-progation pass. 
@@ -28,6 +33,7 @@ readingTime:
 > - [Classification Example](#classification-example)
 > 	- [Network Decomposition](#network-decomposition)
 > 	- [Interpretation](#interpretation)
+> - [Resources](#resources)
 
 ## LRP Framework
 
@@ -51,16 +57,32 @@ $$
 
 ### Game
 
-{% gist fd8ff108d39b0fdd09cb49e6809d2c54 %}
-
+<script src="https://gist.github.com/Xmaster6y/fd8ff108d39b0fdd09cb49e6809d2c54.js"></script>
 ### Network Decomposition
 
-<script src="https://gist.github.com/Xmaster6y/fd8ff108d39b0fdd09cb49e6809d2c54.js"></script>
+In order 
+
+
+
 
 ### Interpretation
 
+
+![bias_relevance](lrp_bias_relevance.png)
+{: .im-center}
+
+## Resources
+
+A drafty notebook that self-contains all the practical experiments presented here and more is available on Colab: [![Open In Colab](https://colab.research.google.com/assets/colab-badge.svg)](https://colab.research.google.com/drive/1ozMKtcRS9nRtvUfwZwj00ZZNpui5MhLr?usp=sharing). And bellow is a list of references containing the papers and code used in this post as well as additional resources.
+
+- [@7](#resources) extends LRP to discover concepts.
+
 > [!quote] References
 > 
-> 1. Bach, Sebastian, et al. "On Pixel-Wise Explanations for Non-Linear Classifier Decisions by Layer-Wise Relevance Propagation." _PLOS ONE_, vol. 10, no. 7, 2015, p. e0130140, https://doi.org/10.1371/journal.pone.0130140.
-> 2. Sixt, Leon, and Tim Landgraf. "A Rigorous Study Of The Deep Taylor Decomposition." _ArXiv_, 2022, /abs/2211.08425.
-> 3. Binder, Alexander, et al. "Layer-wise Relevance Propagation for Neural Networks with Local Renormalization Layers." _ArXiv_, 2016, /abs/1604.00825.
+> 1. Bach, Sebastian, et al. "On Pixel-Wise Explanations for Non-Linear Classifier Decisions by Layer-Wise Relevance Propagation." _PLOS ONE_, vol. 10, no. 7, 2015.
+> 2. Sixt, Leon, and Tim Landgraf. "A Rigorous Study Of The Deep Taylor Decomposition." _ArXiv_, 2022.
+> 3. Binder, Alexander, et al. "Layer-wise Relevance Propagation for Neural Networks with Local Renormalization Layers." _ArXiv_, 2016.
+> 4. Lapuschkin, Sebastian, et al. "Unmasking Clever Hans Predictors and Assessing What Machines Really Learn." _Nature Communications_, vol. 10, no. 1, 2019.
+> 5. Thakoor, Shantanu, et al. "Learning to play othello without human knowledge." _Stanford University_, 2016.
+> 6. Anders, Christopher J., et al. "Software for Dataset-wide XAI: From Local Explanations to Global Insights with Zennit, CoRelAy, and ViRelAy." _ArXiv_, 2021.
+> 7. Achtibat, Reduan, et al. "From Attribution Maps to Human-understandable Explanations through Concept Relevance Propagation." _Nature Machine Intelligence_, vol. 5, no. 9, 2023.
diff --git a/pages/_tags/xai.md b/pages/_tags/xai.md
@@ -0,0 +1,3 @@
+---
+title: Explainable AI
+---