1. ELARTU — Інституційний репозитарій ТНТУ імені Івана Пулюя
  2. Роботи студентів
  3. Бакалавр
  4. 122 — Компʼютерні науки (бакалаври)
Будь ласка, використовуйте цей ідентифікатор, щоб цитувати або посилатися на цей матеріал: http://elartu.tntu.edu.ua/handle/lib/49630
Назва: Розробка вебзастосунку для фільтрації зображень методом згортки із використанням засобів WebGPU
Інші назви: Development of a Web Application for Image Filtering Using Convolution Methods with WebGPU
Автори: Шимків, Іван Михайлович
Shymkiv, Ivan Mykhailovych
Приналежність: ТНТУ ім. І. Пулюя, Факультет комп’ютерно-інформаційних систем і програмної інженерії, Кафедра комп’ютерних наук, м. Тернопіль, Україна
Бібліографічний опис: Шимків І. М. Розробка вебзастосунку для фільтрації зображень методом згортки із використанням засобів WebGPU : робота на здобуття кваліфікаційного ступеня бакалавра : спец. 122 - комп’ютерні науки / наук. кер. М. Є. Фриз. Тернопіль : Тернопільський національний технічний університет імені Івана Пулюя, 2025. 62 с.
Дата публікації: 29-чер-2025
Дата подання: 15-чер-2025
Дата внесення: 8-лип-2025
Видавництво: ТНТУ ім. І.Пулюя, ФІС, м. Тернопіль, Україна
Країна (код): UA
Місце видання, проведення: Тернопіль
Науковий керівник: Фриз, Михайло Євгенович
Fryz, Mykhailo
УДК: 004.42
Теми: 122
вебзастосунок
лінійна згортка
паралельні обчислення
фільтрація зображень
image filtering
javascript
linear convolution
parallel computing
svelte
web application
webgpu
Діапазон сторінок: 62
Короткий огляд (реферат): Кваліфікаційна робота присвячена розробці вебзастосунку для фільтрації зображень методом лінійної згортки із використанням WebGPU. У першому розділі кваліфікаційної роботи описано математичну модель кольорового зображення та стисло розглянуто операцію лінійної згортки. Висвітлено роль графічних процесорів у обчисленнях та обґрунтовано вибір WebGPU для розробки вебзастосунку. Розглянуто наявні альтернативні рішення. Проаналізовано їхні переваги та недоліки і виконано постановку завдання на основі одержаних відомостей. У другому розділі кваліфікаційної роботи підібрано технології для розробки вебзастосунку. Виконано порівняння фронтенд-фреймворків та вибір найоптимальнішого варіанту. Описано використані додаткові технології. Спроєктовано користувацький інтерфейс вебзастосунку. У третьому розділі кваліфікаційної роботи описано процес розробки вебзастосунку. Продемонстровано вигляд і роботу створеного вебзастосунку. Об’єкт дослідження: процес використання графічного процесора для обчислень у середовищі веб. Предмет дослідження: застосування WebGPU для лінійної фільтрації зображень
The 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 filtering
Опис: Роботу виконано на кафедрі комп'ютерних наук Тернопільського національного технічного університету імені Івана Пулюя. Захист відбудеться 29.06.2025р. на засіданні екзаменаційної комісії №30 у Тернопільському національному технічному університеті імені Івана Пулюя
Зміст: ВСТУП 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 ДОДАТКИ
URI (Уніфікований ідентифікатор ресурсу): http://elartu.tntu.edu.ua/handle/lib/49630
Власник авторського права: © Шимків Іван Михайлович, 2025
Перелік літератури: 1. 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).
2. Concept of Quantization. Tutorials Point. URL: https://www.tutorialspoint.com/dip/concept_of_quantization.htm (date of access: 21.03.2025).
3. 3.10. Color Spaces and Encoding. W3C. URL: https://www.w3.org/TR/webgpu/#color-spaces (date of access: 22.03.2025).
4. RGB. MDN Web Docs. URL: https://developer.mozilla.org/en-US/docs/Glossary/RGB (date of access: 22.03.2025).
5. 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).
6. Umbaugh S. E. Digital Image Processing and Analysis: Computer Vision and Image Analysis. Taylor & Francis Group, 2023. 440 p.
7. 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.
8. Бабак В.П., Куц Ю.В., Мислович М.В., Фриз М.Є., Щербак Л.М. Об’єктно-орієнтована ідентифікація стохастичних шумових сигналів. Київ: Наукова думка, 2024. 240 с. https://doi.org/10.15407/978-966-00-1883-9.
9. 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-3
10. Бабак В. П., Марченко М. Є., Фриз. Б. Г. Теорія ймовірностей, випадкові процеси та математична статистика. К.: Техніка, 2004. 288 с.
11. Types of Convolution Kernels. Geeks for Geeks. URL: https://www.geeksforgeeks.org/deep-learning/types-of-convolution-kernels/ (date of access: 24.03.2025).
12. Flinders M., Smalley I. What is parallel computing?. IBM. URL: https://www.ibm.com/think/topics/parallel-computing (date of access: 24.03.2025).
13. 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).
14. Metal. Apple Developer Documentation. URL: https://developer.apple.com/documentation/Metal/ (date of access: 27.03.2025).
15. WebGL 2.0 Compute. Khronos Registry. URL: https://registry.khronos.org/webgl/specs/latest/2.0-compute/ (date of access: 28.03.2025).
16. Introduction. W3C. URL: https://www.w3.org/TR/WebGPU/#intro (date of access: 28.03.2025).
17. 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).
18. GPUComputePipeline. W3C. URL: https://www.w3.org/TR/WebGPU/#gpucomputepipeline (date of access: 28.03.2025).
19. 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).
20. 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).
21. Implementation Status. GitHub. URL: https://github.com/gpuweb/gpuweb/wiki/Implementation-Status (date of access: 28.03.2025).
22. 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).
23. React. React. URL: https://react.dev/ (date of access: 04.04.2025).
24. 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).
25. Why Use React? Top Benefits for Web Development. Netguru. URL: https://www.netguru.com/blog/why-use-react (date of access: 19.04.2025).
26. Advantages and Disadvantages of ReactJS. Tutorials Point. URL: https://www.tutorialspoint.com/reactjs/reactjs_advantages_and_disadvantages.htm (date of access: 23.04.2025).
27. 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).
28. Vue.js. Vue.js - The Progressive JavaScript Framework. URL: https://vuejs.org/guide/introduction.html (date of access: 28.04.2025).
29. Web Components. MDN Web Docs. URL: https://developer.mozilla.org/en-US/docs/Web/API/Web_components (date of access: 29.04.2025).
30. 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).
31. Welcome to Svelte • Svelte Tutorial. Svelte. URL: https://svelte.dev/tutorial/svelte/welcome-to-svelte (date of access: 01.05.2025).
32. 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).
33. The Svelte Team. Introducing runes. Svelte. URL: https://svelte.dev/blog/runes (date of access: 02.05.2025).
34. Introduction. Svelte. URL: https://svelte.dev/docs/kit/introduction (date of access: 08.05.2025).
35. Installing with Vite - Installation. Tailwind Labs Inc. URL: https://tailwindcss.com/docs/installation/using-vite (date of access: 08.05.2025).
36. 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).
37. Project structure. Svelte. URL: https://svelte.dev/docs/kit/project-structure (date of access: 08.05.2025).
38. 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).
39. Timothy M. Edge Detection in Image Processing: An Introduction. Roboflow Blog. URL: https://blog.roboflow.com/edge-detection/ (date of access: 15.05.2025).
40. Психофізіологічні фактори небезпеки. Pidru4niki. URL: https://pidru4niki.com/70725/bzhd/psihofiziologichni_faktori_nebezpeki (дата звернення: 17.05.2025).
41. «Безпека життєдіяльності» / Т. Є. Стиценко та ін. Харків : ХНУРЕ, 2018. 336 с. URL: https://os.nure.ua/wp-content/uploads/2019/05/posibnik-bgd_2018_p.1.pdf (дата звернення: 24.06.2025).
42. Березюк О. В., Лемешев М. С. 2.3 Психологічні чинники небезпеки. Безпека життєдіяльності. URL: https://web.posibnyky.vntu.edu.ua/fmbt/berezyuk_bezpeka_zhittyediyalnosti/23.htm (дата звернення: 19.05.2025).
43. 6.3. Показники і методика оцінки працездатності людини. Studentam.net.ua. URL: https://studentam.net.ua/content/view/6446/86/ (дата звернення: 19.05.2025).
44. Методи підвищення працездатності. Реферат. Освіта.ua. URL: https://osvita.ua/vnz/reports/econom_pidpr/18931/ (дата звернення: 20.05.2025).
45. Розробляємо комплексні заходи з охорони праці - Головне управління Пенсійного фонду України в Луганській області. ГУ Пенсійного фонду України в Луганській області. URL: https://www.pfu.gov.ua/lg/357125-rozroblyayemo-kompleksni-zahody-z-ohorony-pratsi/ (дата звернення: 21.05.2025).
Тип вмісту: Bachelor Thesis
Розташовується у зібраннях:122 — Компʼютерні науки (бакалаври)

Файли цього матеріалу:
Файл Опис РозмірФормат 
2025_KRB_SN-43_Shymkiv_IM.pdfДипломна робота5,58 MBAdobe PDFПереглянути/відкрити
Показати повний опис матеріалу Перегляд статистики


Усі матеріали в архіві електронних ресурсів захищені авторським правом, всі права збережені.

Інструменти адміністратора