Working with MAX-Image-Resolution-Enhancer

[GautamGottipati]

I am working with MAX-Image-Resolution-Enhancer . How do I fetch the content from API(content-type:image/png) and show it in form of website.
When I added the api as endpoint in the following codepen, I am getting NetworkError when attempting to fetch resource.

Codpen link: https://codepen.io/ibmcodait/pen/VojGGP
api used : http://max-image-resolution-enhancer.codait-prod-41208c73af8fca213512856c7a09db52-0000.us-east.containers.appdomain.cloud/model/predict

[ptitzler]

Several thoughts:

• Trying the scenario you've outlined in Google Chrome a Mixed Content error was logged for me in the browser's console: The page at 'https://codepen.io/' was loaded over HTTPS, but requested an insecure resource 'http://max-image-resolution-enhancer.codait-prod-41208c73af8fca213512856c7a09db52-0000.us-east.containers.appdomain.cloud/'. This request has been blocked; the content must be served over HTTPS. Not sure which browser you were using and how this problem is surfaced there. If you change the endpoint to be accessed over a secure (HTTPS) connection the request will likely trigger a different error, which I cover next.
• This code pen won't work as is for the image resolution enhancer's /model/predict endpoint because binary data (a png image) is returned as a response. However, the code pen was designed to only process JSON responses, like the object detector or image caption generator produce.

If you want to try the endpoint (via HTTP or HTTPS) outside of the code pen you can run
curl -X POST "https://max-image-resolution-enhancer.codait-prod-41208c73af8fca213512856c7a09db52-0000.us-east.containers.appdomain.cloud/model/predict" -H "accept: application/json" -H "Content-Type: multipart/form-data" -F "image=@airplane.png;type=image/png" --output out2.png providing the image name you were using earlier as input.

[GautamGottipati]

Thanks for the response @ptitzler
I have tried in Mozilla.
I wanted to use the API to show on a website similar to other models, like object detection, segmentation, etc whose response is in application/json format.
I understand that the response type for MAX-Image-Resolution-Enhancer is image/png.
It would be nice if you suggest some way on How to link it to the frontend for MAX-Image-Resolution-Enhancer API.

[ptitzler]

Take a look at https://codepen.io/ibmcodait/pen/OJyzrwb. It's based on one of the other code pens. There is only one key difference: in getPrediction you need to convert the returned prediction response using response.blob() as documented here: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch. The resulting blob can then be rendered on the page as an image. Hope this helps!

[GautamGottipati]

Thank you @ptitzler .