"},{"ID":360672,"user_firstname":"Jennifer","user_lastname":"Johnson","nickname":"Jen Johnson","user_nicename":"jenjohnson","display_name":"Jen Johnson","user_email":"jenjohnson@esri.com","user_url":"","user_registered":"2024-08-26 13:49:44","user_description":"Jen Johnson is a Product Engineer on the ArcGIS CityEngine team at the Esri R&D Center in Zurich. Her background is in landscape architecture, urban planning, geodesign and sustainable design for passive development strategies. She has otherwise used her GIS knowledge to support humanitarian initiatives worldwide.","user_avatar":"
"}],"short_description":"The Screenshot Stylizer uses Python together with generative AI to quickly explore visualization techniques of any CityEngine scene.","flexible_content":[{"acf_fc_layout":"content","content":"Artificial Intelligence (AI) is changing how urban designers visualize ideas. With the\u00a0CityEngine Python API<\/a>, it becomes possible to turn a CityEngine scene into stylized perspective that conveys materiality, atmosphere, and design intent much earlier in the process.<\/p>\n Architectural visualization helps transform abstract urban massings into imagery that can be evaluated at a human scale. This is especially valuable early in the design process, when key planning and urban design decisions are often made before the architecture is fully defined.<\/p>\n Established visualization workflows remain important, but they can also be time-intensive, making them harder to use in rapid day-to-day iteration.<\/p>\n The Stylizer app is a practical example of how CityEngine Python scripts can evolve into small, purpose-built tools. It uses CityEngine and Python together with generative AI to quickly explore visual ideas and it shows how a focused UI and a few supporting libraries can turn automation into a reusable workflow tool.<\/p>\n This post builds on the broader ideas discussed in\u00a0Urban Design Visualization with CityEngine and Generative AI<\/a>.<\/p>\n"},{"acf_fc_layout":"content","content":" Before starting the workflow, make sure CityEngine 2026.0 is open.<\/p>\n To run the Stylizer app, first download the example project that contains the code through\u00a0 The Stylizer app opens in its own window, separate from the main CityEngine view. To stylize CityEngine screenshots, set up a\u00a0Gemini API key<\/a>\u00a0with billing enabled, then enter it in the Stylizer app. With that you are ready to get started with the fun part.<\/p>\n <\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2973212,"id":2973212,"title":"api-key-dialog","filename":"api-key-dialog.png","filesize":33302,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/06\/api-key-dialog.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/city-engine\/3d-gis\/ai-screenshot-stylizer-for-arcgis-cityengine-scenes\/api-key-dialog","alt":"","author":"360672","description":"","caption":"","name":"api-key-dialog","status":"inherit","uploaded_to":2971526,"date":"2026-06-25 18:06:40","modified":"2026-06-25 18:06:40","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":451,"height":395,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/06\/api-key-dialog-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/06\/api-key-dialog.png","medium-width":298,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/06\/api-key-dialog.png","medium_large-width":451,"medium_large-height":395,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/06\/api-key-dialog.png","large-width":451,"large-height":395,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/06\/api-key-dialog.png","1536x1536-width":451,"1536x1536-height":395,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/06\/api-key-dialog.png","2048x2048-width":451,"2048x2048-height":395,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/06\/api-key-dialog.png","card_image-width":451,"card_image-height":395,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/06\/api-key-dialog.png","wide_image-width":451,"wide_image-height":395}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"blockquote","content":" Note: If you want to explore your options first, the Stylizer app also lets you browse the\u00a0Compare\u00a0and\u00a0History\u00a0views immediately, even before setting up an API key.<\/p>\n"},{"acf_fc_layout":"content","content":" The stylization workflow starts in the Preset style prompts are already set up for you. You can use them as-is or refine them further.<\/p>\n For best results, ask the model to preserve the original camera position and aspect ratio so the composition stays as close to the original screenshot as possible.<\/p>\n The model list shows the models currently available in the app through the Gemini API.<\/p>\n When the stylized image is ready, it opens in the\u00a0 Below the comparison view, a details section shows the capture metadata. The title is visible at a glance. Open the panel next to it to see the model and prompt used for generation. The title can be edited later. You can also delete the capture or download the result.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2973211,"id":2973211,"title":"compare-item-details","filename":"compare-item-details.png","filesize":21580,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/06\/compare-item-details.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/city-engine\/3d-gis\/ai-screenshot-stylizer-for-arcgis-cityengine-scenes\/compare-item-details","alt":"","author":"360672","description":"","caption":"","name":"compare-item-details","status":"inherit","uploaded_to":2971526,"date":"2026-06-25 18:06:38","modified":"2026-06-25 18:06:38","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":651,"height":234,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/06\/compare-item-details-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/06\/compare-item-details.png","medium-width":464,"medium-height":167,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/06\/compare-item-details.png","medium_large-width":651,"medium_large-height":234,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/06\/compare-item-details.png","large-width":651,"large-height":234,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/06\/compare-item-details.png","1536x1536-width":651,"1536x1536-height":234,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/06\/compare-item-details.png","2048x2048-width":651,"2048x2048-height":234,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/06\/compare-item-details.png","card_image-width":651,"card_image-height":234,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/06\/compare-item-details.png","wide_image-width":651,"wide_image-height":234}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":" Previous visualizations remain available in the filmstrip and in the\u00a0 Behind the scenes, Python starts a local\u00a0FastAPI<\/a>\u00a0server and opens the interface in its own\u00a0pywebview<\/a>\u00a0window:<\/p>\n"},{"acf_fc_layout":"sidebar","content":"","image_reference":false,"layout":"code_snippet","image_reference_figure":"","snippet":"url = f\"http:\/\/{host}:{port}\/\"\r\nwebview.create_window(\r\n\ttitle=\"Screenshot Stylizer for CityEngine\",\r\n\turl=url,\r\n\twidth=1920,\r\n\theight=1440,\r\n\tresizable=True,\r\n)\r\nwebview.start()","spotlight_name":"","section_title":"","position":"Center","spotlight_image":false},{"acf_fc_layout":"content","content":" The API key itself is not written into the project files. The app uses Python’s\u00a0keyring<\/a>\u00a0library, which stores the key in the operating system’s credential store.<\/p>\n"},{"acf_fc_layout":"sidebar","content":"","image_reference":false,"layout":"code_snippet","image_reference_figure":"","snippet":"normalized_api_key = str(api_key).strip()\r\nservice_name = \"screenshotStylizerForCE\"\r\nusername = \"google_api_key\"\r\n\r\nkeyring.set_password(service_name, username, normalized_api_key)\r\n\r\nsaved_key = keyring.get_password(service_name, username)","spotlight_name":"","section_title":"","position":"Center","spotlight_image":false},{"acf_fc_layout":"content","content":" When you click\u00a0Using the Stylizer App<\/h1>\n
Open the app and get ready<\/h2>\n
Help -> Download Tutorials and Examples -> Example_Python_02_Custom_UI<\/code>. Then open\u00a0scripts\/main.py<\/code>\u00a0in CityEngine and run it with\u00a0Python -> Run script<\/code>\u00a0or\u00a0F9<\/code>.<\/p>\nStylize a scene screenshot<\/h2>\n
Capture<\/code> view. There, you can capture the current CityEngine viewport and turn it into a stylized image by describing the look you want in plain text.<\/p>\n\n
Capture Screenshot & Style<\/code>.<\/li>\n<\/ol>\n"},{"acf_fc_layout":"image","image":{"ID":2973213,"id":2973213,"title":"capture","filename":"capture.png","filesize":80177,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/06\/capture.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/city-engine\/3d-gis\/ai-screenshot-stylizer-for-arcgis-cityengine-scenes\/capture-41","alt":"","author":"360672","description":"","caption":"","name":"capture-41","status":"inherit","uploaded_to":2971526,"date":"2026-06-25 18:06:42","modified":"2026-06-25 18:06:42","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1426,"height":1073,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/06\/capture-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/06\/capture.png","medium-width":347,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/06\/capture.png","medium_large-width":768,"medium_large-height":578,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/06\/capture.png","large-width":1426,"large-height":1073,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/06\/capture.png","1536x1536-width":1426,"1536x1536-height":1073,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/06\/capture.png","2048x2048-width":1426,"2048x2048-height":1073,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/06\/capture-618x465.png","card_image-width":618,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/06\/capture.png","wide_image-width":1426,"wide_image-height":1073}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Inspect the result<\/h2>\n
Compare<\/code>\u00a0view. The original screenshot and the generated image are shown side by side. Use the slider to compare them. To inspect the result more closely, click the\u00a0Expand Viewer<\/code>\u00a0icon in the top right. The generated image will not always match the source perfectly. The result depends heavily on the prompt, so some experimentation is usually needed.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2973205,"id":2973205,"title":"compare-overview","filename":"compare-overview.png","filesize":1973605,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/06\/compare-overview.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/city-engine\/3d-gis\/ai-screenshot-stylizer-for-arcgis-cityengine-scenes\/compare-overview","alt":"","author":"360672","description":"","caption":"","name":"compare-overview","status":"inherit","uploaded_to":2971526,"date":"2026-06-25 17:59:27","modified":"2026-06-25 17:59:27","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1920,"height":1552,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/06\/compare-overview-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/06\/compare-overview.png","medium-width":323,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/06\/compare-overview.png","medium_large-width":768,"medium_large-height":621,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/06\/compare-overview.png","large-width":1336,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/06\/compare-overview-1536x1242.png","1536x1536-width":1536,"1536x1536-height":1242,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/06\/compare-overview.png","2048x2048-width":1920,"2048x2048-height":1552,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/06\/compare-overview-575x465.png","card_image-width":575,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/06\/compare-overview-1336x1080.png","wide_image-width":1336,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"image","image":{"ID":2973210,"id":2973210,"title":"CompareFinal","filename":"CompareFinal.gif","filesize":12648000,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/06\/CompareFinal.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/city-engine\/3d-gis\/ai-screenshot-stylizer-for-arcgis-cityengine-scenes\/comparefinal","alt":"","author":"360672","description":"","caption":"","name":"comparefinal","status":"inherit","uploaded_to":2971526,"date":"2026-06-25 18:06:34","modified":"2026-06-25 18:06:34","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1920,"height":1080,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/06\/CompareFinal-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/06\/CompareFinal.gif","medium-width":464,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/06\/CompareFinal.gif","medium_large-width":768,"medium_large-height":432,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/06\/CompareFinal.gif","large-width":1920,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/06\/CompareFinal-1536x864.gif","1536x1536-width":1536,"1536x1536-height":864,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/06\/CompareFinal.gif","2048x2048-width":1920,"2048x2048-height":1080,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/06\/CompareFinal-826x465.gif","card_image-width":826,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/06\/CompareFinal.gif","wide_image-width":1920,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"History<\/code>\u00a0tab, so you can return to earlier results at any time.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2973204,"id":2973204,"title":"history","filename":"history.png","filesize":2459453,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/06\/history.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/city-engine\/3d-gis\/ai-screenshot-stylizer-for-arcgis-cityengine-scenes\/history-2","alt":"","author":"360672","description":"","caption":"","name":"history-2","status":"inherit","uploaded_to":2971526,"date":"2026-06-25 17:59:18","modified":"2026-06-25 17:59:18","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1920,"height":1552,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/06\/history-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/06\/history.png","medium-width":323,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/06\/history.png","medium_large-width":768,"medium_large-height":621,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/06\/history.png","large-width":1336,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/06\/history-1536x1242.png","1536x1536-width":1536,"1536x1536-height":1242,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/06\/history.png","2048x2048-width":1920,"2048x2048-height":1552,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/06\/history-575x465.png","card_image-width":575,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/06\/history-1336x1080.png","wide_image-width":1336,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"What happens behind the scenes<\/h1>\n
Capture Screenshot & Style<\/code>, the app calls the CityEngine Python API directly. It waits until the UI is idle, reads the available 3D views with\u00a0ce.get3DViews()<\/code><\/a>, and captures the active viewport as an image by using the\u00a0View3D snapshot API<\/a>. That image becomes the reference for the stylization step.<\/p>\n"},{"acf_fc_layout":"sidebar","content":"","image_reference":false,"layout":"code_snippet","image_reference_figure":"","snippet":"ce = cityengine.CE()\r\n\r\nce.waitForUIIdle()\r\nviews = ce.get3DViews()\r\nviewport = views[0]\r\n\r\nsnapshot_file = \"ce-screenshot.png\"\r\nviewport.snapshot(snapshot_file, 1920, 1280)","spotlight_name":"","section_title":"","position":"Center","spotlight_image":false},{"acf_fc_layout":"content","content":"