phantomjs-tryout.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Trying recipe from http://stackoverflow.com/questions/10628262/inserting-image-into-ipython-notebook-markdown"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "shell-init: error retrieving current directory: getcwd: cannot access parent directories: No such file or directory\r\n"
     ]
    }
   ],
   "source": [
    "!ls"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "shell-init: error retrieving current directory: getcwd: cannot access parent directories: No such file or directory\r\n",
      "pwd: error retrieving current directory: getcwd: cannot access parent directories: No such file or directory\r\n",
      "pwd: error retrieving current directory: getcwd: cannot access parent directories: No such file or directory\r\n"
     ]
    }
   ],
   "source": [
    "!pwd"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "helloworld\n"
     ]
    }
   ],
   "source": [
    "print(\"helloworld\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Jupyter Version"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "collapsed": true
   },
   "source": [
    "<img src=\"jupyter-version.png\">"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Script used"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "// address of the notebook\n",
    "var address = \"http://localhost:8888/notebooks/phantomjs-tryout.ipynb\"\n",
    "// auth token from Jupyter console\n",
    "var authToken = \"b05a65d622136665a1292b9f3a29192364eaccb4bfbc6887\"\n",
    "// cell number with a widget output\n",
    "var cellNumber = 1;\n",
    "\n",
    "// this function is used to verify that a page is fully loaded\n",
    "// source: https://github.com/ariya/phantomjs/blob/master/examples/waitfor.js\n",
    "function waitFor(testFx, onReady, timeOutMillis) {\n",
    "    var maxtimeOutMillis = timeOutMillis ? timeOutMillis : 3000,\n",
    "        start = new Date().getTime(),\n",
    "        condition = false,\n",
    "        interval = setInterval(function() {\n",
    "            if ( (new Date().getTime() - start < maxtimeOutMillis) && !condition ) {\n",
    "                // If not time-out yet and condition not yet fulfilled\n",
    "                condition = (typeof(testFx) === \"string\" ? eval(testFx) : testFx());\n",
    "            } else {\n",
    "                if(!condition) {\n",
    "                    // If condition still not fulfilled (timeout but condition is 'false')\n",
    "                    console.log(\"'waitFor()' timeout\");\n",
    "                    phantom.exit(1);\n",
    "                } else {\n",
    "                    // Condition fulfilled (timeout and/or condition is 'true')\n",
    "                    console.log(\"'waitFor()' finished in \" + (new Date().getTime() - start) + \"ms.\");\n",
    "                    typeof(onReady) === \"string\" ? eval(onReady) : onReady();\n",
    "                    clearInterval(interval); //< Stop this interval\n",
    "                }\n",
    "            }\n",
    "        }, 250); //< repeat check every 250ms\n",
    "};\n",
    "\n",
    "// log in to a notebook using a token\n",
    "function logIn() {\n",
    "    console.log(\"Logging in\");\n",
    "    page.evaluate(function(token) {\n",
    "        document.forms[0].password.value = token;\n",
    "        document.forms[0].submit();\n",
    "    }, authToken);\n",
    "}\n",
    "\n",
    "// wait for a notebook to fully load, find the\n",
    "// needed output cell and save it as a PNG file\n",
    "function saveAsPNG() {\n",
    "    console.log(\"Saving PNG\")\n",
    "    // Wait for 'notebook-container' to be visible\n",
    "    waitFor(function() {\n",
    "        // Check in the page if a specific element is now visible\n",
    "        return page.evaluate(function() {\n",
    "            return $(\"#notebook-container\").is(\":visible\");\n",
    "        });\n",
    "    }, function() {\n",
    "        console.log(\"The notebook-container element should be visible now.\");\n",
    "        var clipRect = page.evaluate(function(cell){\n",
    "            // we are selecting only the output cell\n",
    "            var searchStr = 'div.output_area:contains(\"Out[' + cell + ']\")'\n",
    "            console.log('DEBUG: Search string: ' + searchStr);\n",
    "            var outputArea = $(searchStr)[0];\n",
    "            console.log('DEBUG: output_area div: ' + outputArea);\n",
    "            // get only the data div\n",
    "            var outputResult = $(outputArea).children('div.output_result')[0];\n",
    "            console.log('DEBUG: output_result div: ' + outputResult);\n",
    "            if (outputResult === undefined) {\n",
    "                return -1\n",
    "            }\n",
    "            // get the coordinates of the data div\n",
    "            return outputResult.getBoundingClientRect()\n",
    "        }, cellNumber);\n",
    "\n",
    "        console.log('DEBUG: clipRect: ' + clipRect);\n",
    "\n",
    "        if (clipRect === -1) {\n",
    "            phantom.exit(clipRect);\n",
    "        }\n",
    "\n",
    "        page.clipRect = {\n",
    "            top:    clipRect.top,\n",
    "            left:   clipRect.left,\n",
    "            width:  clipRect.width,\n",
    "            height: clipRect.height\n",
    "          };\n",
    "       page.render('example.png');\n",
    "       phantom.exit();\n",
    "    });\n",
    "}\n",
    "\n",
    "var page = require('webpage').create();\n",
    "// it seems, viewportSize should fully cover the\n",
    "// the rendered div position, or nothing will be saved.\n",
    "page.viewportSize = { width: 5000, height: 5000 };\n",
    "\n",
    "page.onConsoleMessage = function(msg, lineNum, sourceId) {\n",
    "    console.log('CONSOLE: ' + msg);\n",
    "}\n",
    "\n",
    "page.open(address, function (status) {\n",
    "    // Check for page load success\n",
    "    if (status !== \"success\") {\n",
    "        console.log(\"Unable to open a page\");\n",
    "    } else {\n",
    "        console.log('DEBUG: NB address: ' + address)\n",
    "        console.log('DEBUG: Auth token: ' + authToken)\n",
    "        console.log('DEBUG: Cell number: ' + cellNumber)\n",
    "        // Wait for 'password_input' to be visible\n",
    "        waitFor(function() {\n",
    "            // Check in the page if a specific element is now visible\n",
    "            return page.evaluate(function() {\n",
    "                return $(\"#password_input\").is(\":visible\");\n",
    "            });\n",
    "        }, function() {\n",
    "           console.log(\"The password_input element should be visible now.\");\n",
    "           logIn();\n",
    "           saveAsPNG();\n",
    "        });\n",
    "    }\n",
    "});"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Error"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "DEBUG: NB address: http://localhost:8888/notebooks/test.ipynb\n",
    "DEBUG: Auth token: b05a65d622136665a1292b9f3a29192364eaccb4bfbc6887\n",
    "DEBUG: Cell number: 1\n",
    "'waitFor()' finished in 500ms.\n",
    "The password_input element should be visible now.\n",
    "Logging in\n",
    "Saving PNG\n",
    "CONSOLE: loaded custom.js\n",
    "CONSOLE: Default extension for cell metadata editing loaded.\n",
    "CONSOLE: Raw Cell Format toolbar preset loaded.\n",
    "CONSOLE: Slideshow extension for metadata editing loaded.\n",
    "CONSOLE: actions jupyter-notebook:find-and-replace does not exist, still binding it in case it will be defined later...\n",
    "CONSOLE: load_extensions [object Arguments]\n",
    "CONSOLE: Loading extension: contrib_nbextensions_help_item/main\n",
    "Failed to load extension: nbextensions/nbextensions_configurator/config_menu/main Error: Script error for \"nbextensions/nbextensions_configurator/config_menu/main\"\n",
    "http://requirejs.org/docs/errors.html#scripterror\n",
    "\n",
    "  http://localhost:8888/static/notebook/js/main.min.js?v=edbc43d9bb99b1be2585a121ed720314:12233\n",
    "CONSOLE: Session: kernel_created (ef710647-5137-46c7-bd1e-cdc1778b0790)\n",
    "CONSOLE: Starting WebSockets: ws://localhost:8888/api/kernels/b9b038d9-1801-4258-a62b-dc0e9b91d499\n",
    "CONSOLE: Loading extension: toc2/main\n",
    "CONSOLE: [toc2] Notebook fully loaded -- toc2 initialized \n",
    "CONSOLE: Widgets are not available.  Please install widgetsnbextension or ipywidgets 4.0\n",
    "CONSOLE: ******Restoring toc display\n",
    "'waitFor()' finished in 563ms.\n",
    "The notebook-container element should be visible now.\n",
    "CONSOLE: DEBUG: Search string: div.output_area:contains(\"Out[1]\")\n",
    "CONSOLE: DEBUG: output_area div: undefined\n",
    "CONSOLE: DEBUG: output_result div: undefined\n",
    "DEBUG: clipRect: -1\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Try with visualizer"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<style>.container { width:100% !important; }</style>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "# from https://github.com/yaroslavvb/notebooks/blob/master/simple_rewiring.ipynb\n",
    "# make things wide\n",
    "from IPython.core.display import display, HTML\n",
    "display(HTML(\"<style>.container { width:100% !important; }</style>\"))\n",
    "\n",
    "from IPython.display import clear_output, Image, display, HTML\n",
    "\n",
    "def strip_consts(graph_def, max_const_size=32):\n",
    "    \"\"\"Strip large constant values from graph_def.\"\"\"\n",
    "    strip_def = tf.GraphDef()\n",
    "    for n0 in graph_def.node:\n",
    "        n = strip_def.node.add() \n",
    "        n.MergeFrom(n0)\n",
    "        if n.op == 'Const':\n",
    "            tensor = n.attr['value'].tensor\n",
    "            size = len(tensor.tensor_content)\n",
    "            if size > max_const_size:\n",
    "                tensor.tensor_content = \"<stripped %d bytes>\"%size\n",
    "    return strip_def\n",
    "\n",
    "def show_graph(graph_def=None, width=1200, height=800, max_const_size=32, ungroup_gradients=False):\n",
    "    if not graph_def:\n",
    "        graph_def = tf.get_default_graph().as_graph_def()\n",
    "        \n",
    "    \"\"\"Visualize TensorFlow graph.\"\"\"\n",
    "    if hasattr(graph_def, 'as_graph_def'):\n",
    "        graph_def = graph_def.as_graph_def()\n",
    "    strip_def = strip_consts(graph_def, max_const_size=max_const_size)\n",
    "    data = str(strip_def)\n",
    "    if ungroup_gradients:\n",
    "        data = data.replace('\"gradients/', '\"b_')\n",
    "        #print(data)\n",
    "    code = \"\"\"\n",
    "        <script>\n",
    "          function load() {{\n",
    "            document.getElementById(\"{id}\").pbtxt = {data};\n",
    "          }}\n",
    "        </script>\n",
    "        <link rel=\"import\" href=\"https://tensorboard.appspot.com/tf-graph-basic.build.html\" onload=load()>\n",
    "        <div style=\"height:600px\">\n",
    "          <tf-graph-basic id=\"{id}\"></tf-graph-basic>\n",
    "        </div>\n",
    "    \"\"\".format(data=repr(data), id='graph'+str(np.random.rand()))\n",
    "\n",
    "    iframe = \"\"\"\n",
    "        <iframe seamless style=\"width:{}px;height:{}px;border:0\" srcdoc=\"{}\"></iframe>\n",
    "    \"\"\".format(width, height, code.replace('\"', '&quot;'))\n",
    "    display(HTML(iframe))\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "        <iframe seamless style=\"width:1200px;height:800px;border:0\" srcdoc=\"\n",
       "        <script>\n",
       "          function load() {\n",
       "            document.getElementById(&quot;graph0.25707819463204806&quot;).pbtxt = 'node {\\n  name: &quot;ones&quot;\\n  op: &quot;Const&quot;\\n  attr {\\n    key: &quot;dtype&quot;\\n    value {\\n      type: DT_FLOAT\\n    }\\n  }\\n  attr {\\n    key: &quot;value&quot;\\n    value {\\n      tensor {\\n        dtype: DT_FLOAT\\n        tensor_shape {\\n        }\\n        float_val: 1.0\\n      }\\n    }\\n  }\\n}\\nnode {\\n  name: &quot;ones_1&quot;\\n  op: &quot;Const&quot;\\n  attr {\\n    key: &quot;dtype&quot;\\n    value {\\n      type: DT_FLOAT\\n    }\\n  }\\n  attr {\\n    key: &quot;value&quot;\\n    value {\\n      tensor {\\n        dtype: DT_FLOAT\\n        tensor_shape {\\n        }\\n        float_val: 1.0\\n      }\\n    }\\n  }\\n}\\nnode {\\n  name: &quot;add&quot;\\n  op: &quot;Add&quot;\\n  input: &quot;ones&quot;\\n  input: &quot;ones_1&quot;\\n  attr {\\n    key: &quot;T&quot;\\n    value {\\n      type: DT_FLOAT\\n    }\\n  }\\n}\\nnode {\\n  name: &quot;ones_2&quot;\\n  op: &quot;Const&quot;\\n  attr {\\n    key: &quot;dtype&quot;\\n    value {\\n      type: DT_FLOAT\\n    }\\n  }\\n  attr {\\n    key: &quot;value&quot;\\n    value {\\n      tensor {\\n        dtype: DT_FLOAT\\n        tensor_shape {\\n        }\\n        float_val: 1.0\\n      }\\n    }\\n  }\\n}\\nnode {\\n  name: &quot;ones_3&quot;\\n  op: &quot;Const&quot;\\n  attr {\\n    key: &quot;dtype&quot;\\n    value {\\n      type: DT_FLOAT\\n    }\\n  }\\n  attr {\\n    key: &quot;value&quot;\\n    value {\\n      tensor {\\n        dtype: DT_FLOAT\\n        tensor_shape {\\n        }\\n        float_val: 1.0\\n      }\\n    }\\n  }\\n}\\nnode {\\n  name: &quot;add_1&quot;\\n  op: &quot;Add&quot;\\n  input: &quot;ones_2&quot;\\n  input: &quot;ones_3&quot;\\n  attr {\\n    key: &quot;T&quot;\\n    value {\\n      type: DT_FLOAT\\n    }\\n  }\\n}\\n';\n",
       "          }\n",
       "        </script>\n",
       "        <link rel=&quot;import&quot; href=&quot;https://tensorboard.appspot.com/tf-graph-basic.build.html&quot; onload=load()>\n",
       "        <div style=&quot;height:600px&quot;>\n",
       "          <tf-graph-basic id=&quot;graph0.25707819463204806&quot;></tf-graph-basic>\n",
       "        </div>\n",
       "    \"></iframe>\n",
       "    "
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "import tensorflow as tf\n",
    "import numpy as np\n",
    "a = tf.ones(())\n",
    "b = tf.ones(())\n",
    "c = a + b \n",
    "show_graph()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<img src=\"graphvis.png\">"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "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.5.2"
  },
  "toc": {
   "colors": {
    "hover_highlight": "#DAA520",
    "running_highlight": "#FF0000",
    "selected_highlight": "#FFD700"
   },
   "moveMenuLeft": true,
   "nav_menu": {
    "height": "12px",
    "width": "252px"
   },
   "navigate_menu": true,
   "number_sections": true,
   "sideBar": true,
   "threshold": 4,
   "toc_cell": false,
   "toc_section_display": "block",
   "toc_window_display": false
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}