Застосування сучасних комп’ютерних технологій з метою створення веб-розробки й зовнішнього інтерфейсу (front-end)

Размещено на http://www.allbest.ru/

Размещено на http://www.allbest.ru/

Факультет «Інженерія програмного забезпечення»

Хмельницький політехнічний фаховий коледж

Національного університету "Львівська політехніка"

Застосування сучасних комп'ютерних технологій з метою створення веб-розробки й зовнішнього інтерфейсу (front-end)

Благодельський Олександр Сергійович

фаховий молодший бакалавр

Анотація

Впродовж останніх 20 років комп'ютерні технології дозволили вдосконалити сучасні інформаційні технології (ІТ) з використанням різних програмних кодів, які на сьогодні широко застосовуються при розробці веб-додатків, веб-сторінок та інших веб-ресурсів. Саме веб-додатки та веб-сторінки у сучасному світі відіграють важливу роль для життєвих аспектів людства, таких як надання онлайн-послуг для придбання товарів та замовлення їжі, надання онлайн-послуг для бронювання квитків, замовлення таксі тощо.

Сучасні технології дозволяють комбінувати різні методи інформаційних технологій, що поєднує в собі використання засобів комунікацій для обміну даних, веб-систем, інтернет мережі та залученням методів машинного навчання. Розвиток веб-систем привернули до себе увагу провідних фахівців зі сфери штучного інтелекту для надання кросплатформенної обчислювальної цілі для глибокого навчання на стороні клієнта.

Розвиток технологічного прогресу та впровадження новітніх технологій посприяв розвитку штучного інтелекту на основі моделей машинного навчання, які на сьогодні можуть застосовуватися у вигляді сучасних інформаційних технологій з використанням мов програмування Python, C++ і можуть розгоратися, як веб-програми.

Метою даної роботи є проведення літературного огляду та аналіз особливостей застосування сучасних комп'ютерних технологій (ІТ) для створення зовнішнього інтерфейсу веб-додатків на основі застосування моделі машинного та глибокого навчання. Розглядаються ключові особливості застосування мов програмування, таких як Python та JavaScript для браузерних веб-додатків машинного навчання, а також використання TensorFlowjs для створення моделей машинного навчання.

Сучасні веб-браузери надають широкий набір інструментів розробникам для управління та відображення текстових, аудіо та візуальних даних можуть бути використані у браузері моделями глибокого навчання. Окрім цього, сучасні веб-браузери можуть отримувати доступ до сенсорних даних на основі датчиків, що відкриває широкі можливості для багатьох додатків глибокого навчання.

Ключові слова: інформаційні технології, інтерфейсні веб-додатки, JavaScript, TensorFlow.js, глибоке навчання.

Blahodelskyi Oleksandr Serhiyovych Professional Junior Bachelor, Faculty of Software Engineering, Khmelnitsky Polytechnic Professional College by Lviv Polytechnic National University, Khmelnytskyi

APPLICATION OF MODERN COMPUTER TECHNOLOGIES TO CREATE WEB DEVELOPMENT AND FRONT-END INTERFACE

Abstract

Over the past 20 years, computer technology has enabled the improvement of modern information technology (IT) using various software codes that are now widely used in the development of web applications, web pages and other web resources. In the modern world, web applications and web pages play an important role in the vital aspects of human life, such as providing online services for purchasing goods and ordering food, providing online services for booking tickets, ordering taxis, etc.

Modern technologies allow combining various methods of information technology, which combines the use of communication tools for data exchange, web-based systems, the Internet and the involvement of machine learning methods. The development of web-based systems has attracted the attention of leading artificial intelligence experts to provide a cross-platform computing target for deep learning on the client side.

The development of technological progress and the introduction of the latest technologies have contributed to the development of artificial intelligence based on machine learning models, which today can be applied in the form of modern information technologies using Python and C++ programming languages and can be deployed as web applications.

The purpose of this paper is to conduct a literature review and analyse the peculiarities of using modern computer technologies (IT) to create an external interface of web applications based on the application of machine and deep learning models. The key features of using programming languages such as Python and

JavaScript for browser-based web-based machine learning applications, as well as the use of TensorFlow.js to create machine learning models are considered.

