FlutterFlow x RoboFlow Model Deployment

[Irish_Egie_Arao]

Hello, so bare with me here. I’m working on a Uni project of mine, which is an app for reporting potholes & having recently discovered both FlutterFlow & RoboFlow, I’d like to incorporate the inference feature of detecting potholes in images via the Hosted API. But with the time, & honestly man-power constraint that I have for this project I am perplexed as to how the API call should work. I AM STUCK. Given below is a screenshot of the situation

(Purposely removed the api_key)

• Project Type: ex: Object detection, Classification
• **Operating System & Browser:**Windows 10 Pro, Microsoft Edge

[leo]

Hi @Irish_Egie_Arao

We don’t directly support solving issues with other platforms, but it looks like you might be having trouble with the API.

Can you share more info about the following:

• What URL are you requesting to? (under API URL I suspect)
• What is the workspace/project you are working on? or a Universe link if your project is public.

[Irish_Egie_Arao]

Hi there! Thanks for the response,

• For the screenshot above here is the current API URL i was requesting to when that unauthorized message occurred on the screenshot above. https://detect.roboflow.com/patch-system-pothole-detection-model-v1/2?\ api_key=[api_key]&\ image=[image]
  API URL as shown below in the FlutterFlow API Call.
  

  

• Currently here is my Universe link of my project model in roboflow.
  PATCH System pothole detection model v1 Object Detection Dataset and Pre-Trained Model by PATCHSystemWorkspace (roboflow.com)

Thanks again.

[leo]

Hey @Irish_Egie_Arao

I was able to run your model through the API through the example web app in the deploy tab.

The first thought I have is to check the API key to make sure that is correct. I don’t see anything wrong with the request or the URL at the moment, so could you check that first?

[Irish_Egie_Arao]

Hey @leo, I re-checked the API URL, replaced the api_key with the public one from my project, & provides an error response in the sample web app. But the URL works with the private one. But once I use the URL outside of RoboFlow, I’ve also tried on API URL testers but it just returns an unauthorized message.

Well, this is just probably a skill issue for real, but I’d check some things if there is something I missed with the request. Thanks again.

[leo]

Hi @Irish_Egie_Arao

The public publishable key is only meant for uses where our docs specifically request that a public key be used. For example, the roboflow.js docs calls for the public publishable key.

In other cases, like the Roboflow API, it is not meant for client-side use. I’m unsure how FlutterFlow works, but if it doesn’t make the API requests client side, you can use the Roboflow API.

[Irish_Egie_Arao]

Hey @leo, a short update here after I did backend hiatus to work on other things, anyways. I finally configured the fault as to why the API URL I provided did not work. So I will share my findings for enthusiasts in the future that might utilize these two wonderful platforms & how I managed to finally utilize FlutterFlow x RoboFlow model deployment. You can mark this as Solved now, so here it is.

After re-reading the documentation for deployment in various language (not the sample deployment code on the deployment page of your model) for some reason that API URL did not work. Anyways, I found out that on the Kotlin, there was a modelEndPoint variable in the sample so I simply created a new String modelEndPoint variable in the API call so that the POST call recognizes all the variables, same as before I still have my String api_key although in the image below it is simply hidden, then of course we have our image variable which will have to be in String (more on this later) for us to put our link of the media to be inferred & voila.

You will get a response 500 error. This is because the link that I used is from firebase which most of my media is stored which is not URL Encoded. So, this is good meaning that the API finally connects the request but the image variable is not recognized.

To combat this error we simply create a short custom function that will take the uploadedImageURL in FlutterFlow & URL Encode it, return it as a String so that the POST request recognizes the image. You can follow my configuration in image below.

Here is the Function. To save yourself some time just put it inside the boilerplate code otherwise Flutterflow will just reconfigure it back again.

return Uri.encodeFull(imagePath);

On the action tab in your UI will have to look somewhat similar to the one below. (Note that you can upload image locally & send the bytes as the image for the API Call but as of the making of this short tutorial, FlutterFlow has a bug that does not allow that).

You can work around it & upload directly to Firebase or Supabase, then URL encode the ImagePath & return it as a string that is readable by the POST request.

• Create an API Call & set additional variables like so.

• Add the custom function for the image variable.
  

  

• Add the UploadedFileURL as the value for the custom function in the image variable.
  

  

• If done correctly the API call should look something like this. Crisp clean & no errors
  

  

To test it out you can put it your app’s UI like I did here.

You can also configure your API call to select the specific JSON Path from the body that you want so that you can call it in your UI later. Simply select the variable of the text, then select Action Outputs select the action output of your API call, then from there JSON Body, select JSON Path, & the Path name of the JSON Response that you want.

OK, that wraps everything up as to how I used both the Platforms to work together for my project. Thanks again @leo you guys have such a User-Friendly platform keep up the good work, and may this short Tutorial serve as a guide to any enthusiast that may stumble upon this tutorial & the same dilemma that I had. Have great day!