Model prediction works with Node.js but not in the browser

[micah price]

Hi all,

I trained a model with Keras to generate shoes/sneakers, and now I'm performing the prediction using TF.js.
It works perfectly in a Node environment (v10.10), but not in Chrome (v70.0.3538.102, Mac OS X 10.13.0)

Before I get to the error message (it's a big one), I just want to note where the error occurs (on the model prediction):

// Generate images
console.log('generating images')
let generated_images = model.predict(noise_tensor) //error here
generated_images.print(true)

The exact same code works on Node.js. If it's helpful, I created a simple repo with both versions that you can run here.

Ok, here's the error it's getting in the browser:

Couldn't parse line number in error:
webgl_util.ts:134
  precision highp float;
  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 < 1.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 packedUVfrom1D(int texNumR, int texNumC, int index) {
  int texelIndex = index / 2;
  int texR = texelIndex / texNumC;
  int texC = texelIndex - 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 packedUVfrom2D(int texelsInLogicalRow, int texNumR,
  int texNumC, int row, int col) {
  int texelIndex = (row / 2) * texelsInLogicalRow + (col / 2);
  int texR = texelIndex / texNumC;
  int texC = texelIndex - 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 packedUVfrom4D(int texNumR, int texNumC, int texelsInBatch2,
    int texelsInBatch, int texelsInLogicalRow, int b2, int b,
    int row, int col) {
  int index = b2 * texelsInBatch2 + b * texelsInBatch +
    (row / 2) * texelsInLogicalRow + (col / 2);
  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;


    ivec4 getOutputCoords() {
      ivec2 resTexRC = ivec2(resultUV.yx *
        vec2(4096, 8192));
      int index = resTexRC.x * 8192 + resTexRC.y;


      int r = index / 1048576;
      index -= r * 1048576;


      int c = index / 8192;
      index -= c * 8192;


      int d = index / 64;
      int d2 = index - d * 64;


      return ivec4(r, c, d, d2);
    }
 


    float getAFlat(int index) {
      vec2 uv = UVfrom1D(4096, 8192, index);
      return sampleTexture(A, uv);
    }
 
    float getA(int row, int col, int depth, int depth2) {
      vec2 uv = UVfrom4D(4096, 8192, 1048576, 8192,
          64, row, col, depth, depth2);
      return sampleTexture(A, uv);
    }
 
      float getAAtOutCoords() {
        return sampleTexture(A, resultUV);
      }
   


      float getBFlat(int index) {
        vec2 uv = vec2(0.5, (float(index) + 0.5) / 64.0);
        return sampleTexture(B, uv);
      }
   
     
    float getB(int index) {
      return getBFlat(index);
    }
 
      float getB(int row, int col, int depth, int depth2) {
        return getB(depth2);
      }
   
    float getBAtOutCoords() {
      ivec2 resTexRC = ivec2(resultUV.yx *
                             vec2(4096, 8192));
      int index = resTexRC.x * 8192 + resTexRC.y;
     
        int mainPart = index / 64;
        index -= mainPart * 64;
     
      int texR = index / 1;
      int texC = index - texR * 1;
      vec2 uv = (vec2(texC, texR) + halfCR) /
                 vec2(1.0, 64.0);


      return sampleTexture(B, uv);
    }
 


      uniform float NAN;
      float binaryOperation(float a, float b) {
        return a + b;
      }


      void main() {
        float a = getAAtOutCoords();
        float b = getBAtOutCoords();
        setOutput(binaryOperation(a, b));
      }
   
index.html:1 WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost
webgl_util.ts:123 Uncaught (in promise) Error: Failed to compile fragment shader.
    at createFragmentShader (webgl_util.ts:123)
    at e.createProgram (gpgpu_context.ts:278)
    at compileProgram (gpgpu_math.ts:76)
    at backend_webgl.ts:1720
    at e.getAndSaveBinary (backend_webgl.ts:1753)
    at e.compileAndRun (backend_webgl.ts:1719)
    at e.add (backend_webgl.ts:1075)
    at ENV.engine.runKernel.$a (binary_ops.ts:82)
    at engine.ts:197
    at e.scopedRun (engine.ts:168)

Any help would be much appreciated. Let me know if there's anything I can do or clarify.

Thanks all

[Dirk Toewe]

Hi Micah,

the error message looks like a bug in the WebGL backend to me but that's for the Devs/Official side to decide. TFJS in Node afaik does not support WebGL by default. That's the reason why it works there. As a workaround, You can use `tf.setBackend('cpu')`.

Hope this helps
Dirk

--
You received this message because you are subscribed to the Google Groups "TensorFlow.js Discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tfjs+uns...@tensorflow.org.
Visit this group at https://groups.google.com/a/tensorflow.org/group/tfjs/.
To view this discussion on the web visit https://groups.google.com/a/tensorflow.org/d/msgid/tfjs/f38ac8db-fbd6-4c19-ae77-eddffb27f874%40tensorflow.org.

[micah price]

Oops, I sent a private email to Dirk by accident.

His solution works perfectly.

Thanks Dirk.