How Display image on web app?

How to pass image from notebook file to anvil web app?

Hello and welcome,

Please see this fantastic tutorial on using Jupyter with Anvil (which covers passing images between them).

1 Like

That tutorial covers passing images into a notebook. If you also want to pass an image out of a Jupyter notebook, you’ll want to turn it from a file into a Media object before returning it from your @anvil.server.callable function. You can do this by calling anvil.media.from_file(filename, 'image/jpeg') or similar.

You can learn more about working with Media objects from the Anvil docs:
https://anvil.works/docs/media

1 Like

Ah yes. Thank you for that correction.

Sir,Can you send a code snippet of this module because i can’t get image from jupyter notebook to my web app.

Hi, did you managed to get it to work?

I am trying to do 2 things.

  1. Send one image to Colab Notebook from Anvil
  2. Recieve another image from Colab Notebook to Anvil

I see for the first task, the tutorial would work.
I am not able to figure out the code for both the functions in anvil and in colab notebook, for the 2nd task.

Welcome to Anvil’s Community Forum!

If you haven’t used the Forum’s Search feature (the magnifying glass at top), or Anvil’s documentation, you’re really missing something. For example, in the docs, you’ll find gems like this:

FileLoader

“A FileLoader allows you to load files from your computer or mobile device into an Anvil app.”

That should get you started with Task 2.

Hi shrashtisinghal, did you ever find the solution to this problem? I realize it is 6 months later, but I have spent a day trying to do the same thing with no success.

I use fileuploader to pass jpg into my colab notebook function. I simply want to read the image and return the grayscale image to be passed back to my image component on the app side. My code looks like the below:

Note: I know I’m stuck at converting the media image back to an actual file or path that openCV / PIL can interpret as an image to read. The error is img (media object) has no read property. Thank you!

import anvil.media, import cv2, from PIL import Image

@anvil.server.callable

take the image file as the argument in the function

the file is uploaded as a StreamingMedia object (from Anvil)

def resize_pic(file):
with anvil.media.TempFile(file) as file_name:
print(f’file name: {file_name}’)
print(f’file type: {type(file_name)}’) # string with tmp path
img = Image.open(file, mode=‘r’)
return file_name

Helo meredydd, hoping you can help me. Desperately trying to get a basic computer visions app to work that passes image out of a google colab notebook. My issue is two fold, which the docs don’t seem to address:

  1. File uploader Media object image passed to notebook → how to convert to an image or file path that can be read to cv2.imread()
  2. Image out of notebook is numpy array. anvil.media.from_file won’t take numpy array. Conversion to bytes type doesn’t work.
    I think I need to convert image using img_load like you did in tutorial code below (Deploy Machine Learning to the Web with Deepnote). There’s a reference to reading in image with pillow, however, pillow doesn’t seem to be used with temp object.

Any help would be great!
---- from deepnote web app ---------
import anvil.media
@anvil.server.callable
def classify_image(file):
with anvil.media.TempFile(file) as f:
img = load_img(f) ### this is not a PIL pillow method from what I can tell ###
score = get_prediction(img)

I have used Pillow and the Image function as below.

@anvil.server.callable
def maskrcnn(input_furniture_image):
from PIL import Image

with anvil.media.TempFile(input_furniture_image) as filename:
input_furniture = Image.open(filename)
input_furniture.save(’/content/drive/MyDrive/Project P2/Input Furniture/input_furniture.jpg’)

In the webapp code on Anvil, I load the file and send it through a function

def file_loader_1_change(self, file, **event_args):
pass

def button_1_click(self, **event_args):
anvil.server.call(‘maskrcnn’, self.file_loader_1.file)