update examples

This commit is contained in:
Jonas Weinz 2023-06-11 18:43:29 +02:00
parent 1eecb7c0a3
commit dbea51a2b0
12 changed files with 67 additions and 21 deletions

View File

@ -1,5 +1,5 @@
const pwa_version = "01_hello_world_202306041650"
const pwa_version = "01_hello_world_202306111641"
const assets = ["./index.html",
"./main.py",
"./resources/bootstrap.css",

View File

@ -3,7 +3,7 @@
"title": "02_image_filter",
"packages": [
"numpy",
"scikit-image"
"opencv-python"
],
"paths": null,
"pyscript_css_url": "https://pyscript.net/latest/pyscript.css",

View File

@ -25,7 +25,7 @@
"packages": [
"./resources/pyscript_bootstrap_templates-0.2.0-py3-none-any.whl",
"numpy",
"scikit-image"
"opencv-python"
],
"paths": []
}

View File

@ -7,42 +7,88 @@ from pyscript_bootstrap_templates import HTML as HTML
import numpy as np
from PIL import Image
from io import BytesIO
from skimage import filters
import cv2
# create a sobel image with skimage
# create a sobel image with OpenCV
def sobel_image(img):
if len(img.shape) == 3:
img = img[:,:,0] + img[:,:,1] + img[:,:,2]
img = img / 3
img_sobel = filters.sobel(img)
return ((255 * img_sobel) / img_sobel.max()).astype(np.uint8)
img = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
grad_x = cv2.Sobel(img, cv2.CV_64F, 1, 0, ksize=3)
grad_y = cv2.Sobel(img, cv2.CV_64F, 0, 1, ksize=3)
img_sobel = cv2.sqrt(cv2.addWeighted(cv2.pow(grad_x, 2.0), 0.5, cv2.pow(grad_y, 2.0), 0.5, 0))
img_sobel = cv2.normalize(img_sobel, None, 0, 255, cv2.NORM_MINMAX, cv2.CV_8U)
return img_sobel
# create a gaussian blur image with OpenCV
def gaussian_image(img):
return cv2.GaussianBlur(img, (51, 51), 0)
# create a canny edge image with OpenCV
def canny_image(img):
return cv2.Canny(img, 50, 100)
# convert to grayscale
def grayscale_image(img):
return cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
app = bootstrap_templates.PyScriptBootstrapDashboard(parent_element="pyscript_app", brand_name="Image Filter Example")
image_input = bInputs.InputFile(label_text="choose image file", parent=app.sidebar)
filter_map = {
"sobel": sobel_image,
"gaussian": gaussian_image,
"canny": canny_image,
"grayscale": grayscale_image
}
# FIXME: add filter option to InputFile class!
filter_selection = bInputs.InputSelect(label_text="filter", parent=app.sidebar, options=list(filter_map.keys()) )
image_input = bInputs.InputFile(label_text="choose image file", parent=app.sidebar)
image_input._input.set_attribute("accept", "image/*")
toast_container = bHTML.ToastContainer(parent=app.main)
toast_container.position_bottom = 0
toast_container.position_end = 0
process_button = bInputs.ButtonPrimary("process", parent=app.sidebar)
process_button.width = "100%"
process_button.m = 2
def on_image_change(f, *args):
def on_process(*args, **kwargs):
for child in app.main.children.copy():
app.main.remove_child(child)
child.destroy()
file_dictionary = image_input.value
if len(file_dictionary) == 0:
app.alert_danger(message="no image selected")
return
# get first file
name, f = list(file_dictionary.items())[0]
f.seek(0)
img = Image.open(f)
img = np.array(img)
img = sobel_image(np.array(img))
filter_name = filter_selection.value
img = filter_map[filter_name](img)
bHTML.HTML.H3(f"{name} ({img.shape[0]}x{img.shape[1]}):", parent=app.main)
output = bHTML.Image.from_numpy_array(img, parent=app.main)
output.rounded = True
output.rounded_size = 10
output.width = "100%"
output.shadow = bHTML.Shadow.LARGE
bHTML.Toast("Processing Done", title="info", parent=toast_container).show()
app.toast(message="processing done", title="Info")
image_input.onchange = on_image_change
process_button.onclick = on_process
# alternatively, you can register the callback function with the file input element:
#image_input.onchange = on_image_change

View File

@ -1,5 +1,5 @@
const pwa_version = "02_image_filter_202306041650"
const pwa_version = "02_image_filter_202306111641"
const assets = ["./index.html",
"./main.py",
"./resources/bootstrap.css",

View File

@ -1,5 +1,5 @@
const pwa_version = "03_numpy_grid_demo_202306041650"
const pwa_version = "03_numpy_grid_demo_202306111641"
const assets = ["./index.html",
"./main.py",
"./resources/bootstrap.css",

View File

@ -1,5 +1,5 @@
const pwa_version = "04_cell_detector_202306041650"
const pwa_version = "04_cell_detector_202306111641"
const assets = ["./index.html",
"./main.py",
"./resources/bootstrap.css",