Деревоподібна модель колажів з поперечними зв'язками
Анотація
Наведено інтерактивну деревоподібну модель колажів із поперечними зв'язками, розроблену для ефективного подолання обмежень, притаманних наявним редакторам графічних зображень, таким як Photoshop Online, Canva та Pixlr Editor. На підставі проведеного детального аналізу наявних популярних рішень встановлено, що основними недоліками цих так званих редакторів колажів є відсутність автоматичних зв'язків між контейнерами елементів зображення та потреба у значних ручних налаштуваннях структури колажу під час редагування відповідних композицій. Унаслідок цього виникають проблеми у дотриманні візуальної узгодженості та гармонійності за зміни розмірів зображення або позицій окремих елементів структури колажу. Розроблену модель колажу побудовано як чітко структуроване ієрархічне дерево з чотирма рівнями вкладеності: кореневий елемент, рядки, стовпці та контейнери для елементів зображення. Істотним покращенням є впровадження поперечних зв'язків між сусідніми контейнерами, які забезпечують автоматичний двосторонній перерахунок позицій та розмірів контейнерів зображення в разі зміни параметрів одного з елементів. Детально описано математичні основи цієї моделі, зокрема застосування принципів теорії графів і дерев, що дає змогу формально визначити логіку взаємодії елементів у колажі. Реалізацію моделі виконано засобами мови програмування TypeScript та бібліотеки Fabric.js, з активним використанням патернів проєктування Composite для структурування компонентів та Observer для ефективного управління реактивністю та змінами стану системи у режимі реального часу. Проведено експериментальні дослідження роботи створеної моделі, які показали істотне покращення процесу редагування графічних композицій: скорочується кількість потрібних дій користувача у декілька разів порівняно із традиційними моделями. Запропонована система демонструє високу продуктивність, швидкість реагування на зміни та стабільність підтримки візуальної гармонії композиції колажу навіть за умов інтенсивного редагування елементів. Виявлено, що розроблена модель колажу успішно поєднує переваги автоматизованих інтелектуальних рішень та зберігає гнучкість і точність ручних редагувань, що робить її ефективним інструментом для широкої аудиторії користувачів.
Завантаження
Посилання
Adobe Photoshop. (n.d.). Photoshop.adobe.com. URL: https://photoshop.adobe.com/discover
Angular. (2025). Angular.dev. URL: https://angular.dev/api
Canva. (2025). Canva. URL: https://www.canva.com/
Canvas API. (2019, December 2). MDN Web Docs. URL: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API
Cao, Y., Ma, Y., Zhou, M., Liu, C., Xie, H., Ge, T., & Jiang, Y. (2022). Geometry Aligned Variational Transformer for Image-conditioned Layout Generation. Proceedings of the 30th ACM International Conference on Multimedia, 1, pp. 1561–1571. https://doi.org/10.1145/3503161.3548332
Chen, L., Jing, Q., Tsang, Y., & Zhou, T. (2024). Iris: a multi-constraint graphic layout generation system. Frontiers of Information Technology & Electronic Engineering, 25(7), 968–987. https://doi.org/10.1631/fitee.2300312
Fernández, D. P., Postels, J., & Tombari, F. (2021). Variational Transformer Networks for Layout Generation. Proceedings of the IEEE/CVF Conference on Computer Vision and Pattern Recognition (CVPR), pp. 10163–10173. https://doi.org/10.1109/cvpr46437.2021.01343
Hadi AlZayer, Lin, H., & Bala, K. (2021). AutoPhoto: Aesthetic Photo Capture using Reinforcement Learning. 2021 IEEE/RSJ International Conference on Intelligent Robots and Systems (IROS), pp. 944–951. https://doi.org/10.1109/iros51168.2021.9636788
Huo, H., & Wang, F. (2022). A Study of Artificial Intelligence-Based Poster Layout Design in Visual Communication. Scientific Programming, 2022, 1–9. https://doi.org/10.1155/2022/1191073
JSDoc: Home. (n.d.). Fabricjs.com. URL: http://fabricjs.com/docs/
Liu, L., Zhang, H., Jing, G., Guo, Y., Chen, Z., & Wang, W. (2017). Correlation-Preserving Photo Collage. IEEE Transactions on Visualization and Computer Graphics, 24(6), 1956–1968. https://doi.org/10.1109/TVCG.2017.2703853
Lu, Y., Tong, Z., Zhao, Q., Oh, Y., Wang, B., & Li, T. J.-J. (2024). Flowy: Supporting UX Design Decisions Through AI-Driven Pattern Annotation in Multi-Screen User Flows. ArXiv (Cornell University). https://doi.org/10.48550/arxiv.2406.16177
Marzo, Asier, & Ardaiz, Oscar. (2012). A Smart Phone Tool to Create Photo Collages. Procedia Computer Science, Vol. 15, 159–162. https://doi.org/10.1016/j.procs.2012.10.067
Mozilla. (2019, March 4). WebGL: 2D and 3D graphics for the web. MDN Web Docs. URL: https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API
Online Photo Editor. Pixlr Editor. (2019). Pixlr.com. URL: https://pixlr.com/editor/
Rother, C., Bordeaux, L., Hamadi, Y., & Blake, A. (2006). AutoCollage. ACM Transactions on Graphics, 25(3), 847–852. https://doi.org/10.1145/1141911.1141965
Shabani, M. A., Wang, Z., Liu, D., Zhao, N., Yang, J., & Furukawa, Y. (2024). Visual Layout Composer: Image-Vector Dual Diffusion Model for Design Layout Generation. 2024 IEEE/CVF Conference on Computer Vision and Pattern Recognition (CVPR), pp. 9222–9231. https://doi.org/10.1109/cvpr52733.2024.00881
Shi, Y., Shang, M., & Qi, Z. (2023). Intelligent layout generation based on deep generative models: A comprehensive survey. Information Fusion, 100, 101940–101940. https://doi.org/10.1016/j.inffus.2023.101940
Yu, J., Chen, L., Zhang, M., & Li, M. (2022). SoftCollage: A Differentiable Probabilistic Tree Generator for Image Collage. 2022 IEEE/CVF Conference on Computer Vision and Pattern Recognition (CVPR), 3719–3728. https://doi.org/10.1109/CVPR52688.2022.00371
Zhang, M., Li, M., Chen, L., & Yu, J. (2021). Aesthetic Photo Collage with Deep Reinforcement Learning. ArXiv (Cornell University). https://doi.org/10.48550/arXiv.2110.09775
Zhou, M., Xu, C., Ma, Y., Ge, T., Jiang, Y., & Xu, W. (2022). Composition-aware Graphic Layout GAN for Visual-Textual Presentation Designs. Proceedings of the Thirty-First International Joint Conference on Artificial Intelligence, pp. 4995–5001. https://doi.org/10.24963/ijcai.2022/692
Zhou, Y., Jing, Q., Li, Z., Shi, L., Chen, L. & Sun, L. (2023). Element‑Conditioned GAN for Graphic Layout Generation. Neurocomputing, 591, article ID 127730. https://doi.org/10.ssrn.4648075
Ця робота ліцензується відповідно до Creative Commons Attribution 4.0 International License.
