ClearML/clearml-docs
1
0
Fork 0
mirror of https://github.com/clearml/clearml-docs synced 2025-06-26 18:17:44 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

collapsible panel redesign (#487)

Browse Source
This commit is contained in:
pollfly
2023-02-22 12:29:36 +02:00
committed by GitHub
parent db692908ff
commit ca60eaf36b
15 changed files with 253 additions and 263 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
docs/hyperdatasets/masks.md
View File

@@ -48,11 +48,8 @@ section of a Frame).
This example demonstrates an original image, its masks, and its frame containing
the `sources` and ROI metadata.
<details className="cml-expansion-panel info">
<summary className="cml-expansion-panel-summary">Example 1: View the frame</summary>
<div className="cml-expansion-panel-content">
<Collapsible type="info" title="Example 1: View the frame">
This frame contains the `masks` list of dictionaries in `sources`,
and the `rois` array, as well as several top-level key-value pairs.
@@ -137,9 +134,7 @@ and the `rois` array, as well as several top-level key-value pairs.
}
```
</div>
</details>
<br/>
</Collapsible>
* In `sources`:
@@ -153,10 +148,7 @@ and the `rois` array, as well as several top-level key-value pairs.
<details className="cml-expansion-panel screenshot">
<summary className="cml-expansion-panel-summary">Example image and masks</summary>
<div className="cml-expansion-panel-content">
<Collapsible type="screenshot" title="Example image and masks">
Original Image
![image](../img/hyperdatasets/concepts_masks_image_only.png)
@@ -165,19 +157,13 @@ Mask image
![image](../img/hyperdatasets/concepts_masks.png)
</div>
</details>
<br/>
</Collapsible>
### Example 2
This example shows two masks for video from a camera. The masks label cars and the road.
<details className="cml-expansion-panel info">
<summary className="cml-expansion-panel-summary">Example 2: View the frame</summary>
<div className="cml-expansion-panel-content">
<Collapsible type="info" title="Example 2: View the frame">
```json
"sources": [
@@ -227,9 +213,7 @@ This example shows two masks for video from a camera. The masks label cars and t
}
```
</div>
</details>
<br/>
</Collapsible>
* In `sources`:
* The source ID is `front`.

9
docs/hyperdatasets/previews.md
View File

@@ -19,9 +19,8 @@ The following is an example of preview metadata.
"timestamp": 0
}
```
<details className="cml-expansion-panel configuration">
<summary className="cml-expansion-panel-summary">View an entire frame containing a preview</summary>
<div className="cml-expansion-panel-content">
<Collapsible type="configuration" title="View an entire frame containing a preview">
```json
{
@@ -95,9 +94,7 @@ The following is an example of preview metadata.
}
```
</div>
</details>
<br/>
</Collapsible>
Here's an example of Previews in the ClearML Enterprise WebApp (UI). Each thumbnail is a Preview.

25
docs/hyperdatasets/single_frames.md
View File

