ML-KULeuven · Bachi72 · Mar 25, 2024 · Mar 25, 2024 · Mar 25, 2024
diff --git a/assets/media/RL-monkey.png b/assets/media/RL-monkey.png
diff --git a/assets/media/dseparation.png b/assets/media/dseparation.png
diff --git a/demos/6. Bayesian Networks/D-separationguide/D-separation guide.rar b/demos/6. Bayesian Networks/D-separationguide/D-separation guide.rar
diff --git a/demos/6. Bayesian Networks/D-separationguide/dsepar_index.html b/demos/6. Bayesian Networks/D-separationguide/dsepar_index.html
@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<html lang="en">
+<!-- fix different link-->
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>[AI] Conditional Indepence</title>
+ <link rel="stylesheet" href="dsepar_styles.css">
+</head>
+<body>
+ <header>
+ <div class="container_header">
+ <h1>Artificial Intelligence [HO6U1a]</h1>
+ </div>
+ </header>
+
+ <article>
+ <div class="container">
+ <h1>Bayesian Networks: Conditional Independence</h1>
+ <p>
+ During the lectures on Bayesian networks, you were already introduced to the concept of conditional (in)dependence.
+ To visualize this, we can use the program Bayes Server. 
+ Follow <a href="https://online.bayesserver.com/" target=”_blank”>this link</a> to navigate to the online application.
+ If you prefer an offline version, you can download it <a href="https://www.bayesserver.com" target="_blank">here</a>.
+ </p>
+ When you start up the Bayes Server, you see all kinds of predefined networks. 
+ Note that you can also create your own network. For now, however, it suffices to open an existing network.
+ Now we will first illustrate some examples of conditional independence with the <strong>Asia</strong> network.
+ </p>
+ <div class="container-image"> 
+ <img id="homescreen" src="images/bs_homescreen.png" alt="Bayes Server Home Screen">
+ </div>
+ <br />
+ <p>
+ As you can see, the network has eight different variables, each with their own probabilities as shown in the bar graphs.
+ At the top, you can click on analyze and then D-Separation &rarr; D-Separation Display. 
+ </p>
+ <div class="container-image"> 
+ <img id="d-separation" src="images/bs_d-separation.png" alt="Bayes Server D-Separation">
+ </div>
+ <br /> 
+ <p>
+ At that point a window appears where you can select the variable that will serve as the source node. 
+ The D-separation algorithm will try to find a path from this node to all the others.
+ Is there an unblocked path to a node? If so, it colors green. Otherwise, it colors red.
+ A green node and a red node are respectively conditionally dependent and conditionally independent of the selected source node.
+ Now we can play around a bit by clicking on the bar graphs in the nodes.
+ When clicked on, these nodes become evidence. 
+ This allows us to see which nodes become / no longer are reachable when an intermediate node becomes evidence. 
+ </p>
+
+ <div class="blue-background">
+ <p>Now think back to the lectures. There are a total of four scenarios in which a path is blocked: </p>
+ <div class="grid-container">
+
+ <div class="grid-item">
+ <p>When the intermediate node is <u>no</u> evidence and the pattern forms a <strong>collider</strong> (both A and B point to C). </p>
+ <img id="blokpad" src="images/blokpad4.png" alt="Bayes Server D-Separation">
+ </div>
+
+ <div class="grid-item">
+ <p>When the intermediate node is evidence and the pattern forms a <strong>fork</strong> (C points to A and B).</p>
+ <img id="blokpad" src="images/blokpad1.png" alt="Bayes Server D-Separation">
+ </div>
+
+ <div class="grid-item">
+ <p>When the intermediate node is evidence and the pattern forms a <strong>chain</strong> (A points to C and C points to B).</p>
+ <img id="blokpad" src="images/blokpad2.png" alt="Bayes Server D-Separation">
+ </div>
+
+ <div class="grid-item">
+ <p>When the intermediate node is evidence and the pattern forms a <strong>chain</strong> (B points to C and C points to A).</p>
+ <img id="blokpad" src="images/blokpad3.png" alt="Bayes Server D-Separation">
+ </div>
+
+ </div>
+ </div>
+ <br />
+ <p>
+ <strong>Practice for yourself:</strong> 
+ <br />
+ <ol>
+ <li>
+ Try reproducing the four scenarios in the opened Asia network. 
+ Before you click the "D-Separation Display" button, try to imagine which nodes will turn green and which will turn red.
+ Do your expectations match the results? 
+ </li>
+ <li>
+ How does the result change if you select multiple nodes as source nodes? 
+ </li>
+ </ol>
+ </p>
+ <br />
+ <p>
+ A possible example of a <strong>collider</strong> in the Asia network is the following: 
+ Choose <i>Has Lung Cancer</i> as source node.
+ Remember that in the case of a blocked path with a collider, the intermediate node should not be a evidence.
+ With <i>Tuberculosis Or Cancer</i> as an intermediate node, we see that the path to <i>Has Tuberculosis</i> is blocked.
+ </p>
+ <div class="container-image"> 
+ <img id="example" src="images/colliderexample.png">
+ </div>
+ <br />
+ <p>
+ A possible example of a <strong>fork</strong> in the Asia network is the following: 
+ Choose <i>Has Lung Cancer</i> as source node. 
+ Then choose <i>Smoker</i> as evidence by clicking on the bar graph.
+ Next, you see that the previously accessible node <i>Has Bronchitis</i> is now no longer accessible.
+ </p>
+ <div class="container-image"> 
+ <img id="example" src="images/examplefork.png">
+ </div>
+ <br />
+ <p>
+ A possible example of a <strong>chain</strong> in the Asia network is the following: 
+ Choose <i>Visit to Asia</i> as source node.
+ Then choose <i>Has Tuberculosis</i> as evidence by clicking on the bar graph.
+ Next, you see that the previously accessible node <i>Tuberculosis or Cancer</i> is now no longer accessible.
+ </p>
+ <div class="container-image"> 
+ <img id="example" src="images/examplechain.png">
+ </div>
+ <br />
+ <p>
+ Finally, we look at what happens when we select multiple nodes as source nodes: 
+ We choose <i>Visit to Asia</i> and <i>Smoker</i> as source nodes. 
+ Then pick <i>Has Tuberculosis</i> as evidence by clicking on the bar graph.
+ Now take a look at <i>Tuberculosis or Cancer</i>.
+ There is a blocked path from <i>Visit to Asia</i> to <i>Tuberculosis or Cancer</i> but because the path from <i>Smoker</i> to <i>Tuberculosis or Cancer</i > is not blocked, this node is still conditionally dependent.
+ So if there is an unblocked path from <u>one of the</u> source nodes to a node, then that node is considered conditionally dependent on the source nodes.
+ </p>
+ <div class="container-image"> 
+ <img id="example" src="images/examplemoresources.png">
+ </div>
+ <br />
+ <p>
+ Don't hesitate to experiment with other networks yourself.
+ Try to find examples of the four scenarios in other networks.
+ This way, your understanding of conditional independence can only increase.
+ </p>
+
+ </div>
+ </article>
+
+ <footer>
+ <div class="container">
+ </div>
+ </footer>
+</body>
+</html>
diff --git a/demos/6. Bayesian Networks/D-separationguide/dsepar_styles.css b/demos/6. Bayesian Networks/D-separationguide/dsepar_styles.css
@@ -0,0 +1,117 @@
+body 
+{
+ font-family: Arial, sans-serif;
+ margin: 0;
+ padding: 0;
+ background-color: #52BDEC;
+}
+
+.container_header 
+{
+ max-width: 900px;
+ margin: 0 auto;
+ padding: 0 20px;
+ background-color: #fdfafa;
+}
+
+.container 
+{
+ max-width: 900px;
+ margin: 0 auto;
+ padding: 0 20px;
+
+}
+
+.header 
+{
+ padding: 60px;
+ text-align: center;
+ background-color: #1f91c2;
+ color: rgb(209, 192, 192);
+ font-size: 30px;
+ }
+
+article 
+{
+ background-color: #fdfafa;
+ border-radius: 5px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ padding: 30px;
+ margin: 20px 0;
+}
+
+article h2 
+{
+ color: #333;
+}
+
+footer 
+{
+ background-color: #52BDEC;
+ color: #fff;
+ padding: 20px 0;
+ text-align: center;
+}
+
+#homescreen 
+{
+ width: 100%;
+ height: auto;
+ display: block;
+ box-shadow: 10px 10px rgb(105, 118, 122);
+}
+
+#d-separation 
+{
+ width: 100%;
+ height: auto;
+ display: block;
+ box-shadow: 10px 10px rgb(105, 118, 122);
+}
+
+.blue-background 
+{
+ background-color: #abd8e6;
+ color: black; /* Set the text color to black so it's readable on the blue background */
+ padding: 10px; /* Add some padding so the text isn't right up against the edge of the box */
+}
+
+.grid-container {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr); /* This creates a 2-column grid */
+ gap: 20px; /* This adds some space between the grid items */
+ /* This sets the background color of the grid container to blue */
+ color: black; /* This sets the text color to white so it's readable on the blue background */
+ padding: 10px; /* This adds some padding around the grid items */
+}
+
+.grid-item {
+ display: flex;
+ flex-direction: row;
+ align-items: center; /* This will vertically center the text and image */
+ justify-content: center; /* This will horizontally center the text and image */
+}
+
+.grid-item img {
+ width: 100%;
+ height: auto;
+ margin-left: 10px; /* This adds some space to the left of the image */
+}
+
+#blokpad
+{
+ width: 30%;
+ height: auto;
+ display: block;
+ box-shadow: 10px 10px rgb(105, 118, 122);
+}
+
+#example
+{
+ width: 70%;
+ height: auto;
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ box-shadow: 10px 10px rgb(105, 118, 122);
+}
diff --git a/demos/6. Bayesian Networks/D-separationguide/images/blokpad1.png b/demos/6. Bayesian Networks/D-separationguide/images/blokpad1.png
diff --git a/demos/6. Bayesian Networks/D-separationguide/images/blokpad2.png b/demos/6. Bayesian Networks/D-separationguide/images/blokpad2.png
diff --git a/demos/6. Bayesian Networks/D-separationguide/images/blokpad3.png b/demos/6. Bayesian Networks/D-separationguide/images/blokpad3.png
diff --git a/demos/6. Bayesian Networks/D-separationguide/images/blokpad4.png b/demos/6. Bayesian Networks/D-separationguide/images/blokpad4.png
diff --git a/demos/6. Bayesian Networks/D-separationguide/images/bs_d-separation.png b/demos/6. Bayesian Networks/D-separationguide/images/bs_d-separation.png
diff --git a/demos/6. Bayesian Networks/D-separationguide/images/bs_homescreen.png b/demos/6. Bayesian Networks/D-separationguide/images/bs_homescreen.png
diff --git a/demos/6. Bayesian Networks/D-separationguide/images/colliderexample.png b/demos/6. Bayesian Networks/D-separationguide/images/colliderexample.png
diff --git a/demos/6. Bayesian Networks/D-separationguide/images/examplechain.png b/demos/6. Bayesian Networks/D-separationguide/images/examplechain.png
diff --git a/demos/6. Bayesian Networks/D-separationguide/images/examplefork.png b/demos/6. Bayesian Networks/D-separationguide/images/examplefork.png
diff --git a/demos/6. Bayesian Networks/D-separationguide/images/examplemoresources.png b/demos/6. Bayesian Networks/D-separationguide/images/examplemoresources.png
diff --git a/index.html b/index.html
@@ -435,6 +435,9 @@ <h2 class="display-5">4. Automated Reasoning</h2>
  <button class="accordion-button collapsed" id="v-pills-4a-tab"
  data-bs-toggle="collapse" data-bs-target="#v-pills-4a"
  aria-controls="v-pills-4a">CPMpy</button>