Modern web browsers provide a wide range of tools for developers to manage and display text, audio, and visual data that can be used by deep learning models in the browser. Additionally, modern web browsers can access sensor-based sensory data, which opens up a wide range of possibilities for many deep learning applications.

Keywords: information technology, front-end web applications, JavaScript, TensorFlow.js, deep learning.

Вступ

Постановка проблеми. Впродовж останніх 20 років створення комунікаційних технологій та ресурсів за допомогою бібліотек веб-саитів набуло широкого застосування у глобальному масштабі. Однак в Україні веб- ресурси та бібліотеки із застосуванням інтернет-технологій набули широкого застосування за останні 15 років, що пояснюється вивченням інформаційних потреб користувачів та забезпечення соціальних комунікацій за допомогою різноманітних опцій веб-сайту [1].

Станом на 2020 рік існує велика кількість бібліотек, фреймворків та утиліт для інтерфейсної (front-end) веб-розробки. Оскільки кількість інтерфейсних веб-бібліотек, фреймворків, утиліт, мовних розширень постійно зростає для початківців та розробників з галузей програмної інженерії це спричинило масову плутанину. Основний стек технологій веб-сторінки складається з мови розмітки гіпертексту (HTML), каскадних таблиць стилів (CSS) та JavaScript. HTML визначає структуру веб-сторінки, CSS стилізує сторінку, а JavaScript забезпечує взаємодію з користувачем, що в сукупності вважається інтерфейсною веб-розробкою [2].

Під час розробки веб-додатків деякі фахівці можуть зіштовхнутися з рядом проблем, які можуть міститися на кожному етапі розробки як на етапі створення UI/UX дизайну, так і на фінальному етапі розміщення та розгортання веб-додатку. Для розв'язання наявних проблем під час розробки веб-додатку розглянемо структуру, яка містить основні етапи реалізації за допомогою комп'ютерних технологій [3].

1) Створення UI/UX дизайну, завдяки чому створюється інтуїтивно зрозумілий інтерфейс програми з елементами візуалізації для реєстрації користувача (наприклад, вхід в систему, пошук товарів, розміщення та замовлення товарів тощо);

2) Backend розробка, яка призначена для створення внутрішньої частини (невидимої) у вигляді бази даних та серверу для клієнта (наприклад, авторизація з аутентифікацією клієнта при вході в систему, обслуговування запитів зовнішнього інтерфейсу, читання та оновлення даних);

3) Розробка зовнішнього інтерфейсу (front-end) з метою створення зовнішньої частини інтерфейсу на мовах програмування HTML, CSS, JavaScript, Ajax, а використання популярних фреймворків, таких як Angular, React JS дозволяють використовувати кодовані модулі для скорочення часу під час розробки;

4) Тестування веб-додатку характеризується: тестуванням інтерфейсу (перевірка комунікації, підключення до бази даних, посилання між сторінками); перевірка продуктивності (швидкість передачі даних, обробка користувацького вводу, робота під великим навантаженням й при різних швидкостях інтернету); UI-тестування для перевірки зручності користувацького інтерфейсу, а також роботу сервера з внутрішньою частиною системи; тестування розробленого продукту з використанням різних браузерів та пристроїв для визначення сумісності; перевірка слабких та вразливих місць з точки зору безпеки.

5) Розміщення та розгортання веб-додатку.

Однак розвиток технологічного прогресу та впровадження новітніх, сучасних технологій посприяв розвитку штучного інтелекту на основі моделей машинного та глибокого навчання, які зазвичай розробляються з використанням мов програмування Python, C++, R і можуть розгортатися, як веб-програми. Безліч дослідників часто стикаються з новими проблемами та обмеженнями під час розгортання моделей глибокого навчання у браузері, оскільки деякі моделі ймовірно не можуть бути розробленими для виконання операцій на стороні клієнта. Окрім того, високопродуктивний внутрішній сервер з апаратним прискоренням (GPU) відрізняється від зовнішнього середовища в браузері з обмеженими ресурсами [4].

