google / emoji-scavenger-hunt

Emoji Scavenger Hunt is an experiment that leverages the power of neural networks and your phone’s camera to identify the real world versions of the emojis we use every day.
https://g.co/emojiscavengerhunt
Apache License 2.0
808 stars 196 forks source link

Is it working on Android ? #22

Open inwebitrust opened 6 years ago

inwebitrust commented 6 years ago

Hi, first congrats on this amazing project !

Has anyone succeed to make it work on a Android mobile phone camera ? Or do you have any hints on what to change in the code to make it work on it ?

jbruwer commented 6 years ago

Hey thanks!

And yes, the current version works in new versions of Chrome on Android. We use some newer web APIs specifically for camera access that requires recent versions of Chrome on Android (it also works on Safari in iOS). Which version of Chrome and Android are you using where it does not work? I'll keep this open until we hear back.

Cheers

RadEdje commented 6 years ago

Hi, the emoji-scavenger hunt is not working on my android 5.0 galaxy s5 running on the latest chrome update. I asked a friend of mine with an iphoneC also with an updated safari to check it out. it also does not work. Another friend of mine though on an iphone SE got it to work just fine on safari. Would be nice to have a "supported device list" I guess? This is still great work though. More power to the team.

kfern commented 6 years ago

Same here! Android 4.4.4 & Chrome updated doesn't work.

spanic commented 6 years ago

Same, A 8.0, GC 66.0.3359. Game loads for a very long time...

jbruwer commented 6 years ago

@RadEdje @kfern Thanks for the info! Which version of Chrome are you using specifically? We are using the MediaDevices.getUserMedia() API which is supported from Chrome v53 onwards. Also if possible can you tell me which error message exactly you are seeing when you try to play? That way we can try to debug on our end.

@spanic It loads a long time but it still ends up working? Unfortunately because we are trying to showcase some newer things in tensorflow.js as a technology demo it does mean that we need to load the machine learning model completely in the browser first before you can play. This ensures that no info is sent to any servers. On slow connections it can mean that the game loads a while initially. Follow up attempts to play should be quick though.

Thanks for trying our game!

kfern commented 6 years ago

@jbruwer

Chrome 66.0.3359.126. Remote console Screenshot:

imagen

RadEdje commented 6 years ago

@jbruwer Hi, I'm currently on android 5.0 (galaxy s5) chrome 65.0.3325.109 The app says this: "It looks like your browser or device doesn't support this experiment, It's designed to work best on mobile (IOS/SAFARI or ANDROID/CHROME)".

nsthorat commented 6 years ago

@kfern looks like the fragment shader won't compile for some reason. There is probably a log of the compile error way below the source in dev tools, could you also paste that here?

kfern commented 6 years ago

@nsthorat: I can´t see more info in Source tab.

In console:

7 bool isNaN(float val) { 8 float v1 = val val; 9 float v2 = val val; 10 return v1 == v2 ? false : true; 11 } 12 Fragment shader compilation failed. 13 bool hasNaN(vec4 values) {
14 vec4 v1 = values values; 15 vec4 v2 = values values; 16 return any(notEqual(v1, v2)); 17 }

image

Can I do something else?

inwebitrust commented 6 years ago

I manage to bypass the error in Android by not using the async/await methods on the setupCamera function like this : navigator.mediaDevices.getUserMedia({ 'audio': false, 'video': {facingMode: 'environment'} }) .then(function(mediaStream) { camera.videoElement.srcObject = mediaStream; camera.videoElement.onloadedmetadata = function(e) { camera.setupVideoDimensions(camera.videoElement.videoWidth, camera.videoElement.videoHeight); }; }) .catch(function(err) { console.log(err.name + ": " + err.message); }) // always check for errors at the end.

Now my main problem is that the loadFrozenModel function takes ages on Android before it gets running : async load() { this.model = await loadFrozenModel( MODEL_FILE_URL, WEIGHT_MANIFEST_FILE_URL ); } This takes about 10s on the Android I am testing on but it's very fast on the Iphones (5/6/7) I am testing on.

