How to use REQUEST BODY with Web component and Custom Vision Prediction 2.0???

[Tobi]

Hi everyone,

i want to use Custom Vision Prediction 2.0 with PredictImageUrl in my App Inventor 2. 

At the moment i use the Emulator for testing...

My main problem is, that i do not know how the REQUEST BODY works in the REQUEST URL in my case the URL? PARAMETER in the REQUEST URL with the Web component. 

After many approaches i still can't get it work....

Found some examples here: https://stackoverflow.com/questions/36961458/how-to-implement-http-post-with-json-body-in-app-inventor-2 or here https://puravidaapps.com/dropbox.php or here http://appinventor.mit.edu/explore/blogs/karen/2016/09-1.html. 

If i use the the Cognitive Testing Tool on the MS Site here https://southcentralus.dev.cognitive.microsoft.com/docs/services/450e4ba4d72542e889d93fd7b8e960de/operations/5a6264bc40d86a0ef8b2c28f/console and put in all required parameters, it works perfectly:

REQUEST URL:

https://southcentralus.api.cognitive.microsoft.com/customvision/v2.0/Prediction/XXXXXX-ad98-455a-95a3-b324bbaaf46b /url?iterationId=XXXXXX-79a1-41c5-90e2-a1ae1dd85b5a

HTTP request

POST https://southcentralus.api.cognitive.microsoft.com/customvision/v2.0/Prediction/XXXXXX-ad98-455a-95a3-b324bbaaf46b /url?iterationId=XXXXXX-79a1-41c5-90e2-a1ae1dd85b5a
 HTTP/1.1
Host: southcentralus.api.cognitive.microsoft.com
Prediction-Key: XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Content-Type: application/json

{
  "Url": "https://www.XXXXXXXXXXXXXXXXXXXXXXXXX.de/fileadmin/media/_processed_/6/f/csm_XXXXXXXXXXXX.png"
}

In my Blocks Viewer it looks like this (with Url: https://southcentralus.api.cognitive.microsoft.com/customvision/v2.0/Prediction/XXXXXX-ad98-455a-95a3-b324bbaaf46b /url?iterationId=XXXXXX-79a1-41c5-90e2-a1ae1dd85b5a)

But each try with the Emulator results in the following errors here:

Could you help me with my problem?

Thanks for any hint :-)

Tobi




[Taifun]

1. use the PostText block rather than the PutText block and remove the Get method...

2. does the emulator have internet access? try a device for your tests...

Taifun

---

Trying to push the limits of App Inventor! Snippets, Tutorials and Extensions from Pura Vida Apps by Taifun. 

[Tobi]

Thank you very much for your answer.

I did the changes you mentioned above (PostText, remove the Get method and to use a device) and it worked perfectly :-)

See below:

Now i have tried to upload a image created with my camera.

The following settings are required for using image files:

I did the following changes:

 

Url: https://southcentralus.api.cognitive.microsoft.com/customvision/v2.0/Prediction/ XXXXXXX -ad98-455a-95a3-b324bbaaf46b/image?iterationId=XXXXXXX-79a1-41c5-90e2-a1ae1dd85b5a

Content-Type to: application/octet-stream 

PATH TO IMAGE FILE looks like: file:///storage/emulated/0/Pictures/app_inventor_XXXXXXXXX.jpg

And adding the additonal blocks for the Camera and the POST FILE as shown below:

With the changes, the Code is always

404	Not Found

Update: And i have tried this solution here with the following blocks, described in https://puravidaapps.com/dropbox.php 

Or:

 the Code is always

400	Bad Request

So my main question is, how this with the file link is working in the BODY?

Did i do this with the POST FILE correct?

Regards,

Tobi

[Taifun]

the blocks look fine

you might want to display the path to the image in a label to make sure, it is a full path to the image

which error message (response content) do you get?

Taifun

[Tobi]

Hi Taifun,

thanks for your fast response:-)

Codes are always 400. Furthermore i added some labels to show the file name and the path including file name.

PATH TO IMAGE FILE looks like: file:///storage/emulated/0/Pictures/app_inventor_XXXXXXXXX.jpg

FILE NAME looks like: app_inventor_XXXXXXXXX.jpg

So my main question is, how ist this with the file link is working in the BODY?

[Taifun]

well, to post  a file. you have to use the PostFile method

the PostText method will only post the name of the image...

the first screenshot was fine...

Codes are always 400. 

what is the response content you are receiving in the Web.GotText event?

Taifun

[Tobi]

I did the changes and received the message badImageFormat (using responseContent of Web.GotText).

Found out that there is a limit for each image of a max size of 4 MB: https://docs.microsoft.com/en-us/azure/cognitive-services/custom-vision-service/limits-and-quotas 

So i decided to use the Resize block of Image Extension https://puravidaapps.com/image.php and tried again.

I am thinking about to use the Camera Extension http://puravidaapps.com/camera.php - this might be the better solution for compressing the size of the image...

This works perfectly without any problems :-)

Here is the final working solution:

Thank you very much for your support!!!!!

Regards,

Tobi