@@ -69,9 +69,7 @@ This is useful when working with a video. You can give all the video frames the
The panel below describes the details contained within a `frame`:
<details className="cml-expansion-panel configuration">
<summary className="cml-expansion-panel-summary">Frame Structure</summary>
<div className="cml-expansion-panel-content">
<Collapsible type="configuration" title="Frame Structure">
* `id` (*string*) - The unique ID of this frame.
* `blob` (*string*) - Raw data.
@@ -130,9 +128,7 @@ The panel below describes the details contained within a `frame`:
* `saved` - The epoch time that the frame was saved.
* `timestamp` - For images from video, a timestamp that indicates the absolute position of this frame from the source (video).
</div>
</details>
<br/>
</Collapsible>
## WebApp
@@ -142,21 +138,16 @@ WebApp (UI).
When viewing a frame on the WebApp, all the information associated with it can be viewed, including its frame labels and
object annotations, its metadata, and other details.
<details className="cml-expansion-panel screenshot">
<summary className="cml-expansion-panel-summary">SingleFrame in the WebApp frame viewer</summary>
<div className="cml-expansion-panel-content">
<Collapsible type="screenshot" title="SingleFrame in the WebApp frame viewer">
This image shows a SingleFrame in the ClearML Enterprise WebApp (UI) [frame viewer](webapp/webapp_datasets_frames.md#frame-viewer).
![image](../img/hyperdatasets/frame_overview_01.png)
</div>
</details>
<br/>
</Collapsible>
<details className="cml-expansion-panel configuration">
<summary className="cml-expansion-panel-summary">SingleFrame details represented in the WebApp</summary>
<div className="cml-expansion-panel-content">
<Collapsible type="configuration" title="SingleFrame details represented in the WebApp">
id : "287024"
@@ -197,9 +188,7 @@ This image shows a SingleFrame in the ClearML Enterprise WebApp (UI) [frame view
saved_in_version : "6ad8b10c668e419f9dd40422f667592c"
num_frames : 1
</div>
</details>
<br/>
</Collapsible>
For more information about using Frames in the WebApp, see [Working with Frames](webapp/webapp_datasets_frames.md).

25
docs/hyperdatasets/sources.md
View File

@@ -23,9 +23,7 @@ The examples below demonstrate the `sources` section of a Frame for different ty
This example demonstrates `sources` for video.
<details className="cml-expansion-panel info">
<summary className="cml-expansion-panel-summary">Example 1</summary>
<div className="cml-expansion-panel-content">
<Collapsible type="info" title="Example 1">
```json
/* video from one of four cameras on car */
@@ -51,9 +49,7 @@ This example demonstrates `sources` for video.
```
</div>
</details>
<br/>
</Collapsible>
The `sources` example above details a video from a car that has two cameras. One camera
is the source with the ID `front` and the other is the source with the ID `rear`.
@@ -73,9 +69,8 @@ Sources includes a variety of content types. This example shows an mp4 video.
### Example 2: Images Sources
This example demonstrates `sources` images.
<details className="cml-expansion-panel info">
<summary className="cml-expansion-panel-summary">Example 2</summary>
<div className="cml-expansion-panel-content">
<Collapsible type="info" title="Example 2">
```json
/* camera images */
@@ -90,9 +85,7 @@ This example demonstrates `sources` images.
}
```
</div>
</details>
<br/>
</Collapsible>
The `sources` of this frame contains the following information:
* `content_type` - This frame contains an image in `png` format.
@@ -105,9 +98,7 @@ The `sources` of this frame contains the following information:
This example demonstrates `sources` for video, `masks`, and `preview`.
<details className="cml-expansion-panel info">
<summary className="cml-expansion-panel-summary">Example 3</summary>
<div className="cml-expansion-panel-content">
<Collapsible type="info" title="Example 3">
```json
@@ -182,9 +173,7 @@ This example demonstrates `sources` for video, `masks`, and `preview`.
}
```
</div>
</details>
<br/>
</Collapsible>
This frame shows the `masks` section in `sources`, and the top-level `rois` array.

30
docs/hyperdatasets/webapp/webapp_datasets_versioning.md
View File

@@ -73,9 +73,7 @@ Simple frame filtering returns frames containing at least one annotation with a
**To apply a simple frame filter,** select a label from the **LABEL FILTER** list.
<details className="cml-expansion-panel screenshot">
<summary className="cml-expansion-panel-summary">Simple filter example</summary>
<div className="cml-expansion-panel-content">
<Collapsible type="screenshot" title="Simple filter example">
* The **FRAMES** tab in the image below contains 101 frames.
@@ -86,8 +84,7 @@ Simple frame filtering returns frames containing at least one annotation with a
![Filtered version browser](../../img/hyperdatasets/frame_filtering_02.png)
</div>
</details>
</Collapsible>
### Advanced Frame Filtering
@@ -127,9 +124,7 @@ To clear all filters click <img src="/docs/latest/icons/ico-filter-reset.svg" al
#### Filtering Examples
<details className="cml-expansion-panel screenshot">
<summary className="cml-expansion-panel-summary">ROI Rules</summary>
<div className="cml-expansion-panel-content">
<Collapsible type="screenshot" title="ROI Rules">
* Create one ROI rule for the `teddy bear` label, which shows the same three frames as the simple frame filter (above).
@@ -144,13 +139,9 @@ To clear all filters click <img src="/docs/latest/icons/ico-filter-reset.svg" al
![Labeled ROIs in frame viewer](../../img/hyperdatasets/frame_filtering_05.png)
</div>
</details>
<br/>
</Collapsible>
<details className="cml-expansion-panel screenshot">
<summary className="cml-expansion-panel-summary">Frame Rules</summary>
<div className="cml-expansion-panel-content">
<Collapsible type="screenshot" title="Frame Rules">
Filter by metadata using Lucene queries.
@@ -162,13 +153,9 @@ Filter by metadata using Lucene queries.
![Frame metadata in frame viewer](../../img/hyperdatasets/frame_filtering_09.png)
</div>
</details>
<br/>
</Collapsible>
<details className="cml-expansion-panel screenshot">
<summary className="cml-expansion-panel-summary">Source Rules</summary>
<div className="cml-expansion-panel-content">
<Collapsible type="screenshot" title="Source Rules">
Filter by sources using Lucene queries.
@@ -178,8 +165,7 @@ Filter by sources using Lucene queries.
Lucene queries can also be used in ROI label filters and frame rules.
</div>
</details>
</Collapsible>
### Exporting Frames