-
Notifications
You must be signed in to change notification settings - Fork 20
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(frontend): add opendatalab links
- Loading branch information
Showing
9 changed files
with
286 additions
and
14 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,111 @@ | ||
| .panel { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| width: 40rem; | ||
| min-height: 10rem; | ||
| } | ||
|
|
||
| .title { | ||
| font-size: 20px; | ||
| font-weight: 600; | ||
| margin: 0.5rem 0 0.5rem 1rem; | ||
| } | ||
|
|
||
| .appWrapper { | ||
| flex-basis: 50%; | ||
| border-radius: 0.25rem; | ||
| transition: all 0.2s ease-in-out; | ||
| overflow: hidden; | ||
|
|
||
| &:hover { | ||
| background-color: rgba(244, 245, 249, 1); | ||
|
|
||
| .links { | ||
| opacity: 1; | ||
| } | ||
|
|
||
| .appContainer { | ||
| animation: wrapperSlideIn 0.2s ease-in-out forwards; | ||
| } | ||
| } | ||
|
|
||
| &:not(:hover) { | ||
| .links { | ||
| opacity: 0; | ||
| } | ||
|
|
||
| .appContainer { | ||
| animation: wrapperSlideOut 0.2s ease-in-out forwards; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .appContainer { | ||
| display: flex; | ||
| padding: 0 1rem 1rem; | ||
| flex-direction: column; | ||
| align-items: start; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| .avatar { | ||
| flex-shrink: 0; | ||
| } | ||
|
|
||
| .header { | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 0.5rem; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .description { | ||
| color: var(--color-text-tertiary); | ||
| font-size: 0.75rem; | ||
| } | ||
|
|
||
| .links { | ||
| display: flex; | ||
| gap: 1rem; | ||
| padding: 0.5rem 0; | ||
| align-items: center; | ||
| opacity: 0; | ||
| transition: all 0.2s ease-in-out; | ||
| } | ||
|
|
||
| .link { | ||
| display: flex; | ||
| justify-items: center; | ||
| gap: 0.25rem; | ||
| color: var(--color-text); | ||
|
|
||
| &:hover { | ||
| color: var(--color-primary); | ||
|
|
||
| .arrow { | ||
| transform: translateX(0.25rem); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .arrow { | ||
| transition: transform 0.2s ease-in-out; | ||
| } | ||
|
|
||
| @keyframes wrapperSlideIn { | ||
| from { | ||
| transform: translateY(28px); | ||
| } | ||
| to { | ||
| transform: translateY(12px); | ||
| } | ||
| } | ||
|
|
||
| @keyframes wrapperSlideOut { | ||
| from { | ||
| transform: translateY(12px); | ||
| } | ||
| to { | ||
| transform: translateY(28px); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| import { ArrowRightOutlined } from '@ant-design/icons'; | ||
| import { Avatar } from 'antd'; | ||
| import _ from 'lodash'; | ||
|
|
||
| import { ReactComponent as LabelLLM } from '@/assets/svg/labelllm.svg'; | ||
| import { ReactComponent as MinerU } from '@/assets/svg/mineru.svg'; | ||
| import { ReactComponent as OpenDataLab } from '@/assets/svg/opendatalab.svg'; | ||
|
|
||
| import styles from './index.module.css'; | ||
|
|
||
| interface AppLink { | ||
| name: string; | ||
| title: string; | ||
| links: { | ||
| name: string; | ||
| link: string; | ||
| }[]; | ||
| icon: JSX.Element; | ||
| description: string; | ||
| } | ||
|
|
||
| const apps = [ | ||
| { | ||
| name: 'OpenDataLab', | ||
| links: [{ name: '立即前往', link: 'https://opendatalab.com' }], | ||
| icon: <OpenDataLab />, | ||
| description: '一个引领 AI 大模型时代的开放数据平台，提供了海量的、多模态的优质数据集，助力 AI 开发落地', | ||
| }, | ||
| { | ||
| name: 'LabelLLM', | ||
| links: [ | ||
| { | ||
| name: 'Github', | ||
| link: 'https://github.com/opendatalab/LabelLLM?tab=readme-ov-file#labelllm-the-open-source-data-annotation-platform', | ||
| }, | ||
| ], | ||
| icon: <LabelLLM />, | ||
| description: '专业致力于 LLM 对话标注，通过灵活的工具配置与多种数据模态的广泛兼容，为大模型打造高质量数据', | ||
| }, | ||
| { | ||
| name: 'MinerU', | ||
| links: [ | ||
| { name: 'Github', link: 'https://github.com/opendatalab/MinerU' }, | ||
| { name: '在线体验', link: 'https://opendatalab.com/OpenSourceTools/Extractor/PDF' }, | ||
| ], | ||
| icon: <MinerU />, | ||
| description: '一站式开源高质量数据提取工具，支持多格式（PDF/网页/电子书），智能萃取，生成高质量语料', | ||
| }, | ||
| ]; | ||
|
|
||
| export default function AppPanel() { | ||
| const handleGoApp = (app: AppLink) => { | ||
| window.open(app.links[0].link, '_blank'); | ||
| }; | ||
|
|
||
| return ( | ||
| <div> | ||
| <div className={styles.title}>欢迎使用 OpenDataLab 开源工具 🎉</div> | ||
| <div className={styles.panel}> | ||
| {_.map(apps, (app) => { | ||
| return ( | ||
| <div key={app.name} className={styles.appWrapper}> | ||
| <div className={styles.appContainer}> | ||
| <div className={styles.header} onClick={() => handleGoApp(app)}> | ||
| <Avatar shape="square" className={styles.avatar} src={app.icon} /> | ||
| <div className={styles.appInfo}> | ||
| {app.name} | ||
| <div className={styles.description}>{app.description}</div> | ||
| </div> | ||
| </div> | ||
| <div className={styles.links}> | ||
| {_.map(app.links, (link) => { | ||
| return ( | ||
| <a href={link.link} key={link.name} target="_blank" rel="noreferrer" className={styles.link}> | ||
| {link.name} | ||
| <ArrowRightOutlined className={styles.arrow} /> | ||
| </a> | ||
| ); | ||
| })} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| })} | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters