afc163
2 years ago
committed by
GitHub
GitHub
4 changed files with 0 additions and 261 deletions
@ -1,239 +0,0 @@ |
|||
import React, { useCallback, useEffect, useState } from 'react'; |
|||
import { Upload, Tooltip, Popover, Modal, Progress, message, Spin, Result } from 'antd'; |
|||
import CopyToClipboard from 'react-copy-to-clipboard'; |
|||
import { useIntl } from 'dumi'; |
|||
import * as AntdIcons from '@ant-design/icons'; |
|||
|
|||
const allIcons: { [key: string]: any } = AntdIcons; |
|||
|
|||
const { Dragger } = Upload; |
|||
interface AntdIconClassifier { |
|||
load: Function; |
|||
predict: Function; |
|||
} |
|||
declare global { |
|||
interface Window { |
|||
antdIconClassifier: AntdIconClassifier; |
|||
} |
|||
} |
|||
|
|||
interface PicSearcherState { |
|||
loading: boolean; |
|||
modalOpen: boolean; |
|||
popoverVisible: boolean; |
|||
icons: iconObject[]; |
|||
fileList: any[]; |
|||
error: boolean; |
|||
modelLoaded: boolean; |
|||
} |
|||
|
|||
interface iconObject { |
|||
type: string; |
|||
score: number; |
|||
} |
|||
|
|||
const PicSearcher: React.FC = () => { |
|||
const intl = useIntl(); |
|||
const [state, setState] = useState<PicSearcherState>({ |
|||
loading: false, |
|||
modalOpen: false, |
|||
popoverVisible: false, |
|||
icons: [], |
|||
fileList: [], |
|||
error: false, |
|||
modelLoaded: false, |
|||
}); |
|||
const predict = (imgEl: HTMLImageElement) => { |
|||
try { |
|||
let icons: any[] = window.antdIconClassifier.predict(imgEl); |
|||
if (gtag && icons.length) { |
|||
gtag('event', 'icon', { |
|||
event_category: 'search-by-image', |
|||
event_label: icons[0].className, |
|||
}); |
|||
} |
|||
icons = icons.map((i) => ({ score: i.score, type: i.className.replace(/\s/g, '-') })); |
|||
setState((prev) => ({ ...prev, loading: false, error: false, icons })); |
|||
} catch { |
|||
setState((prev) => ({ ...prev, loading: false, error: true })); |
|||
} |
|||
}; |
|||
// eslint-disable-next-line class-methods-use-this
|
|||
const toImage = (url: string): Promise<HTMLImageElement> => |
|||
new Promise((resolve) => { |
|||
const img = new Image(); |
|||
img.setAttribute('crossOrigin', 'anonymous'); |
|||
img.src = url; |
|||
img.onload = () => { |
|||
resolve(img); |
|||
}; |
|||
}); |
|||
|
|||
const uploadFile = useCallback((file: File) => { |
|||
setState((prev) => ({ ...prev, loading: true })); |
|||
const reader = new FileReader(); |
|||
reader.onload = () => { |
|||
toImage(reader.result as string).then(predict); |
|||
setState((prev) => ({ |
|||
...prev, |
|||
fileList: [{ uid: 1, name: file.name, status: 'done', url: reader.result }], |
|||
})); |
|||
}; |
|||
reader.readAsDataURL(file); |
|||
}, []); |
|||
|
|||
const onPaste = useCallback((event: ClipboardEvent) => { |
|||
const items = event.clipboardData && event.clipboardData.items; |
|||
let file = null; |
|||
if (items && items.length) { |
|||
for (let i = 0; i < items.length; i++) { |
|||
if (items[i].type.includes('image')) { |
|||
file = items[i].getAsFile(); |
|||
break; |
|||
} |
|||
} |
|||
} |
|||
if (file) { |
|||
uploadFile(file); |
|||
} |
|||
}, []); |
|||
const toggleModal = useCallback(() => { |
|||
setState((prev) => ({ |
|||
...prev, |
|||
modalOpen: !prev.modalOpen, |
|||
popoverVisible: false, |
|||
fileList: [], |
|||
icons: [], |
|||
})); |
|||
if (!localStorage.getItem('disableIconTip')) { |
|||
localStorage.setItem('disableIconTip', 'true'); |
|||
} |
|||
}, []); |
|||
// eslint-disable-next-line class-methods-use-this
|
|||
const onCopied = useCallback((text: string) => { |
|||
message.success( |
|||
<span> |
|||
<code className="copied-code">{text}</code> copied 🎉 |
|||
</span>, |
|||
); |
|||
}, []); |
|||
useEffect(() => { |
|||
const script = document.createElement('script'); |
|||
script.onload = async () => { |
|||
await window.antdIconClassifier.load(); |
|||
setState((prev) => ({ ...prev, modelLoaded: true })); |
|||
document.addEventListener('paste', onPaste); |
|||
}; |
|||
script.src = 'https://cdn.jsdelivr.net/gh/lewis617/antd-icon-classifier@0.0/dist/main.js'; |
|||
document.head.appendChild(script); |
|||
setState((prev) => ({ ...prev, popoverVisible: !localStorage.getItem('disableIconTip') })); |
|||
return () => { |
|||
document.removeEventListener('paste', onPaste); |
|||
}; |
|||
}, []); |
|||
|
|||
return ( |
|||
<div className="icon-pic-searcher"> |
|||
<Popover |
|||
content={intl.formatMessage({ id: `app.docs.components.icon.pic-searcher.intro` })} |
|||
open={state.popoverVisible} |
|||
> |
|||
<AntdIcons.CameraOutlined className="icon-pic-btn" onClick={toggleModal} /> |
|||
</Popover> |
|||
<Modal |
|||
title={intl.formatMessage({ id: `app.docs.components.icon.pic-searcher.title` })} |
|||
open={state.modalOpen} |
|||
onCancel={toggleModal} |
|||
footer={null} |
|||
> |
|||
{state.modelLoaded || ( |
|||
<Spin |
|||
spinning={!state.modelLoaded} |
|||
tip={intl.formatMessage({ id: 'app.docs.components.icon.pic-searcher.modelloading' })} |
|||
> |
|||
<div style={{ height: 100 }} /> |
|||
</Spin> |
|||
)} |
|||
{state.modelLoaded && ( |
|||
<Dragger |
|||
accept="image/jpeg, image/png" |
|||
listType="picture" |
|||
customRequest={(o) => uploadFile(o.file as File)} |
|||
fileList={state.fileList} |
|||
showUploadList={{ showPreviewIcon: false, showRemoveIcon: false }} |
|||
> |
|||
<p className="ant-upload-drag-icon"> |
|||
<AntdIcons.InboxOutlined /> |
|||
</p> |
|||
<p className="ant-upload-text"> |
|||
{intl.formatMessage({ id: 'app.docs.components.icon.pic-searcher.upload-text' })} |
|||
</p> |
|||
<p className="ant-upload-hint"> |
|||
{intl.formatMessage({ id: 'app.docs.components.icon.pic-searcher.upload-hint' })} |
|||
</p> |
|||
</Dragger> |
|||
)} |
|||
<Spin |
|||
spinning={state.loading} |
|||
tip={intl.formatMessage({ id: 'app.docs.components.icon.pic-searcher.matching' })} |
|||
> |
|||
<div className="icon-pic-search-result"> |
|||
{state.icons.length > 0 && ( |
|||
<div className="result-tip"> |
|||
{intl.formatMessage({ id: 'app.docs.components.icon.pic-searcher.result-tip' })} |
|||
</div> |
|||
)} |
|||
<table> |
|||
{state.icons.length > 0 && ( |
|||
<thead> |
|||
<tr> |
|||
<th className="col-icon"> |
|||
{intl.formatMessage({ id: 'app.docs.components.icon.pic-searcher.th-icon' })} |
|||
</th> |
|||
<th> |
|||
{intl.formatMessage({ id: 'app.docs.components.icon.pic-searcher.th-score' })} |
|||
</th> |
|||
</tr> |
|||
</thead> |
|||
)} |
|||
<tbody> |
|||
{state.icons.map((icon) => { |
|||
const { type } = icon; |
|||
const iconName = `${type |
|||
.split('-') |
|||
.map((str) => `${str[0].toUpperCase()}${str.slice(1)}`) |
|||
.join('')}Outlined`;
|
|||
return ( |
|||
<tr key={iconName}> |
|||
<td className="col-icon"> |
|||
<CopyToClipboard text={`<${iconName} />`} onCopy={onCopied}> |
|||
<Tooltip title={icon.type} placement="right"> |
|||
{React.createElement(allIcons[iconName])} |
|||
</Tooltip> |
|||
</CopyToClipboard> |
|||
</td> |
|||
<td> |
|||
<Progress percent={Math.ceil(icon.score * 100)} /> |
|||
</td> |
|||
</tr> |
|||
); |
|||
})} |
|||
</tbody> |
|||
</table> |
|||
{state.error && ( |
|||
<Result |
|||
status="500" |
|||
title="503" |
|||
subTitle={intl.formatMessage({ |
|||
id: 'app.docs.components.icon.pic-searcher.server-error', |
|||
})} |
|||
/> |
|||
)} |
|||
</div> |
|||
</Spin> |
|||
</Modal> |
|||
</div> |
|||
); |
|||
}; |
|||
|
|||
export default PicSearcher; |
|||
Loading…
Reference in new issue