From 6a9fe25822ba5acb44df131782bb2a444986da7b Mon Sep 17 00:00:00 2001 From: Rodney Phillips Date: Thu, 2 Jul 2020 18:15:40 -0300 Subject: [PATCH 1/3] Automating HTML rendering, added some styles --- README.md | 9 ++++++++ css/notebook.css | 30 +++++++++++++++++++++++++++ index.html | 50 ++++++++++++++++++++++----------------------- launchAndRender.sh | 14 +++++++++++++ render.py | 5 +++-- templates/main.html | 22 +------------------- 6 files changed, 82 insertions(+), 48 deletions(-) create mode 100644 launchAndRender.sh diff --git a/README.md b/README.md index 96ef48f..3798041 100644 --- a/README.md +++ b/README.md @@ -41,3 +41,12 @@ And open the resulting `index.html` in your browser to see the results. Here is what I get in my django website: ![](blog_screenshot.png) + +## Automating notebook execution and rendering + +Inside a docker container of the jupyter/datascience-notebook image, run the container and run bash. + +* Mount the root directory of the repository onto /home/jovian/work before launching (docker run -v `pwd`:/home/jovyan/work/ -d -p 8888:8888 jupyter/datascience-notebook) +* Execute bash inside the container (docker exec -it [containerId] bash) +* Run launchAndRender.sh [notebookName]. The notebook will be expected atthe "notebooks" folder, and should be [notebookName].ipynb +* A [notebookName].html file will be output \ No newline at end of file diff --git a/css/notebook.css b/css/notebook.css index d7dec4b..e75feae 100644 --- a/css/notebook.css +++ b/css/notebook.css @@ -559,3 +559,33 @@ div.output_javascript:empty { .th { text-center: left; } + + +.dataframe tbody tr { + text-align: right; + vertical-align: middle; + padding: 0.5em 0.5em; + line-height: normal; + white-space: normal; + max-width: none; + border: none; +} + +.dataframe tr:nth-child(odd) td { + background-color: #f5f5f5; + /* font-weight: bold; */ +} + +.dataframe th { + text-align: right; + vertical-align: middle; + padding: 0.5em 0.5em; + line-height: normal; + white-space: normal; + max-width: none; + border: none; +} + +.dataframe table { + border: none; +} \ No newline at end of file diff --git a/index.html b/index.html index 246d805..371bf19 100644 --- a/index.html +++ b/index.html @@ -141,7 +141,7 @@

-
+ 
import matplotlib.pyplot as plt
 import numpy as np
 %matplotlib inline
@@ -178,7 +178,7 @@
-
+ 
def make_sample(nexamples, means=([0.,0.],[1.,1.]), sigma=1.):
     normal = np.random.multivariate_normal
     # squared width:
@@ -220,7 +220,7 @@
-
+ 
sgx, sgy = make_sample(30)
 tgx, tgy = make_sample(200)
@@ -236,7 +236,7 @@

-
+ 
# note how the two categories are plotted
 # together in one go by providing the 
 # label array as color argument (c=sgy)
@@ -261,7 +261,7 @@ 

       

        

        

-       

+       

         
        

@@ -310,7 +310,7 @@ 

      

      

       

-       

+       

         
from sklearn.neural_network import MLPClassifier
 
 mlp = MLPClassifier(hidden_layer_sizes=(50,50,50), activation='relu', max_iter=10000, random_state=1)
@@ -357,7 +357,7 @@ 

      

      

       

-       

+       

         
def plot_result(sample, targets, linrange=(-5,5,101)):
     xmin, xmax, npoints = linrange
     gridx1, gridx2 = np.meshgrid(np.linspace(xmin,xmax,npoints), np.linspace(xmin,xmax,npoints))
@@ -382,7 +382,7 @@ 

      

      

       

-       

+       

         
plot_result(sgx,sgy)
 

        

@@ -394,7 +394,7 @@ 

       

        

        

-       

+       

         
        

@@ -423,7 +423,7 @@ 

      

      

       

-       

+       

         
plot_result(tgx,tgy)
 

        

@@ -435,7 +435,7 @@ 

       

        

        

-       

+       

         
        

@@ -475,7 +475,7 @@ 

      

      

       

-       

+       

         
mlp = MLPClassifier(hidden_layer_sizes=(5,), activation='relu', max_iter=10000, random_state=1)
 mlp.fit(sgx,sgy)
 plot_result(tgx,tgy)
@@ -489,7 +489,7 @@ 

       

        

        

-       

+       

         
        

@@ -518,7 +518,7 @@ 

      

      

       

-       

+       

         
sgx, sgy = make_sample(10000)
 mlp = MLPClassifier(hidden_layer_sizes=(50,50,50), activation='relu', max_iter=10000, random_state=1)
 mlp.fit(sgx,sgy)
