I am trying to detect objects in an image using tensorflow js.
I followed the tutorial in here Tensorflow Object Detection with Tensorflow 2: Creating a custom model
So everything works fine in google collab and object detection works fine.
I get a saved_model, which I now would like to use on a browser.
So I convert the model using
tensorflowjs_converter --input_format=tf_saved_model --output_format=tfjs_graph_model --signature_name=serving_default --saved_model_tags=serve /content/inference_graph/saved_model /mobilenet/web_model
and then I download the same.
I am now trying to use this on the browser using the following html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/#tensorflow/tfjs"> </script>
<style>
.container {
display: flex;
flex-wrap: wrap;
}
</style>
</head>
<body>
<div class="container">
<div>
<img id="test1" src="test/IMG_20181228_102636.jpg" width="300" height="300" />
<div id="test1_pred">WORKING</div>
</div>
</div>
<script>
async function predict() {
const model = await tf.loadGraphModel('http://localhost:8000/mobilenet/web_model/model.json');
const img = document.getElementById('test1');
const tfImg = tf.browser.fromPixels(img);
const smalImg = tf.image.resizeBilinear(tfImg, [300, 300]);
const resized = tf.cast(smalImg, 'int32');
const t4d = tf.tensor4d(Array.from(smalImg.dataSync()),[1,300,300,3]);
let predictions = await model.executeAsync(tf.cast(t4d, "int32"));
console.log(predictions);
}
setTimeout(function() {
predict();
}, 1000);
</script>
</body>
</html>
The error I get on console is
tfjs:17 Uncaught (in promise) Error: Error in matMul: inputs must have the same rank of at least 2, got ranks 5 and 2.
at xv (tfjs:17)
at matMul_ (tfjs:17)
at matMul__op (tfjs:17)
at tfjs:17
at tfjs:17
at tfjs:17
at t.e.scopedRun (tfjs:17)
at t.e.tidy (tfjs:17)
at $b (tfjs:17)
at tfjs:17
I am at loss as to what is the error here. It does seem like it is to do with the ranks in the matrices, but not sure what is causing the mismatch.
How should I resize my images so that it is acceptable to the model ?
I am also posting my model in the gist in here model.json
Any help would be appreciated
Related
I am trying to get a vue component to work from a separate file called AppButton.js. This simple learning component should render a button with some css and disables the click when one hovers over the button. Instead, this code just displays text. I cannot figure out what is missing in my code and I would appreciate if someone can take a look.
Here is the content from AppButton.js:
export default {
template: '<button class="bg-gray-200 hover:bg-gray-400 border rounded px-5 py-2 disabled:cursor-not-allowed" v-bind:disabled="processing"><slot /></button>',
data() {
return {
processing: true
}
}
}
The AppButton.js is in the same directory as my index.html. Here is the content of the index.html.
<!DOCTYPE html>
<html lang="en" class="h-full">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue#3"></script>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="h-full grid place-items-center">
<div id="app">
<app-button>Scura</app-button>
</div>
<script type="module">
import AppButton from "AppButton.js"
let app = {
components: {
'app-button': AppButton
}
};
Vue.createApp(app).mount('#app');
</script>
</body>
</html>
I tried loading vue.js devtools extension in my Chrome to debug this problem further but for some reason the vue.js devtools extension does not show in my devtools
This is the error I am getting in Chrome Console: Access to script at
'file:///C:/Users/scura/Documents/LearnHtmlCss/js/components/AppButton.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
index.html:18 GET file:///C:/Users/scura/Documents/LearnHtmlCss/js/components/AppButton.js net::ERR_FAILED
I was trying to convert the basic viewer example code into a simple vue.js viewer app. When I try to run `npm run serve'(vue-cli).Things are getting rendered correctly and I am getting all the console logs in the console.
But even before the script getting executed the eslint-loader is showing Autodesk is not defined error. But I can see the viewer loaded the document in the background.I will attach a screenshot of it here.
Can someone correct me with the code for creating a basic viewer as a simple vue.js app?
/public/index.html
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<!-- Autodesk Forge Viewer files -->
<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css" type="text/css">
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.min.js"></script>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
/src/App.vue
<div id="forgeViewer"></div>
</template>
<script>
export default {
mounted(){
var viewer;
var options = {
env: 'AutodeskProduction',
api: 'derivativeV2', // for models uploaded to EMEA change this option to 'derivativeV2_EU'
getAccessToken: function(onTokenReady) {
var token = 'eyJhbGciOiJIUzI1NiIsImtpZCI6Imp3dF9zeW1tZXRyaWNfa2V5In0.eyJzY29wZSI6WyJidWNrZXQ6Y3JlYXRlIiwiYnVja2V0OnJlYWQiLCJkYXRhOnJlYWQiLCJkYXRhOndyaXRlIl0sImNsaWVudF9pZCI6Ikp2Vk40bzdBQ0V0ZE81TVpnZ21QMk9WM1RoNFJnRW54IiwiYXVkIjoiaHR0cHM6Ly9hdXRvZGVzay5jb20vYXVkL2p3dGV4cDYwIiwianRpIjoiMXBQcVhxOFBZVVU0WmtpTURsaGpUSUxCM3I1UEpBWk9kbTY4dTY2R1ZjajhDY3VzYjB3VFVId0E3emZPVk5JRCIsImV4cCI6MTU4ODIzNDEwOX0.zmY_BFmoZgL4TbtSVyTWKlrFdImEKbQTUsfQxBjsPV4';
var timeInSeconds = 3600; // Use value provided by Forge Authentication (OAuth) API
onTokenReady(token, timeInSeconds);
}
};
Autodesk.Viewing.Initializer(options, function() {
var htmlDiv = document.getElementById('forgeViewer');
viewer = new Autodesk.Viewing.GuiViewer3D(htmlDiv);
var startedCode = viewer.start();
if (startedCode > 0) {
console.error('Failed to create a Viewer: WebGL not supported.');
return;
}
console.log('Initialization complete, loading a model next...');
});
var documentId = 'urn:dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6ZmFjaWxpb25ld2NsaWVudGJ1Y2tldC9yYWNfYWR2YW5jZWRfc2FtcGxlX3Byb2plY3QucnZ0';
Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
}
},
methods:{
onDocumentLoadSuccess:function(viewerDocument){
var defaultModel = viewerDocument.getRoot().getDefaultGeometry();
viewer.loadDocumentNode(viewerDocument, defaultModel);
viewer.addEventListener( Autodesk.Viewing.SELECTION_CHANGED_EVENT, event=>{
})
},
onDocumentLoadFailure:function(){
console.error('Failed fetching Forge manifest');
}
}
}
</script>
<style>
</style>
You have to fix your Eslint errors one by one.
1.- Declare autodesk as a global in .eslintrc
"globals": {
"Autodesk": true
}
2.- Declare viewer
const viewer = new Autodesk.Viewing.GuiViewer3D(htmlDiv);
3.- Remove event listeners if not being used or just console.log(event)
Alternatively you can disable eslint but I'd never recommend that.
check out these working samples here:
https://github.com/dukedhx/forge-tools-hub/blob/master/components/Viewer.vue
https://github.com/alvpickmans/forge-vuer
In the main.js you can add:
Vue.prototype.$Autodesk = window.Autodesk;
And use it in the vue components like below:
this.$Autodesk
I am new to both Vue and Python Flask. I have been searching for some charts that Vue provides. One of them is the FunnelGraph.js. I am however not quite sure how to integrate them together.
I tried to follow the documentation https://github.com/greghub/funnel-graph-js#usage but I'm not quite sure where to use the graph variable. I have chosen to use its CDN.
In python's Flask's app.py I have,
from flask import Flask, render_template
app = Flask(__name__)
#app.route('/')
def index():
return render_template('index.html')
#app.route('/about')
def about():
return render_template('about.html')
if __name__ == "__main__":
app.run(debug=True)
In the about.html, I have
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/funnel-graph-js#1.3.9/dist/css/main.min.css">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/funnel-graph-js#1.3.9/dist/css/theme.min.css">
<title></title>
</head>
<body>
<div id="graph">
<h1>graph</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/funnel-graph-js#1.3.9/dist/js/funnel-graph.min.js"></script>
<script>
var graph = new FunnelGraph({
container: '.funnel',
gradientDirection: 'horizontal',
data: [12000, 5700, 360],
displayPercent: true,
direction: 'horizontal'
});
graph.draw();
</script>
</body>
</html>
With the current setup I get the error from the chrome inspector console:
funnel-graph.min.js:1 Uncaught TypeError: Invalid attempt to spread non-iterable instance
at funnel-graph.min.js:1
at g (funnel-graph.min.js:1)
at e.value (funnel-graph.min.js:1)
at new e (funnel-graph.min.js:1)
at about:21
Looks like a problem with FunnelGraph: it appears to throw this error when you define data as an array, although they have this example in their documentation. To work around it, define your data as an object:
var graph = new FunnelGraph({
container: '#graph',
gradientDirection: 'horizontal',
displayPercent: true,
direction: 'horizontal',
data: {
values: [12000, 5700, 360]
},
});
graph.draw();
I also had to adjust your container selector to be #graph since that is what you have in the markup.
I use cytoscape.js 2.7.5 to display a graph exported by Cytoscape Desktop as graph.cyjs converted to a Javascript file graph.js containing "var graph = ... the content of the cyjs file ...;". With the following HTML I see the nodes and the edges but the style (colors, which attribute to use as node name) is not imported. How can I import the style as well?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="cytoscape.js"></script>
<script src="graph.js"></script>
</head>
<body>
<div id="cy" style="width:100%;height:100vh;"></div>
<script>
var cy = cytoscape({
container: document.getElementById('cy') // container to render in
});
cy.add(graph.elements);
</script>
</body>
</html>
Apparently, Cytoscape Desktop doesn't save style information in its .csjs files so this has to be exported and imported separately:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="cytoscape.js"></script>
<script src="graph.js"></script>
<script src="style.js"></script>
</head>
<body>
<div id="cy" style="width:100%;height:100vh;"></div>
<script>
var cy = cytoscape({
container: document.getElementById('cy'),
style: style[0].style
});
cy.add(graph.elements);
</script>
</body>
</html>
I am trying to fetch and display a map from the arcgis server using Aptana IDE. It says l is undefined.
GET https://gistest2.xxx.xxx/arcgis/rest/info?f=json
200 OK 27ms TypeError: l is undefined
...x)<=p.dx)&&q._addFrameInfo(h,p);this.setExclusionAreas(this.exclusionAreas);this...
Here is the entire code except the URL I am trying to hit.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>BGSU Memorial Trees Location</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
<script src="http://js.arcgis.com/3.10/">
</script>
<script>
var map;
require(["esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "dojo/domReady!"],
function (Map, ArcGISTiledMapServiceLayer ) {
map = new Map("map", {
center: [-76.756, 40.241],
zoom: 8
});
var customBasemap = new ArcGISTiledMapServiceLayer(
"https://XXX/");
map.addLayer(customBasemap);
});
</script>
</head>
<body class="claro">
<div align="center"><strong>BGSU Memorial Trees Listing </strong><hr>
<i><a target="_self" href="listingtrees.html">Listing</a> | <a target="_self" href="locationtrees.html">Locations </a></i>
</div>
<br>
<div id="map" >
</div>
</body>
</html>
Any help is highly appreciated.
Thanks in Advance!
In the constructor of ArcGISTiledMapServiceLayer you have to specify the URL of an ArcGIS tiled map service. Example of URL:
http://myserver/arcgis/rest/services/map_service_name/MapServer
The address you specified (arcgis/rest/info?f=json) is the address of the REST service of ArcGIS Server but doesn't point to a Map service.