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


Я видел этот Вопрос о том, как визуализировать график тензорного потока в блокноте Jupyter. Я обнаружил, что этот ответ исходит из этого примера с только одной модификацией в (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_FLOATn    }n  }n  attr {n    key: &quot;value&quot;n    value {n      tensor {n        dtype: DT_FLOATn        tensor_shape {n        }n        float_val: 1.0n      }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_FLOATn    }n  }n  attr {n    key: &quot;value&quot;n    value {n      tensor {n        dtype: DT_FLOATn        tensor_shape {n        }n        float_val: 1.0n      }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_FLOATn    }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 и '?

2 3

2 ответа:

Причина сбоя заключается в том, что импорт (<link rel="import" ...) поддерживается только в Chrome , а не в[8]}Firefox и Safari, и нет никакого вида, который будет принят другими, пока не придет определение Вебкомпонентов. Так что вам лучше запустить Jupyter в Хроме.

Если вы против Chrome, есть хорошие новости. Вы можете использовать Polyfill (фрагмент кода, реализующий функцию в веб-браузерах, которые не поддерживают эту функцию), чтобы заставить ее работать:
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.3/platform.js"></script>

Я протестировал его в Firefox и сафари, и это работает,но не идеально. Это немного медленнее, чтобы загрузить Полипилл, и холст графика уменьшается до одного дюйма в ширину (я не знаю, почему, внутренние части тензорной доски). Затем я понял, что platform.js былустаревшим , но новые реализации включают новые ошибки (необработанные события и синтаксический анализ 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 = """ добавлена только одна строка. Он должен быть там, потому что это необходимо Кстати, о Полифиле.

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

Вот версия, которую я использую прямо сейчас

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

Введите описание изображения здесь