Skip to content
This repository was archived by the owner on Jul 7, 2023. It is now read-only.

Commit 474545a

Browse files
T2T TeamRyan Sepassi
T2T Team
authored and
Ryan Sepassi
committed
Add a minimal webserver and client side code to interactively query a tensor2tensor model
PiperOrigin-RevId: 179505632
1 parent 254bdfc commit 474545a

26 files changed

+4150
-0
lines changed

‎tensor2tensor/insights/__init__.py

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# coding=utf-8
2+
# Copyright 2017 The Tensor2Tensor Authors.
3+
#
4+
# Licensed under the Apache License, Version 2.0 (the "License");
5+
# you may not use this file except in compliance with the License.
6+
# You may obtain a copy of the License at
7+
#
8+
# http://www.apache.org/licenses/LICENSE-2.0
9+
#
10+
# Unless required by applicable law or agreed to in writing, software
11+
# distributed under the License is distributed on an "AS IS" BASIS,
12+
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
# See the License for the specific language governing permissions and
14+
# limitations under the License.
15+

‎tensor2tensor/insights/graph.py

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
# coding=utf-8
2+
# Copyright 2017 The Tensor2Tensor Authors.
3+
#
4+
# Licensed under the Apache License, Version 2.0 (the "License");
5+
# you may not use this file except in compliance with the License.
6+
# You may obtain a copy of the License at
7+
#
8+
# http://www.apache.org/licenses/LICENSE-2.0
9+
#
10+
# Unless required by applicable law or agreed to in writing, software
11+
# distributed under the License is distributed on an "AS IS" BASIS,
12+
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
# See the License for the specific language governing permissions and
14+
# limitations under the License.
15+
16+
"""Graph representation for building decoding graph visualizations."""
17+
18+
19+
class Vertex(object):
20+
"""Vertex stores in and out edge connections to other Vertex instances.
21+
22+
The Vertex class supports serialization to a JSON data format expected by the
23+
client side representation. When serializing, it generates the following
24+
fields:
25+
in_edge_index: The list of directed edge indices into the Vertex.
26+
out_edge_index: The list of directed edge indices from the Vertex.
27+
"""
28+
29+
def __init__(self, idx):
30+
"""Initialize the Vertex.
31+
32+
Args:
33+
idx: The index of the vertex.
34+
"""
35+
self.idx = idx
36+
self.in_edges = []
37+
self.out_edges = []
38+
39+
def to_dict(self):
40+
"""Returns a simplified dictionary representing the Vertex.
41+
42+
Returns:
43+
A dictionary that can easily be serialized to JSON.
44+
"""
45+
return {
46+
"in_edge_index": self.in_edges,
47+
"out_edge_index": self.out_edges,
48+
}
49+
50+
51+
class Edge(object):
52+
"""Edge stores edge details connecting two Vertex instances.
53+
54+
The Edge class supports serialization to a JSON data format expected by the
55+
client side representation. When serializing, it generates the following
56+
fields:
57+
source_index: The source Vertex index for this Edge.
58+
target_index: The target Vertex index for this Edge.
59+
data: Arbitrary data for this Edge.
60+
"""
61+
62+
def __init__(self, idx):
63+
"""Initialize the Edge.
64+
65+
Args:
66+
idx: The index of the Edge.
67+
"""
68+
self.idx = idx
69+
self.source = -1
70+
self.target = -1
71+
self.data = {}
72+
73+
def to_dict(self):
74+
"""Returns a simplified dictionary representing the Vertex.
75+
76+
Returns:
77+
A dictionary that can easily be serialized to JSON.
78+
"""
79+
return {
80+
"source_index": self.source,
81+
"target_index": self.target,
82+
"data": self.data,
83+
}
84+
85+
def __str__(self):
86+
return str(self.to_dict())
87+
88+
89+
class Graph(object):
90+
"""A directed graph that can easily be JSON serialized for visualization.
91+
92+
When serializing, it generates the following fields:
93+
edge: The list of all serialized Edge instances.
94+
node: The list of all serialized Vertex instances.
95+
"""
96+
97+
def __init__(self):
98+
self.vertices = []
99+
self.edges = []
100+
self.vertex_map = {}
101+
102+
def new_vertex(self):
103+
"""Creates and returns a new vertex.
104+
105+
Returns:
106+
A new Vertex instance with a unique index.
107+
"""
108+
vertex = Vertex(len(self.vertices))
109+
self.vertices.append(vertex)
110+
return vertex
111+
112+
def get_vertex(self, key):
113+
"""Returns or Creates a Vertex mapped by key.
114+
115+
Args:
116+
key: A string reference for a vertex. May refer to a new Vertex in which
117+
case it will be created.
118+
119+
Returns:
120+
A the Vertex mapped to by key.
121+
"""
122+
if key in self.vertex_map:
123+
return self.vertex_map[key]
124+
vertex = self.new_vertex()
125+
self.vertex_map[key] = vertex
126+
return vertex
127+
128+
def add_edge(self, source, target):
129+
"""Returns a new edge connecting source and target vertices.
130+
131+
Args:
132+
source: The source Vertex.
133+
target: The target Vertex.
134+
135+
Returns:
136+
A new Edge linking source to target.
137+
"""
138+
edge = Edge(len(self.edges))
139+
self.edges.append(edge)
140+
source.out_edges.append(edge.idx)
141+
target.in_edges.append(edge.idx)
142+
edge.source = source.idx
143+
edge.target = target.idx
144+
return edge
145+
146+
def to_dict(self):
147+
"""Returns a simplified dictionary representing the Graph.
148+
149+
Returns:
150+
A dictionary that can easily be serialized to JSON.
151+
"""
152+
return {
153+
"node": [v.to_dict() for v in self.vertices],
154+
"edge": [e.to_dict() for e in self.edges]
155+
}

