notebook_to_html_export.ipynb

{
  "cells": [
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "view-in-github",
        "colab_type": "text"
      },
      "source": [
        "<a href=\"https://colab.research.google.com/github/mayalenE/sketch-transformer/blob/main/notebook_to_html_export.ipynb\" target=\"_parent\"><img src=\"https://colab.research.google.com/assets/colab-badge.svg\" alt=\"Open In Colab\"/></a>"
      ]
    },
    {
      "cell_type": "markdown",
      "source": [
        "Acknowledgements: This notebook is used to convert the sketch-transformer colab into a html blogpost, and has been adapted from a notebook by [Alexander Mordvinstev](https://www.google.com/search?q=alexander+mordvinstev&oq=alexander+mordvinstev&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIJCAEQLhgNGIAEMggIAhAAGA0YHjIICAMQABgNGB4yCAgEEAAYDRge0gEINzIyM2owajeoAgCwAgA&sourceid=chrome&ie=UTF-8)."
      ],
      "metadata": {
        "id": "BvyLSsnxs43V"
      }
    },
    {
      "cell_type": "code",
      "execution_count": 1,
      "metadata": {
        "id": "zpoUBeX42Za6",
        "colab": {
          "base_uri": "https://localhost:8080/"
        },
        "outputId": "1e3fe7b5-8653-4784-af9d-763953715557"
      },
      "outputs": [
        {
          "output_type": "stream",
          "name": "stdout",
          "text": [
            "Mounted at /content/drive\n"
          ]
        }
      ],
      "source": [
        "from google.colab import drive\n",
        "drive.mount('/content/drive', force_remount=True)"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 2,
      "metadata": {
        "id": "IjfCexZp2J3J"
      },
      "outputs": [],
      "source": [
        "#@title html_prefix\n",
        "!mkdir -p out\n",
        "\n",
        "TITLE = \"Learning to generate human-like sketches with a (decoder-only) transformer network\"\n",
        "DESC = \"Learning to generate human-like sketches with a (decoder-only) transformer network\"\n",
        "URL = \"https://github.com/mayalenE/sketch-transformer\"\n",
        "\n",
        "html_prefix = f'''<!DOCTYPE html>\n",
        "<meta charset=\"utf-8\">\n",
        "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n",
        "<title>Learning to generate human-like sketches with a (decoder-only) transformer network</title>\n",
        "<meta name=\"Learning to generate human-like sketches with a (decoder-only) transformer network\"/>\n",
        "<meta property=\"article:author\" content=\"Mayalen Etcheverry\">\n",
        "<link rel=\"stylesheet\" href=\"highlight.css\">\n",
        "<link rel=\"stylesheet\" href=\"style.css\">\n",
        "\n",
        "<script>\n",
        "MathJax = {{\n",
        "  tex: {{ inlineMath: [['$', '$']] }}\n",
        "}};\n",
        "</script>\n",
        "<script type=\"text/javascript\" id=\"MathJax-script\" async\n",
        "  src=\"https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js\">\n",
        "</script>\n",
        "'''"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 3,
      "metadata": {
        "id": "hpymhRSl2STT",
        "colab": {
          "base_uri": "https://localhost:8080/"
        },
        "outputId": "e3e9025a-d8dc-40e5-d6c2-8e9f68604385"
      },
      "outputs": [
        {
          "output_type": "stream",
          "name": "stdout",
          "text": [
            "Writing out/style.css\n"
          ]
        }
      ],
      "source": [
        "#@title style.css\n",
        "%%file out/style.css\n",
        "* {\n",
        "}\n",
        "html {\n",
        "    font-size: 16px;\n",
        "    font-family: sans-serif;\n",
        "     line-height: 1.6em;\n",
        "}\n",
        "body {\n",
        "  margin: 0 auto;\n",
        "  max-width: 60rem;\n",
        "}\n",
        "div,p,h1,h2,h3 {\n",
        "    margin: 10px 10px 10px 10px;\n",
        "}\n",
        "h1,h2,h3 {\n",
        "    margin-top: 30px;\n",
        "    margin-bottom: 10px;\n",
        "    line-height: 1.3em;\n",
        "}\n",
        "h1 {font-size: 3.0rem;}\n",
        "h2 {font-size: 2.0rem;}\n",
        "h3 {font-size: 1.5rem;}\n",
        "\n",
        "table:nth-of-type(1) {\n",
        "    width: 100%;\n",
        "    text-align: left;\n",
        "    font-size: smaller;\n",
        "    margin: 10px;\n",
        "    padding-bottom: 5px;\n",
        "    padding-top: 5px;\n",
        "    border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n",
        "    border-top: 1px solid rgba(0, 0, 0, 0.1);\n",
        "}\n",
        "\n",
        "table:nth-of-type(1) * {\n",
        "    padding: 0;\n",
        "    margin: 0;\n",
        "}\n",
        "\n",
        "table:nth-of-type(1) td {\n",
        "    line-height: 1.6em;\n",
        "}\n",
        "\n",
        "table:nth-of-type(1) a {\n",
        "    text-decoration: none;\n",
        "    color: black;\n",
        "    margin: 0;\n",
        "}\n",
        "\n",
        "th {\n",
        "    font-weight: lighter;\n",
        "}\n",
        "\n",
        "table:nth-of-type(1) td:first-child {\n",
        "    font-weight: bold;\n",
        "}\n",
        "\n",
        ".output,.highlight {\n",
        "    display: block;\n",
        "    overflow-x: auto;\n",
        "    margin-top: 10px;\n",
        "    line-height: 1em;\n",
        "    padding-bottom: 8px;\n",
        "}\n",
        ".code-cell {\n",
        "    margin: 20px 0 20px 0;\n",
        "    display: block;\n",
        "}\n",
        ".output {\n",
        "    font-size: 80%;\n",
        "}\n",
        ".highlight {\n",
        "    font-size: 90%;\n",
        "    line-height: 1.2em;\n",
        "}\n",
        "pre {\n",
        "    display: inline;\n",
        "}\n",
        "img,video,iframe {\n",
        "    display:block;\n",
        "    margin: auto;\n",
        "    max-width:90%;\n",
        "}\n",
        "\n",
        ".highlight .err {\n",
        "    border: 0px;\n",
        "}\n",
        "\n",
        "#pdemo {\n",
        "    text-align: center;\n",
        "    border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n",
        "}\n",
        "\n",
        "#repro {\n",
        "    text-align: left;\n",
        "}\n",
        "\n",
        ".colab-root {\n",
        "    display: inline-block;\n",
        "    background: rgba(255, 255, 255, 0.75);\n",
        "    padding: 2px 8px;\n",
        "    border-radius: 4px;\n",
        "    font-size: 10px!important;\n",
        "    text-decoration: none;\n",
        "    color: #aaa;\n",
        "    font-weight: 500;\n",
        "    border: solid 1px rgba(0, 0, 0, 0.08);\n",
        "    border-bottom-color: rgba(0, 0, 0, 0.15);\n",
        "    text-transform: uppercase;\n",
        "    line-height: 16px;\n",
        "}\n",
        "\n",
        "span.colab-span {\n",
        "    background-image: url(colab.svg);\n",
        "    background-repeat: no-repeat;\n",
        "    background-size: 20px;\n",
        "    background-position-y: 1px;\n",
        "    display: inline-block;\n",
        "    padding-left: 24px;\n",
        "}\n",
        "\n",
        "span.github-span {\n",
        "    background-image: url(github.svg);\n",
        "    background-repeat: no-repeat;\n",
        "    background-size: 20px;\n",
        "    background-position: center right;\n",
        "    display: inline-block;\n",
        "    padding-right: 24px;\n",
        "}\n",
        "\n",
        "\n",
        "#arxiv {\n",
        "    background-image: url(arxiv.svg);\n",
        "    vertical-align: bottom;\n",
        "    background-repeat: no-repeat;\n",
        "    background-size: 30px;\n",
        "    background-position: center;\n",
        "    padding-left: 40px;\n",
        "    /* padding-top: 6px; */\n",
        "    padding-bottom: 20px;\n",
        "    filter: opacity(0.3);\n",
        "    cursor: not-allowed;\n",
        "    /* margin-left: 10px; */\n",
        "    /*    background-color: #b31b1b;*/\n",
        "}\n",
        "\n",
        "#demo {\n",
        "    font-size: 25px!important;\n",
        "    font-weight: bold;\n",
        "    padding: 12px 12px;\n",
        "    background-color: #4a9cda;\n",
        "    color: #f5d36b;\n",
        "    border: solid 1px rgba(0, 0, 0, 0.25);\n",
        "    border-bottom-color: rgba(0, 0, 0, 0.55);\n",
        "}\n",
        "\n",
        ".toc a {\n",
        "    text-decoration: none;\n",
        "    color: black;\n",
        "}\n",
        "\n",
        ".toc a:hover {\n",
        "    text-decoration: underline;\n",
        "    color: black;\n",
        "}\n",
        "\n",
        ".toc ul {\n",
        "    list-style-type: none;\n",
        "    padding-left: 10px;\n",
        "/*    list-style-position: inside;*/\n",
        "/*    padding: 0;*/\n",
        "/*    margin: 0;*/\n",
        "}\n",
        "\n",
        ".toc ul ul {\n",
        "    padding-left: 15px;\n",
        "    font-size: smaller;\n",
        "}\n",
        "\n",
        "\n",
        "@media(max-width: 1440px) {\n",
        "    .toc {\n",
        "        display: none;\n",
        "    }\n",
        "}\n",
        "\n",
        "@media(max-width: 800px) {\n",
        "    h1 {\n",
        "      font-size: 1.8rem;\n",
        "    }\n",
        "\n",
        "    #reprotext {\n",
        "      display: none;\n",
        "    }\n",
        "\n",
        "}\n",
        "\n",
        ".toc {\n",
        "    /* The CSS applied to our floating application */\n",
        "    border-right: 1px solid rgba(0, 0, 0, 0.1);\n",
        "    padding-right: 20px;\n",
        "    position: sticky; /*relative;*/\n",
        "    /*    bottom: 10px;*/\n",
        "    background-color: white;\n",
        "    /*    left: 200px;*/\n",
        "    float: left;\n",
        "    margin-left: -300px;\n",
        "    width: 250px;\n",
        "    /*left: -200px;*/\n",
        "}\n",
        "\n",
        "#colablink {\n",
        "    padding: 2px 4px;\n",
        "}\n",
        "\n",
        ".markdown-output {\n",
        "    display: block;\n",
        "    overflow-x: auto;\n",
        "    margin-top: 10px;\n",
        "    line-height: 1em;\n",
        "    padding-bottom: 8px;\n",
        "    background: floralwhite;\n",
        "}\n",
        "\n",
        ".markdown-output h1 {\n",
        "    font-size: 1.5rem;\n",
        "}\n",
        "\n",
        ".markdown-output h2 {\n",
        "    font-size: 1rem;\n",
        "}\n",
        "\n",
        "blockquote {\n",
        "    display: block;\n",
        "    overflow-x: auto;\n",
        "    margin-top: 10px;\n",
        "    line-height: 1em;\n",
        "    padding-bottom: 8px;\n",
        "    background: floralwhite;\n",
        "    font-size: small;\n",
        "}"
      ]
    },
    {
      "cell_type": "code",
      "source": [
        "#@title github.svg\n",
        "%%file out/github.svg\n",
        "\n",
        "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n",
        "<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z\" fill=\"#1B1F23\"/>\n",
        "</svg>"
      ],
      "metadata": {
        "colab": {
          "base_uri": "https://localhost:8080/"
        },
        "id": "SIzSXETh0XHa",
        "outputId": "ce477ba1-5e8a-4021-84b3-fa5c3b9c7b81"
      },
      "execution_count": 4,
      "outputs": [
        {
          "output_type": "stream",
          "name": "stdout",
          "text": [
            "Writing out/github.svg\n"
          ]
        }
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 5,
      "metadata": {
        "id": "Hz5tdYH_2Vzb",
        "colab": {
          "base_uri": "https://localhost:8080/"
        },
        "outputId": "3a8f3dee-a334-496b-bb8c-d0d38a066d61"
      },
      "outputs": [
        {
          "output_type": "stream",
          "name": "stdout",
          "text": [
            "Writing out/colab.svg\n"
          ]
        }
      ],
      "source": [
        "#@title colab.svg\n",
        "%%file out/colab.svg\n",
        "<svg width=\"24px\" height=\"15px\" viewBox=\"0 0 24 15\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n",
        "    <!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->\n",
        "    <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n",
        "        <g id=\"colab\" fill-rule=\"nonzero\">\n",
        "            <path d=\"M1.977,11.77 C-0.69,9.493 -0.628,4.691 1.977,2.413 C2.919,3.057 3.522,4.075 4.49,4.691 C3.338,6.291 3.344,7.892 4.486,9.494 C3.522,10.111 2.918,11.126 1.977,11.77 Z\" id=\"Shape\" fill=\"#FDBA18\"></path>\n",
        "            <path d=\"M12.257,12.114 C10.49,10.481 9.772,8.456 10.139,6.094 C10.59,3.184 12.278,1.201 15.085,0.416 C17.65,-0.302 20.049,0.199 21.963,2.235 C21.079,2.978 20.256,3.782 19.529,4.681 C18.488,3.827 17.319,3.435 16,3.856 C13.596,4.623 12.954,7.097 14.506,9.5 C14.265,9.775 14.013,10.041 13.785,10.326 C13.295,10.939 12.511,11.3 12.257,12.114 Z\" id=\"Shape\" fill=\"#FCD93D\"></path>\n",
        "            <path d=\"M19.529,4.682 C20.256,3.783 21.079,2.979 21.963,2.236 C24.666,5.019 24.664,9.267 21.958,12 C19.31,14.674 15.022,14.725 12.257,12.115 C12.511,11.301 13.295,10.94 13.785,10.327 C14.013,10.042 14.265,9.775 14.506,9.501 C15.559,10.417 16.76,10.769 18.106,10.331 C20.502,9.551 21.151,6.927 19.529,4.682 Z\" id=\"Shape\" fill=\"#FDBA18\"></path>\n",
        "            <path d=\"M4.49,4.691 C3.522,4.075 2.919,3.057 1.977,2.413 C4.186,0.015 7.698,-0.529 10.453,1.058 C11.008,1.378 11.172,1.664 10.738,2.186 C10.581,2.374 10.48,2.608 10.347,2.817 C10.048,3.287 9.838,3.884 9.418,4.188 C8.933,4.539 8.523,3.847 8.021,3.746 C6.673,3.475 5.509,3.787 4.49,4.691 Z\" id=\"Shape\" fill=\"#FCD93D\"></path>\n",
        "            <path d=\"M1.977,11.77 C2.918,11.126 3.522,10.111 4.486,9.493 C5.859,10.645 7.336,10.926 8.936,9.992 C9.268,9.798 9.439,9.904 9.609,10.182 C9.995,10.817 10.362,11.467 10.79,12.072 C11.13,12.552 11.012,12.787 10.537,13.078 C7.84,14.73 4.205,14.188 1.977,11.77 Z\" id=\"Shape\" fill=\"#FCD93D\"></path>\n",
        "        </g>\n",
        "    </g>\n",
        "</svg>"
      ]
    },
    {
      "cell_type": "code",
      "source": [
        "from google.colab import output\n",
        "import os\n",
        "os.system('python -m http.server 8888 &')\n",
        "output.serve_kernel_port_as_window(8888)"
      ],
      "metadata": {
        "id": "_UTs2gfBtHaL",
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 34
        },
        "outputId": "69826bb1-e1f4-4a97-a2d6-5021c1c37810"
      },
      "execution_count": 48,
      "outputs": [
        {
          "output_type": "display_data",
          "data": {
            "text/plain": [
              "<IPython.core.display.Javascript object>"
            ],
            "application/javascript": [
              "(async (port, path, text, element) => {\n",
              "    if (!google.colab.kernel.accessAllowed) {\n",
              "      return;\n",
              "    }\n",
              "    element.appendChild(document.createTextNode(''));\n",
              "    const url = await google.colab.kernel.proxyPort(port);\n",
              "    const anchor = document.createElement('a');\n",
              "    anchor.href = new URL(path, url).toString();\n",
              "    anchor.target = '_blank';\n",
              "    anchor.setAttribute('data-href', url + path);\n",
              "    anchor.textContent = text;\n",
              "    element.appendChild(anchor);\n",
              "  })(8888, \"/\", \"https://localhost:8888/\", window.element)"
            ]
          },
          "metadata": {}
        }
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 49,
      "metadata": {
        "id": "dv_7iuK27-Il"
      },
      "outputs": [],
      "source": [
        "import os\n",
        "import itertools as it\n",
        "import base64\n",
        "import json\n",
        "import re\n",
        "\n",
        "import markdown\n",
        "from markdown.inlinepatterns import SimpleTextPattern\n",
        "from markdown.extensions import Extension\n",
        "from markdown.extensions.toc import TocExtension\n",
        "from pygments import highlight\n",
        "from pygments.lexers import PythonLexer\n",
        "from pygments.formatters import HtmlFormatter\n",
        "\n",
        "src_dir = 'drive/My Drive/Colab Notebooks/Sketch-Transformer/'\n",
        "colab_fn = src_dir+'transformer_sketch_generation.ipynb'\n",
        "out_dir = 'out/'\n",
        "notebook_json = json.load(open(colab_fn, 'r'))"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 50,
      "metadata": {
        "id": "cMlnz_es2i_3"
      },
      "outputs": [],
      "source": [
        "def save(fn, data):\n",
        "    if isinstance(data, list):\n",
        "        data = ''.join(data)\n",
        "    mode = 'wb' if isinstance(data, bytes) else 'w'\n",
        "    with open(out_dir+fn, mode) as f:\n",
        "        f.write(data)\n",
        "\n",
        "lexer, formatter = PythonLexer(), HtmlFormatter()\n",
        "save('highlight.css', formatter.get_style_defs('.highlight'))\n",
        "\n",
        "img_count = it.count()\n",
        "html = []\n",
        "\n",
        "\n",
        "def parse_outputs(c, html):\n",
        "  for o in c['outputs']:\n",
        "    if o['output_type'] == 'stream':\n",
        "      s = '<div class=\"output\"><pre>'+''.join(o['text'])+'</pre></div>\\n'\n",
        "      html.append(s)\n",
        "\n",
        "    elif o['output_type'] == 'display_data':\n",
        "      if 'text/html' in o['data']:\n",
        "        if isinstance(o['data']['text/html'], list):\n",
        "          html += o['data']['text/html']\n",
        "        else:\n",
        "          html.append(o['data']['text/html'])\n",
        "      elif 'text/markdown' in o['data']:\n",
        "        html.append('\\n<div class=\"markdown-output\">\\n' + markdown.markdown(o['data']['text/markdown']) + '\\n</div>')\n",
        "      for fmt in ['image/png', 'image/jpeg']:\n",
        "        if fmt in o['data']:\n",
        "          fn = f'{next(img_count):02}.{fmt.split(\"/\")[1]}'\n",
        "          save(fn, base64.b64decode(o['data'][fmt]))\n",
        "          html.append(f'<img src=\"{fn}\">')\n",
        "  return html\n",
        "\n",
        "cells_iter = iter(notebook_json['cells'])\n",
        "md = []\n",
        "for c in cells_iter:\n",
        "  source = ''.join(c['source'])\n",
        "  if source.startswith('# !export'):\n",
        "    break  # article body end\n",
        "  if c['cell_type'] == 'markdown':\n",
        "    html.append(source+'\\n')\n",
        "    md.append(source)\n",
        "  elif c['cell_type'] == 'code':\n",
        "    html.append('\\n<div class=\"code-cell\">\\n')\n",
        "    if c['metadata'].get('cellView') != 'form':\n",
        "        html.append(highlight(source, lexer, formatter)+'\\n')\n",
        "    html = parse_outputs(c, html)\n",
        "    html.append('</div>\\n')\n",
        "\n",
        "class MathEscapeExtension(Extension):\n",
        "    def extendMarkdown(self, md):\n",
        "        md.inlinePatterns.register(SimpleTextPattern(r'(\\$.+?\\$)'), 'math', 175)\n",
        "\n",
        "html = markdown.markdown(\"\".join(html), extensions=['tables', 'fenced_code', TocExtension(toc_depth='2-4'), MathEscapeExtension()])\n",
        "save('index.html', html_prefix+html)"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 51,
      "metadata": {
        "id": "VDhULMum2lJ_",
        "colab": {
          "base_uri": "https://localhost:8080/"
        },
        "outputId": "8fe11bbd-dea4-4619-dc8c-ac0d16958c27"
      },
      "outputs": [
        {
          "output_type": "stream",
          "name": "stdout",
          "text": [
            "  adding: out/colab.svg (deflated 55%)\n",
            "  adding: out/github.svg (deflated 49%)\n",
            "  adding: out/highlight.css (deflated 79%)\n",
            "  adding: out/index.html (deflated 59%)\n",
            "  adding: out/style.css (deflated 72%)\n"
          ]
        }
      ],
      "source": [
        "!zip out.zip out/*"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 52,
      "metadata": {
        "id": "iv4QayLFHBcL"
      },
      "outputs": [],
      "source": [
        "cp out.zip \"{src_dir}\""
      ]
    }
  ],
  "metadata": {
    "colab": {
      "provenance": [],
      "include_colab_link": true
    },
    "kernelspec": {
      "display_name": "Python 3",
      "name": "python3"
    },
    "language_info": {
      "codemirror_mode": {
        "name": "ipython",
        "version": 3
      },
      "file_extension": ".py",
      "mimetype": "text/x-python",
      "name": "python",
      "nbconvert_exporter": "python",
      "pygments_lexer": "ipython3",
      "version": "3.10.9"
    }
  },
  "nbformat": 4,
  "nbformat_minor": 0
}