File size: 16,831 Bytes
1c8c799 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>STM32AI Model Zoo</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Arial', sans-serif;
background-color: #f8f9fa;
color: #03234b;
display: flex;
}
.sidebar {
width: 200px;
height: 100vh;
position: fixed;
left: 0;
top: 0;
background-color: white;
padding: 20px;
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
overflow-y: auto;
transition: all 0.3s ease-in-out;
}
.sidebar h2 {
font-size: 18px;
margin-bottom: 10px;
font-weight: bold;
}
.sidebar ul {
list-style-type: none;
padding: 0;
}
.sidebar ul li {
margin: 10px 0;
}
.sidebar ul li a {
text-decoration: none;
color: #1a73e8;
font-size: 16px;
display: block;
padding: 6px 10px;
border-radius: 5px;
}
.sidebar ul li a:hover {
background-color: #e3f2fd;
}
.content {
margin-left: 220px;
padding: 40px;
max-width: 1200px;
width: 100%;
line-height: 1.6;
word-wrap: break-word;
overflow-wrap: break-word;
transition: margin-left 0.3s ease-in-out;
}
h1, h2, h3 {
color: #03234b;
}
p {
margin-bottom: 15px;
}
hr {
border: 0;
height: 1px;
background: #ddd;
margin: 20px 0;
}
.content-wrapper {
display: flex;
flex-direction: column;
gap: 20px;
}
@media (max-width: 768px) {
.sidebar {
width: 180px;
}
.content {
margin-left: 200px;
}
}
@media (max-width: 576px) {
.sidebar {
width: 100%;
height: auto;
position: relative;
padding: 15px;
text-align: center;
}
.content {
margin-left: 0;
width: 100%;
padding: 20px;
}
.sidebar ul {
display: flex;
justify-content: center;
gap: 15px;
}
.sidebar ul li {
display: inline;
}
}
.image-small {
width: 150px;
height: auto;
}
.title-container {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.title-container h1 {
margin: 0;
}
.title-container img {
margin-left: 20px;
}
.button {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
color: #fff;
background-color: #007bff;
border: none;
border-radius: 5px;
text-align: center;
text-decoration: none;
margin-top: 20px;
}
.button:hover {
background-color: #0056b3;
}
.badge {
display: inline-block;
padding: 5px 10px;
font-size: 14px;
color: #fff;
background-color: #28a745;
border-radius: 5px;
margin-right: 5px;
}
/* Table Styles */
.centered-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-size: 16px;
text-align: left;
}
.centered-table th, .centered-table td {
padding: 12px 15px;
border: 1px solid #ddd;
}
.centered-table th {
background-color: #f2f2f2;
color: #03234b;
}
.centered-table tr:nth-child(even) {
background-color: #f9f9f9;
}
.centered-table tr:hover {
background-color: #f1f1f1;
}
.centered-table a {
color: #1a73e8;
text-decoration: none;
}
.centered-table a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="sidebar">
<h2>Table of Contents</h2>
<ul>
<li><a href="#Introduction">Introduction</a></li>
<li><a href="#UserGuide">User Guide</a></li>
<li><a href="#UsageScenarios">Usage Scenarios and Examples</a></li>
<li><a href="#StartApplication">How to Start the Application</a></li>
</ul>
</div>
<div class="content">
<div class="content-wrapper">
<div class="title-container">
<h1> 🚀 STMicroelectronics - STM32AI model zoo</h1>
<img src="{{url_for('static', filename='ST_logo_2024_blue.jpg')}}" alt="Logo" class="image-small">
</div>
<hr>
<p class="lead">
Welcome to the STM32 Model zoo dockerized Dashboard 📈 <br>
This space is dedicated to run STM32 model zoo from the dashboard using Dash Plotly. This zoo is a collection of reference machine learning models that are optimized to run on STM32 microcontrollers. Available on GitHub, this is a valuable resource for anyone looking to add AI capabilities to their STM32-based projects.
</p>
<section id="Summary">
<h2>Quick Start</h2>
<p>
Get started quickly with the STM32 Model Zoo Dashboard. Click the button below to start the application.
</p>
<a href="#StartApplication" class="button" style="background-color: #FFD200; color: #03234b; padding: 10px 20px; text-decoration: none; border-radius: 5px; border: 2px solid #FFD200; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);"> Start Application</a>
</section>
<section id="Introduction">
<h2>Introduction</h2>
<p>
The application provides a comprehensive dashboard interface for interacting with STM32 models and exploring their capabilities. It is developed using Flask and Dash, and is hosted on Hugging Face Spaces.<br>
This dashboard simplifies the use of the STM32 AI Model Zoo, enabling you to start training these models on Hugging Face with ease.
</p>
<div align="center" style="margin-top: 80px; padding: 20px 0;">
<p align="center">
<a href="https://www.python.org/downloads/" target="_blank"><img src="https://img.shields.io/badge/python-3.10-blue" /></a>
<a href="https://dash.plotly.com/installation" target="_blank"><img src="https://img.shields.io/badge/Dash%20Plotly-2.0.0-3CAEA3?style=flat&logo=plotly&logoColor=white&link=https://dash.plotly.com/installation"/></a>
<a href="https://stm32ai-cs.st.com/home" target="_blank"><img src="https://img.shields.io/badge/STM32Cube.AI-Developer%20Cloud-FFD700?style=flat&logo=stmicroelectronics&logoColor=white"/></a>
</p>
</section>
<section id="UserGuide">
<h2>User Guide</h2>
<p>
This application provides the necessary code to build a docker container that runs on Hugging Face Docker Space. This space hosts :</p>
<li style="color: #03234b" ><b>Dash application script:</b> This application provides a dashboard developed with Dash Plotly to run use cases from the STM32-Model Zoo. You can <b>Train</b>, <b>Evaluate</b> and <b>Benchmark</b> models seamlessly.</li>
<li style="color: #03234b" ><b>Dockerfile:</b> Sets up the desired environment and clones the repository from GitHub to ensure alignment with the latest updates. Model zoo is hosted <a href="https://github.com/STMicroelectronics/stm32ai-modelzoo-services" target="_blank">here</a>. You can find the licences information <a href="https://github.com/STMicroelectronics/stm32ai-modelzoo-services/blob/main/LICENSE.md" target="_blank">here</a>.</li>
<li style="color: #03234b" ><b>Datasets:</b> Downloads the dataset based on the use case. The user must provide the dataset link before building the docker image and launching the application. The table below summarizes the datasets handled by the script: <br>
<br>
<table class="centered-table">
<thead>
<tr>
<th>Dataset</th>
<th>License</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="http://download.tensorflow.org/example_images/flower_photos.tgz">Flower Photos</a></td>
<td><a href="https://creativecommons.org/licenses/by/2.0/">CC BY 2.0</a></td>
</tr>
<tr>
<td><a href="https://data.mendeley.com/datasets/tywbtsjrjv/1">Plant Village</a></td>
<td><a href="https://creativecommons.org/publicdomain/zero/1.0/">CC0 1.0</a></td>
</tr>
<tr>
<td><a href="https://data.vision.ee.ethz.ch/cvl/datasets_extra/food-101/">Food-101</a></td>
<td><a href="https://github.com/STMicroelectronics/stm32ai-modelzoo/tree/main/image_classification/pretrained_models/mobilenetv2">-</a></td>
</tr>
<tr>
<td><a href="https://www.cis.fordham.edu/wisdm/includes/datasets/latest/WISDM_ar_latest.tar.gz">WISDM Activity Recognition</a></td>
<td><a href="https://creativecommons.org/licenses/by/2.0/">CC BY 2.0</a></td>
</tr>
<tr>
<td><a href="https://github.com/STMicroelectronics/stm32ai-modelzoo/raw/main/hand_posture/datasets/ST_VL53L8CX_handposture_dataset.zip">Hand Posture</a></td>
<td><a href="https://github.com/STMicroelectronics/stm32ai-modelzoo/blob/main/hand_posture/datasets/LICENSE.md">SLA008</a></td>
</tr>
<tr>
<td><a href="https://github.com/karolpiczak/ESC-50/archive/master.zip">ESC-50</a></td>
<td><a href="https://github.com/karolpiczak/ESC-50/blob/master/LICENSE">-</a></td>
</tr>
</tbody>
</table>
</p>
</section>
<section id="UsageScenarios">
<h2>Usage Scenarios</h2>
<p>
To start using the features of this application follow these steps:
<div class="indented">
<li><strong>Go to the <em>Start Application</em> section</strong>: Duplicate this space to launch it on your Hugging Face space. This will automatically build the image and launch the container on your space.</li>
<p style= "margin-left: 2em">
<li> If you'd like to use one of these models, please follow these instructions:
<ul>
<li><em>Object Detection:</em> Please follow this <a href="https://github.com/STMicroelectronics/stm32ai-modelzoo-services/tree/main/object_detection/src#1" target="_blank">link</a> to perform dataset preparation.</li>
<br>
<li><em>Semantic Segmentation:</em> Please follow this <a href="https://github.com/STMicroelectronics/stm32ai-modelzoo-services/tree/main/semantic_segmentation/src#2-3" target="_blank">link</a> to get the dataset.</li>
<br>
<li><em>Pose Estimation:</em> Please follow this <a href="https://github.com/STMicroelectronics/stm32ai-modelzoo-services/tree/main/pose_estimation/src#1" target="_blank">link</a> to get the dataset.</li>
</ul>
</li>
<li><strong>Setup and launch your application:</strong> To launch one of the other use cases, first check the download_datasets.py script and make sure you have the link corresponding to your dataset to download. We provided links the script for datasets mentioned in the previous table.<br>
These datasets are downloaded automatically and do not require a data preparation phase as mentioned for Object Detection, Pose Segmentation, and Semantic Segmentation use cases.</li>
<br>
<strong>How to use the dashboard ? </strong><br>
<ol>
<li>Select the use case from the drop-down list.</li>
<br>
<li>A corresponding YAML configuration file will open, and you'll need to configure it to launch a training session.<br>
If you're using a use case with one of the datasets handled by the download_datasets.py script, go to the Dataset section in the YAML file and configure the path to your data accordingly : <em>../datasets/your_use_case/name_of_dataset</em><br>
<br>
For example, if you selected Image classification use case with flowers dataset the path should be this way: <em>../datasets/image_classification/flowers_photo</em> <br>
<br>
For the other use cases that need data preparation, we recommend you place your dataset in the datasets folder and set your path accordingly: <em>datasets/name_of_your_dataset</em>
</li>
<br>
<li>Submit your modifications and insert your ST Edge AI Developer cloud to benefit from the whole experience.<br>
Your training session will start, allowing you to visualize output logs and metrics plots. Finally, you can download your experiment outputs.<br>
</li>
</ol>
<p> If you need to explore, evaluate, and benchmark pre-trained models, you can use <a href="https://github.com/STMicroelectronics/stm32ai-modelzoo" target="_blank">stm32ai-modelzoo</a></p>
<br>
<em> Note: </em>
<li>Deployment on edge is not supported.</li>
<li>If you need to reproduce the same experience provided in the model zoo, please refer to <a href="https://github.com/STMicroelectronics/stm32ai-modelzoo" target="_blank">stm32ai-modelzoo</a> </li>
<li>If you want to discover different services offered by the model zoo, please refer to <a href="https://github.com/STMicroelectronics/stm32ai-modelzoo-services" target="_blank">stm32ai-modelzoo-services</a> </li></li>
<li> If you need to use your own model, please add it to the models folder, rebuild the Docker image, and then update the model path in the user configuration YAML file.</li>
</p>
</p>
</section>
<section id="StartApplication">
<h2>How to Start the Application</h2>
<p>
Once the space has been duplicated from the home page, you need to update the script <em>download_datasets.py</em> script that will allow you to download and unarchive the dataset corresponding to your use case.
</p>
<br>
{% if duplicate_mode %}
<h3>Duplicate this Space</h3>
<p style="color: #03234b;">
To start using this application, duplicate this space to your own Hugging Face account.
</p>
<a href="https://huggingface.co/spaces/STMicroelectronics/stm32-modelzoo-app?duplicate=true" target="_blank" style="background-color: #03234b; color: white; padding: 10px 20px; text-decoration: none; border-radius: 5px; border: 2px solid #03234b; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);">
Duplicate this Space
</a>
{% else %}
<h3>Launch the Dashboard</h3>
<p>
You have duplicated the space. Now you can launch the interactive dashboard below.
</p>
<a href="/dash_app/" target="_blank" style="background-color: #03234b; color: white; padding: 10px 20px; text-decoration: none; border-radius: 5px; border: 2px solid #03234b; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);">
Launch Dashboard
</a>
{% endif %}
</section>
</div>
</div>
</body>
</html> |