Keep gif & message within serverless yaml

cvat-core/src/ml-model.js

@@ -14,6 +14,10 @@ class MLModel {
         this._framework = data.framework;
         this._description = data.description;
         this._type = data.type;
+        this._tip = {
+            message: data.help_message,
+            gif: data.example_gif_url,
+        };
         this._params = {
             canvas: {
                 minPosVertices: data.min_pos_points,
@@ -84,6 +88,17 @@ class MLModel {
             canvas: { ...this._params.canvas },
         };
     }
+
+    /**
+     * @typedef {Object} MlModelTip
+     * @property {string} message A short message for a user about the model
+     * @property {string} gif A gif URL to be shawn to a user as an example
+     * @returns {MlModelTip}
+     * @readonly
+     */
+    get tip() {
+        return { ...this._tip };
+    }
 }
 
 module.exports = MLModel;

cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/interactor-tooltips.tsx

@@ -8,52 +8,23 @@ import Paragraph from 'antd/lib/typography/Paragraph';
 import Text from 'antd/lib/typography/Text';
 
 interface Props {
-    tool?: string;
+    name?: string;
+    gif?: string;
+    message?: string;
     withNegativePoints?: boolean;
 }
 
 function InteractorTooltips(props: Props): JSX.Element {
-    const { tool, withNegativePoints } = props;
-
-    const DEXTR_GIF = 'https://openvinotoolkit.github.io/cvat/images/dextr_example.gif';
-    const FBRS_GIF = 'https://openvinotoolkit.github.io/cvat/images/fbrs_example.gif';
-    const IOG_GIF = 'https://openvinotoolkit.github.io/cvat/images/iog_example.gif';
-    const DEXTR_DESC =
-        'The interactor allows to get a mask of an object using its extreme points (more or equal 4). You can add a point left-clicking the image';
-    const FBRS_DESC = 'The interactor allows to get a mask for an object using positive points, and negative points.';
-    const IOG_DESC =
-        'The interactor allows to get a mask of an object using its wrapping boundig box, positive, and negative points inside it';
-
-    const UNKNOWN_DESC = 'Selected interactor does not have tips';
-
-    let gif = null;
-    let desc = '';
-
-    switch (tool) {
-        case undefined:
-            desc = 'Select an interactor to see description';
-            break;
-        case 'DEXTR':
-            gif = DEXTR_GIF;
-            desc = DEXTR_DESC;
-            break;
-        case 'f-BRS':
-            gif = FBRS_GIF;
-            desc = FBRS_DESC;
-            break;
-        case 'IOG':
-            gif = IOG_GIF;
-            desc = IOG_DESC;
-            break;
-        default:
-            desc = UNKNOWN_DESC;
-    }
-
+    const {
+        name, gif, message, withNegativePoints,
+    } = props;
+    const UNKNOWN_MESSAGE = 'Selected interactor does not have a help message';
+    const desc = message || UNKNOWN_MESSAGE;
     return (
         <div className='cvat-interactor-tip-container'>
-            <Paragraph>{desc}</Paragraph>
-            {tool ? (
+            {name ? (
                 <>
+                    <Paragraph>{desc}</Paragraph>
                     <Paragraph>
                         <Text>You can prevent server requests holding</Text>
                         <Text strong>{' Ctrl '}</Text>
@@ -65,9 +36,11 @@ function InteractorTooltips(props: Props): JSX.Element {
                             <Text>Negative points can be added by right-clicking the image. </Text>
                         ) : null}
                     </Paragraph>
+                    {gif ? <Image className='cvat-interactor-tip-image' alt='Example gif' src={gif} /> : null}
                 </>
-            ) : null}
-            {gif ? <Image className='cvat-interactor-tip-image' alt='Example gif' src={gif} /> : null}
+            ) : (
+                <Text>Select an interactor to see help message</Text>
+            )}
         </div>
     );
 }

cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/tools-control.tsx

@@ -638,7 +638,7 @@ export class ToolsControlComponent extends React.PureComponent<Props, State> {
             );
         }
 
