update examples
This commit is contained in:
		
										
											Binary file not shown.
										
									
								
							| @ -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", | ||||
|  | ||||
| @ -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", | ||||
|  | ||||
| @ -25,7 +25,7 @@ | ||||
|     "packages": [ | ||||
|         "./resources/pyscript_bootstrap_templates-0.2.0-py3-none-any.whl", | ||||
|         "numpy", | ||||
|         "scikit-image" | ||||
|         "opencv-python" | ||||
|     ], | ||||
|     "paths": [] | ||||
| } | ||||
|  | ||||
| @ -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 | ||||
|  | ||||
										
											Binary file not shown.
										
									
								
							| @ -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", | ||||
|  | ||||
										
											Binary file not shown.
										
									
								
							| @ -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", | ||||
|  | ||||
										
											Binary file not shown.
										
									
								
							| @ -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", | ||||
|  | ||||
		Reference in New Issue
	
	Block a user