Another round of md -> mdx

Author: wiseodd

.astro/types.d.ts

@@ -213,20 +213,20 @@ declare module 'astro:content' {
   collection: "post";
   data: InferEntrySchema<"post">
 } & { render(): Render[".mdx"] };
-"convnet-conv-layer.md": {
-	id: "convnet-conv-layer.md";
+"convnet-conv-layer.mdx": {
+	id: "convnet-conv-layer.mdx";
   slug: "convnet-conv-layer";
   body: string;
   collection: "post";
   data: InferEntrySchema<"post">
-} & { render(): Render[".md"] };
-"convnet-maxpool-layer.md": {
-	id: "convnet-maxpool-layer.md";
+} & { render(): Render[".mdx"] };
+"convnet-maxpool-layer.mdx": {
+	id: "convnet-maxpool-layer.mdx";
   slug: "convnet-maxpool-layer";
   body: string;
   collection: "post";
   data: InferEntrySchema<"post">
-} & { render(): Render[".md"] };
+} & { render(): Render[".mdx"] };
 "coupled-gan.mdx": {
 	id: "coupled-gan.mdx";
   slug: "coupled-gan";
@@ -276,13 +276,13 @@ declare module 'astro:content' {
   collection: "post";
   data: InferEntrySchema<"post">
 } & { render(): Render[".mdx"] };
-"gan-tensorflow.md": {
-	id: "gan-tensorflow.md";
+"gan-tensorflow.mdx": {
+	id: "gan-tensorflow.mdx";
   slug: "gan-tensorflow";
   body: string;
   collection: "post";
   data: InferEntrySchema<"post">
-} & { render(): Render[".md"] };
+} & { render(): Render[".mdx"] };
 "gaussian-anomaly-detection.md": {
 	id: "gaussian-anomaly-detection.md";
   slug: "gaussian-anomaly-detection";
@@ -325,13 +325,13 @@ declare module 'astro:content' {
   collection: "post";
   data: InferEntrySchema<"post">
 } & { render(): Render[".mdx"] };
-"jekyll-fb-share.md": {
-	id: "jekyll-fb-share.md";
+"jekyll-fb-share.mdx": {
+	id: "jekyll-fb-share.mdx";
   slug: "jekyll-fb-share";
   body: string;
   collection: "post";
   data: InferEntrySchema<"post">
-} & { render(): Render[".md"] };
+} & { render(): Render[".mdx"] };
 "kl-mle.mdx": {
 	id: "kl-mle.mdx";
   slug: "kl-mle";
@@ -374,13 +374,13 @@ declare module 'astro:content' {
   collection: "post";
   data: InferEntrySchema<"post">
 } & { render(): Render[".mdx"] };
-"lstm-backprop.md": {
-	id: "lstm-backprop.md";
+"lstm-backprop.mdx": {
+	id: "lstm-backprop.mdx";
   slug: "lstm-backprop";
   body: string;
   collection: "post";
   data: InferEntrySchema<"post">
-} & { render(): Render[".md"] };
+} & { render(): Render[".mdx"] };
 "manifold-gaussians.mdx": {
 	id: "manifold-gaussians.mdx";
   slug: "manifold-gaussians";

src/content/post/convnet-conv-layer.md src/content/post/convnet-conv-layer.mdxsrc/content/post/convnet-conv-layer.md renamed to src/content/post/convnet-conv-layer.mdx

@@ -33,7 +33,7 @@ Alright, let's define our function:
 
 ```python
 def conv_forward(X, W, b, stride=1, padding=1):
-pass
+    pass
 ```
 
 Our conv layer will accept an input in `X: DxCxHxW` dimension, input filter `W: NFxCxHFxHW`, and bias `b: Fx1`, where:
@@ -65,25 +65,18 @@ To make the operation compatible, we will arrange our filter to `1x9`. Now, if w
 Let's see the code for that.
 
 ```python
-
 # Let this be 3x3 convolution with stride = 1 and padding = 1
-
 # Suppose our X is 5x1x10x10, X_col will be a 9x500 matrix
-
 X_col = im2col_indices(X, h_filter, w_filter, padding=padding, stride=stride)
 
 # Suppose we have 20 of 3x3 filter: 20x1x3x3. W_col will be 20x9 matrix
-
 W_col = W.reshape(n_filters, -1)
 
 # 20x9 x 9x500 = 20x500
-
 out = W_col @ X_col + b
 
 # Reshape back from 20x500 to 5x20x10x10
-
 # i.e. for each of our 5 images, we have 20 results with size of 10x10
-
 out = out.reshape(n_filters, h_out, w_out, n_x)
 out = out.transpose(3, 0, 1, 2)
 ```
@@ -110,17 +103,13 @@ Remember that the matrix we're dealing with, i.e. `dout` is a `5x20x10x10` matri
 Next, we will compute the gradient of the the filters `dW`.
 
 ```python
-
 # Transpose from 5x20x10x10 into 20x10x10x5, then reshape into 20x500
-
 dout_reshaped = dout.transpose(1, 2, 3, 0).reshape(n_filter, -1)
 
 # 20x500 x 500x9 = 20x9
-
 dW = dout_reshaped @ X_col.T
 
 # Reshape back to 20x1x3x3
-
 dW = dW.reshape(W.shape)
 ```
 
@@ -129,17 +118,13 @@ It's similar with the normal feed forward layer, except with more convoluted (ha
 Lastly, the input gradient `dX`. We're almost there!
 
 ```python
-
 # Reshape from 20x1x3x3 into 20x9
-
 W_reshape = W.reshape(n_filter, -1)
 
 # 9x20 x 20x500 = 9x500
-
 dX_col = W_reshape.T @ dout_reshaped
 
 # Stretched out image to the real image: 9x500 => 5x1x10x10
-
 dX = col2im_indices(dX_col, X.shape, h_filter, w_filter, padding=padding, stride=stride)
 ```
 
@@ -150,12 +135,12 @@ Again, it's the same as feed forward layer with some careful reshaping! At the e
 Here's the full source code for the forward and backward computation of the conv layer.
 
 ```python
-def conv*forward(X, W, b, stride=1, padding=1):
-cache = W, b, stride, padding
-n_filters, d_filter, h_filter, w_filter = W.shape
-n_x, d_x, h_x, w_x = X.shape
-h_out = (h_x - h_filter + 2 * padding) / stride + 1
-w*out = (w_x - w_filter + 2 * padding) / stride + 1
+def conv_forward(X, W, b, stride=1, padding=1):
+    cache = W, b, stride, padding
+    n_filters, d_filter, h_filter, w_filter = W.shape
+    n_x, d_x, h_x, w_x = X.shape
+    h_out = (h_x - h_filter + 2 * padding) / stride + 1
+    w_out = (w_x - w_filter + 2 * padding) / stride + 1
 
     if not h_out.is_integer() or not w_out.is_integer():
         raise Exception('Invalid output dimension!')
@@ -174,8 +159,8 @@ w*out = (w_x - w_filter + 2 * padding) / stride + 1
     return out, cache
 
 def conv_backward(dout, cache):
-X, W, b, stride, padding, X_col = cache
-n_filter, d_filter, h_filter, w_filter = W.shape
+    X, W, b, stride, padding, X_col = cache
+    n_filter, d_filter, h_filter, w_filter = W.shape
 
     db = np.sum(dout, axis=(0, 2, 3))
     db = db.reshape(n_filter, -1)
@@ -189,10 +174,9 @@ n_filter, d_filter, h_filter, w_filter = W.shape
     dX = col2im_indices(dX_col, X.shape, h_filter, w_filter, padding=padding, stride=stride)
 
     return dX, dW, db
-
 ```
 
-Also check out the complete code in my repository: <https://github.com/wiseodd/hipsternet>!
+Also check out the complete code in my repository: https://github.com/wiseodd/hipsternet!
 
 ## Conclusion
 
@@ -202,6 +186,6 @@ Dealing with multidimensional matrices as we will always encounter in convnet is
 
 ## References
 
-- <http://cs231n.github.io/convolutional-networks/>
-- <http://vision.stanford.edu/teaching/cs231n/winter1516_assignment2.zip>
-- <http://www.cs.toronto.edu/~fritz/absps/imagenet.pdf>
+- http://cs231n.github.io/convolutional-networks/
+- http://vision.stanford.edu/teaching/cs231n/winter1516_assignment2.zip
+- http://www.cs.toronto.edu/~fritz/absps/imagenet.pdf

src/content/post/convnet-maxpool-layer.md …c/content/post/convnet-maxpool-layer.mdxsrc/content/post/convnet-maxpool-layer.md renamed to src/content/post/convnet-maxpool-layer.mdx src/content/post/convnet-maxpool-layer.md renamed to src/content/post/convnet-maxpool-layer.mdx

@@ -5,9 +5,11 @@ publishDate: 2016-07-18 02:00
 tags: [machine learning, programming, python, neural networks]
 ---
 
+import BlogImage from "@/components/BlogImage.astro";
+
 Traditionally, convnet consists of several layers: convolution, pooling, fully connected, and softmax. Although it's not true anymore with the recent development. A lot of things going on out there and the architecture of convent has been steadily (r)evolving, something like Google's Inception module found in [GoogLeNet](http://www.cs.unc.edu/~wliu/papers/GoogLeNet.pdf) and the recent ImageNet champion: [ResNet](https://arxiv.org/pdf/1512.03385v1).
 
-Nevertheless, conv and pool layers are still the essential foundations of convnet. We've covered the conv layer in the [last post]({% post_url 2016-07-16-convnet-conv-layer %}). Now let's dig into pool layer, especially maxpool layer.
+Nevertheless, conv and pool layers are still the essential foundations of convnet. We've covered the conv layer in the last post. Now let's dig into pool layer, especially maxpool layer.
 
 ## Pool layer
 
@@ -19,7 +21,7 @@ The summarization operation could be any summary statistics: average, max, min,
 
 Those are, mainly, the reduction of the dimensionality = less parameter = less computation burden; and slightly more robust model, because we're taking "high level views" of our images, the network will be slightly invariant towards small changes like rotation, translation, etc.
 
-For more about theoritical and best practices about pool layer, head to CS231n lecture page: <http://cs231n.github.io/convolutional-networks/#pool>.
+For more about theoritical and best practices about pool layer, head to CS231n lecture page: http://cs231n.github.io/convolutional-networks/#pool.
 
 ## Maxpool layer
 
@@ -32,39 +34,27 @@ It's just the same as conv layer with one exception: max instead of dot product.
 As we already know that maxpool layer is similar to conv layer, implementing it is somewhat easier.
 
 ```python
-
 # Let say our input X is 5x10x28x28
-
 # Our pooling parameter are: size = 2x2, stride = 2, padding = 0
-
 # i.e. result of 10 filters of 3x3 applied to 5 imgs of 28x28 with stride = 1 and padding = 1
-
 # First, reshape it to 50x1x28x28 to make im2col arranges it fully in column
-
 X_reshaped = X.reshape(n \* d, 1, h, w)
 
 # The result will be 4x9800
-
 # Note if we apply im2col to our 5x10x28x28 input, the result won't be as nice: 40x980
-
 X_col = im2col_indices(X_reshaped, size, size, padding=0, stride=stride)
 
 # Next, at each possible patch location, i.e. at each column, we're taking the max index
-
 max_idx = np.argmax(X_col, axis=0)
 
 # Finally, we get all the max value at each column
-
 # The result will be 1x9800
-
 out = X_col[max_idx, range(max_idx.size)]
 
 # Reshape to the output size: 14x14x5x10
-
 out = out.reshape(h_out, w_out, n, d)
 
 # Transpose to get 5x10x14x14 output
-
 out = out.transpose(2, 3, 0, 1)
 ```
 
@@ -74,11 +64,11 @@ At above example, we could see how maxpool layer will reduce the computation for
 
 For example, we have this single MNIST data of 28x28:
 
-![Pool input]({{ site.baseurl }}/img/2016-07-18-convnet-maxpool-layer/pool_input.png)
+<BlogImage imagePath='/img/convnet-maxpool-layer/pool_input.png' />
 
 After we fed the image to our maxpool layer, the result will look like this:
 
-![Pool output]({{ site.baseurl }}/img/2016-07-18-convnet-maxpool-layer/pool_output.png)
+<BlogImage imagePath='/img/convnet-maxpool-layer/pool_output.png' />
 
 ## Maxpool backward
 
@@ -87,39 +77,26 @@ Recall, how do we compute the gradient for ReLU layer. We let the gradient pass
 Maxpool layer is similar, because that's essentially what max operation do in backpropagation.
 
 ```python
-
 # X_col and max_idx are the intermediate variables from the forward propagation step
-
 # Suppose our output from forward propagation step is 5x10x14x14
-
 # We want to upscale that back to 5x10x28x28, as in the forward step
-
 # 4x9800, as in the forward step
-
 dX_col = np.zeros_like(X_col)
 
 # 5x10x14x14 => 14x14x5x10, then flattened to 1x9800
-
 # Transpose step is necessary to get the correct arrangement
-
 dout_flat = dout.transpose(2, 3, 0, 1).ravel()
 
 # Fill the maximum index of each column with the gradient
-
 # Essentially putting each of the 9800 grads
-
 # to one of the 4 row in 9800 locations, one at each column
-
 dX_col[max_idx, range(max_idx.size)] = dout_flat
 
 # We now have the stretched matrix of 4x9800, then undo it with col2im operation
-
 # dX would be 50x1x28x28
-
 dX = col2im_indices(dX_col, (n \* d, 1, h, w), size, size, padding=0, stride=stride)
 
 # Reshape back to match the input dimension: 5x10x28x28
-
 dX = dX.reshape(X.shape)
 ```
 
@@ -133,7 +110,7 @@ We also see that doing maxpool with certain parameters, e.g. 2x2 maxpool with st
 
 ## References
 
-- <http://cs231n.github.io/convolutional-networks/#pool>
-- <http://vision.stanford.edu/teaching/cs231n/winter1516_assignment2.zip>
-- <https://arxiv.org/pdf/1512.03385v1>
-- <http://www.cs.unc.edu/~wliu/papers/GoogLeNet.pdf>
+- http://cs231n.github.io/convolutional-networks/#pool
+- http://vision.stanford.edu/teaching/cs231n/winter1516_assignment2.zip
+- https://arxiv.org/pdf/1512.03385v1
+- http://www.cs.unc.edu/~wliu/papers/GoogLeNet.pdf