diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index cea188dcf10..4e74f4e0432 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -19,7 +19,7 @@
         "@seafile/sdoc-editor": "1.0.206",
         "@seafile/seafile-calendar": "0.0.28",
         "@seafile/seafile-editor": "1.0.133",
-        "@seafile/sf-metadata-ui-component": "^0.0.64",
+        "@seafile/sf-metadata-ui-component": "^0.0.65-beta.1",
         "@seafile/stldraw-editor": "0.1.5",
         "@uiw/codemirror-extensions-langs": "^4.19.4",
         "@uiw/codemirror-themes": "^4.23.5",
@@ -3233,20 +3233,18 @@
     },
     "node_modules/@formatjs/intl-unified-numberformat": {
       "version": "3.3.7",
-      "resolved": "https://registry.npmmirror.com/@formatjs/intl-unified-numberformat/-/intl-unified-numberformat-3.3.7.tgz",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-unified-numberformat/-/intl-unified-numberformat-3.3.7.tgz",
       "integrity": "sha512-KnWgLRHzCAgT9eyt3OS34RHoyD7dPDYhRcuKn+/6Kv2knDF8Im43J6vlSW6Hm1w63fNq3ZIT1cFk7RuVO3Psag==",
       "deprecated": "We have renamed the package to @formatjs/intl-numberformat",
-      "license": "MIT",
       "dependencies": {
         "@formatjs/intl-utils": "^2.3.0"
       }
     },
     "node_modules/@formatjs/intl-utils": {
       "version": "2.3.0",
-      "resolved": "https://registry.npmmirror.com/@formatjs/intl-utils/-/intl-utils-2.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-utils/-/intl-utils-2.3.0.tgz",
       "integrity": "sha512-KWk80UPIzPmUg+P0rKh6TqspRw0G6eux1PuJr+zz47ftMaZ9QDwbGzHZbtzWkl5hgayM/qrKRutllRC7D/vVXQ==",
-      "deprecated": "the package is rather renamed to @formatjs/ecma-abstract with some changes in functionality (primarily selectUnit is removed and we don't plan to make any further changes to this package",
-      "license": "MIT"
+      "deprecated": "the package is rather renamed to @formatjs/ecma-abstract with some changes in functionality (primarily selectUnit is removed and we don't plan to make any further changes to this package"
     },
     "node_modules/@gatsbyjs/reach-router": {
       "version": "1.3.9",
@@ -5423,9 +5421,9 @@
       }
     },
     "node_modules/@seafile/sf-metadata-ui-component": {
-      "version": "0.0.64",
-      "resolved": "https://registry.npmjs.org/@seafile/sf-metadata-ui-component/-/sf-metadata-ui-component-0.0.64.tgz",
-      "integrity": "sha512-C4kLqsZCg+KutvOzsv65j58x7PQ6t8wPRJwXIBmEBSqB0/suZZnEV6uNhU5W83zN2CzHmGeRvg4+v+/Pj4pEiA==",
+      "version": "0.0.65-beta.1",
+      "resolved": "https://registry.npmjs.org/@seafile/sf-metadata-ui-component/-/sf-metadata-ui-component-0.0.65-beta.1.tgz",
+      "integrity": "sha512-oS0WLNDiXDXQXw0EVWK+fv8mNKOQfnchlrbSqb6IRjfQNIlmOhLt1w7iqcd7wabvyoLG5me3+k2RQynw0iTtUw==",
       "dependencies": {
         "@seafile/seafile-calendar": "0.0.28",
         "@seafile/seafile-editor": "^1.0.133",
@@ -5451,9 +5449,8 @@
     },
     "node_modules/@seafile/sf-metadata-ui-component/node_modules/classnames": {
       "version": "2.3.2",
-      "resolved": "https://registry.npmmirror.com/classnames/-/classnames-2.3.2.tgz",
-      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==",
-      "license": "MIT"
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
     },
     "node_modules/@seafile/slate": {
       "version": "0.91.8",
@@ -8645,9 +8642,8 @@
     },
     "node_modules/bowser": {
       "version": "1.9.4",
-      "resolved": "https://registry.npmmirror.com/bowser/-/bowser-1.9.4.tgz",
-      "integrity": "sha512-9IdMmj2KjigRq6oWhmwv1W36pDuA4STQZ8q6YO9um+x07xgYNCD3Oou+WP/3L1HNz7iqythGet3/p4wvc8AAwQ==",
-      "license": "MIT"
+      "resolved": "https://registry.npmjs.org/bowser/-/bowser-1.9.4.tgz",
+      "integrity": "sha512-9IdMmj2KjigRq6oWhmwv1W36pDuA4STQZ8q6YO9um+x07xgYNCD3Oou+WP/3L1HNz7iqythGet3/p4wvc8AAwQ=="
     },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
@@ -10022,9 +10018,8 @@
     },
     "node_modules/css-in-js-utils": {
       "version": "2.0.1",
-      "resolved": "https://registry.npmmirror.com/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz",
       "integrity": "sha512-PJF0SpJT+WdbVVt0AOYp9C8GnuruRlL/UFW7932nLWmFLQTaWEzTBQEx7/hn4BuV+WON75iAViSUJLiU3PKbpA==",
-      "license": "MIT",
       "dependencies": {
         "hyphenate-style-name": "^1.0.2",
         "isobject": "^3.0.1"
@@ -13375,9 +13370,8 @@
     },
     "node_modules/glamor": {
       "version": "2.20.40",
-      "resolved": "https://registry.npmmirror.com/glamor/-/glamor-2.20.40.tgz",
+      "resolved": "https://registry.npmjs.org/glamor/-/glamor-2.20.40.tgz",
       "integrity": "sha512-DNXCd+c14N9QF8aAKrfl4xakPk5FdcFwmH7sD0qnC0Pr7xoZ5W9yovhUrY/dJc3psfGGXC58vqQyRtuskyUJxA==",
-      "license": "MIT",
       "dependencies": {
         "fbjs": "^0.8.12",
         "inline-style-prefixer": "^3.0.6",
@@ -14964,9 +14958,8 @@
     },
     "node_modules/inline-style-prefixer": {
       "version": "3.0.8",
-      "resolved": "https://registry.npmmirror.com/inline-style-prefixer/-/inline-style-prefixer-3.0.8.tgz",
+      "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-3.0.8.tgz",
       "integrity": "sha512-ne8XIyyqkRaNJ1JfL1NYzNdCNxq+MCBQhC8NgOQlzNm2vv3XxlP0VSLQUbSRCF6KPEoveCVEpayHoHzcMyZsMQ==",
-      "license": "MIT",
       "dependencies": {
         "bowser": "^1.7.3",
         "css-in-js-utils": "^2.0.0"
@@ -14988,15 +14981,13 @@
     },
     "node_modules/intl-format-cache": {
       "version": "4.3.1",
-      "resolved": "https://registry.npmmirror.com/intl-format-cache/-/intl-format-cache-4.3.1.tgz",
-      "integrity": "sha512-OEUYNA7D06agqPOYhbTkl0T8HA3QKSuwWh1HiClEnpd9vw7N+3XsQt5iZ0GUEchp5CW1fQk/tary+NsbF3yQ1Q==",
-      "license": "BSD-3-Clause"
+      "resolved": "https://registry.npmjs.org/intl-format-cache/-/intl-format-cache-4.3.1.tgz",
+      "integrity": "sha512-OEUYNA7D06agqPOYhbTkl0T8HA3QKSuwWh1HiClEnpd9vw7N+3XsQt5iZ0GUEchp5CW1fQk/tary+NsbF3yQ1Q=="
     },
     "node_modules/intl-messageformat": {
       "version": "7.8.4",
-      "resolved": "https://registry.npmmirror.com/intl-messageformat/-/intl-messageformat-7.8.4.tgz",
+      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-7.8.4.tgz",
       "integrity": "sha512-yS0cLESCKCYjseCOGXuV4pxJm/buTfyCJ1nzQjryHmSehlptbZbn9fnlk1I9peLopZGGbjj46yHHiTAEZ1qOTA==",
-      "license": "BSD-3-Clause",
       "dependencies": {
         "intl-format-cache": "^4.2.21",
         "intl-messageformat-parser": "^3.6.4"
@@ -15004,10 +14995,9 @@
     },
     "node_modules/intl-messageformat-parser": {
       "version": "3.6.4",
-      "resolved": "https://registry.npmmirror.com/intl-messageformat-parser/-/intl-messageformat-parser-3.6.4.tgz",
+      "resolved": "https://registry.npmjs.org/intl-messageformat-parser/-/intl-messageformat-parser-3.6.4.tgz",
       "integrity": "sha512-RgPGwue0mJtoX2Ax8EmMzJzttxjnva7gx0Q7mKJ4oALrTZvtmCeAw5Msz2PcjW4dtCh/h7vN/8GJCxZO1uv+OA==",
       "deprecated": "We've written a new parser that's 6x faster and is backwards compatible. Please use @formatjs/icu-messageformat-parser",
-      "license": "BSD-3-Clause",
       "dependencies": {
         "@formatjs/intl-unified-numberformat": "^3.2.0"
       }
@@ -27480,9 +27470,8 @@
     },
     "node_modules/through": {
       "version": "2.3.8",
-      "resolved": "https://registry.npmmirror.com/through/-/through-2.3.8.tgz",
-      "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==",
-      "license": "MIT"
+      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
+      "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg=="
     },
     "node_modules/thunky": {
       "version": "1.1.0",
diff --git a/frontend/package.json b/frontend/package.json
index fc8d50f5f5f..802fda7c6a8 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,7 +14,7 @@
     "@seafile/sdoc-editor": "1.0.206",
     "@seafile/seafile-calendar": "0.0.28",
     "@seafile/seafile-editor": "1.0.133",
-    "@seafile/sf-metadata-ui-component": "^0.0.64",
+    "@seafile/sf-metadata-ui-component": "^0.0.65-beta.1",
     "@seafile/stldraw-editor": "0.1.5",
     "@uiw/codemirror-extensions-langs": "^4.19.4",
     "@uiw/codemirror-themes": "^4.23.5",
diff --git a/frontend/src/components/dialog/image-dialog/index.css b/frontend/src/components/dialog/image-dialog/index.css
index efed6787d49..d81bb2397ed 100644
--- a/frontend/src/components/dialog/image-dialog/index.css
+++ b/frontend/src/components/dialog/image-dialog/index.css
@@ -15,8 +15,8 @@
 }
 
 .lightbox-side-panel .cur-view-detail {
-  background-color: #333;
-  border-left: 1px solid #666;
+  background-color: inherit;
+  border: none;
 }
 
 .lightbox-side-panel .side-panel-controller {
@@ -60,32 +60,35 @@
 
 .lightbox-side-panel .detail-header .detail-title .name,
 .lightbox-side-panel .file-details-collapse .file-details-collapse-header .file-details-collapse-header-title,
-.lightbox-side-panel .dirent-detail-item .dirent-detail-item-name {
+.lightbox-side-panel .dirent-detail-item .dirent-detail-item-name,
+.lightbox-side-panel .sf-metadata-number-property-detail-editor {
   color: #fff;
 }
 
 .lightbox-side-panel .detail-body {
-  overflow-y: auto;
   scrollbar-color: #666 #333;
-  padding: 0;
-}
-
-.lightbox-side-panel .detail-content {
-  margin: 0 16px;
+  padding: 0 16px 8px;
 }
 
 .lightbox-side-panel .file-details-collapse {
   margin-bottom: 20px;
 }
 
-.lightbox-side-panel .sf-metadata-ui.collaborator-item {
+.lightbox-side-panel .sf-metadata-ui.collaborator-item,
+.lightbox-side-panel .sf-metadata-text-property-detail-editor:not(.formatter),
+.lightbox-side-panel .sf-metadata-number-property-detail-editor:focus {
   color: #212529;
 }
 
+.lightbox-side-panel .sf-metadata-text-property-detail-editor:not(.formatter) {
+  cursor: text;
+}
+
 .lightbox-side-panel .dirent-detail-item .dirent-detail-item-value:not(.editable) .sf-metadata-record-cell-empty:empty::before,
 .lightbox-side-panel .sf-metadata-property-detail-editor:empty::before,
 .lightbox-side-panel .sf-metadata-property-detail-capture-information-item .dirent-detail-item-value:empty::before,
-.lightbox-side-panel .file-details-collapse .file-details-collapse-header .sf3-font-down {
+.lightbox-side-panel .file-details-collapse .file-details-collapse-header .sf3-font-down,
+.lightbox-side-panel .sf-metadata-number-property-detail-editor::placeholder {
   color: #999;
 }
 
diff --git a/frontend/src/components/dialog/image-dialog/index.js b/frontend/src/components/dialog/image-dialog/index.js
index b217f56c3a7..f0da0069e22 100644
--- a/frontend/src/components/dialog/image-dialog/index.js
+++ b/frontend/src/components/dialog/image-dialog/index.js
@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { gettext } from '../../../utils/constants';
 import Lightbox from '@seafile/react-image-lightbox';
@@ -7,6 +7,8 @@ import { SYSTEM_FOLDERS } from '../../../constants';
 import EmbeddedFileDetails from '../../dirent-detail/embedded-file-details';
 import { Utils } from '../../../utils/utils';
 import Icon from '../../icon';
+import { metadataAPI } from '../../../metadata';
+import toaster from '../../toast';
 
 import '@seafile/react-image-lightbox/style.css';
 import './index.css';
@@ -16,6 +18,7 @@ const SIDE_PANEL_EXPANDED_WIDTH = 300;
 
 const ImageDialog = ({ repoID, repoInfo, enableRotate: oldEnableRotate, imageItems, imageIndex, closeImagePopup, moveToPrevImage, moveToNextImage, onDeleteImage, onRotateImage, isCustomPermission }) => {
   const [expanded, setExpanded] = useState(false);
+  const [enableFaceRecognition, setEnableFaceRecognition] = useState(false);
 
   const { enableOCR, enableMetadata, canModify, onOCR: onOCRAPI, OCRSuccessCallBack } = useMetadataAIOperations();
 
@@ -31,6 +34,15 @@ const ImageDialog = ({ repoID, repoInfo, enableRotate: oldEnableRotate, imageIte
     setExpanded(!expanded);
   }, [expanded]);
 
+  useEffect(() => {
+    metadataAPI.getFaceRecognitionStatus(repoID).then(res => {
+      setEnableFaceRecognition(res.data.enabled);
+    }).catch(error => {
+      const errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }, [repoID]);
+
   const imageItemsLength = imageItems.length;
   if (imageItemsLength === 0) return null;
   const id = imageItems[imageIndex].id;
@@ -77,6 +89,7 @@ const ImageDialog = ({ repoID, repoInfo, enableRotate: oldEnableRotate, imageIte
                 isShowControl: false,
               }
             }}
+            enableFaceRecognition={enableFaceRecognition}
           />
         )}
       </div>
diff --git a/frontend/src/components/dirent-detail/dirent-details/file-details/index.js b/frontend/src/components/dirent-detail/dirent-details/file-details/index.js
index c835af295b3..8c9998256ff 100644
--- a/frontend/src/components/dirent-detail/dirent-details/file-details/index.js
+++ b/frontend/src/components/dirent-detail/dirent-details/file-details/index.js
@@ -142,7 +142,7 @@ const FileDetails = React.memo(({ repoID, dirent, path, direntDetail, onFileTagC
             })}
           </Collapse>
         )}
-        {enableMetadataManagement && enableMetadata && enableFaceRecognition && Utils.imageCheck(dirent.name) && (
+        {Utils.imageCheck(dirent.name) && enableMetadataManagement && enableMetadata && enableFaceRecognition && (
           <People repoID={repoID} record={record} />
         )}
       </>
diff --git a/frontend/src/components/dirent-detail/embedded-file-details/file-details.js b/frontend/src/components/dirent-detail/embedded-file-details/file-details.js
index 0d346cbd57a..80bef599d38 100644
--- a/frontend/src/components/dirent-detail/embedded-file-details/file-details.js
+++ b/frontend/src/components/dirent-detail/embedded-file-details/file-details.js
@@ -5,13 +5,12 @@ import DetailItem from '../detail-item';
 import { CellType } from '../../../metadata/constants';
 import { gettext } from '../../../utils/constants';
 import { Utils } from '../../../utils/utils';
-import { MetadataDetails, useMetadata, useMetadataDetails } from '../../../metadata';
+import { MetadataDetails, useMetadataDetails } from '../../../metadata';
 import { useMetadataStatus } from '../../../hooks';
 import People from '../people';
 
-const FileDetails = ({ repoID, dirent, direntDetail }) => {
+const FileDetails = ({ repoID, dirent, direntDetail, enableFaceRecognition }) => {
   const { enableMetadataManagement, enableMetadata } = useMetadataStatus();
-  const { enableFaceRecognition } = useMetadata();
   const { record } = useMetadataDetails();
 
   const sizeField = useMemo(() => ({ type: 'size', name: gettext('Size') }), []);
@@ -41,7 +40,7 @@ const FileDetails = ({ repoID, dirent, direntDetail }) => {
       {enableMetadata && (
         <MetadataDetails />
       )}
-      {enableMetadataManagement && enableMetadata && enableFaceRecognition && Utils.imageCheck(dirent.name) && (
+      {Utils.imageCheck(dirent.name) && enableMetadataManagement && enableMetadata && enableFaceRecognition && (
         <People repoID={repoID} record={record} />
       )}
     </>
diff --git a/frontend/src/components/dirent-detail/embedded-file-details/index.js b/frontend/src/components/dirent-detail/embedded-file-details/index.js
index acca221f91d..e7cec14728d 100644
--- a/frontend/src/components/dirent-detail/embedded-file-details/index.js
+++ b/frontend/src/components/dirent-detail/embedded-file-details/index.js
@@ -12,7 +12,7 @@ import { AI, Settings } from '../../../metadata/components/metadata-details';
 
 import './index.css';
 
-const EmbeddedFileDetails = ({ repoID, repoInfo, dirent, path, onClose, width = 300, className, component = {} }) => {
+const EmbeddedFileDetails = ({ repoID, repoInfo, dirent, path, onClose, width = 300, className, component = {}, enableFaceRecognition = false }) => {
   const { headerComponent } = component;
   const [direntDetail, setDirentDetail] = useState('');
 
@@ -38,14 +38,16 @@ const EmbeddedFileDetails = ({ repoID, repoInfo, dirent, path, onClose, width =
   useEffect(() => {
     if (isView || isTag) return;
 
+    let isNewContext = false;
     if (!window.sfMetadataContext) {
       const context = new MetadataContext();
       window.sfMetadataContext = context;
       window.sfMetadataContext.init({ repoID, repoInfo });
+      isNewContext = true;
     }
 
     return () => {
-      if (window.sfMetadataContext) {
+      if (window.sfMetadataContext && isNewContext) {
         window.sfMetadataContext.destroy();
         delete window['sfMetadataContext'];
       }
@@ -76,7 +78,7 @@ const EmbeddedFileDetails = ({ repoID, repoInfo, dirent, path, onClose, width =
         <Body>
           {dirent && direntDetail && (
             <div className="detail-content">
-              <FileDetails repoID={repoID} dirent={dirent} direntDetail={direntDetail} />
+              <FileDetails repoID={repoID} dirent={dirent} direntDetail={direntDetail} enableFaceRecognition={enableFaceRecognition} />
             </div>
           )}
         </Body>
@@ -92,6 +94,7 @@ EmbeddedFileDetails.propTypes = {
   repoInfo: PropTypes.object.isRequired,
   component: PropTypes.object,
   onClose: PropTypes.func.isRequired,
+  enableFaceRecognition: PropTypes.bool,
 };
 
 export default EmbeddedFileDetails;
diff --git a/frontend/src/metadata/components/metadata-details/location/index.js b/frontend/src/metadata/components/metadata-details/location/index.js
index 621da811e3a..13f4a6ba80f 100644
--- a/frontend/src/metadata/components/metadata-details/location/index.js
+++ b/frontend/src/metadata/components/metadata-details/location/index.js
@@ -176,7 +176,7 @@ class Location extends React.Component {
         </DetailItem>
         {isLoading ? (<Loading />) : this.mapType && (
           <div className={classnames('dirent-detail-item dirent-detail-item-value-map', { 'd-none': !isValid })}>
-            <div className="w-100 h-100" ref={ref => this.ref = ref}></div>
+            <div className="w-100 h-100" ref={ref => this.ref = ref} id="sf-geolocation-map-container"></div>
           </div>
         )}
       </>