I-JEPA input image

%23%20%2F%2F%2F%20script%0A%23%20requires-python%20%3D%20%22%3E%3D3.11%22%0A%23%20dependencies%20%3D%20%5B%0A%23%20%20%20%20%20%22marimo%3D%3D0.23.14%22%2C%0A%23%20%5D%0A%23%20%2F%2F%2F%0A%0Aimport%20marimo%0A%0A__generated_with%20%3D%20%220.23.16%22%0Aapp%20%3D%20marimo.App(width%3D%22full%22%2C%20app_title%3D%22I-JEPA%20input%20image%22)%0A%0A%0A%40app.cell%0Adef%20_()%3A%0A%20%20%20%20import%20marimo%20as%20mo%0A%0A%20%20%20%20return%20(mo%2C)%0A%0A%0A%40app.cell%0Adef%20_()%3A%0A%20%20%20%20import%20base64%0A%20%20%20%20import%20hashlib%0A%20%20%20%20import%20html%0A%20%20%20%20import%20math%0A%20%20%20%20import%20random%0A%20%20%20%20import%20sys%0A%0A%20%20%20%20return%20base64%2C%20hashlib%2C%20html%2C%20math%2C%20random%2C%20sys%0A%0A%0A%40app.cell%0Adef%20_(base64%2C%20html%2C%20mo%2C%20sys)%3A%0A%20%20%20%20IMAGE_WIDTH%20%3D%201254%0A%20%20%20%20IMAGE_HEIGHT%20%3D%201254%0A%20%20%20%20OUTPUT_SIZE%20%3D%20224%0A%0A%20%20%20%20if%20sys.platform%20%3D%3D%20%22emscripten%22%3A%0A%20%20%20%20%20%20%20%20%23%20From%20interactive%2Fi-jepa%2Fdist%2Findex.html%20to%20the%20post's%20shared%20assets.%0A%20%20%20%20%20%20%20%20_image_src%20%3D%20%22..%2F..%2F..%2Fassets%2Fcat.png%22%0A%20%20%20%20else%3A%0A%20%20%20%20%20%20%20%20_image_path%20%3D%20mo.notebook_location().parents%5B1%5D%20%2F%20%22assets%22%20%2F%20%22cat.png%22%0A%20%20%20%20%20%20%20%20_encoded_image%20%3D%20base64.b64encode(_image_path.read_bytes()).decode(%22ascii%22)%0A%20%20%20%20%20%20%20%20_image_src%20%3D%20f%22data%3Aimage%2Fpng%3Bbase64%2C%7B_encoded_image%7D%22%0A%0A%20%20%20%20image_src%20%3D%20html.escape(_image_src%2C%20quote%3DTrue)%0A%20%20%20%20return%20IMAGE_HEIGHT%2C%20IMAGE_WIDTH%2C%20OUTPUT_SIZE%2C%20image_src%0A%0A%0A%40app.cell%0Adef%20_(mo)%3A%0A%20%20%20%20query_params%20%3D%20mo.query_params()%0A%20%20%20%20artifact%20%3D%20query_params.get(%22artifact%22%2C%20%22all%22)%0A%0A%20%20%20%20def%20_float_param(name%2C%20default)%3A%0A%20%20%20%20%20%20%20%20try%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20float(query_params.get(name%2C%20default))%0A%20%20%20%20%20%20%20%20except%20(TypeError%2C%20ValueError)%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20default%0A%0A%20%20%20%20def%20_int_param(name%2C%20default)%3A%0A%20%20%20%20%20%20%20%20try%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20int(query_params.get(name%2C%20default))%0A%20%20%20%20%20%20%20%20except%20(TypeError%2C%20ValueError)%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20default%0A%0A%20%20%20%20initial_area_fraction%20%3D%20_float_param(%22area%22%2C%200.50)%0A%20%20%20%20initial_aspect_ratio%20%3D%20_float_param(%22aspect%22%2C%201.00)%0A%20%20%20%20initial_sample_position%20%3D%20_int_param(%22position%22%2C%200)%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20artifact%2C%0A%20%20%20%20%20%20%20%20initial_area_fraction%2C%0A%20%20%20%20%20%20%20%20initial_aspect_ratio%2C%0A%20%20%20%20%20%20%20%20initial_sample_position%2C%0A%20%20%20%20%20%20%20%20query_params%2C%0A%20%20%20%20)%0A%0A%0A%40app.cell%0Adef%20_(%0A%20%20%20%20initial_area_fraction%2C%0A%20%20%20%20initial_aspect_ratio%2C%0A%20%20%20%20initial_sample_position%2C%0A%20%20%20%20mo%2C%0A%20%20%20%20query_params%2C%0A)%3A%0A%20%20%20%20area_fraction%20%3D%20mo.ui.slider(%0A%20%20%20%20%20%20%20%20start%3D0.30%2C%0A%20%20%20%20%20%20%20%20stop%3D1.00%2C%0A%20%20%20%20%20%20%20%20step%3D0.01%2C%0A%20%20%20%20%20%20%20%20value%3Dinitial_area_fraction%2C%0A%20%20%20%20%20%20%20%20on_change%3Dlambda%20value%3A%20query_params.set(%22area%22%2C%20f%22%7Bvalue%3A.2f%7D%22)%2C%0A%20%20%20%20%20%20%20%20debounce%3DTrue%2C%0A%20%20%20%20%20%20%20%20show_value%3DTrue%2C%0A%20%20%20%20%20%20%20%20include_input%3DTrue%2C%0A%20%20%20%20%20%20%20%20label%3D%22Area%20fraction%20a%22%2C%0A%20%20%20%20%20%20%20%20full_width%3DTrue%2C%0A%20%20%20%20)%0A%20%20%20%20aspect_ratio%20%3D%20mo.ui.slider(%0A%20%20%20%20%20%20%20%20start%3D0.75%2C%0A%20%20%20%20%20%20%20%20stop%3D4%20%2F%203%2C%0A%20%20%20%20%20%20%20%20step%3D0.01%2C%0A%20%20%20%20%20%20%20%20value%3Dinitial_aspect_ratio%2C%0A%20%20%20%20%20%20%20%20on_change%3Dlambda%20value%3A%20query_params.set(%22aspect%22%2C%20f%22%7Bvalue%3A.2f%7D%22)%2C%0A%20%20%20%20%20%20%20%20debounce%3DTrue%2C%0A%20%20%20%20%20%20%20%20show_value%3DTrue%2C%0A%20%20%20%20%20%20%20%20include_input%3DTrue%2C%0A%20%20%20%20%20%20%20%20label%3D%22Aspect%20ratio%20r%22%2C%0A%20%20%20%20%20%20%20%20full_width%3DTrue%2C%0A%20%20%20%20)%0A%20%20%20%20sample_position%20%3D%20mo.ui.button(%0A%20%20%20%20%20%20%20%20value%3Dinitial_sample_position%2C%0A%20%20%20%20%20%20%20%20on_click%3Dlambda%20draw%3A%20(%0A%20%20%20%20%20%20%20%20%20%20%20%20query_params.set(%22position%22%2C%20str(draw%20%2B%201))%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20draw%20%2B%201%2C%0A%20%20%20%20%20%20%20%20)%5B1%5D%2C%0A%20%20%20%20%20%20%20%20label%3D%22New%20position%22%2C%0A%20%20%20%20%20%20%20%20kind%3D%22neutral%22%2C%0A%20%20%20%20%20%20%20%20full_width%3DTrue%2C%0A%20%20%20%20)%0A%20%20%20%20return%20area_fraction%2C%20aspect_ratio%2C%20sample_position%0A%0A%0A%40app.cell%0Adef%20_(%0A%20%20%20%20IMAGE_HEIGHT%2C%0A%20%20%20%20IMAGE_WIDTH%2C%0A%20%20%20%20area_fraction%2C%0A%20%20%20%20aspect_ratio%2C%0A%20%20%20%20hashlib%2C%0A%20%20%20%20math%2C%0A%20%20%20%20random%2C%0A%20%20%20%20sample_position%2C%0A)%3A%0A%20%20%20%20_target_area%20%3D%20area_fraction.value%20*%20IMAGE_HEIGHT%20*%20IMAGE_WIDTH%0A%20%20%20%20_crop_width%20%3D%20round(math.sqrt(_target_area%20*%20aspect_ratio.value))%0A%20%20%20%20_crop_height%20%3D%20round(math.sqrt(_target_area%20%2F%20aspect_ratio.value))%0A%20%20%20%20_valid%20%3D%20_crop_width%20%3C%3D%20IMAGE_WIDTH%20and%20_crop_height%20%3C%3D%20IMAGE_HEIGHT%0A%0A%20%20%20%20if%20_valid%3A%0A%20%20%20%20%20%20%20%20_seed_material%20%3D%20(%0A%20%20%20%20%20%20%20%20%20%20%20%20f%22%7Barea_fraction.value%3A.4f%7D%3A%7Baspect_ratio.value%3A.4f%7D%3A%22%0A%20%20%20%20%20%20%20%20%20%20%20%20f%22%7Bsample_position.value%7D%22%0A%20%20%20%20%20%20%20%20).encode(%22utf-8%22)%0A%20%20%20%20%20%20%20%20_seed%20%3D%20int.from_bytes(%0A%20%20%20%20%20%20%20%20%20%20%20%20hashlib.blake2b(_seed_material%2C%20digest_size%3D8).digest()%2C%20%22big%22%0A%20%20%20%20%20%20%20%20)%0A%20%20%20%20%20%20%20%20_rng%20%3D%20random.Random(_seed)%0A%20%20%20%20%20%20%20%20_left%20%3D%20_rng.randint(0%2C%20IMAGE_WIDTH%20-%20_crop_width)%0A%20%20%20%20%20%20%20%20_top%20%3D%20_rng.randint(0%2C%20IMAGE_HEIGHT%20-%20_crop_height)%0A%20%20%20%20else%3A%0A%20%20%20%20%20%20%20%20_left%20%3D%20None%0A%20%20%20%20%20%20%20%20_top%20%3D%20None%0A%0A%20%20%20%20crop%20%3D%20%7B%0A%20%20%20%20%20%20%20%20%22area_fraction%22%3A%20area_fraction.value%2C%0A%20%20%20%20%20%20%20%20%22aspect_ratio%22%3A%20aspect_ratio.value%2C%0A%20%20%20%20%20%20%20%20%22target_area%22%3A%20_target_area%2C%0A%20%20%20%20%20%20%20%20%22width%22%3A%20_crop_width%2C%0A%20%20%20%20%20%20%20%20%22height%22%3A%20_crop_height%2C%0A%20%20%20%20%20%20%20%20%22valid%22%3A%20_valid%2C%0A%20%20%20%20%20%20%20%20%22left%22%3A%20_left%2C%0A%20%20%20%20%20%20%20%20%22top%22%3A%20_top%2C%0A%20%20%20%20%7D%0A%20%20%20%20return%20(crop%2C)%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(%0A%20%20%20%20IMAGE_HEIGHT%2C%0A%20%20%20%20IMAGE_WIDTH%2C%0A%20%20%20%20area_fraction%2C%0A%20%20%20%20artifact%2C%0A%20%20%20%20aspect_ratio%2C%0A%20%20%20%20crop%2C%0A%20%20%20%20image_src%2C%0A%20%20%20%20mo%2C%0A%20%20%20%20sample_position%2C%0A)%3A%0A%20%20%20%20mo.stop(artifact%20not%20in%20(%22all%22%2C%20%22crop%22))%0A%0A%20%20%20%20if%20crop%5B%22valid%22%5D%3A%0A%20%20%20%20%20%20%20%20_overlay%20%3D%20f%22%22%22%0A%20%20%20%20%20%20%20%20%20%20%3Csvg%20class%3D%22ij-crop-overlay%22%20viewBox%3D%220%200%20%7BIMAGE_WIDTH%7D%20%7BIMAGE_HEIGHT%7D%22%20aria-hidden%3D%22true%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cmask%20id%3D%22ij-crop-window%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20width%3D%22%7BIMAGE_WIDTH%7D%22%20height%3D%22%7BIMAGE_HEIGHT%7D%22%20fill%3D%22white%22%3E%3C%2Frect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20x%3D%22%7Bcrop%5B'left'%5D%7D%22%20y%3D%22%7Bcrop%5B'top'%5D%7D%22%20width%3D%22%7Bcrop%5B'width'%5D%7D%22%20height%3D%22%7Bcrop%5B'height'%5D%7D%22%20fill%3D%22black%22%3E%3C%2Frect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fmask%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20width%3D%22%7BIMAGE_WIDTH%7D%22%20height%3D%22%7BIMAGE_HEIGHT%7D%22%20class%3D%22ij-crop-dim%22%20mask%3D%22url(%23ij-crop-window)%22%3E%3C%2Frect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20x%3D%22%7Bcrop%5B'left'%5D%7D%22%20y%3D%22%7Bcrop%5B'top'%5D%7D%22%20width%3D%22%7Bcrop%5B'width'%5D%7D%22%20height%3D%22%7Bcrop%5B'height'%5D%7D%22%20class%3D%22ij-crop-box%22%3E%3C%2Frect%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2Fsvg%3E%0A%20%20%20%20%20%20%20%20%22%22%22%0A%20%20%20%20%20%20%20%20_calculation%20%3D%20f%22%22%22%0A%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22ij-calculation%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%3ET%20%3D%20aHW%20%3D%20%7Bcrop%5B'area_fraction'%5D%3A.2f%7D%20%C3%97%20%7BIMAGE_HEIGHT%3A%2C%7D%20%C3%97%20%7BIMAGE_WIDTH%3A%2C%7D%20%3D%20%7Bcrop%5B'target_area'%5D%3A%2C.0f%7D%20px%C2%B2%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%3Ew%20%3D%20round(%E2%88%9A(Tr))%20%3D%20%7Bcrop%5B'width'%5D%3A%2C%7D%20px%20%26nbsp%3B%C2%B7%26nbsp%3B%20h%20%3D%20round(%E2%88%9A(T%2Fr))%20%3D%20%7Bcrop%5B'height'%5D%3A%2C%7D%20px%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%3Esampled%20(top%2C%20left)%20%3D%20(%7Bcrop%5B'top'%5D%3A%2C%7D%2C%20%7Bcrop%5B'left'%5D%3A%2C%7D)%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%22%22%22%0A%20%20%20%20%20%20%20%20_alt%20%3D%20(%0A%20%20%20%20%20%20%20%20%20%20%20%20f%22The%20cat%20image%20with%20a%20%7Bcrop%5B'width'%5D%7D%20by%20%7Bcrop%5B'height'%5D%7D%20pixel%20crop%20%22%0A%20%20%20%20%20%20%20%20%20%20%20%20f%22starting%20at%20top%20%7Bcrop%5B'top'%5D%7D%20and%20left%20%7Bcrop%5B'left'%5D%7D.%22%0A%20%20%20%20%20%20%20%20)%0A%20%20%20%20else%3A%0A%20%20%20%20%20%20%20%20_overlay%20%3D%20%22%22%0A%20%20%20%20%20%20%20%20_calculation%20%3D%20f%22%22%22%0A%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22ij-calculation%20ij-rejected%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%3ET%20%3D%20aHW%20%3D%20%7Bcrop%5B'area_fraction'%5D%3A.2f%7D%20%C3%97%20%7BIMAGE_HEIGHT%3A%2C%7D%20%C3%97%20%7BIMAGE_WIDTH%3A%2C%7D%20%3D%20%7Bcrop%5B'target_area'%5D%3A%2C.0f%7D%20px%C2%B2%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%3Ew%20%3D%20%7Bcrop%5B'width'%5D%3A%2C%7D%20px%20%26nbsp%3B%C2%B7%26nbsp%3B%20h%20%3D%20%7Bcrop%5B'height'%5D%3A%2C%7D%20px%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%3EThis%20rectangle%20does%20not%20fit%20inside%20the%20input%2C%20so%20the%20sampler%20would%20reject%20this%20draw.%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%22%22%22%0A%20%20%20%20%20%20%20%20_alt%20%3D%20%22The%20cat%20input%20image%3B%20the%20selected%20crop%20geometry%20is%20too%20large%20to%20fit.%22%0A%0A%20%20%20%20_visual%20%3D%20mo.Html(%0A%20%20%20%20%20%20%20%20f%22%22%22%0A%20%20%20%20%20%20%20%20%3Cstyle%3E%0A%20%20%20%20%20%20%20%20%20%20%23ij-input-size%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20--ij-dimension%3A%20%232f5d8c%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20--ij-muted%3A%20%235f6368%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20--ij-border%3A%20%23d7d9dc%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20--ij-crop%3A%20%23cf4f24%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20--ij-rejected%3A%20%23a33a31%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20box-sizing%3A%20border-box%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20inherit%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin%3A%200%20auto%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20max-width%3A%20680px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%200.5rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-input-size%20*%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20box-sizing%3A%20border-box%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-input-size%20.ij-width%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20align-items%3A%20center%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20var(--ij-dimension)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20flex%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20gap%3A%200.65rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin%3A%200%200%200.45rem%202.25rem%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-input-size%20.ij-width%3A%3Abefore%2C%0A%20%20%20%20%20%20%20%20%20%20%23ij-input-size%20.ij-width%3A%3Aafter%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20var(--ij-dimension)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20content%3A%20%22%22%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20flex%3A%201%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20height%3A%201px%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-input-size%20.ij-dimension-label%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%200.9rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-variant-numeric%3A%20tabular-nums%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-weight%3A%20500%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20white-space%3A%20nowrap%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-input-size%20.ij-image-row%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20align-items%3A%20stretch%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20grid%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20gap%3A%200.55rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20grid-template-columns%3A%201.7rem%20minmax(0%2C%201fr)%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-input-size%20.ij-height%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20align-items%3A%20center%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20var(--ij-dimension)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20flex%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20gap%3A%200.65rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20justify-content%3A%20center%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20writing-mode%3A%20vertical-rl%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-input-size%20.ij-height%3A%3Abefore%2C%0A%20%20%20%20%20%20%20%20%20%20%23ij-input-size%20.ij-height%3A%3Aafter%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20var(--ij-dimension)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20content%3A%20%22%22%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20flex%3A%201%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20width%3A%201px%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-input-size%20img%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20border%3A%201px%20solid%20var(--ij-border)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20block%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20height%3A%20auto%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20max-width%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-input-size%20.ij-image-stage%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20position%3A%20relative%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-input-size%20.ij-crop-overlay%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20block%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20height%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20inset%3A%200%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20position%3A%20absolute%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-input-size%20.ij-crop-dim%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20fill%3A%20rgb(0%200%200%20%2F%2045%25)%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-input-size%20.ij-crop-box%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20fill%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke%3A%20var(--ij-crop)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke-width%3A%209%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20vector-effect%3A%20non-scaling-stroke%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-input-size%20figcaption%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20var(--ij-muted)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-family%3A%20ui-monospace%2C%20SFMono-Regular%2C%20Menlo%2C%20Consolas%2C%20monospace%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%200.88rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin%3A%200.6rem%200%200%202.25rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20text-align%3A%20center%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-input-size%20.ij-calculation%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20var(--ij-muted)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-family%3A%20ui-monospace%2C%20SFMono-Regular%2C%20Menlo%2C%20Consolas%2C%20monospace%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%200.84rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20line-height%3A%201.55%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin%3A%200.7rem%200%200%202.25rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20text-align%3A%20center%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-input-size%20.ij-rejected%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20var(--ij-rejected)%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%40media%20(max-width%3A%20420px)%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%23ij-input-size%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%200.25rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%23ij-input-size%20.ij-width%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20margin-left%3A%201.8rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%23ij-input-size%20.ij-image-row%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20gap%3A%200.35rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20grid-template-columns%3A%201.45rem%20minmax(0%2C%201fr)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%23ij-input-size%20figcaption%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20margin-left%3A%201.8rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%23ij-input-size%20.ij-calculation%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20margin-left%3A%201.8rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%40media%20(prefers-color-scheme%3A%20dark)%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%23ij-input-size%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20--ij-dimension%3A%20%239bc3ec%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20--ij-muted%3A%20%23b8bdc3%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20--ij-border%3A%20%23555a60%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20--ij-crop%3A%20%23ff9a68%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20--ij-rejected%3A%20%23ff9990%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%20%20%20%20%3C%2Fstyle%3E%0A%0A%20%20%20%20%20%20%20%20%3Cfigure%20id%3D%22ij-input-size%22%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22ij-width%22%20aria-hidden%3D%22true%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22ij-dimension-label%22%3Ewidth%20%3D%20%7BIMAGE_WIDTH%3A%2C%7D%20px%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22ij-image-row%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22ij-height%22%20aria-hidden%3D%22true%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22ij-dimension-label%22%3Eheight%20%3D%20%7BIMAGE_HEIGHT%3A%2C%7D%20px%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22ij-image-stage%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cimg%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20src%3D%22%7Bimage_src%7D%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width%3D%22%7BIMAGE_WIDTH%7D%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height%3D%22%7BIMAGE_HEIGHT%7D%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20alt%3D%22%7B_alt%7D%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B_overlay%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cfigcaption%3Eshape%20%3D%20(height%2C%20width)%20%3D%20(%7BIMAGE_HEIGHT%3A%2C%7D%2C%20%7BIMAGE_WIDTH%3A%2C%7D)%3C%2Ffigcaption%3E%0A%20%20%20%20%20%20%20%20%20%20%7B_calculation%7D%0A%20%20%20%20%20%20%20%20%3C%2Ffigure%3E%0A%20%20%20%20%20%20%20%20%22%22%22%0A%20%20%20%20)%0A%20%20%20%20_controls%20%3D%20mo.vstack(%0A%20%20%20%20%20%20%20%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20mo.hstack(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5Barea_fraction%2C%20aspect_ratio%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20widths%3D%22equal%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20wrap%3DTrue%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20align%3D%22end%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20gap%3D0.8%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20sample_position%2C%0A%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20gap%3D0.55%2C%0A%20%20%20%20)%0A%20%20%20%20mo.vstack(%5B_controls%2C%20_visual%5D%2C%20gap%3D0.8).style(%0A%20%20%20%20%20%20%20%20%7B%22max-width%22%3A%20%22680px%22%2C%20%22margin%22%3A%20%220%20auto%22%2C%20%22padding%22%3A%20%220.5rem%22%7D%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(IMAGE_HEIGHT%2C%20IMAGE_WIDTH%2C%20OUTPUT_SIZE%2C%20artifact%2C%20crop%2C%20image_src%2C%20mo)%3A%0A%20%20%20%20mo.stop(artifact%20not%20in%20(%22all%22%2C%20%22resize%22))%0A%0A%20%20%20%20if%20crop%5B%22valid%22%5D%3A%0A%20%20%20%20%20%20%20%20_resize_content%20%3D%20f%22%22%22%0A%20%20%20%20%20%20%20%20%20%20%3Csvg%20class%3D%22ij-image-defs%22%20aria-hidden%3D%22true%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cimage%20id%3D%22ij-resize-cat-source%22%20href%3D%22%7Bimage_src%7D%22%20width%3D%22%7BIMAGE_WIDTH%7D%22%20height%3D%22%7BIMAGE_HEIGHT%7D%22%3E%3C%2Fimage%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2Fsvg%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22ij-resize-part%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22ij-part-label%22%3Esampled%20crop%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Csvg%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20class%3D%22ij-sample-frame%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20style%3D%22aspect-ratio%3A%20%7Bcrop%5B'width'%5D%7D%20%2F%20%7Bcrop%5B'height'%5D%7D%3B%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20viewBox%3D%22%7Bcrop%5B'left'%5D%7D%20%7Bcrop%5B'top'%5D%7D%20%7Bcrop%5B'width'%5D%7D%20%7Bcrop%5B'height'%5D%7D%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20preserveAspectRatio%3D%22none%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20role%3D%22img%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20aria-label%3D%22The%20sampled%20crop%20before%20resizing%3B%20it%20is%20%7Bcrop%5B'width'%5D%7D%20pixels%20wide%20and%20%7Bcrop%5B'height'%5D%7D%20pixels%20high.%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20href%3D%22%23ij-resize-cat-source%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fsvg%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22ij-shape%22%3E%7Bcrop%5B'width'%5D%3A%2C%7D%20%C3%97%20%7Bcrop%5B'height'%5D%3A%2C%7D%20px%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22ij-resize-transition%22%20aria-label%3D%22Resize%20the%20sampled%20crop%20to%20%7BOUTPUT_SIZE%7D%20by%20%7BOUTPUT_SIZE%7D%20pixels%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%3Eresize%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22ij-arrow%20ij-arrow-right%22%20aria-hidden%3D%22true%22%3E%E2%86%92%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22ij-arrow%20ij-arrow-down%22%20aria-hidden%3D%22true%22%3E%E2%86%93%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22ij-resize-part%20ij-output-part%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22ij-part-label%22%3Eresized%20sample%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22ij-output-width%22%20aria-hidden%3D%22true%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%3E%7BOUTPUT_SIZE%7D%20px%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22ij-output-row%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22ij-output-height%22%20aria-hidden%3D%22true%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%3E%7BOUTPUT_SIZE%7D%20px%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Csvg%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20class%3D%22ij-output-image%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20viewBox%3D%22%7Bcrop%5B'left'%5D%7D%20%7Bcrop%5B'top'%5D%7D%20%7Bcrop%5B'width'%5D%7D%20%7Bcrop%5B'height'%5D%7D%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20preserveAspectRatio%3D%22none%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20role%3D%22img%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20aria-label%3D%22The%20sampled%20crop%20resized%20to%20%7BOUTPUT_SIZE%7D%20pixels%20wide%20and%20%7BOUTPUT_SIZE%7D%20pixels%20high.%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20href%3D%22%23ij-resize-cat-source%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fsvg%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22ij-shape%22%3E%7BOUTPUT_SIZE%7D%20%C3%97%20%7BOUTPUT_SIZE%7D%20px%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%22%22%22%0A%20%20%20%20else%3A%0A%20%20%20%20%20%20%20%20_resize_content%20%3D%20%22%22%22%0A%20%20%20%20%20%20%20%20%20%20%3Cp%20class%3D%22ij-no-resize%22%3ENo%20sample%20is%20resized%20because%20the%20current%20crop%20geometry%20would%20be%20rejected.%3C%2Fp%3E%0A%20%20%20%20%20%20%20%20%22%22%22%0A%0A%20%20%20%20mo.Html(%0A%20%20%20%20%20%20%20%20f%22%22%22%0A%20%20%20%20%20%20%20%20%3Cstyle%3E%0A%20%20%20%20%20%20%20%20%20%20%23ij-resize-step%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20--ij-dimension%3A%20%232f5d8c%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20--ij-muted%3A%20%235f6368%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20--ij-border%3A%20%23d7d9dc%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20--ij-rejected%3A%20%23a33a31%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20align-items%3A%20center%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20box-sizing%3A%20border-box%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20grid%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20gap%3A%201.1rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20grid-template-columns%3A%20minmax(260px%2C%201fr)%205rem%2015.5rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin%3A%200%20auto%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20max-width%3A%20820px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%200.75rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-resize-step%20*%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20box-sizing%3A%20border-box%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-resize-step%20.ij-resize-part%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20min-width%3A%200%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20text-align%3A%20center%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-resize-step%20.ij-image-defs%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20height%3A%200%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20overflow%3A%20hidden%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20position%3A%20absolute%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20width%3A%200%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-resize-step%20.ij-part-label%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20var(--ij-muted)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%200.82rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-weight%3A%20500%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20letter-spacing%3A%200.04em%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-bottom%3A%200.45rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20text-transform%3A%20uppercase%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-resize-step%20.ij-sample-frame%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20border%3A%201px%20solid%20var(--ij-border)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20block%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin%3A%200%20auto%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20max-height%3A%20320px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20max-width%3A%20360px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-resize-step%20.ij-output-image%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20border%3A%201px%20solid%20var(--ij-border)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20block%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-resize-step%20.ij-shape%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20var(--ij-muted)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-family%3A%20ui-monospace%2C%20SFMono-Regular%2C%20Menlo%2C%20Consolas%2C%20monospace%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%200.84rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-top%3A%200.45rem%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-resize-step%20.ij-resize-transition%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20align-items%3A%20center%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20var(--ij-dimension)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20flex%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20flex-direction%3A%20column%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%200.84rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-weight%3A%20500%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20gap%3A%200.15rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20justify-content%3A%20center%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-resize-step%20.ij-arrow%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%202rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20line-height%3A%201%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-resize-step%20.ij-arrow-down%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-resize-step%20.ij-output-width%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20align-items%3A%20center%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20var(--ij-dimension)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20flex%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%200.78rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20gap%3A%200.45rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin%3A%200%20auto%200.35rem%201.6rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20%7BOUTPUT_SIZE%7Dpx%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-resize-step%20.ij-output-width%3A%3Abefore%2C%0A%20%20%20%20%20%20%20%20%20%20%23ij-resize-step%20.ij-output-width%3A%3Aafter%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20var(--ij-dimension)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20content%3A%20%22%22%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20flex%3A%201%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20height%3A%201px%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-resize-step%20.ij-output-row%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20grid%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20gap%3A%200.35rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20grid-template-columns%3A%201.25rem%20%7BOUTPUT_SIZE%7Dpx%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20justify-content%3A%20center%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-resize-step%20.ij-output-height%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20align-items%3A%20center%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20var(--ij-dimension)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20flex%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%200.78rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20gap%3A%200.45rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20justify-content%3A%20center%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20writing-mode%3A%20vertical-rl%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-resize-step%20.ij-output-height%3A%3Abefore%2C%0A%20%20%20%20%20%20%20%20%20%20%23ij-resize-step%20.ij-output-height%3A%3Aafter%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20var(--ij-dimension)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20content%3A%20%22%22%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20flex%3A%201%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20width%3A%201px%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-resize-step%20.ij-output-image%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20height%3A%20%7BOUTPUT_SIZE%7Dpx%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20%7BOUTPUT_SIZE%7Dpx%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-resize-step%20.ij-no-resize%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20var(--ij-rejected)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20grid-column%3A%201%20%2F%20-1%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin%3A%200%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20text-align%3A%20center%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%40media%20(max-width%3A%20680px)%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%23ij-resize-step%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20grid-template-columns%3A%20minmax(0%2C%201fr)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20justify-items%3A%20center%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%23ij-resize-step%20.ij-resize-part%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%23ij-resize-step%20.ij-resize-transition%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20min-height%3A%203.25rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%23ij-resize-step%20.ij-arrow-right%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%23ij-resize-step%20.ij-arrow-down%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20inline%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%40media%20(prefers-color-scheme%3A%20dark)%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%23ij-resize-step%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20--ij-dimension%3A%20%239bc3ec%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20--ij-muted%3A%20%23b8bdc3%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20--ij-border%3A%20%23555a60%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20--ij-rejected%3A%20%23ff9990%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%20%20%20%20%3C%2Fstyle%3E%0A%0A%20%20%20%20%20%20%20%20%3Csection%20id%3D%22ij-resize-step%22%20aria-label%3D%22Resize%20the%20sampled%20crop%20to%20a%20fixed%20224%20by%20224%20input%22%3E%0A%20%20%20%20%20%20%20%20%20%20%7B_resize_content%7D%0A%20%20%20%20%20%20%20%20%3C%2Fsection%3E%0A%20%20%20%20%20%20%20%20%22%22%22%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(IMAGE_HEIGHT%2C%20IMAGE_WIDTH%2C%20OUTPUT_SIZE%2C%20artifact%2C%20crop%2C%20image_src%2C%20mo)%3A%0A%20%20%20%20mo.stop(artifact%20not%20in%20(%22all%22%2C%20%22patches%22))%0A%0A%20%20%20%20PATCH_SIZE%20%3D%2014%0A%20%20%20%20GRID_SIZE%20%3D%20OUTPUT_SIZE%20%2F%2F%20PATCH_SIZE%0A%0A%20%20%20%20if%20crop%5B%22valid%22%5D%3A%0A%20%20%20%20%20%20%20%20_vertical_lines%20%3D%20%22%20%22.join(%0A%20%20%20%20%20%20%20%20%20%20%20%20f%22M%20%7Bcolumn%20*%20PATCH_SIZE%7D%200%20V%20%7BOUTPUT_SIZE%7D%22%0A%20%20%20%20%20%20%20%20%20%20%20%20for%20column%20in%20range(1%2C%20GRID_SIZE)%0A%20%20%20%20%20%20%20%20)%0A%20%20%20%20%20%20%20%20_horizontal_lines%20%3D%20%22%20%22.join(%0A%20%20%20%20%20%20%20%20%20%20%20%20f%22M%200%20%7Brow%20*%20PATCH_SIZE%7D%20H%20%7BOUTPUT_SIZE%7D%22%0A%20%20%20%20%20%20%20%20%20%20%20%20for%20row%20in%20range(1%2C%20GRID_SIZE)%0A%20%20%20%20%20%20%20%20)%0A%20%20%20%20%20%20%20%20_grid_path%20%3D%20f%22%7B_vertical_lines%7D%20%7B_horizontal_lines%7D%22%0A%20%20%20%20%20%20%20%20_highlight_column%20%3D%207%0A%20%20%20%20%20%20%20%20_highlight_row%20%3D%206%0A%20%20%20%20%20%20%20%20_grid_content%20%3D%20f%22%22%22%0A%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22ij-grid-width%22%20aria-hidden%3D%22true%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%3E%7BGRID_SIZE%7D%20columns%20%C3%97%20%7BPATCH_SIZE%7D%20px%20%3D%20%7BOUTPUT_SIZE%7D%20px%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22ij-grid-row%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22ij-grid-height%22%20aria-hidden%3D%22true%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%3E%7BGRID_SIZE%7D%20rows%20%C3%97%20%7BPATCH_SIZE%7D%20px%20%3D%20%7BOUTPUT_SIZE%7D%20px%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Csvg%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20class%3D%22ij-grid-image%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20viewBox%3D%220%200%20%7BOUTPUT_SIZE%7D%20%7BOUTPUT_SIZE%7D%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20role%3D%22img%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20aria-label%3D%22The%20resized%20cat%20sample%20divided%20into%20a%20sixteen%20by%20sixteen%20grid%20of%20fourteen%20by%20fourteen%20pixel%20patches.%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cimage%20id%3D%22ij-grid-cat-source%22%20href%3D%22%7Bimage_src%7D%22%20width%3D%22%7BIMAGE_WIDTH%7D%22%20height%3D%22%7BIMAGE_HEIGHT%7D%22%3E%3C%2Fimage%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Csvg%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width%3D%22%7BOUTPUT_SIZE%7D%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height%3D%22%7BOUTPUT_SIZE%7D%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20viewBox%3D%22%7Bcrop%5B'left'%5D%7D%20%7Bcrop%5B'top'%5D%7D%20%7Bcrop%5B'width'%5D%7D%20%7Bcrop%5B'height'%5D%7D%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20preserveAspectRatio%3D%22none%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20href%3D%22%23ij-grid-cat-source%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fsvg%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22%7B_grid_path%7D%22%20class%3D%22ij-grid-shadow%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22%7B_grid_path%7D%22%20class%3D%22ij-grid-lines%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22%7BOUTPUT_SIZE%7D%22%20height%3D%22%7BOUTPUT_SIZE%7D%22%20class%3D%22ij-grid-border%22%3E%3C%2Frect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20x%3D%22%7B_highlight_column%20*%20PATCH_SIZE%7D%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20y%3D%22%7B_highlight_row%20*%20PATCH_SIZE%7D%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width%3D%22%7BPATCH_SIZE%7D%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height%3D%22%7BPATCH_SIZE%7D%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20class%3D%22ij-highlight-patch%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3E%3C%2Frect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fsvg%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22ij-grid-summary%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%7BGRID_SIZE%7D%20%C3%97%20%7BGRID_SIZE%7D%20%3D%20%7BGRID_SIZE%20*%20GRID_SIZE%7D%20patches%20%26nbsp%3B%C2%B7%26nbsp%3B%20highlighted%20patch%20%3D%20%7BPATCH_SIZE%7D%20%C3%97%20%7BPATCH_SIZE%7D%20px%0A%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%22%22%22%0A%20%20%20%20else%3A%0A%20%20%20%20%20%20%20%20_grid_content%20%3D%20%22%22%22%0A%20%20%20%20%20%20%20%20%20%20%3Cp%20class%3D%22ij-no-grid%22%3ENo%20patch%20grid%20is%20formed%20because%20the%20current%20crop%20geometry%20would%20be%20rejected.%3C%2Fp%3E%0A%20%20%20%20%20%20%20%20%22%22%22%0A%0A%20%20%20%20mo.Html(%0A%20%20%20%20%20%20%20%20f%22%22%22%0A%20%20%20%20%20%20%20%20%3Cstyle%3E%0A%20%20%20%20%20%20%20%20%20%20%23ij-patch-grid%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20--ij-dimension%3A%20%232f5d8c%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20--ij-muted%3A%20%235f6368%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20--ij-border%3A%20%23d7d9dc%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20--ij-highlight%3A%20%23cf4f24%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20--ij-rejected%3A%20%23a33a31%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20box-sizing%3A%20border-box%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin%3A%200%20auto%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20max-width%3A%20540px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%200.75rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-patch-grid%20*%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20box-sizing%3A%20border-box%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-patch-grid%20.ij-grid-width%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20align-items%3A%20center%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20var(--ij-dimension)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20flex%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%200.8rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20gap%3A%200.55rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin%3A%200%200%200.4rem%201.65rem%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-patch-grid%20.ij-grid-width%3A%3Abefore%2C%0A%20%20%20%20%20%20%20%20%20%20%23ij-patch-grid%20.ij-grid-width%3A%3Aafter%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20var(--ij-dimension)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20content%3A%20%22%22%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20flex%3A%201%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20height%3A%201px%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-patch-grid%20.ij-grid-row%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20grid%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20gap%3A%200.4rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20grid-template-columns%3A%201.25rem%20minmax(0%2C%201fr)%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-patch-grid%20.ij-grid-height%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20align-items%3A%20center%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20var(--ij-dimension)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20flex%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%200.8rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20gap%3A%200.55rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20justify-content%3A%20center%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20writing-mode%3A%20vertical-rl%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-patch-grid%20.ij-grid-height%3A%3Abefore%2C%0A%20%20%20%20%20%20%20%20%20%20%23ij-patch-grid%20.ij-grid-height%3A%3Aafter%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20var(--ij-dimension)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20content%3A%20%22%22%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20flex%3A%201%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20width%3A%201px%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-patch-grid%20.ij-grid-image%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20block%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20height%3A%20auto%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-patch-grid%20.ij-grid-shadow%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20fill%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke%3A%20rgb(0%200%200%20%2F%2072%25)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke-width%3A%201.5%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20vector-effect%3A%20non-scaling-stroke%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-patch-grid%20.ij-grid-lines%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20fill%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke%3A%20rgb(255%20255%20255%20%2F%2082%25)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke-width%3A%200.65%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20vector-effect%3A%20non-scaling-stroke%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-patch-grid%20.ij-grid-border%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20fill%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke%3A%20rgb(0%200%200%20%2F%2082%25)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke-width%3A%201.5%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20vector-effect%3A%20non-scaling-stroke%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-patch-grid%20.ij-highlight-patch%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20fill%3A%20rgb(207%2079%2036%20%2F%2022%25)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke%3A%20var(--ij-highlight)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke-width%3A%202.5%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20vector-effect%3A%20non-scaling-stroke%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-patch-grid%20.ij-grid-summary%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20var(--ij-muted)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-family%3A%20ui-monospace%2C%20SFMono-Regular%2C%20Menlo%2C%20Consolas%2C%20monospace%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%200.84rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin%3A%200.55rem%200%200%201.65rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20text-align%3A%20center%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-patch-grid%20.ij-no-grid%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20var(--ij-rejected)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin%3A%200%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20text-align%3A%20center%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%40media%20(max-width%3A%20420px)%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%23ij-patch-grid%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%200.4rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%23ij-patch-grid%20.ij-grid-width%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%23ij-patch-grid%20.ij-grid-summary%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20margin-left%3A%201.45rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%23ij-patch-grid%20.ij-grid-width%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%23ij-patch-grid%20.ij-grid-height%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%200.72rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%40media%20(prefers-color-scheme%3A%20dark)%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%23ij-patch-grid%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20--ij-dimension%3A%20%239bc3ec%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20--ij-muted%3A%20%23b8bdc3%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20--ij-border%3A%20%23555a60%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20--ij-highlight%3A%20%23ff9a68%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20--ij-rejected%3A%20%23ff9990%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%20%20%20%20%3C%2Fstyle%3E%0A%0A%20%20%20%20%20%20%20%20%3Csection%20id%3D%22ij-patch-grid%22%20aria-label%3D%22View%20the%20resized%20sample%20as%20image%20patches%22%3E%0A%20%20%20%20%20%20%20%20%20%20%7B_grid_content%7D%0A%20%20%20%20%20%20%20%20%3C%2Fsection%3E%0A%20%20%20%20%20%20%20%20%22%22%22%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(mo)%3A%0A%20%20%20%20target_area_fraction%20%3D%20mo.ui.slider(%0A%20%20%20%20%20%20%20%20start%3D0.15%2C%0A%20%20%20%20%20%20%20%20stop%3D0.20%2C%0A%20%20%20%20%20%20%20%20step%3D0.01%2C%0A%20%20%20%20%20%20%20%20value%3D0.18%2C%0A%20%20%20%20%20%20%20%20debounce%3DTrue%2C%0A%20%20%20%20%20%20%20%20show_value%3DTrue%2C%0A%20%20%20%20%20%20%20%20include_input%3DTrue%2C%0A%20%20%20%20%20%20%20%20label%3D%22Target-block%20area%20fraction%22%2C%0A%20%20%20%20%20%20%20%20full_width%3DTrue%2C%0A%20%20%20%20)%0A%20%20%20%20target_aspect_ratio%20%3D%20mo.ui.slider(%0A%20%20%20%20%20%20%20%20start%3D0.75%2C%0A%20%20%20%20%20%20%20%20stop%3D1.50%2C%0A%20%20%20%20%20%20%20%20step%3D0.05%2C%0A%20%20%20%20%20%20%20%20value%3D1.00%2C%0A%20%20%20%20%20%20%20%20debounce%3DTrue%2C%0A%20%20%20%20%20%20%20%20show_value%3DTrue%2C%0A%20%20%20%20%20%20%20%20include_input%3DTrue%2C%0A%20%20%20%20%20%20%20%20label%3D%22Target%20aspect%20ratio%20(height%20%C3%B7%20width)%22%2C%0A%20%20%20%20%20%20%20%20full_width%3DTrue%2C%0A%20%20%20%20)%0A%20%20%20%20context_area_fraction%20%3D%20mo.ui.slider(%0A%20%20%20%20%20%20%20%20start%3D0.85%2C%0A%20%20%20%20%20%20%20%20stop%3D1.00%2C%0A%20%20%20%20%20%20%20%20step%3D0.01%2C%0A%20%20%20%20%20%20%20%20value%3D0.90%2C%0A%20%20%20%20%20%20%20%20debounce%3DTrue%2C%0A%20%20%20%20%20%20%20%20show_value%3DTrue%2C%0A%20%20%20%20%20%20%20%20include_input%3DTrue%2C%0A%20%20%20%20%20%20%20%20label%3D%22Context-block%20area%20fraction%22%2C%0A%20%20%20%20%20%20%20%20full_width%3DTrue%2C%0A%20%20%20%20)%0A%20%20%20%20sample_masks%20%3D%20mo.ui.button(%0A%20%20%20%20%20%20%20%20value%3D0%2C%0A%20%20%20%20%20%20%20%20on_click%3Dlambda%20draw%3A%20draw%20%2B%201%2C%0A%20%20%20%20%20%20%20%20label%3D%22New%20locations%22%2C%0A%20%20%20%20%20%20%20%20kind%3D%22neutral%22%2C%0A%20%20%20%20%20%20%20%20full_width%3DTrue%2C%0A%20%20%20%20)%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20context_area_fraction%2C%0A%20%20%20%20%20%20%20%20sample_masks%2C%0A%20%20%20%20%20%20%20%20target_area_fraction%2C%0A%20%20%20%20%20%20%20%20target_aspect_ratio%2C%0A%20%20%20%20)%0A%0A%0A%40app.cell%0Adef%20_(%0A%20%20%20%20context_area_fraction%2C%0A%20%20%20%20hashlib%2C%0A%20%20%20%20math%2C%0A%20%20%20%20random%2C%0A%20%20%20%20sample_masks%2C%0A%20%20%20%20target_area_fraction%2C%0A%20%20%20%20target_aspect_ratio%2C%0A)%3A%0A%20%20%20%20_grid_size%20%3D%2016%0A%20%20%20%20_number_of_targets%20%3D%204%0A%0A%20%20%20%20_target_budget%20%3D%20int(%0A%20%20%20%20%20%20%20%20_grid_size%20*%20_grid_size%20*%20target_area_fraction.value%0A%20%20%20%20)%0A%20%20%20%20_target_height%20%3D%20round(%0A%20%20%20%20%20%20%20%20math.sqrt(_target_budget%20*%20target_aspect_ratio.value)%0A%20%20%20%20)%0A%20%20%20%20_target_width%20%3D%20round(%0A%20%20%20%20%20%20%20%20math.sqrt(_target_budget%20%2F%20target_aspect_ratio.value)%0A%20%20%20%20)%0A%20%20%20%20while%20_target_height%20%3E%3D%20_grid_size%3A%0A%20%20%20%20%20%20%20%20_target_height%20-%3D%201%0A%20%20%20%20while%20_target_width%20%3E%3D%20_grid_size%3A%0A%20%20%20%20%20%20%20%20_target_width%20-%3D%201%0A%0A%20%20%20%20_context_budget%20%3D%20int(%0A%20%20%20%20%20%20%20%20_grid_size%20*%20_grid_size%20*%20context_area_fraction.value%0A%20%20%20%20)%0A%20%20%20%20_context_height%20%3D%20round(math.sqrt(_context_budget))%0A%20%20%20%20_context_width%20%3D%20round(math.sqrt(_context_budget))%0A%20%20%20%20while%20_context_height%20%3E%3D%20_grid_size%3A%0A%20%20%20%20%20%20%20%20_context_height%20-%3D%201%0A%20%20%20%20while%20_context_width%20%3E%3D%20_grid_size%3A%0A%20%20%20%20%20%20%20%20_context_width%20-%3D%201%0A%0A%20%20%20%20_seed_material%20%3D%20(%0A%20%20%20%20%20%20%20%20f%22%7Btarget_area_fraction.value%3A.4f%7D%3A%22%0A%20%20%20%20%20%20%20%20f%22%7Btarget_aspect_ratio.value%3A.4f%7D%3A%22%0A%20%20%20%20%20%20%20%20f%22%7Bcontext_area_fraction.value%3A.4f%7D%3A%22%0A%20%20%20%20%20%20%20%20f%22%7Bsample_masks.value%7D%22%0A%20%20%20%20).encode(%22utf-8%22)%0A%20%20%20%20_seed%20%3D%20int.from_bytes(%0A%20%20%20%20%20%20%20%20hashlib.blake2b(_seed_material%2C%20digest_size%3D8).digest()%2C%20%22big%22%0A%20%20%20%20)%0A%20%20%20%20_rng%20%3D%20random.Random(_seed)%0A%0A%20%20%20%20def%20_rectangle_cells(top%2C%20left%2C%20height%2C%20width)%3A%0A%20%20%20%20%20%20%20%20return%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20row%20*%20_grid_size%20%2B%20column%0A%20%20%20%20%20%20%20%20%20%20%20%20for%20row%20in%20range(top%2C%20top%20%2B%20height)%0A%20%20%20%20%20%20%20%20%20%20%20%20for%20column%20in%20range(left%2C%20left%20%2B%20width)%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20_target_blocks%20%3D%20%5B%5D%0A%20%20%20%20for%20_target_number%20in%20range(_number_of_targets)%3A%0A%20%20%20%20%20%20%20%20_top%20%3D%20_rng.randrange(_grid_size%20-%20_target_height%20%2B%201)%0A%20%20%20%20%20%20%20%20_left%20%3D%20_rng.randrange(_grid_size%20-%20_target_width%20%2B%201)%0A%20%20%20%20%20%20%20%20_target_blocks.append(%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22number%22%3A%20_target_number%20%2B%201%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22top%22%3A%20_top%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22left%22%3A%20_left%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22height%22%3A%20_target_height%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22width%22%3A%20_target_width%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22cells%22%3A%20_rectangle_cells(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20_top%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20_left%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20_target_height%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20_target_width%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20)%0A%0A%20%20%20%20_context_top%20%3D%20_rng.randrange(_grid_size%20-%20_context_height%20%2B%201)%0A%20%20%20%20_context_left%20%3D%20_rng.randrange(_grid_size%20-%20_context_width%20%2B%201)%0A%20%20%20%20_raw_context%20%3D%20_rectangle_cells(%0A%20%20%20%20%20%20%20%20_context_top%2C%0A%20%20%20%20%20%20%20%20_context_left%2C%0A%20%20%20%20%20%20%20%20_context_height%2C%0A%20%20%20%20%20%20%20%20_context_width%2C%0A%20%20%20%20)%0A%0A%20%20%20%20_multiplicity%20%3D%20%7B%0A%20%20%20%20%20%20%20%20index%3A%20sum(index%20in%20block%5B%22cells%22%5D%20for%20block%20in%20_target_blocks)%0A%20%20%20%20%20%20%20%20for%20index%20in%20range(_grid_size%20*%20_grid_size)%0A%20%20%20%20%7D%0A%20%20%20%20_target_union%20%3D%20%7B%0A%20%20%20%20%20%20%20%20index%20for%20index%2C%20count%20in%20_multiplicity.items()%20if%20count%20%3E%200%0A%20%20%20%20%7D%0A%20%20%20%20_overlap_cells%20%3D%20%7B%0A%20%20%20%20%20%20%20%20index%20for%20index%2C%20count%20in%20_multiplicity.items()%20if%20count%20%3E%201%0A%20%20%20%20%7D%0A%20%20%20%20_removed_from_context%20%3D%20_raw_context%20%26%20_target_union%0A%20%20%20%20_context_cells%20%3D%20_raw_context%20-%20_target_union%0A%20%20%20%20_unused_cells%20%3D%20(%0A%20%20%20%20%20%20%20%20set(range(_grid_size%20*%20_grid_size))%0A%20%20%20%20%20%20%20%20-%20_context_cells%0A%20%20%20%20%20%20%20%20-%20_target_union%0A%20%20%20%20)%0A%20%20%20%20_target_instances%20%3D%20sum(%0A%20%20%20%20%20%20%20%20len(block%5B%22cells%22%5D)%20for%20block%20in%20_target_blocks%0A%20%20%20%20)%0A%0A%20%20%20%20mask_sample%20%3D%20%7B%0A%20%20%20%20%20%20%20%20%22grid_size%22%3A%20_grid_size%2C%0A%20%20%20%20%20%20%20%20%22target_area_fraction%22%3A%20target_area_fraction.value%2C%0A%20%20%20%20%20%20%20%20%22target_aspect_ratio%22%3A%20target_aspect_ratio.value%2C%0A%20%20%20%20%20%20%20%20%22target_budget%22%3A%20_target_budget%2C%0A%20%20%20%20%20%20%20%20%22target_height%22%3A%20_target_height%2C%0A%20%20%20%20%20%20%20%20%22target_width%22%3A%20_target_width%2C%0A%20%20%20%20%20%20%20%20%22target_blocks%22%3A%20_target_blocks%2C%0A%20%20%20%20%20%20%20%20%22target_union%22%3A%20_target_union%2C%0A%20%20%20%20%20%20%20%20%22target_instances%22%3A%20_target_instances%2C%0A%20%20%20%20%20%20%20%20%22duplicate_memberships%22%3A%20_target_instances%20-%20len(_target_union)%2C%0A%20%20%20%20%20%20%20%20%22overlap_cells%22%3A%20_overlap_cells%2C%0A%20%20%20%20%20%20%20%20%22context_area_fraction%22%3A%20context_area_fraction.value%2C%0A%20%20%20%20%20%20%20%20%22context_budget%22%3A%20_context_budget%2C%0A%20%20%20%20%20%20%20%20%22context_top%22%3A%20_context_top%2C%0A%20%20%20%20%20%20%20%20%22context_left%22%3A%20_context_left%2C%0A%20%20%20%20%20%20%20%20%22context_height%22%3A%20_context_height%2C%0A%20%20%20%20%20%20%20%20%22context_width%22%3A%20_context_width%2C%0A%20%20%20%20%20%20%20%20%22raw_context%22%3A%20_raw_context%2C%0A%20%20%20%20%20%20%20%20%22removed_from_context%22%3A%20_removed_from_context%2C%0A%20%20%20%20%20%20%20%20%22context_cells%22%3A%20_context_cells%2C%0A%20%20%20%20%20%20%20%20%22unused_cells%22%3A%20_unused_cells%2C%0A%20%20%20%20%7D%0A%20%20%20%20return%20(mask_sample%2C)%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(%0A%20%20%20%20IMAGE_HEIGHT%2C%0A%20%20%20%20IMAGE_WIDTH%2C%0A%20%20%20%20artifact%2C%0A%20%20%20%20context_area_fraction%2C%0A%20%20%20%20crop%2C%0A%20%20%20%20image_src%2C%0A%20%20%20%20mask_sample%2C%0A%20%20%20%20mo%2C%0A%20%20%20%20sample_masks%2C%0A%20%20%20%20target_area_fraction%2C%0A%20%20%20%20target_aspect_ratio%2C%0A)%3A%0A%20%20%20%20mo.stop(artifact%20not%20in%20(%22all%22%2C%20%22masks%22))%0A%0A%20%20%20%20_patch_size%20%3D%2014%0A%20%20%20%20_grid_size%20%3D%20mask_sample%5B%22grid_size%22%5D%0A%20%20%20%20_output_size%20%3D%20_patch_size%20*%20_grid_size%0A%0A%20%20%20%20def%20_cell_rectangles(indices%2C%20class_name)%3A%0A%20%20%20%20%20%20%20%20return%20%22%22.join(%0A%20%20%20%20%20%20%20%20%20%20%20%20f'%3Crect%20x%3D%22%7B(index%20%25%20_grid_size)%20*%20_patch_size%7D%22%20'%0A%20%20%20%20%20%20%20%20%20%20%20%20f'y%3D%22%7B(index%20%2F%2F%20_grid_size)%20*%20_patch_size%7D%22%20'%0A%20%20%20%20%20%20%20%20%20%20%20%20f'width%3D%22%7B_patch_size%7D%22%20height%3D%22%7B_patch_size%7D%22%20'%0A%20%20%20%20%20%20%20%20%20%20%20%20f'class%3D%22%7Bclass_name%7D%22%3E%3C%2Frect%3E'%0A%20%20%20%20%20%20%20%20%20%20%20%20for%20index%20in%20sorted(indices)%0A%20%20%20%20%20%20%20%20)%0A%0A%20%20%20%20_vertical_lines%20%3D%20%22%20%22.join(%0A%20%20%20%20%20%20%20%20f%22M%20%7Bcolumn%20*%20_patch_size%7D%200%20V%20%7B_output_size%7D%22%0A%20%20%20%20%20%20%20%20for%20column%20in%20range(1%2C%20_grid_size)%0A%20%20%20%20)%0A%20%20%20%20_horizontal_lines%20%3D%20%22%20%22.join(%0A%20%20%20%20%20%20%20%20f%22M%200%20%7Brow%20*%20_patch_size%7D%20H%20%7B_output_size%7D%22%0A%20%20%20%20%20%20%20%20for%20row%20in%20range(1%2C%20_grid_size)%0A%20%20%20%20)%0A%20%20%20%20_grid_path%20%3D%20f%22%7B_vertical_lines%7D%20%7B_horizontal_lines%7D%22%0A%0A%20%20%20%20if%20crop%5B%22valid%22%5D%3A%0A%20%20%20%20%20%20%20%20_target_single_cells%20%3D%20(%0A%20%20%20%20%20%20%20%20%20%20%20%20mask_sample%5B%22target_union%22%5D%20-%20mask_sample%5B%22overlap_cells%22%5D%0A%20%20%20%20%20%20%20%20)%0A%20%20%20%20%20%20%20%20_target_fills%20%3D%20_cell_rectangles(%0A%20%20%20%20%20%20%20%20%20%20%20%20_target_single_cells%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22ij-mask-target-cell%22%2C%0A%20%20%20%20%20%20%20%20)%0A%20%20%20%20%20%20%20%20_target_overlap_fills%20%3D%20_cell_rectangles(%0A%20%20%20%20%20%20%20%20%20%20%20%20mask_sample%5B%22overlap_cells%22%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22ij-mask-overlap-cell%22%2C%0A%20%20%20%20%20%20%20%20)%0A%20%20%20%20%20%20%20%20_target_outlines%20%3D%20%22%22.join(%0A%20%20%20%20%20%20%20%20%20%20%20%20f'''%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20x%3D%22%7Bblock%5B'left'%5D%20*%20_patch_size%7D%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20y%3D%22%7Bblock%5B'top'%5D%20*%20_patch_size%7D%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width%3D%22%7Bblock%5B'width'%5D%20*%20_patch_size%7D%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height%3D%22%7Bblock%5B'height'%5D%20*%20_patch_size%7D%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20class%3D%22ij-mask-target-outline%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3E%3C%2Frect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ctext%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20x%3D%22%7Bblock%5B'left'%5D%20*%20_patch_size%20%2B%204%7D%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20y%3D%22%7Bblock%5B'top'%5D%20*%20_patch_size%20%2B%2011%7D%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20class%3D%22ij-mask-target-label%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3ET%7Bblock%5B'number'%5D%7D%3C%2Ftext%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20'''%0A%20%20%20%20%20%20%20%20%20%20%20%20for%20block%20in%20mask_sample%5B%22target_blocks%22%5D%0A%20%20%20%20%20%20%20%20)%0A%0A%20%20%20%20%20%20%20%20_context_fills%20%3D%20_cell_rectangles(%0A%20%20%20%20%20%20%20%20%20%20%20%20mask_sample%5B%22context_cells%22%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22ij-mask-context-cell%22%2C%0A%20%20%20%20%20%20%20%20)%0A%20%20%20%20%20%20%20%20_context_target_fills%20%3D%20_cell_rectangles(%0A%20%20%20%20%20%20%20%20%20%20%20%20mask_sample%5B%22target_union%22%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22ij-mask-target-cell%22%2C%0A%20%20%20%20%20%20%20%20)%0A%20%20%20%20%20%20%20%20_unused_fills%20%3D%20_cell_rectangles(%0A%20%20%20%20%20%20%20%20%20%20%20%20mask_sample%5B%22unused_cells%22%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22ij-mask-unused-cell%22%2C%0A%20%20%20%20%20%20%20%20)%0A%20%20%20%20%20%20%20%20_context_outline_x%20%3D%20mask_sample%5B%22context_left%22%5D%20*%20_patch_size%0A%20%20%20%20%20%20%20%20_context_outline_y%20%3D%20mask_sample%5B%22context_top%22%5D%20*%20_patch_size%0A%20%20%20%20%20%20%20%20_context_outline_width%20%3D%20(%0A%20%20%20%20%20%20%20%20%20%20%20%20mask_sample%5B%22context_width%22%5D%20*%20_patch_size%0A%20%20%20%20%20%20%20%20)%0A%20%20%20%20%20%20%20%20_context_outline_height%20%3D%20(%0A%20%20%20%20%20%20%20%20%20%20%20%20mask_sample%5B%22context_height%22%5D%20*%20_patch_size%0A%20%20%20%20%20%20%20%20)%0A%0A%20%20%20%20%20%20%20%20_mask_content%20%3D%20f%22%22%22%0A%20%20%20%20%20%20%20%20%20%20%3Csvg%20class%3D%22ij-mask-image-defs%22%20aria-hidden%3D%22true%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cimage%20id%3D%22ij-mask-cat-source%22%20href%3D%22%7Bimage_src%7D%22%20width%3D%22%7BIMAGE_WIDTH%7D%22%20height%3D%22%7BIMAGE_HEIGHT%7D%22%3E%3C%2Fimage%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2Fsvg%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22ij-mask-stage%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22ij-mask-panel%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22ij-mask-panel-label%22%3E1%20%26middot%3B%20four%20target%20blocks%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Csvg%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20class%3D%22ij-mask-grid%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20viewBox%3D%220%200%20%7B_output_size%7D%20%7B_output_size%7D%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20role%3D%22img%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20aria-label%3D%22Four%20target%20blocks%20on%20the%20sixteen%20by%20sixteen%20patch%20grid.%20They%20contain%20%7Blen(mask_sample%5B'target_union'%5D)%7D%20unique%20target%20positions%2C%20including%20%7Blen(mask_sample%5B'overlap_cells'%5D)%7D%20positions%20covered%20by%20more%20than%20one%20block.%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpattern%20id%3D%22ij-mask-overlap-pattern%22%20width%3D%226%22%20height%3D%226%22%20patternUnits%3D%22userSpaceOnUse%22%20patternTransform%3D%22rotate(45)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20width%3D%226%22%20height%3D%226%22%20class%3D%22ij-mask-overlap-base%22%3E%3C%2Frect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cline%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%226%22%20class%3D%22ij-mask-overlap-line%22%3E%3C%2Fline%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fpattern%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Csvg%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width%3D%22%7B_output_size%7D%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height%3D%22%7B_output_size%7D%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20viewBox%3D%22%7Bcrop%5B'left'%5D%7D%20%7Bcrop%5B'top'%5D%7D%20%7Bcrop%5B'width'%5D%7D%20%7Bcrop%5B'height'%5D%7D%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20preserveAspectRatio%3D%22none%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20href%3D%22%23ij-mask-cat-source%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fsvg%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B_target_fills%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B_target_overlap_fills%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22%7B_grid_path%7D%22%20class%3D%22ij-mask-grid-shadow%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22%7B_grid_path%7D%22%20class%3D%22ij-mask-grid-lines%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B_target_outlines%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22%7B_output_size%7D%22%20height%3D%22%7B_output_size%7D%22%20class%3D%22ij-mask-grid-border%22%3E%3C%2Frect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fsvg%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22ij-mask-summary%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%204%20%C3%97%20%7Bmask_sample%5B'target_height'%5D%7D%20%C3%97%20%7Bmask_sample%5B'target_width'%5D%7D%20%3D%20%7Bmask_sample%5B'target_instances'%5D%7D%20target%20instances%3Cbr%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7Blen(mask_sample%5B'target_union'%5D)%7D%20unique%20positions%20%26middot%3B%20%7Bmask_sample%5B'duplicate_memberships'%5D%7D%20duplicate%20memberships%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22ij-mask-transition%22%20aria-label%3D%22Sample%20a%20context%20block%20and%20remove%20every%20target%20position%20from%20it%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%3Esample%20context%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%3Eremove%20targets%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22ij-mask-arrow%20ij-mask-arrow-right%22%20aria-hidden%3D%22true%22%3E%E2%86%92%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22ij-mask-arrow%20ij-mask-arrow-down%22%20aria-hidden%3D%22true%22%3E%E2%86%93%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22ij-mask-panel%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22ij-mask-panel-label%22%3E2%20%26middot%3B%20retained%20context%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Csvg%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20class%3D%22ij-mask-grid%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20viewBox%3D%220%200%20%7B_output_size%7D%20%7B_output_size%7D%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20role%3D%22img%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20aria-label%3D%22The%20separately%20sampled%20context%20block%20after%20target%20positions%20are%20removed.%20%7Blen(mask_sample%5B'context_cells'%5D)%7D%20positions%20remain%20as%20context%2C%20%7Blen(mask_sample%5B'removed_from_context'%5D)%7D%20target%20positions%20are%20removed%2C%20and%20%7Blen(mask_sample%5B'unused_cells'%5D)%7D%20positions%20are%20unused.%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Csvg%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width%3D%22%7B_output_size%7D%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height%3D%22%7B_output_size%7D%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20viewBox%3D%22%7Bcrop%5B'left'%5D%7D%20%7Bcrop%5B'top'%5D%7D%20%7Bcrop%5B'width'%5D%7D%20%7Bcrop%5B'height'%5D%7D%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20preserveAspectRatio%3D%22none%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20href%3D%22%23ij-mask-cat-source%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fsvg%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B_context_fills%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B_context_target_fills%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B_unused_fills%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20x%3D%22%7B_context_outline_x%7D%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20y%3D%22%7B_context_outline_y%7D%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width%3D%22%7B_context_outline_width%7D%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height%3D%22%7B_context_outline_height%7D%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20class%3D%22ij-mask-context-outline%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3E%3C%2Frect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22%7B_grid_path%7D%22%20class%3D%22ij-mask-grid-shadow%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22%7B_grid_path%7D%22%20class%3D%22ij-mask-grid-lines%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22%7B_output_size%7D%22%20height%3D%22%7B_output_size%7D%22%20class%3D%22ij-mask-grid-border%22%3E%3C%2Frect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fsvg%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22ij-mask-summary%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7Blen(mask_sample%5B'raw_context'%5D)%7D%20raw%20context%20%E2%88%92%20%7Blen(mask_sample%5B'removed_from_context'%5D)%7D%20targets%20%3D%20%7Blen(mask_sample%5B'context_cells'%5D)%7D%20retained%3Cbr%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7Blen(mask_sample%5B'unused_cells'%5D)%7D%20positions%20used%20by%20neither%20branch%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22ij-mask-legend%22%20aria-label%3D%22Mask%20legend%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%3E%3Ci%20class%3D%22ij-mask-swatch%20ij-mask-swatch-context%22%20aria-hidden%3D%22true%22%3E%3C%2Fi%3Eretained%20context%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%3E%3Ci%20class%3D%22ij-mask-swatch%20ij-mask-swatch-target%22%20aria-hidden%3D%22true%22%3E%3C%2Fi%3Etarget%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%3E%3Ci%20class%3D%22ij-mask-swatch%20ij-mask-swatch-overlap%22%20aria-hidden%3D%22true%22%3E%3C%2Fi%3Etarget%20overlap%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%3E%3Ci%20class%3D%22ij-mask-swatch%20ij-mask-swatch-unused%22%20aria-hidden%3D%22true%22%3E%3C%2Fi%3Eunused%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22ij-mask-geometry%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20target%20request%20%7Bmask_sample%5B'target_area_fraction'%5D%3A.2f%7D%20%C3%97%20256%20%E2%86%92%20%7Bmask_sample%5B'target_height'%5D%7D%20%C3%97%20%7Bmask_sample%5B'target_width'%5D%7D%20patches%0A%20%20%20%20%20%20%20%20%20%20%20%20%26nbsp%3B%26middot%3B%26nbsp%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20context%20request%20%7Bmask_sample%5B'context_area_fraction'%5D%3A.2f%7D%20%C3%97%20256%20%E2%86%92%20%7Bmask_sample%5B'context_height'%5D%7D%20%C3%97%20%7Bmask_sample%5B'context_width'%5D%7D%20patches%0A%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%22%22%22%0A%20%20%20%20else%3A%0A%20%20%20%20%20%20%20%20_mask_content%20%3D%20%22%22%22%0A%20%20%20%20%20%20%20%20%20%20%3Cp%20class%3D%22ij-mask-unavailable%22%3ENo%20target%20or%20context%20masks%20are%20formed%20because%20the%20current%20crop%20geometry%20would%20be%20rejected.%3C%2Fp%3E%0A%20%20%20%20%20%20%20%20%22%22%22%0A%0A%20%20%20%20_mask_visual%20%3D%20mo.Html(%0A%20%20%20%20%20%20%20%20f%22%22%22%0A%20%20%20%20%20%20%20%20%3Cstyle%3E%0A%20%20%20%20%20%20%20%20%20%20%23ij-mask-sampler%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20--ij-mask-muted%3A%20%235f6368%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20--ij-mask-border%3A%20%23272a2e%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20--ij-mask-grid-light%3A%20rgb(255%20255%20255%20%2F%2078%25)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20--ij-mask-grid-dark%3A%20rgb(0%200%200%20%2F%2068%25)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20--ij-mask-target%3A%20%23cf4f24%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20--ij-mask-target-fill%3A%20rgb(207%2079%2036%20%2F%2034%25)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20--ij-mask-overlap-fill%3A%20rgb(156%2045%2031%20%2F%2058%25)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20--ij-mask-context%3A%20%232f6f9f%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20--ij-mask-context-fill%3A%20rgb(47%20111%20159%20%2F%2034%25)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20--ij-mask-unused-fill%3A%20rgb(45%2048%2052%20%2F%2055%25)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20--ij-mask-label-halo%3A%20%23ffffff%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20--ij-mask-rejected%3A%20%23a33a31%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20box-sizing%3A%20border-box%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin%3A%200%20auto%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20max-width%3A%20900px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%200.75rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-mask-sampler%20*%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20box-sizing%3A%20border-box%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-mask-sampler%20.ij-mask-image-defs%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20height%3A%200%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20overflow%3A%20hidden%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20position%3A%20absolute%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20width%3A%200%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-mask-sampler%20.ij-mask-stage%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20align-items%3A%20center%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20grid%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20gap%3A%201rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20grid-template-columns%3A%20minmax(0%2C%201fr)%207rem%20minmax(0%2C%201fr)%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-mask-sampler%20.ij-mask-panel%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20min-width%3A%200%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20text-align%3A%20center%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-mask-sampler%20.ij-mask-panel-label%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20var(--ij-mask-muted)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%200.82rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-weight%3A%20500%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20letter-spacing%3A%200.04em%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-bottom%3A%200.45rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20text-transform%3A%20uppercase%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-mask-sampler%20.ij-mask-grid%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20block%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20height%3A%20auto%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-mask-sampler%20.ij-mask-target-cell%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20fill%3A%20var(--ij-mask-target-fill)%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-mask-sampler%20.ij-mask-overlap-cell%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20fill%3A%20url(%23ij-mask-overlap-pattern)%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-mask-sampler%20.ij-mask-overlap-base%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20fill%3A%20var(--ij-mask-overlap-fill)%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-mask-sampler%20.ij-mask-overlap-line%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke%3A%20var(--ij-mask-label-halo)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke-width%3A%202%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-mask-sampler%20.ij-mask-target-outline%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20fill%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke%3A%20var(--ij-mask-target)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke-width%3A%202.5%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20vector-effect%3A%20non-scaling-stroke%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-mask-sampler%20.ij-mask-target-label%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20fill%3A%20var(--ij-mask-target)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-family%3A%20ui-monospace%2C%20SFMono-Regular%2C%20Menlo%2C%20Consolas%2C%20monospace%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%209px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-weight%3A%20500%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20paint-order%3A%20stroke%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke%3A%20var(--ij-mask-label-halo)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke-linejoin%3A%20round%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke-width%3A%202.5px%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-mask-sampler%20.ij-mask-context-cell%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20fill%3A%20var(--ij-mask-context-fill)%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-mask-sampler%20.ij-mask-unused-cell%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20fill%3A%20var(--ij-mask-unused-fill)%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-mask-sampler%20.ij-mask-context-outline%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20fill%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke%3A%20var(--ij-mask-context)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke-width%3A%203%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20vector-effect%3A%20non-scaling-stroke%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-mask-sampler%20.ij-mask-grid-shadow%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20fill%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke%3A%20var(--ij-mask-grid-dark)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke-width%3A%201.45%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20vector-effect%3A%20non-scaling-stroke%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-mask-sampler%20.ij-mask-grid-lines%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20fill%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke%3A%20var(--ij-mask-grid-light)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke-width%3A%200.62%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20vector-effect%3A%20non-scaling-stroke%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-mask-sampler%20.ij-mask-grid-border%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20fill%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke%3A%20var(--ij-mask-border)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke-width%3A%201.5%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20vector-effect%3A%20non-scaling-stroke%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-mask-sampler%20.ij-mask-summary%2C%0A%20%20%20%20%20%20%20%20%20%20%23ij-mask-sampler%20.ij-mask-geometry%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20var(--ij-mask-muted)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-family%3A%20ui-monospace%2C%20SFMono-Regular%2C%20Menlo%2C%20Consolas%2C%20monospace%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%200.8rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20line-height%3A%201.55%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-mask-sampler%20.ij-mask-summary%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-top%3A%200.5rem%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-mask-sampler%20.ij-mask-transition%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20align-items%3A%20center%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20var(--ij-mask-muted)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20flex%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20flex-direction%3A%20column%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%200.78rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-weight%3A%20500%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20gap%3A%200.1rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20justify-content%3A%20center%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20text-align%3A%20center%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-mask-sampler%20.ij-mask-arrow%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20var(--ij-mask-context)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%202rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20line-height%3A%201%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-mask-sampler%20.ij-mask-arrow-down%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-mask-sampler%20.ij-mask-legend%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20var(--ij-mask-muted)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20flex%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20flex-wrap%3A%20wrap%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%200.8rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20gap%3A%200.7rem%201rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20justify-content%3A%20center%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-top%3A%200.8rem%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-mask-sampler%20.ij-mask-legend%20span%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20align-items%3A%20center%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20inline-flex%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20gap%3A%200.35rem%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-mask-sampler%20.ij-mask-swatch%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20border%3A%201px%20solid%20var(--ij-mask-border)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20inline-block%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20height%3A%200.85rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20width%3A%200.85rem%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-mask-sampler%20.ij-mask-swatch-context%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20var(--ij-mask-context-fill)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-color%3A%20var(--ij-mask-context)%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-mask-sampler%20.ij-mask-swatch-target%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20var(--ij-mask-target-fill)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-color%3A%20var(--ij-mask-target)%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-mask-sampler%20.ij-mask-swatch-overlap%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20repeating-linear-gradient(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%2045deg%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20var(--ij-mask-overlap-fill)%200%203px%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20var(--ij-mask-label-halo)%203px%204px%0A%20%20%20%20%20%20%20%20%20%20%20%20)%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-mask-sampler%20.ij-mask-swatch-unused%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20var(--ij-mask-unused-fill)%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-mask-sampler%20.ij-mask-geometry%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-top%3A%200.55rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20text-align%3A%20center%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%23ij-mask-sampler%20.ij-mask-unavailable%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20var(--ij-mask-rejected)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin%3A%200%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20text-align%3A%20center%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%40media%20(max-width%3A%20680px)%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%23ij-mask-sampler%20.ij-mask-stage%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20grid-template-columns%3A%20minmax(0%2C%201fr)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20justify-items%3A%20center%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%23ij-mask-sampler%20.ij-mask-panel%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20max-width%3A%20420px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%23ij-mask-sampler%20.ij-mask-transition%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20min-height%3A%203.4rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%23ij-mask-sampler%20.ij-mask-arrow-right%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%23ij-mask-sampler%20.ij-mask-arrow-down%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20inline%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%40media%20(max-width%3A%20420px)%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%23ij-mask-sampler%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%200.4rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%23ij-mask-sampler%20.ij-mask-summary%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%23ij-mask-sampler%20.ij-mask-geometry%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%23ij-mask-sampler%20.ij-mask-legend%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%23ij-mask-sampler%20.ij-mask-transition%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%200.72rem%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%40media%20(prefers-color-scheme%3A%20dark)%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%23ij-mask-sampler%20%7B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20--ij-mask-muted%3A%20%23b8bdc3%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20--ij-mask-border%3A%20%23e1e4e8%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20--ij-mask-grid-light%3A%20rgb(255%20255%20255%20%2F%2062%25)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20--ij-mask-grid-dark%3A%20rgb(0%200%200%20%2F%2078%25)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20--ij-mask-target%3A%20%23ff9a68%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20--ij-mask-target-fill%3A%20rgb(255%20154%20104%20%2F%2034%25)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20--ij-mask-overlap-fill%3A%20rgb(255%20118%2091%20%2F%2058%25)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20--ij-mask-context%3A%20%239bc3ec%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20--ij-mask-context-fill%3A%20rgb(92%20160%20219%20%2F%2038%25)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20--ij-mask-unused-fill%3A%20rgb(15%2017%2020%20%2F%2064%25)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20--ij-mask-label-halo%3A%20%2317191c%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20--ij-mask-rejected%3A%20%23ff9990%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%20%20%20%20%3C%2Fstyle%3E%0A%0A%20%20%20%20%20%20%20%20%3Csection%20id%3D%22ij-mask-sampler%22%20aria-label%3D%22Sample%20I-JEPA%20target%20blocks%20and%20a%20non-overlapping%20context%20region%22%3E%0A%20%20%20%20%20%20%20%20%20%20%7B_mask_content%7D%0A%20%20%20%20%20%20%20%20%3C%2Fsection%3E%0A%20%20%20%20%20%20%20%20%22%22%22%0A%20%20%20%20)%0A%0A%20%20%20%20_mask_controls%20%3D%20mo.vstack(%0A%20%20%20%20%20%20%20%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20mo.hstack(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5Btarget_area_fraction%2C%20target_aspect_ratio%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20widths%3D%22equal%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20wrap%3DTrue%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20align%3D%22end%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20gap%3D0.8%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20mo.hstack(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5Bcontext_area_fraction%2C%20sample_masks%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20widths%3D%22equal%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20wrap%3DTrue%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20align%3D%22end%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20gap%3D0.8%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20)%2C%0A%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20gap%3D0.55%2C%0A%20%20%20%20)%0A%20%20%20%20mo.vstack(%5B_mask_controls%2C%20_mask_visual%5D%2C%20gap%3D0.8).style(%0A%20%20%20%20%20%20%20%20%7B%22max-width%22%3A%20%22900px%22%2C%20%22margin%22%3A%20%220%20auto%22%2C%20%22padding%22%3A%20%220.5rem%22%7D%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0Aif%20__name__%20%3D%3D%20%22__main__%22%3A%0A%20%20%20%20app.run()%0A