在 Jupyter 中可视化 TensorFlow 图不起作用
Visualizing a TensorFlow graph in Jupyter doesn't work
我看到这个 about how to visualise a tensorflow graph in Jupyter notebook. I found that this answer comes from 示例，其中只有一个修改（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('"', '"'))
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("graph0.746875762596").pbtxt = 'node {\n name: "x"\n op: "Const"\n attr {\n key: "dtype"\n value {\n type: DT_FLOAT\n }\n }\n attr {\n key: "value"\n value {\n tensor {\n dtype: DT_FLOAT\n tensor_shape {\n }\n float_val: 1.0\n }\n }\n }\n}\nnode {\n name: "y"\n op: "Const"\n attr {\n key: "dtype"\n value {\n type: DT_FLOAT\n }\n }\n attr {\n key: "value"\n value {\n tensor {\n dtype: DT_FLOAT\n tensor_shape {\n }\n float_val: 1.0\n }\n }\n }\n}\nnode {\n name: "z"\n op: "Add"\n input: "x"\n input: "y"\n attr {\n key: "T"\n value {\n type: DT_FLOAT\n }\n }\n}\n';
}
</script>
<link rel="import" href="https://tensorboard.appspot.com/tf-graph-basic.build.html" onload=load()>
<div style="height:600px">
<tf-graph-basic id="graph0.746875762596"></tf-graph-basic>
</div>
也许 " 和 '？
这是我使用的版本right now
你应该可以这样做：
失败的原因是导入 (<link rel="import" ...) 是 only supported under Chrome failing in Firefox 和 Safari，并且在 WebComponents 定义到达之前看不到被其他人采用。所以，你最好 运行 Jupyter in Chrome.
如果您反对 Chrome，有个好消息。您可以使用 Polyfill（在不支持该功能的 Web 浏览器上实现该功能的一段代码）使其工作：
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.3/platform.js"></script>
我已经在 Firefox 和 Safari 中对其进行了测试，它可以工作，但不是很完美。加载 Polypill 有点慢，图表 canvas 缩小到一英寸宽（我不知道为什么，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('"', '"'))
display(HTML(iframe))
请注意，在 code = """ 块的开头只添加了一行。它必须存在，因为 Polyfill 需要它。
可以找到原始源代码here。您可以要求他在 Google 内对其进行改进，以覆盖 Chrome 以外的其他浏览器，但我认为这不会发生。
我看到这个 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('"', '"'))
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("graph0.746875762596").pbtxt = 'node {\n name: "x"\n op: "Const"\n attr {\n key: "dtype"\n value {\n type: DT_FLOAT\n }\n }\n attr {\n key: "value"\n value {\n tensor {\n dtype: DT_FLOAT\n tensor_shape {\n }\n float_val: 1.0\n }\n }\n }\n}\nnode {\n name: "y"\n op: "Const"\n attr {\n key: "dtype"\n value {\n type: DT_FLOAT\n }\n }\n attr {\n key: "value"\n value {\n tensor {\n dtype: DT_FLOAT\n tensor_shape {\n }\n float_val: 1.0\n }\n }\n }\n}\nnode {\n name: "z"\n op: "Add"\n input: "x"\n input: "y"\n attr {\n key: "T"\n value {\n type: DT_FLOAT\n }\n }\n}\n';
}
</script>
<link rel="import" href="https://tensorboard.appspot.com/tf-graph-basic.build.html" onload=load()>
<div style="height:600px">
<tf-graph-basic id="graph0.746875762596"></tf-graph-basic>
</div>
也许 " 和 '？
这是我使用的版本right now
你应该可以这样做：
失败的原因是导入 (<link rel="import" ...) 是 only supported under Chrome failing in Firefox 和 Safari，并且在 WebComponents 定义到达之前看不到被其他人采用。所以，你最好 运行 Jupyter in Chrome.
如果您反对 Chrome，有个好消息。您可以使用 Polyfill（在不支持该功能的 Web 浏览器上实现该功能的一段代码）使其工作：
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.3/platform.js"></script>
我已经在 Firefox 和 Safari 中对其进行了测试，它可以工作，但不是很完美。加载 Polypill 有点慢，图表 canvas 缩小到一英寸宽（我不知道为什么，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('"', '"'))
display(HTML(iframe))
请注意，在 code = """ 块的开头只添加了一行。它必须存在，因为 Polyfill 需要它。
可以找到原始源代码here。您可以要求他在 Google 内对其进行改进，以覆盖 Chrome 以外的其他浏览器，但我认为这不会发生。