Аналіз останніх досліджень і публікацій. Веб-браузери та веб-додатки привернули до себе увагу безліч дослідників штучного інтелекту, оскільки вони пропонують кросплатформенну обчислювальну ціль для глибоко навчання на стороні клієнта. Конфіденційність, доступність і низька затримка взаємодії є основними перевагами використання веб-браузерів для розгортання [2,4]. Доступ браузера до компонентів, включаючи веб-камеру, мікрофон і акселерометр, дозволяє легко інтегрувати моделі глибокого навчання і дані з датчиків. Завдяки такому зв'язку дані користувача можуть зберігатися на пристрої, зберігаючи при цьому конфіденційність, що дозволяє створювати персоналізовані програми глибокого навчання в таких галузях, як медицина та освіта [5].

У роботі [6] для полегшення розгортання об'єднаного навчання та впровадження пов'язаних програм, авторами запропонований інноваційний WebFed з новою структурою об'єднаного навчання на основі браузера, яка використовує переваги функції браузера, а саме кросплатформенність на основі мови програмування JavaScript, що покращує захист конфіденційності шляхом застосування локально-диференціальної конфіденційності.

Деякі інші приклади глибокого навчання призначені для радіології, які можуть розгортатися через хмарні платформи та локальні інфраструктури для використання у сучасних лікарнях. Деякі з аспектів застосування методів глибокого навчання для радіології наведені у роботі [7], де автори зробили припущення, що складні моделі глибокого навчання можуть застосовуватися у веб-браузерах як із залучення зовнішньообчислювальної інфраструктури, так і без неї.

Не менш актуальним є дослідження інтеграції інструментів штучного інтелекту, зокрема технології генеративного попередньо навченого трансформатора (GPT) OpenAI у процеси веб-розробки з використанням WordPress для розробки чат-сервісу, яким керує штучний інтелект[8]. Однак нині можливості ChatGPT дещо обмежені й потребують більш детального вивчення, але дозволяють ефективно допомагати при розробці.

Мета статті - проведення літературного огляду та аналіз особливостей застосування сучасних комп'ютерних технологій (ІТ) для створення зовнішнього інтерфейсу веб-додатків на основі застосування моделей машинного на глибокого навчання.

Оскільки штучний інтелект та веб-системи належать до інформаційних технологій, для досягнення поставленої мети необхідно виконати наступні задачі: провести літературний огляд з розвитку комп ютерних технологій для розробки веб-сайтів та веб-додатків; на основі літературного огляду дослідити актуальні проблеми під час розробки веб-програми; провести літературний огляд із застосуванням методів машинного навчання для можливості розробки веб-середовища.

Виклад основного матеріалу

Використання популярних інтерфейсних технологій дозволяють розробити реальні програми на основі глибокого навчання з використанням браузера, JavaScript та TensorFlow.js в якості інтерфейсного стека. Такі технологічні стеки побудовані один на одному для того, щоб сформувати систему для розгортання глибоко навчання на передньому плані. Порівнюючи з традиційним підходом, який передбачає розгортання моделі глибокого навчання на серверній частині з доступом до неї через складні виклики API, що надсилаються за допомогою HTTP-запитів з використанням JavaScript. Через свою семантику та вимоги, правильне та ефективне використання API для машинного навчання є складним завданням.

Однак з розвитком інтерфейсної розробки у дослідників з'явилася можливість розгортання на інтерфейсі, таким чином, мігруючи від внутрішніх центрів обробки даних до клієнтів. Фронтенд додатки для глибокого навчання мають такі переваги: широке охоплення, зниження витрат на сервер, своєчасний відгук і конфіденційність

Python є кращою мовою програмування для більшості проектів машинного навчання, але JavaScript вважається більш практичною для браузерних веб-додатків машинного навчання на основі браузера, що пояснюється простотою використання інтерфейсних компонентів. Движок JavaScript є у всіх браузерах і саме він відповідає за створення адаптивного інтерактивного середовища. JavaScript вже дев'ять років є найпоширенішою мовою програмування з відкритим вихідним кодом і часто вважається універсальною мовою для браузерів[9]. Вона містить вдосконалену систему з широким спектром клієнтських і серверних додатків і швидко розвивається. Окрім того, така мова покращує користувацький досвід, додаючи до веб- сторінок інтерактивні компоненти, які реагують на запити користувача, наприклад, оновлювати вміст веб-сторінок, анімувати графіку та керувати мультимедіа. Тому взаємодія з користувачем має вирішальне значення в додатках для глибокого навчання.

