diff --git a/etc/quiz-app/src/assets/translations/en/index.js b/etc/quiz-app/src/assets/translations/en/index.js index 8baa28d4..e811d147 100644 --- a/etc/quiz-app/src/assets/translations/en/index.js +++ b/etc/quiz-app/src/assets/translations/en/index.js @@ -3,6 +3,7 @@ import x2 from "./lesson-2.json"; import x3 from "./lesson-3.json"; import x4 from "./lesson-4.json"; import x5 from "./lesson-5.json"; +import x6 from "./lesson-6.json"; import x7 from "./lesson-7.json"; import x8 from "./lesson-8.json"; import x9 from "./lesson-9.json"; @@ -15,5 +16,5 @@ import x17 from "./lesson-17.json"; import x18 from "./lesson-18.json"; import x21 from "./lesson-21.json"; import x23 from "./lesson-23.json"; -const quiz = { 0 : x1[0], 1 : x2[0], 2 : x3[0], 3 : x4[0], 4 : x5[0], 5 : x7[0], 6 : x8[0], 7 : x9[0], 8 : x10[0], 9 : x12[0], 10 : x13[0], 11 : x14[0], 12 : x16[0], 13 : x17[0], 14 : x18[0], 15 : x21[0], 16 : x23[0] }; +const quiz = { 0 : x1[0], 1 : x2[0], 2 : x3[0], 3 : x4[0], 4 : x5[0], 5 : x6[0], 6 : x7[0], 7 : x8[0], 8 : x9[0], 9 : x10[0], 10 : x12[0], 11 : x13[0], 12 : x14[0], 13 : x16[0], 14 : x17[0], 15 : x18[0], 16 : x21[0], 17 : x23[0] }; export default quiz; \ No newline at end of file diff --git a/etc/quiz-app/src/assets/translations/en/lesson-4.json b/etc/quiz-app/src/assets/translations/en/lesson-4.json index 17645a5e..cc9de81d 100644 --- a/etc/quiz-app/src/assets/translations/en/lesson-4.json +++ b/etc/quiz-app/src/assets/translations/en/lesson-4.json @@ -95,19 +95,6 @@ } ] }, - { - "questionText": "Softmax can be used to convert inputs into probabilities", - "answerOptions": [ - { - "answerText": "True", - "isCorrect": false - }, - { - "answerText": "False", - "isCorrect": true - } - ] - }, { "questionText": "Cross-entropy loss is a function that can calculate similarity between two arbitrary probability distributions", "answerOptions": [ diff --git a/etc/quiz-app/src/assets/translations/en/lesson-5.json b/etc/quiz-app/src/assets/translations/en/lesson-5.json index 6ba51b34..590582ab 100644 --- a/etc/quiz-app/src/assets/translations/en/lesson-5.json +++ b/etc/quiz-app/src/assets/translations/en/lesson-5.json @@ -107,19 +107,6 @@ "isCorrect": false } ] - }, - { - "questionText": "Pred is the values predicted by the network", - "answerOptions": [ - { - "answerText": "True", - "isCorrect": true - }, - { - "answerText": "False", - "isCorrect": false - } - ] } ] } diff --git a/etc/quiz-app/src/assets/translations/en/lesson-6.json b/etc/quiz-app/src/assets/translations/en/lesson-6.json new file mode 100644 index 00000000..070ac07b --- /dev/null +++ b/etc/quiz-app/src/assets/translations/en/lesson-6.json @@ -0,0 +1,115 @@ +[ + { + "title": "AI for Beginners: Quizzes", + "complete": "Congratulations, you completed the quiz!", + "error": "Sorry, try again", + "quizzes": [ + { + "id": 106, + "title": "Introduction to Computer Vision: Pre Quiz", + "quiz": [ + { + "questionText": "Computer vision aims to allow computers gain understanding of _____", + "answerOptions": [ + { + "answerText": "images", + "isCorrect": true + }, + { + "answerText": "text", + "isCorrect": false + }, + { + "answerText": "computers", + "isCorrect": false + } + ] + }, + { + "questionText": "Python libraries available for image processing includes", + "answerOptions": [ + { + "answerText": "OpenCV", + "isCorrect": false + }, + { + "answerText": "Pillow", + "isCorrect": false + }, + { + "answerText": "a and b", + "isCorrect": true + } + ] + }, + { + "questionText": "Images cannot be represented as NumPy arrays in Python", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": false + }, + { + "answerText": "False", + "isCorrect": true + } + ] + } + ] + }, + { + "id": 206, + "title": "Introduction to Computer Vision: Post Quiz", + "quiz": [ + { + "questionText": "Optical Flow helps us to understand how each pixel on video frames move.", + "answerOptions": [ + { + "answerText": "true", + "isCorrect": true + }, + { + "answerText": "false", + "isCorrect": false + } + ] + }, + { + "questionText": "_____ computes the vector field that shows where each pixel is moving", + "answerOptions": [ + { + "answerText": "Sparse Optical Flow", + "isCorrect": false + }, + { + "answerText": "Dense Optical Flow", + "isCorrect": true + }, + { + "answerText": "none", + "isCorrect": false + } + ] + }, + { + "questionText": "Resizing and Blurring are steps that can be taken during?", + "answerOptions": [ + { + "answerText": "pre-processing", + "isCorrect": true + }, + { + "answerText": "training", + "isCorrect": false + }, + { + "answerText": "image transformation", + "isCorrect": false + } + ] + } + ] + } + ] + } +] \ No newline at end of file diff --git a/etc/quiz-src/questions-en.txt b/etc/quiz-src/questions-en.txt index a79a16a7..7b377843 100644 --- a/etc/quiz-src/questions-en.txt +++ b/etc/quiz-src/questions-en.txt @@ -98,9 +98,6 @@ Lesson 4E Neural Networks: Post Quiz - 0-1 loss + binary loss - logistic loss -* Softmax can be used to convert inputs into probabilities -- True -+ False * Cross-entropy loss is a function that can calculate similarity between two arbitrary probability distributions + True - False @@ -130,9 +127,32 @@ Lesson 5E Frameworks: Post Quiz - Facebook, Google + Google, Facebook - Microsoft, Google -* Pred is the values predicted by the network -+ True -- False + +Lesson 6B Introduction to Computer Vision: Pre Quiz +* Computer vision aims to allow computers gain understanding of _____ ++ images +- text +- computers +* Python libraries available for image processing includes +- OpenCV +- Pillow ++ a and b +* Images cannot be represented as NumPy arrays in Python +- true ++ False + +Lesson 6E Introduction to Computer Vision: Post Quiz +* Optical Flow helps us to understand how each pixel on video frames move. ++ true +- false +* _____ computes the vector field that shows where each pixel is moving +- Sparse Optical Flow ++ Dense Optical Flow +- none +* Resizing and Blurring are steps that can be taken during? ++ pre-processing +- training +- image transformation Lesson 7B Convolutional Neural Networks: Pre Quiz * To extract patterns from images we use? diff --git a/lessons/4-ComputerVision/06-IntroCV/OpenCV.ipynb b/lessons/4-ComputerVision/06-IntroCV/OpenCV.ipynb index 6f46b539..5727e736 100644 --- a/lessons/4-ComputerVision/06-IntroCV/OpenCV.ipynb +++ b/lessons/4-ComputerVision/06-IntroCV/OpenCV.ipynb @@ -44,7 +44,7 @@ "source": [ "## Loading Images\n", "\n", - "Images in Python can be conveniently represented by Numpy arrays. For example, grayscale image with size of 320x200 pixels would be stored in 200x320 array, and color image of the same dimension would have shape of 200x320x3 (for 3 color channels). \n", + "Images in Python can be conveniently represented by NumPy arrays. For example, grayscale image with size of 320x200 pixels would be stored in 200x320 array, and color image of the same dimension would have shape of 200x320x3 (for 3 color channels). \n", "\n", "Let's start by loading an image:" ] diff --git a/lessons/4-ComputerVision/06-IntroCV/README.md b/lessons/4-ComputerVision/06-IntroCV/README.md index 5d49ffd6..e120066e 100644 --- a/lessons/4-ComputerVision/06-IntroCV/README.md +++ b/lessons/4-ComputerVision/06-IntroCV/README.md @@ -4,13 +4,14 @@ ## [Pre-lecture quiz](https://black-ground-0cc93280f.1.azurestaticapps.net/quiz/106) -One of the simplest tasks of computer vision is **image classification**. +One of the simplest tasks of computer vision is **image classification**. Computer vision is often considered to be a branch of AI. Nowadays, most of computer vision tasks are solved using neural networks. We will learn more about special type of neural networks for computer vision, [convolutional neural networks](../07-ConvNets/README.md), throughout this section. However, before you pass the image to a neural network, in many cases it makes sense to use some algorithmic techniques to enhance the image. There are several Python libraries available for image processing: + * **[imageio](https://imageio.readthedocs.io/en/stable/)** can be used for reading/writing different image formats. It also support video manipulation with ffmpeg. * **[Pillow](https://pillow.readthedocs.io/en/stable/index.html)** (also known as PIL) is a bit more powerful, and also supports some image manipulations, such as morphing, pallette adjustments, etc. * **[OpenCV](https://opencv.org/)** is a powerful image processing library written in C++, which became *de facto* standard for image processing. It has convenient Python interface. @@ -20,11 +21,11 @@ There are several Python libraries available for image processing: [OpenCV](https://opencv.org/) is considered to be *de facto* standard for image processing. It contains a lot of useful algorithms, implemented in C++. You can call OpenCV from Python as well. -A good place to learn OpenCV is [this Learn OpenCV course](https://learnopencv.com/getting-started-with-opencv/). In our curriculum, our goal is not to learn OpenCV, but show you some examples when it can be used, and how. +A good place to learn OpenCV is [this Learn OpenCV course](https://learnopencv.com/getting-started-with-opencv/). In our curriculum, our goal is not to learn OpenCV, but show you some examples when it can be used, and how. ### Loading Images -Images in Python can be conveniently represented by Numpy arrays. For example, grayscale image with size of 320x200 pixels would be stored in 200x320 array, and color image of the same dimension would have shape of 200x320x3 (for 3 color channels). To load an image, you can use the following code: +Images in Python can be conveniently represented by NumPy arrays. For example, grayscale image with size of 320x200 pixels would be stored in 200x320 array, and color image of the same dimension would have shape of 200x320x3 (for 3 color channels). To load an image, you can use the following code: ```python import cv2 @@ -34,7 +35,7 @@ im = cv2.imread('image.jpeg') plt.imshow(im) ``` -Traditionally, OpenCV uses BGR (Blue-Green-Red) encoding for color images, while the rest of Python tools use more traditional RGB. For the image to look right, you need to convert it to RGB color space, either by swapping dimensions in numpy array, or by calling OpenCV function: +Traditionally, OpenCV uses BGR (Blue-Green-Red) encoding for color images, while the rest of Python tools use more traditional RGB. For the image to look right, you need to convert it to RGB color space, either by swapping dimensions in NumPy array, or by calling OpenCV function: ```python im = cv2.cvtColor(im,cv2.COLOR_BGR2RGB) @@ -47,25 +48,27 @@ You can also use OpenCV to load video frame-by-frame - an example is given in th ### Image Processing Before feeding an image to a neural network, you may want to apply several pre-processing steps. OpenCV can do many things, including: + * **Resizing** the image using `im = cv2.resize(im, (320,200),interpolation=cv2.INTER_LANCZOS)` * **Blurring** the image using `im = cv2.medianBlur(im,3)` or `im = cv2.GaussianBlur(im, (3,3), 0)` -* Changing **brightness and contrast** of the image can be done by numpy array manipulations, as described [here](https://stackoverflow.com/questions/39308030/how-do-i-increase-the-contrast-of-an-image-in-python-opencv). -* Instead of adjusting brightness/contrast, it is often better to use [thresholding](https://docs.opencv.org/4.x/d7/d4d/tutorial_py_thresholding.html) by calling `cv2.threshold`/`cv2.adaptiveThreshold` functions. +* Changing **brightness and contrast** of the image can be done by NumPy array manipulations, as described [here](https://stackoverflow.com/questions/39308030/how-do-i-increase-the-contrast-of-an-image-in-python-opencv). +* Instead of adjusting brightness/contrast, it is often better to use [thresholding](https://docs.opencv.org/4.x/d7/d4d/tutorial_py_thresholding.html) by calling `cv2.threshold`/`cv2.adaptiveThreshold` functions. * Applying different [transformations](https://docs.opencv.org/4.5.5/da/d6e/tutorial_py_geometric_transformations.html) to the image: - **[Affine transformations](https://docs.opencv.org/4.5.5/d4/d61/tutorial_warp_affine.html)** can be useful if you need to combine rotation, resizing and skewing to the image, and you know source and destination location of three points in the image. Affine transformations keep parallel lines parallel. - - **[Perspective transformations](https://medium.com/analytics-vidhya/opencv-perspective-transformation-9edffefb2143)** can use useful when you known source and destination positions of 4 points in the image. For example, if you take a picture of a rectangular document via smartphone camera from some angle, and you want to make a rectangular image of the document itself. + - **[Perspective transformations](https://medium.com/analytics-vidhya/opencv-perspective-transformation-9edffefb2143)** can be useful when you known source and destination positions of 4 points in the image. For example, if you take a picture of a rectangular document via smartphone camera from some angle, and you want to make a rectangular image of the document itself. * Understanding movement inside the image by using **[optical flow](https://docs.opencv.org/4.5.5/d4/dee/tutorial_optical_flow.html)**. + ## Examples of using Computer Vision In our [OpenCV Notebook](OpenCV.ipynb), we give some examples of when computer vision can be used to perform specific tasks: -* **Pre-processing a photograph of Braille book**. We focus on how we can use thresholding, feature detection, perspective transformation and numpy manipulations to separate individual Braille symbols for further classification by a neural network. +* **Pre-processing a photograph of Braille book**. We focus on how we can use thresholding, feature detection, perspective transformation and NumPy manipulations to separate individual Braille symbols for further classification by a neural network. -![Braille Image](data/braille.jpeg) | ![Braille Image Pre-processed](images/braille-result.png) | ![Braille Symbols](images/braille-symbols.png) +![Braille Image](data/braille.jpeg) | ![Braille Image Pre-processed](images/braille-result.png) | ![Braille Symbols](images/braille-symbols.png) ----|-----|----- > *Image from [OpenCV.ipynb](OpenCV.ipynb)* - + * **Detecting motion in video using frame difference**. If the camera is fixed, then frames from the camera should be pretty similar to each other. Since frames are represented as arrays, just by subtracting those arrays for two subsequent frames we will get the pixel difference, which should be low for static frames, and become higher once there is substantial motion in the image. ![Image of video frames and frame differences](images/frame-difference.png) @@ -73,6 +76,7 @@ In our [OpenCV Notebook](OpenCV.ipynb), we give some examples of when computer v > *Image from [OpenCV.ipynb](OpenCV.ipynb)* * **Detecting motion using Optical Flow**. [Optical flow](https://docs.opencv.org/3.4/d4/dee/tutorial_optical_flow.html) allows us to understand how individual pixels on video frames move. There are two types of optical flow: + - **Dense Optical Flow** computes the vector field that shows for each pixel where is it moving - **Sparse Optical Flow** is based on taking some distinctive features in the image (eg. edges), and building their trajectory from frame to frame. @@ -97,4 +101,3 @@ In this lab, you will take a video with simple gestures, and your goal would be ## Takeaway Sometimes, relatively complex tasks such as movement detection or fingertip detection can be solved purely by computer vision. Thus, it is very helpful to know basic techniques of computer vision, and what libraries like OpenCV can do. - diff --git a/lessons/4-ComputerVision/06-IntroCV/lab/README.md b/lessons/4-ComputerVision/06-IntroCV/lab/README.md index a6c8959f..6cecb750 100644 --- a/lessons/4-ComputerVision/06-IntroCV/lab/README.md +++ b/lessons/4-ComputerVision/06-IntroCV/lab/README.md @@ -8,12 +8,11 @@ Consider [this video](palm-movement.mp4), in which a person's palm moves left/ri Palm Movement Frame -**Your goal** would be to use Optical Flow to determine, which parts of video contain up/down/left/right movements. +**Your goal** would be able to use Optical Flow to determine, which parts of video contain up/down/left/right movements. **Stretch goal** would be to actually track the palm/finger movement using skin tone, as described [in this blog post](https://dev.to/amarlearning/finger-detection-and-tracking-using-opencv-and-python-586m) or [here](http://www.benmeline.com/finger-tracking-with-opencv-and-python/). - -## Stating Notebook +## Starting Notebook Start the lab by opening [MovementDetection.ipynb](MovementDetection.ipynb)