@@ -533,7 +533,7 @@ 

       

        

        

-       

+       

         
        

@@ -582,7 +582,7 @@ 

      

      

       

-       

+       

         
sgxa, sgya = make_sample(1000, ([0.,0],[3.,3.]), 0.3)
 sgxb, sgyb = make_sample(1000, ([1.,1],[4.,4.]), 0.3)
 sgxc, sgyc = make_sample(1000, ([5.,5.],[-2.,-2.]), 0.6)
@@ -603,7 +603,7 @@ 

      

      

       

-       

+       

         
plt.scatter(sgx[:,0], sgx[:,1], alpha=0.5, c=sgy)
 plt.xlabel('x1')
 plt.ylabel('x2')
@@ -625,7 +625,7 @@ 

       

        

        

-       

+       

         
        

@@ -651,7 +651,7 @@ 

      

      

       

-       

+       

         
mlp = MLPClassifier(hidden_layer_sizes=(3,), activation='relu', max_iter=10000, random_state=1)
 mlp.fit(sgx,sgy)
 

@@ -685,7 +685,7 @@ 

      

      

       

-       

+       

         
plot_result(sgx,sgy,linrange=(-4,7,201))
 

        

@@ -697,7 +697,7 @@ 

       

        

        

-       

+       

         
        

@@ -734,7 +734,7 @@ 

      

      

       

-       

+       

         
mlp = MLPClassifier(hidden_layer_sizes=(5,), activation='relu', max_iter=10000, random_state=1)
 mlp.fit(sgx,sgy)
 plot_result(sgx,sgy,linrange=(-4,7,201))
@@ -748,7 +748,7 @@ 

       

        

        

-       

+       

         
        

@@ -777,7 +777,7 @@ 

      

      

       

-       

+       

         
mlp = MLPClassifier(hidden_layer_sizes=(50,50,50), activation='relu', max_iter=10000, random_state=1)
 mlp.fit(sgx,sgy)
 plot_result(sgx,sgy,linrange=(-4,7,201))
@@ -791,7 +791,7 @@ 

       

        

        

-       

+       

         
        

diff --git a/launchAndRender.sh b/launchAndRender.sh
new file mode 100644
index 0000000..e11df6e
--- /dev/null
+++ b/launchAndRender.sh
@@ -0,0 +1,14 @@
+#!/usr/bin/bash
+
+#run nbconvert on a notebook, copy to the templates folter, create a new template and render.
+
+#First argument: File name of the notebook to work on: e.g., if the notebook is analysis.ipynb, argument is analysis.
+
+cd notebooks/
+jupyter nbconvert --template basic $1.ipynb
+cp $1.html ../templates/
+cd ..
+
+sed -r "s/FNAME/'$1.html'/g" ./templates/main.html > ./templates/main_$1.html
+
+python render.py main_$1.html output_$1.html
\ No newline at end of file
diff --git a/render.py b/render.py
index b15aa0d..2f5f867 100644
--- a/render.py
+++ b/render.py
@@ -1,4 +1,5 @@
 import os
+import sys
 
 from jinja2 import Environment, FileSystemLoader
 
@@ -15,8 +16,8 @@
     loader = FileSystemLoader('templates'),
 )
 
-input_file = 'main.html'
-output_file = 'index.html'
+input_file = sys.argv[1]
+output_file = sys.argv[2]
 
 # reading the template
 template = env.get_template(input_file)
diff --git a/templates/main.html b/templates/main.html
index 916f8cb..b782467 100644
--- a/templates/main.html
+++ b/templates/main.html
@@ -13,27 +13,7 @@
 
   
     

-      
Integrating a Jupyter Notebook in a Web Page

-      
Some text.

-
-      
Maths

-
-      
Here is a simple inline equation: $E=mc^2$.

-
-      
And for longer equations, use the standard math mode:

-      
-      $$
-      \mathcal{L}=\bar{\psi}\left(i\gamma^{\mu}\partial_  {\mu}-m\right)\psi 
-      $$
-      
-      
A code section

-      
Here is some code:

-      
-import foo
-print foo.bar()
-      

-
-      {% include 'overfitting.html' %}
+      {% include FNAME %}
       
     

     

From ffa8c882db4dda2fbd4bc966b49786d9361a0f87 Mon Sep 17 00:00:00 2001
From: Rodney Phillips 
Date: Thu, 2 Jul 2020 18:23:17 -0300
Subject: [PATCH 2/3] Sample file

---
 notebooks/simple-chart.html | 184 ++++++++++++++++++++++++++++++++++++
 1 file changed, 184 insertions(+)
 create mode 100644 notebooks/simple-chart.html

