1. ELARTU — Інституційний репозитарій ТНТУ імені Івана Пулюя
  2. Роботи студентів
  3. Бакалавр
  4. 122 — Компʼютерні науки (бакалаври)
Palun kasuta seda identifikaatorit viitamiseks ja linkimiseks: http://elartu.tntu.edu.ua/handle/lib/49630
Täiskirje
DC väliVäärtusKeel
dc.contributor.advisorФриз, Михайло Євгенович-
dc.contributor.advisorFryz, Mykhailo-
dc.contributor.authorШимків, Іван Михайлович-
dc.contributor.authorShymkiv, Ivan Mykhailovych-
dc.date.accessioned2025-07-08T12:02:58Z-
dc.date.available2025-07-08T12:02:58Z-
dc.date.issued2025-06-29-
dc.date.submitted2025-06-15-
dc.identifier.citationШимків І. М. Розробка вебзастосунку для фільтрації зображень методом згортки із використанням засобів WebGPU : робота на здобуття кваліфікаційного ступеня бакалавра : спец. 122 - комп’ютерні науки / наук. кер. М. Є. Фриз. Тернопіль : Тернопільський національний технічний університет імені Івана Пулюя, 2025. 62 с.uk_UA
dc.identifier.urihttp://elartu.tntu.edu.ua/handle/lib/49630-
dc.descriptionРоботу виконано на кафедрі комп'ютерних наук Тернопільського національного технічного університету імені Івана Пулюя. Захист відбудеться 29.06.2025р. на засіданні екзаменаційної комісії №30 у Тернопільському національному технічному університеті імені Івана Пулюяuk_UA
dc.description.abstractКваліфікаційна робота присвячена розробці вебзастосунку для фільтрації зображень методом лінійної згортки із використанням WebGPU. У першому розділі кваліфікаційної роботи описано математичну модель кольорового зображення та стисло розглянуто операцію лінійної згортки. Висвітлено роль графічних процесорів у обчисленнях та обґрунтовано вибір WebGPU для розробки вебзастосунку. Розглянуто наявні альтернативні рішення. Проаналізовано їхні переваги та недоліки і виконано постановку завдання на основі одержаних відомостей. У другому розділі кваліфікаційної роботи підібрано технології для розробки вебзастосунку. Виконано порівняння фронтенд-фреймворків та вибір найоптимальнішого варіанту. Описано використані додаткові технології. Спроєктовано користувацький інтерфейс вебзастосунку. У третьому розділі кваліфікаційної роботи описано процес розробки вебзастосунку. Продемонстровано вигляд і роботу створеного вебзастосунку. Об’єкт дослідження: процес використання графічного процесора для обчислень у середовищі веб. Предмет дослідження: застосування WebGPU для лінійної фільтрації зображеньuk_UA
dc.description.abstractThe qualification work is dedicated to the development of a web application for image filtering using the linear convolution method with WebGPU. The first section of the qualification work describes the mathematical model of a color image and briefly considers the linear convolution operation. The role of graphics processors in scientific computing is highlighted and the choice of WebGPU for developing a web application is justified. Existing alternative solutions are considered. Their advantages and disadvantages are analyzed and the task is formulated based on the information obtained. In the second section of the qualification work, technologies for developing a web application are selected. Front-end frameworks are compared and the most optimal option is selected. Additional technologies used are described. The user interface of the web application is designed. In the third section of the qualification work, the process of developing a web application is described. The appearance and operation of the created web application are demonstrated. Research object: the process of using a graphics processor for computing in a web environment. Research subject: using WebGPU for linear image filteringuk_UA
dc.description.tableofcontentsВСТУП 8 РОЗДІЛ 1. АНАЛІЗ ПРЕДМЕТНОЇ ОБЛАСТІ ТА ПОСТАНОВКА ЗАВДАННЯ 9 1.1 Кольорові цифрові зображення 9 1.1.1 Кольорові зображення у моделі RGBA 9 1.1.2 Зв’язок моделей RGBA та RGB 11 1.1.3 Монохромні зображення 12 1.2 Метод згортки 13 1.3 Паралельні обчислення із використанням GPU 14 1.4 Обґрунтування вибору графічного API 15 1.4.1 WebGL та його недоліки 15 1.4.2 WebGPU як заміна WebGL 16 1.5 Розгляд альтернатив вебзастосунку 18 1.6 Постановка завдання 23 1.7 Висновки до першого розділу 23 РОЗДІЛ 2. ВИБІР ТЕХНОЛОГІЙ ТА ПРОЄКТУВАННЯ ІНТЕРФЕЙСУ ВЕБЗАСТОСУНКУ 25 2.1 Вибір фронтенд-фреймворку 25 2.1.1 React 25 2.1.2 Vue.js 27 2.1.3 Svelte 29 2.2 Додаткові інструменти 31 2.2.1 SvelteKit 31 2.2.2 Tailwind CSS 31 2.3 Проєктування користувацького інтерфейсу вебзастосунку 32 2.4 Проєктування структури вебзастосунку 33 2.5 Висновки до другого розділу 34 РОЗДІЛ 3. РОЗРОБКА ТА ДЕМОНСТРАЦІЯ ВЕБЗАСТОСУНКУ 35 3.1 Розробка вебзастосунку 35 3.1.1 Розробка компонента заголовку 37 3.1.2 Розробка компонента бічної панелі 39 3.1.3 Розробка компонента попереднього перегляду 40 3.1.4 Розробка зв’язуючого компонента 40 3.2 Демонстрація вебзастосунку та результатів його роботи 41 3.2.1 Фільтр простого розмиття 43 3.2.2 Фільтр розмиття Гауса 44 3.2.3 Фільтр тиснення 45 3.2.4 Фільтр наведення контурів 46 3.2.5 Оператори Превітта 47 3.2.6 Оператори Собеля 49 3.2.7 Фільтр наведення різкості 50 3.3 Висновки до третього розділу 51 РОЗДІЛ 4. БЕЗПЕКА ЖИТТЄДІЯЛЬНОСТІ, ОСНОВИ ОХОРОНИ ПРАЦІ 52 4.1 Психологічні чинники небезпеки 52 4.2 Показники ефективності та заходи щодо покращення умов охорони праці 54 4.3 Висновки до четвертого розділу 56 ВИСНОВКИ 57 СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ 58 ДОДАТКИuk_UA
dc.format.extent62-
dc.language.isoukuk_UA
dc.publisherТНТУ ім. І.Пулюя, ФІС, м. Тернопіль, Українаuk_UA
dc.subject122uk_UA
dc.subjectвебзастосунокuk_UA
dc.subjectлінійна згорткаuk_UA
dc.subjectпаралельні обчисленняuk_UA
dc.subjectфільтрація зображеньuk_UA
dc.subjectimage filteringuk_UA
dc.subjectjavascriptuk_UA
dc.subjectlinear convolutionuk_UA
dc.subjectparallel computinguk_UA
dc.subjectsvelteuk_UA
dc.subjectweb applicationuk_UA
dc.subjectwebgpuuk_UA
dc.titleРозробка вебзастосунку для фільтрації зображень методом згортки із використанням засобів WebGPUuk_UA
dc.title.alternativeDevelopment of a Web Application for Image Filtering Using Convolution Methods with WebGPUuk_UA
dc.typeBachelor Thesisuk_UA
dc.rights.holder© Шимків Іван Михайлович, 2025uk_UA
dc.coverage.placenameТернопільuk_UA
dc.subject.udc004.42uk_UA
dc.relation.references1. Berkovich A. Understanding Image Sampling and Quantization in Digital Image Processing. Akridata. URL: https://akridata.ai/blog/image-sampling-quantization-digital-image-processing (date of access: 21.03.2025).uk_UA
dc.relation.references2. Concept of Quantization. Tutorials Point. URL: https://www.tutorialspoint.com/dip/concept_of_quantization.htm (date of access: 21.03.2025).uk_UA
dc.relation.references3. 3.10. Color Spaces and Encoding. W3C. URL: https://www.w3.org/TR/webgpu/#color-spaces (date of access: 22.03.2025).uk_UA
dc.relation.references4. RGB. MDN Web Docs. URL: https://developer.mozilla.org/en-US/docs/Glossary/RGB (date of access: 22.03.2025).uk_UA
dc.relation.references5. Recommendation ITU-R BT.709-6. Parameter values for the HDTV standards for production and international programme exchange. Official edition. 2015. 19 p. URL: https://www.itu.int/dms_pubrec/itu-r/rec/bt/R-REC-BT.709-6-201506-I!!PDF-E.pdf (date of access: 22.03.2025).uk_UA
dc.relation.references6. Umbaugh S. E. Digital Image Processing and Analysis: Computer Vision and Image Analysis. Taylor & Francis Group, 2023. 440 p.uk_UA
dc.relation.references7. A. Zaporozhets, Y. Kuts, B. Mlynko, M. Fryz, and L. Scherbak, “EEG Signal Classification Using Linear Process Model-Based Feature Extraction and Supervised Learning,” in Advanced System Development Technologies II. Studies in Systems, Decision and Control, M. Bezuglyi, N. Bouraou, V. Mykytenko, G. Tymchyk, and A. Zaporozhets, Eds., Cham: Springer Nature Switzerland, 2025, pp. 235–257. doi: 10.1007/978-3-031-82035-9_7.uk_UA
dc.relation.references8. Бабак В.П., Куц Ю.В., Мислович М.В., Фриз М.Є., Щербак Л.М. Об’єктно-орієнтована ідентифікація стохастичних шумових сигналів. Київ: Наукова думка, 2024. 240 с. https://doi.org/10.15407/978-966-00-1883-9.uk_UA
dc.relation.references9. V. Babak, A. Zaporozhets, Y. Kuts, M. Fryz, L. Scherbak. Noise signals: Modelling and Analyses. Cham: Springer Nature Switzerland, 2025. 222 p. DOI: https://doi.org/10.1007/978-3-031-71093-3uk_UA
dc.relation.references10. Бабак В. П., Марченко М. Є., Фриз. Б. Г. Теорія ймовірностей, випадкові процеси та математична статистика. К.: Техніка, 2004. 288 с.uk_UA
dc.relation.references11. Types of Convolution Kernels. Geeks for Geeks. URL: https://www.geeksforgeeks.org/deep-learning/types-of-convolution-kernels/ (date of access: 24.03.2025).uk_UA
dc.relation.references12. Flinders M., Smalley I. What is parallel computing?. IBM. URL: https://www.ibm.com/think/topics/parallel-computing (date of access: 24.03.2025).uk_UA
dc.relation.references13. Heterogeneous vs. Homogeneous Computing Environments. Intel Corporation. URL: https://www.intel.com/content/www/us/en/docs/sycl/introduction/latest/01-homogeneous-vs-heterogeneous.html (date of access: 25.03.2025).uk_UA
dc.relation.references14. Metal. Apple Developer Documentation. URL: https://developer.apple.com/documentation/Metal/ (date of access: 27.03.2025).uk_UA
dc.relation.references15. WebGL 2.0 Compute. Khronos Registry. URL: https://registry.khronos.org/webgl/specs/latest/2.0-compute/ (date of access: 28.03.2025).uk_UA
dc.relation.references16. Introduction. W3C. URL: https://www.w3.org/TR/WebGPU/#intro (date of access: 28.03.2025).uk_UA
dc.relation.references17. Beaufort F. From WebGL to WebGPU. Chrome for Developers. URL: https://developer.chrome.com/blog/from-webgl-to-webgpu (date of access: 28.03.2025).uk_UA
dc.relation.references18. GPUComputePipeline. W3C. URL: https://www.w3.org/TR/WebGPU/#gpucomputepipeline (date of access: 28.03.2025).uk_UA
dc.relation.references19. Galvan A. A Review of Shader Languages. Alain.xyz. URL: https://alain.xyz/blog/a-review-of-shader-languages (date of access: 28.03.2025).uk_UA
dc.relation.references20. Browser compatibility. MDN Web Docs. URL: https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API#browser_compatibility (date of access: 28.03.2025).uk_UA
dc.relation.references21. Implementation Status. GitHub. URL: https://github.com/gpuweb/gpuweb/wiki/Implementation-Status (date of access: 28.03.2025).uk_UA
dc.relation.references22. Web frameworks and technologies. Stack Overflow Insights. URL: https://survey.stackoverflow.co/2024/technology#2-web-frameworks-and-technologies (date of access: 04.04.2025).uk_UA
dc.relation.references23. React. React. URL: https://react.dev/ (date of access: 04.04.2025).uk_UA
dc.relation.references24. Getting started with React. MDN Web Docs. URL: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started (date of access: 05.04.2025).uk_UA
dc.relation.references25. Why Use React? Top Benefits for Web Development. Netguru. URL: https://www.netguru.com/blog/why-use-react (date of access: 19.04.2025).uk_UA
dc.relation.references26. Advantages and Disadvantages of ReactJS. Tutorials Point. URL: https://www.tutorialspoint.com/reactjs/reactjs_advantages_and_disadvantages.htm (date of access: 23.04.2025).uk_UA
dc.relation.references27. The Case for Signals: Why Everyone’s Talking About Solid.js, Qwik, and Preact. Medium. URL: https://medium.com/@asierr/the-case-for-signals-why-everyones-talking-about-solid-js-qwik-and-preact-497218345a50 (date of access: 28.04.2025).uk_UA
dc.relation.references28. Vue.js. Vue.js - The Progressive JavaScript Framework. URL: https://vuejs.org/guide/introduction.html (date of access: 28.04.2025).uk_UA
dc.relation.references29. Web Components. MDN Web Docs. URL: https://developer.mozilla.org/en-US/docs/Web/API/Web_components (date of access: 29.04.2025).uk_UA
dc.relation.references30. The Pros and Cons of Vue.js. AltexSoft. URL: https://www.altexsoft.com/blog/pros-and-cons-of-vue-js/ (date of access: 30.04.2025).uk_UA
dc.relation.references31. Welcome to Svelte • Svelte Tutorial. Svelte. URL: https://svelte.dev/tutorial/svelte/welcome-to-svelte (date of access: 01.05.2025).uk_UA
dc.relation.references32. Corradini F. Svelte 5 2025 Review: Runes and Other Exciting New Features. Scalable Path. URL: https://www.scalablepath.com/javascript/svelte-5-review (date of access: 15.05.2025).uk_UA
dc.relation.references33. The Svelte Team. Introducing runes. Svelte. URL: https://svelte.dev/blog/runes (date of access: 02.05.2025).uk_UA
dc.relation.references34. Introduction. Svelte. URL: https://svelte.dev/docs/kit/introduction (date of access: 08.05.2025).uk_UA
dc.relation.references35. Installing with Vite - Installation. Tailwind Labs Inc. URL: https://tailwindcss.com/docs/installation/using-vite (date of access: 08.05.2025).uk_UA
dc.relation.references36. Responsive web design. MDN Web Docs. URL: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design (date of access: 08.05.2025).uk_UA
dc.relation.references37. Project structure. Svelte. URL: https://svelte.dev/docs/kit/project-structure (date of access: 08.05.2025).uk_UA
dc.relation.references38. Emboss. Affinity Online Help. URL: https://affinity.help/photo2/en-US.lproj/index.html?page=pages/Filters/filter_emboss.html&title=Emboss (date of access: 12.05.2025).uk_UA
dc.relation.references39. Timothy M. Edge Detection in Image Processing: An Introduction. Roboflow Blog. URL: https://blog.roboflow.com/edge-detection/ (date of access: 15.05.2025).uk_UA
dc.relation.references40. Психофізіологічні фактори небезпеки. Pidru4niki. URL: https://pidru4niki.com/70725/bzhd/psihofiziologichni_faktori_nebezpeki (дата звернення: 17.05.2025).uk_UA
dc.relation.references41. «Безпека життєдіяльності» / Т. Є. Стиценко та ін. Харків : ХНУРЕ, 2018. 336 с. URL: https://os.nure.ua/wp-content/uploads/2019/05/posibnik-bgd_2018_p.1.pdf (дата звернення: 24.06.2025).uk_UA
dc.relation.references42. Березюк О. В., Лемешев М. С. 2.3 Психологічні чинники небезпеки. Безпека життєдіяльності. URL: https://web.posibnyky.vntu.edu.ua/fmbt/berezyuk_bezpeka_zhittyediyalnosti/23.htm (дата звернення: 19.05.2025).uk_UA
dc.relation.references43. 6.3. Показники і методика оцінки працездатності людини. Studentam.net.ua. URL: https://studentam.net.ua/content/view/6446/86/ (дата звернення: 19.05.2025).uk_UA
dc.relation.references44. Методи підвищення працездатності. Реферат. Освіта.ua. URL: https://osvita.ua/vnz/reports/econom_pidpr/18931/ (дата звернення: 20.05.2025).uk_UA
dc.relation.references45. Розробляємо комплексні заходи з охорони праці - Головне управління Пенсійного фонду України в Луганській області. ГУ Пенсійного фонду України в Луганській області. URL: https://www.pfu.gov.ua/lg/357125-rozroblyayemo-kompleksni-zahody-z-ohorony-pratsi/ (дата звернення: 21.05.2025).uk_UA
dc.contributor.affiliationТНТУ ім. І. Пулюя, Факультет комп’ютерно-інформаційних систем і програмної інженерії, Кафедра комп’ютерних наук, м. Тернопіль, Українаuk_UA
dc.coverage.countryUAuk_UA
Asub kollektsiooni(de)s:122 — Компʼютерні науки (бакалаври)

Failid selles objektis:
Fail Kirjeldus SuurusFormaat 
2025_KRB_SN-43_Shymkiv_IM.pdfДипломна робота5,58 MBAdobe PDFVaata/Ava
Näita lihtkirjet Vaata statistikat


Kõik teosed on Dspaces autoriõiguste kaitse all.

Admin vahendid