✨ feat: add ModelScope (#59) (#60)

* ✨ feat: add ModelScope (#59)

Co-authored-by: nil.wyw <[email protected]>

* ✨ feat: Add ModelScope

---------

Co-authored-by: wyw <[email protected]>
Co-authored-by: nil.wyw <[email protected]>

src/ModelScope/components/Avatar.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import { memo } from 'react';
+
+import IconAvatar, { type IconAvatarProps } from '@/features/IconAvatar';
+
+import { COLOR_PRIMARY, TITLE } from '../style';
+import Mono from './Mono';
+
+export type AvatarProps = Omit<IconAvatarProps, 'Icon'>;
+
+const Avatar = memo<AvatarProps>(({ background, ...rest }) => {
+  return (
+    <IconAvatar Icon={Mono} aria-label={TITLE} background={COLOR_PRIMARY || background} {...rest} />
+  );
+});
+
+export default Avatar;

src/ModelScope/components/Color.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { forwardRef } from 'react';
+
+import type { IconType } from '@/types';
+
+import { TITLE } from '../style';
+
+const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => {
+  return (
+    <svg
+      height={size}
+      ref={ref}
+      style={{ flex: 'none', lineHeight: 1, ...style }}
+      viewBox="0 0 24 24"
+      width={size}
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <title>{TITLE}</title>
+      <path d="M0 7.967h2.667v2.667H0zM8 10.633h2.667V13.3H8z" fill="#36CED0" />
+      <path
+        d="M0 10.633h2.667V13.3H0zM2.667 13.3h2.666v2.667H8v2.666H2.667V13.3zM2.667 5.3H8v2.667H5.333v2.666H2.667V5.3zM10.667 13.3h2.667v2.667h-2.667z"
+        fill="#624AFF"
+      />
+      <path d="M24 7.967h-2.667v2.667H24zM16 10.633h-2.667V13.3H16z" fill="#36CED0" />
+      <path
+        d="M24 10.633h-2.667V13.3H24zM21.333 13.3h-2.666v2.667H16v2.666h5.333V13.3zM21.333 5.3H16v2.667h2.667v2.666h2.666V5.3z"
+        fill="#624AFF"
+      />
+    </svg>
+  );
+});
+
+export default Icon;

src/ModelScope/components/Combine.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { memo } from 'react';
+
+import IconCombine, { type IconCombineProps } from '@/features/IconCombine';
+
+import { SPACE_MULTIPLE, TEXT_MULTIPLE, TITLE } from '../style';
+import Color from './Color';
+import Mono from './Mono';
+import Text from './Text';
+
+export interface CombineProps extends Omit<IconCombineProps, 'Icon' | 'Text'> {
+  type?: 'color' | 'mono';
+}
+const Combine = memo<CombineProps>(({ type = 'mono', ...rest }) => {
+  const Icon = type === 'color' ? Color : Mono;
+
+  return (
+    <IconCombine
+      Icon={Icon}
+      Text={Text}
+      aria-label={TITLE}
+      spaceMultiple={SPACE_MULTIPLE}
+      textMultiple={TEXT_MULTIPLE}
+      {...rest}
+    />
+  );
+});
+
+export default Combine;

src/ModelScope/components/Mono.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { forwardRef } from 'react';
+
+import type { IconType } from '@/types';
+
+import { TITLE } from '../style';
+
+const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => {
+  return (
+    <svg
+      fill="currentColor"
+      fillRule="evenodd"
+      height={size}
+      ref={ref}
+      style={{ flex: 'none', lineHeight: 1, ...style }}
+      viewBox="0 0 24 24"
+      width={size}
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <title>{TITLE}</title>
+      <path d="M8 5.3H2.667v2.667H0V13.3h2.667v5.333H8v-2.666H5.333V13.3H2.667v-2.667h2.666V7.967H8V5.3zM8 10.633h2.667V13.3H8v-2.667zM13.333 13.3v2.667h-2.666V13.3h2.666zM13.333 13.3v-2.667H16V13.3h-2.667zM21.333 7.967H24V13.3h-2.667v-2.667h-2.666V7.967H16V5.3h5.333v2.667zM21.333 13.3v5.333H16v-2.666h2.667V13.3h2.666z" />
+    </svg>
+  );
+});
+
+export default Icon;

