\r\n
\r\n \r\n {warningMsg}\r\n
\r\n \r\n {errorText}\r\n
\r\n \r\n 
\r\n
\r\n \r\n
\r\n )\r\n);\r\n\r\nBackgroundRemovalViewUnStyled.propTypes = {\r\n originalImageUrl: PropTypes.string.isRequired,\r\n imageUrlWithoutBackground: PropTypes.string,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n classes: PropTypes.shape({\r\n backgroundRemoveView: PropTypes.string,\r\n }).isRequired,\r\n logger: PropTypes.shape({\r\n logTrace: PropTypes.func,\r\n }).isRequired,\r\n setActiveView: PropTypes.func.isRequired,\r\n onClose: PropTypes.func.isRequired,\r\n errorMessage: PropTypes.string,\r\n};\r\n\r\nBackgroundRemovalViewUnStyled.defaultProps = {\r\n imageUrlWithoutBackground: '',\r\n errorMessage: '',\r\n};\r\n\r\nexport const BackgroundRemovalView = withDefaultStyles(BackgroundRemovalViewUnStyled, getBackgroundRemovalViewStyles);\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classNames from 'classnames';\r\nimport { PrimaryButton, CommandBarButton, Separator } from '@bingads-webui-react/fabric-control';\r\nimport {\r\n ObjectSelectionImageView,\r\n} from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\n\r\nimport { ErrorMessageBar } from '../shared-componenets';\r\nimport { VIEWS } from '../model/constants';\r\nimport { useObjectSelection } from '../model/use-object-selection';\r\n\r\nexport const ObjectsSelectionView = ({\r\n i18n,\r\n originalImageUrl,\r\n originalImageHeight,\r\n originalImageWidth,\r\n getMaskValueAtPoint,\r\n segmentationMasks,\r\n maskValues,\r\n imageUrlWithoutBackground,\r\n isFetchingSegmentations,\r\n setActiveView,\r\n setSelectedImageSrc,\r\n selectedMasks,\r\n setSelectedMasks,\r\n errorMessage,\r\n logger,\r\n}) => {\r\n const {\r\n // mask\r\n borderImageSrc,\r\n toggleSelectedMask,\r\n highlightedImageSrc,\r\n workingSelectedImageSrc,\r\n startOver,\r\n updateSubject,\r\n updateHighlightedImage,\r\n objectSelectionError,\r\n } = useObjectSelection({\r\n originalImageUrl,\r\n originalImageWidth,\r\n originalImageHeight,\r\n segmentationMasks,\r\n imageUrlWithoutBackground,\r\n setSelectedImageSrc,\r\n selectedMasks,\r\n setSelectedMasks,\r\n i18n,\r\n });\r\n const description = i18n.getString(_TL_('You can select the subjects or objects you want to keep and select Update.'));\r\n\r\n return (\r\n \r\n
\r\n \r\n {i18n.getString(_TL_('We’ve removed the background. You can refine the subject area to keep or remove certain subjects and objects by selecting Edit subject area.'))}\r\n
\r\n \r\n 
\r\n {!imageUrlWithoutBackground && !errorMessage &&
\r\n \r\n
\r\n \r\n
\r\n }\r\n \r\n {\r\n setActiveView(VIEWS.ObjectsSelection);\r\n logger.logTrace('Copilot change image background - removal view - go to selection button clicked');\r\n }}\r\n disabled={errorMessage !== ''}\r\n >\r\n {i18n.getString(_TL_('Edit subject area'))}\r\n \r\n
\r\n \r\n {\r\n setActiveView(VIEWS.ImageBackgroundGeneration);\r\n logger.logTrace('Copilot change image background - removal view - go to generation view button clicked');\r\n }}\r\n disabled={errorMessage !== ''}\r\n >\r\n {i18n.getString(_TL_('Continue'))}\r\n \r\n {\r\n onClose();\r\n logger.logTrace('Copilot change image background - removal view - Cancel button clicked');\r\n }}\r\n >\r\n {i18n.getString(_TL_('Cancel'))}\r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\n\r\nObjectsSelectionView.propTypes = {\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n originalImageUrl: PropTypes.string.isRequired,\r\n originalImageHeight: PropTypes.number.isRequired,\r\n originalImageWidth: PropTypes.number.isRequired,\r\n getMaskValueAtPoint: PropTypes.func.isRequired,\r\n segmentationMasks: PropTypes.oneOfType([\r\n PropTypes.arrayOf(PropTypes.number),\r\n PropTypes.shape({}),\r\n ]).isRequired,\r\n logger: PropTypes.shape({\r\n logTrace: PropTypes.func,\r\n }).isRequired,\r\n imageUrlWithoutBackground: PropTypes.string.isRequired,\r\n isFetchingSegmentations: PropTypes.bool.isRequired,\r\n setActiveView: PropTypes.func.isRequired,\r\n setSelectedImageSrc: PropTypes.func.isRequired,\r\n selectedMasks: PropTypes.arrayOf(PropTypes.number).isRequired,\r\n maskValues: PropTypes.arrayOf(PropTypes.number),\r\n setSelectedMasks: PropTypes.func.isRequired,\r\n errorMessage: PropTypes.string,\r\n};\r\n\r\nObjectsSelectionView.defaultProps = {\r\n errorMessage: '',\r\n maskValues: [],\r\n};\r\n","import _ from 'underscore';\r\nimport { Promise } from 'bluebird';\r\nimport { useCallback, useEffect, useState } from 'react';\r\nimport { fetchImgPromise, getImagePixels, createHighlightedImage, createSelectedImageSrc } from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\n\r\nexport const useObjectSelection = ({\r\n originalImageUrl,\r\n originalImageWidth,\r\n originalImageHeight,\r\n segmentationMasks,\r\n imageUrlWithoutBackground,\r\n setSelectedImageSrc,\r\n selectedMasks,\r\n setSelectedMasks,\r\n i18n,\r\n}) => {\r\n const [workingMasks, setWorkingMasks] = useState([]);\r\n const [workingSelectedImageSrc, setWorkingSelectedImageSrc] = useState(null);\r\n const [originalImagePixels, setOriginalImagePixels] = useState(null);\r\n const [initialSelectedImageSrc, setInitialSelectedImageSrc] = useState(null);\r\n const [borderImageSrc, setBorderImageSrc] = useState(null);\r\n const [initialBorderImageSrc, setInitialBorderImageSrc] = useState(null);\r\n const [highlightedImageSrc, setHighlightedImageSrc] = useState(null);\r\n const [objectSelectionError, setObjectSelectionError] = useState('');\r\n\r\n useEffect(() => {\r\n if (originalImageUrl) {\r\n fetchImgPromise(originalImageUrl).then((image) => {\r\n const pixels = getImagePixels(image, originalImageWidth, originalImageHeight);\r\n setOriginalImagePixels(pixels);\r\n });\r\n }\r\n }, [originalImageHeight, originalImageWidth, originalImageUrl]);\r\n\r\n\r\n const createSelectedImage = useCallback((selectedImageSrcProp, masks, isAdd) => {\r\n if (originalImagePixels && segmentationMasks) {\r\n return fetchImgPromise(selectedImageSrcProp || originalImageUrl)\r\n .then(image => createSelectedImageSrc(image, originalImageWidth, originalImageHeight, originalImagePixels, segmentationMasks, masks, isAdd, selectedImageSrcProp));\r\n }\r\n return Promise.resolve({\r\n borderImageSrc: null,\r\n selectedImageSrc: null,\r\n });\r\n }, [originalImagePixels, segmentationMasks, originalImageUrl, originalImageWidth, originalImageHeight]);\r\n\r\n useEffect(() => {\r\n if (imageUrlWithoutBackground && segmentationMasks) {\r\n setWorkingMasks(selectedMasks);\r\n createSelectedImage(null, selectedMasks, true).then(({\r\n borderImageSrc: newBorderImageSrc,\r\n selectedImageSrc: newImageSrc,\r\n }) => {\r\n setInitialBorderImageSrc(newBorderImageSrc);\r\n setInitialSelectedImageSrc(newImageSrc);\r\n setBorderImageSrc(newBorderImageSrc);\r\n setWorkingSelectedImageSrc(newImageSrc);\r\n });\r\n }\r\n }, [imageUrlWithoutBackground, segmentationMasks, createSelectedImage, selectedMasks]);\r\n\r\n useEffect(() => {\r\n if (_.isEmpty(workingMasks)) {\r\n setObjectSelectionError(i18n.getString(_TL_('Please select at least one subject or object you want to keep in the image.')));\r\n } else {\r\n setObjectSelectionError('');\r\n }\r\n }, [i18n, workingMasks]);\r\n\r\n const updateHighlightedImage = useCallback((maskValue) => {\r\n const highlightedImage = createHighlightedImage(originalImageWidth, originalImageHeight, originalImagePixels, segmentationMasks, workingMasks, maskValue);\r\n setHighlightedImageSrc(highlightedImage);\r\n }, [originalImageWidth, originalImageHeight, segmentationMasks, workingMasks, originalImagePixels]);\r\n\r\n const toggleSelectedMask = useCallback((maskId) => {\r\n let newMasks = [];\r\n const isAdd = !_.contains(workingMasks, maskId);\r\n if (!isAdd) {\r\n newMasks = _.without(workingMasks, maskId);\r\n } else {\r\n newMasks = [...workingMasks, maskId];\r\n }\r\n setWorkingMasks(_.sortBy(newMasks));\r\n createSelectedImage(workingSelectedImageSrc, [maskId], isAdd).then(({\r\n borderImageSrc: newBorderImageSrc,\r\n selectedImageSrc: newImageSrc,\r\n }) => {\r\n setBorderImageSrc(newBorderImageSrc);\r\n setWorkingSelectedImageSrc(newImageSrc);\r\n });\r\n }, [workingMasks, createSelectedImage, workingSelectedImageSrc]);\r\n\r\n const updateSubject = useCallback(() => {\r\n setSelectedMasks(workingMasks);\r\n setSelectedImageSrc(workingSelectedImageSrc);\r\n }, [setSelectedImageSrc, setSelectedMasks, workingMasks, workingSelectedImageSrc]);\r\n\r\n const startOver = useCallback(() => {\r\n setWorkingSelectedImageSrc(initialSelectedImageSrc);\r\n setBorderImageSrc(initialBorderImageSrc);\r\n setWorkingMasks(selectedMasks);\r\n }, [initialSelectedImageSrc, initialBorderImageSrc, selectedMasks]);\r\n\r\n return {\r\n borderImageSrc,\r\n toggleSelectedMask,\r\n workingSelectedImageSrc,\r\n highlightedImageSrc,\r\n startOver,\r\n updateSubject,\r\n updateHighlightedImage,\r\n objectSelectionError,\r\n };\r\n};\r\n","import React, { useCallback } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport {\r\n FluentProvider,\r\n webLightTheme,\r\n mergeClasses,\r\n} from '@fluentui/react-components';\r\nimport {\r\n withOverridableStyles,\r\n} from '@bingads-webui-campaign-react/ads-studio-shared-components';\r\nimport {\r\n PromptEditor as SharedPromptEditor, MAX_PROMPT_LENGTH,\r\n} from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\n\r\nimport { getPromptEditorStyles } from '../../styles/prompt-editor-styles';\r\n\r\nconst PromptEditorImpl = ({\r\n disabled,\r\n promptValue,\r\n onPromptChanged,\r\n onGenerateImageBackground,\r\n classes,\r\n logger,\r\n i18n,\r\n}) => {\r\n const onFreeTextPromptChanged = useCallback((newValue) => {\r\n onPromptChanged(newValue);\r\n }, [onPromptChanged]);\r\n\r\n const onClick = useCallback(() => {\r\n onGenerateImageBackground();\r\n logger.logTrace('Copilot change image background - generation view - generate button clicked', { prompt: promptValue });\r\n }, [logger, onGenerateImageBackground, promptValue]);\r\n\r\n const onFreeTextPromptKeyDown = useCallback((event) => {\r\n if (event && event.key === 'Enter') {\r\n onGenerateImageBackground();\r\n logger.logTrace('Copilot change image background - generation view - generate keyboard button clicked', { prompt: promptValue });\r\n if (event.preventDefault) {\r\n event.preventDefault();\r\n }\r\n }\r\n }, [logger, onGenerateImageBackground, promptValue]);\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n {description}\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {\r\n setActiveView(VIEWS.BackgroundRemoval);\r\n logger.logTrace('Copilot change image background - object selection view - back button clicked');\r\n }}\r\n />\r\n {\r\n startOver();\r\n logger.logTrace('Copilot change image background - object selection view - start over button clicked');\r\n }}\r\n disabled={errorMessage !== '' || isFetchingSegmentations}\r\n />\r\n
\r\n \r\n {\r\n updateSubject();\r\n setActiveView(VIEWS.ImageBackgroundGeneration);\r\n logger.logTrace('Copilot change image background - object selection view - update subject button clicked');\r\n }}\r\n disabled={errorMessage !== '' || objectSelectionError !== ''}\r\n >\r\n {i18n.getString(_TL_('Update'))}\r\n \r\n
\r\n \r\n MAX_PROMPT_LENGTH || disabled}\r\n placeholder={i18n.getString(_TL_('Describe the background you want. You can use the examples on the right for inspiration.'))}\r\n />\r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nHistoryListImpl.propTypes = {\r\n selectedIndex: PropTypes.number,\r\n historyList: PropTypes.arrayOf(PropTypes.shape({})),\r\n onSelectHistory: PropTypes.func,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n classes: PropTypes.shape({}).isRequired,\r\n};\r\n\r\nHistoryListImpl.defaultProps = {\r\n selectedIndex: -1,\r\n historyList: [],\r\n onSelectHistory: () => {},\r\n};\r\n\r\nexport const GenerationHistoryList = withDefaultStyles(HistoryListImpl, getGenerationHistoryListStyles);\r\n","import { makeStyles, shorthands } from '@fluentui/react-components';\r\n\r\nexport const useExampleImageListStyles = makeStyles({\r\n exampleImageList: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n width: '448px',\r\n ...shorthands.overflow('hidden'),\r\n ...shorthands.gap('12px'),\r\n },\r\n});\r\n\r\nexport const useExampleImageCellStyles = makeStyles({\r\n exampleImageCell: {\r\n width: '218px',\r\n height: '191px',\r\n ...shorthands.borderRadius('6px'),\r\n ...shorthands.overflow('hidden'),\r\n position: 'relative',\r\n\r\n '& .image-without-background': {\r\n position: 'absolute',\r\n left: 0,\r\n top: 0,\r\n width: '100%',\r\n height: '100%',\r\n objectFit: 'contain',\r\n },\r\n\r\n '&:focus .example-image-list-cell-overlay, &:hover .example-image-list-cell-overlay': {\r\n visibility: 'visible',\r\n animationDuration: '0.2s, 0.5s',\r\n animationTimingFunction: 'ease-in-out, linear',\r\n animationName: [{\r\n from: { transform: 'translateY(100%)' },\r\n to: { transform: 'translateY(0%)' },\r\n }, {\r\n from: { opacity: 0 },\r\n to: { opacity: 1 },\r\n }],\r\n },\r\n\r\n '& .example-image-list-cell-overlay': {\r\n position: 'absolute',\r\n top: 0,\r\n bottom: 0,\r\n left: 0,\r\n right: 0,\r\n display: 'flex',\r\n visibility: 'hidden',\r\n flexDirection: 'column',\r\n justifyContent: 'flex-end',\r\n alignItems: 'flex-start',\r\n opacity: 0.8,\r\n\r\n '& .overlay-gradient': {\r\n ...shorthands.flex(1),\r\n alignSelf: 'stretch',\r\n backgroundImage: 'linear-gradient(180deg, rgba(49, 34, 34, 0.20) 44.79%, rgba(49, 34, 34, 0.90) 76.04%, #312222 100%);',\r\n },\r\n\r\n '& .overlay-solid': {\r\n backgroundColor: '#312222',\r\n height: '37px',\r\n flexShrink: 0,\r\n alignSelf: 'stretch',\r\n },\r\n\r\n '& .example-prompt-template': {\r\n display: 'flex',\r\n alignItems: 'flex-end',\r\n position: 'absolute',\r\n top: '16px',\r\n left: '16px',\r\n right: '14px',\r\n bottom: '16px',\r\n maxHeight: '159px',\r\n\r\n color: '#FFF',\r\n fontSize: '14px',\r\n fontStyle: 'normal',\r\n fontWeight: 600,\r\n lineHeight: 'normal',\r\n },\r\n },\r\n },\r\n});\r\n\r\n","import {\r\n ExampleImageListWithoutStyle,\r\n} from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\nimport {\r\n withOverridableStyles,\r\n} from '@bingads-webui-campaign-react/ads-studio-shared-components';\r\nimport { useExampleImageListStyles } from './style';\r\n\r\nexport const ExampleImageList = withOverridableStyles(ExampleImageListWithoutStyle, useExampleImageListStyles);\r\n","import {\r\n ExampleImageCellWithoutStyle,\r\n} from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\nimport {\r\n withOverridableStyles,\r\n} from '@bingads-webui-campaign-react/ads-studio-shared-components';\r\nimport { useExampleImageCellStyles } from './style';\r\n\r\nexport const ExampleImageCell = withOverridableStyles(ExampleImageCellWithoutStyle, useExampleImageCellStyles);\r\n","import classNames from 'classnames';\r\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { PrimaryButton, DefaultButton } from '@bingads-webui-react/fabric-control';\r\nimport { withDefaultStyles } from '@bingads-webui-react/with-default-styles';\r\nimport { useId } from '@fluentui/react-components';\r\nimport { MultiLineEllipsisText } from '@bingads-webui-react/multiline-ellipsis';\r\nimport { LearnMoreLink } from '@bingads-webui-campaign-react/help';\r\n\r\nimport { PromptEditor } from './components/prompt-editor';\r\nimport { getImageBackgroundGenerationViewStyles } from '../styles/image-background-generation-view-styles';\r\nimport { GenerationHistoryList } from './components/generation-history-list';\r\nimport { ImageShimmer, SpinnerWithMessage, ErrorMessageBar } from '../shared-componenets';\r\nimport { ExampleImageList, ExampleImageCell } from './components/example-image';\r\n\r\nconst HISTORY_LIST_MAX_LENGTH = 10;\r\nconst applyButtonIconProps = { iconName: 'Accept' };\r\n\r\nconst ViewImpl = ({\r\n imageUrlWithoutBackground,\r\n imageUrlWithGeneratedBackground,\r\n generateImageBackground,\r\n onApply,\r\n onClose,\r\n i18n,\r\n classes,\r\n logger,\r\n}) => {\r\n const [promptValue, setPromptValue] = useState('');\r\n const [isGenerating, setIsGenerating] = useState(false);\r\n const [isApplying, setIsApplying] = useState(false);\r\n const [errorMessage, setErrorMessage] = useState('');\r\n const [showLearnMore, setShowLearnMore] = useState(false);\r\n\r\n const onPromptChanged = useCallback((value) => {\r\n if (value !== promptValue) {\r\n setPromptValue(value);\r\n }\r\n }, [promptValue]);\r\n\r\n const onSelectExampleImage = useCallback((promptText) => {\r\n if (promptText && promptText !== promptValue) {\r\n setPromptValue(promptText);\r\n logger.logTrace('Copilot change image background - generation view - Static example image clicked', { promptText });\r\n }\r\n }, [logger, promptValue]);\r\n\r\n const [historyList, setHistoryList] = useState([{\r\n promptValue: '',\r\n imageUrl: imageUrlWithoutBackground,\r\n isBackgroundEmpty: true,\r\n }]);\r\n const [selectedHistoryIndex, setSelectedHistoryIndex] = useState(-1);\r\n\r\n const onSelectHistory = useCallback((historyData, index) => {\r\n const { promptValue: pv, imageUrl } = historyData || {};\r\n if (pv !== undefined && imageUrl) {\r\n setPromptValue(pv);\r\n setSelectedHistoryIndex(index);\r\n }\r\n }, []);\r\n\r\n const addNewHistory = useCallback((pPromptValue, generatedImageUrl) => {\r\n let newHistoryList = [...historyList];\r\n if (newHistoryList.length >= HISTORY_LIST_MAX_LENGTH) {\r\n newHistoryList = newHistoryList.slice(1);\r\n }\r\n newHistoryList.unshift({ promptValue: pPromptValue, imageUrl: generatedImageUrl });\r\n setHistoryList(newHistoryList);\r\n setSelectedHistoryIndex(0);\r\n }, [historyList]);\r\n\r\n const onGenerateImageBackground = useCallback(() => {\r\n setIsGenerating(true);\r\n setErrorMessage('');\r\n setShowLearnMore(false);\r\n generateImageBackground(promptValue).then((imgUrl) => {\r\n addNewHistory(promptValue, imgUrl);\r\n }).catch((error) => {\r\n logger.logTrace('Copilot change image background - generation view - generate image failed', { error, promptValue });\r\n setErrorMessage(i18n.getString(error.uxMessage));\r\n if (error.availableActions && error.availableActions.gotoDisallowedContent) {\r\n setShowLearnMore(true);\r\n }\r\n }).finally(() => {\r\n setIsGenerating(false);\r\n });\r\n // todo: error status\r\n }, [addNewHistory, generateImageBackground, i18n, logger, promptValue]);\r\n\r\n const curGeneratedImageUrl = useMemo(() => {\r\n if (selectedHistoryIndex >= 0 && selectedHistoryIndex < historyList.length) {\r\n return historyList[selectedHistoryIndex].imageUrl;\r\n }\r\n return imageUrlWithGeneratedBackground;\r\n }, [historyList, imageUrlWithGeneratedBackground, selectedHistoryIndex]);\r\n\r\n const shouldUploadCurGeneratedImage = useMemo(() => {\r\n if (selectedHistoryIndex >= 0 && selectedHistoryIndex < historyList.length) {\r\n return historyList[selectedHistoryIndex].isBackgroundEmpty;\r\n }\r\n return false;\r\n }, [historyList, selectedHistoryIndex]);\r\n\r\n const onApplyBackground = useCallback(() => {\r\n if (curGeneratedImageUrl) {\r\n setIsApplying(true);\r\n // onApply('https://www.bing-exp.com/th?id=OADD2.7146826644149_17CRXW80FIKIPFUKYY&pid=21.2&c=0').catch((/* err */) => {\r\n onApply(curGeneratedImageUrl, { shouldUpload: shouldUploadCurGeneratedImage }).then((image) => {\r\n const { processedImage } = image || {};\r\n logger.logTrace('Copilot change image background - generation view - Apply generated image button clicked', {\r\n imageId: processedImage.id,\r\n shouldUpload: shouldUploadCurGeneratedImage,\r\n prompt: promptValue,\r\n imageUrl: curGeneratedImageUrl,\r\n });\r\n }).catch((/* err */) => {\r\n // todo: error handling\r\n }).finally(() => {\r\n setIsApplying(false);\r\n });\r\n }\r\n }, [curGeneratedImageUrl, logger, onApply, shouldUploadCurGeneratedImage, promptValue]);\r\n\r\n useEffect(() => {\r\n if (promptValue && promptValue.length > 200) {\r\n setErrorMessage(i18n.getString(_TL_('Prompt must be less than 200 characters')));\r\n } else {\r\n setErrorMessage('');\r\n }\r\n }, [promptValue, i18n]);\r\n\r\n const DisallowedContent = useMemo(() => (showLearnMore ? (\r\n \r\n
\r\n {i18n.getString(_TL_('History'))}
\r\n \r\n {\r\n shouldShowLeftArrow && (\r\n <>\r\n { leftIconButton }\r\n \r\n )\r\n }\r\n
\r\n \r\n
\r\n {\r\n shouldShowLeftArrow && (\r\n <>\r\n \r\n \r\n )\r\n }\r\n {\r\n shouldShowRightArrow && (\r\n <>\r\n \r\n { rightIconButton }\r\n \r\n )\r\n }\r\n \r\n
\r\n );\r\n};\r\n\r\nViewImpl.propTypes = {\r\n imageUrlWithoutBackground: PropTypes.string,\r\n imageUrlWithGeneratedBackground: PropTypes.string,\r\n generateImageBackground: PropTypes.func.isRequired,\r\n onApply: PropTypes.func,\r\n onClose: PropTypes.func,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func,\r\n }).isRequired,\r\n logger: PropTypes.shape({\r\n logTrace: PropTypes.func,\r\n }).isRequired,\r\n classes: PropTypes.shape({}).isRequired,\r\n};\r\n\r\nViewImpl.defaultProps = {\r\n imageUrlWithoutBackground: '',\r\n imageUrlWithGeneratedBackground: '',\r\n onApply: () => {},\r\n onClose: () => {},\r\n};\r\n\r\nexport const ImageBackgroundGenerationView = withDefaultStyles(ViewImpl, getImageBackgroundGenerationViewStyles);\r\n","import { useCallback, useState, useEffect } from 'react';\r\nimport { setClarityTag } from '@bingads-webui-universal/clarity';\r\nimport { parseMaskResultPromise } from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\n\r\nimport { useMaskedImage } from './use-masked-image';\r\nimport { VIEWS } from './constants';\r\n\r\nexport const useViewState = ({\r\n // original image info\r\n imageUrl,\r\n imageWidth,\r\n imageHeight,\r\n repository,\r\n perfMarker,\r\n logger,\r\n}) => {\r\n const [activeView, setActiveView] = useState(VIEWS.BackgroundRemoval);\r\n const [isFetchingSegmentations, setIsFetchingSegmentations] = useState(false);\r\n const [fetchSegmentationError, setFetchSegmentationError] = useState('');\r\n const {\r\n imageUrlWithoutBackground,\r\n setImageUrlWithoutBackground,\r\n imageUrlWithGeneratedBackground,\r\n setImageUrlWithGeneratedBackground,\r\n segmentationMasks,\r\n setSegmentationMasks,\r\n getMaskValueAtPoint,\r\n selectedMasks,\r\n setSelectedMasks,\r\n selectedImageSrc,\r\n setSelectedImageSrc,\r\n maskSetsBase64,\r\n setMaskSetsBase64,\r\n maskValues,\r\n } = useMaskedImage({\r\n imageUrl, imageWidth, imageHeight,\r\n });\r\n\r\n const removeImageBackground = useCallback(() => {\r\n const imageBackgroundRemovalPerfMarker = perfMarker.createChild('ImageBackgroundRemoval');\r\n imageBackgroundRemovalPerfMarker.willInit();\r\n const ret = repository.removeImageBackground(imageUrl).then(({ imageUrl: newImageUrl }) => {\r\n setImageUrlWithoutBackground(newImageUrl);\r\n logger.logTrace('Copilot change image background - removal image background successfully');\r\n return newImageUrl;\r\n }).finally(() => {\r\n imageBackgroundRemovalPerfMarker.done();\r\n });\r\n return ret;\r\n }, [imageUrl, perfMarker, repository, setImageUrlWithoutBackground, logger]);\r\n\r\n const getImageSegmentations = useCallback(() => {\r\n const imageSegmentationPerfMarker = perfMarker.createChild('ImageSegmentations');\r\n imageSegmentationPerfMarker.willInit();\r\n setIsFetchingSegmentations(true);\r\n const ret = repository.getImageSegmentations(imageUrl).then(result => (\r\n parseMaskResultPromise({\r\n result,\r\n imageUrl,\r\n imageWidth,\r\n imageHeight,\r\n })\r\n )).then((parsedResult) => {\r\n const {\r\n rawMaskSetsBase64String: rawMaskSetsBase64,\r\n maskSetsArray,\r\n selectedMasksArray,\r\n imageUrlWithoutBackground: selfDrawedImageUrl,\r\n } = parsedResult || {};\r\n setImageUrlWithoutBackground(selfDrawedImageUrl);\r\n setSegmentationMasks({ maskSetsArray, selectedMasksArray });\r\n setMaskSetsBase64(rawMaskSetsBase64);\r\n logger.logTrace('Copilot change image background - get image segmentations successfully', { originalUrl: imageUrl });\r\n }).catch((err) => {\r\n setFetchSegmentationError(err.uxMessage);\r\n })\r\n .finally(() => {\r\n setIsFetchingSegmentations(false);\r\n imageSegmentationPerfMarker.done();\r\n });\r\n return ret;\r\n }, [imageUrl, perfMarker, repository, setSegmentationMasks, logger, setImageUrlWithoutBackground, setMaskSetsBase64, imageWidth, imageHeight]);\r\n\r\n const generateImageBackground = useCallback((prompt) => {\r\n let finalImageUrl = imageUrl;\r\n if (selectedMasks === null) {\r\n // user doesn't select any objects, user the image url removed background\r\n finalImageUrl = imageUrlWithoutBackground;\r\n }\r\n const backgroundGenerationPerfMarker = perfMarker.createChild('ImageBackgroundGeneration');\r\n backgroundGenerationPerfMarker.willInit();\r\n const ret = repository.generateImageBackground({\r\n prompt,\r\n imageUrl: finalImageUrl,\r\n selectedMasks,\r\n maskSetsBase64,\r\n outputImageWidth: imageWidth,\r\n outputImageHeight: imageHeight,\r\n }).then((res) => {\r\n const { imageUrl: newImageUrl } = res || {};\r\n logger.logTrace('Copilot change image background - generate image background successfully', { generatedUrl: newImageUrl, prompt });\r\n setImageUrlWithGeneratedBackground(newImageUrl);\r\n return newImageUrl;\r\n }).finally(() => {\r\n backgroundGenerationPerfMarker.done();\r\n });\r\n return ret;\r\n }, [imageHeight, imageUrl, imageUrlWithoutBackground, imageWidth, perfMarker, repository, selectedMasks, setImageUrlWithGeneratedBackground, logger, maskSetsBase64]);\r\n\r\n useEffect(() => {\r\n getImageSegmentations();\r\n }, [getImageSegmentations]);\r\n\r\n useEffect(() => {\r\n logger.logTrace('Copilot change image background - User opened the change image background modal.');\r\n }, [logger]);\r\n\r\n useEffect(() => {\r\n setClarityTag({ OpenBackgroundRemovalDialog: true });\r\n }, []);\r\n\r\n return {\r\n // view states\r\n activeView,\r\n setActiveView,\r\n\r\n // APIs\r\n removeImageBackground,\r\n getImageSegmentations,\r\n isFetchingSegmentations,\r\n generateImageBackground,\r\n\r\n // image states\r\n imageUrlWithoutBackground,\r\n imageUrlWithGeneratedBackground,\r\n getMaskValueAtPoint,\r\n segmentationMasks,\r\n setSelectedImageSrc,\r\n selectedImageSrc,\r\n selectedMasks,\r\n setSelectedMasks,\r\n maskValues,\r\n fetchSegmentationError,\r\n };\r\n};\r\n","import { useCallback, useState, useMemo } from 'react';\r\nimport { getMaskValueAtPointFunc } from '@bingads-webui-campaign-react/ads-studio-app-shared-components';\r\n\r\nexport const useMaskedImage = ({\r\n imageWidth: originalImageWidth,\r\n}) => {\r\n const [imageUrlWithoutBackground, setImageUrlWithoutBackground] = useState(null);\r\n const [imageUrlWithGeneratedBackground, setImageUrlWithGeneratedBackground] = useState(null);\r\n const [segmentationMasks, setSegmentationMaskInternal] = useState(null);\r\n const [selectedMasks, setSelectedMasks] = useState([]);\r\n const [selectedImageSrc, setSelectedImageSrc] = useState(null);\r\n const [maskSetsBase64, setMaskSetsBase64] = useState(null);\r\n\r\n // mask is encoded in base64 format, decode it here\r\n const setSegmentationMasks = useCallback(({ maskSetsArray, selectedMasksArray }) => {\r\n setSegmentationMaskInternal(maskSetsArray);\r\n setSelectedMasks(selectedMasksArray);\r\n }, []);\r\n\r\n const maskValues = useMemo(() => Array.from(new Set(segmentationMasks)).filter(x => x > 0), [segmentationMasks]);\r\n\r\n const getMaskValueAtPoint = useCallback((x, y) =>\r\n getMaskValueAtPointFunc(x, y, originalImageWidth, segmentationMasks), [originalImageWidth, segmentationMasks]);\r\n\r\n return {\r\n imageUrlWithoutBackground,\r\n setImageUrlWithoutBackground,\r\n imageUrlWithGeneratedBackground,\r\n setImageUrlWithGeneratedBackground,\r\n\r\n // mask\r\n segmentationMasks,\r\n setSegmentationMasks,\r\n getMaskValueAtPoint,\r\n selectedMasks,\r\n setSelectedMasks,\r\n selectedImageSrc,\r\n setSelectedImageSrc,\r\n maskSetsBase64,\r\n maskValues,\r\n setMaskSetsBase64,\r\n };\r\n};\r\n","import React from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport { BackgroundRemovalView } from './background-removal-view';\r\nimport { ObjectsSelectionView } from './objects-selection-view';\r\nimport { ImageBackgroundGenerationView } from './image-background-generation-view';\r\nimport { VIEWS } from './model/constants';\r\nimport { useViewState } from './model/use-view-state';\r\n\r\nexport const ContentView = ({\r\n editingImage,\r\n repository,\r\n onApply,\r\n onClose,\r\n logger,\r\n i18n,\r\n perfMarker,\r\n}) => {\r\n const {\r\n src: imageUrl, width: imageWidth, height: imageHeight,\r\n } = editingImage || {};\r\n\r\n const {\r\n // view states\r\n activeView,\r\n setActiveView,\r\n\r\n // APIs\r\n generateImageBackground,\r\n segmentationMasks,\r\n isFetchingSegmentations,\r\n\r\n // image states\r\n imageUrlWithoutBackground,\r\n imageUrlWithGeneratedBackground,\r\n getMaskValueAtPoint,\r\n selectedMasks,\r\n setSelectedMasks,\r\n selectedImageSrc,\r\n setSelectedImageSrc,\r\n fetchSegmentationError,\r\n maskValues,\r\n } = useViewState({\r\n imageUrl, imageWidth, imageHeight, repository, logger, perfMarker,\r\n });\r\n\r\n return (\r\n <>\r\n {activeView === VIEWS.BackgroundRemoval && (\r\n \r\n \r\n
\r\n \r\n {i18n.getString(_TL_('Note that AI-generated content may not always be accurate. Please double-check, crop, and verify AI-generated content before using it.'))}\r\n
\r\n \r\n
\r\n \r\n
\r\n {isGenerating && (\r\n \r\n
\r\n {!isGenerating && (\r\n \r\n
\r\n { isGenerating && (\r\n \r\n
\r\n )}\r\n { isApplying && (\r\n \r\n
\r\n )}\r\n \r\n
\r\n )}\r\n \r\n {\r\n onApplyBackground();\r\n }}\r\n disabled={!curGeneratedImageUrl || isApplying}\r\n >\r\n {i18n.getString(_TL_('Apply background'))}\r\n \r\n {\r\n onClose();\r\n logger.logTrace('Copilot change image background - generation view - Cancel button clicked');\r\n }}\r\n disabled={isApplying}\r\n >\r\n {i18n.getString(_TL_('Cancel'))}\r\n \r\n
\r\n )}\r\n \r\n 
\r\n
\r\n )}\r\n {!isGenerating && !curGeneratedImageUrl && (\r\n \r\n {i18n.getString(_TL_('Try an example'))}\r\n
\r\n )}\r\n {!isGenerating && curGeneratedImageUrl && (\r\n \r\n 
\r\n
\r\n )}\r\n \r\n
\r\n \r\n
\r\n \r\n {i18n.getString(_TL_('Beta'))}\r\n
\r\n \r\n
\r\n \r\n);\r\n\r\nChangeImageBackgroundViewImpl.propTypes = {\r\n editingImage: PropTypes.shape({ // ImageExperienceImage\r\n Id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\r\n src: PropTypes.string,\r\n width: PropTypes.number,\r\n height: PropTypes.number,\r\n }), // TODO: added back as required\r\n isOpen: PropTypes.bool.isRequired,\r\n onClose: PropTypes.func.isRequired,\r\n onApply: PropTypes.func.isRequired,\r\n repository: PropTypes.shape({\r\n removeImageBackground: PropTypes.func,\r\n getImageSegmentations: PropTypes.func,\r\n generateImageBackground: PropTypes.func,\r\n }).isRequired,\r\n logger: PropTypes.shape({\r\n logTrace: PropTypes.func,\r\n }).isRequired,\r\n i18n: PropTypes.shape({\r\n getString: PropTypes.func.isRequired,\r\n }).isRequired,\r\n perfMarker: PropTypes.shape({ }).isRequired,\r\n classes: PropTypes.shape({\r\n }).isRequired,\r\n};\r\n\r\nChangeImageBackgroundViewImpl.defaultProps = {\r\n editingImage: {\r\n Id: '123',\r\n src: originalImgSrc,\r\n width: 899,\r\n height: 616,\r\n },\r\n};\r\n\r\nexport const CopilotChangeImageBackgroundView = withDefaultStyles(\r\n ChangeImageBackgroundViewImpl,\r\n getChangeImageBackgroundViewStyles\r\n);\r\n","// import classnames from 'classnames';\r\nimport React, { useMemo } from 'react';\r\nimport PropTypes from 'prop-types';\r\n\r\nimport { odata } from '@bingads-webui/http-util';\r\nimport { Scenario, Activity, withActivityContext } from '@bingads-webui-react/hoc-with-signal';\r\n\r\nimport {\r\n getLoggerWithoutPageInfo,\r\n} from '@bingads-webui-campaign-react/asset-library-services';\r\nimport {\r\n getBackgroundChangeODataService,\r\n getBackgroundChangeRepository,\r\n getODataConfig,\r\n} from '@bingads-webui-campaign-react/ads-studio-app-shell-cmui';\r\nimport { getLogVersion } from '@bingads-webui-campaign-react/asset-library-model';\r\n\r\nimport { CopilotChangeImageBackgroundView } from '@bingads-webui-campaign-react/copilot-change-image-background-view';\r\n\r\nconst DialogImpl = ({\r\n editingImage,\r\n isOpen,\r\n onClose,\r\n onApply,\r\n aid,\r\n cid,\r\n i18n,\r\n serverContext,\r\n permissions,\r\n perfMarker,\r\n //\r\n repository,\r\n activity,\r\n}) => {\r\n const isReadonly = useMemo(\r\n () => (permissions && permissions.IsReadOnlyUser)\r\n || (serverContext && serverContext.CurrentAccountInActive),\r\n [permissions, serverContext]\r\n );\r\n\r\n const innerRepository = useMemo(() => {\r\n const oDataConfig = getODataConfig(serverContext);\r\n const oDataService = getBackgroundChangeODataService({\r\n odata, oDataConfig, aid, cid,\r\n });\r\n const repo = getBackgroundChangeRepository(oDataService);\r\n return repo;\r\n }, [aid, cid, serverContext]);\r\n\r\n const logger = useMemo(() => {\r\n const versionForLog = getLogVersion(permissions);\r\n const ret = getLoggerWithoutPageInfo(activity, versionForLog, 'ChangeImageBackgroundDialog');\r\n return ret;\r\n }, [activity, permissions]);\r\n\r\n if (isReadonly) {\r\n // todo: show user some message?\r\n // onClose();\r\n }\r\n\r\n return (\r\n