building with tabulator

3 files changed, 39 insertions, 26 deletions

diff --git a/megapixels/app/site/parser.py b/megapixels/app/site/parser.py
index 5f373937..6c6ad688 100644
--- a/megapixels/app/site/parser.py
+++ b/megapixels/app/site/parser.py
@@ -55,8 +55,10 @@ def format_metadata(section):
   return "<section><div class='meta'>{}</div></section>".format(''.join(meta)) 
 
 def format_applet(section, s3_path):
-  payload = section.replace('```', '').strip().split('\n')
+  print(section)
+  payload = section.strip('```').strip().split('\n')
   applet = {}
+  print(payload)
   if ': ' in payload[0]:
     command, opt = payload[0].split(': ')
   else:
@@ -85,7 +87,14 @@ def parse_markdown(sections, s3_path, skip_h1=False):
       continue
     elif section.startswith('```'):
       groups.append(format_section(current_group, s3_path))
-      groups.append(format_applet(section, s3_path))
+      current_group = []
+      current_group.append(section)
+      if section.endswith('```'):
+        groups.append(format_applet("\n\n".join(current_group), s3_path))
+        current_group = []
+    elif section.endswith('```'):
+      current_group.append(section)
+      groups.append(format_applet("\n\n".join(current_group), s3_path))
       current_group = []
     elif section.startswith('+ '):
       groups.append(format_section(current_group, s3_path))
diff --git a/site/assets/css/css.css b/site/assets/css/css.css
index 9ac35699..83db7f23 100644
--- a/site/assets/css/css.css
+++ b/site/assets/css/css.css
@@ -204,6 +204,7 @@ pre code {
   display: block;
   max-height: 400px;
   max-width: 640px;
+  overflow: scroll;
   padding: 4px 10px;
 }
 table {
diff --git a/site/public/datasets/lfw/index.html b/site/public/datasets/lfw/index.html
index 1c075a1f..35056347 100644
--- a/site/public/datasets/lfw/index.html
+++ b/site/public/datasets/lfw/index.html
@@ -66,10 +66,7 @@
 <p>According to BiometricUpdate.com [^lfw_pingan], LFW is "the most widely used evaluation set in the field of facial recognition, LFW attracts a few dozen teams from around the globe including Google, Facebook, Microsoft Research Asia, Baidu, Tencent, SenseTime, Face++ and Chinese University of Hong Kong."</p>
 <p>According to researchers at the Baidu Research – Institute of Deep Learning "LFW has been the most popular evaluation benchmark for face recognition, and played a very important role in facilitating the face recognition society to improve algorithm. [^lfw_baidu]."</p>
 <p>In addition to commercial use as an evaluation tool, alll of the faces in LFW dataset are prepackaged into a popular machine learning code framework called scikit-learn.</p>
-<pre><code>load file: assets/lfw_commercial_use.csv
-name_display,company_url,example_url,country,description
-</code></pre>
-<table>
+</section><section><div class='applet' data-payload='{"command": "load file", "opt": "https://nyc3.digitaloceanspaces.com/megapixels/v1/datasets/lfw/assets/lfw_commercial_use.csv", "fields": "name_display, company_url, example_url, country, description"}'></div></section><section><table>
 <thead><tr>
 <th style="text-align:left">Company</th>
 <th style="text-align:left">Country</th>
@@ -220,30 +217,36 @@ name_display,company_url,example_url,country,description
 </tbody>
 </table>
 <h2>Code</h2>
-</section><section><p>```python</p>
-<h1>!/usr/bin/python</h1>
-</section><section><p>import numpy as np
+</section><section><pre><code class="lang-python">#!/usr/bin/python
+
+import numpy as np
 from sklearn.datasets import fetch_lfw_people
 import imageio
-import imutils</p>
-<h1>download LFW dataset (first run takes a while)</h1>
-<p>lfw_people = fetch_lfw_people(min_faces_per_person=1, resize=1, color=True, funneled=False)</p>
-<h1>introspect dataset</h1>
-<p>n_samples, h, w, c = lfw_people.images.shape
-print('{:,} images at {}x{}'.format(n_samples, w, h))
+import imutils
+
+# download LFW dataset (first run takes a while)
+lfw_people = fetch_lfw_people(min_faces_per_person=1, resize=1, color=True, funneled=False)
+
+# introspect dataset
+n_samples, h, w, c = lfw_people.images.shape
+print(&#39;{:,} images at {}x{}&#39;.format(n_samples, w, h))
 cols, rows = (176, 76)
-n_ims = cols * rows</p>
-<h1>build montages</h1>
-<p>im_scale = 0.5
+n_ims = cols * rows
+
+# build montages
+im_scale = 0.5
 ims = lfw_people.images[:n_ims
-montages = imutils.build_montages(ims, (int(w<em>im_scale, int(h</em>im_scale)), (cols, rows))
-montage = montages[0]</p>
-<h1>save full montage image</h1>
-<p>imageio.imwrite('lfw_montage_full.png', montage)</p>
-<h1>make a smaller version</h1>
-<p>montage_960 = imutils.resize(montage, width=960)
-imageio.imwrite('lfw_montage_960.jpg', montage_960)</p>
-</section><section><div class='applet' data-payload='{"command": ""}'></div></section><section><h2>Disclaimer</h2>
+montages = imutils.build_montages(ims, (int(w*im_scale, int(h*im_scale)), (cols, rows))
+montage = montages[0]
+
+# save full montage image
+imageio.imwrite(&#39;lfw_montage_full.png&#39;, montage)
+
+# make a smaller version
+montage_960 = imutils.resize(montage, width=960)
+imageio.imwrite(&#39;lfw_montage_960.jpg&#39;, montage_960)
+</code></pre>
+</section><section><h2>Disclaimer</h2>
 <p>MegaPixels is an educational art project designed to encourage discourse about facial recognition datasets. Any ethical or legal issues should be directed to the researcher's parent organizations. Except where necessary for contact or clarity, the names of researchers have been subsituted by their parent organization. In no way does this project aim to villify researchers who produced the datasets.</p>
 <p>Read more about <a href="about/code-of-conduct">MegaPixels Code of Conduct</a></p>
 <div class="footnotes">