Merge pull request #245 from NGO-Algorithm-Audit/feature/may-9th

Feature/may 9th

Author: jfparie

assets/scss/_common.scss

@@ -1,3 +1,7 @@
+[id] {
+  scroll-margin-top: 80px;
+}
+
 body {
   background-color: $body-color;
   overflow-x: hidden;

assets/scss/_custom.scss

@@ -33,6 +33,17 @@
 	font-style: normal;
 }
 
+.highlight-potential-sm {
+	border: rgba(255, 255, 255, 0) 0.3rem solid;
+	border-radius: 0.75rem;
+	padding: 0.25rem 0.5rem !important;
+	color: #005aa7;
+	font-style: normal;
+}
+.highlight-red-sm {
+	background-color: rgba(255, 203, 189, 0.5);
+}
+
 .yellow-button {
 	margin-left: 20px;
 	background-color: #005aa7;

assets/scss/templates/_main.scss

@@ -448,7 +448,7 @@ a.post-title {
       padding-left: 20px;
       position: relative;
 
-      &:not(.ms-slider__word)::before {
+      &:not(.ms-slider__word):not(.quick_navigation_li)::before {
         position: absolute;
         content: '';
         height: 8px;
@@ -698,7 +698,7 @@ vertical-align: top;
   padding-top: 5px;
 }
 
-.content ul li:not(.ms-slider__word):before{
+.content ul li:not(.ms-slider__word):not(.quick_navigation_li):before{
   height: 0px;
   width: 0px;
 }

content/english/algoprudence/submit-a-case.md

@@ -8,9 +8,9 @@ subtitle: >
 image: /images/svg-illustrations/case_repository.svg
 form1:
   title: Case information
-  content: ''
+  content: ""
   button_text: Submit
-  backend_link: 'https://formspree.io/f/xzbnrlan'
+  backend_link: "https://formspree.io/f/xzbnrlan"
   id: submit-a-case
   questions:
     - label: |
@@ -61,9 +61,9 @@ form1:
       type: checkbox
 form2:
   title: Case information
-  content: ''
-  button_text: 'Submit '
-  backend_link: 'https://formspree.io/f/xleqlakw'
+  content: ""
+  button_text: "Submit "
+  backend_link: "https://formspree.io/f/xleqlakw"
   id: case-for-repository
   questions:
     - label: Name organisation
@@ -88,7 +88,7 @@ form2:
       file_upload_text: Choose file
       file_type: .pdf
       type: file
-      placeholder: ''
+      placeholder: ""
     - label: >
         Terms and conditions <br> <span style="font-size:12px;
         color=#777;">Submitted data will only be processed for the purpose
@@ -103,7 +103,7 @@ reports_preview:
   button_text: Case repository
   button_link: /algoprudence
   feature_item:
-    - name: 'Risk Profiling Social Welfare Re-examination '
+    - name: "Risk Profiling Social Welfare Re-examination "
       image: /images/algoprudence/AA202302/AA202302A_cover_EN.png
       link: >-
         /algoprudence/cases/aa202302_risk-profiling-for-social-welfare-reexamination/
@@ -122,11 +122,11 @@ quick_navigation:
   title: Content overview
   links:
     - title: Submit a case
-      url: '#case-for-review'
+      url: "#case-for-review_tab_btn"
     - title: Next steps
-      url: '#next-steps'
+      url: "#next-steps"
     - title: Recent cases
-      url: '#case-repository'
+      url: "#case-repository"
 ---
 
 {{< tab_header width="6" tab1_id="case-for-review" default_tab="case-for-review" tab1_title="Submit a case for normative review" tab2_id="case-repository" tab2_title="Add a case to algoprudence repository" >}}
@@ -155,4 +155,4 @@ Your submission is reviewed by Team Algoprudence. The team assesses whether de c
 
 {{< container_close >}}
 
-{{< reports_preview id="case-repository">}}
+{{< reports_preview id="case-repository">}}

content/english/technical-tools/BDT.md

@@ -3,7 +3,7 @@ title: Unsupervised bias detection tool
 subtitle: >
   Local-first tool using statistical analysis to identify groups that may be subject to unfair treatment by algorithms or AI. The tool informs
   the qualitative doctrine of law and ethics which disparities need to be
-  scrutinised manually by domain experts. 
+  scrutinised manually by domain experts.
 image: /images/svg-illustrations/illustration_cases.svg
 reports_preview:
   title: Example output bias detection tool
@@ -56,40 +56,41 @@ quick_navigation:
   title: Content overview
   links:
     - title: Introduction
-      url: '#info'
+      url: "#info"
     - title: Web app
-      url: '#web-app'
+      url: "#web-app"
     - title: Source code
-      url: '#source-code'
+      url: "#source-code"
     - title: Anomaly detection algorithm
-      url: '#HBAC'
+      url: "#HBAC"
     - title: Scientific paper and audit report
-      url: '#scientific-paper'
+      url: "#scientific-paper"
     - title: Local-first computing
-      url: '#local-first'
+      url: "#local-first"
     - title: Supported by
-      url: '#supported-by'
+      url: "#supported-by"
     - title: Awards and acknowledgements
-      url: '#awards-acknowledgements'
+      url: "#awards-acknowledgements"
     - title: Summary
-      url: '#summary'
+      url: "#summary"
     - title: Team
-      url: '#team'
+      url: "#team"
 type: bias-detection-tool
 ---
 
-
 <!-- Introduction -->
 
 {{< container_open title="Introduction – Unsupervised bias detection tool" icon="fas fa-search" id="info" >}}
 
 <br>
 
 #### What is the tool about?
-The tool identifies groups where an algorithm or AI system shows variations in performance. This type of monitoring is referred to as *anomaly detection*. To identify anomalous patterns, the tool uses <a href="https://en.wikipedia.org/wiki/Cluster_analysis" target="_blank">clustering</a>. Clustering is a form of _unsupervised learning_. This means detecting disparate treatment (bias) does not require any data on protected attributes of users, such as gender, nationality, or ethnicity. The metric used to measure bias can be manually selected and is referred to as the `bias metric`.
+
+The tool identifies groups where an algorithm or AI system shows variations in performance. This type of monitoring is referred to as _anomaly detection_. To identify anomalous patterns, the tool uses <a href="https://en.wikipedia.org/wiki/Cluster_analysis" target="_blank">clustering</a>. Clustering is a form of _unsupervised learning_. This means detecting disparate treatment (bias) does not require any data on protected attributes of users, such as gender, nationality, or ethnicity. The metric used to measure bias can be manually selected and is referred to as the `bias metric`.
 
 #### What data can be processed?
-The tool processes all data in table format. The type of data (numerical, categorical, time, etc.) is automatically detected. One column must be selected as the `bias metric` – which should be a numerical value. The user must specify whether a high or low value of the `bias metric` is considered better. For example: for an error rate, a low value is better, while for accuracy, a high value is better. 
+
+The tool processes all data in table format. The type of data (numerical, categorical, time, etc.) is automatically detected. One column must be selected as the `bias metric` – which should be a numerical value. The user must specify whether a high or low value of the `bias metric` is considered better. For example: for an error rate, a low value is better, while for accuracy, a high value is better.
 
 The tool contains a demo data for which output is generated. Hit the 'Try it out' button.
 
@@ -113,6 +114,7 @@ The tool contains a demo data for which output is generated. Hit the 'Try it out
 <br>
 
 #### What does the tool return?
+
 The tool identifies deviating clusters. A summary of the results is made available in a bias analysis report that can be downloaded as a pdf. All identified clusters can be downloaded in a .json file. The tool specifically focuses on the most negatively deviating cluster and provides a description of this cluster. These results serve as a starting point for further investigation by domain experts, who can assess whether the observed disparities are indeed undesirable. The tool also visualizes the outcomes.
 
 #### Overview of process
@@ -122,39 +124,32 @@ The tool identifies deviating clusters. A summary of the results is made availab
 </div>
 
 #### How is my data processed?
-The tool is privacy-friendly because the data is processed entirely within the browser. The data does not leave your computer or the environment of your organization. The tool utilizes the computing power of your own computer to analyze the data. This type of browser-based software is referred to as *local-first*. The tool does not upload data to third parties, such as cloud providers. Instructions on how to host the tool and local-first architecture can be hosted locally within your own organization can be found on <a href="https://github.com/NGO-Algorithm-Audit/local-first-web-tool" target="_blank">Github</a>.
+
+The tool is privacy-friendly because the data is processed entirely within the browser. The data does not leave your computer or the environment of your organization. The tool utilizes the computing power of your own computer to analyze the data. This type of browser-based software is referred to as _local-first_. The tool does not upload data to third parties, such as cloud providers. Instructions on how to host the tool and local-first architecture can be hosted locally within your own organization can be found on <a href="https://github.com/NGO-Algorithm-Audit/local-first-web-tool" target="_blank">Github</a>.
 
 Try the tool below ⬇️
 
 {{< container_close >}}
 
-
-
 <!-- Web app -->
 
-{{< iframe title="Web app – Unsupervised bias detection tool" icon="fas fa-cloud" id="web-app" src="https://local-first-bias-detection.s3.eu-central-1.amazonaws.com/bias-detection.html?lang=en" height="770px" >}} 
-
-
+{{< iframe title="Web app – Unsupervised bias detection tool" icon="fas fa-cloud" id="web-app" src="https://local-first-bias-detection.s3.eu-central-1.amazonaws.com/bias-detection.html?lang=en" height="770px" >}}
 
 <!-- Promo bar -->
 
 {{< promo_bar content="Do you appreciate the work of Algorithm Audit? ⭐️ us on" id="promo" >}}
 
-
-
 <!-- Source code -->
 
 {{< container_open title="Source code" id="source-code" icon="fas fa-toolbox" >}}
 
-- The source code of the anolamy detection-algorithm is available on <a href="https://github.com/NGO-Algorithm-Audit/unsupervised-bias-detection" target="_blank">Github</a> and as a <a href="https://pypi.org/project/unsupervised-bias-detection/" target="_blank">pip package</a>: `pip install unsupervised-bias-detection`. 
-[![!pypi](https://img.shields.io/pypi/v/unsupervised-bias-detection?logo=pypi\&color=blue)](https://pypi.org/project/unsupervised-bias-detection/)
+- The source code of the anolamy detection-algorithm is available on <a href="https://github.com/NGO-Algorithm-Audit/unsupervised-bias-detection" target="_blank">Github</a> and as a <a href="https://pypi.org/project/unsupervised-bias-detection/" target="_blank">pip package</a>: `pip install unsupervised-bias-detection`.
+  [![!pypi](https://img.shields.io/pypi/v/unsupervised-bias-detection?logo=pypi&color=blue)](https://pypi.org/project/unsupervised-bias-detection/)
 
 - The architecture to run web apps local-first is also available on <a href="https://github.com/NGO-Algorithm-Audit/local-first-web-tool" target="_blank">Github</a>.
 
 {{< container_close >}}
 
-
-
 <!-- Anolamy detection algorithm -->
 
 {{< container_open title="Anolamy detection algorithm – Hierarchical Bias-Aware Clustering (HBAC)" icon="fas fa-code-branch" id="HBAC" >}}
@@ -163,8 +158,6 @@ The tool uses the _Hierarchical Bias-Aware Clustering_ (HBAC) algorithm. HBAC pr
 
 {{< container_close >}}
 
-
-
 <!-- Scientific paper and audit report -->
 
 {{< container_open icon="far fa-file" title="Scientific paper and audit report" id="scientific-paper" >}}
@@ -175,15 +168,14 @@ The unsupervised bias detection tool has been applied in practice to audit a Dut
 
 {{< container_close >}}
 
-
-
 <!-- Local-first architecture -->
 
 {{< container_open title="Local-first architecture" icon="fas fa-map-pin" id="local-first" >}}
 
 <br>
 
 #### What is local-first computing?
+
 Local-first computing is the opposite of cloud computing: the data is not uploaded to third-parties, such as a cloud providers, and is processed by your own computer. The data attached to the tool therefore doesn't leave your computer or the environment of your organization. The tool is privacy-friendly because the data can be processed within the mandate of your organisation and doesn't need to be shared with new parties. The unsupervised bias detection tool can also be hosted locally within your organization. Instructions, including the source code or the web app, can be found on <a href="https://github.com/NGO-Algorithm-Audit/local-first-web-tool" target="_blank">Github</a>.
 
 #### Overview of local-first architecture
@@ -194,19 +186,18 @@ Local-first computing is the opposite of cloud computing: the data is not upload
 
 {{< container_close >}}
 
-
-
 <!-- Supported by -->
 
 {{< container_open title="Supported by" icon="fas fa-toolbox" id="supported-by">}}
 
 This tool is developed with support of public and philanthropic organisations.
 
-{{< accordions_area_open>}}
+{{< accordions_area_open id="supported-by-accordion">}}
 
 {{< accordion_item_open title="Innovation grant Dutch Ministry of the Interior" image="/images/supported_by/BZK.jpg" tag1="2024-25" >}}
 
 ##### Description
+
 In partnership with the Dutch Executive Agency for Education and the Dutch Ministry of the Interior, Algorithm Audit has been developing and testing this tool from July 2024 to July 2025, supported by an <a href="https://www.digitaleoverheid.nl/overzicht-van-alle-onderwerpen/innovatie/innovatiebudget/toekenning-innovatiebudget-2024/" target="_blank">Innovation grant</a> from the annual competition hosted by the Dutch Ministry of the Interior. Project progress was shared at a community gathering on 13-02-2025.
 
 ![](/images/events/20250213_Demodag2025.jpg)
@@ -225,19 +216,18 @@ In 2024, the SIDN Fund <a href="https://www.sidnfonds.nl/projecten/open-source-a
 
 {{< container_close >}}
 
-
-
 <!-- Awards and acknowledgements -->
 
 {{< container_open title="Awards and acknowledgements" icon="fas fa-medal" id="awards-acknowledgements">}}
 
 This tool has received awards and is acknowledged by various <a href="https://github.com/NGO-Algorithm-Audit/unsupervised-bias-detection?tab=readme-ov-file#contributing-members" target="_blank">stakeholders</a>, including civil society organisations, industry representatives and academics.
 
-{{< accordions_area_open>}}
+{{< accordions_area_open id="awards-accordion" >}}
 
 {{< accordion_item_open title="Finalist Stanford’s AI Audit Challenge 2023" image="/images/supported_by/HAI.png" tag1="06-2023" >}}
 
 ##### Description
+
 Under the name Joint Fairness Assessment Method (JFAM) the unsupervised bias detection tool has been selected as a finalist in <a href="https://hai.stanford.edu/ai-audit-challenge-2023-finalists" target="_blank">Stanford’s AI Audit Competition 2023</a>.
 
 {{< accordion_item_close >}}
@@ -254,8 +244,6 @@ The unsupervised bias detection tool is part of OECD's <a href="https://oecd.ai/
 
 {{< container_close >}}
 
-
-
 <!-- Summary -->
 
 {{< container_open title="Summary" icon="fas fa-dot-circle" id="summary">}}
@@ -271,8 +259,6 @@ Key take-aways about unsupervised bias detection tool:
 
 {{< container_close >}}
 
-
-
 <!-- Team -->
 
-{{< team id="team" >}}
+{{< team id="team" >}}

content/nederlands/algoprudence/submit-a-case.md

@@ -9,7 +9,7 @@ image: /images/svg-illustrations/case_repository.svg
 form1:
   title: Informatie over de case
   button_text: Verstuur
-  backend_link: 'https://formspree.io/f/xzbnrlan'
+  backend_link: "https://formspree.io/f/xzbnrlan"
   id: submit-a-case
   questions:
     - label: |
@@ -58,9 +58,9 @@ form1:
       type: checkbox
 form2:
   title: Informatie over het oordeel
-  content: ''
+  content: ""
   button_text: Verstuur
-  backend_link: 'https://formspree.io/f/xleqlakw'
+  backend_link: "https://formspree.io/f/xleqlakw"
   id: case-for-repository
   questions:
     - label: Naam organisatie
@@ -115,11 +115,11 @@ quick_navigation:
   title: Inhoudsopgave
   links:
     - title: Dien een case in
-      url: '#case-for-review'
+      url: "#case-for-review_tab_btn"
     - title: Vervolgstappen
-      url: '#next-steps'
+      url: "#next-steps"
     - title: Recente cases
-      url: '#case-repository'
+      url: "#case-repository"
 ---
 
 {{< tab_header width="6" tab1_id="case-for-review" default_tab="case-for-review" tab1_title="Dien een case in voor beoordeling" tab2_id="case-repository" tab2_title="Voeg oordeel toe aan algoprudentie uitspraken" >}}

layouts/partials/head.html

@@ -54,6 +54,7 @@
 
 <!-- page header script -->
 <script src="/js/main.js"></script>
+<script src="/js/quicknavigation.js"></script>
 <!-- /page header script -->
 
 <!-- accordion -->

layouts/partials/header.html

@@ -26,7 +26,10 @@
           {{ range site.Menus.main }}
           {{ if .HasChildren }}
           <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown">
+            <a class="nav-link dropdown-toggle d-none d-xl-block" href="{{ .URL | relURL }}" role="button">
+              {{ .Name }}
+            </a>
+            <a class="nav-link dropdown-toggle d-block d-xl-none" href="{{ .URL | relURL }}" role="button" data-toggle="dropdown" >
               {{ .Name }}
             </a>
             <div class="dropdown-menu shadow-lg" style="padding: 1rem 0.25rem;">