‎tensor2tensor/insights/index.html

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<!doctype html>
2+
<!--
3+
@license
4+
Copyright 2017 The Tensor2Tensor Authors.
5+
6+
Licensed under the Apache License, Version 2.0 (the "License");
7+
you may not use this file except in compliance with the License.
8+
You may obtain a copy of the License at
9+
10+
http://www.apache.org/licenses/LICENSE-2.0
11+
12+
Unless required by applicable law or agreed to in writing, software
13+
distributed under the License is distributed on an "AS IS" BASIS,
14+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15+
See the License for the specific language governing permissions and
16+
limitations under the License.
17+
-->
18+
<html>
19+
<head>
20+
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=no">
21+
<meta name="mobile-web-app-capable" content="yes">
22+
<meta name="apple-mobile-web-app-capable" content="yes">
23+
<meta name="apple-touch-fullscreen" content="yes">
24+
<meta name="apple-mobile-web-app-status-bar-style"
25+
content="black-translucent" >
26+
<meta name="format-detection" content="telephone=no">
27+
28+
<title>NMT Research Frontend</title>
29+
<meta name="description" content="Debug your favorite Neural Machine Translation model">
30+
<meta name="application-name" content="NMT Research Frontend">
31+
32+
<meta property="og:title" content="Get started debugging">
33+
<meta property="og:type" content="article">
34+
<meta property="og:description" content="Link up to an NMT Service and find out what's going on with it.">
35+
36+
<link class="favicon" href="//ssl.gstatic.com/translate/translate_1x_web_logo_24dp.png" rel="icon">
37+
<link async href="https://fonts.googleapis.com/css?family=Product+Sans" rel="stylesheet">
38+
39+
<script async type="text/javascript" src="/static/insights_frontend_polymer/webcomponentsjs/webcomponents-lite.js"></script>
40+
41+
<link rel="import" href="/static/insights_frontend_polymer/insights_frontend_polymer.html">
42+
43+
<style>
44+
html, body {
45+
height: 100%;
46+
width: 100%;
47+
-webkit-tap-highlight-color: rgba(0,0,0,0);
48+
}
49+
50+
body {
51+
margin: 0;
52+
background-color: #eee;
53+
background-repeat: no-repeat;
54+
background-position: 50%;
55+
font-family: "RobotoDraft", sans-serif;
56+
color: #444;
57+
fill: #444;
58+
font-weight: 400;
59+
}
60+
</style>
61+
</head>
62+
<body class="fullbleed">
63+
<insights-app id="app"></insights-app>
64+
65+
<script type="text/javascript">
66+
// Once webcomponents are fully initialized, assign any initial values to
67+
// the main scaffolding element.
68+
document.addEventListener('WebComponentsReady', function() {
69+
var app = document.querySelector('#app');
70+
});
71+
</script>
72+
</body>
73+
</html>

