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", const assets = ["./index.html",
"./main.py", "./main.py",
"./resources/bootstrap.css", "./resources/bootstrap.css",

View File

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

View File

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

View File

@ -7,42 +7,88 @@ from pyscript_bootstrap_templates import HTML as HTML
import numpy as np import numpy as np
from PIL import Image from PIL import Image
from io import BytesIO 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): def sobel_image(img):
if len(img.shape) == 3: if len(img.shape) == 3:
img = img[:,:,0] + img[:,:,1] + img[:,:,2] img = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
img = img / 3 grad_x = cv2.Sobel(img, cv2.CV_64F, 1, 0, ksize=3)
img_sobel = filters.sobel(img) grad_y = cv2.Sobel(img, cv2.CV_64F, 0, 1, ksize=3)
return ((255 * img_sobel) / img_sobel.max()).astype(np.uint8) 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") 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/*") image_input._input.set_attribute("accept", "image/*")
toast_container = bHTML.ToastContainer(parent=app.main) process_button = bInputs.ButtonPrimary("process", parent=app.sidebar)
toast_container.position_bottom = 0 process_button.width = "100%"
toast_container.position_end = 0 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) f.seek(0)
img = Image.open(f) 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 = bHTML.Image.from_numpy_array(img, parent=app.main)
output.rounded = True output.rounded = True
output.rounded_size = 10 output.rounded_size = 10
output.width = "100%"
output.shadow = bHTML.Shadow.LARGE 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", const assets = ["./index.html",
"./main.py", "./main.py",
"./resources/bootstrap.css", "./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", const assets = ["./index.html",
"./main.py", "./main.py",
"./resources/bootstrap.css", "./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", const assets = ["./index.html",
"./main.py", "./main.py",
"./resources/bootstrap.css", "./resources/bootstrap.css",