|
<!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; |
|
} |
|
|
|
|
|
.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> |
