Визуализация графика TensorFlow в Jupyter не работает

Question

Я видел это question о том, как визуализировать график тензорного потока в ноутбуке Jupyter. Я нашел, что этот ответ исходит от this пример с одной модификацией (tensor.tensor_content = bytes("<stripped %d bytes>"%size, 'utf-8') заменен на tensor.tensor_content = "<stripped %d bytes>"%size). Однако, если я попытаюсь перезапустить его на tensorflow_inception_graph.pb, визуализация не будет работать: iframe белый и нет отображаемых узлов.

Я был бы очень признателен, если вы объясните мне, что я делаю неправильно. Здесь есть простой пример, чтобы воспроизвести проблему.

Импорт:

%matplotlib inline 
%config InlineBackend.figure_format = 'retina' 

import tensorflow as tf 
import numpy as np 

from IPython.display import clear_output, Image, display, HTML 

Создать график:

graph = tf.Graph() 
sess = tf.InteractiveSession(graph=graph) 

x = tf.placeholder(tf.float32, shape=[None, 25, 25, 3], name='x') 
y_true = tf.placeholder(tf.float32, shape=[None, 10], name='y_true') 
y_true_cls = tf.argmax(y_true, dimension=1, name='y_true_cls') 

print graph.get_operations() 

Выход:

[<tensorflow.python.framework.ops.Operation at 0x115902850>, 
<tensorflow.python.framework.ops.Operation at 0x115902690>, 
<tensorflow.python.framework.ops.Operation at 0x115902b10>, 
<tensorflow.python.framework.ops.Operation at 0x1159029d0>] 

визуализации функции:

def strip_consts(graph_def, max_const_size=32): 
    """Strip large constant values from graph_def.""" 
    strip_def = tf.GraphDef() 
    for n0 in graph_def.node: 
     n = strip_def.node.add() 
     n.MergeFrom(n0) 
     if n.op == 'Const': 
      tensor = n.attr['value'].tensor 
      size = len(tensor.tensor_content) 
      if size > max_const_size: 
       tensor.tensor_content = bytes("<stripped %d bytes>"%size, "utf-8") 
    return strip_def 

def show_graph(graph_def, max_const_size=32): 
    """Visualize TensorFlow graph.""" 
    if hasattr(graph_def, 'as_graph_def'): 
     graph_def = graph_def.as_graph_def() 
    strip_def = strip_consts(graph_def, max_const_size=max_const_size) 
    code = """ 
     <script> 
      function load() {{ 
      document.getElementById("{id}").pbtxt = {data}; 
      }} 
     </script> 
     <link rel="import" href="https://tensorboard.appspot.com/tf-graph-basic.build.html" onload=load()> 
     <div style="height:600px"> 
      <tf-graph-basic id="{id}"></tf-graph-basic> 
     </div> 
    """.format(data=repr(str(strip_def)), id='graph'+str(np.random.rand())) 

    iframe = """ 
     <iframe seamless style="width:1200px;height:620px;border:0" srcdoc="{}"></iframe> 
    """.format(code.replace('"', '&quot;')) 
    display(HTML(iframe)) 

Результат:

UPD Я попробовал простой пример:

tf.reset_default_graph() 
x = tf.ones((), name="x") 
y = tf.ones((), name="y") 
z = tf.add(x, y, name="z") 
show_graph() 

Но она по-прежнему не работает. Я подозреваю, что проблема связана с JavaScript/HTML код, который генерируется:

<script> 
     function load() { 
     document.getElementById(&quot;graph0.746875762596&quot;).pbtxt = 'node {\n name: &quot;x&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;y&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;z&quot;\n op: &quot;Add&quot;\n input: &quot;x&quot;\n input: &quot;y&quot;\n attr {\n key: &quot;T&quot;\n value {\n  type: DT_FLOAT\n }\n }\n}\n'; 
     } 
    </script> 
    <link rel=&quot;import&quot; href=&quot;https://tensorboard.appspot.com/tf-graph-basic.build.html&quot; onload=load()> 
    <div style=&quot;height:600px&quot;> 
     <tf-graph-basic id=&quot;graph0.746875762596&quot;></tf-graph-basic> 
    </div> 

Может быть что-то с &quot и '?

Answer 1

Причиной отказа является импорт (<link rel="import" ...) являются only supported under Chrome неудачу в Firefox и Safari, и нет никакого зрелища, которое будет принято другими, пока не появится определение WebComponents. Итак, вы должны запустить Jupyter в Chrome.

Если вы против Chrome, есть хорошие новости. Вы можете использовать Polyfill (кусок кода, который реализует функцию на веб-браузеров, которые не поддерживают эту функцию), чтобы сделать его работу:

<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.3/platform.js"></script> 

Я проверил это в Firefox и Safari, и она работает, но не совсем прекрасно. Это немного медленнее, чтобы загрузить Polypill, и холст графика уменьшен до одного дюйма в ширину (я не знаю, почему, внутренности TensorBoard). Затем я понял, что platform.js был deprecated, но новые реализации включают новые ошибки (необработанные события и разбор XML).

Ниже приводится модифицированный код:

# TensorFlow Graph visualizer code 
import numpy as np 
from IPython.display import clear_output, Image, display, HTML 

def strip_consts(graph_def, max_const_size=32): 
    """Strip large constant values from graph_def.""" 
    strip_def = tf.GraphDef() 
    for n0 in graph_def.node: 
     n = strip_def.node.add() 
     n.MergeFrom(n0) 
     if n.op == 'Const': 
      tensor = n.attr['value'].tensor 
      size = len(tensor.tensor_content) 
      if size > max_const_size: 
       tensor.tensor_content = "<stripped %d bytes>"%size 
    return strip_def 

def show_graph(graph_def, max_const_size=32): 
    """Visualize TensorFlow graph.""" 
    if hasattr(graph_def, 'as_graph_def'): 
     graph_def = graph_def.as_graph_def() 
    strip_def = strip_consts(graph_def, max_const_size=max_const_size) 
    code = """ 
     <script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.3/platform.js"></script> 
     <script> 
      function load() {{ 
      document.getElementById("{id}").pbtxt = {data}; 
      }} 
     </script> 
     <link rel="import" href="https://tensorboard.appspot.com/tf-graph-basic.build.html" onload=load()> 
     <div style="height:600px"> 
      <tf-graph-basic id="{id}"></tf-graph-basic> 
     </div> 
    """.format(data=repr(str(strip_def)), id='graph'+str(np.random.rand())) 

    iframe = """ 
     <iframe seamless style="width:1200px;height:620px;border:0" srcdoc="{}"></iframe> 
    """.format(code.replace('"', '&quot;')) 
    display(HTML(iframe)) 

Обратите внимание, есть только добавил одну строку в начале code = """ блока. Он должен быть там, потому что это требуется Polyfill.

Оригинальный исходный код можно найти here. Вы можете попросить его развить его в Google, чтобы охватить другие браузеры, чем Chrome, но я не думаю, что это произойдет.

Answer 2

Вот версия Я использую right now

Вы должны быть в состоянии сделать что-то вроде этого: