Try `@mediapipe/task-vision`for background segmentation

[ayushnirwal]

Context

Test Using @mediapipe/tasks-vision instead of @mediapipe/selfie_segmentation for background blurring

Summary

Reference GIFs for masks with the background blocked out.

• Using @mediapipe/task-vision

• Using @mediapipe/selfie_segmentation

Relevant Technical Choices

• Using the model presented in the example produces framerate issues thus the other model is used.

To-do

User-facing changes

Testing Instructions

• [ ] This is a non-user-facing change and requires no QA

This PR can be tested by following these steps:

Reviews

Does this PR have a security-related impact?

Does this PR change what data or activity we track or use?

Does this PR have a legal-related impact?

Checklist

• [ ] This PR addresses an existing issue and I have linked this PR to it in ZenHub
• [x] I have tested this code to the best of my abilities
• [ ] I have verified accessibility to the best of my abilities (docs)
• [ ] I have verified i18n and l10n (translation, right-to-left layout) to the best of my abilities
• [ ] This code is covered by automated tests (unit, integration, and/or e2e) to verify it works as intended (docs)
• [ ] I have added documentation where necessary
• [x] I have added a matching Type: XYZ label to the PR

---

Addresses #13189

[github-actions[bot]]

Size Change: +78 kB (+3%)

Total Size: 2.82 MB

Filename	Size	Change
assets/js/chunk-selfie-segmentation.js	94.2 kB	+77.9 kB (+478%)	🆘
assets/js/web-stories-editor.js	1.46 MB	+167 B (0%)

ℹ️ View Unchanged