-        const minNegVertices: number = activeInteractor ? activeInteractor.params.canvas.minNegVertices : -1;
+        const minNegVertices = activeInteractor ? (activeInteractor.params.canvas.minNegVertices as number) : -1;
 
         return (
             <>
@@ -669,9 +669,13 @@ export class ToolsControlComponent extends React.PureComponent<Props, State> {
                     </Col>
                     <Col span={2} className='cvat-interactors-tips-icon-container'>
                         <Dropdown
-                            overlay={
-                                <ToolsTooltips withNegativePoints={minNegVertices >= 0} tool={activeInteractor?.name} />
-                            }
+                            overlay={(
+                                <ToolsTooltips
+                                    name={activeInteractor?.name}
+                                    withNegativePoints={minNegVertices >= 0}
+                                    {...(activeInteractor?.tip || {})}
+                                />
+                            )}
                         >
                             <QuestionCircleOutlined />
                         </Dropdown>

cvat-ui/src/reducers/interfaces.ts

@@ -182,8 +182,12 @@ export interface Model {
     framework: string;
     description: string;
     type: string;
+    tip: {
+        message: string;
+        gif: string;
+    };
     params: {
-        canvas: Record<string, unknown>;
+        canvas: Record<string, number | boolean>;
     };
 }
 

cvat/apps/lambda_manager/views.py

@@ -113,6 +113,8 @@ def __init__(self, gateway, data):
         self.min_pos_points = int(meta_anno.get('min_pos_points', 1))
         self.min_neg_points = int(meta_anno.get('min_neg_points', -1))
         self.startswith_box = bool(meta_anno.get('startswith_box', False))
+        self.example_gif_url = meta_anno.get('example_gif_url', '')
+        self.help_message = meta_anno.get('help_message', '')
         self.gateway = gateway
 
     def to_dict(self):
@@ -129,7 +131,9 @@ def to_dict(self):
             response.update({
                 'min_pos_points': self.min_pos_points,
                 'min_neg_points': self.min_neg_points,
-                'startswith_box': self.startswith_box
+                'startswith_box': self.startswith_box,
+                'help_message': self.help_message,
+                'example_gif_url': self.example_gif_url
             })
 
         if self.kind is LambdaType.TRACKER:

serverless/openvino/dextr/nuclio/function.yaml

@@ -7,6 +7,8 @@ metadata:
     spec:
     framework: openvino
     min_pos_points: 4
+    example_gif_url: https://raw.githubusercontent.com/openvinotoolkit/cvat/0fbb19ae3846a017853d52e187f0ce149adced7d/site/content/en/images/dextr_example.gif
+    help_message: The interactor allows to get a mask of an object using its extreme points (more or equal than 4). You can add a point left-clicking the image
 
 spec:
   description: Deep Extreme Cut

serverless/pytorch/saic-vul/fbrs/nuclio/function.yaml

@@ -8,6 +8,8 @@ metadata:
     framework: pytorch
     min_pos_points: 1
     min_neg_points: 0
+    example_gif_url: https://raw.githubusercontent.com/openvinotoolkit/cvat/0fbb19ae3846a017853d52e187f0ce149adced7d/site/content/en/images/fbrs_example.gif
+    help_message: The interactor allows to get a mask for an object using positive points, and negative points
 
 spec:
   description: f-BRS interactive segmentation

serverless/pytorch/shiyinzhang/iog/nuclio/function.yaml

@@ -9,6 +9,8 @@ metadata:
     min_pos_points: 1
     min_neg_points: 0
     startswith_box: true
+    example_gif_url: https://raw.githubusercontent.com/openvinotoolkit/cvat/0fbb19ae3846a017853d52e187f0ce149adced7d/site/content/en/images/iog_example.gif
+    help_message: The interactor allows to get a mask of an object using its wrapping boundig box, positive, and negative points inside it
 
 spec:
   description: Interactive Object Segmentation with Inside-Outside Guidance