+ <button class="accordion-button collapsed" id="v-pills-4b-tab"
+ data-bs-toggle="collapse" data-bs-target="#v-pills-4b"
+ aria-controls="v-pills-4b">QED: a formal logic game</button>
 <!-- <button class="accordion-button collapsed" id="v-pills-4b-tab"-->
 <!-- data-bs-toggle="collapse" data-bs-target="#v-pills-4b"-->
 <!-- aria-controls="v-pills-4b">Z3 SAT Solver</button>-->
@@ -456,6 +459,18 @@ <h2 class="display-5">4. Automated Reasoning</h2>
  style="margin-top: 2rem;" target="_blank" rel="noopener noreferrer">Open
  CPMpy Jupyter Lab</a>
  </div>
+ <div class="col-lg-8 showcase-text tab-content">
+ <div class="accordion-collapse collapse collapse-fade" id="v-pills-4b"
+ data-bs-parent="#group-4">
+ <img src="assets/media/github.png" class="img-fluid img-showcase img-logo"
+ alt="Github-logo">
+ <p class="lead">QED is an online game that you can use to refresh your knowledge on formal logic.</p>
+ <p class="lead">Starting from a set of known statements, it is your job to deduce the asked logical formula by combining those you have deduced already.</p>
+ <a class="btn btn-primary"
+ href="https://teorth.github.io/QED/"
+ style="margin-top: 2rem;" target="_blank" rel="noopener noreferrer">Open
+ Github</a>
+ </div>
 <!-- <div class="accordion-collapse collapse collapse-fade" id="v-pills-4b"-->
 <!-- data-bs-parent="#group-4">-->
 <!-- <img src="assets/media/collab.svg" class="img-fluid img-showcase img-logo"-->
