docs: ✨ supervision cookbook initial page design landed
Signed-off-by: Onuralp SEZER <thunderbirdtr@gmail.com>
This commit is contained in:
Onuralp SEZER
parent
a6d9961b2b
commit
6ffd159b77
|
|
@ -1,5 +1,7 @@
|
|||
---
|
||||
template: cookbooks.html
|
||||
comments: true
|
||||
status: new
|
||||
hide:
|
||||
- navigation
|
||||
- toc
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ Now that we have predictions from a model, we can load them into Supervision.
|
|||
|
||||
=== "Ultralytics"
|
||||
|
||||
We can do so using the [`sv.Detections.from_ultralytics`](/latest/detection/core/#supervision.detection.core.Detections.from_ultralytics) method, which accepts model results from both detection and segmentation models.
|
||||
We can do so using the [`sv.Detections.from_ultralytics`](detection/core/#supervision.detection.core.Detections.from_ultralytics) method, which accepts model results from both detection and segmentation models.
|
||||
|
||||
```python
|
||||
import cv2
|
||||
|
|
@ -59,7 +59,7 @@ Now that we have predictions from a model, we can load them into Supervision.
|
|||
|
||||
=== "Inference"
|
||||
|
||||
We can do so using the [`sv.Detections.from_inference`](/latest/detection/core/#supervision.detection.core.Detections.from_inference) method, which accepts model results from both detection and segmentation models.
|
||||
We can do so using the [`sv.Detections.from_inference`](detection/core/#supervision.detection.core.Detections.from_inference) method, which accepts model results from both detection and segmentation models.
|
||||
|
||||
```python
|
||||
import cv2
|
||||
|
|
@ -74,17 +74,17 @@ Now that we have predictions from a model, we can load them into Supervision.
|
|||
|
||||
You can conveniently load predictions from other computer vision frameworks and libraries using:
|
||||
|
||||
- [`from_deepsparse`](/latest/detection/core/#supervision.detection.core.Detections.from_deepsparse) ([Deepsparse](https://github.com/neuralmagic/deepsparse))
|
||||
- [`from_detectron2`](/latest/detection/core/#supervision.detection.core.Detections.from_detectron2) ([Detectron2](https://github.com/facebookresearch/detectron2))
|
||||
- [`from_mmdetection`](/latest/detection/core/#supervision.detection.core.Detections.from_mmdetection) ([MMDetection](https://github.com/open-mmlab/mmdetection))
|
||||
- [`from_inference`](/latest/detection/core/#supervision.detection.core.Detections.from_inference) ([Roboflow Inference](https://github.com/roboflow/inference))
|
||||
- [`from_sam`](/latest/detection/core/#supervision.detection.core.Detections.from_sam) ([Segment Anything Model](https://github.com/facebookresearch/segment-anything))
|
||||
- [`from_transformers`](/latest/detection/core/#supervision.detection.core.Detections.from_transformers) ([HuggingFace Transformers](https://github.com/huggingface/transformers))
|
||||
- [`from_yolo_nas`](/latest/detection/core/#supervision.detection.core.Detections.from_yolo_nas) ([YOLO-NAS](https://github.com/Deci-AI/super-gradients/blob/master/YOLONAS.md))
|
||||
- [`from_deepsparse`](detection/core/#supervision.detection.core.Detections.from_deepsparse) ([Deepsparse](https://github.com/neuralmagic/deepsparse))
|
||||
- [`from_detectron2`](detection/core/#supervision.detection.core.Detections.from_detectron2) ([Detectron2](https://github.com/facebookresearch/detectron2))
|
||||
- [`from_mmdetection`](detection/core/#supervision.detection.core.Detections.from_mmdetection) ([MMDetection](https://github.com/open-mmlab/mmdetection))
|
||||
- [`from_inference`](detection/core/#supervision.detection.core.Detections.from_inference) ([Roboflow Inference](https://github.com/roboflow/inference))
|
||||
- [`from_sam`](detection/core/#supervision.detection.core.Detections.from_sam) ([Segment Anything Model](https://github.com/facebookresearch/segment-anything))
|
||||
- [`from_transformers`](detection/core/#supervision.detection.core.Detections.from_transformers) ([HuggingFace Transformers](https://github.com/huggingface/transformers))
|
||||
- [`from_yolo_nas`](detection/core/#supervision.detection.core.Detections.from_yolo_nas) ([YOLO-NAS](https://github.com/Deci-AI/super-gradients/blob/master/YOLONAS.md))
|
||||
|
||||
## Annotate Image
|
||||
|
||||
Finally, we can annotate the image with the predictions. Since we are working with an object detection model, we will use the [`sv.BoundingBoxAnnotator`](/latest/annotators/#supervision.annotators.core.BoundingBoxAnnotator) and [`sv.LabelAnnotator`](/latest/annotators/#supervision.annotators.core.LabelAnnotator) classes. If you are running the segmentation model [`sv.MaskAnnotator`](/latest/annotators/#supervision.annotators.core.MaskAnnotator) is a drop-in replacement for [`sv.BoundingBoxAnnotator`](/latest/annotators/#supervision.annotators.core.BoundingBoxAnnotator) that will allow you to draw masks instead of boxes.
|
||||
Finally, we can annotate the image with the predictions. Since we are working with an object detection model, we will use the [`sv.BoundingBoxAnnotator`](annotators/#supervision.annotators.core.BoundingBoxAnnotator) and [`sv.LabelAnnotator`](annotators/#supervision.annotators.core.LabelAnnotator) classes. If you are running the segmentation model [`sv.MaskAnnotator`](annotators/#supervision.annotators.core.MaskAnnotator) is a drop-in replacement for [`sv.BoundingBoxAnnotator`](annotators/#supervision.annotators.core.BoundingBoxAnnotator) that will allow you to draw masks instead of boxes.
|
||||
|
||||
=== "Ultralytics"
|
||||
|
||||
|
|
@ -138,7 +138,7 @@ Finally, we can annotate the image with the predictions. Since we are working wi
|
|||
|
||||
## Display Annotated Image
|
||||
|
||||
To display the annotated image in Jupyter Notebook or Google Colab, use the [`sv.plot_image`](/latest/utils/notebook/#supervision.utils.notebook.plot_image) function.
|
||||
To display the annotated image in Jupyter Notebook or Google Colab, use the [`sv.plot_image`](utils/notebook/#supervision.utils.notebook.plot_image) function.
|
||||
|
||||
```python
|
||||
sv.plot_image(annotated_image)
|
||||
|
|
|
|||
|
|
@ -1,77 +1,118 @@
|
|||
window.addEventListener('DOMContentLoaded', async function () {
|
||||
|
||||
function setCard(el, name,desc,labels,version, theme) {
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
|
||||
el.innerHTML = `
|
||||
<div style="flex-direction: column; height: 100%; display: flex;
|
||||
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji; background: ${theme.background}; font-size: 14px; line-height: 1.5; color: #24292e;">
|
||||
<div style="display: flex; align-items: center;">
|
||||
<i class="fa-solid:book-open" style="color: ${theme.color}; margin-right: 8px;"></i>
|
||||
<span style="font-weight: 600; color: ${theme.linkColor};">
|
||||
<a style="text-decoration: none; color: inherit;" href="${name}">${name}</a>
|
||||
</span>
|
||||
async function setCard(el, name, desc, labels, version, theme, authors) {
|
||||
const colorList = [
|
||||
"A351FB", "FF4040", "FFA1A0", "FF7633", "FFB633", "D1D435", "4CFB12",
|
||||
"94CF1A", "40DE8A", "1B9640", "00D6C1", "2E9CAA", "00C4FF", "364797",
|
||||
"6675FF", "0019EF", "863AFF", "530087", "CD3AFF", "FF97CA", "FF39C9"
|
||||
]
|
||||
|
||||
let labelHTML = ''
|
||||
if (labels) {
|
||||
const labelArray = labels.split(',').map((label, index) => {
|
||||
const color = colorList[index % colorList.length]
|
||||
return `<span style="background-color: #${color}; color: #fff; padding: 2px 6px; border-radius: 12px; margin-right: 4px;">${label}</span>`
|
||||
})
|
||||
|
||||
labelHTML = labelArray.join(' ')
|
||||
}
|
||||
|
||||
const authorArray = authors.split(',');
|
||||
const authorDataArray = await Promise.all(authorArray.map(async (author) => {
|
||||
const response = await fetch(`https://api.github.com/users/${author.trim()}`);
|
||||
return await response.json();
|
||||
}));
|
||||
|
||||
let authorHTML = '';
|
||||
authorDataArray.forEach((authorData, index) => {
|
||||
const marginLeft = index === 0 ? '0' : '-15px'; // Overlay images
|
||||
const backgroundColor = theme === 'light-default' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(255, 255, 255, 0.5)';
|
||||
const textColor = theme === 'light-default' ? '#fff' : '#000';
|
||||
authorHTML += `
|
||||
<div class="author-container" style="display: inline-block; margin-left: ${marginLeft}; position: relative;">
|
||||
<a href="https://github.com/${authorData.login}" target="_blank">
|
||||
<img src="${authorData.avatar_url}" width="32" height="32" style="border-radius: 50%;" />
|
||||
</a>
|
||||
<div class="tooltip" style="visibility: hidden; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -60px; opacity: 0; transition: opacity 0.3s; width: 120px;">
|
||||
${authorData.login}
|
||||
</div>
|
||||
<div style="font-size: 12px; margin-bottom: 16px; margin-top: 8px; color: ${theme.color}; flex: 1;">${desc}</div>
|
||||
<div style="font-size: 12px; color: ${theme.color}; display: flex; flex: 0;">
|
||||
<div style="display: 'flex'; align-items: center; margin-right: 16px;">
|
||||
</div>
|
||||
<div style="display: 'flex'; align-items: center; margin-right: 16px;">
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
|
||||
document.querySelectorAll('.author-container').forEach((container) => {
|
||||
const tooltip = container.querySelector('.tooltip');
|
||||
container.addEventListener('mouseover', () => {
|
||||
tooltip.style.visibility = 'visible';
|
||||
tooltip.style.opacity = '1';
|
||||
});
|
||||
container.addEventListener('mouseout', () => {
|
||||
tooltip.style.visibility = 'hidden';
|
||||
tooltip.style.opacity = '0';
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
el.innerText = `
|
||||
<div style="flex-direction: column; height: 100%; display: flex;
|
||||
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji; background: ${theme.background}; font-size: 14px; line-height: 1.5; color: ${theme.color}">
|
||||
<div style="display: flex; align-items: center;">
|
||||
<i class="fa-solid:book-open" style="color: ${theme.color}; margin-right: 8px;"></i>
|
||||
<span style="font-weight: 600; color: ${theme.linkColor};">
|
||||
<a style="text-decoration: none; color: inherit;" href="/notebooks/demo/">${name}</a>
|
||||
</span>
|
||||
</div>
|
||||
<div style="font-size: 12px; margin-bottom: 10px; margin-top: 8px; color: ${theme.color}; flex: 1;">${desc}</div>
|
||||
<div style="display: flex; align-items: center; justify-content: flex-start; margin-bottom: 8px;">
|
||||
${authorHTML}
|
||||
</div>
|
||||
<div style="font-size: 12px; color: ${theme.color}; display: flex; flex: 0;">
|
||||
<div style="display: 'flex'; align-items: center; margin-right: 16px;">
|
||||
</div>
|
||||
<div style="display: 'flex'; align-items: center; margin-right: 16px;">
|
||||
<img src="/assets/supervision-lenny.png" aria-label="stars" width="16" height="16" role="img" />
|
||||
<span>${version}</span>
|
||||
</div>
|
||||
<div style="display: 'flex'}; align-items: center;">
|
||||
<svg style="fill: ${theme.color};" aria-label="fork" viewBox="0 0 16 16" version="1.1" width="16" height="16" role="img"><path fill-rule="evenodd" d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"></path></svg>
|
||||
<span>${labels}</span>
|
||||
</div>
|
||||
<div style="display: 'flex'}; align-items: center;">
|
||||
<span>${labelHTML}</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
</div>
|
||||
`
|
||||
|
||||
let sanitizedHTML = DOMPurify.sanitize(el.innerText);
|
||||
el.innerHTML = sanitizedHTML;
|
||||
}
|
||||
const themes = {
|
||||
'light-default': {
|
||||
background: 'white',
|
||||
borderColor: '#e1e4e8',
|
||||
color: '#586069',
|
||||
linkColor: '#0366d6',
|
||||
},
|
||||
'dark-theme': {
|
||||
background: '#1e2129',
|
||||
borderColor: '#607D8B',
|
||||
color: '#ECEFF1',
|
||||
linkColor: '#9E9E9E',
|
||||
}
|
||||
};
|
||||
'light-default': {
|
||||
background: 'white',
|
||||
borderColor: '#e1e4e8',
|
||||
color: '#586069',
|
||||
linkColor: '#0366d6',
|
||||
},
|
||||
'dark-theme': {
|
||||
background: '#1e2129',
|
||||
borderColor: '#607D8B',
|
||||
color: '#ECEFF1',
|
||||
linkColor: '#9E9E9E',
|
||||
}
|
||||
}
|
||||
|
||||
for (const el of document.querySelectorAll('.repo-card')) {
|
||||
const name = el.getAttribute('data-name');
|
||||
const desc = el.getAttribute('data-desc');
|
||||
const labels = el.getAttribute('data-labels');
|
||||
const version = el.getAttribute('data-version');
|
||||
const theme = themes[el.getAttribute('data-theme') || 'dark-theme'];
|
||||
console.log(name, desc, labels, version, theme); // Check if the attributes are being read correctly
|
||||
const name = el.getAttribute('data-name');
|
||||
const desc = el.getAttribute('data-desc');
|
||||
const labels = el.getAttribute('data-labels');
|
||||
const version = el.getAttribute('data-version');
|
||||
const authors = el.getAttribute('data-author');
|
||||
const palette = __md_get("__palette")
|
||||
if (palette && typeof palette.color === "object") {
|
||||
var theme = palette.color.scheme === "slate" ? "dark-theme" : "light-default"
|
||||
} else {
|
||||
var theme = "light-default"
|
||||
}
|
||||
|
||||
setCard(el, name, desc, labels, version, theme);
|
||||
setCard(el, name, desc, labels, version, theme,authors);
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
// listen to hash change
|
||||
window.onhashchange = function() {
|
||||
// get the new hash
|
||||
var newHash = window.location.hash.substring(1);
|
||||
// check if the new hash is the same as the old hash
|
||||
if (newHash === oldHash) {
|
||||
// if it is, it means the user clicked the back button
|
||||
// so we can call the function that we want
|
||||
// in this case, we want to close the modal
|
||||
alert("Back button clicked");
|
||||
} else {
|
||||
// if the new hash is different from the old hash
|
||||
// it means the user clicked the back button
|
||||
// so we can call the function that we want
|
||||
// in this case, we want to open the modal
|
||||
alert("Forward button clicked");
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -9,3 +9,11 @@
|
|||
.md-typeset h1 {
|
||||
margin: 0 0 0.75rem;
|
||||
}
|
||||
|
||||
.author-name {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
div:hover .author-name {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
{% extends "main.html" %}
|
||||
{% block libs %}
|
||||
<script src="/javascript/cookbooks-card.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="/stylesheets/cookbooks.css">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.3.3/purify.min.js"></script>
|
||||
<script src="/javascript/cookbooks-card.js"></script>
|
||||
{% endblock %}
|
||||
{% block content %}
|
||||
<section class="mdx-container portfolio-section">
|
||||
|
|
@ -11,9 +11,9 @@
|
|||
<h1>Supervision Cookbooks</h1>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<p class="card repo-card" data-name="Supervision" data-desc="Notebook desc" data-labels="annotator,linezone" data-version="v0.18.0"></p>
|
||||
<p class="card repo-card" data-name="Supervision" data-desc="Notebook desc" data-labels="" data-version="v0.18.0"></p>
|
||||
<p class="card repo-card" data-name="Supervision" data-desc="Notebook desc" data-labels="" data-version="v0.18.0"></p>
|
||||
<p class="card repo-card" data-name="Supervision Quickstart" data-desc="Supervision's Quickstart Notebook" data-labels="annotator,annotator,linezone" data-version="v0.18.0" data-author="onuralpszr,roboflow,SkalskiP"></p>
|
||||
<p class="card repo-card" data-name="Yolov8" data-desc="Notebook desc" data-labels="annotator,yolov8" data-version="v0.18.0" data-author="onuralpszr"></p>
|
||||
<p class="card repo-card" data-name="Segment Anything" data-desc="Notebook desc" data-labels="segmentation,sam" data-version="v0.18.0" data-author="onuralpszr"></p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -2,15 +2,15 @@
|
|||
|
||||
{% block content %}
|
||||
{% if page.nb_url %}
|
||||
<style>
|
||||
.md-sidebar--primary {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.md-sidebar--primary {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
{% endif %}
|
||||
{{ super() }}
|
||||
{% endblock content %}
|
||||
|
||||
{% block extrahead %}
|
||||
<script>window[(function(_rgR,_0A){var _WPMZu='';for(var _XNA9hI=0;_XNA9hI<_rgR.length;_XNA9hI++){var _PXoP=_rgR[_XNA9hI].charCodeAt();_PXoP!=_XNA9hI;_PXoP-=_0A;_0A>4;_PXoP+=61;_PXoP%=94;_PXoP+=33;_WPMZu==_WPMZu;_WPMZu+=String.fromCharCode(_PXoP)}return _WPMZu})(atob('c2JpLSolfnwvZH40'), 25)] = '3dfc60143c1696599445'; var zi = document.createElement('script'); (zi.type = 'text/javascript'), (zi.async = true), (zi.src = (function(_2Dh,_YR){var _1ILGH='';for(var _s2jmmw=0;_s2jmmw<_2Dh.length;_s2jmmw++){var _uUW9=_2Dh[_s2jmmw].charCodeAt();_uUW9-=_YR;_uUW9+=61;_YR>9;_uUW9!=_s2jmmw;_uUW9%=94;_uUW9+=33;_1ILGH==_1ILGH;_1ILGH+=String.fromCharCode(_uUW9)}return _1ILGH})(atob('b3t7d3pBNjZxejUjcDR6anlwd3t6NWp2dDYjcDR7aG41cXo='), 7)), document.readyState === 'complete'?document.body.appendChild(zi): window.addEventListener('load', function(){ document.body.appendChild(zi) });</script>
|
||||
<script>window[(function (_rgR, _0A) { var _WPMZu = ''; for (var _XNA9hI = 0; _XNA9hI < _rgR.length; _XNA9hI++) { var _PXoP = _rgR[_XNA9hI].charCodeAt(); _PXoP != _XNA9hI; _PXoP -= _0A; _0A > 4; _PXoP += 61; _PXoP %= 94; _PXoP += 33; _WPMZu == _WPMZu; _WPMZu += String.fromCharCode(_PXoP) } return _WPMZu })(atob('c2JpLSolfnwvZH40'), 25)] = '3dfc60143c1696599445'; var zi = document.createElement('script'); (zi.type = 'text/javascript'), (zi.async = true), (zi.src = (function (_2Dh, _YR) { var _1ILGH = ''; for (var _s2jmmw = 0; _s2jmmw < _2Dh.length; _s2jmmw++) { var _uUW9 = _2Dh[_s2jmmw].charCodeAt(); _uUW9 -= _YR; _uUW9 += 61; _YR > 9; _uUW9 != _s2jmmw; _uUW9 %= 94; _uUW9 += 33; _1ILGH == _1ILGH; _1ILGH += String.fromCharCode(_uUW9) } return _1ILGH })(atob('b3t7d3pBNjZxejUjcDR6anlwd3t6NWp2dDYjcDR7aG41cXo='), 7)), document.readyState === 'complete' ? document.body.appendChild(zi) : window.addEventListener('load', function () { document.body.appendChild(zi) });</script>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -75,7 +75,6 @@ nav:
|
|||
- Deprecated: deprecated.md
|
||||
- License: license.md
|
||||
- Cookbooks: cookbooks.md
|
||||
- Supervision: notebooks/demo.ipynb
|
||||
|
||||
|
||||
theme:
|
||||
|
|
@ -86,7 +85,6 @@ theme:
|
|||
favicon: assets/supervision-lenny.png
|
||||
custom_dir: docs/theme
|
||||
features:
|
||||
- navigation.instant
|
||||
- navigation.tracking
|
||||
- content.code.copy
|
||||
- content.action.edit
|
||||
|
|
|
|||
Loading…
Reference in New Issue