‎tensor2tensor/insights/polymer/attention_visualization/attention-visualization.html

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
<!--
2+
@license
3+
Copyright 2017 The Tensor2Tensor Authors.
4+
5+
Licensed under the Apache License, Version 2.0 (the "License");
6+
you may not use this file except in compliance with the License.
7+
You may obtain a copy of the License at
8+
9+
http://www.apache.org/licenses/LICENSE-2.0
10+
11+
Unless required by applicable law or agreed to in writing, software
12+
distributed under the License is distributed on an "AS IS" BASIS,
13+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
See the License for the specific language governing permissions and
15+
limitations under the License.
16+
-->
17+
18+
<link rel="import" href="../polymer/polymer.html">
19+
20+
<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
21+
<link rel="import" href="../iron-icon/iron-icon.html">
22+
<link rel="import" href="../iron-icons/iron-icons.html">
23+
24+
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
25+
<link rel="import" href="../paper-slider/paper-slider.html">
26+
27+
<dom-module id="attention-visualization">
28+
<template>
29+
<custom-style>
30+
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
31+
</custom-style>
32+
<style>
33+
.background {
34+
fill: #eee;
35+
}
36+
37+
svg *::selection {
38+
background: transparent;
39+
}
40+
41+
rect.selection {
42+
fill: transparent;
43+
stroke: #333;
44+
stroke-dasharray: 4px;
45+
stroke-opacity: 0.5;
46+
}
47+
48+
rect.cell-border {
49+
stroke: #eee;
50+
stroke-width: 0.3px;
51+
}
52+
53+
rect.cell-selected {
54+
stroke: rgb(51, 102, 153);
55+
stroke-width: 0.5px;
56+
}
57+
58+
g.cell-group {
59+
pointer-events: all;
60+
}
61+
62+
g.cell-hover rect {
63+
stroke: #f00;
64+
stroke-width: 1px;
65+
}
66+
67+
text.mono {
68+
fill: #aaa;
69+
}
70+
71+
text.text-highlight {
72+
fill: #c00;
73+
}
74+
75+
text.weight-label {
76+
fill: #ffffff;
77+
font-size: 16px;
78+
stroke: #ffffff;
79+
}
80+
81+
text.text-selected {
82+
fill: #000;
83+
}
84+
85+
.svg-container {
86+
display: inline-block;
87+
overflow: hidden;
88+
padding-bottom: 100%;
89+
position: relative;
90+
vertical-align: top;
91+
width: 100%;
92+
}
93+
94+
.svg-content-responsive {
95+
display: inline-block;
96+
left: 0px;
97+
position: absolute;
98+
top: 10px;
99+
}
100+
101+
#tooltip {
102+
background-color: white;
103+
border-radius: 10px;
104+
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
105+
height: auto;
106+
padding: 10px;
107+
pointer-events: none;
108+
position: absolute;
109+
width: auto;
110+
z-index: 10;
111+
}
112+
113+
#tooltip.hidden {
114+
display: none;
115+
}
116+
117+
</style>
118+
<div class="layout horizontal">
119+
<paper-icon-button id="home" on-tap="reset_" icon=home></paper-icon-button>
120+
<paper-slider id="slider" min=0 max=100 value="{{zoomDepth_}}"></paper-slider>
121+
</div>
122+
<div id="tooltip" class="hidden">
123+
<span>{{selectedProbability}}<span>
124+
</div>
125+
126+
<div id="chart">
127+
</div>
128+
</template>
129+
<script src="attention-visualization.js"></script>
130+
</dom-module>

0 commit comments

Comments
 (0)