Can't assign image to .source

Anvil Q&A
1

I’m trying to display an image that has a bounding box over face. The box is calculated on an uplinked server.

When I display it using image_1.source = img, it errors with “TypeError: The ‘source’ property can only be set to a Media object or a URL”.

Code Sample:
Here’s code from my Form

def file_loader_1_change(self, file, **event_args):
    result = anvil.server.call("identify_celeb", file)
    img = anvil.server.call("bound_box", file)
    self.image_1.source = img   # ←- Error occurs here
    self.result_lbl.text =  "Our model thinks it's " + result

Here’s the code from the uplinked server:

@anvil.server.callable
def bound_box (file):
    with anvil.media.TempFile(file) as filename:
        img_bgr = cv2.imread(filename)
    img_rgb  = cv2.cvtColor(img_bgr, cv2.COLOR_BGR2RGB)
    img_gray = cv2.cvtColor(img_rgb, cv2.COLOR_BGR2GRAY)
    face = face_cascade.detectMultiScale(img_gray, 1.5, 5)
    class_names=list(classes.keys())   #List of the class names
    label = class_names[np.argmax(score)][5:]

    height, width, _ = img_rgb.shape
    left = int(width/17)
    down = int(height/11)
    fontsize = 0.00211*width + 0.01

    for (x,y,w,h) in face:
        img = cv2.rectangle(img_rgb,(x, y),(x + w, y + h),(255,255,0),2)
        font = cv2.FONT_HERSHEY_SIMPLEX
        cv2.putText(img_rgb, label, (x,y-15), font, fontsize, (200,255,155),2)
        roi_gray = img_gray[y: y + h, x: x + w]
        roi_color = img_rgb[y: y + h, x: x + w]
    return img

Clearly img is an image file, as I can display it in the Jupyter Notebook with plt.show(img). Is there a special function to use for this? I am using import anvil.media.

2

The error message tells you what you need to return. Returning an image isn’t enough, it needs to either be a Media object that contains an image, or a URL pointing to an image.

For your case you’ll probably want to construct a BlobMedia object that contains the image you’ve created. You can pass any byte string into the BlobMedia constructor: Anvil Docs | Files, Media Objects and Binary Data

3

I saw that page, but the examples for BlobMedia only pertain to files saved on disk or loaded from a URL, but not passed from a server call, like my situation. The documentation for BlobMedia is quite scant, and I really need more explicit help, as I am still learning this platform.

I tried this suggestion, and used

@anvil.server.callable
def img_to_media_obj(img):
    img_byte_arr = io.BytesIO()
    img.save(img_byte_arr, format='JPEG')
    img_byte_arr = img_byte_arr.getvalue()
    media_obj = anvil.BlobMedia(content_type="image/jpeg", content=img_byte_arr)
    return media_obj

and then change the last two lines of my uplinked server code to:

@anvil.server.callable
def bound_box (file):
    with anvil.media.TempFile(file) as filename:
        img_bgr = cv2.imread(filename)
    img_rgb  = cv2.cvtColor(img_bgr, cv2.COLOR_BGR2RGB)
    img_gray = cv2.cvtColor(img_rgb, cv2.COLOR_BGR2GRAY)
    face = face_cascade.detectMultiScale(img_gray, 1.5, 5)
    class_names=list(classes.keys())   #List of the class names
    label = class_names[np.argmax(score)][5:]

    height, width, _ = img_rgb.shape
    left = int(width/17)
    down = int(height/11)
    fontsize = 0.00211*width + 0.01
    for (x,y,w,h) in face:
        box_img = cv2.rectangle(img_rgb,(x, y),(x + w, y + h),(255,255,0),2)
        font = cv2.FONT_HERSHEY_SIMPLEX
        cv2.putText(img_rgb, label, (x,y-15), font, fontsize, (200,255,155),2)
        roi_gray = img_gray[y: y + h, x: x + w]
        roi_color = img_rgb[y: y + h, x: x + w]
        boxes = img_to_media_obj(box_img)   # call to img_to_media_obj function above
    return boxes                                            # supposedly returns a medial object

But I get the same error msg that I am still need to connect the .source attribute to a Media object or URL.

4

That looks okay to me. For debugging, in your client code, before you assign to the image source, download the media object so you can see what’s actually being transferred back. You can then open it up in a paint program to see if it’s a valid jpg file, open it up in a text editor to see if it’s something else, etc. See: Anvil Docs | Files, Media Objects and Binary Data for an example of downloading a media object on the client.