ITEP-71002 - Show notification based on inference mode (#573)

Author: jpggvilaca

web_ui/src/pages/project-details/components/project-tests/quick-inference/live-prediction-notification.component.tsx

@@ -7,18 +7,28 @@ import { Close, Info } from '@geti/ui/icons';
 import { TUTORIAL_CARD_KEYS } from '../../../../../core/user-settings/dtos/user-settings.interface';
 import { UserGlobalSettings, UseSettings } from '../../../../../core/user-settings/services/user-settings.interface';
 import { dismissTutorial } from '../../../../../shared/components/tutorials/utils';
+import { LiveInferenceMode } from './quick-inference-interfaces';
 
 import classes from './quick-inference.module.scss';
 
 interface LivePredictionNotificationProps {
     settings: UseSettings<UserGlobalSettings>;
+    inferenceMode: LiveInferenceMode;
 }
 
-export const LivePredictionNotification = ({ settings }: LivePredictionNotificationProps): JSX.Element => {
+export const LivePredictionNotification = ({
+    settings,
+    inferenceMode,
+}: LivePredictionNotificationProps): JSX.Element => {
     const handleDismissTutorial = async () => {
         await dismissTutorial(TUTORIAL_CARD_KEYS.LIVE_PREDICTION_NOTIFICATION, settings);
     };
 
+    const description =
+        inferenceMode === 'Use file'
+            ? 'Upload an image to test with your active model right away.'
+            : 'Use your camera to test your active model right away.';
+
     return (
         <Flex
             maxWidth={'57rem'}
@@ -34,9 +44,7 @@ export const LivePredictionNotification = ({ settings }: LivePredictionNotificat
                         style={{ marginRight: 'var(--spectrum-global-dimension-size-100)' }}
                     />
                 </div>
-                <Flex wrap={'wrap'}>
-                    Upload an image that you would like to test with your active model right away.
-                </Flex>
+                <Flex wrap={'wrap'}>{description}</Flex>
             </Flex>
             <ActionButton isQuiet onPress={handleDismissTutorial} isDisabled={settings.isSavingConfig}>
                 <Close />

web_ui/src/pages/project-details/components/project-tests/quick-inference/quick-inference-interfaces.ts

@@ -0,0 +1,4 @@
+// Copyright (C) 2022-2025 Intel Corporation
+// LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
+
+export type LiveInferenceMode = 'Use file' | 'Use camera';

web_ui/src/pages/project-details/components/project-tests/quick-inference/quick-inference.component.tsx

@@ -20,6 +20,7 @@ import { Contents } from './contents.component';
 import { HeaderOptions } from './header-options.component';
 import { LiveCameraInference } from './live-camera-inference/live-camera-inference.component';
 import { LivePredictionNotification } from './live-prediction-notification.component';
+import { LiveInferenceMode } from './quick-inference-interfaces';
 import { QuickInferenceProvider, useQuickInference } from './quick-inference-provider.component';
 import { SecondaryToolbar } from './secondary-toolbar.component';
 import { useIsExplanationEnabled } from './use-is-explanation-enabled.hook';
@@ -74,8 +75,6 @@ const LiveFileInference = ({ imageWasUploaded }: { imageWasUploaded: boolean })
     );
 };
 
-type LiveInferenceMode = 'Use file' | 'Use camera';
-
 const QuickInferencePage = (): JSX.Element => {
     const { image, annotations, imageWasUploaded, isDisabled, onResetImage } = useQuickInference();
     const settings = useUserGlobalSettings();
@@ -101,7 +100,7 @@ const QuickInferencePage = (): JSX.Element => {
                                 animate={'visible'}
                                 exit={'hidden'}
                             >
-                                <LivePredictionNotification settings={settings} />
+                                <LivePredictionNotification settings={settings} inferenceMode={liveInferenceMode} />
                             </motion.div>
                         )}
                     </AnimatePresence>