Unable to load tensorflowJS model in chrome extension - google-chrome

I am trying to load a trained keras model into web browser using tensorflowjs.
I was able to convert the keras model to tensorflowjs model but unable to load model in chrome extension.
My background.js code to load model
async function app() {
alert('Loading model..');
model = await loadModel("model.json");
alert('Sucessfully loaded model');
}
chrome.runtime.onInstalled.addListener(function(details) {
alert("extension loaded");
chrome.tabs.executeScript(null,
{file:"https://cdn.jsdelivr.net/npm/#tensorflow/tfjs#1.0.0/dist/tf.min.js"});
app();
});
THe url "https://cdn.jsdelivr.net/npm/#tensorflow/tfjs#1.0.0/dist/tf.min.js" is added in permissions key in manifest file.
When i try to laod the extension it fails givind message loadModel is not defined.
Any suggestions on fixing this issue?

loadModel is not defined.
1 - Make sure that the script is loaded in the background process of the tabs
2 - You need to use tf.loadModel() instead of loadModel()

Related

Markups Core enterEditMode() returning false

function newMarkupGUI(viewer, options) {
Autodesk.Viewing.Extension.call(this, viewer, options);
thisViewerId = options.id;
this.viewer.loadExtension("Autodesk.Viewing.MarkupsCore").then(() => {
let extension = this.viewer.getExtension("Autodesk.Viewing.MarkupsCore");
extension.enterEditMode();
console.log(extension.enterEditMode());
});
}
When I am inside my main js file where I initialize the viewer, I am able to access functions such as enterEditMode() like so:
var extension = viewer.getExtension("Autodesk.Viewing.MarkupsCore");
extension.enterEditMode();
This works. But inside my extension called newMarkupsGUI, it seems getExtension() does not work. I am confused about how this all works, as the documentation is pretty sparse. I would rather keep my extension separate and not hard code the functionality of markups where I am initializing the viewer. Any help would be appreciated, thank you.
I think your problem is related to the viewer reference. You don't need to use this.viewer if you have your viewer as function parameter.
When using viewer.loadExtension().then() the loaded extension is returned in the promise.
You can do something like that :
viewer.loadExtension("Autodesk.Viewing.MarkupsCore").then((markupExtension) =>
{
markupExtension.enterEditMode();
});

OBJECT_TREE_CREATED_EVENT in Viewer v7

