[gh-pages] RA: Web documentation for the new "deep learning-based digit classification exercise"

_includes/instruction

@@ -0,0 +1,51 @@
+{% if include.id %}
+  {% assign instruction = page[include.id] %}
+{% else %}
+  {% assign instruction = page.instruction %}
+{% endif %}
+
+{% if include.layout %}
+  {% assign gallery_layout = include.layout %}
+{% else %}
+  {% if instruction.size == 2 %}
+    {% assign gallery_layout = 'half' %}
+  {% elsif instruction.size >= 3 %}
+    {% assign gallery_layout = 'third' %}
+  {% else %}
+    {% assign gallery_layout = '' %}
+  {% endif %}
+{% endif %}
+
+<figure class="{{ gallery_layout }} {{ include.class }}">
+  {% for img in instruction %}
+    {% if img.url %}
+      <a href=
+        {% if img.url contains "://" %}
+          "{{ img.url }}"
+        {% else %}
+          "{{ img.url | relative_url }}"
+        {% endif %}
+        {% if img.title %}title="{{ img.title }}"{% endif %}
+      >
+        <img src=
+          {% if img.image_path contains "://" %}
+            "{{ img.image_path }}"
+          {% else %}
+            "{{ img.image_path | relative_url }}"
+          {% endif %}
+          alt="{% if img.alt %}{{ img.alt }}{% endif %}">
+      </a>
+    {% else %}
+      <img src=
+        {% if img.image_path contains "://" %}
+          "{{ img.image_path }}"
+        {% else %}
+          "{{ img.image_path | relative_url }}"
+        {% endif %}
+        alt="{% if img.alt %}{{ img.alt }}{% endif %}">
+    {% endif %}
+  {% endfor %}
+  {% if include.caption %}
+    <figcaption>{{ include.caption | markdownify | remove: "<p>" | remove: "</p>" }}</figcaption>
+  {% endif %}
+</figure>

_pages/exercises.md

@@ -250,11 +250,11 @@ feature_row:
     status: "prototype"
     order: 2;
 
-  - image_path: /assets/images/exercises/dl_digit_classifier/dl_digit_classifier.png
+  - image_path: /assets/images/exercises/digit_classification/digit_classification.png
     alt: "Digit Classifier"
     title: "Digit Classifier"
     excerpt: "Classify digits in real time using your own deep learning model."
-    url: "/exercises/ComputerVision/dl_digit_classifier"
+    url: "/exercises/ComputerVision/digit_classification"
     status: "prototype"
     order: 2;
 
@@ -321,7 +321,6 @@ feature_row:
     url: "/exercises/ComputerVision/basic_computer_vision"
     status: "running"
     order: 0;
-
 ---
 
 

_pages/exercises/ComputerVision/dl_digit_classifier.md → _pages/exercises/ComputerVision/digit_classification.md

@@ -1,42 +1,96 @@
 ---
-permalink: /exercises/ComputerVision/dl_digit_classifier
+permalink: /exercises/ComputerVision/digit_classification
 title: ""
 
 sidebar:
   nav: "docs"
 
 toc: true
-toc_label: "TOC Digit Classifier"
+toc_label: "TOC Digit Classification"
 toc_icon: "cog"
 
 <!--- layout: archive --->
 
 <!--- classes: wide --->
 
+digitclassification:
+  - url: /assets/images/exercises/digit_classification/digit_classification.png
+    image_path: /assets/images/exercises/digit_classification/digit_classification.png
+    alt: "digit_classification_exercise"
+    title: "Digit Classification"
 mnist:
-  - url: /assets/images/exercises/dl_digit_classifier/mnist.png
-    image_path: /assets/images/exercises/dl_digit_classifier/mnist.png
+  - url: /assets/images/exercises/digit_classification/mnist.png
+    image_path: /assets/images/exercises/digit_classification/mnist.png
     alt: "MNIST samples"
     title: "MNIST samples"
 
 cnn:
-  - url: /assets/images/exercises/dl_digit_classifier/cnn.png
-    image_path: /assets/images/exercises/dl_digit_classifier/cnn.png
+  - url: /assets/images/exercises/digit_classification/cnn.png
+    image_path: /assets/images/exercises/digit_classification/cnn.png
     alt: "Example of a Convolutional Neural Network"
     title: "Example of a Convolutional Neural Network"
 