diff --git a/notebooks/simple-chart.html b/notebooks/simple-chart.html
new file mode 100644
index 0000000..8ae9e4e
--- /dev/null
+++ b/notebooks/simple-chart.html
@@ -0,0 +1,184 @@
+

+

+
In [20]:

+

+    

+
import numpy as np # linear algebra
+import pandas as pd # data processing, CSV file I/O (e.g. pd.read_csv)
+

+
+    

+

+

+
+

+

+

+
In [21]:

+

+    

+
sampleData = pd.DataFrame(index=["A" + str(i) for i in range(102)],columns=["Even","Odd","Higher","Lower"],data=[[0+i,1+i,20+i,20-i] for i in range(102)])
+

+
+    

+

+

+
+

+

+

+
In [22]:

+

+    

+
sampleData.head()
+

+
+    

+

+

+
+

+

+
+
+

+
+    
Out[22]:

+
+
+
+

+

+
+
+  
+    
+      
+      
+      
+      
+      
+    
+  
+  
+    
+      
+      
+      
+      
+      
+    
+    
+      
+      
+      
+      
+      
+    
+    
+      
+      
+      
+      
+      
+    
+    
+      
+      
+      
+      
+      
+    
+    
+      
+      
+      
+      
+      
+    
+  
+
EvenOddHigherLower
A0012020
A1122119
A2232218
A3342317
A4452416

+

+

+
+

+
+

+

+
+

+

+

+
In [23]:

+

+    

+
sampleData.plot()
+

+
+    

+

+

+
+

+

+
+
+

+
+    
Out[23]:

+
+
+
+
+

+
<matplotlib.axes._subplots.AxesSubplot at 0x7fd6f4b26c50>

+

+
+

+
+

+
+    

+
+
+
+
+

+
+

+
+

+
+

+

+
+

+

+

+
In [ ]:

+

+    

+
 
+

+
+    

+

+

+
+

+ 
+

From c04d9d9d4d42951ad5bcd81b9375359e9688dc82 Mon Sep 17 00:00:00 2001
From: Rodney Phillips 
Date: Sat, 4 Jul 2020 20:47:05 -0300
Subject: [PATCH 3/3] Some other scripts

---
 exportToBlogpost.sh | 33 +++++++++++++++++++++++++++++++++
 launchAndRender.sh  |  2 +-
 2 files changed, 34 insertions(+), 1 deletion(-)
 create mode 100644 exportToBlogpost.sh

diff --git a/exportToBlogpost.sh b/exportToBlogpost.sh
new file mode 100644
index 0000000..51def5d
--- /dev/null
+++ b/exportToBlogpost.sh
@@ -0,0 +1,33 @@
+#!/usr/bin/bash
+
+#run nbconvert on a notebook, copy to the templates folter, create a new template and render.
+
+#First argument: File name of the notebook to work on: e.g., if the notebook is analysis.ipynb, argument is analysis.
+#Second argument: Output directory.
+#Third argument: title of the post
+TITLE=$3
+OUTPUT_DIR=$2
+POST_DATE=`date +'%Y'-%m-%d`
+cd notebooks/
+echo "Converting"
+jupyter nbconvert --to markdown  $1.ipynb
+
+cd ..
+echo "Appending to base post"
+cp ./base_post.md  $OUTPUT_DIR/$POST_DATE-$1.md
+
+echo "Copying images"
+mkdir $OUTPUT_DIR/images/
+cat ./notebooks/$1.md | tee -a $OUTPUT_DIR/$POST_DATE-$1.md
+cp ./notebooks/$1_files/* $OUTPUT_DIR/images/
+echo "Replacing $1"
+
+sed -ri "s/__TITLE__/$TITLE/g" $OUTPUT_DIR/$POST_DATE-$1.md
+sed -ri "s/__DATE__/$POST_DATE/g" $OUTPUT_DIR/$POST_DATE-$1.md
+sed -ri "s/$1_files/\/assets\/images\//g" $OUTPUT_DIR/$POST_DATE-$1.md
+
+#cd ..
+
+#sed -r "s/FNAME/'$1.html'/g" ./templates/main.html > ./templates/main_$1.html
+
+#python render.py main_$1.html output_$1.html
diff --git a/launchAndRender.sh b/launchAndRender.sh
index e11df6e..df69bb1 100644
--- a/launchAndRender.sh
+++ b/launchAndRender.sh
@@ -11,4 +11,4 @@ cd ..
 
 sed -r "s/FNAME/'$1.html'/g" ./templates/main.html > ./templates/main_$1.html
 
-python render.py main_$1.html output_$1.html
\ No newline at end of file
+python render.py main_$1.html output_$1.html