@@ -548,6 +563,9 @@ <h2 class="display-5">6. Bayesian Networks</h2>
  <button class="accordion-button collapsed" id="v-pills-6c-tab"
  data-bs-toggle="collapse" data-bs-target="#v-pills-6c"
  aria-controls="v-pills-6c">Hidden Markov Model</button>
+ <button class="accordion-button collapsed" id="v-pills-6d-tab"
+ data-bs-toggle="collapse" data-bs-target="#v-pills-6d"
+ aria-controls="v-pills-6d">D-Separation</button>
  </div>
  <div class="col-lg-8 showcase-text tab-content">
  <div class="accordion-collapse collapse collapse-fade" id="v-pills-6a"
@@ -599,6 +617,19 @@ <h2 class="display-5">6. Bayesian Networks</h2>
  style="margin-top: 2rem;" target="_blank" rel="noopener noreferrer">Open
  Jupyter Notebook</a>
  </div>
+ <div class="accordion-collapse collapse collapse-fade" id="v-pills-6d"
+ data-bs-parent="#group-6">
+ <img src="assets/media/dseparation.png" class="img-fluid rounded img-showcase">
+ <p class="lead">D-separation is a criterion in Bayesian networks indicating conditional
+ independence between sets of variables given observed variables in a directed acyclic graph.</p>
+ <p class="lead">This website guides you through the use of Bayes Server and more specifically how
+ to visualize the concepts of D-Separation while using it.</p>
+ <a class="btn btn-primary"
+ href="demos/6. Bayesian Networks/D-separationguide/dsepar_index.html"
+ style="margin-top: 2rem;" target="_blank" rel="noopener noreferrer">Open
+ the guide</a>
+ </div>
+
  </div>
  </div>
  </div>
