adding about

Website/_quarto.yml

@@ -17,7 +17,7 @@ website:
       - href: index.qmd
         text: Home
       - href: about.qmd
-        text: About me
+        text: About the model
       - href: DISCOV_Examples.qmd
         text: DISCOV Example
 format:

Website/about.qmd

@@ -1,9 +1,49 @@
 ---
-title: "About"
+image: Imgs/BedeSimon.png
+about:
+  image-shape: rectangle
+  image-width: 700px
+  id: hero-heading
+  template: jolla
+  links:
+    - icon: share
+      text: Simon Oiry
+      href: https://simonoiry.com
+    - icon: share
+      text: Bede Davies
+      href: https://bedeffinianrowedavies.com
 ---
+:::{#hero-heading}
+:::
+This work has been done during [Simon Oiry](https://simonoiry.com)'s PhD and the [BiCOME project](https://bicome.info). The project is one of the three studies that form part of the European Space Agency's 'Biodiversity+ Precursors' on [Terrestrial (EO4DIVERSITY)](https://www.eo4diversity.info/), [Freshwater (BIOMONDO)](https://www.biomondo.info/) and Coastal ecosystems (BiCOME).
 
-About this site
+The  **D**rone **I**ntertidal **S**ubstrats **C**lassification **O**f **V**egetation (DISCOV) is a Neural Network classification model designed to classify images of the Micasense RedEdge-MX Dual multispectral drone camera.
 
-```{r}
-1 + 1
-```
+# How this model has been trained ? 
+
+## General Workflow 
+
+<img src="Imgs/Figure3.png" width="100%" align="right"
+title="Classes of the model" style="margin: 10px;">
+
+## Details
+### Training
+<img src="Imgs/Fig1.png" width="40%" align="right"
+title="Classes of the model" style="margin: 10px;">
+
+We chose seven study sites across France and Portugal for their extensive intertidal seagrass beds. In France, two sites are in the Gulf of Morbihan (47.5791°N, 2.8018°W), which spans 115 km² and connects to the sea via a 900 m wide channel. This gulf is dotted with 53 small islands, creating 250 km of shoreline with patchy seagrass meadows. One site is on Arz Island, and the other is on a mainland beach area called Duer.
+
+Another two sites are in Bourgneuf Bay, France (46.9849°N, 2.1488°W), a 340 km² semi-enclosed bay shielded by Noirmoutier Island. This bay features a 6 km² intertidal seagrass meadow. The drone-surveyed sites, L’Epine and Barbatre, have monospecific beds of Nanozostera noltei (dwarf eelgrass) with minimal mixing with other plants.
+
+In Portugal, we studied three sites in the Ria de Aveiro Coastal Lagoon (40.6887°N, 8.6810°W). This 83 km² lagoon has narrow channels, extensive salt marshes, and mudflats exposed at low tide. It connects to the sea through a single channel with a tidal lag between the North and South. The southernmost site, Gafanha, is a mudflat in the Mira channel. The other two sites, Mataducos and Marinha Lanzarote, are in the lagoon's center and only accessible by boat. These sites feature diverse intertidal vegetation, with seagrass patches mixed with red, brown, and green macroalgae.
+
+At each site, we flew a DJI Matrice 200 or 300 drone equipped with a Micasense RedEdge-MX Dual multispectral camera. We conducted low-altitude flights at 12 meters to capture high-resolution data (8 mm per pixel), ensuring precise photointerpretation of the targets.
+
+<img src="Imgs/Figure2.png" width="40%" align="left"
+title="Classes of the model" style="margin: 10px;">
+
+Polygons were created from the photointerpretation of the low-altitude flights, and ground control points were used to extract reflectance data for five key taxonomic classes of intertidal vegetation: Bacillariophyceae (unicellular benthic diatoms forming biofilms at the sediment surface during low tide), Phaeophyceae (brown macroalgae), Magnoliopsida (dwarf eelgrass), Chlorophyceae (green macroalgae), and Rhodophyceae (red macroalgae). 
+
+Photos of each quadrat were uploaded to the Global Biodiversity Information Facility (GBIF) platform [(Davies et al., 2023)](https://www.gbif.org/dataset/7b14790c-8ddf-4709-9596-c938f9d5dc11), which is a public portal for storing and sharing biodiversity data. We processed each photograph with ImageJ [(Schneider et al., 2012)](https://doi.org/10.1038/nmeth.2089) to estimate the percent cover of each vegetation type. We also recorded hyperspectral reflectance signatures for each vegetation class using an ASD FieldSpec HandHeld 2 spectroradiometer. This device captures reflectance between 325 and 1075 nm with a spectral resolution of 1 nm. These hyperspectral signatures were crucial for validating the radiometric calibration of the drone data and reducing errors in photo interpretations.
+
+Using ~ 500.000 pixels, we built a neural network classification model using the fastai workflow [(Howard et al., 2018)](https://www.fast.ai). The model consists of two hidden layers and has a total of 26,054 trainable parameters. We fine-tuned the parameters over 12 epochs to minimize the error rate.

Website/index.qmd

@@ -19,9 +19,6 @@ The  **D**rone **I**ntertidal **S**ubstrats **C**lassification **O**f **V**egeta
 
 This repository complements a scientific paper published by Oiry et al. in The Journal of Photogrammetry and Remote Sensing (Under review).
 
-This paper has been produced during [Simon Oiry](https://oirysimon.com)'s PhD and the [BiCOME project](https://bicome.info). The project is one of the three studies that form part of the European Space Agency's 'Biodiversity+ Precursors' on [Terrestrial (EO4DIVERSITY)](https://www.eo4diversity.info/), [Freshwater (BIOMONDO)](https://www.biomondo.info/) and Coastal ecosystems (BiCOME).
-
-
 <img src="Imgs/Micasense_Dual_MX.png" align="left" width="20%" title="Micasense RedEdge-MX Dual">
 
 <img src="Imgs/Figure2.png" width="40%" align="right"

docs/about.html

@@ -7,7 +7,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
 
 
-<title>About – DISCOV</title>
+<title>about – DISCOV</title>
 <style>
 code{white-space: pre-wrap;}
 span.smallcaps{font-variant: small-caps;}
@@ -20,40 +20,6 @@
   margin: 0 0.8em 0.2em -1em; /* quarto-specific, see https://github.com/quarto-dev/quarto-cli/issues/4556 */ 
   vertical-align: middle;
 }
-/* CSS for syntax highlighting */
-pre > code.sourceCode { white-space: pre; position: relative; }
-pre > code.sourceCode > span { line-height: 1.25; }
-pre > code.sourceCode > span:empty { height: 1.2em; }
-.sourceCode { overflow: visible; }
-code.sourceCode > span { color: inherit; text-decoration: inherit; }
-div.sourceCode { margin: 1em 0; }
-pre.sourceCode { margin: 0; }
-@media screen {
-div.sourceCode { overflow: auto; }
-}
-@media print {
-pre > code.sourceCode { white-space: pre-wrap; }
-pre > code.sourceCode > span { display: inline-block; text-indent: -5em; padding-left: 5em; }
-}
-pre.numberSource code
-  { counter-reset: source-line 0; }
-pre.numberSource code > span
-  { position: relative; left: -4em; counter-increment: source-line; }
-pre.numberSource code > span > a:first-child::before
-  { content: counter(source-line);
-    position: relative; left: -1em; text-align: right; vertical-align: baseline;
-    border: none; display: inline-block;
-    -webkit-touch-callout: none; -webkit-user-select: none;
-    -khtml-user-select: none; -moz-user-select: none;
-    -ms-user-select: none; user-select: none;
-    padding: 0 4px; width: 4em;
-  }
-pre.numberSource { margin-left: 3em;  padding-left: 4px; }
-div.sourceCode
-  {   }
-@media screen {
-pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
-}
 </style>
 
 
@@ -68,7 +34,6 @@
 <script src="site_libs/quarto-html/quarto.js"></script>
 <script src="site_libs/quarto-html/popper.min.js"></script>
 <script src="site_libs/quarto-html/tippy.umd.min.js"></script>
-<script src="site_libs/quarto-html/anchor.min.js"></script>
 <link href="site_libs/quarto-html/tippy.css" rel="stylesheet">
 <link href="site_libs/quarto-html/quarto-syntax-highlighting.css" rel="stylesheet" class="quarto-color-scheme" id="quarto-text-highlighting-styles">
 <link href="site_libs/quarto-html/quarto-syntax-highlighting-dark.css" rel="stylesheet" class="quarto-color-scheme quarto-color-alternate" id="quarto-text-highlighting-styles">
@@ -131,7 +96,7 @@
   </li>  
   <li class="nav-item">
     <a class="nav-link active" href="./about.html" aria-current="page"> 
-<span class="menu-text">About me</span></a>
+<span class="menu-text">About the model</span></a>
   </li>  
   <li class="nav-item">
     <a class="nav-link" href="./DISCOV_Examples.html"> 
@@ -150,41 +115,74 @@
 <div id="quarto-content" class="quarto-container page-columns page-rows-contents page-layout-article page-navbar">
 <!-- sidebar -->
 <!-- margin-sidebar -->
-    <div id="quarto-margin-sidebar" class="sidebar margin-sidebar zindex-bottom">
-
+    <div id="quarto-margin-sidebar" class="sidebar margin-sidebar">
+        <nav id="TOC" role="doc-toc" class="toc-active">
+    <h2 id="toc-title">On this page</h2>
+
+  <ul>
+  <li><a href="#how-this-model-has-been-trained" id="toc-how-this-model-has-been-trained" class="nav-link active" data-scroll-target="#how-this-model-has-been-trained">How this model has been trained ?</a>
+  <ul class="collapse">
+  <li><a href="#general-workflow" id="toc-general-workflow" class="nav-link" data-scroll-target="#general-workflow">General Workflow</a></li>
+  <li><a href="#details" id="toc-details" class="nav-link" data-scroll-target="#details">Details</a>
+  <ul class="collapse">
+  <li><a href="#training" id="toc-training" class="nav-link" data-scroll-target="#training">Training</a></li>
+  </ul></li>
+  </ul></li>
+  </ul>
+</nav>
     </div>
 <!-- main -->
 <main class="content" id="quarto-document-content">
 
-<header id="title-block-header" class="quarto-title-block default">
-<div class="quarto-title">
-<h1 class="title">About</h1>
-</div>
-
 
 
-<div class="quarto-title-meta">
-
-
-
-
-  </div>
-
 
-
-</header>
-
-
-<p>About this site</p>
-<div class="cell">
-<div class="sourceCode cell-code" id="cb1"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="dv">1</span> <span class="sc">+</span> <span class="dv">1</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
-<div class="cell-output cell-output-stdout">
-<pre><code>[1] 2</code></pre>
+<div class="quarto-about-jolla">
+  <img src="Imgs/BedeSimon.png" class="about-image
+  rectangle " style="width: 700px;">
+ <div id="hero-heading">
+</div> 
+  <hr class="about-sep">
+   <div class="about-links">
+  <a href="https://simonoiry.com" class="about-link" rel="" target="">
+    <i class="bi bi-share"></i>
+     <span class="about-link-text">Simon Oiry</span>
+  </a>
+  <a href="https://bedeffinianrowedavies.com" class="about-link" rel="" target="">
+    <i class="bi bi-share"></i>
+     <span class="about-link-text">Bede Davies</span>
+  </a>
 </div>
 </div>
 
+<p>This work has been done during <a href="https://simonoiry.com">Simon Oiry</a>‘s PhD and the <a href="https://bicome.info">BiCOME project</a>. The project is one of the three studies that form part of the European Space Agency’s ’Biodiversity+ Precursors’ on&nbsp;<a href="https://www.eo4diversity.info/">Terrestrial (EO4DIVERSITY)</a>,&nbsp;<a href="https://www.biomondo.info/">Freshwater (BIOMONDO)</a>&nbsp;and Coastal ecosystems (BiCOME).</p>
+<p>The <strong>D</strong>rone <strong>I</strong>ntertidal <strong>S</strong>ubstrats <strong>C</strong>lassification <strong>O</strong>f <strong>V</strong>egetation (DISCOV) is a Neural Network classification model designed to classify images of the Micasense RedEdge-MX Dual multispectral drone camera.</p>
+<section id="how-this-model-has-been-trained" class="level1">
+<h1>How this model has been trained ?</h1>
+<section id="general-workflow" class="level2">
+<h2 data-anchor-id="general-workflow">General Workflow</h2>
+<p><img src="Imgs/Figure3.png" width="100%" align="right" title="Classes of the model" style="margin: 10px;"></p>
+</section>
+<section id="details" class="level2">
+<h2 data-anchor-id="details">Details</h2>
+<section id="training" class="level3">
+<h3 data-anchor-id="training">Training</h3>
+<p><img src="Imgs/Fig1.png" width="40%" align="right" title="Classes of the model" style="margin: 10px;"></p>
+<p>We chose seven study sites across France and Portugal for their extensive intertidal seagrass beds. In France, two sites are in the Gulf of Morbihan (47.5791°N, 2.8018°W), which spans 115 km² and connects to the sea via a 900 m wide channel. This gulf is dotted with 53 small islands, creating 250 km of shoreline with patchy seagrass meadows. One site is on Arz Island, and the other is on a mainland beach area called Duer.</p>
+<p>Another two sites are in Bourgneuf Bay, France (46.9849°N, 2.1488°W), a 340 km² semi-enclosed bay shielded by Noirmoutier Island. This bay features a 6 km² intertidal seagrass meadow. The drone-surveyed sites, L’Epine and Barbatre, have monospecific beds of Nanozostera noltei (dwarf eelgrass) with minimal mixing with other plants.</p>
+<p>In Portugal, we studied three sites in the Ria de Aveiro Coastal Lagoon (40.6887°N, 8.6810°W). This 83 km² lagoon has narrow channels, extensive salt marshes, and mudflats exposed at low tide. It connects to the sea through a single channel with a tidal lag between the North and South. The southernmost site, Gafanha, is a mudflat in the Mira channel. The other two sites, Mataducos and Marinha Lanzarote, are in the lagoon’s center and only accessible by boat. These sites feature diverse intertidal vegetation, with seagrass patches mixed with red, brown, and green macroalgae.</p>
+<p>At each site, we flew a DJI Matrice 200 or 300 drone equipped with a Micasense RedEdge-MX Dual multispectral camera. We conducted low-altitude flights at 12 meters to capture high-resolution data (8 mm per pixel), ensuring precise photointerpretation of the targets.</p>
+<p><img src="Imgs/Figure2.png" width="40%" align="left" title="Classes of the model" style="margin: 10px;"></p>
+<p>Polygons were created from the photointerpretation of the low-altitude flights, and ground control points were used to extract reflectance data for five key taxonomic classes of intertidal vegetation: Bacillariophyceae (unicellular benthic diatoms forming biofilms at the sediment surface during low tide), Phaeophyceae (brown macroalgae), Magnoliopsida (dwarf eelgrass), Chlorophyceae (green macroalgae), and Rhodophyceae (red macroalgae).</p>
+<p>Photos of each quadrat were uploaded to the Global Biodiversity Information Facility (GBIF) platform <a href="https://www.gbif.org/dataset/7b14790c-8ddf-4709-9596-c938f9d5dc11">(Davies et al., 2023)</a>, which is a public portal for storing and sharing biodiversity data. We processed each photograph with ImageJ <a href="https://doi.org/10.1038/nmeth.2089">(Schneider et al., 2012)</a> to estimate the percent cover of each vegetation type. We also recorded hyperspectral reflectance signatures for each vegetation class using an ASD FieldSpec HandHeld 2 spectroradiometer. This device captures reflectance between 325 and 1075 nm with a spectral resolution of 1 nm. These hyperspectral signatures were crucial for validating the radiometric calibration of the drone data and reducing errors in photo interpretations.</p>
+<p>Using ~ 500.000 pixels, we built a neural network classification model using the fastai workflow <a href="https://www.fast.ai">(Howard et al., 2018)</a>. The model consists of two hidden layers and has a total of 26,054 trainable parameters. We fine-tuned the parameters over 12 epochs to minimize the error rate.</p>
 
 
+
+</section>
+</section>
+</section>
+
 </main> <!-- /main -->
 <script id="quarto-html-after-body" type="application/javascript">
 window.document.addEventListener("DOMContentLoaded", function (event) {
@@ -350,13 +348,6 @@ <h1 class="title">About</h1>
   } else {
     toggleColorMode(false);
   }
-  const icon = "";
-  const anchorJS = new window.AnchorJS();
-  anchorJS.options = {
-    placement: 'right',
-    icon: icon
-  };
-  anchorJS.add('.anchored');
   const isCodeAnnotation = (el) => {
     for (const clz of el.classList) {
       if (clz.startsWith('code-annotation-')) {