Web Worker image processing basics

By Technical specialist

A Web Worker is a separate JavaScript execution context that can perform expensive calculations without making the editor’s main thread do all the work. For browser image processing, that means model setup and inference can run away from the thread responsible for buttons, progress messages, brush input, and screen updates.

Натыйжада “акысыз фон иштетүү” эмес. Ошол эле аппарат дагы эле эсептөөлөрдү жүргүзөт жана эс тутумун колдонот. Архитектуралык артыкчылыгы - бул бөлүү: оор моделдин операциясы иштеп жатканда интерфейстин ар бир жообун бөгөттөө ыктымалдыгы азыраак.

Негизги жипте колдонуучу интерфейсинин жумушу бар

Серепчи барагы, адатта, негизги жипте JavaScript иштетет. Бул жип макетти, сүрөттү жана киргизүүнү координациялайт. Эгер бир узун эсептөөнү ээлесе, чыкылдатуулар кечигип, анимация токтоп калышы мүмкүн жана браузер бет жооп бербей жатканын эскертиши мүмкүн.

Сүрөт редактору тыянак башталганга чейин көптөгөн негизги милдеттерге ээ:

• receive a file selection, paste, or drop;
• сүрөттү декоддоо жана көрсөтүү;
• прогрессти жана каталардын абалын жаңыртуу;
• алдын ала көрүү полотносун тартуу;
• handle Add and Erase brush movement;
• жүктөө же алмашуу буфериндеги аракеттерди даярдоо.

Сегменттөө моделинин сандык ишин бир эле жипке коюу, ал милдеттерди түздөн-түз атаандаштырмак. Жумушчу так чекти түзөт.

Кабарга негизделген чек

Редактор менен жумушчу кадимки өзгөрмөлөрдү бөлүшпөйт. They communicate by sending messages. A simplified flow looks like this:

1. Редактор жумушчуну түзөт же кайра колдонот.
2. Бул жумушчудан жыйынтыктын иштөө убактысын жана моделин инициализациялоону суранат.
3. Бул сүрөт маалыматтарын даярдайт жана корутунду суроону жөнөтөт.
4. Жумушчу маалыматтарды моделдин күтүлгөн киргизүүсүнө айлантат.
5. Жумушчу моделди иштетип, маска баалуулуктарын чыгарат.
6. Ал масканы же натыйжа маалыматтарын кайра жөнөтөт.
7. Редактор алдын ала кароону бириктирип, тактоо же экспорттоо мүмкүнчүлүгүн берет.

Кабарлар туура суроо-талапка жооп берүү үчүн жетиштүү контекстти камтышы керек. Бул колдонуучу мурунку жумуш аяктаганга чейин башка сүрөттү тандаса маанилүү. Интерфейс эски натыйжаны жаңы булактан көрсөтүүдөн качышы керек.

Copying and transferring image data

Sending a small text message is cheap. Браузер бүтүндөй буферди көчүрүп алыш керек болсо, миллиондогон пикселдик маанилерди жөнөтүү кымбат болушу мүмкүн. Web API’лери анын ордуна белгилүү экилик буферлердин ээлик укугун өткөрүп бере алышат. Өткөрүлгөн буфер жөнөтүүчү тарапта колдонууга жарактуу дубликатын сактабастан кабыл алуучуга жеткиликтүү болот.

Бул оптималдаштыруу дизайн чектөөсү менен келет: өткөрүп бергенден кийин, жөнөтүүчү ошол эле буферди колдоно албайт, анткени ал дагы эле маалыматтарга ээ. Редактор өзүнчө дисплей өкүлчүлүгүн сактай алат, атайын корутунду буферин түзө алат же кийинчерээк керектүү нерсени кайра түзө алат.

Ар бир ишке ашыруу так ошол эле жерлерде өткөрүүнү колдоно бербейт. Жалпы сабак, жипти бөлүү маалымат кыймылын жок кылбайт. Сүрөттүн өлчөмдөрү, буфердин өлчөмү жана конверсиялардын саны дагы эле күтүү жана эстутумга таасирин тийгизет.

What Easy Background Remover puts in the worker

Easy Background Remover түзмөктөгү сегментациялоо үчүн серепчиден жыйынтык чыгаруу убактысы менен Web Worker колдонот. The heavy automatic cutout step produces a mask. Андан кийин редактор курамдык натыйжаны көрсөтөт жана CPU-канвас щетка тактоосун колдойт.

Бул бөлүү каталарга пайдалуу чекти берет. If the worker cannot initialize or crashes during inference, the interface can report a worker-related error instead of relying on a permanently frozen tab as the only signal.

Ал ошондой эле жергиликтүү кайра иштетүү дооматын түшүнүктүү кылат. Кеңейтүү барагынан пикселдерди өзүнүн жумушчусуна жөнөтүү - бул алыскы кесүү API’сине жүктөө эмес, браузер чөйрөсүндөгү байланыш. Биринчи сеанс кайра колдонулуучу моделдин активин өзүнчө жүктөй алат; караңыз Эмне үчүн биринчи жүктөө моделин иштетүү.

A worker does not make computation instant

Жумушчулар чийки түзмөк жөндөмүн эмес, жооп берүү жөндөмдүүлүгүн жакшыртышат. Модель дагы эле CPU, GPU же башка иштөө убактысынын ресурстарын серепчи камсыздай алат. Чоң киргизүү дагы эле көп убакытты талап кылышы мүмкүн жана кичинесине караганда көбүрөөк эстутумду талап кылышы мүмкүн.

Бир нече чектөөлөр калды:

