Added ability to customize logo and title

changelog.d/20250205_141639_klakhov_setup_logo.md

@@ -0,0 +1,4 @@
+### Added
+
+- Ability to customize title and logo
+  (<https://github.com/cvat-ai/cvat/pull/9052>)

cvat-core/src/server-response-types.ts

@@ -177,6 +177,8 @@ export interface SerializedAbout {
     description: string;
     name: string;
     version: string;
+    logo: string;
+    title: string;
 }
 
 export interface SerializedRemoteFile {

cvat-ui/src/components/common/cvat-logo.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+
+function CVATLogo(): JSX.Element {
+    const SVGLogo = useSelector((state: any) => state.about.server.logo);
+
+    return (
+        <div className='cvat-logo-icon'>
+            <img
+                src={`data:image/svg+xml;utf8,${encodeURIComponent(SVGLogo)}`}
+                alt='CVAT Logo'
+            />
+        </div>
+    );
+}
+
+export default React.memo(CVATLogo);

cvat-ui/src/components/cvat-app.tsx

@@ -325,6 +325,11 @@ class CVATApplication extends React.PureComponent<CVATAppProps & RouteComponentP
             loadServerAPISchema();
         }
 
+        if (!aboutInitialized && !aboutFetching) {
+            loadAbout();
+            return;
+        }
+
         if (user == null || !user.isVerified || !user.id) {
             return;
         }
@@ -337,10 +342,6 @@ class CVATApplication extends React.PureComponent<CVATAppProps & RouteComponentP
             loadFormats();
         }
 
-        if (!aboutInitialized && !aboutFetching) {
-            loadAbout();
-        }
-
         if (organizationInitialized && !requestsInitialized && !requestsFetching) {
             initRequests();
         }

cvat-ui/src/components/header/header.tsx

@@ -9,7 +9,7 @@ import { connect } from 'react-redux';
 import { useHistory, useLocation } from 'react-router';
 import { Row, Col } from 'antd/lib/grid';
 import { MenuProps } from 'antd/lib/menu';
