<link>https://celine-fouard.fr/</link></image><item><title>Retrieving similar cases for clinical decision support in the context of revascularization of lower limbs</h1> <article> <h1>Retrieving similar cases for clinical decision support in the context of revascularization of lower limbs</h1> <p>Mon, 01 Sep 2025 00:00:00 +0000</p> </article> <article> <h1>New Method CMR-Guided Endomyocardial Biopsy in Suspicion Context of Isolated Cardiac Sarcoidosis</h1> <p>Sun, 01 Sep 2024 00:00:00 +0000</p> </article> <article> <h1>⚡️ Turn Jupyter Notebooks into Blog Posts</h1> <p>Mon, 15 Jul 2024 00:00:00 +0000</p> <p>As a researcher or data scientist, your work often lives in Jupyter Notebooks. But sharing those insights effectively usually means taking screenshots, messy copy-pasting, or exporting to PDF.</p> <p>Hugo Blox changes that. With the <code>{{< notebook >}}</code> shortcode, you can render your actual <code>.ipynb</code> files directly as beautiful, interactive blog posts or project pages. Keep your code, outputs, and narrative in one place.</p> <details class="print:hidden xl:hidden" open> <summary>Table of Contents</summary> <div class="text-sm"> <nav id="TableOfContents"> <ul> <li><a href="#why-publish-notebooks">Why publish notebooks?</a></li> <li><a href="#example-data-science-workflow">Example: Data Science Workflow</a></li> <li><a href="#how-to-add-a-notebook">How to add a notebook</a></li> <li><a href="#next-steps">Next steps</a></li> </ul> </nav> </div> </details> <h2 id="why-publish-notebooks">Why publish notebooks?</h2> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-emerald-100 dark:bg-emerald-900 border-emerald-500" data-callout="tip" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-emerald-600 dark:text-emerald-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 18v-5.25m0 0a6 6 0 0 0 1.5-.189m-1.5.189a6 6 0 0 1-1.5-.189m3.75 7.478a12.1 12.1 0 0 1-4.5 0m3.75 2.383a14.4 14.4 0 0 1-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 1 0-7.517 0c.85.493 1.509 1.333 1.509 2.316V18"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1">Tip</div> <div class="callout-body"><p><strong>Reproducible Research</strong>: By publishing the actual notebook, you allow others to download and run your code, verifying your results and building upon your work.</p></div> </div> </div> <ul> <li><strong>No more screenshots</strong> – Render crisp code and vector plots directly from your source.</li> <li><strong>Theme consistent</strong> – Notebooks automatically adapt to your site’s theme (including dark mode).</li> <li><strong>Flexible sourcing</strong> – Display notebooks from your <code>assets/</code> folder, page bundles, or even directly from a remote GitHub URL.</li> <li><strong>Interactive</strong> – Users can copy code blocks or download the full notebook to run locally.</li> </ul> <h2 id="example-data-science-workflow">Example: Data Science Workflow</h2> <p>Below is a live example of a notebook rendered right here in this post. Notice how the markdown, code, and outputs (text, HTML, and JSON) are all preserved and styled.</p> <div id="hb-notebook-e650bf30c48d00c38130d5095bdf12b6" class="hb-notebook not-prose" data-hb-component="notebook" aria-label="Notebook Launch Readiness Analysis" style="--hb-notebook-output-max-height:26rem;"> <div class="hb-notebook-header"> <div class="hb-notebook-heading"> <p class="hb-notebook-title">Launch Readiness Analysis</p> <p class="hb-notebook-subtitle">Python · Kernel: Python 3 · nbformat 4.5 · 6 cells</p> </div> <a class="hb-notebook-download" href="https://celine-fouard.fr/old-blog/notebook-onboarding/hugoblox-onboarding.ipynb" download> <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"/></svg> <span>Download notebook</span> </a> </div> <dl class="hb-notebook-metadata"> <div> <dt>Language</dt> <dd>Python</dd> </div> <div> <dt>Version</dt> <dd>3.11</dd> </div> <div> <dt>Kernel</dt> <dd>Python 3 python3</dd> </div> <div> <dt>nbformat</dt> <dd>4.5</dd> </div> <div> <dt>Authors</dt> <dd>HugoBlox Studio</dd> </div> </dl><div class="hb-notebook-body"><article class="hb-notebook-cell hb-notebook-cell--markdown" data-cell-type="markdown"> <header class="hb-notebook-cell-header"> <span class="hb-notebook-pill">Markdown</span> </header> <div class="hb-notebook-markdown prose dark:prose-invert"> <h1 id="ship-notebook-stories-in-minutes">Ship Notebook Stories in Minutes</h1> <p>Hugo Blox Notebook renderer turns your <code>.ipynb</code> experiments into beautiful long-form posts. Use this sample to see how markdown, code, and outputs flow together.</p> </div> </article><article class="hb-notebook-cell hb-notebook-cell--markdown" data-cell-type="markdown"> <header class="hb-notebook-cell-header"> <span class="hb-notebook-pill">Markdown</span> </header> <div class="hb-notebook-markdown prose dark:prose-invert"> <ol> <li>Drop notebooks inside <code>assets/notebooks/</code> (or import them as page resources).</li> <li>Reference them with <code>{{</* notebook src="your.ipynb" */>}}</code>.</li> <li>Control code, outputs, metadata badges, and download links via shortcode params.</li> </ol> </div> </article><article class="hb-notebook-cell hb-notebook-cell--code" data-cell-type="code"> <header class="hb-notebook-cell-header"> <span class="hb-notebook-pill">In [1]</span> <div class="hb-notebook-tags"> <span>demo</span> <span>quickstart</span> </div> </header> <div class="hb-notebook-code" data-language="python"><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="kn">import</span> <span class="nn">math</span> </span></span><span class="line"><span class="cl"><span class="n">accuracy</span> <span class="o">=</span> <span class="mf">0.982</span> </span></span><span class="line"><span class="cl"><span class="nb">print</span><span class="p">(</span><span class="s2">"Collecting data..."</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="nb">print</span><span class="p">(</span><span class="s2">"Training notebook-ready block..."</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="nb">print</span><span class="p">(</span><span class="s2">"Done!"</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="n">accuracy</span></span></span></code></pre></td></tr></table> </div> </div></div> <div class="hb-notebook-outputs"><pre class="hb-notebook-output hb-notebook-output--stream"><code>Collecting data... Training notebook-ready block... Done! </code></pre> <pre class="hb-notebook-output hb-notebook-output--text"><code>0.982</code></pre> </div> </article><article class="hb-notebook-cell hb-notebook-cell--code" data-cell-type="code"> <header class="hb-notebook-cell-header"> <span class="hb-notebook-pill">In [2]</span> </header> <div class="hb-notebook-code" data-language="python"><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="kn">from</span> <span class="nn">IPython.display</span> <span class="kn">import</span> <span class="n">HTML</span> </span></span><span class="line"><span class="cl"><span class="n">HTML</span><span class="p">(</span><span class="s2">"<div style='font-family:Inter,ui-sans-serif;'><strong>Launch Readiness:</strong> <span style='color:#22c55e;'>98.2</span><span class="si">% c</span><span class="s2">onfidence</span><br><em>Notebook blocks are theme-aware and dark-mode friendly.</em></div>"</span><span class="p">)</span></span></span></code></pre></td></tr></table> </div> </div></div> <div class="hb-notebook-outputs"> <div class="hb-notebook-output hb-notebook-output--html"><div style='font-family:Inter,ui-sans-serif;'><strong>Launch Readiness:</strong> <span style='color:#22c55e;'>98.2% confidence</span><br><em>Notebook blocks are theme-aware and dark-mode friendly.</em></div></div> </div> </article><article class="hb-notebook-cell hb-notebook-cell--code" data-cell-type="code"> <header class="hb-notebook-cell-header"> <span class="hb-notebook-pill">In [3]</span> <div class="hb-notebook-tags"> <span>metrics</span> </div> </header> <div class="hb-notebook-code" data-language="python"><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span><span class="lnt">8 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="n">metrics</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="s1">'metrics'</span><span class="p">:</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="s1">'engagement_rate'</span><span class="p">:</span> <span class="mf">0.73</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="s1">'read_time_minutes'</span><span class="p">:</span> <span class="mf">4.6</span><span class="p">,</span> </span></span><span class="line"><span class="cl"> <span class="s1">'subscribers'</span><span class="p">:</span> <span class="mi">1280</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span><span class="line"><span class="cl"><span class="n">metrics</span></span></span></code></pre></td></tr></table> </div> </div></div> <div class="hb-notebook-outputs"><pre class="hb-notebook-output hb-notebook-output--json"><code>{ "metrics": { "engagement_rate": 0.73, "read_time_minutes": 4.6, "subscribers": 1280 } }</code></pre> </div> </article><article class="hb-notebook-cell hb-notebook-cell--markdown" data-cell-type="markdown"> <header class="hb-notebook-cell-header"> <span class="hb-notebook-pill">Markdown</span> </header> <div class="hb-notebook-markdown prose dark:prose-invert"> <blockquote class="border-l-4 border-neutral-300 dark:border-neutral-600 pl-4 italic text-neutral-600 dark:text-neutral-400 my-6"> <p>Tip: Pair this block with Call-to-Action cards or the Embed shortcode to link to GitHub repos, datasets, or ARXIV preprints.</p> </blockquote> </div> </article> </div> <div class="sr-only" data-hb-component="notebook" data-hb-version="1.0" data-hb-license="MIT"> Powered by Hugo Blox Kit - https://github.com/HugoBlox/kit </div> </div> <h2 id="how-to-add-a-notebook">How to add a notebook</h2> <ol> <li><strong>Save your notebook.</strong> Place your <code>.ipynb</code> file in <code>assets/notebooks/</code> (for global access) or inside a page bundle (like <code>content/blog/my-post/analysis.ipynb</code>).</li> <li><strong>Add the shortcode.</strong> In any Markdown page, simply use: <code>{{< notebook src="analysis.ipynb" >}}</code></li> <li><strong>Customize.</strong> You can hide code cells for non-technical audiences (<code>show_code=false</code>) or just show the output (<code>show_outputs=true</code>).</li> </ol> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-purple-100 dark:bg-purple-900 border-purple-500" data-callout="important" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-purple-600 dark:text-purple-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9 3.75h.008v.008H12z"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1">Important</div> <div class="callout-body"><p>Hugo Blox respects your privacy. Notebook rendering happens statically at build time—no third-party services required.</p></div> </div> </div> <h2 id="next-steps">Next steps</h2> <ul> <li><strong>Try it out:</strong> Drop one of your existing notebooks into this site and see how it looks.</li> <li><strong>Link your papers:</strong> Use the Embed shortcode to link your notebook to your latest arXiv preprint or GitHub repository.</li> <li><strong>Get help:</strong> Join the community on or check the .</li> </ul> <p>Happy researching! 🚀</p> </article> <article> <h1>Example Talk: Recent Work</h1> <p>Mon, 01 Jan 2024 00:00:00 +0000</p>  <h1 id="example-talk">Example Talk</h1> <h3 id="dr-alex-johnson--meta-ai">Dr. Alex Johnson · Meta AI</h3> <hr> <h2 id="research-overview">Research Overview</h2> <ul> <li>Multimodal LLMs</li> <li>Efficient training</li> <li>Responsible AI</li> </ul> <hr> <h2 id="code--math">Code & Math</h2> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="k">def</span> <span class="nf">score</span><span class="p">(</span><span class="n">x</span><span class="p">:</span> <span class="nb">int</span><span class="p">)</span> <span class="o">-></span> <span class="nb">int</span><span class="p">:</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="n">x</span> <span class="o">*</span> <span class="n">x</span> </span></span></code></pre></div>$$ E = mc^2 $$<hr> <h2 id="dual-column-layout">Dual Column Layout</h2> <div class="r-hstack"> <div style="flex: 1; padding-right: 1rem;"> <h3 id="left-column">Left Column</h3> <ul> <li>Point A</li> <li>Point B</li> <li>Point C</li> </ul> </div> <div style="flex: 1; padding-left: 1rem;"> <h3 id="right-column">Right Column</h3> <ul> <li>Detail 1</li> <li>Detail 2</li> <li>Detail 3</li> </ul> </div> </div> <hr>  <div style="display: flex; gap: 2rem;"> <div style="flex: 2;"> <h3 id="main-content-23-width">Main Content (2/3 width)</h3> <p>This column takes up twice the space of the right column.</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="k">def</span> <span class="nf">example</span><span class="p">():</span> </span></span><span class="line"><span class="cl"> <span class="k">return</span> <span class="s2">"code works too"</span> </span></span></code></pre></div></div> <div style="flex: 1;"> <h3 id="sidebar-13-width">Sidebar (1/3 width)</h3> <blockquote class="border-l-4 border-neutral-300 dark:border-neutral-600 pl-4 italic text-neutral-600 dark:text-neutral-400 my-6"> <p><strong>Note</strong><br> Key points in smaller column</p> </blockquote> </div> </div> <hr> <h2 id="image--text-layout">Image + Text Layout</h2> <div class="r-hstack" style="align-items: center;"> <div style="flex: 1;"> <p> <figure > <div class="flex justify-center "> <div class="w-full" ></div> </div></figure> </p> </div> <div style="flex: 1; padding-left: 2rem;"> <h3 id="results">Results</h3> <ul> <li>95% accuracy</li> <li>10x faster inference</li> <li>Lower memory usage</li> </ul> <span class="fragment " > <strong>Breakthrough!</strong> </span> </div> </div> <hr> <h2 id="speaker-notes">Speaker Notes</h2> <p>Press <strong>S</strong> to open presenter view with notes!</p> <p>This slide has hidden speaker notes below.</p> <p>Note:</p> <ul> <li>This is a <strong>speaker note</strong> (only visible in presenter view)</li> <li>Press <code>S</code> key to open presenter console</li> <li>Perfect for remembering key talking points</li> <li>Can include reminders, timing, references</li> <li>Supports <strong>Markdown</strong> formatting too!</li> </ul> <hr> <h2 id="progressive-reveals">Progressive Reveals</h2> <p>Content appears step-by-step:</p> <span class="fragment " > First point appears </span> <span class="fragment " > Then the second point </span> <span class="fragment " > Finally the conclusion </span> <span class="fragment highlight-red" > This one can be <strong>highlighted</strong>! </span> <p>Note: Use fragments to control pacing and maintain audience attention. Each fragment appears on click.</p> <hr> <h2 id="diagrams-with-mermaid">Diagrams with Mermaid</h2> <div class="mermaid">graph LR A[Research Question] --> B{Hypothesis} B -->|Valid| C[Experiment] B -->|Invalid| D[Revise] C --> E[Analyze Data] E --> F{Significant?} F -->|Yes| G[Publish] F -->|No| D </div> <p>Perfect for: Workflows, architectures, processes</p> <p>Note: Mermaid diagrams are created from simple text. They’re version-controllable and edit anywhere!</p> <hr> <h2 id="research-results">Research Results</h2> <table> <thead> <tr> <th>Model</th> <th>Accuracy</th> <th>Speed</th> <th>Memory</th> </tr> </thead> <tbody> <tr> <td>Baseline</td> <td>87.3%</td> <td>1.0x</td> <td>2GB</td> </tr> <tr> <td>Ours (v1)</td> <td>92.1%</td> <td>1.5x</td> <td>1.8GB</td> </tr> <tr> <td><strong>Ours (v2)</strong></td> <td><strong>95.8%</strong></td> <td><strong>2.3x</strong></td> <td><strong>1.2GB</strong></td> </tr> </tbody> </table> <blockquote class="border-l-4 border-neutral-300 dark:border-neutral-600 pl-4 italic text-neutral-600 dark:text-neutral-400 my-6"> <p><strong>Key Finding:</strong> 8.5% improvement over baseline with 40% memory reduction</p> </blockquote> <p>Note: Tables are perfect for comparative results. Markdown tables are simple and version-control friendly.</p> <hr> <section data-noprocess data-shortcode-slide data-background-color="#1e3a8a" > <h2 id="custom-backgrounds">Custom Backgrounds</h2> <p>This slide has a <strong>blue background</strong>!</p> <p>You can customize:</p> <ul> <li>Background colors</li> <li>Background images</li> <li>Gradients</li> <li>Videos (yes, really!)</li> </ul> <p>Use <code>{{< slide background-color="#hex" >}}</code></p> <hr> <h2 id="vertical-navigation">Vertical Navigation</h2> <p><strong>There’s more content below! ⬇️</strong></p> <p>Press the <strong>Down Arrow</strong> to see substeps.</p> <p>Note: This demonstrates Reveal.js’s vertical slide feature. Great for optional details or deep dives.</p> <hr> <section data-noprocess data-shortcode-slide id="substep-1" > <h3 id="substep-1-details">Substep 1: Details</h3> <p>This is additional content in a vertical stack.</p> <p>Navigate down for more, or right to skip to next topic →</p> <hr> <section data-noprocess data-shortcode-slide id="substep-2" > <h3 id="substep-2-more-details">Substep 2: More Details</h3> <p>Even more detailed information.</p> <p>Press <strong>Up Arrow</strong> to go back, or <strong>Right Arrow</strong> to continue.</p> <hr> <h2 id="citations--quotes">Citations & Quotes</h2> <blockquote class="border-l-4 border-neutral-300 dark:border-neutral-600 pl-4 italic text-neutral-600 dark:text-neutral-400 my-6"> <p>“The best way to predict the future is to invent it.”</p> <p>— Alan Kay</p> </blockquote> <p>Or reference research:</p> <blockquote class="border-l-4 border-neutral-300 dark:border-neutral-600 pl-4 italic text-neutral-600 dark:text-neutral-400 my-6"> <p>Recent work by Smith et al. (2024) demonstrates that Markdown-based slides improve reproducibility by 78% compared to proprietary formats<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup>.</p> </blockquote> <hr> <h2 id="media-youtube-videos">Media: YouTube Videos</h2> <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"> </div> <p>Note: Embed YouTube videos with just the video ID. Perfect for demos, tutorials, or interviews.</p> <hr> <h2 id="media-all-options">Media: All Options</h2> <p>Embed various media types with simple shortcodes:</p> <ul> <li><strong>YouTube</strong>: <code>{{< youtube VIDEO_ID >}}</code></li> <li><strong>Bilibili</strong>: <code>{{< bilibili id="BV1..." >}}</code></li> <li><strong>Local videos</strong>: <code>{{< video src="file.mp4" controls="yes" >}}</code></li> <li><strong>Audio</strong>: <code>{{< audio src="file.mp3" >}}</code></li> </ul> <p>Perfect for demos, interviews, tutorials, or podcasts!</p> <p>Note: All media types work seamlessly in slides. Just use the appropriate shortcode.</p> <hr> <h2 id="interactive-elements">Interactive Elements</h2> <p>Try these keyboard shortcuts:</p> <ul> <li><code>→</code> <code>←</code> : Navigate slides</li> <li><code>↓</code> <code>↑</code> : Vertical navigation</li> <li><code>S</code> : Speaker notes</li> <li><code>F</code> : Fullscreen</li> <li><code>O</code> : Overview mode</li> <li><code>/</code> : Search</li> <li><code>ESC</code> : Exit modes</li> </ul> <hr>  <h2 id="hidden-slide-demo-inline-comment">Hidden Slide Demo (Inline Comment)</h2> <p>This slide is hidden using the <code></code> comment method.</p> <p>Perfect for:</p> <ul> <li>Speaker-only content</li> <li>Backup slides</li> <li>Work-in-progress content</li> </ul> <p>Note: This slide won’t appear in the presentation but remains in source for reference.</p> <hr> <h2 id="thanks">Thanks</h2> <h3 id="questions">Questions?</h3> <ul> <li>🌐 Website: </li> <li>🐦 X/Twitter: </li> <li>💬 Discord: </li> <li>⭐ GitHub: </li> </ul> <p><strong>All slides created with Markdown</strong> • No vendor lock-in • Edit anywhere</p> <p>Note: Thank you for your attention! Feel free to reach out with questions or contributions.</p> <hr> <h2 id="-branding-your-slides">🎨 Branding Your Slides</h2> <p>Add your identity to every slide with simple configuration!</p> <p><strong>What you can add:</strong></p> <table> <thead> <tr> <th>Element</th> <th>Position Options</th> </tr> </thead> <tbody> <tr> <td>Logo</td> <td>top-left, top-right, bottom-left, bottom-right</td> </tr> <tr> <td>Title</td> <td>Same as above</td> </tr> <tr> <td>Author</td> <td>Same as above</td> </tr> <tr> <td>Footer Text</td> <td>Same + bottom-center</td> </tr> </tbody> </table> <p>Edit the <code>branding:</code> section in your slide’s front matter (top of file).</p> <hr> <h2 id="-adding-your-logo">📁 Adding Your Logo</h2> <ol> <li>Place your logo in <code>assets/media/</code> folder</li> <li>Use SVG format for best results (auto-adapts to any theme!)</li> <li>Add to front matter:</li> </ol> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">branding</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">logo</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">filename</span><span class="p">:</span><span class="w"> </span><span class="s2">"your-logo.svg"</span><span class="w"> </span><span class="c"># Must be in assets/media/</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">position</span><span class="p">:</span><span class="w"> </span><span class="s2">"top-right"</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">width</span><span class="p">:</span><span class="w"> </span><span class="s2">"60px"</span><span class="w"> </span></span></span></code></pre></div><p><strong>Tip:</strong> SVGs with <code>fill="currentColor"</code> automatically match theme colors!</p> <hr> <h2 id="-title--author-overlays">📝 Title & Author Overlays</h2> <p>Show presentation title and/or author on every slide:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">branding</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">title</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">show</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">position</span><span class="p">:</span><span class="w"> </span><span class="s2">"bottom-left"</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">text</span><span class="p">:</span><span class="w"> </span><span class="s2">"Short Title"</span><span class="w"> </span><span class="c"># Optional: override long page title</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">author</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">show</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">position</span><span class="p">:</span><span class="w"> </span><span class="s2">"bottom-right"</span><span class="w"> </span></span></span></code></pre></div><p>Author is auto-detected from page front matter (<code>author:</code> or <code>authors:</code>).</p> <hr> <h2 id="-footer-text">📄 Footer Text</h2> <p>Add copyright, conference name, or any persistent text:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">branding</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">footer</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">text</span><span class="p">:</span><span class="w"> </span><span class="s2">"© 2024 Your Name · ICML 2024"</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">position</span><span class="p">:</span><span class="w"> </span><span class="s2">"bottom-center"</span><span class="w"> </span></span></span></code></pre></div><p><strong>Tip:</strong> Supports Markdown! Use <code>[Link](url)</code> for clickable links.</p> <hr>  <h2 id="-hiding-branding-per-slide">🔇 Hiding Branding Per-Slide</h2> <p>Sometimes you want a clean slide (title slides, full-screen images).</p> <p>Add this comment at the <strong>start</strong> of your slide content:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="gu">## My Clean Slide </span></span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">Content here... </span></span></code></pre></div><p>☝️ <strong>This slide uses <code></code></strong> — notice no logo or overlays!</p> <hr>  <h2 id="-selective-hiding">🔇 Selective Hiding</h2> <p>Hide just the header (logo + title):</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl"> </span></span></code></pre></div><p>Or just the footer (author + footer text):</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl"> </span></span></code></pre></div><p>☝️ <strong>This slide uses <code></code></strong> — footer still visible below!</p> <hr>  <h2 id="-quick-reference">✅ Quick Reference</h2> <table> <thead> <tr> <th>Comment</th> <th>Hides</th> </tr> </thead> <tbody> <tr> <td><code></code></td> <td>Everything (logo, title, author, footer)</td> </tr> <tr> <td><code></code></td> <td>Logo + Title overlay</td> </tr> <tr> <td><code></code></td> <td>Author + Footer text</td> </tr> </tbody> </table> <p>☝️ <strong>This slide uses <code></code></strong> — logo still visible above!</p> <hr> <h2 id="-get-started">🚀 Get Started</h2> <ol> <li>Copy this example’s front matter as a starting point</li> <li>Replace logo with yours in <code>assets/media/</code></li> <li>Customize positions and text</li> <li>Use <code></code> for special slides</li> </ol> <p><strong>Pro tip:</strong> Set site-wide defaults in <code>config/_default/params.yaml</code> under <code>slides.branding</code>!</p> <div class="footnotes" role="doc-endnotes"> <hr> <ol> <li id="fn:1"> <p>Smith, J. et al. (2024). <em>Open Science Presentations</em>. Nature Methods. <a href="#fnref:1" class="footnote-backref" role="doc-backlink">↩︎</a></p> </li> </ol> </div> </article> <article> <h1>Toward Decision Support System for Lower Limb Endovascular Revascularization</h1> <p>Mon, 01 Jan 2024 00:00:00 +0000</p> </article> <article> <h1>Segmentation of cardiac infarction in delayed-enhancement MRI using probability map and transformers-based neural networks</h1> <p>Fri, 01 Dec 2023 00:00:00 +0000</p> </article> <article> <h1>🎉 Easily create your own simple yet highly customizable blog</h1> <p>Fri, 27 Oct 2023 00:00:00 +0000</p> <p>Welcome 👋</p> <details class="print:hidden xl:hidden" open> <summary>Table of Contents</summary> <div class="text-sm"> <nav id="TableOfContents"> <ul> <li><a href="#overview">Overview</a> <ul> <li><a href="#get-started">Get Started</a></li> </ul> </li> <li><a href="#crowd-funded-open-source-software">Crowd-funded open-source software</a> <ul> <li><a href="#-click-here-to-become-a-sponsor-and-help-support-hugo-blox">❤️ Click here to become a sponsor and help support Hugo Blox’s future ❤️</a></li> </ul> </li> <li><a href="#ecosystem">Ecosystem</a></li> <li><a href="#inspiration">Inspiration</a></li> <li><a href="#features">Features</a></li> <li><a href="#themes">Themes</a></li> <li><a href="#license">License</a></li> </ul> </nav> </div> </details> <h2 id="overview">Overview</h2> <ol> <li>The Hugo Blox website builder for Hugo, along with its starter templates, is designed for professional creators, educators, and teams/organizations - although it can be used to create any kind of site</li> <li>The template can be modified and customised to suit your needs. It’s a good platform for anyone looking to take control of their data and online identity whilst having the convenience to start off with a <strong>no-code solution (write in Markdown and customize with YAML parameters)</strong> and having <strong>flexibility to later add even deeper personalization with HTML and CSS</strong></li> <li>You can work with all your favourite tools and apps with hundreds of plugins and integrations to speed up your workflows, interact with your readers, and much more</li> </ol> <h3 id="get-started">Get Started</h3> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-emerald-100 dark:bg-emerald-900 border-emerald-500" data-callout="tip" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-emerald-600 dark:text-emerald-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 18v-5.25m0 0a6 6 0 0 0 1.5-.189m-1.5.189a6 6 0 0 1-1.5-.189m3.75 7.478a12.1 12.1 0 0 1-4.5 0m3.75 2.383a14.4 14.4 0 0 1-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 1 0-7.517 0c.85.493 1.509 1.333 1.509 2.316V18"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1">Quick Start Guide</div> <div class="callout-body"><p>New to Hugo Blox? Follow these steps to get your site up and running in minutes!</p></div> </div> </div> <ul> <li>👉 </li> <li>📚 </li> <li>💬 or </li> <li>🐦 Twitter: #MadeWithHugoBlox</li> <li>💡 </li> <li>⬆️ <strong>Updating Hugo Blox?</strong> View the and </li> </ul> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-purple-100 dark:bg-purple-900 border-purple-500" data-callout="important" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-purple-600 dark:text-purple-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9 3.75h.008v.008H12z"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1">Important</div> <div class="callout-body"><p>Remember to backup your site before making major updates!</p></div> </div> </div> <h2 id="crowd-funded-open-source-software">Crowd-funded open-source software</h2> <p>To help us develop this template and software sustainably under the MIT license, we ask all individuals and businesses that use it to help support its ongoing maintenance and development via sponsorship.</p> <h3 id="-click-here-to-become-a-sponsor-and-help-support-hugo-blox"> </h3> <p>As a token of appreciation for sponsoring, you can <strong>unlock awesome rewards and extra features 🦄✨</strong></p> <h2 id="ecosystem">Ecosystem</h2> <ul> <li><strong> :</strong> Automatically import publications from BibTeX</li> </ul> <h2 id="inspiration">Inspiration</h2> <p> are building with this template.</p> <h2 id="features">Features</h2> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-blue-100 dark:bg-blue-900 border-blue-500" data-callout="note" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-blue-600 dark:text-blue-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m16.862 4.487l1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8l.8-2.685a4.5 4.5 0 0 1 1.13-1.897zm0 0L19.5 7.125"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1">Enhanced Markdown Support<br></div> <div class="callout-body"><p>Hugo Blox now supports GitHub and Obsidian-style callouts! Use standard Markdown alert syntax like <code>> [!NOTE]</code> for better portability.</p></div> </div> </div> <ul> <li><strong>Page builder</strong> - Create <em>anything</em> with no-code and </li> <li><strong>Edit any type of content</strong> - Blog posts, publications, talks, slides, projects, and more!</li> <li><strong>Create content</strong> in , , or </li> <li><strong>Plugin System</strong> - Fully customizable </li> <li><strong>Display Code and Math</strong> - Code syntax highlighting and LaTeX math supported</li> <li><strong>Integrations</strong> - , , Maps, Contact Forms, and more!</li> <li><strong>Beautiful Site</strong> - Simple and refreshing one-page design</li> <li><strong>Industry-Leading SEO</strong> - Help get your website found on search engines and social media</li> <li><strong>Media Galleries</strong> - Display your images and videos with captions in a customizable gallery</li> <li><strong>Mobile Friendly</strong> - Look amazing on every screen with a mobile friendly version of your site</li> <li><strong>Multi-language</strong> - 35+ language packs including English, 中文, and Português</li> <li><strong>Multi-user</strong> - Each author gets their own profile page</li> <li><strong>Privacy Pack</strong> - Assists with GDPR</li> <li><strong>Stand Out</strong> - Bring your site to life with animation, parallax backgrounds, and scroll effects</li> <li><strong>One-Click Deployment</strong> - No servers. No databases. Only files.</li> </ul> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-orange-100 dark:bg-orange-900 border-orange-500" data-callout="warning" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-orange-600 dark:text-orange-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0zM12 15.75h.007v.008H12z"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1">Version Requirements<br></div> <div class="callout-body"><p>The new Markdown alert syntax requires Hugo v0.132.0 or later. Make sure you’re using a compatible version!</p></div> </div> </div> <h2 id="themes">Themes</h2> <p>Hugo Blox and its templates come with <strong>automatic day (light) and night (dark) mode</strong> built-in. Visitors can choose their preferred mode by clicking the sun/moon icon in the header.</p> <p> for your site. Themes are fully customizable.</p> <h2 id="license">License</h2> <p>Copyright 2016-present .</p> <p>Released under the license.</p> </article> <article> <h1>🧠 Sharpen your thinking with a second brain</h1> <p>Thu, 26 Oct 2023 00:00:00 +0000</p> <p>Create a personal knowledge base and share your knowledge with your peers.</p> <p>Hugo Blox web framework empowers you with one of the most flexible note-taking capabilities out there.</p> <p>Create a powerful knowledge base that works on top of a local folder of plain text Markdown files.</p> <p>Use it as your second brain, either publicly sharing your knowledge with your peers via your website, or via a private GitHub repository and password-protected site just for yourself.</p> <h2 id="mindmaps">Mindmaps</h2> <p>Hugo Blox supports a Markdown extension for mindmaps.</p> <p>With this open format, can even edit your mindmaps in other popular tools such as Obsidian.</p> <p>Simply insert a Markdown code block labelled as <code>markmap</code> and optionally set the height of the mindmap as shown in the example below.</p> <p>Mindmaps can be created by simply writing the items as a Markdown list within the <code>markmap</code> code block, indenting each item to create as many sub-levels as you need:</p> <div class="highlight"> <pre class="chroma"> <code> ```markmap {height="200px"} - Hugo Modules - Hugo Blox - netlify - netlify-cms - slides ``` </code> </pre> </div> <p>renders as</p> <div class="markmap" style="height: 200px;"> <pre>- Hugo Modules - Hugo Blox - netlify - netlify-cms - slides</pre> </div> <p>Anh here’s a more advanced mindmap with formatting, code blocks, and math:</p> <div class="highlight"> <pre class="chroma"> <code> ```markmap - Mindmaps - Links - [Hugo Blox Docs](https://docs.hugoblox.com/) - [Discord Community](https://discord.gg/z8wNYzb) - [GitHub](https://github.com/HugoBlox/kit) - Features - Markdown formatting - **inline** ~~text~~ *styles* - multiline text - `inline code` - Math: $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$ ``` </code> </pre> </div> <p>renders as</p> <div class="markmap" style="height: 500px;"> <pre>- Mindmaps - Links - [Hugo Blox Docs](https://docs.hugoblox.com/) - [Discord Community](https://discord.gg/z8wNYzb) - [GitHub](https://github.com/HugoBlox/kit) - Features - Markdown formatting - **inline** ~~text~~ *styles* - multiline text - `inline code` - Math: $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$</pre> </div> <h2 id="highlighting">Highlighting</h2> <p><mark>Highlight</mark> important text with <code>mark</code>:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">mark</span><span class="p">></span>Highlighted text<span class="p"></</span><span class="nt">mark</span><span class="p">></span> </span></span></code></pre></div><h2 id="callouts">Callouts</h2> <p>Use (aka <em>asides</em>, <em>hints</em>, or <em>alerts</em>) to draw attention to notes, tips, and warnings.</p> <p>Use the <code>> [!NOTE]</code> syntax to create a callout.</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl"><span class="k">> </span><span class="ge">[!NOTE] </span></span></span><span class="line"><span class="cl"><span class="k">> </span><span class="ge">A Markdown aside is useful for displaying notices, hints, or definitions to your readers. </span></span></span></code></pre></div><p>renders as</p> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-blue-100 dark:bg-blue-900 border-blue-500" data-callout="note" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-blue-600 dark:text-blue-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m16.862 4.487l1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8l.8-2.685a4.5 4.5 0 0 1 1.13-1.897zm0 0L19.5 7.125"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1">Note</div> <div class="callout-body"><p>A Markdown aside is useful for displaying notices, hints, or definitions to your readers.</p></div> </div> </div> <p>Or use the <code>warning</code> callout type so your readers don’t miss critical details:</p> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-orange-100 dark:bg-orange-900 border-orange-500" data-callout="warning" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-orange-600 dark:text-orange-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0zM12 15.75h.007v.008H12z"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1">Warning</div> <div class="callout-body"><p>A Markdown aside is useful for displaying notices, hints, or definitions to your readers.</p></div> </div> </div> <h2 id="did-you-find-this-page-helpful-consider-sharing-it-">Did you find this page helpful? Consider sharing it 🙌</h2> </article> <article> <h1>📈 Communicate your results effectively with the best data visualizations</h1> <p>Wed, 25 Oct 2023 00:00:00 +0000</p> <p>Hugo Blox is designed to give technical content creators a seamless experience. You can focus on the content and Hugo Blox handles the rest.</p> <p>Use popular tools such as Plotly, Mermaid, and data frames.</p> <h2 id="embed-rich-content">Embed Rich Content</h2> <p>HuggingFace Model</p> <div class="group bg-white/90 dark:bg-zinc-900/90 backdrop-blur-sm rounded-2xl ring-1 ring-zinc-900/5 dark:ring-white/10 shadow-lg overflow-hidden transition-all duration-300 ease-out hover:shadow-xl hover:shadow-primary-500/10 hover:-translate-y-1 focus-within:ring-2 focus-within:ring-primary-500/50 my-6" role="article" aria-labelledby="hb-embed-title-hb-embed-63f321aed1c5ddd60af1b99579a7ca33"> <div class="flex items-center gap-3 p-6 border-b border-zinc-100 dark:border-zinc-800"> <div class="flex-shrink-0"> <div class="w-10 h-10 rounded-full bg-gradient-to-br from-yellow-400 to-orange-500 flex items-center justify-center"> <svg class="w-6 h-6 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12.025 1.13c-5.77 0-10.449 4.647-10.449 10.378c0 1.112.178 2.181.503 3.185c.064-.222.203-.444.416-.577a.96.96 0 0 1 .524-.15c.293 0 .584.124.84.284c.278.173.48.408.71.694c.226.282.458.611.684.951v-.014c.017-.324.106-.622.264-.874s.403-.487.762-.543c.3-.047.596.06.787.203s.31.313.4.467c.15.257.212.468.233.542c.01.026.653 1.552 1.657 2.54c.616.605 1.01 1.223 1.082 1.912c.055.537-.096 1.059-.38 1.572c.637.121 1.294.187 1.967.187c.657 0 1.298-.063 1.921-.178c-.287-.517-.44-1.041-.384-1.581c.07-.69.465-1.307 1.081-1.913c1.004-.987 1.647-2.513 1.657-2.539c.021-.074.083-.285.233-.542c.09-.154.208-.323.4-.467a1.08 1.08 0 0 1 .787-.203c.359.056.604.29.762.543s.247.55.265.874v.015c.225-.34.457-.67.683-.952c.23-.286.432-.52.71-.694c.257-.16.547-.284.84-.285a.97.97 0 0 1 .524.151c.228.143.373.388.43.625l.006.04a10.3 10.3 0 0 0 .534-3.273c0-5.731-4.678-10.378-10.449-10.378M8.327 6.583a1.5 1.5 0 0 1 .713.174a1.487 1.487 0 0 1 .617 2.013c-.183.343-.762-.214-1.102-.094c-.38.134-.532.914-.917.71a1.487 1.487 0 0 1 .69-2.803m7.486 0a1.487 1.487 0 0 1 .689 2.803c-.385.204-.536-.576-.916-.71c-.34-.12-.92.437-1.103.094a1.487 1.487 0 0 1 .617-2.013a1.5 1.5 0 0 1 .713-.174m-10.68 1.55a.96.96 0 1 1 0 1.921a.96.96 0 0 1 0-1.92m13.838 0a.96.96 0 1 1 0 1.92a.96.96 0 0 1 0-1.92M8.489 11.458c.588.01 1.965 1.157 3.572 1.164c1.607-.007 2.984-1.155 3.572-1.164c.196-.003.305.12.305.454c0 .886-.424 2.328-1.563 3.202c-.22-.756-1.396-1.366-1.63-1.32q-.011.001-.02.006l-.044.026l-.01.008l-.03.024q-.018.017-.035.036l-.032.04a1 1 0 0 0-.058.09l-.014.025q-.049.088-.11.19a1 1 0 0 1-.083.116a1.2 1.2 0 0 1-.173.18q-.035.029-.075.058a1.3 1.3 0 0 1-.251-.243a1 1 0 0 1-.076-.107c-.124-.193-.177-.363-.337-.444c-.034-.016-.104-.008-.2.022q-.094.03-.216.087q-.06.028-.125.063l-.13.074q-.067.04-.136.086a3 3 0 0 0-.135.096a3 3 0 0 0-.26.219a2 2 0 0 0-.12.121a2 2 0 0 0-.106.128l-.002.002a2 2 0 0 0-.09.132l-.001.001a1.2 1.2 0 0 0-.105.212q-.013.036-.024.073c-1.139-.875-1.563-2.317-1.563-3.203c0-.334.109-.457.305-.454m.836 10.354c.824-1.19.766-2.082-.365-3.194c-1.13-1.112-1.789-2.738-1.789-2.738s-.246-.945-.806-.858s-.97 1.499.202 2.362c1.173.864-.233 1.45-.685.64c-.45-.812-1.683-2.896-2.322-3.295s-1.089-.175-.938.647s2.822 2.813 2.562 3.244s-1.176-.506-1.176-.506s-2.866-2.567-3.49-1.898s.473 1.23 2.037 2.16c1.564.932 1.686 1.178 1.464 1.53s-3.675-2.511-4-1.297c-.323 1.214 3.524 1.567 3.287 2.405c-.238.839-2.71-1.587-3.216-.642c-.506.946 3.49 2.056 3.522 2.064c1.29.33 4.568 1.028 5.713-.624m5.349 0c-.824-1.19-.766-2.082.365-3.194c1.13-1.112 1.789-2.738 1.789-2.738s.246-.945.806-.858s.97 1.499-.202 2.362c-1.173.864.233 1.45.685.64c.451-.812 1.683-2.896 2.322-3.295s1.089-.175.938.647s-2.822 2.813-2.562 3.244s1.176-.506 1.176-.506s2.866-2.567 3.49-1.898s-.473 1.23-2.037 2.16c-1.564.932-1.686 1.178-1.464 1.53s3.675-2.511 4-1.297c.323 1.214-3.524 1.567-3.287 2.405c.238.839 2.71-1.587 3.216-.642c.506.946-3.49 2.056-3.522 2.064c-1.29.33-4.568 1.028-5.713-.624"/></svg> </div> </div> <div class="flex-1 min-w-0"> <h3 id="hb-embed-title-hb-embed-63f321aed1c5ddd60af1b99579a7ca33" class="text-xl font-bold tracking-tight leading-tight truncate"> <a href="https://huggingface.co/google/embeddinggemma-300m" target="_blank" rel="noopener" class="text-zinc-900 dark:text-zinc-100 hover:text-primary-600 dark:hover:text-primary-400 hover:underline transition-colors duration-200">google/embeddinggemma-300m</a> </h3> <div class="flex items-center gap-2 mt-1"> <span class="inline-block w-2 h-2 rounded-full bg-secondary-500"></span> <span class="text-sm text-zinc-600 dark:text-zinc-400 capitalize"> sentence-similarity </span></div> </div> <div class="flex-shrink-0"> <a href="https://huggingface.co/google/embeddinggemma-300m" target="_blank" rel="noopener" class="text-zinc-400 hover:text-primary-500 transition-colors duration-200"> <svg class="w-5 h-5 hb-embed-link" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/></svg> </a> </div> </div> <div class="p-6 space-y-4"> <div class="flex items-center gap-6 pt-2"><div class="flex items-center gap-1.5 text-sm text-zinc-600 dark:text-zinc-400"> <svg class="w-4 h-4 text-primary-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"/></svg><span id="hb-hb-embed-63f321aed1c5ddd60af1b99579a7ca33-downloads">1.948437M</span></div><div class="flex items-center gap-1.5 text-sm text-zinc-600 dark:text-zinc-400"> <svg class="w-4 h-4 text-secondary-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 8.25c0-2.485-2.099-4.5-4.687-4.5c-1.936 0-3.598 1.126-4.313 2.733c-.715-1.607-2.377-2.733-4.312-2.733C5.098 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12"/></svg><span id="hb-hb-embed-63f321aed1c5ddd60af1b99579a7ca33-likes">1.521k</span></div></div> </div> <div class="absolute inset-0 pointer-events-none bg-gradient-to-r from-primary-500/0 via-primary-500/5 to-secondary-500/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> <div class="sr-only" data-hb-component="embed" data-hb-version="1.0" data-hb-license="MIT"> Powered by Hugo Blox Kit - https://github.com/HugoBlox/kit </div> </div> <p>HuggingFace Dataset</p> <div class="group bg-white/90 dark:bg-zinc-900/90 backdrop-blur-sm rounded-2xl ring-1 ring-zinc-900/5 dark:ring-white/10 shadow-lg overflow-hidden transition-all duration-300 ease-out hover:shadow-xl hover:shadow-primary-500/10 hover:-translate-y-1 focus-within:ring-2 focus-within:ring-primary-500/50 my-6" role="article" aria-labelledby="hb-embed-title-hb-embed-3c57fb8a3817424fde1a8fe0ab8eb3d4"> <div class="flex items-center gap-3 p-6 border-b border-zinc-100 dark:border-zinc-800"> <div class="flex-shrink-0"> <div class="w-10 h-10 rounded-full bg-gradient-to-br from-yellow-400 to-orange-500 flex items-center justify-center"> <svg class="w-6 h-6 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12.025 1.13c-5.77 0-10.449 4.647-10.449 10.378c0 1.112.178 2.181.503 3.185c.064-.222.203-.444.416-.577a.96.96 0 0 1 .524-.15c.293 0 .584.124.84.284c.278.173.48.408.71.694c.226.282.458.611.684.951v-.014c.017-.324.106-.622.264-.874s.403-.487.762-.543c.3-.047.596.06.787.203s.31.313.4.467c.15.257.212.468.233.542c.01.026.653 1.552 1.657 2.54c.616.605 1.01 1.223 1.082 1.912c.055.537-.096 1.059-.38 1.572c.637.121 1.294.187 1.967.187c.657 0 1.298-.063 1.921-.178c-.287-.517-.44-1.041-.384-1.581c.07-.69.465-1.307 1.081-1.913c1.004-.987 1.647-2.513 1.657-2.539c.021-.074.083-.285.233-.542c.09-.154.208-.323.4-.467a1.08 1.08 0 0 1 .787-.203c.359.056.604.29.762.543s.247.55.265.874v.015c.225-.34.457-.67.683-.952c.23-.286.432-.52.71-.694c.257-.16.547-.284.84-.285a.97.97 0 0 1 .524.151c.228.143.373.388.43.625l.006.04a10.3 10.3 0 0 0 .534-3.273c0-5.731-4.678-10.378-10.449-10.378M8.327 6.583a1.5 1.5 0 0 1 .713.174a1.487 1.487 0 0 1 .617 2.013c-.183.343-.762-.214-1.102-.094c-.38.134-.532.914-.917.71a1.487 1.487 0 0 1 .69-2.803m7.486 0a1.487 1.487 0 0 1 .689 2.803c-.385.204-.536-.576-.916-.71c-.34-.12-.92.437-1.103.094a1.487 1.487 0 0 1 .617-2.013a1.5 1.5 0 0 1 .713-.174m-10.68 1.55a.96.96 0 1 1 0 1.921a.96.96 0 0 1 0-1.92m13.838 0a.96.96 0 1 1 0 1.92a.96.96 0 0 1 0-1.92M8.489 11.458c.588.01 1.965 1.157 3.572 1.164c1.607-.007 2.984-1.155 3.572-1.164c.196-.003.305.12.305.454c0 .886-.424 2.328-1.563 3.202c-.22-.756-1.396-1.366-1.63-1.32q-.011.001-.02.006l-.044.026l-.01.008l-.03.024q-.018.017-.035.036l-.032.04a1 1 0 0 0-.058.09l-.014.025q-.049.088-.11.19a1 1 0 0 1-.083.116a1.2 1.2 0 0 1-.173.18q-.035.029-.075.058a1.3 1.3 0 0 1-.251-.243a1 1 0 0 1-.076-.107c-.124-.193-.177-.363-.337-.444c-.034-.016-.104-.008-.2.022q-.094.03-.216.087q-.06.028-.125.063l-.13.074q-.067.04-.136.086a3 3 0 0 0-.135.096a3 3 0 0 0-.26.219a2 2 0 0 0-.12.121a2 2 0 0 0-.106.128l-.002.002a2 2 0 0 0-.09.132l-.001.001a1.2 1.2 0 0 0-.105.212q-.013.036-.024.073c-1.139-.875-1.563-2.317-1.563-3.203c0-.334.109-.457.305-.454m.836 10.354c.824-1.19.766-2.082-.365-3.194c-1.13-1.112-1.789-2.738-1.789-2.738s-.246-.945-.806-.858s-.97 1.499.202 2.362c1.173.864-.233 1.45-.685.64c-.45-.812-1.683-2.896-2.322-3.295s-1.089-.175-.938.647s2.822 2.813 2.562 3.244s-1.176-.506-1.176-.506s-2.866-2.567-3.49-1.898s.473 1.23 2.037 2.16c1.564.932 1.686 1.178 1.464 1.53s-3.675-2.511-4-1.297c-.323 1.214 3.524 1.567 3.287 2.405c-.238.839-2.71-1.587-3.216-.642c-.506.946 3.49 2.056 3.522 2.064c1.29.33 4.568 1.028 5.713-.624m5.349 0c-.824-1.19-.766-2.082.365-3.194c1.13-1.112 1.789-2.738 1.789-2.738s.246-.945.806-.858s.97 1.499-.202 2.362c-1.173.864.233 1.45.685.64c.451-.812 1.683-2.896 2.322-3.295s1.089-.175.938.647s-2.822 2.813-2.562 3.244s1.176-.506 1.176-.506s2.866-2.567 3.49-1.898s-.473 1.23-2.037 2.16c-1.564.932-1.686 1.178-1.464 1.53s3.675-2.511 4-1.297c.323 1.214-3.524 1.567-3.287 2.405c.238.839 2.71-1.587 3.216-.642c.506.946-3.49 2.056-3.522 2.064c-1.29.33-4.568 1.028-5.713-.624"/></svg> </div> </div> <div class="flex-1 min-w-0"> <h3 id="hb-embed-title-hb-embed-3c57fb8a3817424fde1a8fe0ab8eb3d4" class="text-xl font-bold tracking-tight leading-tight truncate"> <a href="https://huggingface.co/datasets/fka/awesome-chatgpt-prompts" target="_blank" rel="noopener" class="text-zinc-900 dark:text-zinc-100 hover:text-primary-600 dark:hover:text-primary-400 hover:underline transition-colors duration-200">fka/prompts.chat</a> </h3> <div class="flex items-center gap-2 mt-1"> <span class="inline-block w-2 h-2 rounded-full bg-primary-500"></span> <span class="text-sm text-zinc-600 dark:text-zinc-400 capitalize"> dataset </span></div> </div> <div class="flex-shrink-0"> <a href="https://huggingface.co/datasets/fka/awesome-chatgpt-prompts" target="_blank" rel="noopener" class="text-zinc-400 hover:text-primary-500 transition-colors duration-200"> <svg class="w-5 h-5 hb-embed-link" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/></svg> </a> </div> </div> <div class="p-6 space-y-4"> <p class="text-zinc-600 dark:text-zinc-400 text-base leading-relaxed line-clamp-3"> a.k.a. Awesome ChatGPT Prompts This is a Dataset Repository mirror of prompts.chat — a social platform for AI prompts. 📢 Notice This Hugging Face dataset is a mirror. For the … </p><div class="flex items-center gap-6 pt-2"><div class="flex items-center gap-1.5 text-sm text-zinc-600 dark:text-zinc-400"> <svg class="w-4 h-4 text-primary-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"/></svg><span id="hb-hb-embed-3c57fb8a3817424fde1a8fe0ab8eb3d4-downloads">23.229k</span></div><div class="flex items-center gap-1.5 text-sm text-zinc-600 dark:text-zinc-400"> <svg class="w-4 h-4 text-secondary-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 8.25c0-2.485-2.099-4.5-4.687-4.5c-1.936 0-3.598 1.126-4.313 2.733c-.715-1.607-2.377-2.733-4.312-2.733C5.098 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12"/></svg><span id="hb-hb-embed-3c57fb8a3817424fde1a8fe0ab8eb3d4-likes">9.614k</span></div></div> </div> <div class="absolute inset-0 pointer-events-none bg-gradient-to-r from-primary-500/0 via-primary-500/5 to-secondary-500/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> <div class="sr-only" data-hb-component="embed" data-hb-version="1.0" data-hb-license="MIT"> Powered by Hugo Blox Kit - https://github.com/HugoBlox/kit </div> </div> <p>GitHub Repository</p> <div class="group bg-white/90 dark:bg-zinc-900/90 backdrop-blur-sm rounded-2xl ring-1 ring-zinc-900/5 dark:ring-white/10 shadow-lg overflow-hidden transition-all duration-300 ease-out hover:shadow-xl hover:shadow-primary-500/10 hover:-translate-y-1 focus-within:ring-2 focus-within:ring-primary-500/50 my-6" role="article" aria-labelledby="hb-embed-title-hb-embed-ba2f2ffd29da7fd7c05189b3ee01ae82"> <div class="flex items-center gap-3 p-6 border-b border-zinc-100 dark:border-zinc-800"> <div class="flex-shrink-0"> <div class="w-10 h-10 rounded-full bg-gradient-to-br from-slate-800 to-slate-900 flex items-center justify-center"> <svg class="w-6 h-6 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg> </div> </div> <div class="flex-1 min-w-0"> <h3 id="hb-embed-title-hb-embed-ba2f2ffd29da7fd7c05189b3ee01ae82" class="text-xl font-bold tracking-tight leading-tight truncate"> <a href="https://github.com/HugoBlox/kit" target="_blank" rel="noopener" class="text-zinc-900 dark:text-zinc-100 hover:text-primary-600 dark:hover:text-primary-400 hover:underline transition-colors duration-200">kit</a> </h3> <div class="flex items-center gap-2 mt-1"> <span class="text-sm text-zinc-600 dark:text-zinc-400">by <a href="https://github.com/HugoBlox" target="_blank" rel="noopener" class="font-medium hover:text-primary-600 dark:hover:text-primary-400 hover:underline transition-colors duration-200">HugoBlox</a> </span><span class="text-sm text-zinc-500 dark:text-zinc-500">•</span> <span class="inline-block w-2 h-2 rounded-full bg-primary-500"></span> <span class="text-sm text-zinc-500 dark:text-zinc-500 capitalize">HTML</span></div> </div> <div class="flex-shrink-0"> <a href="https://github.com/HugoBlox/kit" target="_blank" rel="noopener" class="text-zinc-400 hover:text-primary-500 transition-colors duration-200"> <svg class="w-5 h-5 hb-embed-link" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/></svg> </a> </div> </div> <div class="p-6 space-y-4"> <p class="text-zinc-600 dark:text-zinc-400 text-base leading-relaxed line-clamp-3"> ⚡ The Open Research Copilot. Build high-perf Portfolios, Lab Sites & Docs in Markdown + Jupyter. 100% Data Control. 🦫 数据科学家的开源 Copilot。一键部署 👇 </p><div class="flex items-center gap-6 pt-2"><div class="flex items-center gap-1.5 text-sm text-zinc-600 dark:text-zinc-400"> <svg class="w-4 h-4 text-primary-500" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M6 2C4.89543 2 4 2.89543 4 4C4 4.74028 4.4022 5.38663 5 5.73244V7C5 8.65685 6.34315 10 8 10H10V11.2676C9.4022 11.6134 9 12.2597 9 13C9 14.1046 9.89543 15 11 15C12.1046 15 13 14.1046 13 13C13 12.2597 12.5978 11.6134 12 11.2676V10H14C15.6569 10 17 8.65685 17 7V5.73244C17.5978 5.38663 18 4.74028 18 4C18 2.89543 17.1046 2 16 2C14.8954 2 14 2.89543 14 4C14 4.74028 14.4022 5.38663 15 5.73244V7C15 7.55228 14.5523 8 14 8H8C7.44772 8 7 7.55228 7 7V5.73244C7.5978 5.38663 8 4.74028 8 4C8 2.89543 7.10457 2 6 2ZM6 4C6 3.44772 6.44772 3 7 3C7.55228 3 8 3.44772 8 4C8 4.55228 7.55228 5 7 5C6.44772 5 6 4.55228 6 4ZM11 13C11 12.4477 11.4477 12 12 12C12.5523 12 13 12.4477 13 13C13 13.5523 12.5523 14 12 14C11.4477 14 11 13.5523 11 13ZM16 3C15.4477 3 15 3.44772 15 4C15 4.55228 15.4477 5 16 5C16.5523 5 17 4.55228 17 4C17 3.44772 16.5523 3 16 3Z"/></svg><span id="hb-hb-embed-ba2f2ffd29da7fd7c05189b3ee01ae82-forks">2.947k</span></div><div class="flex items-center gap-1.5 text-sm text-zinc-600 dark:text-zinc-400"> <svg class="w-4 h-4 text-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9 3.75h.008v.008H12z"/></svg> <a href="https://github.com/HugoBlox/kit/issues" target="_blank" rel="noopener" class="font-medium hover:text-primary-600 dark:hover:text-primary-400 hover:underline transition-colors duration-200" id="hb-hb-embed-ba2f2ffd29da7fd7c05189b3ee01ae82-issues">2</a></div><div class="flex items-center gap-1.5 text-sm text-zinc-600 dark:text-zinc-400"> <svg class="w-4 h-4 text-yellow-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.56.56 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.56.56 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.56.56 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.56.56 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.56.56 0 0 0 .475-.345z"/></svg><span id="hb-hb-embed-ba2f2ffd29da7fd7c05189b3ee01ae82-stars">9.858k</span></div></div><div class="flex flex-wrap gap-1 pt-2"><span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-primary-100 text-primary-800 dark:bg-primary-900/40 dark:text-primary-300"> academic </span><span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-primary-100 text-primary-800 dark:bg-primary-900/40 dark:text-primary-300"> blog </span><span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-primary-100 text-primary-800 dark:bg-primary-900/40 dark:text-primary-300"> blog-engine </span><span class="text-xs text-zinc-500 dark:text-zinc-500">+17</span></div> </div> <div class="absolute inset-0 pointer-events-none bg-gradient-to-r from-primary-500/0 via-primary-500/5 to-secondary-500/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> <div class="sr-only" data-hb-component="embed" data-hb-version="1.0" data-hb-license="MIT"> Powered by Hugo Blox Kit - https://github.com/HugoBlox/kit </div> </div> <p>Custom embed with manual data</p> <div class="group bg-white/90 dark:bg-zinc-900/90 backdrop-blur-sm rounded-2xl ring-1 ring-zinc-900/5 dark:ring-white/10 shadow-lg overflow-hidden transition-all duration-300 ease-out hover:shadow-xl hover:shadow-primary-500/10 hover:-translate-y-1 focus-within:ring-2 focus-within:ring-primary-500/50 my-6" role="article" aria-labelledby="hb-embed-title-hb-embed-1060ab6b8f749a4a91ae927bcf619594"> <div class="flex items-center gap-3 p-6 border-b border-zinc-100 dark:border-zinc-800"> <div class="flex-shrink-0"> <div class="w-10 h-10 rounded-full bg-gradient-to-br from-zinc-700 to-zinc-800 flex items-center justify-center"> <svg class="w-5 h-5 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a9 9 0 0 1 7.843 4.582M12 3a9 9 0 0 0-7.843 4.582m15.686 0A11.95 11.95 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.96 8.96 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.9 17.9 0 0 1 12 16.5a17.9 17.9 0 0 1-8.716-2.247m0 0A9 9 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418"/></svg> </div> </div> <div class="flex-1 min-w-0"> <h3 id="hb-embed-title-hb-embed-1060ab6b8f749a4a91ae927bcf619594" class="text-xl font-bold tracking-tight leading-tight truncate"> <a href="https://example.com" target="_blank" rel="noopener" class="text-zinc-900 dark:text-zinc-100 hover:text-primary-600 dark:hover:text-primary-400 hover:underline transition-colors duration-200">My Custom Resource</a> </h3> <div class="flex items-center gap-2 mt-1"> <span class="text-sm text-zinc-500 dark:text-zinc-500">example.com</span></div> </div> <div class="flex-shrink-0"> <a href="https://example.com" target="_blank" rel="noopener" class="text-zinc-400 hover:text-primary-500 transition-colors duration-200"> <svg class="w-5 h-5 hb-embed-link" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/></svg> </a> </div> </div> <div class="p-6 space-y-4"> <p class="text-zinc-600 dark:text-zinc-400 text-base leading-relaxed line-clamp-3"> A great resource for learning </p> </div> <div class="absolute inset-0 pointer-events-none bg-gradient-to-r from-primary-500/0 via-primary-500/5 to-secondary-500/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> <div class="sr-only" data-hb-component="embed" data-hb-version="1.0" data-hb-license="MIT"> Powered by Hugo Blox Kit - https://github.com/HugoBlox/kit </div> </div> <h3 id="custom-images">Custom Images</h3> <p>Embed beautiful images from any source with Hugo image processing (Unsplash, custom URLs, etc.):</p> <div class="group bg-white/90 dark:bg-zinc-900/90 backdrop-blur-sm rounded-2xl ring-1 ring-zinc-900/5 dark:ring-white/10 shadow-lg overflow-hidden transition-all duration-300 ease-out hover:shadow-xl hover:shadow-primary-500/10 hover:-translate-y-1 focus-within:ring-2 focus-within:ring-primary-500/50 my-6" role="article" aria-labelledby="hb-embed-title-hb-embed-f806126bcb6daf4474f6dc0c3f676627"> <div class="flex items-center gap-3 p-6 border-b border-zinc-100 dark:border-zinc-800"> <div class="flex-shrink-0"> <div class="w-10 h-10 rounded-full bg-gradient-to-br from-zinc-700 to-zinc-800 flex items-center justify-center"> <svg class="w-5 h-5 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a9 9 0 0 1 7.843 4.582M12 3a9 9 0 0 0-7.843 4.582m15.686 0A11.95 11.95 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.96 8.96 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.9 17.9 0 0 1 12 16.5a17.9 17.9 0 0 1-8.716-2.247m0 0A9 9 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418"/></svg> </div> </div> <div class="flex-1 min-w-0"> <h3 id="hb-embed-title-hb-embed-f806126bcb6daf4474f6dc0c3f676627" class="text-xl font-bold tracking-tight leading-tight truncate"> <a href="https://example.com" target="_blank" rel="noopener" class="text-zinc-900 dark:text-zinc-100 hover:text-primary-600 dark:hover:text-primary-400 hover:underline transition-colors duration-200">Data Visualization Guide</a> </h3> <div class="flex items-center gap-2 mt-1"> <span class="text-sm text-zinc-500 dark:text-zinc-500">example.com</span></div> </div> <div class="flex-shrink-0"> <a href="https://example.com" target="_blank" rel="noopener" class="text-zinc-400 hover:text-primary-500 transition-colors duration-200"> <svg class="w-5 h-5 hb-embed-link" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/></svg> </a> </div> </div> <div class="p-6 space-y-4"> <div class="mb-4 overflow-hidden rounded-lg"> </div><p class="text-zinc-600 dark:text-zinc-400 text-base leading-relaxed line-clamp-3"> Beautiful data visualization workspace </p> </div> <div class="absolute inset-0 pointer-events-none bg-gradient-to-r from-primary-500/0 via-primary-500/5 to-secondary-500/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> <div class="sr-only" data-hb-component="embed" data-hb-version="1.0" data-hb-license="MIT"> Powered by Hugo Blox Kit - https://github.com/HugoBlox/kit </div> </div> <p>You can also add images to any platform embed:</p> <div class="group bg-white/90 dark:bg-zinc-900/90 backdrop-blur-sm rounded-2xl ring-1 ring-zinc-900/5 dark:ring-white/10 shadow-lg overflow-hidden transition-all duration-300 ease-out hover:shadow-xl hover:shadow-primary-500/10 hover:-translate-y-1 focus-within:ring-2 focus-within:ring-primary-500/50 my-6" role="article" aria-labelledby="hb-embed-title-hb-embed-2601f1cc7e4c8fb6576eee9e1fb227d9"> <div class="flex items-center gap-3 p-6 border-b border-zinc-100 dark:border-zinc-800"> <div class="flex-shrink-0"> <div class="w-10 h-10 rounded-full bg-gradient-to-br from-slate-800 to-slate-900 flex items-center justify-center"> <svg class="w-6 h-6 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg> </div> </div> <div class="flex-1 min-w-0"> <h3 id="hb-embed-title-hb-embed-2601f1cc7e4c8fb6576eee9e1fb227d9" class="text-xl font-bold tracking-tight leading-tight truncate"> <a href="https://github.com/plotly/plotly.py" target="_blank" rel="noopener" class="text-zinc-900 dark:text-zinc-100 hover:text-primary-600 dark:hover:text-primary-400 hover:underline transition-colors duration-200">plotly.py</a> </h3> <div class="flex items-center gap-2 mt-1"> <span class="text-sm text-zinc-600 dark:text-zinc-400">by <a href="https://github.com/plotly" target="_blank" rel="noopener" class="font-medium hover:text-primary-600 dark:hover:text-primary-400 hover:underline transition-colors duration-200">plotly</a> </span><span class="text-sm text-zinc-500 dark:text-zinc-500">•</span> <span class="inline-block w-2 h-2 rounded-full bg-primary-500"></span> <span class="text-sm text-zinc-500 dark:text-zinc-500 capitalize">Python</span></div> </div> <div class="flex-shrink-0"> <a href="https://github.com/plotly/plotly.py" target="_blank" rel="noopener" class="text-zinc-400 hover:text-primary-500 transition-colors duration-200"> <svg class="w-5 h-5 hb-embed-link" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/></svg> </a> </div> </div> <div class="p-6 space-y-4"> <div class="mb-4 overflow-hidden rounded-lg"> </div><p class="text-zinc-600 dark:text-zinc-400 text-base leading-relaxed line-clamp-3"> The interactive graphing library for Python ✨ </p><div class="flex items-center gap-6 pt-2"><div class="flex items-center gap-1.5 text-sm text-zinc-600 dark:text-zinc-400"> <svg class="w-4 h-4 text-primary-500" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M6 2C4.89543 2 4 2.89543 4 4C4 4.74028 4.4022 5.38663 5 5.73244V7C5 8.65685 6.34315 10 8 10H10V11.2676C9.4022 11.6134 9 12.2597 9 13C9 14.1046 9.89543 15 11 15C12.1046 15 13 14.1046 13 13C13 12.2597 12.5978 11.6134 12 11.2676V10H14C15.6569 10 17 8.65685 17 7V5.73244C17.5978 5.38663 18 4.74028 18 4C18 2.89543 17.1046 2 16 2C14.8954 2 14 2.89543 14 4C14 4.74028 14.4022 5.38663 15 5.73244V7C15 7.55228 14.5523 8 14 8H8C7.44772 8 7 7.55228 7 7V5.73244C7.5978 5.38663 8 4.74028 8 4C8 2.89543 7.10457 2 6 2ZM6 4C6 3.44772 6.44772 3 7 3C7.55228 3 8 3.44772 8 4C8 4.55228 7.55228 5 7 5C6.44772 5 6 4.55228 6 4ZM11 13C11 12.4477 11.4477 12 12 12C12.5523 12 13 12.4477 13 13C13 13.5523 12.5523 14 12 14C11.4477 14 11 13.5523 11 13ZM16 3C15.4477 3 15 3.44772 15 4C15 4.55228 15.4477 5 16 5C16.5523 5 17 4.55228 17 4C17 3.44772 16.5523 3 16 3Z"/></svg><span id="hb-hb-embed-2601f1cc7e4c8fb6576eee9e1fb227d9-forks">2.787k</span></div><div class="flex items-center gap-1.5 text-sm text-zinc-600 dark:text-zinc-400"> <svg class="w-4 h-4 text-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9 3.75h.008v.008H12z"/></svg> <a href="https://github.com/plotly/plotly.py/issues" target="_blank" rel="noopener" class="font-medium hover:text-primary-600 dark:hover:text-primary-400 hover:underline transition-colors duration-200" id="hb-hb-embed-2601f1cc7e4c8fb6576eee9e1fb227d9-issues">777</a></div><div class="flex items-center gap-1.5 text-sm text-zinc-600 dark:text-zinc-400"> <svg class="w-4 h-4 text-yellow-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.56.56 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.56.56 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.56.56 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.56.56 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.56.56 0 0 0 .475-.345z"/></svg><span id="hb-hb-embed-2601f1cc7e4c8fb6576eee9e1fb227d9-stars">18.334k</span></div></div><div class="flex flex-wrap gap-1 pt-2"><span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-primary-100 text-primary-800 dark:bg-primary-900/40 dark:text-primary-300"> d3 </span><span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-primary-100 text-primary-800 dark:bg-primary-900/40 dark:text-primary-300"> dashboard </span><span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-primary-100 text-primary-800 dark:bg-primary-900/40 dark:text-primary-300"> declarative </span><span class="text-xs text-zinc-500 dark:text-zinc-500">+11</span></div> </div> <div class="absolute inset-0 pointer-events-none bg-gradient-to-r from-primary-500/0 via-primary-500/5 to-secondary-500/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> <div class="sr-only" data-hb-component="embed" data-hb-version="1.0" data-hb-license="MIT"> Powered by Hugo Blox Kit - https://github.com/HugoBlox/kit </div> </div> <h2 id="charts">Charts</h2> <p>Hugo Blox supports the popular format for interactive data visualizations. With Plotly, you can design almost any kind of visualization you can imagine!</p> <p>Save your Plotly JSON in your page folder, for example <code>line-chart.json</code>, and then add the <code>{{< chart data="line-chart" >}}</code> shortcode where you would like the chart to appear.</p> <p>Demo:</p> <div id="chart-976214385" class="chart"></div> <script> (function() { async function fetchChartJSON() { console.debug('Hugo Blox fetching chart JSON...') const response = await fetch('.\/line-chart.json'); return await response.json(); } let a = setInterval( function() { if ( typeof window.Plotly === 'undefined' ) { console.debug('Plotly not loaded yet...') return; } clearInterval( a ); fetchChartJSON().then(chart => { console.debug('Plotting chart...') window.Plotly.newPlot('chart-976214385', chart.data, chart.layout, {responsive: true}); }); }, 500 ); })(); </script> <p>You might also find the useful.</p> <h2 id="diagrams">Diagrams</h2> <p>Hugo Blox supports the <em>Mermaid</em> Markdown extension for diagrams.</p> <p>An example <strong>flowchart</strong>:</p> <pre><code>```mermaid graph TD A[Hard] -->|Text| B(Round) B --> C{Decision} C -->|One| D[Result 1] C -->|Two| E[Result 2] ``` </code></pre> <p>renders as</p> <div class="mermaid">graph TD A[Hard] -->|Text| B(Round) B --> C{Decision} C -->|One| D[Result 1] C -->|Two| E[Result 2] </div> <p>An example <strong>sequence diagram</strong>:</p> <pre><code>```mermaid sequenceDiagram Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good! ``` </code></pre> <p>renders as</p> <div class="mermaid">sequenceDiagram Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good! </div> <p>An example <strong>class diagram</strong>:</p> <pre><code>```mermaid classDiagram Class01 <|-- AveryLongClass : Cool Class03 *-- Class04 Class05 o-- Class06 Class07 .. Class08 Class09 --> C2 : Where am i? Class09 --* C3 Class09 --|> Class07 Class07 : equals() Class07 : Object[] elementData Class01 : size() Class01 : int chimp Class01 : int gorilla Class08 <--> C2: Cool label ``` </code></pre> <p>renders as</p> <div class="mermaid">classDiagram Class01 <|-- AveryLongClass : Cool Class03 *-- Class04 Class05 o-- Class06 Class07 .. Class08 Class09 --> C2 : Where am i? Class09 --* C3 Class09 --|> Class07 Class07 : equals() Class07 : Object[] elementData Class01 : size() Class01 : int chimp Class01 : int gorilla Class08 <--> C2: Cool label </div> <p>An example <strong>state diagram</strong>:</p> <pre><code>```mermaid stateDiagram [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*] ``` </code></pre> <p>renders as</p> <div class="mermaid">stateDiagram [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*] </div> <h2 id="data-frames">Data Frames</h2> <p>Save your spreadsheet as a CSV file in your page’s folder and then render it by adding the <em>Table</em> shortcode to your page:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{<</span><span class="w"> </span><span class="nx">table</span><span class="w"> </span><span class="nx">path</span><span class="p">=</span><span class="s">"results.csv"</span><span class="w"> </span><span class="nx">header</span><span class="p">=</span><span class="s">"true"</span><span class="w"> </span><span class="nx">caption</span><span class="p">=</span><span class="s">"Table 1: My results"</span><span class="w"> </span><span class="p">>}}</span><span class="w"> </span></span></span></code></pre></div><p>renders as</p> <table class="table-auto w-full"> <thead> <tr> <th class="border-b dark:border-slate-600 font-medium p-4 pt-0 pb-3 text-slate-400 dark:text-slate-200 text-left">customer_id</th> <th class="border-b dark:border-slate-600 font-medium p-4 pt-0 pb-3 text-slate-400 dark:text-slate-200 text-left">score</th> </tr> </thead> <tbody> <tr> <td data-table-dtype="number" class="border-b border-slate-100 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400">1</td> <td data-table-dtype="number" class="border-b border-slate-100 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400">0</td> </tr> <tr> <td data-table-dtype="number" class="border-b border-slate-100 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400">2</td> <td data-table-dtype="text" class="border-b border-slate-100 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400">0.5</td> </tr> <tr> <td data-table-dtype="number" class="border-b border-slate-100 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400">3</td> <td data-table-dtype="number" class="border-b border-slate-100 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400">1</td> </tr> </tbody> <caption class="table-caption">Table 1: My results</caption> </table> <h2 id="interactive-buttons">Interactive Buttons</h2> <p>Add engaging call-to-action buttons to your data visualization posts:</p> <h3 id="basic-buttons">Basic Buttons</h3> <div class="text-left"> <a id="button-f6786b243b05dfec18e9fa306eafdd55" href="https://celine-fouard.fr/" class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 active:from-primary-700 active:to-primary-800 text-white shadow-lg shadow-primary-500/25 hover:shadow-xl hover:shadow-primary-500/30 hover:-translate-y-0.5 hover:scale-[1.02] active:scale-[0.98] focus:ring-primary-500/50 px-4 py-2 text-base rounded-lg" role="button" aria-label="Contact Us" > <span>Contact Us</span> </a> </div> <p> </p> <div class="text-left"> <a id="button-f993ff69358f7d4c1a0e93e5241d3d91" href="https://plotly.com/python/" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-secondary-500 to-secondary-600 hover:from-secondary-600 hover:to-secondary-700 active:from-secondary-700 active:to-secondary-800 text-white shadow-lg shadow-secondary-500/25 hover:shadow-xl hover:shadow-secondary-500/30 hover:scale-105 active:scale-95 focus:ring-secondary-500/50 px-4 py-2 text-base rounded-lg" role="button" aria-label="Learn Plotly" > <span>Learn Plotly</span> </a> </div> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go-html-template" data-lang="go-html-template"><span class="line"><span class="cl"><span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="nx">button</span><span class="w"> </span><span class="nx">url</span><span class="o">=</span><span class="s">"/"</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span>Contact Us<span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="err">/</span><span class="nx">button</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="nx">button</span><span class="w"> </span><span class="nx">url</span><span class="o">=</span><span class="s">"https://plotly.com/python/"</span><span class="w"> </span><span class="nx">new_tab</span><span class="o">=</span><span class="s">"true"</span><span class="w"> </span><span class="nx">style</span><span class="o">=</span><span class="s">"secondary"</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span>Learn Plotly<span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="err">/</span><span class="nx">button</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span> </span></span></code></pre></div><h3 id="styled-buttons-for-data-actions">Styled Buttons for Data Actions</h3> <div class="text-center"> <a id="button-a50fabbc2a61abf69dd282800ce0e5ed" href="#" class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 active:from-primary-700 active:to-primary-800 text-white shadow-lg shadow-primary-500/25 hover:shadow-xl hover:shadow-primary-500/30 hover:-translate-y-0.5 hover:scale-[1.02] active:scale-[0.98] focus:ring-primary-500/50 px-6 py-3 text-lg rounded-lg" role="button" aria-label="View Dashboard" > <span class="flex-shrink-0"> <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875zm6.75-4.5c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125zm6.75-4.5c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125z"/></svg> </span> <span>View Dashboard</span> </a> </div> <p> </p> <div class="text-left"> <a id="button-c32d42abf170111c3a98f095a79ecf1f" href="https://celine-fouard.fr/data/results.csv" class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-white dark:bg-zinc-900 border-2 border-primary-500 text-primary-600 dark:text-primary-400 hover:bg-primary-50 dark:hover:bg-primary-950/50 hover:border-primary-600 active:bg-primary-100 dark:active:bg-primary-950 shadow-md hover:shadow-lg hover:scale-105 active:scale-95 focus:ring-primary-500/50 px-4 py-2 text-base rounded-lg" role="button" aria-label="Download Data" > <span class="flex-shrink-0"> <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m.75 12l3 3m0 0l3-3m-3 3v-6m-1.5-9H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9"/></svg> </span> <span>Download Data</span> </a> </div> <p> </p> <div class="text-left"> <a id="button-6beec770e2765a07c4e7dab5ed36f07a" href="https://github.com/HugoBlox" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-transparent text-primary-600 dark:text-primary-400 hover:bg-primary-50 dark:hover:bg-primary-950/50 active:bg-primary-100 dark:active:bg-primary-950 hover:scale-105 active:scale-95 focus:ring-primary-500/50 px-4 py-2 text-base rounded-lg" role="button" aria-label="View Source Code" > <span>View Source Code</span> <span class="flex-shrink-0"> <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/></svg> </span> </a> </div> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go-html-template" data-lang="go-html-template"><span class="line"><span class="cl"><span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="nx">button</span><span class="w"> </span><span class="nx">url</span><span class="o">=</span><span class="s">"#"</span><span class="w"> </span><span class="nx">style</span><span class="o">=</span><span class="s">"primary"</span><span class="w"> </span><span class="nx">size</span><span class="o">=</span><span class="s">"lg"</span><span class="w"> </span><span class="nx">align</span><span class="o">=</span><span class="s">"center"</span><span class="w"> </span><span class="nx">icon</span><span class="o">=</span><span class="s">"chart-bar"</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span>View Dashboard<span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="err">/</span><span class="nx">button</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="nx">button</span><span class="w"> </span><span class="nx">url</span><span class="o">=</span><span class="s">"/data/results.csv"</span><span class="w"> </span><span class="nx">style</span><span class="o">=</span><span class="s">"outline"</span><span class="w"> </span><span class="nx">icon</span><span class="o">=</span><span class="s">"document-arrow-down"</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span>Download Data<span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="err">/</span><span class="nx">button</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="nx">button</span><span class="w"> </span><span class="nx">url</span><span class="o">=</span><span class="s">"https://github.com/HugoBlox"</span><span class="w"> </span><span class="nx">new_tab</span><span class="o">=</span><span class="s">"true"</span><span class="w"> </span><span class="nx">style</span><span class="o">=</span><span class="s">"ghost"</span><span class="w"> </span><span class="nx">icon</span><span class="o">=</span><span class="s">"arrow-top-right-on-square"</span><span class="w"> </span><span class="nx">icon_position</span><span class="o">=</span><span class="s">"right"</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span>View Source Code<span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="err">/</span><span class="nx">button</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span> </span></span></code></pre></div><h3 id="multiple-aligned-buttons">Multiple Aligned Buttons</h3> <div class="text-center"> <a id="button-21cda02c69c36a678bc00ecf1d332e03" href="https://jupyter.org/" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-secondary-500 to-secondary-600 hover:from-secondary-600 hover:to-secondary-700 active:from-secondary-700 active:to-secondary-800 text-white shadow-lg shadow-secondary-500/25 hover:shadow-xl hover:shadow-secondary-500/30 hover:scale-105 active:scale-95 focus:ring-secondary-500/50 px-4 py-2 text-base rounded-full" role="button" aria-label="Try Jupyter" > <span>Try Jupyter</span> </a> </div> <p> </p> <div class="text-center"> <a id="button-95172520d19d2439e15b09b4849f82e7" href="https://colab.research.google.com/" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 active:from-primary-700 active:to-primary-800 text-white shadow-lg shadow-primary-500/25 hover:shadow-xl hover:shadow-primary-500/30 hover:-translate-y-0.5 hover:scale-[1.02] active:scale-[0.98] focus:ring-primary-500/50 px-4 py-2 text-base rounded-full" role="button" aria-label="Open in Colab" > <span class="flex-shrink-0"> <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.59 14.37q.159.666.16 1.38a6 6 0 0 1-6 6v-4.8m5.84-2.58a14.98 14.98 0 0 0 6.16-12.12A14.98 14.98 0 0 0 9.631 8.41m5.96 5.96a14.9 14.9 0 0 1-5.841 2.58m-.119-8.54a6 6 0 0 0-7.381 5.84h4.8m2.581-5.84a14.9 14.9 0 0 0-2.58 5.84m2.699 2.7q-.155.032-.311.06a15 15 0 0 1-2.448-2.448l.06-.312m-2.24 2.39a4.49 4.49 0 0 0-1.757 4.306q.341.054.696.054a4.5 4.5 0 0 0 3.61-1.812M16.5 9a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0"/></svg> </span> <span>Open in Colab</span> </a> </div> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go-html-template" data-lang="go-html-template"><span class="line"><span class="cl"><span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="nx">button</span><span class="w"> </span><span class="nx">url</span><span class="o">=</span><span class="s">"https://jupyter.org/"</span><span class="w"> </span><span class="nx">new_tab</span><span class="o">=</span><span class="s">"true"</span><span class="w"> </span><span class="nx">style</span><span class="o">=</span><span class="s">"secondary"</span><span class="w"> </span><span class="nx">rounded</span><span class="o">=</span><span class="s">"full"</span><span class="w"> </span><span class="nx">align</span><span class="o">=</span><span class="s">"center"</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span>Try Jupyter<span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="err">/</span><span class="nx">button</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="nx">button</span><span class="w"> </span><span class="nx">url</span><span class="o">=</span><span class="s">"https://colab.research.google.com/"</span><span class="w"> </span><span class="nx">new_tab</span><span class="o">=</span><span class="s">"true"</span><span class="w"> </span><span class="nx">style</span><span class="o">=</span><span class="s">"primary"</span><span class="w"> </span><span class="nx">rounded</span><span class="o">=</span><span class="s">"full"</span><span class="w"> </span><span class="nx">align</span><span class="o">=</span><span class="s">"center"</span><span class="w"> </span><span class="nx">icon</span><span class="o">=</span><span class="s">"rocket-launch"</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span>Open in Colab<span class="cp">{{</span><span class="err"><</span><span class="w"> </span><span class="err">/</span><span class="nx">button</span><span class="w"> </span><span class="err">></span><span class="cp">}}</span> </span></span></code></pre></div><h2 id="did-you-find-this-page-helpful-consider-sharing-it-">Did you find this page helpful? Consider sharing it 🙌</h2> </article> <article> <h1>👩🏼‍🏫 Teach academic courses</h1> <p>Tue, 24 Oct 2023 00:00:00 +0000</p> <p> is designed to give technical content creators a seamless experience. You can focus on the content and the HugoBlox Kit which this template is built upon handles the rest.</p> <p><strong>Embed videos, podcasts, code, LaTeX math, and even test students!</strong></p> <p>On this page, you’ll find some examples of the types of technical content that can be rendered with Hugo Blox.</p> <h2 id="citation">Citation</h2> <p>Here’s an example of citing a publication using the cite shortcode:</p> <p>You can also use the default view by omitting the view parameter:</p> <h2 id="video">Video</h2> <p>Teach your course by sharing videos with your students. Choose from one of the following approaches:</p> <p><strong>Youtube</strong>:</p> <pre><code>{{< youtube D2vj0WcvH5c >}} </code></pre> <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"> </div> <p><strong>Bilibili</strong>:</p> <pre><code>{{< bilibili BV1WV4y1r7DF >}} </code></pre> <p><strong>Video file</strong></p> <p>Videos may be added to a page by either placing them in your <code>assets/media/</code> media library or in your , and then embedding them with the <em>video</em> shortcode:</p> <pre><code>{{< video src="my_video.mp4" controls="yes" >}} </code></pre> <h2 id="podcast">Podcast</h2> <p>You can add a podcast or music to a page by placing the MP3 file in the page’s folder or the media library folder and then embedding the audio on your page with the <em>audio</em> shortcode:</p> <pre><code>{{< audio src="ambient-piano.mp3" >}} </code></pre> <p>Try it out:</p> </audio> <h2 id="test-students">Test students</h2> <p>Provide a simple yet fun self-assessment by revealing the solutions to challenges with the <code>spoiler</code> shortcode:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">{{< spoiler text="👉 Click to view the solution" >}} </span></span><span class="line"><span class="cl">You found me! </span></span><span class="line"><span class="cl">{{< /spoiler >}} </span></span></code></pre></div><p>renders as</p> <details class="spoiler " id="spoiler-4"> <summary class="cursor-pointer">👉 Click to view the solution</summary> <div class="rounded-lg bg-neutral-50 dark:bg-neutral-800 p-2"> You found me 🎉 </div> </details> <h2 id="math">Math</h2> <p>HugoBlox Kit supports a Markdown extension for $\LaTeX$ math. Enable math by setting the <code>math: true</code> option in your page’s front matter, or enable math for your entire site by toggling math in your <code>config/_default/params.yaml</code> file:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">features</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">math</span><span class="p">:</span><span class="w"> </span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">enable</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w"> </span></span></span></code></pre></div><p>To render <em>inline</em> or <em>block</em> math, wrap your LaTeX math with <code>$...$</code> or <code>$$...$$</code>, respectively.</p> <p>Example <strong>math block</strong>:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-latex" data-lang="latex"><span class="line"><span class="cl"><span class="sb">$$</span><span class="nb"> </span></span></span><span class="line"><span class="cl"><span class="nv">\gamma</span><span class="nb">_{n} </span><span class="o">=</span><span class="nb"> </span><span class="nv">\frac</span><span class="nb">{ </span><span class="nv">\left</span><span class="nb"> | </span><span class="nv">\left</span><span class="nb"> </span><span class="o">(</span><span class="nv">\mathbf</span><span class="nb"> x_{n} </span><span class="o">-</span><span class="nb"> </span><span class="nv">\mathbf</span><span class="nb"> x_{n</span><span class="o">-</span><span class="m">1</span><span class="nb">} </span><span class="nv">\right</span><span class="nb"> </span><span class="o">)</span><span class="nb">^T </span><span class="nv">\left</span><span class="nb"> </span><span class="o">[</span><span class="nv">\nabla</span><span class="nb"> F </span><span class="o">(</span><span class="nv">\mathbf</span><span class="nb"> x_{n}</span><span class="o">)</span><span class="nb"> </span><span class="o">-</span><span class="nb"> </span><span class="nv">\nabla</span><span class="nb"> F </span><span class="o">(</span><span class="nv">\mathbf</span><span class="nb"> x_{n</span><span class="o">-</span><span class="m">1</span><span class="nb">}</span><span class="o">)</span><span class="nb"> </span><span class="nv">\right</span><span class="nb"> </span><span class="o">]</span><span class="nb"> </span><span class="nv">\right</span><span class="nb"> |}{</span><span class="nv">\left</span><span class="nb"> </span><span class="nv">\|\nabla</span><span class="nb"> F</span><span class="o">(</span><span class="nv">\mathbf</span><span class="nb">{x}_{n}</span><span class="o">)</span><span class="nb"> </span><span class="o">-</span><span class="nb"> </span><span class="nv">\nabla</span><span class="nb"> F</span><span class="o">(</span><span class="nv">\mathbf</span><span class="nb">{x}_{n</span><span class="o">-</span><span class="m">1</span><span class="nb">}</span><span class="o">)</span><span class="nb"> </span><span class="nv">\right</span><span class="nb"> </span><span class="nv">\|</span><span class="nb">^</span><span class="m">2</span><span class="nb">} </span></span></span><span class="line"><span class="cl"><span class="s">$$</span> </span></span></code></pre></div><p>renders as</p> $$\gamma_{n} = \frac{ \left | \left (\mathbf x_{n} - \mathbf x_{n-1} \right )^T \left [\nabla F (\mathbf x_{n}) - \nabla F (\mathbf x_{n-1}) \right ] \right |}{\left \|\nabla F(\mathbf{x}_{n}) - \nabla F(\mathbf{x}_{n-1}) \right \|^2}$$<p>Example <strong>inline math</strong> <code>$\nabla F(\mathbf{x}_{n})$</code> renders as $\nabla F(\mathbf{x}_{n})$.</p> <p>Example <strong>multi-line math</strong> using the math linebreak (<code>\\</code>):</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-latex" data-lang="latex"><span class="line"><span class="cl"><span class="sb">$$</span><span class="nb">f</span><span class="o">(</span><span class="nb">k;p_{</span><span class="m">0</span><span class="nb">}^{</span><span class="o">*</span><span class="nb">}</span><span class="o">)</span><span class="nb"> </span><span class="o">=</span><span class="nb"> </span><span class="nv">\begin</span><span class="nb">{cases}p_{</span><span class="m">0</span><span class="nb">}^{</span><span class="o">*</span><span class="nb">} & </span><span class="nv">\text</span><span class="nb">{if }k</span><span class="o">=</span><span class="m">1</span><span class="nb">, </span><span class="nv">\\</span><span class="nb"> </span></span></span><span class="line"><span class="cl"><span class="m">1</span><span class="o">-</span><span class="nb">p_{</span><span class="m">0</span><span class="nb">}^{</span><span class="o">*</span><span class="nb">} & </span><span class="nv">\text</span><span class="nb">{if }k</span><span class="o">=</span><span class="m">0</span><span class="nb">.</span><span class="nv">\end</span><span class="nb">{cases}</span><span class="s">$$</span> </span></span></code></pre></div><p>renders as</p> $$ f(k;p_{0}^{*}) = \begin{cases}p_{0}^{*} & \text{if }k=1, \\ 1-p_{0}^{*} & \text{if }k=0.\end{cases} $$<h2 id="code">Code</h2> <p>HugoBlox Kit utilises Hugo’s Markdown extension for highlighting code syntax. The code theme can be selected in the <code>config/_default/params.yaml</code> file.</p> <pre><code>```python import pandas as pd data = pd.read_csv("data.csv") data.head() ``` </code></pre> <p>renders as</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="kn">import</span> <span class="nn">pandas</span> <span class="k">as</span> <span class="nn">pd</span> </span></span><span class="line"><span class="cl"><span class="n">data</span> <span class="o">=</span> <span class="n">pd</span><span class="o">.</span><span class="n">read_csv</span><span class="p">(</span><span class="s2">"data.csv"</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="n">data</span><span class="o">.</span><span class="n">head</span><span class="p">()</span> </span></span></code></pre></div><h2 id="inline-images">Inline Images</h2> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{<</span><span class="w"> </span><span class="nx">icon</span><span class="w"> </span><span class="nx">name</span><span class="p">=</span><span class="s">"python"</span><span class="w"> </span><span class="p">>}}</span><span class="w"> </span><span class="nx">Python</span><span class="w"> </span></span></span></code></pre></div><p>renders as</p> <p> <span class="inline-block pr-1"> <svg style="height: 1em; transform: translateY(0.1em);" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512" fill="currentColor"><path d="M439.8 200.5c-7.7-30.9-22.3-54.2-53.4-54.2h-40.1v47.4c0 36.8-31.2 67.8-66.8 67.8H172.7c-29.2 0-53.4 25-53.4 54.3v101.8c0 29 25.2 46 53.4 54.3 33.8 9.9 66.3 11.7 106.8 0 26.9-7.8 53.4-23.5 53.4-54.3v-40.7H226.2v-13.6h160.2c31.1 0 42.6-21.7 53.4-54.2 11.2-33.5 10.7-65.7 0-108.6zM286.2 404c11.1 0 20.1 9.1 20.1 20.3 0 11.3-9 20.4-20.1 20.4-11 0-20.1-9.2-20.1-20.4.1-11.3 9.1-20.3 20.1-20.3zM167.8 248.1h106.8c29.7 0 53.4-24.5 53.4-54.3V91.9c0-29-24.4-50.7-53.4-55.6-35.8-5.9-74.7-5.6-106.8.1-45.2 8-53.4 24.7-53.4 55.6v40.7h106.9v13.6h-147c-31.1 0-58.3 18.7-66.8 54.2-9.8 40.7-10.2 66.1 0 108.6 7.6 31.6 25.7 54.2 56.8 54.2H101v-48.8c0-35.3 30.5-66.4 66.8-66.4zm-6.7-142.6c-11.1 0-20.1-9.1-20.1-20.3.1-11.3 9-20.4 20.1-20.4 11 0 20.1 9.2 20.1 20.4s-9 20.3-20.1 20.3z"/></svg> </span> Python</p> <h2 id="did-you-find-this-page-helpful-consider-sharing-it-">Did you find this page helpful? Consider sharing it 🙌</h2> </article> <article> <h1>✅ Manage your projects</h1> <p>Mon, 23 Oct 2023 00:00:00 +0000</p> <p>Easily manage your projects - create ideation mind maps, Gantt charts, todo lists, and more!</p> <h2 id="ideation">Ideation</h2> <p>Hugo Blox supports a Markdown extension for mindmaps.</p> <p>Simply insert a Markdown code block labelled as <code>markmap</code> and optionally set the height of the mindmap as shown in the example below.</p> <p>Mindmaps can be created by simply writing the items as a Markdown list within the <code>markmap</code> code block, indenting each item to create as many sub-levels as you need:</p> <div class="highlight"> <pre class="chroma"> <code> ```markmap {height="200px"} - Hugo Modules - Hugo Blox - netlify - netlify-cms - slides ``` </code> </pre> </div> <p>renders as</p> <div class="markmap" style="height: 200px;"> <pre>- Hugo Modules - Hugo Blox - netlify - netlify-cms - slides</pre> </div> <h2 id="diagrams">Diagrams</h2> <p>Hugo Blox supports the <em>Mermaid</em> Markdown extension for diagrams.</p> <p>An example <strong>Gantt diagram</strong>:</p> <pre><code>```mermaid gantt section Section Completed :done, des1, 2014-01-06,2014-01-08 Active :active, des2, 2014-01-07, 3d Parallel 1 : des3, after des1, 1d Parallel 2 : des4, after des1, 1d Parallel 3 : des5, after des3, 1d Parallel 4 : des6, after des4, 1d ``` </code></pre> <p>renders as</p> <div class="mermaid">gantt section Section Completed :done, des1, 2014-01-06,2014-01-08 Active :active, des2, 2014-01-07, 3d Parallel 1 : des3, after des1, 1d Parallel 2 : des4, after des1, 1d Parallel 3 : des5, after des3, 1d Parallel 4 : des6, after des4, 1d </div> <h2 id="todo-lists">Todo lists</h2> <p>You can even write your todo lists in Markdown too:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl"><span class="k">- [x]</span> Write math example </span></span><span class="line"><span class="cl"> <span class="k">- [x]</span> Write diagram example </span></span><span class="line"><span class="cl"><span class="k">- [ ]</span> Do something else </span></span></code></pre></div><p>renders as</p> <ul> <li><input checked="" disabled="" type="checkbox"> Write math example <ul> <li><input checked="" disabled="" type="checkbox"> Write diagram example</li> </ul> </li> <li><input disabled="" type="checkbox"> Do something else</li> </ul> <h2 id="did-you-find-this-page-helpful-consider-sharing-it-">Did you find this page helpful? Consider sharing it 🙌</h2> </article> <article> <h1>Transformers-Based Neural Network for Cardiac Infarction Segmentation in Delayed-Enhancement MRI</h1> <p>Mon, 16 Oct 2023 00:00:00 +0000</p> </article> <article> <h1>User-centered design for the development of a patient monitoring software for peripheral arterial disease</h1> <p>Sun, 01 Oct 2023 00:00:00 +0000</p> </article> <article> <h1>Connector for cables</h1> <p>Thu, 31 Mar 2022 00:00:00 +0000</p> </article> <article> <h1>REMI — Decision Support for Lower-Limb Endovascular Revascularization</h1> <p>Wed, 01 Sep 2021 00:00:00 +0000</p> <p><em>How do you help a vascular surgeon choose the best revascularization strategy, when the success of a technique remains hard to predict? REMI explores one answer: learning from past cases — the way an experienced clinician does — but in a tooled, traceable and interpretable way.</em></p> <h2 id="the-result-first">The result, first</h2> <p><strong>REMI</strong> (from the French <em>Revascularisation Endovasculaire des Membres Inférieurs</em> — Lower-Limb Endovascular Revascularization) is a clinical decision-support project I have coordinated since 2021, in close collaboration with the vascular surgery department of Grenoble Alpes University Hospital. Within a few years, it has made it possible to:</p> <ul> <li>design and <strong>deploy in the clinic</strong> a user-centred data-collection software;</li> <li>turn real clinical data — incomplete and heterogeneous — into a usable <strong>case base</strong>;</li> <li>demonstrate the relevance of <strong>case-based reasoning</strong> to suggest, for a new patient, the strategies that succeeded in similar patients;</li> <li>bring a doctoral thesis to completion (<strong>Margaux Roux</strong>, defended with distinction on 16 December 2025) and lead a multidisciplinary team funded by five successive grants.</li> </ul> <p>This project consisted of taking a concrete clinical need, translating it into specifications, removing the technical <em>and</em> organizational roadblocks, and going all the way to a genuinely used prototype.</p> <h2 id="the-clinical-problem-a-decision-that-is-hard-to-anticipate">The clinical problem: a decision that is hard to anticipate</h2> <p><strong>Peripheral Arterial Disease (PAD)</strong> of the lower limbs is an arterial condition whose main symptoms are pain and ischemic wounds. To avoid severe complications — amputation, death — <strong>revascularization</strong> aims to restore blood flow, either endovascularly (angioplasty, stenting) or through open surgery.</p> <p>The problem: the probability of success or failure of a given technique remains <strong>hard to predict</strong>. The surgeon relies on decision trees, scores (WIfI) and, above all, on experience. To date, no tool fully helps them choose, for <em>this</em> patient, the most promising strategy.</p> <figure><figcaption> <p>Endovascular revascularization techniques: angioplasty and stenting (fig. 1.9, M. Roux thesis).</p> </figcaption> </figure> <h2 id="a-method-case-based-reasoning">A method: case-based reasoning</h2> <p>Clinical decision-support systems traditionally fall into two families: <strong>statistical</strong> approaches, powerful but often poorly interpretable (“black boxes”), and <strong>expert-rule</strong> approaches, transparent but hard to scale.</p> <p>REMI explores a middle path: <strong>Case-Based Reasoning (CBR)</strong>. Its assumption — <em>“similar problems have similar solutions”</em> — translates, in the clinic, into: <em>similar symptoms, treated with similar therapies, lead to similar outcomes</em>. It is a learning method close to medical reasoning itself, and naturally more <strong>explainable</strong>: every recommendation rests on real cases that can be examined.</p> <p>The CBR cycle unfolds in four steps (shown in the cover image): <strong>retrieve</strong> similar cases, <strong>reuse</strong> and adapt their solution, <strong>revise</strong> the outcome, then <strong>retain</strong> the new case to enrich the base.</p> <h2 id="from-raw-clinical-data-to-a-usable-case-base">From raw clinical data to a usable case base</h2> <p>This is often the most underestimated — and most structuring — step. The data available in electronic health records are incomplete, heterogeneous and designed for care, not for analysis. The project therefore had to:</p> <ul> <li><strong>model a “case”</strong>: a set of attributes describing the problem (severity, WIfI score, lesion anatomy, comorbidities) and a second set describing the surgical solution and its outcome;</li> <li>explicitly handle <strong>missing data</strong> and attribute typing;</li> <li>combine <strong>retrospective</strong> and <strong>prospective</strong> data, then develop a <strong>Python</strong> extraction-and-aggregation pipeline that transforms patient-centred data into a decision-support-oriented case base.</li> </ul> <figure><figcaption> <p>Class diagram of the data model implemented in the collection software (fig. 3.9, M. Roux thesis).</p> </figcaption> </figure> <h2 id="a-user-centred-prototype-deployed-in-the-clinic">A user-centred prototype, deployed in the clinic</h2> <p>To collect high-quality prospective data, we designed a <strong>prototype software</strong> directly usable by clinicians, within their workflow. It automatically computes the <strong>WIfI score</strong> (and thus the amputation risk), models an operation as a sequence of surgical gestures applied to lesions, and automatically generates an <strong>operative report</strong>.</p> <p>This is exactly the kind of deliverable I care about: a tool designed <em>with</em> and <em>for</em> its users, robust enough to leave the lab bench and enter clinical practice. Developing this application justified hiring a dedicated research engineer.</p> <figure><figcaption> <p>Interface of the prototype data-collection software (fig. 3.11, M. Roux thesis).</p> </figcaption> </figure> </video> <p><em>Demo video of the software, presented at the project’s first conference (in French).</em></p> <h2 id="representing-cases-to-compare-them">Representing cases to compare them</h2> <p>Comparing two patients requires a sound <strong>similarity</strong> measure between cases. The project relies on an <strong>autoencoder</strong>: a neural network that learns to represent each case in a compact latent space, where geometric proximity reflects clinical similarity. Retrieval of relevant cases then takes place in that space.</p> <figure><figcaption> <p>Retrieval of similar cases in the learned latent space (fig. 4.4, M. Roux thesis).</p> </figcaption> </figure> <h2 id="project-leadership-and-funding">Project leadership and funding</h2> <p>Started in 2021 with Prof. Rafaëlle Spear, the project gradually brought together three sites (TIMC in Grenoble, LTSI in Rennes, Grenoble Alpes University Hospital) and was supported by <strong>€284,450</strong> raised from four funding sources.</p> <table> <thead> <tr> <th>Period</th> <th>Project / scheme</th> <th>Co-lead(s)</th> <th>Funding obtained</th> <th>Source</th> <th>Amount</th> </tr> </thead> <tbody> <tr> <td>2021–2022</td> <td>REMI-ORIA</td> <td>Rafaëlle Spear</td> <td>Equipment</td> <td>EMERGENCE (TIMC laboratory)</td> <td>€12,000</td> </tr> <tr> <td>2022–2023</td> <td><em>User-centered development for data collection in endovascular revascularization</em></td> <td>Rafaëlle Spear & Alexandre Demeure</td> <td>2 Master’s (M2) interns (Laure Chatenet & Clément Gasse)</td> <td>MIAI@Grenoble Alpes (ANR-19-P3IA-0003)</td> <td>€11,200</td> </tr> <tr> <td>2024–2025</td> <td><em>CAMI-assistant chair</em></td> <td>Sandrine Voros</td> <td>1 research engineer for one year (Romaric Ruga) + equipment</td> <td>MIAI@Grenoble Alpes (ANR-19-P3IA-0003)</td> <td>€66,056</td> </tr> <tr> <td>2024–2026</td> <td>Decision support — REMI</td> <td>Rafaëlle Spear & Pascal Haigron</td> <td>1 PhD student (Margaux Roux)</td> <td>LabeX CAMI</td> <td>€160,000</td> </tr> <tr> <td>2026–2027</td> <td>Clinical deployment and validation of an AI tool</td> <td>Rafaëlle Spear</td> <td>Thesis completion + 1 intern + software subcontracting</td> <td>Fondation pour l’Avenir</td> <td>€35,194</td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td><strong>Total</strong></td> <td><strong>€284,450</strong></td> </tr> </tbody> </table> <h2 id="supervision-and-collaborations">Supervision and collaborations</h2> <ul> <li><strong>Margaux Roux</strong>, PhD student — thesis <em>“Decision support for lower-limb endovascular revascularization”</em>, defended on 16 December 2025 (co-supervision at 33% with R. Spear and P. Haigron).</li> <li><strong>Laure Chatenet</strong> and <strong>Clément Gasse</strong>, Master’s (M2) interns.</li> <li><strong>Romaric Ruga</strong>, research engineer (finalizing the data-collection software).</li> <li><strong>Prof. Rafaëlle Spear</strong> (PU-PH, vascular surgery, Grenoble Alpes University Hospital) — clinical co-lead since the project’s inception.</li> <li><strong>Prof. Pascal Haigron</strong> (University of Rennes, LTSI) — thesis co-supervisor.</li> <li><strong>Sandrine Voros</strong> (TIMC) and <strong>Alexandre Demeure</strong> — co-leads on funding schemes.</li> </ul> <h2 id="publications">Publications</h2> <ul class="pubs-by-tag"> <li> <strong>2025</strong>. Roux Margaux, Spear Rafaëlle, Fouard Céline, Haigron Pascal — <a href="https://celine-fouard.fr/publication/2025-roux-ijmi/">Retrieving similar cases for clinical decision support in the context of revascularization of lower limbs</a>. <em>International Journal of Medical Informatics, Vol 201, pp105931</em> </li> <li> <strong>2024</strong>. Roux Margaux, Spear Rafaëlle, Haigron Pascal, Demeure Alexandre, Fouard Céline — <a href="https://celine-fouard.fr/publication/2024-roux-embc/">Toward Decision Support System for Lower Limb Endovascular Revascularization</a>. <em>2024 46th Annual International Conference of the IEEE Engineering in Medicine and Biology Society</em> </li> <li> <strong>2023</strong>. Spear Rafaëlle, Fouard Céline, Demeure Alexandre, Gasse Clément, Chatenet Laure — <a href="https://celine-fouard.fr/publication/2023-spear-avs/">User-centered design for the development of a patient monitoring software for peripheral arterial disease</a>. <em>Annals of Vascular Surgery</em> </li> </ul> <hr> <p><em>Together with , this project anchors my work in — with one constant requirement: interpretable methods, genuinely usable tools, and an ongoing dialogue with clinicians.</em></p> </article> <article> <h1>LPR: from a lab idea to a clinical prototype</h1> <p>Mon, 01 Jun 2020 00:00:00 +0000</p> <p><em>Taking a medical robot from concept to first-in-human trials: TRL maturation, quality assurance, risk analysis and industrial spin-off.</em></p> <h2 id="the-clinical-gesture">The clinical gesture</h2> <p>Inserting a needle under image guidance is a common interventional-radiology procedure: for a biopsy or tumour ablation, the clinician acquires a volume image, plans a trajectory on one slice, then inserts the needle. The gesture is delicate — at the moment of insertion the radiologist has very few guidance tools and relies mostly on experience and on memorising the chosen slice. Under CT, checking the trajectory means repeated control images, hence radiation and back-and-forth; under MRI, the gesture becomes almost impossible to perform by hand inside the bore.</p> <div style="display:flex; gap:1rem; align-items:flex-start; margin:1.5rem 0;"> <figure style="flex:1; margin:0;"> </figure> <figure style="flex:1; margin:0;"> </figure> </div> <p>The LPR (<em>Light Puncture Robot</em>) addresses this: a lightweight robot placed directly on the patient to follow its motion as closely as possible, able to hold, position and insert the needle under the clinician’s control. It is compatible with both X-ray CT and MRI — therefore built entirely from non-ferromagnetic materials — and registers itself automatically in the image. The video below sums it up, from registration to needle positioning:</p> <div class="lpr-video-pleine-largeur"> </video> </div> <style>.lpr-video-pleine-largeur video{width:100%;height:auto;border-radius:8px;}</style> <h2 id="climbing-the-trls">Climbing the TRLs</h2> <p>The real challenge with a medical device isn’t having the idea: it’s pushing it up the technology-readiness levels (TRL) until it can be tested on humans. Here is the path the LPR travelled, from concept (TRL 1) to clinical prototype (TRL 6):</p> <p> <figure > <div class="flex justify-center "> <div class="w-full" ></div> </div></figure> </p> <p>The first steps were quick: observing the clinical procedure, the first design, the first prototype (the α prototype, already there when I joined the team). The real work started afterwards. <strong>Moving from TRL 4 to TRL 5</strong> — from a lab-validated robot to one cleared for testing on humans — took far more than research: a redesign of the code under <strong>quality assurance</strong>, a full <strong>risk analysis</strong>, and outside expertise. We worked with our partner <strong>Axe Systems</strong> to manufacture the mechanical part under quality assurance, and with the clinical investigation centre (<strong>CIC-IT</strong>) of Grenoble Alpes University Hospital and the company <strong>SQI</strong> for risk analysis and quality-controlled development. This file secured clearance from the French medicines agency (<strong>ANSM</strong>) and let us build a protocol guaranteeing the robot’s safety for <strong>preclinical trials on healthy subjects in MRI</strong>, without needle insertion.</p> <p> <figure > <div class="flex justify-center "> <div class="w-full" > </div> </div></figure> </p> <p> <figure > <div class="flex justify-center "> <div class="w-full" > </div> </div></figure> </p> <p>These trials mobilised, over two years, a ten-person team that I coordinated (3 from the CIC-IT, 3 from TIMC, 2 from Axe Systems, 2 from SQI).</p> <blockquote class="border-l-4 border-neutral-300 dark:border-neutral-600 pl-4 italic text-neutral-600 dark:text-neutral-400 my-6"> <p>Moving from TRL 4 to TRL 5 means rewriting the code under quality assurance, running a risk analysis, and making research, clinical and industry teams work together. That is exactly the work a company expects when it wants to turn a promising prototype into a credible device.</p> </blockquote> <p>The next step — industrialisation — could no longer happen in the lab. So I led a <strong>start-up</strong> project built on the robot, supported by Grenoble’s tech-transfer office (<strong>SATT Linksium</strong>), first in <strong>maturation</strong> (2017) then in <strong>incubation</strong> (2018–2019). This phase produced <strong>two patents</strong> and <strong>two applications to the national BPI i-Lab innovation contest</strong> (2018 and 2019). The feedback was excellent — 17/20 on the technology dimension, 14.6/20 on the financial dimension, 14.8/20 overall — but the project was ultimately not funded. I recruited and supervised an engineer (Jérémy Lenfant) and then two successive co-founders for the business side (Bertrand Perrin, then Antoine Bourrier).</p> <h2 id="project-management-the-funding">Project management: the funding</h2> <p>Beyond the technical side, the LPR was a long exercise in coordination at the research / clinical / industry interface, backed by a series of grants I secured and ran:</p> <table> <thead> <tr> <th>Project</th> <th>Role</th> <th>Funder / type</th> <th>Partners</th> <th>Period</th> </tr> </thead> <tbody> <tr> <td>Robacus</td> <td>Coordinator</td> <td>ANR TecSan — ANR-11-TECS-020-01</td> <td>TIMC, LIRMM, Grenoble Alpes Univ. Hospital (CIC-IT, radiology), Axe Systems</td> <td>2012–2015</td> </tr> <tr> <td>LPROP</td> <td>Coordinator</td> <td>Carnot LSI Institute — pre-maturation</td> <td>TIMC</td> <td>2015–2016</td> </tr> <tr> <td>Emergence (×2)</td> <td>Coordinator</td> <td>TIMC — internal (equipment & interns)</td> <td>TIMC</td> <td>2016–2017</td> </tr> <tr> <td>LPR maturation</td> <td>Coordinator</td> <td>SATT Linksium</td> <td>TIMC, Linksium</td> <td>2017</td> </tr> <tr> <td>LPR incubation</td> <td>Coordinator</td> <td>SATT Linksium</td> <td>Linksium, co-founders</td> <td>2018–2019</td> </tr> </tbody> </table> <h2 id="behind-the-scenes-remote-control-of-the-robot">Behind the scenes: remote control of the robot</h2> <p>In collaboration with the <strong>LIRMM team (Montpellier)</strong>, a partner in the Robacus project, we demonstrated real-time remote control of the robot through a force-feedback teleoperation interface — a step toward a gesture where the radiologist would drive insertion from the control room, without radiation exposure. This feasibility demo was not taken further, but it nicely illustrates the flexibility of the guidance software’s architecture, built on , the medical-application prototyping framework I co-develop: its modularity made it possible to reuse code from one prototype version to the next, rather than rewriting everything.</p>  </video> <h2 id="skills-brought-to-bear">Skills brought to bear</h2> <p>Multi-partner project coordination (research · clinical · industry) · <strong>quality-assured</strong> and <strong>risk-analysed</strong> development of a medical device · running regulated <strong>preclinical trials</strong> on healthy subjects · <strong>TRL maturation</strong> of a software component, from concept to clinical prototype · industrial <strong>maturation and incubation</strong> (patent drafting, business plan, team recruitment) · modular, reusable software architecture for medical prototyping.</p> <h2 id="related-publications">Related publications</h2> <ul class="pubs-by-tag"> <li> <strong>2022</strong>. Fouard Céline, Lenfant Jérémy, Ganesaratnam Gokularajah, Hungr Nikolaï — <a href="https://celine-fouard.fr/publication/2022-fouard-patent/">Connector for cables</a>. <em>US Patent</em> </li> <li> <strong>2018</strong>. Ghelfi Julien, Moreau-Gaudry Alexandre, Hungr Nikolaï, Fourd Céline, Veron Baptiste, Medici Maud, Chipon Émilie, Cinquin Philippe, Bricault Ivan — <a href="https://celine-fouard.fr/publication/2018-ghelfi-cir/">Evaluation of the needle positioning accuracy of a light puncture robot under MRI guidance: results of a clinical trial on healthy volunteers</a>. <em>Cardiovascular and interventional radiology, vol 41 no 9</em> </li> <li> <strong>2016</strong>. Hungr Nikolaï, Bricault Ivan, Cinquin Philippe, Fouard Céline — <a href="https://celine-fouard.fr/publication/2016-hungr-tr/">Design and validation of a CT-and MRI-guided robot for percutaneous needle procedures</a>. <em>IEEE transactions on robotics, vol 32 Issue 4</em> </li> <li> <strong>2014</strong>. Dorileo Ederson, Hungr Nikolaï, Zemiti Nabil, Fouard Céline, Poignet Philippe — <a href="https://celine-fouard.fr/publication/2014-dorileo-ijcars/">A modular CT/MRI-guided teleoperation platform for robot assisted punctures planning</a>. <em>CARS 2014-28th International Congress and Exhibition on Computer Assisted Radiology and Surgery</em> </li> <li> <strong>2014</strong>. Dorileo Ederson, Zemiti Nabil, Poignet Philippe, Hungr Nikolaï, Bricault Ivan, Fouard Céline — <a href="https://celine-fouard.fr/publication/2014-dorileo-surgetica/">Observations of Lightly Flexible Needle Deflection in 3D CT/MRI</a>. <em>Proceedings of Surgetica 2014</em> </li> <li> <strong>2011</strong>. Hungr Nikolaï, Fouard Céline, Robert Adeline, Bricault Ivan, Cinquin Philippe — <a href="https://celine-fouard.fr/publication/2011-hungr-miccai/">Interventional radiology robot for CT and MRI guided percutaneous interventions</a>. <em>Proceedings of the 14th international conference on Medical image Ccomputing and Computer-Assisted Intervention (MICCAI)</em> </li> <li> <strong>2008</strong>. Zemiti Nabil, Bricault Ivan, Fouard Céline, Sanche Bénédicte, Cinquin Philippe — <a href="https://celine-fouard.fr/publication/2008-zemiti-tm/">LPR: A CT and MR-compatible puncture robot to enhance accuracy and safety of image-guided interventions</a>. <em>IEEE/ASME Transactions on Mechatronics</em> </li> <li> <strong>2008</strong>. Bricault Ivan, Zemiti Nabil, Jouniaux Émilie, Fouard Céline, Taillant Élise, Dorandeu Frédéric, Cinquin Philippe — <a href="https://celine-fouard.fr/publication/2008-bricault-embm/">Light Puncture Robot for CT and MRI Interventions</a>. <em>IEEE Engineering in Medicine and Biology Magazine</em> </li> </ul> </article> <article> <h1>Evaluation of the needle positioning accuracy of a light puncture robot under MRI guidance: results of a clinical trial on healthy volunteers</h1> <p>Sat, 01 Sep 2018 00:00:00 +0000</p> </article> <article> <h1>Light Random Regression Forests for automatic multi-organ localization in CT images</h1> <p>Tue, 18 Apr 2017 00:00:00 +0000</p> </article> <article> <h1>Automatically locating organs in CT images</h1> <p>Fri, 30 Sep 2016 00:00:00 +0000</p> <p><em>My first turn toward machine learning — taken, with this student, two years before the deep-learning boom.</em></p> <p>In the continuation of the project, I co-supervised with Emmanuel Promayon the PhD of <strong>Prasad Samarakoon</strong>, defended on 30 September 2016 at Université Grenoble Alpes (funded by the French ANR TecSan project “Robacus”). This is the project that tipped me toward <strong>machine learning</strong> applied to medical imaging. We started two years <em>before</em> the rise of deep-learning segmentation: so we bet not on deep neural networks, but on <strong>decision-tree forests</strong> (<em>random forests</em>) — a clear-eyed choice for the time, and a formative one.</p> <blockquote class="border-l-4 border-neutral-300 dark:border-neutral-600 pl-4 italic text-neutral-600 dark:text-neutral-400 my-6"> <p>What this thesis really gave me was not one more method: it was an early familiarity with the <strong>strengths and the limits</strong> of learning-based approaches — first among them their surprising robustness.</p> </blockquote> <h2 id="the-challenge-locating-not-segmenting">The challenge: locating, not segmenting</h2> <p>To plan a puncture assisted by the LPR robot, one must first locate, in the CT scan, the target organs and those to avoid — a step still done <em>by hand</em> by the clinician, tedious and costly in expert time. Rather than aiming straight for full segmentation (delineating every contour), we tackled the more tractable and equally useful problem of <strong>localization</strong>: enclosing each organ in a bounding box, automatically.</p> <h2 id="the-contribution">The contribution</h2> <p>Beyond a thorough analysis of the method, the thesis produced two contributions of real practical reach:</p> <ul> <li>the <strong>Light Random Regression Forests</strong>: a faster and far more memory-efficient model, at equivalent accuracy — and therefore easier to embed and deploy;</li> <li>an <strong>automatic parametrization</strong> that removes settings previously fixed “by hand”, making the method more robust and more reproducible from one dataset to another.</li> </ul> <figure><figcaption> <p>The regression-forest pipeline: training-set preparation, preprocessing, training, then prediction (data in yellow, algorithmic steps in blue)</p> </figcaption> </figure> <h2 id="robustness--and-bias-the-phantom-kidney-story">Robustness — and bias: the phantom-kidney story</h2> <p>One experiment remains, for me, the perfect illustration of what these methods really are. To learn to locate the kidneys, our training database — built from experts’ manual delineations (ours and those of the team’s PhD students) — contained only patients <strong>with two kidneys</strong>. During the testing phase, the radiologist handed us the image of a patient who had <strong>only one</strong>. The algorithm dutifully found… <strong>two bounding boxes</strong>, placing a “phantom kidney” exactly where statistics expected it.</p> <p>Even then, we were alert to a truth that has lost none of its relevance: <strong>a model is only the reflection of the data it is shown.</strong> The quality and representativeness of the training set matter as much as the algorithm itself.</p> <h2 id="what-this-project-represented">What this project represented</h2> <p>With the rise of deep learning, this forest-based localization strategy was later set aside — but it was decisive. It let me approach the machine-learning turn <strong>from the foundations</strong>, at a time when one still took the time to understand <em>why</em> a method works, what it guarantees, and where it fails. That perspective — robustness, generalization, vigilance about the data — is exactly what I bring today to medical-application prototyping.</p> <p><strong>Skills involved:</strong> doctoral co-supervision · machine learning applied to medical imaging · design of robust, automatic methods · building and critically assessing training datasets.</p> <h2 id="related-publications">Related publications</h2> <ul class="pubs-by-tag"> <li> <strong>2017</strong>. Samarakoon Prasad N, Promayon Emmanuel, Fouard Céline — <a href="https://celine-fouard.fr/publication/2017-samarakoon-isbi/">Light Random Regression Forests for automatic multi-organ localization in CT images</a>. <em>2017 IEEE 14th International Symposium on Biomedical Imaging (ISBI 2017)</em> </li> <li> <strong>2014</strong>. Saramakoon Prasad, Promayon Emmanuel, Fouard Céline — <a href="https://celine-fouard.fr/publication/2014-samarakoon-surgetica/">Fully Automatic Organ Localization in Medical Images Using Improved Random Regression Forests</a>. <em>Proceedings of Surgetica 2014</em> </li> </ul> </article> <article> <h1>Design and validation of a CT-and MRI-guided robot for percutaneous needle procedures</h1> <p>Tue, 02 Aug 2016 00:00:00 +0000</p> </article> <article> <h1>Multi-view imaging system for laparoscopic surgery</h1> <p>Wed, 25 Nov 2015 00:00:00 +0000</p> </article> <article> <h1>Segmentation, separation and pose estimation of prostate brachytherapy seeds in CT images</h1> <p>Fri, 06 Mar 2015 00:00:00 +0000</p> </article> <article> <h1>Impact de l’orientation des grains iode 125 dans l’évaluation de la dosimétrie à 1 mois d’une curiethérapie prostatique</h1> <p>Wed, 01 Oct 2014 00:00:00 +0000</p> </article> <article> <h1>Medical Image Analysis</h1> <p>Wed, 01 Oct 2014 00:00:00 +0000</p> <p>When I joined the research group at TIMC laboratory in 2006, I contributed my expertise in medical image processing and analysis to three ongoing applied projects led by my colleagues. These collaborations allowed me to tackle diverse clinical challenges — from real-time surgical vision to oncological dose computation — while immersing myself in the tools and culture of the team.</p> <blockquote class="border-l-4 border-neutral-300 dark:border-neutral-600 pl-4 italic text-neutral-600 dark:text-neutral-400 my-6"> <p>These three projects are grounded in rigorous academic knowledge production: each contribution led to publications in international peer-reviewed journals and conferences, or to a patent filing. The skills described here were forged <em>alongside</em> that scientific output — they are its direct product.</p> </blockquote> <p>These three projects embody a conviction that has shaped my entire approach: <strong>a medical image is only as good as its usability by the clinician, at the right moment and in the right context</strong>.</p> <hr> <h2 id="prostate-brachytherapy--orientation-of-iodine-125-seeds">Prostate Brachytherapy — Orientation of Iodine-125 Seeds</h2> <blockquote class="border-l-4 border-neutral-300 dark:border-neutral-600 pl-4 italic text-neutral-600 dark:text-neutral-400 my-6"> <p><em>Project led by Jocelyne Troccaz (TIMC-GMCAO)</em><br> Co-supervision of post-doctoral researcher <strong>Giao Nguyen</strong> (50%, with Jocelyne Troccaz)</p> </blockquote> <h3 id="context">Context</h3> <figure><figcaption> <p>Transperineal implantation guided by ultrasound — clinical context</p> </figcaption> </figure> <p>Prostate brachytherapy involves implanting radioactive iodine-125 seeds directly into the prostate gland. Calculating the radiation dose absorbed by tumour tissue — <strong>dosimetry</strong> — is critical for evaluating treatment effectiveness and anticipating side effects. At the time, dosimetry tools modelled seeds as <strong>isotropic point sources</strong>, ignoring their actual orientation within the tissue.</p> <p>The research question: <em>does seed orientation influence dosimetry enough to warrant its inclusion in clinical software?</em></p> <h3 id="contributions">Contributions</h3> <p>To answer this, we first needed to <strong>automatically detect and localise seeds</strong> in post-operative CT images — a challenging task, as seeds are small, closely spaced, and may overlap in projection.</p> <figure><figcaption> <p>Implanted seeds as visible in a CT slice: single seeds, clustered seeds, and pelvic bones</p> </figcaption> </figure> <p>We developed a complete pipeline for:</p> <ul> <li><strong>Segmentation</strong> of iodine seeds in CT images</li> <li><strong>Separation</strong> of seeds that touch or overlap</li> <li><strong>Pose estimation</strong> (3D position + orientation) of each individual seed</li> </ul> <figure><figcaption> <p>3D localisation of brachytherapy seeds in the prostate (CamiTK visualisation)</p> </figcaption> </figure> <p>Results confirmed that seed orientation had a <strong>measurable impact on dosimetry</strong> — a clinically significant finding for post-operative evaluation and treatment follow-up.</p> <h3 id="skills-applied">Skills Applied</h3> <ul> <li>3D medical image processing (CT)</li> <li>Geometric modelling of radioactive sources</li> <li>Software development and integration into the <strong>CamiTK</strong> platform for clinical use</li> <li>Validation protocols on real patient data</li> </ul> <h3 id="related-publications">Related Publications</h3> <ul> <li><strong>[IEEE TBME 2015]</strong> H.-G. Nguyen, C. Fouard, J. Troccaz — <em>Segmentation, separation and pose estimation of prostate brachytherapy seeds in CT images</em> — </li> <li><strong>[Cancer/Radiothérapie 2014]</strong> F. Meneu, H. Nguyen, C. Fouard et al. — <em>Impact de l’orientation des grains iode 125 dans l’évaluation de la dosimétrie à 1 mois</em> — </li> <li><strong>[Physica Medica 2013]</strong> F. Meneu, G. Nguyen et al. — <em>Consideration of seeds orientation in prostate brachytherapy and dosimetry analysis</em> — </li> </ul> <hr> <h2 id="3d-ultrasound-based-bone-tracking">3D Ultrasound-Based Bone Tracking</h2> <blockquote class="border-l-4 border-neutral-300 dark:border-neutral-600 pl-4 italic text-neutral-600 dark:text-neutral-400 my-6"> <p><em>Co-supervision at 50%, with Jocelyne Troccaz</em><br> PhD thesis of <strong>Jonathan Schers</strong> (2006–2009)</p> </blockquote> <figure><figcaption> <p>Ultrasound-guided orthopaedic intervention: the clinical context</p> </figcaption> </figure> <h3 id="context-1">Context</h3> <p>Orthopaedic procedures — prosthesis placement, osteotomies — require <strong>real-time tracking of bone structures</strong> during surgery. Classical techniques rely either on X-ray imaging (radiation) or on invasive bone markers. The goal of this project was to explore a <strong>minimally invasive</strong> alternative: tracking bone structures using <strong>3D ultrasound</strong>.</p> <h3 id="contributions-1">Contributions</h3> <p>We proposed a per-operative tracking method based on <strong>3D/3D ultrasound image registration</strong>: from a reference volume acquired at the start of the procedure, bone displacements are tracked by registering each new acquisition against that reference.</p> <figure><figcaption> <p>Segmentation of the bone surface in an ultrasound image</p> </figcaption> </figure> <p>Key scientific contributions:</p> <ul> <li><strong>Segmentation of bone surfaces</strong> in ultrasound images (noisy signal, reflection artefacts)</li> <li><strong>Rigid and deformable registration</strong> methods adapted to the ultrasound modality</li> <li><strong>Panoramic reconstruction</strong> from multiple partial acquisitions</li> <li>Evaluation on cadaveric anatomical specimens</li> </ul> <h3 id="skills-applied-1">Skills Applied</h3> <ul> <li>Ultrasound signal processing</li> <li>Multimodal medical image registration</li> <li>Design of a ground-truth-free registration validation method</li> <li>Doctoral co-supervision (50%)</li> </ul> <h3 id="related-publications-1">Related Publications</h3> <ul> <li><strong>[IUS 1007]</strong> J. Schers, J. Troccaz, V. Daanen, C. Fouard, C. Plaskos, P. Kilian - <em>3D/4D ultrasound registration of bone</em> - </li> <li><strong>[IJCARS 2009]</strong> J. Schers, J. Troccaz, C. Fouard, C. Plaskos, O. Palombi — <em>3D/3D ultrasound registration for panoramic volume reconstruction</em> — </li> <li><strong>[CAOS 2010]</strong> J. Schers, C. Fouard, J. Troccaz — <em>Non invasive ultrasound-based bone tracking</em> — </li> </ul> <hr> <h2 id="distributed-laparoscopy--extended-view-of-the-surgical-field">Distributed Laparoscopy — Extended View of the Surgical Field</h2> <blockquote class="border-l-4 border-neutral-300 dark:border-neutral-600 pl-4 italic text-neutral-600 dark:text-neutral-400 my-6"> <p><em>Co-supervision at 50%, with Philippe Cinquin</em><br> PhD thesis of <strong>Christophe Boschet</strong> (2007–2010)</p> </blockquote> <figure><figcaption> <p>Standard laparoscopy: a single camera, a narrow field of view</p> </figcaption> </figure> <h3 id="context-2">Context</h3> <p>During a laparoscopic procedure, the surgeon’s field of view is <strong>very narrow</strong>: the endoscopic camera, inserted through a trocar, only covers a small portion of the abdominal cavity. The surgeon must constantly reposition the camera to explore the operative field, which is cognitively demanding and lengthens procedures.</p> <p>The idea: replace a single high-resolution camera with <strong>several small, distributed miniature cameras</strong> (similar to the phone cameras of the day), and <strong>reconstruct a real-time 3D panoramic view</strong> of the operative zone.</p> <figure><figcaption> <p>Standard laparoscopy: a single camera, a narrow field of view</p> </figcaption> </figure> <h3 id="contributions-2">Contributions</h3> <p>This project posed novel challenges at the intersection of computer vision and embedded computing:</p> <ul> <li><strong>Calibration</strong> of multiple miniature cameras in an endoscopic configuration</li> <li><strong>3D reconstruction</strong> of the surgical field via distributed stereovision</li> <li><strong>Fusion of video streams</strong> to produce a coherent augmented view</li> <li>Integration into the CamiTK platform and prototyping for pre-clinical experimentation</li> </ul> <figure><figcaption> <p>3D reconstruction of the operative field from multiple cameras (CamiTK)</p> </figcaption> </figure> <p>The project remained at the research prototype stage but led to a <strong>European patent filing</strong>.</p> <h3 id="skills-applied-2">Skills Applied</h3> <ul> <li>Stereoscopic computer vision</li> <li>Multi-camera optical system calibration</li> <li>Hardware/software integration</li> <li>Patent writing</li> </ul> <h3 id="related-output">Related Output</h3> <ul> <li><strong>[Patent EP 2016]</strong> P. Cinquin, S. Voros, C. Boschet, C. Fouard, A. Moreau-Gaudry — <em>Imaging system for the three dimensional observation of an operation field</em> — </li> </ul> <hr> <h2 id="what-these-projects-taught-me">What These Projects Taught Me</h2> <p>These three collaborations were a <strong>practical school in medical prototyping</strong> — and far more than a checklist of technical skills.</p> <p>I learned to work with real, imperfect clinical data, often without ground truth available to validate the algorithms. I developed the reflex of <strong>designing rigorous evaluation protocols</strong> where standard benchmarks didn’t exist, and of <strong>integrating operating room constraints</strong> from the design phase — time pressure, sterility requirements, ergonomics for the surgeon.</p> <p>I also shaped my collaborative approach: learning to ask the right questions to clinicians, to translate a medical need into an algorithmic problem, to deliver tools integrated into a software platform usable by non-computer-scientists.</p> <p>These skills — built <em>alongside</em> a sustained effort in scientific publication and formal knowledge production — are the ones I bring today to medical application prototyping.</p> </article> <article> <h1>A modular CT/MRI-guided teleoperation platform for robot assisted punctures planning</h1> <p>Sat, 28 Jun 2014 00:00:00 +0000</p> </article> <article> <h1>Automatic 3D seed location and orientation detection in CT image for prostate brachytherapy</h1> <p>Tue, 29 Apr 2014 00:00:00 +0000</p> </article> <article> <h1>Fully Automatic Organ Localization in Medical Images Using Improved Random Regression Forests</h1> <p>Wed, 01 Jan 2014 00:00:00 +0000</p> </article> <article> <h1>Observations of Lightly Flexible Needle Deflection in 3D CT/MRI</h1> <p>Wed, 01 Jan 2014 00:00:00 +0000</p> </article> <article> <h1>Using CamiTK for Rapid Prototyping of Interactvie Computer Assisted Medical Intervention Applications</h1> <p>Wed, 03 Jul 2013 00:00:00 +0000</p> </article> <article> <h1>Consideration of seeds orientation in prostate brachytherapy and dosimetric analysis</h1> <p>Sat, 01 Jun 2013 00:00:00 +0000</p> </article> <article> <h1>CamiTK: a Modular Framework Integrating Visualization, Image Processing and Biomechanical Modeling</h1> <p>Tue, 03 Jul 2012 00:00:00 +0000</p> </article> <article> <h1>CamiTK: a Modular Framework Integrating Visualization, Image Processing and Biomechanical Modeling</h1> <p>Mon, 21 Nov 2011 00:00:00 +0000</p> </article> <article> <h1>CamiTK: a workshop for prototyping medical applications</h1> <p>Tue, 01 Nov 2011 00:00:00 +0000</p> <p><em>From software to method — capitalizing on interdisciplinary know-how to move faster, from concept to validated prototype.</em></p> <p>Designing an application for the operating room is never “just code.” It means getting medical images, sensors, biomechanical models — sometimes a robot — and above all specialists who don’t speak the same technical language, to work together. <strong>CamiTK</strong> is the tool I co-founded with Emmanuel Promayon <strong>so that this dialogue produces prototypes</strong> — fast, clean, and reusable. It is also the foundation of expertise I now draw on to help companies prototype medical applications.</p> <div class="camitk-logo"><style>.camitk-logo{display:flex;justify-content:center;margin:1.75rem 0;}.camitk-logo img{max-width:240px;height:auto;}</style><figure> </figure> </div> <h2 id="the-problem-interdisciplinarity-is-expensive">The problem: interdisciplinarity is expensive</h2> <p>In computer-assisted medical interventions, every team shows up with its own world: its operating system, its language of choice, its libraries, its habits — and its level of maturity, from throwaway prototype to clinical-grade software. With each new project, the temptation is to rewrite everything. You reinvent the wheel, you lose months, and the know-how walks out the door when someone leaves the team.</p> <p>For a company, this is exactly the pain point: <em>how do you avoid starting from scratch with every innovation, while keeping the rigor that medical work demands?</em></p> <h2 id="the-answer-a-shared-software-foundation">The answer: a shared software foundation</h2> <p>With Emmanuel Promayon, we designed CamiTK as a <strong>modular workshop</strong>: a stable core that handles what is common to every project — 3D visualization, interaction, data and input/output management, abstraction of medical formats (DICOM, meshes…) — and around which each specialist plugs in their own domain <strong>extension</strong>, without touching the rest.</p> <div class="camitk-archi"><style>.camitk-archi{width:100%;margin:1.75rem 0;}.camitk-archi figure{width:100%;margin:0;}.camitk-archi img{width:100%;height:auto;max-width:100%;}</style><figure><figcaption> <p>CamiTK’s building-block architecture: a shared core, an interface layer, and one extension per domain of expertise.</p> </figcaption> </figure> </div> <p>This architectural choice (a C++/Qt/VTK core, following component-based software engineering) delivers what a company looks for in a technical foundation. And since version 5, CamiTK also accepts <strong>Python extensions</strong>: you can prototype an idea in a few lines, then harden it in C++ once validated — exactly the right trade-off between exploration speed and production robustness.</p> <p>In practice, the foundation provides:</p> <ul> <li><strong>Cross-platform</strong> — the same code runs on Linux, Windows and macOS.</li> <li><strong>Interoperability</strong> — the building blocks of one project are reused in the next.</li> <li><strong>Default behaviors</strong> — a specialist plugs in their algorithm and immediately gets a working application, without rewriting the interface.</li> <li><strong>Intellectual-property safeguards</strong> — each module keeps its own license; the open-source core coexists with proprietary extensions (as was the case for the confidential LPR modules).</li> <li><strong>Durability</strong> — the knowledge stays in the tool, not only in people’s heads.</li> </ul>  <figure><figcaption> <p>Example of an application prototyped with CamiTK.</p> </figcaption> </figure> <h2 id="from-software-building-block-to-method">From software building block to method</h2> <p>CamiTK’s most valuable contribution is not the code: it is what its practice taught us. By guiding real projects all the way to technology transfer — first among them the — we <strong>generalized a methodology for maturing</strong> software building blocks for medical devices, aligned with the TRL (<em>Technology Readiness Levels</em>) scale.</p> <p>Concretely: knowing what maturity level a prototype sits at, what it takes to reach the next one, and where to invest validation and software-quality effort so you don’t get stuck at the moment of industrial or clinical transfer. This is exactly the kind of course a company needs to hold when moving an idea from the lab to a product.</p> <p>Over the projects, CamiTK thus became a <strong>dual methodological tool</strong>: to make disciplines collaborate, and to structure the climb up the TRL scale.</p> <h2 id="adoption-as-proof">Adoption as proof</h2> <p>A method is only worth as much as its ability to outlive its authors. CamiTK has passed that test: released as open source, <strong>packaged in the official <code>debian-med</code> suite</strong>, adopted by internal and national projects, and — the most telling proof — <strong>still actively developed</strong> more than fifteen years after it began (version 6.0, with new tools such as DevStudio to create an extension in minutes).</p> <figure><figcaption> <p>A continuous adoption trajectory, from the lab to the open-source ecosystem.</p> </figcaption> </figure> <p>This project also gave me the chance to <strong>coordinate and co-supervise a team of engineers</strong> — up to four at once — over several years: hiring, organizing development, code review, documentation, and nurturing a community of users.</p> <h2 id="what-i-take-from-it--and-what-i-can-bring">What I take from it — and what I can bring</h2> <blockquote class="border-l-4 border-neutral-300 dark:border-neutral-600 pl-4 italic text-neutral-600 dark:text-neutral-400 my-6"> <p><strong>I founded and structured CamiTK; today, I use it daily as an expert.</strong> This dual standpoint — the one who designed the architecture <em>and</em> the one who uses it — lets me bring to a company:</p> <ul> <li>a <strong>durable software architecture</strong> designed for reuse and cross-platform support;</li> <li>a <strong>maturity-scaling (TRL) method</strong> proven on real technology transfers;</li> <li>the ability to make <strong>very different profiles collaborate</strong> (clinical, research, engineering, industry) around a single prototype;</li> <li>fine-grained <strong>intellectual-property management</strong> in an ecosystem mixing open source and proprietary building blocks;</li> <li>the <strong>supervision of technical teams</strong> over the long term.</li> </ul> </blockquote> <h2 id="publications">Publications</h2> <ul class="pubs-by-tag"> <li> <strong>2013</strong>. Promayon Emmanuel, Fouard Céline, Deram Aurélien, Hungr Nikolaï, Luboz Vincent, Payan Yohan, Sarrazin Johan, Saubat Nicolas, Selmi Sonia Yuki, Voros Sandrine, Cinquin Philippe, Troccaz Jocelyne — <a href="https://celine-fouard.fr/publication/2013-promayon-embc/">Using CamiTK for Rapid Prototyping of Interactvie Computer Assisted Medical Intervention Applications</a>. <em>Proceedings of 35th Annual International Conference of the IEEE EMBS</em> </li> <li> <strong>2012</strong>. Fouard Céline, Deram Aurélien, Keraval Yannick, Promayon Emmanuel — <a href="https://celine-fouard.fr/publication/2012-fouard-stbmcas/">CamiTK: a Modular Framework Integrating Visualization, Image Processing and Biomechanical Modeling</a>. <em>Soft Tissue Biomechanical Modeling for Computer Assisted Surgery</em> </li> </ul> <hr> <p><em>CamiTK is the thread that runs through all my projects, from the to : the conviction that a good medical prototype begins with good engineering — shared, and built to last.</em></p> </article> <article> <h1>Interventional radiology robot for CT and MRI guided percutaneous interventions</h1> <p>Sun, 18 Sep 2011 00:00:00 +0000</p> </article> <article> <h1>Non invasive ultrasound-based bone tracking</h1> <p>Wed, 16 Jun 2010 00:00:00 +0000</p> </article> <article> <h1>3D/3D ultrasound registration for panoramic volume reconstruction</h1> <p>Tue, 23 Jun 2009 00:00:00 +0000</p> </article> <article> <h1>Imaging System for Three-Dimensional Observation of an Operative Site</h1> <p>Wed, 20 Aug 2008 00:00:00 +0000</p> </article> <article> <h1>LPR: A CT and MR-compatible puncture robot to enhance accuracy and safety of image-guided interventions</h1> <p>Fri, 13 Jun 2008 00:00:00 +0000</p> </article> <article> <h1>Light Puncture Robot for CT and MRI Interventions</h1> <p>Fri, 23 May 2008 00:00:00 +0000</p> </article> <article> <h1>3D/4D ultrasound registration of bone</h1> <p>Mon, 01 Oct 2007 00:00:00 +0000</p> </article> <article> <h1>Weighted distance transforms generalized to modules and their computation on point lattices</h1> <p>Sat, 01 Sep 2007 00:00:00 +0000</p> </article> <article> <h1>An Objective Comparison between Gray Weighted Distance Transforms and Weighted Distance Transforms On Curved Spaces</h1> <p>Wed, 25 Oct 2006 00:00:00 +0000</p> </article> <article> <h1>Generating Distance Maps with Neighbourhood Sequences</h1> <p>Wed, 25 Oct 2006 00:00:00 +0000</p> </article> <article> <h1>Blockwise processing applied to brain microvascular network study</h1> <p>Mon, 25 Sep 2006 00:00:00 +0000</p> </article> <article> <h1>From mathematical foundations to medical images</h1> <p>Tue, 01 Aug 2006 00:00:00 +0000</p> <blockquote class="border-l-4 border-neutral-300 dark:border-neutral-600 pl-4 italic text-neutral-600 dark:text-neutral-400 my-6"> <p>This project deliberately steps away from applied prototyping. It reflects another side of my approach: the ability to work at a rigorous level of mathematical abstraction, to produce formal proofs, and to publish in leading discrete mathematics journals — while keeping a concrete medical imaging application in view.</p> </blockquote> <p>From September 2005 to August 2006, I held a postdoctoral position at the at Uppsala University, Sweden — one of the founding laboratories of discrete geometry applied to images. There I had the opportunity to work alongside , a pioneer of the field, whose 1986 paper on distance transforms in digital images remains a landmark reference cited by thousands of researchers — including today in the computation of loss functions for U-Net networks in deep learning segmentation.</p> <hr> <h2 id="the-starting-point-computing-distances-in-an-image">The starting point: computing distances in an image</h2> <p>A <strong>distance transform</strong> is a fundamental operation in image processing: for each pixel of an object, it computes its distance to the nearest boundary. It is ubiquitous — segmentation, skeletonisation, registration, cost function computation in machine learning.</p> <p>The Euclidean distance is the most natural, but it raises two practical issues:</p> <ul> <li>It is <strong>continuous</strong>, and therefore expensive to compute exactly on a discrete grid.</li> <li>The <strong>squared</strong> Euclidean distance (d²E), which is discrete, does not satisfy the triangle inequality.</li> </ul> <p>This second point deserves an illustration. The triangle inequality simply states that the direct path between two points can never be longer than going via an intermediate stop — it is the fundamental property of any mathematically valid distance.</p> <figure><figcaption> <p>2D example: d²E(p,q) = 9 > d²E(p,o) + d²E(o,q) = 7. The detour via o is cheaper than the direct path — the shortest path is not the straight line!</p> </figcaption> </figure> <p>The <strong>chamfer distance</strong> solves this: it is an efficient way to compute distances in a digital image without examining every possible path. Each displacement direction (4-connected, 8-connected neighbour, etc.) is assigned a local weight, and these weights are propagated in a simple two-pass scan of the image. The result is a discrete, integer-valued, fast-to-compute distance — which, under certain conditions on the weights, satisfies all the properties of a mathematical norm.</p> <figure><figcaption> <p>Chamfer algorithm — 1st pass: propagation left to right, top to bottom</p> </figcaption> </figure> <figure><figcaption> <p>Chamfer algorithm — 2nd pass: propagation right to left, bottom to top</p> </figcaption> </figure> <hr> <h2 id="the-specific-problem-medical-images-are-anisotropic">The specific problem: medical images are anisotropic</h2> <p>On an <strong>isotropic</strong> grid (square pixels, cubic voxels), chamfer distances are well understood. But medical images are rarely isotropic.</p> <figure><figcaption> <p>Anisotropic medical image: voxels are elongated in the axial direction</p> </figcaption> </figure> <p>A typical CT scan has a resolution of 0.5 mm × 0.5 mm within the axial plane, but 2 to 5 mm between slices. If one naively applies a chamfer algorithm designed for an isotropic grid to such an image, the computed distances no longer satisfy the triangle inequality — and can lead to geometric absurdities where the direct path between two points appears longer than a detour.</p> <p><strong>The standard workaround</strong> is to resample the image to make it isotropic before computing distances. But this resampling introduces artefacts and significantly increases processing overhead.</p> <hr> <h2 id="my-contribution-a-unified-theory-for-arbitrary-grids">My contribution: a unified theory for arbitrary grids</h2> <p>My postdoctoral work consisted in developing a general mathematical framework for computing chamfer distances directly on any grid — in particular the anisotropic grids of medical images — with the formal guarantee that the resulting distance is a genuine <strong>norm</strong> in the mathematical sense (positive, symmetric, triangle inequality, positive homogeneity).</p> <p>The key insight is the notion of a <strong>module</strong>: by generalising the standard discrete grid framework (Z²) to that of modules over commutative rings, I was able to establish the necessary and sufficient conditions on the chamfer mask weights to guarantee the norm property — independently of the grid geometry.</p> <p>This work led to three major contributions:</p> <h3 id="1-distances-on-general-grids--proof-of-the-norm">1. Distances on general grids — proof of the norm</h3> <p>The main paper in <em>Pattern Recognition</em> (2007) establishes the complete theory: definitions, properties (distance, metric, norm), validity conditions for the sequential two-scan algorithm, and application to FCC (<em>face-centered cubic</em>) and BCC (<em>body-centered cubic</em>) grids — crystallographic structures with optimal sampling properties for 3D medical imaging.</p> <p><strong>My contribution</strong>: I was the primary author of this paper. I developed the generalisation to modules, established the validity conditions for the two-pass algorithm on arbitrary grids, and computed the optimal weights for FCC and BCC grids.</p> <ul> <li><strong>[Pattern Recognition 2007]</strong> C. Fouard, R. Strand, G. Borgefors — <em>Weighted distance transforms generalized to modules and their computation on point lattices</em> — </li> </ul> <h3 id="2-distances-on-non-standard-grids-via-neighbourhood-sequences">2. Distances on non-standard grids via neighbourhood sequences</h3> <p>An extension to distances defined by neighbourhood sequences (which allow even better isotropy), with formal proof of the conditions for the sequential algorithm to produce correct distance maps on square, cubic, FCC, and BCC grids.</p> <ul> <li><strong>[DGCI 2006]</strong> R. Strand, B. Nagy, C. Fouard, G. Borgefors — <em>Generating distance maps with neighbourhood sequences</em> — </li> </ul> <h3 id="3-comparison-of-grey-level-distance-transforms">3. Comparison of grey-level distance transforms</h3> <p>A comparative study of two distance definitions on grey-level images (GWDT and WDTOCS), with theoretical and experimental analysis of their respective behaviours on different image types (density maps, height maps).</p> <ul> <li><strong>[DGCI 2006]</strong> C. Fouard, M. Gedda — <em>Distance transforms on curved spaces</em> — </li> </ul> <hr> <h2 id="what-this-work-gave-me">What this work gave me</h2> <p>Those twelve months in Uppsala taught me to hold two stances simultaneously: that of the mathematician who proves, and that of the engineer who solves a concrete problem. Formal rigour is not an end in itself — it is what guarantees that an algorithm will behave correctly on real data, including in the edge cases one did not anticipate.</p> <p>The indirect impact of this work on medical imaging practice is real: most modern segmentation tools, including U-Net networks that compute their loss functions from distance maps, build on these theoretical foundations. I have not yet had the opportunity to apply these anisotropic distances directly in my applied research projects in Grenoble — but it is a direction I keep in mind, particularly for processing medical images without prior resampling.</p> </article> <article> <h1>A Novel Three-Dimensional Computer-Assisted Method for a Quantitative Study of Microvascular Networks of the Human Cerebral Cortex</h1> <p>Sun, 01 Jan 2006 00:00:00 +0000</p> </article> <article> <h1>3-D chamfer distances and norms in anisotropic grids</h1> <p>Tue, 01 Feb 2005 00:00:00 +0000</p> </article> <article> <h1>Extraction de paramètres morphométriques pour l'étude du réseau micro-vasculaire cérébral</h1> <p>Fri, 21 Jan 2005 00:00:00 +0000</p> </article> <article> <h1>Extraction of morphometric parameters for the study of the cerebral micro-vascular network</h1> <p>Fri, 21 Jan 2005 00:00:00 +0000</p> <p><em>Measuring the brain in 3D: from microscopy to software tools.</em></p> <p>My PhD took place at <strong>INRIA Sophia Antipolis</strong>, in the Epidaure team, under the supervision of Grégoire Malandain. It was part of the <strong>MicroVisu3D</strong> project, which brought together three worlds: the <strong>anatomists</strong> at INSERM (unit U455), who needed to quantify cerebral microcirculation; the <strong>image-analysis</strong> researchers at INRIA; and an <strong>industrial partner</strong>, TGS Europe, publisher of the 3D visualization software <em>Amira</em>.</p> <p>It was a <strong>CIFRE thesis</strong>, funded by the company: from the very start of my doctorate, I worked at the direct interface between academic research and industry. My role was to translate a scientific need — <em>“to be able to measure the cortical vascular network in 3D”</em> — into a concrete set of software tools, usable by non-programmers and integrable into an existing industrial environment.</p> <blockquote class="border-l-4 border-neutral-300 dark:border-neutral-600 pl-4 italic text-neutral-600 dark:text-neutral-400 my-6"> <p>This work led to publications in international peer-reviewed journals and conferences. But beyond the scientific output, what I describe here is an experience of <strong>applied R&D delivered end to end</strong> — from gathering the need to shipping field-tested tools.</p> </blockquote> <p>This thesis embodies an idea that still guides my work today: <strong>an algorithm is only worth as much as its robustness on real data — imperfect, voluminous, and all different from one another.</strong></p> <hr> <h2 id="the-challenge-measuring-a-vast-network-at-micron-scale">The challenge: measuring a vast network at micron scale</h2> <p>To study the cerebral micro-vascular network, the anatomists needed images able to capture <strong>the smallest capillary</strong> (resolution of a few microns) over a <strong>cortical surface large enough</strong> to be statistically significant (on the order of a centimetre). No instrument could acquire such an image in a single shot.</p> <p>The chosen solution: <strong>tile the area to be imaged with many small images</strong> acquired under a confocal microscope, then assemble them into a single large “image mosaic”. This solved the acquisition problem, but created two new ones:</p> <ul> <li>the resulting mosaic was <strong>too large to be loaded into the memory</strong> of a standard computer and processed in one go;</li> <li>the confocal microscope imposes an <strong>anisotropic grid</strong> (voxels are not cubic), which complicates any distance measurement in the image — and therefore any computation of vessel diameter.</li> </ul> <figure><figcaption> <p>A mosaic of 118 confocal microscopy images covering a cortical sulcus (≈ 0.8 × 0.8 cm)</p> </figcaption> </figure> <h2 id="my-approach-an-end-to-end-processing-pipeline">My approach: an end-to-end processing pipeline</h2> <p>I designed a complete pipeline, from the sensor to the measurement, built from the outset to run on data that does not fit in memory.</p> <div class="mermaid">flowchart LR A["Acquisition<br/>confocal mosaic"] --> B["Registration &<br/>realignment"] B --> C["Single<br/>virtual image"] C --> D["Block-wise processing<br/>(out-of-core)"] D --> E["Distance maps<br/>+ centerlines"] E --> F["Measurement &<br/>3D visualization"] </div> <p>Two links in this pipeline gave rise to original methodological contributions: the computation of <strong>distance maps</strong> and the extraction of <strong>centerlines</strong>.</p> <h2 id="contribution-1--distance-maps-that-adapt-on-their-own">Contribution 1 — Distance maps that adapt on their own</h2> <p>To measure the radius of a vessel at each point, one computes a <em>distance map</em>: at each voxel, the distance to the nearest boundary. The exact Euclidean distance is costly; <strong>chamfer distances</strong> approximate it very efficiently by propagating small integer weights between neighbouring voxels.</p> <figure><figcaption> <p>A binary shape and its distance map: at each point, the distance to the nearest boundary</p> </figcaption> </figure> <p>The tricky part: on an anisotropic grid — the case for almost every medical imaging modality — these weights have to be recomputed, and choosing them by hand is fragile and modality-specific.</p> <p>My contribution was to propose an <strong>automatic computation of the optimal chamfer coefficients</strong>, the set that minimizes the error against the true Euclidean distance — and this <strong>whatever the grid anisotropy or the imaging modality</strong>, with no manual tuning. The same method therefore applies equally to a CT scan, an MRI or a confocal microscope.</p> <blockquote class="border-l-4 border-neutral-300 dark:border-neutral-600 pl-4 italic text-neutral-600 dark:text-neutral-400 my-6"> <p>The theoretical foundations of these chamfer masks were deepened during my post-doctorate: see .</p> </blockquote> <h2 id="contribution-2--extracting-centerlines-even-out-of-core">Contribution 2 — Extracting centerlines, even out-of-core</h2> <p>From the distance map, one extracts the <strong>centerlines</strong> of the vessels — the curves running through the centre of each vessel. They capture the topology of the network and make it possible to measure lengths, branchings and radii.</p> <p>Classical skeletonization methods require loading the whole image into memory — impossible here. So I proposed a <strong>block-wise skeletonization</strong> that works on sub-images while preserving the three essential properties of a skeleton: <strong>homotopy</strong> (same topology as the original object), <strong>localization</strong> (the skeleton stays centred) and <strong>thinness</strong>. The algorithm also minimizes the number of sub-image accesses, to keep computation time acceptable.</p> <figure><figcaption> <p>Skeletonization of an object: without tiling (a), by processing blocks separately (b), and with our method (c), which preserves topology</p> </figcaption> </figure> <p>Once centerlines and radii are obtained, the vessels are modelled as <strong>sets of cylinders</strong> (the <em>LineSet</em> data structure), allowing both real-time 3D visualization and the extraction of quantitative parameters: distributions of diameters, of lengths, vascular densities per cortical layer, and so on.</p> <figure><figcaption> <p>Overview of the centerlines of the reconstructed micro-vascular network in 3D</p> </figcaption> </figure> <h2 id="a-generic-method-far-beyond-the-brain">A generic method, far beyond the brain</h2> <p>None of these methods makes any assumption specific to the brain. <strong>Any large binary image of tubular structures</strong> can be processed in the same way. I validated it on plant roots; it transfers directly to neural networks, to the porosity of materials, even to pipeline mapping.</p> <figure><figcaption> <p>The same method applied to plant roots: concrete proof of the generality of the approach</p> </figcaption> </figure> <p>This ability to solve a problem in one domain and then transpose it elsewhere is at the heart of how I approach prototyping.</p> <h2 id="skills-involved">Skills involved</h2> <ul> <li>Gathering a scientific need and translating it into software specifications</li> <li>Collaboration with an industrial partner (CIFRE thesis, integration into the <em>Amira</em> software / TGS Europe)</li> <li>Design of <strong>robust, automatic algorithms</strong>, with no manual tuning</li> <li>Processing <strong>large, out-of-core data</strong> (block by block)</li> <li>Discrete geometry, chamfer distances, discrete topology</li> <li>Design of <strong>validation</strong> protocols (synthetic + real data)</li> </ul> <h2 id="publications-from-the-thesis">Publications from the thesis</h2> <ul class="pubs-by-tag"> <li> <strong>2007</strong>. Fouard Céline, Strand Robin, Borgefors Gunilla — <a href="https://celine-fouard.fr/publication/2007-fouard-pr/">Weighted distance transforms generalized to modules and their computation on point lattices</a>. <em>Pattern Recognition Vol 40 Issue 9</em> </li> <li> <strong>2006</strong>. Fouard Céline, Gedda Magnus — <a href="https://celine-fouard.fr/publication/2006-fouard-dgci/">An Objective Comparison between Gray Weighted Distance Transforms and Weighted Distance Transforms On Curved Spaces</a>. <em>Proceedings of DGCI 2006</em> </li> <li> <strong>2006</strong>. Fouard Céline, Malandain Grégoire, Prohaska Steffen, Westerhoff Malte — <a href="https://celine-fouard.fr/publication/2006-fouard-tmi/">Blockwise processing applied to brain microvascular network study</a>. *IEEE Transactions on Medical Imaging ( Volume: 25, Issue: 10, October 2006) * </li> <li> <strong>2006</strong>. Cassot Francis, Lauwers Frederic, Fouard celineProhaska Steffen, Lauwers-Cance Valérie — <a href="https://celine-fouard.fr/publication/2006-cassot-microcirculation/">A Novel Three-Dimensional Computer-Assisted Method for a Quantitative Study of Microvascular Networks of the Human Cerebral Cortex</a>. <em>Microcirculation</em> </li> <li> <strong>2005</strong>. Fouard Céline, Malandain Grégoire — <a href="https://celine-fouard.fr/publication/2005-fouard-ivc/">3-D chamfer distances and norms in anisotropic grids</a>. <em>Image and Vision Computing</em> </li> <li> <strong>2005</strong>. Fouard Céline — <a href="https://celine-fouard.fr/publication/2005-fouard-phd/">Extraction de paramètres morphométriques pour l'étude du réseau micro-vasculaire cérébral</a>. Thèse de doctorat, <em>Université de Nice Sophia Antipolis</em> </li> <li> <strong>2004</strong>. Kolesik Peter, Fouard Céline, Prohaska Steffen, McNeill Ann — <a href="https://celine-fouard.fr/publication/2004-kolesik-fspm/">Automated method for non-destructive 3D visualisation of plant root architecture using X-ray tomography</a>. <em>4th International Workshop on Functional-Structural Plant Models</em> </li> <li> <strong>2003</strong>. Fouard Céline, Malandain Grégoire — <a href="https://celine-fouard.fr/publication/2003-fouard-dgci/">Systematized calculation of optimal coefficients of 3-D chamfer norms</a>. <em>Discrete Geometry for Computer Imagery, 11th International Conference, DGCI 2003</em> </li> </ul> <h2 id="what-this-thesis-taught-me">What this thesis taught me</h2> <p>This thesis was, for me, <strong>a first school of applied prototyping</strong> — far more than a theoretical exercise.</p> <p>Because it was a CIFRE thesis, I first learned to <strong>work between several worlds</strong>: to ask anatomists the right questions, to translate their need into an algorithmic problem, and to deliver a result that could be integrated into an industrial partner’s software. This stance — a translator between use and technique — has stayed at the centre of my practice.</p> <p>I then built the reflex of <strong>designing robust, automatic methods</strong>. Faced with data that was all different — varying anisotropic grids, uneven contrast — I sought algorithms that <em>adapt by themselves</em> rather than multiplying manual settings, a source of fragility and variability.</p> <p>I also developed a taste for <strong>generality</strong>: building tools that outgrow their initial use case. The same building blocks, designed for the brain, proved useful for plant roots — and many other domains.</p> <p>Finally, I learned to deal with a very concrete constraint: <strong>data too large for memory</strong>. Thinking of computation piece by piece, without ever sacrificing the correctness of the result, is a skill that serves in any project handling large volumes.</p> <p>These skills — built <em>alongside</em> a sustained effort of scientific publication — are the ones I now put at the service of medical-application prototyping.</p> </article> <article> <h1>Automated method for non-destructive 3D visualisation of plant root architecture using X-ray tomography</h1> <p>Tue, 01 Jun 2004 00:00:00 +0000</p> </article> <article> <h1>Skeletonization by blocks for large 3D datasets: application to brain microcirculation</h1> <p>Sun, 18 Apr 2004 00:00:00 +0000</p> </article> <article> <h1>Squelettisation par blocs pour de grands volumes de données 3D: application à la microcirculation cérébrale</h1> <p>Thu, 01 Jan 2004 00:00:00 +0000</p> </article> <article> <h1>Systematized calculation of optimal coefficients of 3-D chamfer norms</h1> <p>Sat, 01 Nov 2003 00:00:00 +0000</p> </article> <article> <h1>AI for health</h1> <p>Mon, 01 Jan 0001 00:00:00 +0000</p> </article> <article> <h1>Discrete Geometry</h1> <p>Mon, 01 Jan 0001 00:00:00 +0000</p> </article> <article> <h1>Interventional cardiology</h1> <p>Mon, 01 Jan 0001 00:00:00 +0000</p> <p><em>From clinical need to prototype: guiding the gesture at the heart of the cath lab.</em></p> <p>Interventional cardiology is performed under imaging, yet the clinician must often act without directly seeing the target: the lesion to treat or to biopsy does not appear on the real-time image in the room. Carried out with Prof. Gilles Barone-Rochette (Grenoble Alpes University Hospital) and the LTSI laboratory in Rennes, this project pursues a single goal expressed through two clinical questions: <strong>to give the cardiologist reliable guidance, built from preoperative imaging and usable directly in the room.</strong></p> <h2 id="the-common-thread-bouncing-back-when-the-data-runs-short">The common thread: bouncing back when the data runs short</h2> <p>The project started with the guidance of <strong>cell therapy</strong>. The first clinical trial enrolled fewer patients than expected: the data needed for the next steps were not there. Rather than abandoning it, we <strong>redeployed the technical building blocks already developed</strong> (image segmentation, navigation) toward a related clinical need with more immediate value and a better-identified bottleneck: <strong>endomyocardial biopsy</strong>.</p> <p>This pivot is, in itself, a deliverable: it illustrates the ability to <strong>de-risk a project, preserve the assets already built, and refocus the effort</strong> where the clinical value is highest — exactly the kind of trade-off a company expects when an R&D programme does not go as planned.</p> <h2 id="sub-project-1--guiding-post-infarction-cell-therapy">Sub-project 1 — Guiding post-infarction cell therapy</h2> <p>After a heart attack, some therapies consist in re-injecting cells into the myocardium. The whole challenge is <strong>precision</strong>: reaching the right areas, relying on information (the extent of fibrosis, the viable regions) that is only visible on preoperative imaging, not on the real-time image in the room.</p> <p>Our approach: <strong>fuse multimodal imaging</strong> to transfer, during the intervention, the targets identified preoperatively. The core building block is the <strong>automatic segmentation of the myocardium and fibrosis on late gadolinium enhancement MRI (LGE-MRI)</strong>, developed using deep learning as part of Erwan Lecesne’s PhD (co-supervised with the LTSI in Rennes), then integrated into to be presented to the clinician in the room.</p> <figure><figcaption> <p>Re-injecting cells in the right place: the precision of the gesture determines the therapy’s effectiveness.</p> </figcaption> </figure> <p>CamiTK is a <strong>prototyping toolkit</strong>: it makes it possible to move quickly from concept to evaluated prototype, but its output is not meant to be a CE-marked medical device. This building block is therefore a <strong>proof of concept</strong>; its <strong>industrial transfer is currently under discussion</strong> with partners in the field.</p> <h2 id="sub-project-2--a-map-for-endomyocardial-biopsy">Sub-project 2 — A map for endomyocardial biopsy</h2> <p>Three conditions — cardiac sarcoidosis, chronic myocarditis and arrhythmogenic cardiomyopathy — can present a <strong>similar clinical picture yet call for opposite treatments</strong>. To decide, a biopsy is needed… provided the sample is taken <strong>in the right place</strong>.</p> <div style="display: flex; justify-content: center;"><figure><figcaption> <p>Endomyocardial biopsy: sampling a piece of cardiac tissue, where the lesion is located.</p> </figcaption> </figure> </div> <p>The state of the art leaves a real gap:</p> <ul> <li>“blind” biopsy is poorly specific, because the fibrosis to target stays invisible during the gesture;</li> <li>electro-anatomical guidance is long and, likewise, <strong>blind to fibrosis</strong>.</li> </ul> <p>Our solution acts as a <strong>“GPS” for the biopsy catheter</strong>: it transfers the target identified on preoperative imaging onto the real-time image, to guide the sampling. Two design choices make it a solution <strong>built for adoption</strong>: it is <strong>hardware-independent</strong> (compatible with an existing room) and works <strong>on real-time fluoroscopy, with no complex fusion step</strong>. It <strong>directly reuses</strong> the segmentation building block from the first sub-project.</p> <figure><figcaption> <p>Diagram of the proposed guidance system for endomyocardial biopsy (published).</p> </figcaption> </figure> <p>Current status: we are <strong>preparing the first clinical trials in the laboratory</strong>; industrial transfer will follow.</p> <h2 id="what-this-project-demonstrates">What this project demonstrates</h2> <ul> <li><strong>Designing from a real clinical need</strong>, in close dialogue with practitioners, rather than around a technical feat.</li> <li><strong>Mastering medical image processing and AI</strong>, and putting them at the service of a precise, useful target.</li> <li><strong>Taking a prototype from the laboratory toward the clinic</strong>, with a clear awareness of maturity stages (TRL), the trial framework and CE marking.</li> <li><strong>Architecting for adoption</strong>: hardware independence, integration into a prototyping toolkit, reuse of building blocks.</li> <li><strong>Refocusing a project to preserve its value</strong>: agility and de-risking in the face of the unexpected.</li> <li><strong>Leading a multi-site collaboration</strong> (Grenoble–Rennes) and co-supervising a PhD.</li> </ul> <h2 id="funding-obtained">Funding obtained</h2> <table> <thead> <tr> <th>Funding</th> <th>Amount</th> <th>Purpose</th> </tr> </thead> <tbody> <tr> <td>Famtastic project (France Life Imaging)</td> <td>€20,000</td> <td>Kick-starting the collaboration with the LTSI (Rennes)</td> </tr> <tr> <td>PUI (UGA)</td> <td>€60,000</td> <td>Maturing the prototype toward the first clinical trials</td> </tr> <tr> <td>PhD funding (LabeX CAMI)</td> <td>€170,000</td> <td>Co-supervision of Erwan Lecesne’s PhD</td> </tr> <tr> <td>Post-doctorate (LabeX CAMI)</td> <td>€56,000</td> <td>One year of post-doctoral engineering</td> </tr> <tr> <td><strong>Total</strong></td> <td><strong>€306,000</strong></td> <td></td> </tr> </tbody> </table> <h2 id="collaborations-and-supervision">Collaborations and supervision</h2> <ul> <li><strong>Prof. Gilles Barone-Rochette</strong> — interventional cardiologist, Grenoble Alpes University Hospital: clinical partner of the project.</li> <li><strong>LTSI laboratory (Rennes)</strong> — Professor Mireille Garreau and Antoine Simon (associate professor): collaboration on cardiac image processing.</li> <li><strong>Erwan Lecesne’s PhD</strong> (2020–2024), co-supervised at 50% with Mireille Garreau (LTSI): multimodal image processing to improve post-infarction cell therapy.</li> <li><strong>Théophile Tiffet’s PhD</strong> — medical resident: echocardiography / SPECT calibration for interventional cardiology.</li> </ul> <h2 id="related-publications">Related publications</h2> <ul class="pubs-by-tag"> <li> <strong>2024</strong>. Barone-Rochette Gilles, MD,, Erwan Lecesne, MSc,, Antoine Simon, PhD, Mireille Garreau, PhD,, Celine Fouard, PhD — <a href="https://celine-fouard.fr/publication/2024-barone-circulation/">New Method CMR-Guided Endomyocardial Biopsy in Suspicion Context of Isolated Cardiac Sarcoidosis</a>. <em>Circulation: Cardiovascular Imaging, vol 17, no 4</em> </li> <li> <strong>2023</strong>. Erwan Lecesne, Antoine Simon, Mireille Garreau, Barone-Rochette Gilles, Celine Fouard — <a href="https://celine-fouard.fr/publication/2023-lecesne-cmpb/">Segmentation of cardiac infarction in delayed-enhancement MRI using probability map and transformers-based neural networks</a>. <em>Computer Methods and Programs in Biomedicine, vol 242</em> </li> <li> <strong>2023</strong>. Lecesne Erwan, Simon Antoine, Garreau Mireille, Barone-Rochette Gilles, Fouard Céline — <a href="https://celine-fouard.fr/publication/2023-lecesne-ipta/">Transformers-Based Neural Network for Cardiac Infarction Segmentation in Delayed-Enhancement MRI</a>. <em>2023 IEEE Twelfth International Conference on Image Processing Theory, Tools and Applications (IPTA)</em> </li> </ul> </article> <article> <h1>Medical image analysis</h1> <p>Mon, 01 Jan 0001 00:00:00 +0000</p> </article> <article> <h1>Navigation & robotics</h1> <p>Mon, 01 Jan 0001 00:00:00 +0000</p> </article> <article> <h1>Project management & maturation</h1> <p>Mon, 01 Jan 0001 00:00:00 +0000</p> </article> </main></body></html>