Adding an Open in Colab Badge

For each notebook that you build out these are good sanity checks and usability, for instance to add a colab badge to the top of your notebooks so others may easily open and run from the browswer add this in a markdown block,

[![Open In Colab](https://colab.research.google.com/assets/colab-badge.svg)](https://colab.research.google.com/github/tljstewart/tljstewart/blob/master/_notebooks/2021-09-03-My-First-Blog-Post.ipynb)

of course change the url to point to your .ipynb file.

Working With Environments

Here you can run some starter sanity checks to make sure you have the correct enviornment, version and packages

import sys
import os
print(sys.version)

!which python
!python --version

3.9.4 (default, Apr  9 2021, 09:32:38) 
[Clang 10.0.0 ]
/Users/tljstewart/miniconda3/envs/ml39/bin/python
Python 3.9.4

Adding Conda Environment to Juypter-Lab

If you're using a conda virtual environment (like me) and Jupyter didn't pull in that environment when lauched (also, like me) follow these steps.

From the command line:

conda activate <name-of-environment>
conda install ipykernel
ipython kernel install --user --name=ml39
- You must use the --user option, or it will install the kernel in the system path which is not the default for finding kernels, here I named my kernel ml39, the same as the name of my conda environment
jupyter-lab
- Start jupyter-lab

Now your conda environment should be accessible in juypter-lab and selectable as the kernel to use.I have more [^1] to say up here.

Working With Markdown

Here you can learn about useful markdown syntax, headers 1, 2 and 3 will create a cascading table of contents at the top of this notebook

Header 3

header 2

header 3

bold

itlaics

code

Here is the markdown syntax to generate the formating above:

# header 1

## header 2

### header 3

**bold**

*itlaics*

`code`

Videos and Twitter

Here is some special Jekyll sauce to embed urls, like twitter and youtube on the blog

This:

> twitter: https://twitter.com/tljstewart/status/1291806901068607489?s=20

> youtube: https://youtu.be/Lu56xVlZ40M

Renders this:

Seeker of esoteric's; pushing electrons eclectically about the multiverse, bringing life to the inorganic, intelligence to man and machine, and security for both #engineer #CyberSecurity #ArtificialIntelligence connect with me at https://t.co/VoLYIlhn5U pic.twitter.com/p56NykZf11
— Timothy L.J. Stewart (@tljstewart) August 7, 2020

Working With Latex

Perceptron Algorithm

First I will start with a perceptron algorithm written out, and then compare it to one from sklearn.
The equation that this algorithm models is

$h(x) = sign((\sum^{d}_{i=1}w_{i}x_{i}) + b)$

$h(x) = sign(w^{T}x)$

h(x) represents the classification term, usually 1 or 0 depending on the sign
sign corresponds to ∓
$w_{i}$ is the weights vector
$x_{i}$ is the input vector
b is the threshold

Convention is to treat b as another weight $w_{o}$, and include it in the weight vector.

Updating weights

If this was ran just once with initial weights there would be lots of incorrectly classified points, unless the initial weights were reandomly correct. Because of this we need to iterate over the weights and continuously update them untit there is no misclassification or the max iterations is reached. This is done by the formula below.
$w(t+1) = w(t) + \eta y_{d}(t) x(t)$

$w(t+1)$ is the updated weights
$w(t)$ is the previous weights
$\eta$ is the learning rate
$y_{d}(t)$ is the difference in incorrect y values
$x(t)$ is the value of the inputs

Working With Emojis

Typing emojis like I give this post two :+1:! will render this:

I give this post two !

Here is is gist of github favored emojies

Working with Call-Outs

Here is some special sauce for The Blog.

Typing >Tip: a tip will render:

Tip: Here is some special sauce for The Blog.

Typing >Important: some info will render:

Important: your info

Typing >Warning: a warning will render:

Warning: your warning

Typing > Note: a note will render:

Note: A doc link to an example website: fast.ai should also work fine.

Working With Images

Lets grab an image and resize it to use as a favicon on The Blog.

First lets install opencv from within the juypter-lab notebook using !

!conda install -y -c conda-forge opencv

Collecting package metadata (current_repodata.json): done
Solving environment: done

# All requested packages already installed.

import cv2
import matplotlib.pyplot as plt
from IPython.display import display, Image

%matplotlib inline
#For prettier High-Def plots with more DPI
%config InlineBackend.figure_format = 'retina'

OpenCV reads images as BGR, we after cv2.imread we need to convert to RGB for sanity, also if you do this conversion you must also covert back to BGR for wrtite cv2.imwrite or it will save as a BGR image

Lets load the images and convert from BGR to RGB

img = cv2.imread("data/2021-09-03-My-First-Blog-Post/in/IMG_8866.PNG")
img = cv2.cvtColor(img, cv2.COLOR_BGR2RGB)
img_list = [img]
#img_resize = cv2.resize(img,None,fx=0.25,fy=0.25,interpolation=cv2.INTER_AREA)

Since images are just numpy arrays, let crop it by slicing to make it a square image

img_resize = img[1226:,500:4500]

Now we can use OpenCV to resize the image, this is different than crop, as instead of cutting out cv2.resize will perform an interpolation in a neighbor of pixels to replace the higher resolution pixels with

print(img_resize.shape)
img_list.append(img_resize)
img_resize75 = cv2.resize(img_resize,(75,75),interpolation=cv2.INTER_LANCZOS4)
img_resize16 = cv2.resize(img_resize,(16,16),interpolation=cv2.INTER_LANCZOS4)
# the 16x16 and 75x75 turned out terrible lol

Display the results in a for loop, # the 16x16 and 75x75 turned out terrible lol sooooo lets not display those.

for image in img_list:
    plt.figure()
    plt.imshow(image)

Now we can write to disc and save these images, however you must call cv2.cvtColor on the image to convert it back to BGR for saving.

cv2.imwrite("data/2021-09-03-My-First-Blog-Post/out/favicon.png", cv2.cvtColor(img_resize, cv2.COLOR_RGB2BGR)) #convert back to RGB image
cv2.imwrite("data/2021-09-03-My-First-Blog-Post/out/testbgrrgb.png", img) #no conversion, saves as BGR image
cv2.imwrite("data/2021-09-03-My-First-Blog-Post/out/favicon16x16.PNG", cv2.cvtColor(img_resize16, cv2.COLOR_RGB2BGR))

(4000, 4000, 3)

True

Displaying Images with Markdown

![Artificial Intelligence Arm](data/2021-09-03-My-First-Blog-Post/res/ai-arm.jpeg "AI")

Artificial Intelligence Arm

OR Use HTML, useful for setting width and height on images

<img src="data/2021-09-03-My-First-Blog-Post/res/ai-arm.jpeg" alt="Artificial Intelligence Arm" width="200" height="200">

Using Interactive Charts Altair

Lets generate some data and make a basic interative plot for The Blog.

!conda install -y -c conda-forge altair vega_datasets pandas
#hide_output

import pandas as pd
data = pd.DataFrame({'a': list('CCCDDDEEE'),
                     'b': [2, 7, 4, 1, 2, 6, 8, 4, 7]})

import altair as alt
from vega_datasets import data
cars = data.cars.url

chart = alt.Chart(cars).mark_point().encode(
    x='Horsepower:Q',
    y='Miles_per_Gallon:Q',
    color='Origin:N',
)

Assignment operations don't trigger the notebook’s auto display mechanism, we need to call the assigned plot, chart

chart

Footnotes

Site Generator Footnotes

This site generator syntax:

20. This is the actual footnote; with a link to Fastai docs as well! and a single quote ' too!↩

Markdown Footnotes

Another way to add footnotes, however seemingly less reliable across cells is by using this markdown syntax [^1] at the point of reference, then again in the footer section [^1]: To say down here

I have more ¹ to say up here.

I have even more ² to say up here.

more to say down here.↩
even more to say down here.↩

However, these markdown footnotes [^2] footnotes don't seem to work across cells:

As you can see it doesn't show up down here: