Merge pull request #18425 from lewis617/icon-pic-search

docs: Search icon by image

site/theme/en-US.js

@@ -111,5 +111,18 @@ module.exports = {
     'app.docs.components.icon.category.data': 'Data Icons',
     'app.docs.components.icon.category.other': 'Application Icons',
     'app.docs.components.icon.category.logo': 'Brand and Logos',
+    'app.docs.components.icon.pic-searcher.intro':
+      'AI Search by image is online, welcome to use! 🎉',
+    'app.docs.components.icon.pic-searcher.title': 'Search by image',
+    'app.docs.components.icon.pic-searcher.upload-text':
+      'Click or drag or paste file to this area to upload',
+    'app.docs.components.icon.pic-searcher.upload-hint':
+      'We will find the most matching icon based on the image',
+    'app.docs.components.icon.pic-searcher.server-error':
+      'Predict service is temporarily unavailable',
+    'app.docs.components.icon.pic-searcher.matching': 'Matching...',
+    'app.docs.components.icon.pic-searcher.result-tip': 'Match the following icons for you:',
+    'app.docs.components.icon.pic-searcher.th-icon': 'Icon',
+    'app.docs.components.icon.pic-searcher.th-score': 'Probability',
   },
 };

site/theme/static/icon-pic-searcher.less

@@ -0,0 +1,52 @@
+.icon-pic-searcher {
+  margin: 1px 8px;
+  display: inline-block;
+
+  .icon-pic-btn {
+    color: rgba(0, 0, 0, 0.45);
+    cursor: pointer;
+    transition: all 0.3s;
+
+    &:hover {
+      color: rgba(0, 0, 0, 0.8);
+    }
+  }
+}
+
+.icon-pic-preview {
+  width: 66px;
+  height: 66px;
+  padding: 8px;
+  margin-top: 10px;
+  text-align: center;
+  border: 1px solid @border-color-base;
+  border-radius: 4px;
+
+  > img {
+    max-width: 50px;
+    max-height: 50px;
+  }
+}
+
+.icon-pic-search-result {
+  min-height: 50px;
+  padding: 0 10px;
+  > .result-tip {
+    padding: 10px 0;
+    color: @text-color-secondary;
+  }
+  > table {
+    width: 100%;
+    .col-icon {
+      width: 80px;
+      padding: 10px 0;
+      > i {
+        font-size: 30px;
+
+        :hover {
+          color: @link-hover-color;
+        }
+      }
+    }
+  }
+}

site/theme/static/index.less

@@ -14,6 +14,7 @@
 @import './demo';
 @import './colors';
 @import './icons';
+@import './icon-pic-searcher';
 @import './mock-browser';
 @import './new-version-info-modal';
 @import './motion';

site/theme/template/IconDisplay/IconPicSearcher.tsx

@@ -0,0 +1,219 @@
+import React, { Component } from 'react';
+import { Upload, Tooltip, Popover, Icon, Modal, Progress, message, Spin, Result } from 'antd';
+import CopyToClipboard from 'react-copy-to-clipboard';
+import { injectIntl } from 'react-intl';
+
+const { Dragger } = Upload;
+
+interface PicSearcherProps {
+  intl: any;
+}
+
+interface PicSearcherState {
+  loading: boolean;
+  modalVisible: boolean;
+  popoverVisible: boolean;
+  icons: Array<string>;
+  fileList: Array<any>;
+  error: boolean;
+}
+
+interface iconObject {
+  type: string;
+  score: number;
+}
+
+class PicSearcher extends Component<PicSearcherProps, PicSearcherState> {
+  state = {
+    loading: false,
+    modalVisible: false,
+    popoverVisible: false,
+    icons: [],
+    fileList: [],
+    error: false,
+  };
+
+  componentDidMount() {
+    document.addEventListener('paste', this.onPaste);
+    this.setState({ popoverVisible: !localStorage.getItem('disableIconTip') });
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('paste', this.onPaste);
+  }
+
+  onPaste = (event: ClipboardEvent) => {
+    const items = event.clipboardData && event.clipboardData.items;
+    let file = null;
+    if (items && items.length) {
+      for (let i = 0; i < items.length; i += 1) {
+        if (items[i].type.indexOf('image') !== -1) {
+          file = items[i].getAsFile();
+          break;
+        }
+      }
+    }
+    if (file) this.uploadFile(file);
+  };
+
+  uploadFile = (file: File) => {
+    const reader: FileReader = new FileReader();
+    reader.onload = () => {
+      this.downscaleImage(reader.result).then(this.predict);
+      this.setState(() => ({
+        fileList: [{ uid: 1, name: file.name, status: 'done', url: reader.result }],
+      }));
+    };
+    reader.readAsDataURL(file);
+  };
+
+  downscaleImage = (url: any) => {
+    return new Promise(resolve => {
+      const img = new Image();
+      img.setAttribute('crossOrigin', 'anonymous');
+      img.src = url;
+      img.onload = function() {
+        const scale = Math.min(1, 300 / Math.max(img.width, img.height));
+        const canvas = document.createElement('canvas');
+        canvas.width = img.width * scale;
+        canvas.height = img.height * scale;
+        const ctx = canvas.getContext('2d');
+        (ctx as CanvasRenderingContext2D).drawImage(img, 0, 0, canvas.width, canvas.height);
+        const newDataUrl = canvas.toDataURL('image/jpeg');
+        resolve(newDataUrl);
+      };
+    });
+  };
+
+  predict = async (imageBase64: any) => {
+    this.setState(() => ({ loading: true }));
+    try {
+      const res = await fetch(
+        '//1647796581073291.cn-shanghai.fc.aliyuncs.com/2016-08-15/proxy/cr-sh.cr-fc-predict__stable/cr-fc-predict/',
+        {
+          method: 'post',
+          body: JSON.stringify({
+            modelId: 'data_icon',
+            type: 'ic',
+            imageBase64,
+          }),
+        },
+      );
+      let icons = await res.json();
+      icons = icons.map((i: any) => ({ score: i.score, type: i.class_name.replace(/\s/g, '-') }));
+      this.setState(() => ({ icons, loading: false, error: false }));
+    } catch (err) {
+      this.setState(() => ({ loading: false, error: true }));
+    }
+  };
+
+  toggleModal = () => {
+    this.setState(prev => ({
+      modalVisible: !prev.modalVisible,
+      popoverVisible: false,
+      fileList: [],
+      icons: [],
+    }));
+    if (!localStorage.getItem('disableIconTip')) {
+      localStorage.setItem('disableIconTip', 'true');
+    }
+  };
+
+  onCopied = (text: string) => {
+    message.success(
+      <span>
+        <code className="copied-code">{text}</code> copied 🎉
+      </span>,
+    );
+  };
+
+  render() {
+    const {
+      intl: { messages },
+    } = this.props;
+    const { modalVisible, popoverVisible, icons, fileList, loading, error } = this.state;
+    return (
+      <div className="icon-pic-searcher">
+        <Popover
+          content={messages[`app.docs.components.icon.pic-searcher.intro`]}
+          visible={popoverVisible}
+        >
+          <Icon type="camera" className="icon-pic-btn" onClick={this.toggleModal} />
+        </Popover>
+        <Modal
+          title={messages[`app.docs.components.icon.pic-searcher.title`]}
+          visible={modalVisible}
+          onCancel={this.toggleModal}
+          footer={null}
+        >
+          <Dragger
+            accept="image/jpeg, image/png"
+            listType="picture"
+            customRequest={(o: any) => this.uploadFile(o.file)}
+            fileList={fileList}
+            showUploadList={{ showPreviewIcon: false, showRemoveIcon: false }}
+          >
+            <p className="ant-upload-drag-icon">
+              <Icon type="inbox" />
+            </p>
+            <p className="ant-upload-text">
+              {messages['app.docs.components.icon.pic-searcher.upload-text']}
+            </p>
+            <p className="ant-upload-hint">
+              {messages['app.docs.components.icon.pic-searcher.upload-hint']}
+            </p>
+          </Dragger>
+          <Spin spinning={loading} tip={messages['app.docs.components.icon.pic-searcher.matching']}>
+            <div className="icon-pic-search-result">
+              {icons.length > 0 && (
+                <div className="result-tip">
+                  {messages['app.docs.components.icon.pic-searcher.result-tip']}
+                </div>
+              )}
+              <table>
+                {icons.length > 0 && (
+                  <thead>
+                    <tr>
+                      <th className="col-icon">
+                        {messages['app.docs.components.icon.pic-searcher.th-icon']}
+                      </th>
+                      <th>{messages['app.docs.components.icon.pic-searcher.th-score']}</th>
+                    </tr>
+                  </thead>
+                )}
+                <tbody>
+                  {icons.map((icon: iconObject) => (
+                    <tr key={icon.type}>
+                      <td className="col-icon">
+                        <CopyToClipboard
+                          text={`<Icon type="${icon.type}" />`}
+                          onCopy={this.onCopied}
+                        >
+                          <Tooltip title={icon.type} placement="right">
+                            <Icon type={icon.type} />
+                          </Tooltip>
+                        </CopyToClipboard>
+                      </td>
+                      <td>
+                        <Progress percent={Math.ceil(icon.score * 100)} />
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+              {error && (
+                <Result
+                  status="500"
+                  title="503"
+                  subTitle={messages['app.docs.components.icon.pic-searcher.server-error']}
+                />
+              )}
+            </div>
+          </Spin>
+        </Modal>
+      </div>
+    );
+  }
+}
+
+export default injectIntl(PicSearcher);

site/theme/template/IconDisplay/index.tsx

@@ -7,6 +7,7 @@ import { injectIntl } from 'react-intl';
 import debounce from 'lodash/debounce';
 import { ThemeType } from 'antd/es/icon';
 import Category from './Category';
+import IconPicSearcher from './IconPicSearcher';
 import { FilledIcon, OutlinedIcon, TwoToneIcon } from './themeIcons';
 import categories, { Categories, CategoriesKeys } from './fields';
 
@@ -124,6 +125,7 @@ class IconDisplay extends React.Component<IconDisplayProps, IconDisplayState> {
             onChange={e => this.handleSearchIcon(e.currentTarget.value)}
             size="large"
             autoFocus
+            suffix={<IconPicSearcher />}
           />
         </div>
         {this.renderCategories(list)}

site/theme/zh-CN.js

@@ -108,5 +108,15 @@ module.exports = {
     'app.docs.components.icon.category.data': '数据类图标',
     'app.docs.components.icon.category.other': '网站通用图标',
     'app.docs.components.icon.category.logo': '品牌和标识',
+    'app.docs.components.icon.pic-searcher.intro': 'AI 截图搜索上线了，快来体验吧！🎉',
+    'app.docs.components.icon.pic-searcher.title': '上传图片搜索图标',
+    'app.docs.components.icon.pic-searcher.upload-text': '点击/拖拽/粘贴上传图片',
+    'app.docs.components.icon.pic-searcher.upload-hint':
+      '我们会通过上传的图片进行匹配，得到最相似的图标',
+    'app.docs.components.icon.pic-searcher.server-error': '识别服务暂不可用',
+    'app.docs.components.icon.pic-searcher.matching': '匹配中...',
+    'app.docs.components.icon.pic-searcher.result-tip': '为您匹配到以下图标：',
+    'app.docs.components.icon.pic-searcher.th-icon': '图标',
+    'app.docs.components.icon.pic-searcher.th-score': '匹配度',
   },
 };