-import Icon, {
+import {
     SettingOutlined,
     InfoCircleOutlined,
     EditOutlined,
@@ -34,9 +34,9 @@ import notification from 'antd/lib/notification';
 import config from 'config';
 
 import { Organization, getCore } from 'cvat-core-wrapper';
-import { CVATLogo } from 'icons';
 import ChangePasswordDialog from 'components/change-password-modal/change-password-modal';
 import CVATTooltip from 'components/common/cvat-tooltip';
+import CVATLogo from 'components/common/cvat-logo';
 import { switchSettingsModalVisible as switchSettingsModalVisibleAction } from 'actions/settings-actions';
 import { logoutAsync, authActions } from 'actions/auth-actions';
 import { shortcutsActions, registerComponentShortcuts } from 'actions/shortcuts-actions';
@@ -430,7 +430,7 @@ function HeaderComponent(props: Props): JSX.Element {
         <Layout.Header className='cvat-header'>
             <GlobalHotKeys keyMap={subKeyMap(componentShortcuts, keyMap)} handlers={handlers} />
             <div className='cvat-left-header'>
-                <Icon className='cvat-logo-icon' component={CVATLogo} />
+                <CVATLogo />
                 <Button
                     className={getButtonClassName('projects')}
                     type='link'

cvat-ui/src/components/header/styles.scss

@@ -33,7 +33,7 @@
         }
     }
 
-    .anticon.cvat-logo-icon {
+    .cvat-logo-icon {
         margin: 0 $grid-unit-size * 2;
     }
 

cvat-ui/src/components/signing-common/signing-layout.tsx

@@ -4,11 +4,11 @@
 
 import './styles.scss';
 import React from 'react';
+import { useSelector } from 'react-redux';
 import Layout from 'antd/lib/layout';
 import { Col, Row } from 'antd/lib/grid';
-import { CVATLogo } from 'icons';
-import Icon from '@ant-design/icons';
 import Title from 'antd/lib/typography/Title';
+import CVATLogo from 'components/common/cvat-logo';
 import SVGSigningBackground from '../../assets/signing-background.svg';
 
 interface SignInLayoutComponentProps {
@@ -51,6 +51,8 @@ export const formSizes: FormSizes = {
 function SignInLayout(props: SignInLayoutComponentProps): JSX.Element {
     const { children } = props;
     const { Content, Header } = Layout;
+    const title = useSelector((state: any) => state.about.server.title);
+
     const titleSizes = {
         xs: { span: 0 },
         sm: { span: 0 },
@@ -73,16 +75,15 @@ function SignInLayout(props: SignInLayoutComponentProps): JSX.Element {
             <Header className='cvat-signing-header'>
                 <Row justify='center' align='middle'>
                     <Col {...logoSizes}>
-                        <Icon className='cvat-logo-icon' component={CVATLogo} />
+                        <CVATLogo />
                     </Col>
                 </Row>
             </Header>
             <Layout className='cvat-signing-layout'>
                 <Content>
                     <Row justify='center' align='middle' style={{ height: '100%' }}>
                         <Col {...titleSizes} className='cvat-signing-title'>
-                            <Title>Open Data</Title>
-                            <Title>Annotation Platform</Title>
+                            <Title>{title}</Title>
                         </Col>
                         {children}
                     </Row>

cvat-ui/src/components/signing-common/styles.scss

@@ -41,7 +41,7 @@ $social-google-background: #4286f5;
     width: 100%;
 
     .cvat-logo-icon {
-        fill: white;
+        filter: brightness(0) invert(1);
     }
 }
 

cvat-ui/src/icons.tsx

@@ -5,7 +5,6 @@
 
 import React from 'react';
 
-import SVGCVATLogo from './assets/cvat-logo.svg';
 import SVGCVATIcon from './assets/cvat-icon.svg';
 import SVGCursorIcon from './assets/cursor-icon.svg';
 import SVGMoveIcon from './assets/move-icon.svg';
@@ -72,7 +71,6 @@ import SVGShowGroundTruthIcon from './assets/show-gt-icon.svg';
 import SVGJoinIcon from './assets/join-icon.svg';
 import SVGSliceIcon from './assets/slice-icon.svg';
 
-export const CVATLogo = React.memo((): JSX.Element => <SVGCVATLogo />);
 export const CVATIcon = React.memo((): JSX.Element => <SVGCVATIcon />);
 export const CursorIcon = React.memo((): JSX.Element => <SVGCursorIcon />);
 export const MoveIcon = React.memo((): JSX.Element => <SVGMoveIcon />);

cvat/apps/engine/serializers.py

@@ -2627,6 +2627,8 @@ class AboutSerializer(serializers.Serializer):
     name = serializers.CharField(max_length=128)
     description = serializers.CharField(max_length=2048)
     version = serializers.CharField(max_length=64)
+    logo = serializers.CharField()
+    title = serializers.CharField(max_length=1024)
 
 class FrameMetaSerializer(serializers.Serializer):
     width = serializers.IntegerField()

cvat/apps/engine/views.py

@@ -189,6 +189,12 @@
 _DATA_UPDATED_DATE_HEADER_NAME = 'X-Updated-Date'
 _RETRY_AFTER_TIMEOUT = 10
 
+ICON_FILE = "assets/logo.svg"
+
+def get_logo() -> str:
+    with open(osp.join(osp.dirname(__file__), ICON_FILE)) as f:
+        return f.read()
+
 @extend_schema(tags=['server'])
 class ServerViewSet(viewsets.ViewSet):
     serializer_class = None
@@ -210,15 +216,11 @@ def get_serializer(self, *args, **kwargs):
     def about(request):
         from cvat import __version__ as cvat_version
         about = {
-            "name": "Computer Vision Annotation Tool",
+            "name": settings.ABOUT_INFO["name"],
+            "title": settings.ABOUT_INFO["title"],
+            "description": settings.ABOUT_INFO["description"],
             "version": cvat_version,
-            "description": "CVAT is completely re-designed and re-implemented " +
-                "version of Video Annotation Tool from Irvine, California " +
-                "tool. It is free, online, interactive video and image annotation " +
-                "tool for computer vision. It is being used by our team to " +
-                "annotate million of objects with different properties. Many UI " +
-                "and UX decisions are based on feedbacks from professional data " +
-                "annotation team."
+            "logo": get_logo(),
         }
         serializer = AboutSerializer(data=about)
         if serializer.is_valid(raise_exception=True):

cvat/schema.yml

@@ -6905,9 +6905,16 @@ components:
         version:
           type: string
           maxLength: 64
+        logo:
+          type: string
+        title:
+          type: string
+          maxLength: 1024
       required:
       - description
+      - logo
       - name
+      - title
       - version
     AcceptInvitationRead:
       type: object

cvat/settings/base.py

@@ -769,3 +769,15 @@ class CVAT_QUEUES(Enum):
 
 # Indicates the maximum number of days a file or directory is retained in the temporary directory
 TMP_FILE_OR_DIR_RETENTION_DAYS = 3
+
+ABOUT_INFO = {
+    "name": "Computer Vision Annotation Tool",
+    "title": "Open Data Annotation Platform",
+    "description": "CVAT is completely re-designed and re-implemented " +
+                "version of Video Annotation Tool from Irvine, California " +
+                "tool. It is free, online, interactive video and image annotation " +
+                "tool for computer vision. It is being used by our team to " +
+                "annotate million of objects with different properties. Many UI " +
+                "and UX decisions are based on feedbacks from professional data " +
+                "annotation team.",
+}