How do you send and receive data from an external api using Web / WebView?

MIT App Inventor Help
,
#1

Hello AI Community!

I want to create a simple database of all the clothes in a shop.

Here's how it will work:

  1. The user will click on an Image Picker button that will let him choose the image of the shirt / pant from the gallery.

  2. Once the image is picked, I want to send it to an external api that automatically removes the backgrounds of the images and makes them transparent. Here is the link of that service:
    Background Removal API – remove.bg
    THIS IS THE MOST CRUCIAL PART OF THE APP and this is exactly where I'm stuck.

  3. Once the transparent image is returned from the api, it shall be stored in the database.

I'm still a newbie in coding and don’t know most of it.

Screenshot 2022-03-02 at 1.13.09 PM
Screenshot 2022-03-02 at 1.13.09 PM2316×1064 346 KB

I don’t know which format to use, and moreover, how to use the App Inventor's web components to achieve the same.

I'd really appreciate if someone could help me with this.

Thanks! (:

#2

Seems you used the same API as this user.

For the code, view the cURL code instead of Java.

2 Likes
#3

Hmm... API is a hard obstacle in App Inventor. Before you start with APIs, you should learn how to structure data with lists and dictionaries.

2 Likes
#4

The web component cannot send binary files to an api that requires multi-part form data.

This can be done with app inventor, either use an intermediary php server, or write an extension.

It may be possible to use the custom WebView extension to upload/download your file to remove.bg

3 Likes
#5

@TIMAI2 , @Gordon_Lu Thanks for your inputs guys (:

#6

Use this to convert curl into blocks

2 Likes
#7

I think it's possibe to send multi-part form data using 'curl' command of KIO4's ternimal extension. but I never tried.

1 Like
#8

you can use a php script and upload it on your hosting

then try to communicate with the php script via Web component on app inventor , this is the best approach but you need to reconsider security too.

1 Like
#9

Hi @Faraz_Firoz
Hi all!

I chose @Faraz_Firoz tip to convert my Curl into Blocks.
This produced this result:

image
image1276×171 15.2 KB

Unfortunately, nothing happens (not even an error message) when i call this function.

Would you have any idea on how to identify the issue origin?
(My topic is to post a sound file recorded by the smartphone, to an API performing analysis.

#10
  1. Show the curl command
  2. Does the api require a multipart upload ? (Won't work with AppInventor alone)
#11

Here is the Curl:

curl https://api-inference.huggingface.co/models/speechbrain/asr-wav2vec2-commonvoice-fr \
	-X POST \
	--data-binary '@sample1.flac' \
	-H "Authorization: Bearer {API_TOKEN}"

Their is not particular multipart loading requirement from which i understand from the description, and i manage to make it work easily with the web browser or Postman:

1 Like
FAQ Section: Web Services Examples
#12

What is the path to the soundRecording? What version of Android are you using to test ?

How is your Web1.GotText setup ?

#13

Thanks for your answer

I use an Android 10 phone for the test (using the AI companion).

To get the recordings to get recorded, I used the tip here:

I then copied the tip in my blocks like this:

image
image1463×224 22.2 KB

Practically, i found the recordings on my phone under this folder:

SD Sandisk/Android/data/edu.mit.appinventor.aicompanion3/files/

In the designer mode, my Web1 properties are...empty for the moment:

image

And..i have no Web1.gotText Event, which...may be lacking, indeed?

#14

I found documentations related here:

http://ai2.appinventor.mit.edu/reference/components/connectivity.html#Web

and i am currently performing some adds in to my blocks, adding a GotText event and trying to make it work based on the doc...

#15

Use the AfterSoundRecorded event and the returned sound parameter there to upload your file rather than the SavedRecording property

Also add a Web.GotText event to find out, if the upload was successful or not

EDIT: also your API token looks strange... does it really start with api_org_...?

Taifun

1 Like
#16

Hi there,
I just add this block... AND IT WORKS !!!

image
image1283×419 30.9 KB

: I manage to get the SPEECH TO TEXT answer from the API in my Label2 text !

I just have to work a bit so it displays more nicely.
I have been struggling to do it with Bubble and Appgyver for days...MIT APP INVENTOR allowed me to make it !

Thanks again for your help guys !

#17

(added to FAQ)

1 Like
#18

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.