Filename	Size
assets/css/web-stories-block-rtl.css	4.6 kB
assets/css/web-stories-block.css	4.63 kB
assets/css/web-stories-carousel-rtl.css	702 B
assets/css/web-stories-carousel.css	701 B
assets/css/web-stories-dashboard-rtl.css	657 B
assets/css/web-stories-dashboard.css	659 B
assets/css/web-stories-editor-rtl.css	769 B
assets/css/web-stories-editor.css	771 B
assets/css/web-stories-embed-rtl.css	655 B
assets/css/web-stories-embed.css	656 B
assets/css/web-stories-list-styles-rtl.css	2.39 kB
assets/css/web-stories-list-styles.css	2.42 kB
assets/css/web-stories-theme-style-twentyeleven-rtl.css	102 B
assets/css/web-stories-theme-style-twentyeleven.css	102 B
assets/css/web-stories-theme-style-twentyfifteen-rtl.css	251 B
assets/css/web-stories-theme-style-twentyfifteen.css	251 B
assets/css/web-stories-theme-style-twentyfourteen-rtl.css	287 B
assets/css/web-stories-theme-style-twentyfourteen.css	287 B
assets/css/web-stories-theme-style-twentyseventeen-rtl.css	288 B
assets/css/web-stories-theme-style-twentyseventeen.css	288 B
assets/css/web-stories-theme-style-twentysixteen-rtl.css	224 B
assets/css/web-stories-theme-style-twentysixteen.css	224 B
assets/css/web-stories-theme-style-twentyten-rtl.css	143 B
assets/css/web-stories-theme-style-twentyten.css	143 B
assets/css/web-stories-theme-style-twentytwelve-rtl.css	256 B
assets/css/web-stories-theme-style-twentytwelve.css	256 B
assets/css/web-stories-theme-style-twentytwenty-rtl.css	86 B
assets/css/web-stories-theme-style-twentytwenty.css	86 B
assets/css/web-stories-theme-style-twentytwentyone-rtl.css	326 B
assets/css/web-stories-theme-style-twentytwentyone.css	326 B
assets/css/web-stories-widget-rtl.css	486 B
assets/css/web-stories-widget.css	486 B
assets/js/3669.js	38.1 kB
assets/js/3780.js	12.9 kB
assets/js/4422.js	49.1 kB
assets/js/4740.js	95.6 kB
assets/js/649.js	8.03 kB
assets/js/7357.js	92 B
assets/js/83.js	4.62 kB
assets/js/8393.js	216 kB
assets/js/9527.js	12.9 kB
assets/js/chunk-colorthief.js	2.62 kB
assets/js/chunk-ffmpeg.js	5.98 kB
assets/js/chunk-html-to-image.js	4.51 kB
assets/js/chunk-media-gallery.js	6.12 kB
assets/js/chunk-mediainfo.js	96 B
assets/js/chunk-opentype.js	96 B
assets/js/chunk-react-calendar.js	10.8 kB
assets/js/chunk-react-color.js	25.8 kB
assets/js/chunk-web-stories-template-0-metaData.js	546 B
assets/js/chunk-web-stories-template-0.js	11 kB
assets/js/chunk-web-stories-template-1-metaData.js	540 B
assets/js/chunk-web-stories-template-1.js	9.27 kB
assets/js/chunk-web-stories-template-10-metaData.js	532 B
assets/js/chunk-web-stories-template-10.js	7.23 kB
assets/js/chunk-web-stories-template-11-metaData.js	539 B
assets/js/chunk-web-stories-template-11.js	8.87 kB
assets/js/chunk-web-stories-template-12-metaData.js	496 B
assets/js/chunk-web-stories-template-12.js	8.67 kB
assets/js/chunk-web-stories-template-13-metaData.js	525 B
assets/js/chunk-web-stories-template-13.js	6.9 kB
assets/js/chunk-web-stories-template-14-metaData.js	582 B
assets/js/chunk-web-stories-template-14.js	7.26 kB
assets/js/chunk-web-stories-template-15-metaData.js	544 B
assets/js/chunk-web-stories-template-15.js	8.77 kB
assets/js/chunk-web-stories-template-16-metaData.js	588 B
assets/js/chunk-web-stories-template-16.js	10.5 kB
assets/js/chunk-web-stories-template-17-metaData.js	540 B
assets/js/chunk-web-stories-template-17.js	9.05 kB
assets/js/chunk-web-stories-template-18-metaData.js	587 B
assets/js/chunk-web-stories-template-18.js	9.31 kB
assets/js/chunk-web-stories-template-19-metaData.js	501 B
assets/js/chunk-web-stories-template-19.js	9.17 kB
assets/js/chunk-web-stories-template-2-metaData.js	586 B
assets/js/chunk-web-stories-template-2.js	9.02 kB
assets/js/chunk-web-stories-template-20-metaData.js	548 B
assets/js/chunk-web-stories-template-20.js	8.72 kB
assets/js/chunk-web-stories-template-21-metaData.js	536 B
assets/js/chunk-web-stories-template-21.js	9.48 kB
assets/js/chunk-web-stories-template-22-metaData.js	525 B
assets/js/chunk-web-stories-template-22.js	7.44 kB
assets/js/chunk-web-stories-template-23-metaData.js	604 B
assets/js/chunk-web-stories-template-23.js	6.95 kB
assets/js/chunk-web-stories-template-24-metaData.js	517 B
assets/js/chunk-web-stories-template-24.js	11.2 kB
assets/js/chunk-web-stories-template-25-metaData.js	543 B
assets/js/chunk-web-stories-template-25.js	6.79 kB
assets/js/chunk-web-stories-template-26-metaData.js	600 B
assets/js/chunk-web-stories-template-26.js	6.97 kB
assets/js/chunk-web-stories-template-27-metaData.js	542 B
assets/js/chunk-web-stories-template-27.js	7.66 kB
assets/js/chunk-web-stories-template-28-metaData.js	532 B
assets/js/chunk-web-stories-template-28.js	8.76 kB
assets/js/chunk-web-stories-template-29-metaData.js	561 B
assets/js/chunk-web-stories-template-29.js	8.94 kB
assets/js/chunk-web-stories-template-3-metaData.js	539 B
assets/js/chunk-web-stories-template-3.js	8.24 kB
assets/js/chunk-web-stories-template-30-metaData.js	576 B
assets/js/chunk-web-stories-template-30.js	7.43 kB
assets/js/chunk-web-stories-template-31-metaData.js	503 B
assets/js/chunk-web-stories-template-31.js	9.93 kB
assets/js/chunk-web-stories-template-32-metaData.js	552 B
assets/js/chunk-web-stories-template-32.js	12.3 kB
assets/js/chunk-web-stories-template-33-metaData.js	491 B
assets/js/chunk-web-stories-template-33.js	8.9 kB
assets/js/chunk-web-stories-template-34-metaData.js	570 B
assets/js/chunk-web-stories-template-34.js	7.43 kB
assets/js/chunk-web-stories-template-35-metaData.js	565 B
assets/js/chunk-web-stories-template-35.js	8.7 kB
assets/js/chunk-web-stories-template-36-metaData.js	575 B
assets/js/chunk-web-stories-template-36.js	12.1 kB
assets/js/chunk-web-stories-template-37-metaData.js	529 B
assets/js/chunk-web-stories-template-37.js	6.13 kB
assets/js/chunk-web-stories-template-38-metaData.js	572 B
assets/js/chunk-web-stories-template-38.js	7.63 kB
assets/js/chunk-web-stories-template-39-metaData.js	589 B
assets/js/chunk-web-stories-template-39.js	7.79 kB
assets/js/chunk-web-stories-template-4-metaData.js	564 B
assets/js/chunk-web-stories-template-4.js	11.8 kB
assets/js/chunk-web-stories-template-40-metaData.js	556 B
assets/js/chunk-web-stories-template-40.js	9.85 kB
assets/js/chunk-web-stories-template-41-metaData.js	573 B
assets/js/chunk-web-stories-template-41.js	7.45 kB
assets/js/chunk-web-stories-template-42-metaData.js	521 B
assets/js/chunk-web-stories-template-42.js	6.82 kB
assets/js/chunk-web-stories-template-43-metaData.js	557 B
assets/js/chunk-web-stories-template-43.js	8.49 kB
assets/js/chunk-web-stories-template-44-metaData.js	583 B
assets/js/chunk-web-stories-template-44.js	10.8 kB
assets/js/chunk-web-stories-template-45-metaData.js	565 B
assets/js/chunk-web-stories-template-45.js	7.15 kB
assets/js/chunk-web-stories-template-46-metaData.js	531 B
assets/js/chunk-web-stories-template-46.js	5.1 kB
assets/js/chunk-web-stories-template-47-metaData.js	591 B
assets/js/chunk-web-stories-template-47.js	8.97 kB
assets/js/chunk-web-stories-template-48-metaData.js	556 B
assets/js/chunk-web-stories-template-48.js	8.78 kB
assets/js/chunk-web-stories-template-49-metaData.js	518 B
assets/js/chunk-web-stories-template-49.js	8.58 kB
assets/js/chunk-web-stories-template-5-metaData.js	556 B
assets/js/chunk-web-stories-template-5.js	9.53 kB
assets/js/chunk-web-stories-template-50-metaData.js	503 B
assets/js/chunk-web-stories-template-50.js	8.93 kB
assets/js/chunk-web-stories-template-51-metaData.js	526 B
assets/js/chunk-web-stories-template-51.js	10.1 kB
assets/js/chunk-web-stories-template-52-metaData.js	601 B
assets/js/chunk-web-stories-template-52.js	9.97 kB
assets/js/chunk-web-stories-template-53-metaData.js	551 B
assets/js/chunk-web-stories-template-53.js	5.65 kB
assets/js/chunk-web-stories-template-54-metaData.js	547 B
assets/js/chunk-web-stories-template-54.js	7.46 kB
assets/js/chunk-web-stories-template-55-metaData.js	574 B
assets/js/chunk-web-stories-template-55.js	6.95 kB
assets/js/chunk-web-stories-template-56-metaData.js	542 B
assets/js/chunk-web-stories-template-56.js	9.54 kB
assets/js/chunk-web-stories-template-57-metaData.js	528 B
assets/js/chunk-web-stories-template-57.js	14.5 kB
assets/js/chunk-web-stories-template-58-metaData.js	554 B
assets/js/chunk-web-stories-template-58.js	5.43 kB
assets/js/chunk-web-stories-template-59-metaData.js	590 B
assets/js/chunk-web-stories-template-59.js	8.73 kB
assets/js/chunk-web-stories-template-6-metaData.js	568 B
assets/js/chunk-web-stories-template-6.js	6.93 kB
assets/js/chunk-web-stories-template-60-metaData.js	509 B
assets/js/chunk-web-stories-template-60.js	8.94 kB
assets/js/chunk-web-stories-template-7-metaData.js	569 B
assets/js/chunk-web-stories-template-7.js	7.15 kB
assets/js/chunk-web-stories-template-8-metaData.js	569 B
assets/js/chunk-web-stories-template-8.js	8.34 kB
assets/js/chunk-web-stories-template-9-metaData.js	580 B
assets/js/chunk-web-stories-template-9.js	8.25 kB
assets/js/chunk-web-stories-templates.js	918 B
assets/js/chunk-web-stories-textset-0.js	4.59 kB
assets/js/chunk-web-stories-textset-1.js	5.61 kB
assets/js/chunk-web-stories-textset-2.js	6.83 kB
assets/js/chunk-web-stories-textset-3.js	12.8 kB
assets/js/chunk-web-stories-textset-4.js	3.91 kB
assets/js/chunk-web-stories-textset-5.js	5.27 kB
assets/js/chunk-web-stories-textset-6.js	4.99 kB
assets/js/chunk-web-stories-textset-7.js	8.9 kB
assets/js/generateBlurhash.worker.worker.js	1.1 kB
assets/js/imgareaselect.js	3.77 kB
assets/js/web-stories-activation-notice.js	26.5 kB
assets/js/web-stories-block.js	25.7 kB
assets/js/web-stories-carousel.js	3.5 kB
assets/js/web-stories-dashboard.js	63.7 kB
assets/js/web-stories-embed.js	20 B
assets/js/web-stories-lightbox.js	751 B
assets/js/web-stories-tinymce-button.js	2.85 kB
assets/js/web-stories-widget.js	587 B

_{compressed-size-action}

[googleforcreators-bot]

Plugin builds for c2f4720851fde7bee24a9d0ff14c7dcc9efa4e3a are ready :bellhop_bell:!

• Download development build
• Download production build