+instruction:
+  - url: /assets/images/exercises/digit_classification/digit-classification-exercise-instruction-img-1.png
+    image_path: /assets/images/exercises/digit_classification/digit-classification-exercise-instruction-img-1.png
+    alt: "exercise instruction"
+    title: "exercise instruction"
+
+
+
 youtubeId1: 80K0Fd9GFkU
 
 ---
 
-# Digit Classification Exercise using Deep Learning
+# Deep learning-based Digit Classification Exercise
+{% include gallery id="digitclassification" caption="Digit Classification Exercise" %}
 
-In this exercise, we will train our own deep learning model to solve the widely known task of digit classification. In order to do so, the trained model has to match the input and output specifications described in this documentation. The input model must be provided in ONNX format, which we will talk about in the following sections.
+<p style="text-align:justify;">The goal of this exercise is to create a deep learning model capable of classifying digital and handwritten digits from 0 to 9. You will train this model using a machine learning library or framework of your choice and then export it to the <a href="https://onnx.ai/" target="_blank"><strong>ONNX (Open Neural Network Exchange)</strong></a> format. You can upload your own ONNX model and use the editor to write Python code that processes input from a live video feed, which is captured using your browser's webcam. This allows you to classify both digital and handwritten digits in real time.</p>
 
-{% include youtubePlayer.html id=page.youtubeId1 %}
 
+<!-- instruction -->
+{% include gallery id="instruction" caption="Digit Classification Exercise" %}
+
+
+<!-- Note Guide -->
 **Note**: If you haven't, take a look at the [user guide](https://jderobot.github.io/RoboticsAcademy/user_guide/#installation) to understand how the installation is made, how to launch a RoboticsBackend and how to perform the exercises.
 
+## Exercise API
+- `GUI.getImage()` - to get the image. It can be None.
+```python 
+while True:
+    image = GUI.getImage()
+    if image is not None:
+      # rest of the code.
+```
+- `GUI.showImage(image)` - allows you to view a debug image or one with relevant information.
+
+<!-- Model Path -->
+## File Path for Uploaded Model
+The `model_path` holds the file path to the uploaded <strong>ONNX</strong> model.
+```python
+from model import model_path
+```
+
+## Example Code
+<!-- Load ONNX session -->
+Recommended to load the ONNX model session
+```python
+# Import the required package
+from model import model_path
+import onnxruntime
+import sys
+
+# Load ONNX model
+try:
+    ort_session = onnxruntime.InferenceSession(model_path)
+except Exception as e:
+    print("ERROR: Model couldn't be loaded")
+    print(str(e))
+    sys.exit(1)
+```
+
+<!-- Exercise Instructions -->
 ## Exercise Instructions
 - The uploaded model should adhere to the following input/output specifications, please keep that in mind while building your model.
   - The model must accept as input grayscale images with size 28x28 pixels. Input shape: 
@@ -64,9 +118,13 @@ Image classification can be achieved using classic machine learning algorithms l
 
 For solving the particular task of digit classification, we don't need complex architectures. Here is an example of how you can build a CNN and train a model using MNIST database with Pytorch: [Basic MNIST Example](https://github.com/pytorch/examples/tree/master/mnist). If you want to further improve the accuracy of your model, try increasing the number of layers and play around with different regularization strategies, such as data augmentation [[5]]((https://debuggercafe.com/image-augmentation-using-pytorch-and-albumentations/)).
 
+<!-- videso -->
+## Tutorial Video
+{% include youtubePlayer.html id=page.youtubeId1 %}
+
 ## Contributors
-- Contributors: [David Pascual](https://github.com/dpascualhe), [Shashwat Dalakoti](https://github.com/shashwat623)
-- Maintained by [David Pascual](https://github.com/dpascualhe)
+- Contributors: [David Pascual](https://github.com/dpascualhe), [Md. Shariar Kabir](https://github.com/codezerro) ,[Shashwat Dalakoti](https://github.com/shashwat623)
+- Maintained by [David Pascual](https://github.com/dpascualhe), [Md. Shariar Kabir](https://github.com/codezerro)
 
 ## References