My guess is that on some Android configs the async/await syntax is not well implemented yet. Is it possible to rewrite the loading of the frozenModel without async/await ?

inwebitrust commented 6 years ago

Ok I managed to bypass the loading time.

Now I have an error which looks like the "matmul" bug that was corrected in the fix-reshape branch.

The FrozenModel "execute" function fails when it does a executeOp of "Conv2d" on Android.

RadEdje commented 6 years ago

Hi, made a similar app with help from the advice from the amazing devs here and from the main tensorflow python groups (so thanks to you all). It uses the camera to look at X-rays and currently tries to categorize two types of fractures (monteggia vs galeazzi). It does not use any bundlers, builders, webpack, parcel, yarn or babel. It runs on the latest chrome, opera and firefox for desktop windows. Now I posted on my IT related fb groups and asked if it worked on their phones but forgot to ask here so here it is

https://radhorizon.com/SITES/RadLense/

Now based on my current feedback. It only runs on chrome on android 8.0 and iOS safari 11 (in theory, since only safari 11 supports webRTC). I was hoping to figure out what was keeping it from using lower versions of android even if the chrome version is up to date... chrome 66. Unfortunately chrome on android does not have dev tools unlike in chrome for desktop. Any advice? on how to debug web apps on chrome for android? The app does not fail at loading the AI model since I made it so that the splash screen only fades out to reveal the main UI when the AI model loads using an async await function that loads the model in the background. It's not the camera either since the camera feeds images to a video html tag i have (which is the one feeding the tensor to the AI/ML model at 224 x 224 pixels). Just want to see what's keeping it from predicting. I put a real time info box on the upper left hand corner of the screen which shows real time computations/predictions for monteggia versus galeazzi (seen on chrome, firefox and opera for desktop and android 8 for a samsung galaxy s8) but this info box never shows up on phones with android kitkat or android 5. Any suggestions will be much appreciated... particularly in debugging for chrome on android. Thanks.

tushuhei commented 6 years ago

You can try remote debugging with your Android phone if you haven't done yet. https://developers.google.com/web/tools/chrome-devtools/remote-debugging/

RadEdje commented 6 years ago

okay thanks @tushuhei ! will try that...

RadEdje commented 6 years ago

Hi this is regarding my AI/ML web cam web app at

https://radhorizon.com/SITES/RadLense/

which runs on android 8 but not on android 5.

so I've narrowed it down by doing the following

I wanted a more generic debugger since my s5 has numerous bugs to connect via remote debugging on chrome.

I maid a window.onerror function to catch all errors and places the errors in a

I used this function: let errors = document.getElementById("errors"); window.onerror = function (message, url, lineNo){

        console.log('Error: ' + message + '\n' + 'Line Number: ' + lineNo);

        errors.innerHTML += 'Error: ' + message + '\n' + 'Line Number: ' + lineNo;

        return true;

    };

This function returned no errors on mobile s5 android 5.0 and also no errors on desktop so I had to go manual check each function.

I placed error.innerHTML = "some message that it works up to here"; after each function i thought might be the problem. so ES6 classes work, but it finally stopped at

const predictions = model.predict(img);

where "img' is the tensor returned by the function capturing the image from the webcam and converting it into a tensor and the "model" is the loaded tf model for the browser complete with shards. This works on desktop browser but not in android 5.0.

So I've narrowed it down to the model.predict.

Any suggestions now on what I should do? to make it run on android 5.0? I don't get any errors at all.

could it be webgl on mobile?

thanks for any reply in advance.

RadEdje commented 6 years ago

update: so I tried the suggestion on this link https://github.com/tensorflow/tfjs/issues/145

seems there's a performance cliff on android 5.

tried using prediction.dispose but this crashes the app on desktop.

RadEdje commented 6 years ago

Hi, waited a while to see if any new updates to tensorflow.js would fix the issue. Currently running the latest at 0.11.7 and still does not work on android 5.0. Any suggestions? or is there a link on supported android devices and OS number? Thanks. (runs on android 8.0 only).