diff --git a/dist/pyscript_bootstrap_templates-0.2.0-py3-none-any.whl b/dist/pyscript_bootstrap_templates-0.2.0-py3-none-any.whl index d8ece2b..d0f2f41 100644 Binary files a/dist/pyscript_bootstrap_templates-0.2.0-py3-none-any.whl and b/dist/pyscript_bootstrap_templates-0.2.0-py3-none-any.whl differ diff --git a/examples/01_hello_world/resources/pyscript_bootstrap_templates-0.2.0-py3-none-any.whl b/examples/01_hello_world/resources/pyscript_bootstrap_templates-0.2.0-py3-none-any.whl index d8ece2b..d0f2f41 100644 Binary files a/examples/01_hello_world/resources/pyscript_bootstrap_templates-0.2.0-py3-none-any.whl and b/examples/01_hello_world/resources/pyscript_bootstrap_templates-0.2.0-py3-none-any.whl differ diff --git a/examples/01_hello_world/serviceWorker.js b/examples/01_hello_world/serviceWorker.js index 2532e0f..33c9fbd 100644 --- a/examples/01_hello_world/serviceWorker.js +++ b/examples/01_hello_world/serviceWorker.js @@ -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", diff --git a/examples/02_image_filter/config.json b/examples/02_image_filter/config.json index 3bf1990..ecf1757 100644 --- a/examples/02_image_filter/config.json +++ b/examples/02_image_filter/config.json @@ -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", diff --git a/examples/02_image_filter/index.html b/examples/02_image_filter/index.html index dd0de16..80963df 100644 --- a/examples/02_image_filter/index.html +++ b/examples/02_image_filter/index.html @@ -25,7 +25,7 @@ "packages": [ "./resources/pyscript_bootstrap_templates-0.2.0-py3-none-any.whl", "numpy", - "scikit-image" + "opencv-python" ], "paths": [] } diff --git a/examples/02_image_filter/main.py b/examples/02_image_filter/main.py index e380733..76daddd 100644 --- a/examples/02_image_filter/main.py +++ b/examples/02_image_filter/main.py @@ -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 \ No newline at end of file +process_button.onclick = on_process + +# alternatively, you can register the callback function with the file input element: +#image_input.onchange = on_image_change diff --git a/examples/02_image_filter/resources/pyscript_bootstrap_templates-0.2.0-py3-none-any.whl b/examples/02_image_filter/resources/pyscript_bootstrap_templates-0.2.0-py3-none-any.whl index d8ece2b..d0f2f41 100644 Binary files a/examples/02_image_filter/resources/pyscript_bootstrap_templates-0.2.0-py3-none-any.whl and b/examples/02_image_filter/resources/pyscript_bootstrap_templates-0.2.0-py3-none-any.whl differ diff --git a/examples/02_image_filter/serviceWorker.js b/examples/02_image_filter/serviceWorker.js index 9af34de..e02b3a6 100644 --- a/examples/02_image_filter/serviceWorker.js +++ b/examples/02_image_filter/serviceWorker.js @@ -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", diff --git a/examples/03_numpy_grid_demo/resources/pyscript_bootstrap_templates-0.2.0-py3-none-any.whl b/examples/03_numpy_grid_demo/resources/pyscript_bootstrap_templates-0.2.0-py3-none-any.whl index d8ece2b..d0f2f41 100644 Binary files a/examples/03_numpy_grid_demo/resources/pyscript_bootstrap_templates-0.2.0-py3-none-any.whl and b/examples/03_numpy_grid_demo/resources/pyscript_bootstrap_templates-0.2.0-py3-none-any.whl differ diff --git a/examples/03_numpy_grid_demo/serviceWorker.js b/examples/03_numpy_grid_demo/serviceWorker.js index 2b8049d..f66801e 100644 --- a/examples/03_numpy_grid_demo/serviceWorker.js +++ b/examples/03_numpy_grid_demo/serviceWorker.js @@ -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", diff --git a/examples/04_cell_detector/resources/pyscript_bootstrap_templates-0.2.0-py3-none-any.whl b/examples/04_cell_detector/resources/pyscript_bootstrap_templates-0.2.0-py3-none-any.whl index d8ece2b..d0f2f41 100644 Binary files a/examples/04_cell_detector/resources/pyscript_bootstrap_templates-0.2.0-py3-none-any.whl and b/examples/04_cell_detector/resources/pyscript_bootstrap_templates-0.2.0-py3-none-any.whl differ diff --git a/examples/04_cell_detector/serviceWorker.js b/examples/04_cell_detector/serviceWorker.js index d33c682..f3c3004 100644 --- a/examples/04_cell_detector/serviceWorker.js +++ b/examples/04_cell_detector/serviceWorker.js @@ -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",