src/ModelScope/components/Text.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { forwardRef } from 'react';
+
+import type { IconType } from '@/types';
+
+import { TITLE } from '../style';
+
+const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => {
+  return (
+    <svg
+      fill="currentColor"
+      fillRule="evenodd"
+      height={size}
+      ref={ref}
+      style={{ flex: 'none', lineHeight: 1, ...style }}
+      viewBox="0 0 146 24"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <title>{TITLE}</title>
+      <path
+        clipRule="evenodd"
+        d="M28.069 6.654v12.692h11V6.654h-11zm3.808 9.942h3.385V9.404h-3.385v7.192zm60.041-9.942v12.692h10.155v-2.75h-6.345V9.404h6.345v-2.75H91.918zm12.792 0v12.692h11.001V6.654H104.71zm3.808 9.942h3.385V9.404h-3.385v7.192zm10.185-9.942V24h3.808v-4.654h7.193V6.654h-11.001zm3.808 9.942h3.385V9.404h-3.385v7.192zM49.445 6.654h-7.193v12.692h11.001V2h-3.808v4.654zm-3.385 9.942h3.385V9.404H46.06v7.192zm24.913 2.75h3.808V2h-3.808v17.346zM56.531 6.654v12.798h11v-2.856H60.34v-2.115h7.193V6.654H56.53zm3.808 5.077h3.384V9.404H60.34v2.327zm76.313.053h3.385v-2.38h-3.385v2.38zm-3.808-5.13v12.692h11.001v-2.75h-7.193v-2.062h7.193v-7.88h-11.001zM78.047 3.89v8.818h7.194v3.888h-7.194v2.75h11.002V9.958h-7.195V6.64h7.195V3.89H78.047zm-72.239.226v7.615H2v3.808h3.808v3.807h3.808V15.54H5.808V11.73h3.808V7.923h3.805V4.116H5.808zm7.615 11.422h3.808V7.923h-3.808v7.615zm3.81-11.422v3.807h3.808v11.423h3.809V4.116h-7.617z"
+      />
+    </svg>
+  );
+});
+
+export default Icon;

src/ModelScope/index.md

@@ -0,0 +1,73 @@
+---
+nav: Components
+group: Provider
+title: ModelScope (魔搭)
+atomId: ModelScope
+description: https://modelscope.cn
+---
+
+## Icons
+
+```tsx
+import { ModelScope } from '@lobehub/icons';
+import { Flexbox } from 'react-layout-kit';
+
+export default () => (
+  <Flexbox gap={16} horizontal>
+    <ModelScope size={64} />
+    <ModelScope.Color size={64} />
+  </Flexbox>
+);
+```
+
+## Text
+
+```tsx
+import { ModelScope } from '@lobehub/icons';
+
+export default () => <ModelScope.Text size={48} />;
+```
+
+## Combine
+
+```tsx
+import { ModelScope } from '@lobehub/icons';
+import { Flexbox } from 'react-layout-kit';
+
+export default () => (
+  <Flexbox gap={16} align={'flex-start'}>
+    <ModelScope.Combine size={64} />
+    <ModelScope.Combine size={64} type={'color'} />
+  </Flexbox>
+);
+```
+
+## Avatars
+
+```tsx
+import { ModelScope } from '@lobehub/icons';
+import { Flexbox } from 'react-layout-kit';
+
+export default () => (
+  <Flexbox gap={16} horizontal>
+    <ModelScope.Avatar size={64} background={ModelScope.colorPrimary} />
+    <ModelScope.Avatar size={64} />
+    <ModelScope.Avatar size={64} shape={'square'} />
+  </Flexbox>
+);
+```
+
+## Colors
+
+```tsx
+import { ModelScope } from '@lobehub/icons';
+import { Flexbox } from 'react-layout-kit';
+
+import ColorPreview from '../components/ColorPreview';
+
+export default () => (
+  <Flexbox gap={16} horizontal>
+    <ColorPreview color={ModelScope.colorPrimary} />
+  </Flexbox>
+);
+```