Веб-браузери містять широкий набір інструментів для управління та відображення текстових, аудіо та візуальних даних, які створені та доступні клієнту й можуть бути використані безпосередньо у браузері моделями глибокого навчання. Окрім цього, сучасні веб-браузери можуть отримувати доступ до сенсорних даних (датчиків), що відкриває широкі можливості для багатьох додатків глибокого навчання. Наприклад, у роботі [10] розпізнавання обличчя на основі фронтенду дозволило розробникам запустити модель на стороні клієнта, зменшуючи затримку і навантаження на сервер.

Розгортання моделей глибокого навчання у браузерах змушує розробників кидати нові виклики перед новими труднощами програмування, такими як перетворення моделей у формати, необхідні для цільових платформ, де ключовим моментом при розгортанні моделей є взаємодія між знаннями глибокого навчання та веб-розробкою.

Оскільки середовища розробки машинного навчання несумісні з середовищами розгортання, їх перенесення потребує багато часу та зусиль для адаптації до нового середовища. Причина полягає в тому, що фреймворки глибокого навчання часто розробляються на потужних машинах із графічними процесорами, що прискорює навчання, але може перешкоджати висновкам під час розгортання на пристроях низького класу. Веб-додатки, написані на JavaScript, часто складно створювати для розробників, які віддають перевагу Python, що своєю чергою може створювати додаткові труднощі для подолання. До того ж у порівнянні з Python, у відкритому доступі є лише кілька загальнодоступних пакетів для поглибленого вивчення та вбудованих функцій для JavaScript. Відсутність підтримки бібліотек може додати складності та подовжити час розробки.

Використання TensorFlow.js для створення моделей машинного навчання, яка сумісна з API-інтерфейсами TensorFlow Python дозволяє використовувати її сильні сторони. Але на відміну від API TensorFlow Python, TensorFlow.js можна легко поширювати та виконувати на будь-якій платформі без встановлення, що робить її більш потужною та простою у користуванні. Варто зазначити, що TensorFlow.js надає високорівневі API для моделювання, що дозволяє легко розгортати попередньо навчені моделі у браузері.

Окрім гнучкості, необхідної для веб-додатків машинного навчання, TensorFlow.js має хорошу продуктивність з апаратним прискоренням. Оскільки бібліотека TensorFlow.js пов'язана з механізмом прискорення, який може міститися в сучасних веб-браузерах, що забезпечує високопродуктивне машинне навчання та чисельні обчислення на JavaScript[9-10]. Сучасні веб- браузери мають API WebGL (кросплатформний API для SD-графіки в браузер), який спочатку призначався для прискорення рендерингу 2D і 3D- візуальних зображень на веб-сторінках. Пізніше він був перепрофільований для паралельних чисельних обчислень у нейронних мережах у TensorFlow.js[11]. Це означає, що інтегрована відеокарта може прискорити операції глибокого навчання, усуваючи при цьому потребу у спеціальних відеокартах, наприклад NVIDIA, GTX, необхідних для нативних фрейморків глибоко навчання.

Система TensorFlow.js дозволяє підтримувати всі основні процеси, наприклад, навчання та виведення, серіалізація, перетворення моделей тощо. Окрім цього вона також підтримує широкий спектр середовищ [12], включаючи браузери, розширення для браузерів, веб-сервери, хмарні сервери, десктопні та мобільні додатки, а також платформи для плагінів додатків.

TensorFlow.js містить колекцію попередньо навчених моделей Google, які показані у табл. 1. Такі підготовлені моделі на основі команд готові виконувати різні завдання, наприклад: ідентифікація об'єктів, сегментація зображення, розпізнавання голосу та категоризація токсичності тексту.

Моделі можна використовувати або налаштовувати за допомогою трансферного навчання. Попередньо навчені моделі TensorFlow.js можна класифікувати в залежності від того, чи є вони корисними моделями об'єктів, моделями обличчя, а також за межами моделі тексту або мови.

Проведемо аналіз з дослідження розробки інтерфейсних веб-додатків для глибокого навчання, щоб продемонструвати взаємозалежність інтерфейсного глибокого навчання на прикладі розгортання зовнішнього інтерфейсу. На рис. 1 показано основні 7 категорій, які розглядаються.

Таблиця 1.

Попередньо навчені моделі TensorFlow.js

Моделі обличчя та пози