"Autodesk.Viewing.OBJECT_TREE_CREATED_EVENT" was working with viewer version 6, but when I upgrade viewer version to 7.*, its not working.
I have tried to handle "Autodesk.Viewing.GEOMETRY_LOADED_EVENT", and then call the model.getObjectTree() function, but I get the following error
{instanceTree: null, maxTreeDepth: 0, err: undefined}
How can I handle the object_tree_created event for viewer 7 in my code?
Obviously the model database (which contains object tree data) failed to load (and hence the object tree event was not fired and the object tree was not accessible) and it could have been for incorrect code or networking. Did you get other errors especially network interruptions in your browser's dev tools when loading the model? What is your code to load the model? If loading from Forge did you follow the migration guide and here to use loadDocumentNode?
Autodesk.Viewing.Initializer({ env: 'AutodeskProduction', getAccessToken}, () => {
const viewer = new Autodesk.Viewing.GuiViewer3D(container);
Autodesk.Viewing.Document.load(urn, viewerDocument =>{
var defaultModel = viewerDocument.getRoot().getDefaultGeometry();
viewer.loadDocumentNode(viewerDocument, defaultModel);

Forge viewer version 6.3.4 doesn't show newly released document browser extension

I upgraded the forge viewer version of my solution to 6.* to utilize the latest released feature "Document browser extension" as it mentions here
This extension doesn't appear for me, please help.
I got it to work after some experimenting.
Here is my workflow in case you still need it.
First, initialize the viewer:
// initialize the viewer
Autodesk.Viewing.Initializer(adOptions, () => {
// when initialized, call loading function
this.loadDocument(encodedUrn);
});
Then, load your document in the function called above:
// load the document from the urn
Autodesk.Viewing.Document.load(
encodedUrn,
this.onDocumentLoadSuccess,
this.onDocumentLoadFailure,
);
In the success callback you can now do the following:
onDocumentLoadSuccess(doc) {
// get the geometries of the document
const geometries = doc.getRoot().search({ type: 'geometry' });
// Choose any of the available geometries
const initGeom = geometries[0];
// and prepare config for the viewer application
const config = {
extensions: ['Autodesk.DocumentBrowser'],
};
// create the viewer application and bind the reference of the viewerContainer to 'this.viewer'
this.viewer = new Autodesk.Viewing.Private.GuiViewer3D(
this.viewerContainer,
config,
);
// start the viewer
this.viewer.start();
// load a node in the fetched document
this.viewer.loadDocumentNode(doc.getRoot().lmvDocument, initGeom);
}
I hope this will make it work for you as well. What helped me was the reference to the loadDocumentNode function in this blog post.

Dart / flutter: download or read the contents of a Google Drive file

I have a public (anyone with the link can view) file on my Google Drive and I want to use the content of it in my Android app.
From what I could gather so far, I need the fileID, the OAuth token and the client ID - these I already got. But I can't figure out what is the exact methodology of authorising the app or fetching the file.
EDIT:
Simply reading it using file.readAsLines didn't work:
final file = new File(dogListTxt);
Future<List<String>> dogLinks = file.readAsLines();
return dogLinks;
The dogLinks variable isn't filled with any data, but I get no error messages.
The other method I tried was following this example but this is a web based application with explicit authorization request (and for some reason I was never able to import the dart:html library).
The best solution would be if it could be done seamlessly, as I would store the content in a List at the application launch, and re-read on manual refresh button press.
I found several old solutions here, but the methods described in those doesn't seem to work anymore (from 4-5 years ago).
Is there a good step-by-step tutorial about integrating the Drive API in a flutter application written in dart?
I had quite a bit of trouble with this, it seems much harder than it should be. Also this is for TXT files only. You need to use files.export() for other files.
First you need to get a list fo files.
ga.FileList textFileList = await drive.files.list(q: "'root' in parents");
Then you need to get those files based on ID (This is for TXT Files)
ga.Media response = await drive.files.get(filedId, downloadOptions: ga.DownloadOptions.FullMedia);
Next is the messy part, you need to convert your Media object stream into a File and then read the text from it. ( #Google, please make this easier.)
List<int> dataStore = [];
response.stream.listen((data) {
print("DataReceived: ${data.length}");
dataStore.insertAll(dataStore.length, data);
}, onDone: () async {
Directory tempDir = await getTemporaryDirectory(); //Get temp folder using Path Provider
String tempPath = tempDir.path; //Get path to that location
File file = File('$tempPath/test'); //Create a dummy file
await file.writeAsBytes(dataStore); //Write to that file from the datastore you created from the Media stream
String content = file.readAsStringSync(); // Read String from the file
print(content); //Finally you have your text
print("Task Done");
}, onError: (error) {
print("Some Error");
});
There currently is no good step-by-step tutorial, but using https://developers.google.com/drive/api/v3/manage-downloads as a reference guide for what methods to use in Dart/Flutter via https://pub.dev/packages/googleapis: to download or read the contents of a Google Drive file, you should be using googleapis/Drive v3, or specifically, the methods from the FilesResourceApi class.
drive.files.export(), if this is a Google document
/// Exports a Google Doc to the requested MIME type and returns the exported content. Please note that the exported content is limited to 10MB.
drive.files.get(), if this something else, a non-Gdoc file
/// Gets a file's metadata or content by ID.
Simplified example:
var drive = new DriveApi(http_client);
drive.files.get(fileId).then((file) {
// returns file
});
However, what I discovered was that this Dart-GoogleAPIs library seemed to be missing a method equivalent to executeMediaAndDownloadTo(outputStream). In the original Google Drive API v3, this method adds the alt=media URL parameter to the underlying HTTP request. Otherwise, you'll get the error, which is what I saw:
403, message: Export requires alt=media to download the exported
content.
And I wasn't able to find another way to insert that URL parameter into the current request (maybe someone else knows?). So as an alternative, you'll have to resort to implementing your own Dart API to do the same thing, as hinted by what this OP did over here https://github.com/dart-lang/googleapis/issues/78: CustomDriveApi
So you'll either:
do it through Dart with your own HttpClient implementation and try to closely follow the REST flow from Dart-GoogleAPIs, but remembering to include the alt=media
or implement and integrate your own native-Android/iOS code and use the original SDK's convenient executeMediaAndDownloadTo(outputStream)
(note, I didn't test googleapis/Drive v2, but a quick examination of the same methods looks like they are missing the same thing)
I wrote this function to get file content of a file using its file id. This is the simplest method I found to do it.
Future<String> _getFileContent(String fileId) async {
var response = await driveApi.files.get(fileId, downloadOptions: DownloadOptions.fullMedia);
if (response is! Media) throw Exception("invalid response");
return await utf8.decodeStream(response.stream);
}
Example usage:
// save file to app data folder with 150 "hello world"s
var content = utf8.encode("hello world" * 150);
driveApi.files
.create(File(name: fileName, parents: [appDataFolder]),
uploadMedia: Media(Stream.value(content), content.length))
.then((value) {
Log().i("finished uploading file ${value.id}");
var id = value.id;
if (id != null) {
// after successful upload, read the recently uploaded file content
_getFileContent(id).then((value) => Log().i("got content is $value"));
}
});

Using the async plugin with requirejs to load googlemaps

I am trying to use the Async module of https://github.com/millermedeiros/requirejs-plugins to load the googlemap api. My index.html file contains the following requirejs configuration:
<script data-main="scripts/myscript" src="scripts/require.js"></script>
<script>
requirejs.config({
"baseUrl": "scripts",
"paths": {
"async": "require_plugins/async",
"gmaps": "gmaps",
"infobox":"http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox",
"jquery":"//code.jquery.com/jquery-2.1.1.min",
"jquery_mob":"//code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min"
},
waitSeconds: 15
});
All my javascript files are stored in a scripts folder (relative to index.html)
e.g. script/myscript.js and script/require.js and the async plugins are stored in a subfolder of script called require_plugins e.g. script/require_plugins/async.js
The javascript where I define the googlemap module is called gmaps.js (stored in the script folder) and looks as follows:
define("GMAP",['async!https://maps.googleapis.com/maps/api/js? &key=xxxxxx&region=uk&libraries=places,geometry'], function () {
return window.google.maps;
});
I have obfuscated the key parameter intentionally here. According to the documentation, I should be able to use the gmaps module anywhere in other javascript files just by invoking it like so:
require(["gmaps"],function(GMAP)
{
map= new GMAP.Map("#map-div");
//and then some code to display the map
}
Unfortunately, it does not work at all. It seems that the googlemap library has not loaded at all. I use absolute URLs for jquery and that works fine but googlemap fails miserably. My question is: Is there something wrong with my requirejs config? I can't think of anything else causing this fault :(
My understanding is that the name you set in define() is what you need to use when writing the dependencies.
e.g.:
define('GMAP', ['async!<path>'], function() { return window.google.maps; });
require(['GMAP'], function(GMaps) { ... });
This is how I get GMaps to load for me. I have a secondary problem now that other libraries that depend on Maps no longer load.