@@ -688,6 +719,9 @@ <h2 class="display-5">8. Markov Decision Processes</h2>
  <button class="accordion-button collapsed" id="v-pills-8b-tab"
  data-bs-toggle="collapse" data-bs-target="#v-pills-8b"
  aria-controls="v-pills-8b">GridWorld: Dynamic Programming</button>
+ <button class="accordion-button collapsed" id="v-pills-8c-tab"
+ data-bs-toggle="collapse" data-bs-target="#v-pills-8c"
+ aria-controls="v-pills-8c">Reinforcement Learning</button>
  </div>
  <div class="col-lg-8 showcase-text tab-content">
  <div class="accordion-collapse collapse collapse-fade" id="v-pills-8a"
@@ -727,6 +761,22 @@ <h2 class="display-5">8. Markov Decision Processes</h2>
  Open GridWorld demo
  </a>
  </div>
+ <div class="accordion-collapse collapse collapse-fade" id="v-pills-8c"
+ data-bs-parent="#group-8">
+ <img src="assets/media/RL-monkey.png" alt="RL monkey demo"
+ class="img-fluid rounded img-showcase">
+ <p class="lead">Markov Decision Processes are foundational models used in reinforcement learning.</p>
+ <p class="lead">Reinforcement learning involves an agent learning to make decisions by interacting with an environment, 
+ receiving feedback through rewards or penalties based on its actions. 
+ The agent's objective is to maximize its cumulative reward over time, guided by a reward function that quantifies the desirability of outcomes.
+ Additionally, a utility function is used to assess the overall desirability of different states or outcomes, 
+ aiding the agent in selecting actions that optimize its long-term goals.</p>
+ <a class="btn btn-primary"
+ href="https://developmentalsystems.org/Interactive_DeepRL_Demo/"
+ style="margin-top: 2rem;" target="_blank" rel="noopener noreferrer">
+ Open RL Demo
+ </a>
+ </div>
  </div>
  </div>
  </div>