Hugging Face's logo

Spaces:
sebdg
/
portfolio
Running

App Files Community
portfolio / object-detection.html
Sebastien De Greef
Create index.html for AI portfolio and add projects.json
d5c3317
Raw History Blame Contribute Delete
2.78 kB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Object Detection with YOLO</title>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/styles/default.min.css"
/>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/highlight.min.js"></script>
<script>
class BC {
constructor(elementId) {
this.container = document.getElementById(elementId);
this.headings = document.querySelectorAll("h1, h2, h3, h4");
this.currentHeading = null;
}
set_breadcrumb() {
const headings = document.querySelectorAll("h1, h2, h3, h4"); // Select all heading elements
let currentHeading = null;
// Iterate through headings to see which is currently viewable
for (let i = 0; i < headings.length; i++) {
const heading = headings[i];
if (
heading.getBoundingClientRect().top <
window.innerHeight * 0.1
) {
// Heading is at the top of the page
currentHeading = heading;
} else {
break; // Once a heading below the top is found, stop the search
}
}
// Update the breadcrumb div with the current heading information
const breadcrumb = document.getElementById("breadcrumb");
if (currentHeading) {
breadcrumb.textContent = currentHeading.textContent; // Set text or build a more complex breadcrumb
}
}
}
console.log(marked);
document.addEventListener("DOMContentLoaded", function () {
fetch("object-detection.md")
.then((response) => response.text())
.then((text) => {
const html = marked.marked(text);
document.getElementById("markdown-container").innerHTML = html;
document.querySelectorAll("pre code").forEach((block) => {
hljs.highlightBlock(block);
});
const bc = new BC("markdown-container");
bc.set_breadcrumb();
document.addEventListener("scroll", bc.set_breadcrumb);
})
.catch((error) =>
console.error("Error loading the Markdown file:", error)
);
});
</script>
</head>
<body>
<div id="breadcrumb"></div>
<div id="markdown-container"></div>
</body>
</html>