Tensorflow.js: WebGL context lost when concatenating tensors - webgl

Question

I'm playing around with tensorflow.js Transfer learning tutorial/guide source code and getting following error when concatenating two tensors:
Couldn't parse line number in error: tfjs#0.13.0:2
precision highp float; tfjs#0.13.0:2
precision highp int;
varying vec2 resultUV;
const vec2 halfCR = vec2(0.5, 0.5);
struct ivec5
{
int x;
int y;
int z;
int w;
int u;
};
struct ivec6
{
int x;
int y;
int z;
int w;
int u;
int v;
};
bool isNaN(float val) {
return (val < 0.0 || 0.0 < val || val == 0.0) ? false : true;
}
bool hasNaN(vec4 values) {
vec4 v1 = values * values;
vec4 v2 = values * values;
return any(notEqual(v1, v2));
}
float getNaN(vec4 values) {
return dot(vec4(1), values);
}
int round(float value) {
return int(floor(value + 0.5));
}
int imod(int x, int y) {
return x - y * (x / y);
}
//Based on the work of Dave Hoskins
//https://www.shadertoy.com/view/4djSRW
#define HASHSCALE1 443.8975
float random(float seed){
vec2 p = resultUV * seed;
vec3 p3 = fract(vec3(p.xyx) * HASHSCALE1);
p3 += dot(p3, p3.yzx + 19.19);
return fract((p3.x + p3.y) * p3.z);
}
vec2 UVfrom1D(int texNumR, int texNumC, int index) {
int texR = index / texNumC;
int texC = index - texR * texNumC;
return (vec2(texC, texR) + halfCR) / vec2(texNumC, texNumR);
}
vec2 UVfrom2D(int texNumR, int texNumC, int numC, int row, int col) {
int index = row * numC + col;
int texR = index / texNumC;
int texC = index - texR * texNumC;
return (vec2(texC, texR) + halfCR) / vec2(texNumC, texNumR);
}
vec2 UVfrom3D(int texNumR, int texNumC, int stride0,
int stride1, int row, int col, int depth) {
// Explicitly use integer operations as dot() only works on floats.
int index = row * stride0 + col * stride1 + depth;
int texR = index / texNumC;
int texC = index - texR * texNumC;
return (vec2(texC, texR) + halfCR) / vec2(texNumC, texNumR);
}
vec2 UVfrom4D(int texNumR, int texNumC, int stride0,
int stride1, int stride2, int row, int col, int depth,
int depth2) {
// Explicitly use integer operations as dot() only works on floats.
int index = row * stride0 + col * stride1 + depth * stride2 + depth2;
int texR = index / texNumC;
int texC = index - texR * texNumC;
return (vec2(texC, texR) + halfCR) / vec2(texNumC, texNumR);
}
vec2 UVfrom5D(int texNumR, int texNumC, int stride0,
int stride1, int stride2, int stride3, int row, int col, int depth,
int depth2, int depth3) {
// Explicitly use integer operations as dot() only works on floats.
int index = row * stride0 + col * stride1 +
depth * stride2 + depth2 * stride3 + depth3;
int texR = index / texNumC;
int texC = index - texR * texNumC;
return (vec2(texC, texR) + halfCR) / vec2(texNumC, texNumR);
}
vec2 UVfrom6D(int texNumR, int texNumC, int stride0,
int stride1, int stride2, int stride3, int stride4,
int row, int col, int depth, int depth2, int depth3, int depth4) {
// Explicitly use integer operations as dot() only works on floats.
int index = row * stride0 + col * stride1 + depth * stride2 + depth2 *
stride3 + depth3 * stride4 + depth4;
int texR = index / texNumC;
int texC = index - texR * texNumC;
return (vec2(texC, texR) + halfCR) / vec2(texNumC, texNumR);
}
float sampleTexture(sampler2D textureSampler, vec2 uv) {
return texture2D(textureSampler, uv).r;
}
void setOutput(float val) {
gl_FragColor = vec4(val, 0, 0, 0);
}
uniform sampler2D A;
uniform sampler2D B;
ivec2 getOutputCoords() {
ivec2 resTexRC = ivec2(resultUV.yx *
vec2(1984, 2352));
int index = resTexRC.x * 2352 + resTexRC.y;
return ivec2(0, index);
}
float getAFlat(int index) {
vec2 uv = UVfrom1D(1792, 2597, index);
return sampleTexture(A, uv);
}
float getA(int index) {
return getAFlat(index);
}
float getA(int row, int col) {
return getA(col);
}
float getBFlat(int index) {
vec2 uv = UVfrom1D(7, 1792, index);
return sampleTexture(B, uv);
}
float getB(int index) {
return getBFlat(index);
}
float getB(int row, int col) {
return getB(col);
}
void main() {
ivec2 coords = getOutputCoords();
int yR = coords.x;
int yC = coords.y;
float value = 0.0;
if (yC < 4653824) {
value = getA(yR, yC);
} else {
yC -= 4653824;
value = getB(yR, yC);
}
setOutput(value);
}
Uncaught Error: Failed to compile fragment shader.
at createFragmentShader (tfjs#0.13.0:2)
at e.createProgram (tfjs#0.13.0:2)
at compileProgram (tfjs#0.13.0:2)
at tfjs#0.13.0:2
at e.getAndSaveBinary (tfjs#0.13.0:2)
at e.compileAndRun (tfjs#0.13.0:2)
at e.concat2Tensors (tfjs#0.13.0:2)
at e.concat (tfjs#0.13.0:2)
at tfjs#0.13.0:2
at tfjs#0.13.0:2
WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost
Uncaught Error: Unable to create fragment WebGLShader.
at throwIfNull (tfjs#0.13.0:2)
at createFragmentShader (tfjs#0.13.0:2)
at e.createProgram (tfjs#0.13.0:2)
at compileProgram (tfjs#0.13.0:2)
at tfjs#0.13.0:2
at e.getAndSaveBinary (tfjs#0.13.0:2)
at e.compileAndRun (tfjs#0.13.0:2)
at e.concat2Tensors (tfjs#0.13.0:2)
at e.concat (tfjs#0.13.0:2)
at tfjs#0.13.0:2
I'm creating an application which takes audiosignal in through laptop mic input and associates signal frequencies to images captured from laptops webcam stream. I'm feeding electric guitar signal to mic input to control frequency by hand and I have Web audio API ScriptProcessorNodes onaudioprocess function for catching frequency data.
When frequency is clear enough image is captured from webcam stream and then transformed into tensor with tf.fromPixels method and passed through truncated mobilenet model to get internal activations for later use. On a first round internal activations from truncated model are saved into a variable and after first time new internal activations are concatenated to previous activation with concat() method. All this is happening many times per second if the input signal frequency is steady and clear. This works fine some time but after the concatenated tensor has reached size of 4678912 program crashes and produces error detailed above. I'm not sure if tensor size is crucial here.
I'm running the application in the Chrome browser.
Here is the concatenating function which causes the error I suppose :
addExample(example, label) {
// One-hot encode the label.
const y = tf.tidy(() => tf.oneHot(tf.tensor1d([label]).toInt(), this.numClasses));
if (this.xs == null) {
// For the first example that gets added, keep example and y so that the
// ControllerDataset owns the memory of the inputs. This makes sure that
// if addExample() is called in a tf.tidy(), these Tensors will not get
// disposed.
this.xs = tf.keep(example);
this.ys = tf.keep(y);
} else {
const oldX = this.xs;
this.xs = tf.keep(oldX.concat(example, 0));
const oldY = this.ys;
this.ys = tf.keep(oldY.concat(y, 0));
oldX.dispose();
oldY.dispose();
y.dispose();
}
}
And here is the concatenated tensor just before crash:
e {isDisposedInternal: false, shape: Array(4), dtype: "float32", size:
4678912, strides: Array(3), …}
dataId: {}
dtype: "float32"
id: 117079
isDisposed: (...)
isDisposedInternal: false
rank: (...)
rankType: "4"
shape: Array(4)
0: 373
1: 7
2: 7
3: 256
length: 4
__proto__: Array(0)
size: 4678912
strides: Array(3)
0: 12544
1: 1792
2: 256
length: 3
__proto__: Array(0)
__proto__: Object
The error appears also when I try original demo (Pacman-game) and add 300-400 examples to one of the four controllers. Basic logic in my application is the the same as in original demo. What differs is the number of classes (48 classes representing different note frequencies from electric guitar) and the way the examples are added in ScriptProcessorNode. Also the volume of needed examples is much bigger.
I don't know where to start to digging into the error. My webGL knowledge is 0. Any help is appreciated.