• моделди инициализациялоо реалдуу чыгымга ээ;
• пикселдик буферлер көчүрүлгөн учурда эки тараптан тең эстутумду ээлейт;
• өлчөмүн өзгөртүү жана форматты өзгөртүү убакытты талап кылат;
• эс тутуму аз түзмөктөр чоң сүрөттөр менен күрөшүшү мүмкүн;
• көбүрөөк жумушчулар чыр-чатакты кыскартуунун ордуна күчөтүшү мүмкүн;
• экспорт жана кенеп жаңыртуулары дагы эле негизги жипти камтышы мүмкүн.

Беш сүрөт үчүн беш корутундуну баштоо автоматтык түрдө беш эсе тезирээк болбойт. Жумушчулар бир эле станокту бөлүшөт. Параллель жумуштар эс тутумунун өткөрүү жөндөмдүүлүгү жана аткаруу ресурстары үчүн атаандаша алат, ал эми ар бир үлгү инстанциясы өзүнүн эс тутумунун наркын көтөрө алат.

Иштин жүрүшү жөнүндө отчет берүү кооперативдик болуп саналат

Жумушчу статус билдирүүлөрүн жөнөтө алат, бирок прогресстин кайсы пайызы так сезилерин автоматтык түрдө билбейт. Моделди жүктөө, иштөө убактысын инициализациялоо, киргизүүнү даярдоо, жыйынтык чыгаруу, масканы өзгөртүү жана алдын ала көрүү рендеринги ар кандай убакыт менен өзүнчө фазалар.

Кээ бир фазалардын өлчөнгөн байт саны бар. Бир моделдин аткарылышы “башталган” жана “аяктаган” дегенди гана көрсөтө алат. Ошентип, бир калыпта илгерилеген жылмакай пайыз так өлчөө эмес, косметикалык болушу мүмкүн.

Пайдалуу прогресс UI мүмкүн болгондо фазаны атайт: моделди даярдоо, сүрөттү иштетүү же натыйжаны куруу. Ал ошондой эле эч кандай түшүндүрмөсүз спиннерди калтыруунун ордуна ийгиликсиздикти жана жокко чыгарууну чечет.

Жок кылуу - бул спиннерди жашыруу

Колдонуучу сүрөттү жапса же кайра баштаса, интерфейс эскирген суроо-талаптын акыркы жообун этибарга албай коюшу мүмкүн. Негизги эсептөөнү дароо токтотуу, иштөө убактысынан кошумча колдоону же жумушчуну токтотууну жана кайра жаратууну талап кылышы мүмкүн.

Жумушчуну токтотуу чечүүчү нерсе, бирок анын инициализацияланган абалын жокко чыгарат. Кийинки жумушка моделди кайра жүктөө жана инициализациялоо керек болушу мүмкүн. Кыска операция үчүн, натыйжанын эскиргендигин белгилөө баарын талкалап салуудан арзаныраак болушу мүмкүн.

Туура тандоо эс тутумдун басымына, операциянын узактыгына жана иштөө убактысынын мүмкүнчүлүктөрүнө жараша болот. Колдонуучунун көз карашы боюнча, маанилүү эреже - эскирген иш учурдагы түзөтүүнүн үстүнөн жазбашы керек.

Каталар да чек арадан өтүшү керек

Жумушчунун ичиндеги өзгөчөлүк кадимки негизги бөтөнчөлүккө айланбайт. Жумушчу колдонууга мүмкүн болгон каталар жөнүндө кабарлашы керек, ал эми редактор жумушчу деңгээлиндеги кемчиликтерди угушу керек.

Жакшы каталарды иштетүү, жок эле дегенде, айырмалайт:

• моделдик актив жеткиликтүү эмес;
• моделди инициализациялоо ишке ашкан жок;
• сүрөттүн декоддоосу же киргизүүнү даярдоо ишке ашкан жок;
• корутундусу ишке ашкан жок;
• жумушчу күтүлбөгөн жерден токтоп калды;
• натыйжа мындан ары учурдагы суроо-талапка таандык эмес.

Бул жалпы “бир нерсе туура эмес болуп кетти” дегенге караганда аракетке болот, өзгөчө биринчи жолу орнотууда жана кадимки сүрөт иштетүүдө ар кандай жолдор бар.

Жумушчу өндүрүшү дагы эле биринчи маска

Жиптин архитектурасы түшүнүксүз кырды өзүнөн өзү жакшыртпайт. Жумушчу түктөрдү, тунук материалды, тар боону же каалаган көлөкөнү сагынган техникалык жактан жарактуу масканы кайтара алат. Бул сегменттөө жана ниет суроолор.

Редактордун иши тыянак чыгаргандан кийин улантылат: масканы жумушчу координаттар тутумуна масштабдаңыз, алдын ала кароону түзүңүз, колдонуучу аны тактап, учурдагы абалын экспорттоңуз. Масканын чечилиши жана алдын ала көрүү өлчөмү эмне үчүн ошол координаттар системаларын чаташтырбоо керектигин түшүндүрөт.

Кыскача акыл модели

Кабар терезесинин артында жумушчуну жергиликтүү адис катары элестетиңиз:

• редактордун өз ара аракеттенүүсү;
• жумушчу оор тыянак тапшырмасын ээлейт;
• экилик сүрөттөлүш маалыматтар аныкталган чекти кесип өтөт;
• жумушчу беткапты кайтарып берет, ар бир чети боюнча аяктаган сот эмес;
• редактор учурдагы абалы, карап чыгуу, тактоо жана экспорттоо үчүн жооптуу бойдон калууда.

Моделдин пикселдердин өзүн көрүү үчүн, Түзмөктөгү кесилген модель эмнени көрөт менен улантыңыз. Үчүн аягына чейин практикалык сереп алуу үчүн Жергиликтүү фонду алып салуу кандай иштейт дегенди караңыз.