src/ModelScope/index.ts

@@ -0,0 +1,28 @@
+'use client';
+
+import Avatar from './components/Avatar';
+import Color from './components/Color';
+import Combine from './components/Combine';
+import Mono from './components/Mono';
+import Text from './components/Text';
+import { COLOR_PRIMARY, TITLE } from './style';
+
+export type CompoundedIcon = typeof Mono & {
+  Avatar: typeof Avatar;
+  Color: typeof Color;
+  Combine: typeof Combine;
+  Text: typeof Text;
+  colorGradient: string;
+  colorPrimary: string;
+  title: string;
+};
+
+const Icons = Mono as CompoundedIcon;
+Icons.Color = Color;
+Icons.Text = Text;
+Icons.Combine = Combine;
+Icons.Avatar = Avatar;
+Icons.colorPrimary = COLOR_PRIMARY;
+Icons.title = TITLE;
+
+export default Icons;

src/ModelScope/style.ts

@@ -0,0 +1,4 @@
+export const TITLE = 'ModelScope';
+export const TEXT_MULTIPLE = 0.6;
+export const SPACE_MULTIPLE = 0.2;
+export const COLOR_PRIMARY = '#624AFF';

src/features/providerConfig.tsx

@@ -28,6 +28,7 @@ import LmStudio from '@/LmStudio';
 import LobeHub from '@/LobeHub';
 import Minimax from '@/Minimax';
 import Mistral from '@/Mistral';
+import ModelScope from '@/ModelScope';
 import Moonshot from '@/Moonshot';
 import Novita from '@/Novita';
 import Ollama from '@/Ollama';
@@ -187,4 +188,5 @@ export const providerMappings: ProviderMapping[] = [
   { Icon: InternLM, combineMultiple: 0.95, keywords: [ModelProvider.InternLM] },
   { Icon: Higress, keywords: [ModelProvider.Higress] },
   { Icon: GiteeAI, combineMultiple: 0.95, keywords: [ModelProvider.GiteeAI] },
+  { Icon: ModelScope, combineMultiple: 0.95, keywords: [ModelProvider.ModelScope] },
 ];

src/features/providerEnum.ts

@@ -21,6 +21,7 @@ export enum ModelProvider {
   LobeHub = 'lobehub',
   Minimax = 'minimax',
   Mistral = 'mistral',
+  ModelScope = 'modelscope',
   Moonshot = 'moonshot',
   Novita = 'novita',
   Ollama = 'ollama',

src/icons.ts

@@ -71,6 +71,7 @@ export { default as Meta, type CompoundedIcon as MetaProps } from './Meta';
 export { default as Midjourney, type CompoundedIcon as MidjourneyProps } from './Midjourney';
 export { default as Minimax, type CompoundedIcon as MinimaxProps } from './Minimax';
 export { default as Mistral, type CompoundedIcon as MistralProps } from './Mistral';
+export { default as ModelScope, type CompoundedIcon as ModelScopeProps } from './ModelScope';
 export { default as Moonshot, type CompoundedIcon as MoonshotProps } from './Moonshot';
 export { default as MyShell, type CompoundedIcon as MyShellProps } from './MyShell';
 export { default as Notion, type CompoundedIcon as NotionProps } from './Notion';

src/toc.ts

@@ -1371,6 +1371,25 @@ const toc: IconToc[] = [
     },
     title: 'Mistral',
   },
+  {
+    color: '#624AFF',
+    desc: 'https://modelscope.cn',
+    docsUrl: 'model-scope',
+    fullTitle: 'ModelScope (魔搭)',
+    group: 'provider',
+    id: 'ModelScope',
+    param: {
+      hasAvatar: true,
+      hasBrand: false,
+      hasBrandColor: false,
+      hasColor: true,
+      hasCombine: true,
+      hasText: true,
+      hasTextCn: false,
+      hasTextColor: false,
+    },
+    title: 'ModelScope',
+  },
   {
     color: '#16191E',
     desc: 'https://moonshot.cn',