Having trouble running sample web app locally

Community Help
1

I have copy and pasted the source code from the sample web app to my local machine to start tweaking it, but I get:
"Error loading response.

Check your API key, model, version,
and other parameters
then try again."
I have checked all the parameters, but I see an outside script referenced at the bottom of the code:
<script src="/infer.e52137ed1b27e0a86d5a.js"></script>
I have tried replacing that with what I believe to be the absolute address (if I had permission to run it off server, which may be unlikely):
<script src="https://detect.roboflow.com/infer.e52137ed1b27e0a86d5a.js"></script>
I get the same result. Any advice appreciated!

Edit: for reference here is the sample web app I pulled down minus my api key.

2

figured it out!
would have to enable access to external https requests on localhost, ran just fine on my FTP/web provider:

3

Just double checking that by “pulled down” you mean using the code from the codepen linked on the bottom right vs saving the source code from that page which includes some extra boilerplate from our serverside build and analytics: https://codepen.io/roboflow/pen/VwaKXdM

4

I did it that way the first time then ran into this external request issue and just pulled the source code off the page, but I will go grab that code again now.
Thanks!

5

Good feedback. We’ll work on packing it up into a self-contained zip package like the webcam demo is.

6

hmmm now starting to get that same error on my FTP server:
Access to XMLHttpRequest at 'https://infer.roboflow.com/helicopters-of-dc-ghwuq/1?access_token=API_KEY&confidence=0.4&overlap=0.3&format=image&labels=on&stroke=2&image=https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FFBL25GUX0AQSVRU.jpg' from origin 'MY_DOMAIN' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

7

Weird; do we have infer.roboflow.com in there somewhere still? It should be detect.roboflow.com unless this is an extremely old model.

Also is your API Key filled into that URL when you hit it? What happens if you navigate to the URL directly?

8

working again, it was after I put the codepen JS in there, it reads:

	var parts = [
		"https://infer.roboflow.com/",
		$('#model').val(),
		"?access_token=" + $('#access_token').val()
	];

so not only detect.roboflow.com but that ?access_token must now be ?api_key

9

So I still get a 503 error about half the time when using URL option - same with the stock form:


1. {method: 'POST', format: 'json', url: 'https://detect.roboflow.com/helicopters-of-dc-ghwu…son&image=https%3A%2F%2Fi.imgur.com%2FpHRqwOI.jpg'}

  1. error: ƒ (xhr)
  2. format: "json"
  3. method: "POST"
  4. url: "https://detect.roboflow.com/helicopters-of-dc-ghwuq/1?api_key=API_KEY_REDACTED&confidence=40&overlap=30&format=json&image=https%3A%2F%2Fi.imgur.com%2FpHRqwOI.jpg"
  5. [[Prototype]]: Object

jquery.min.js:2 POST https://detect.roboflow.com/helicopters-of-dc-ghwuq/1?api_key=API_KEY_REDACTED&confidence=40&overlap=30&format=json&image=https%3A%2F%2Fi.imgur.com%2FpHRqwOI.jpg 503
send @ jquery.min.js:2
ajax @ jquery.min.js:2
(anonymous) @ ?model=helicopters-o…GtJyLRjdtKqh5bw:437
getSettingsFromForm @ ?model=helicopters-o…GtJyLRjdtKqh5bw:593
infer @ ?model=helicopters-o…GtJyLRjdtKqh5bw:426
(anonymous) @ ?model=helicopters-o…GtJyLRjdtKqh5bw:492
dispatch @ jquery.min.js:2
v.handle @ jquery.min.js:2
10

Hi @HelicoptersofDC - can you send a copy of the full code you’re using for inference (and the image used for inference) to help@roboflow.com? I’d like to run some tests to diagnose the error.

You can also choose to link the files here if your API key is removed from the inference code.

11

For now I’m going to rely on file upload - I will work you guys up some code when I have time, was having a similar problem with Python so I’d like to get you some detailed logs.

12

Hi guys. I’ve encountered the same issue. Wondering if there has been any update to the codepen demo.
Thanks.

13

@abdullahmadawi could you elaborate on what issue are you experiencing? Is it the error message the original poster mentioned about Error loading response. Check your API key, model, version, and other parameters then try again.? Are you trying to run the web app locally?

14

Hi,

Thanks for responding. I managed to resolve my issue which was similar to this comment:

The format of my parameters in the codepen demo did not match those in the actual demo. I’m not sure if this makes sense.

Before:

	var parts = [
		"https://infer.roboflow.com/",
		$('#model').val(),
		"?access_token=" + $('#access_token').val()
	];

After:

var parts = [
		"https://detect.roboflow.com/",
		$('#model').val(),
		"/",
		$('#version').val(),
		"?",
		"api_key=" + $('#api_key').val()
	];

Once the corrections were made the codepen demo worked.

Thanks.

15

Hi @abdullahmadawi

It’s great to hear that your issues were able to be resolved. I’ll make sure that gets updated. Thanks for sharing!