add: temporally import AI model images from

lablup · Dec 23, 2024 · 362a489 · 362a489
1 parent 23bc698
commit 362a489
Show file tree

Hide file tree

Showing 22 changed files with 62 additions and 50 deletions.
diff --git a/react/src/pages/ModelStoreListPage.tsx b/react/src/pages/ModelStoreListPage.tsx
@@ -202,7 +202,7 @@ const ModelStoreListPage: React.FC = () => {
       </Flex>
       <List
         className={styles.cardList}
-        grid={{ gutter: 16, xs: 1, sm: 2, md: 2, lg: 3, xl: 4, xxl: 5 }}
+        grid={{ gutter: 16, column: 2 }}
         dataSource={model_cards?.edges
           ?.map((edge) => edge?.node)
           .filter((info) => {
@@ -262,57 +262,69 @@ const ModelStoreListPage: React.FC = () => {
               style={{
                 height: '100%',
               }}
-              size="small"
-            >
-              <Flex direction="row" wrap="wrap" gap={'xs'}>
-                {item?.description && (
-                  <Typography.Paragraph
-                    ellipsis={{ rows: 3, expandable: false }}
-                  >
-                    <TextHighlighter keyword={search}>
-                      {item?.description}
-                    </TextHighlighter>
-                  </Typography.Paragraph>
-                )}
-                {item?.category && (
-                  <Tag bordered={false}>
-                    <TextHighlighter keyword={search}>
-                      {item?.category}
-                    </TextHighlighter>
-                  </Tag>
-                )}
-                {item?.task && (
-                  <Tag bordered={false} color="success">
-                    <TextHighlighter keyword={search}>
-                      {item?.task}
-                    </TextHighlighter>
-                  </Tag>
-                )}
-                {item?.label &&
-                  _.map(item?.label, (label) => (
-                    <Tag key={label} bordered={false} color="blue">
+              children={
+                <Flex direction="column" align="stretch" gap="xs">
+                  <Flex direction="row" align="start" gap="xs">
+                    <img
+                      alt="example"
+                      src={`/resources/images/model-player/${_.replace(item?.name as string, ' ', '-')}.jpeg`}
+                      style={{
+                        marginRight: token.marginXS,
+                        width: 200,
+                        height: 200,
+                      }}
+                    />
+                    <Typography.Paragraph
+                      ellipsis={{ rows: 3, expandable: false }}
+                      style={{ flex: 1 }}
+                    >
                       <TextHighlighter keyword={search}>
-                        {label}
+                        {item?.description}
                       </TextHighlighter>
-                    </Tag>
-                  ))}
-                {item?.error_msg && (
-                  <Alert
-                    style={{ width: '100%' }}
-                    message={
-                      <Typography.Paragraph
-                        ellipsis={{ rows: 6 }}
-                        style={{ marginBottom: 0 }}
-                      >
-                        {item.error_msg}
-                      </Typography.Paragraph>
-                    }
-                    type="error"
-                    showIcon
-                  />
-                )}
-              </Flex>
-            </Card>
+                    </Typography.Paragraph>
+                  </Flex>
+                  <Flex direction="row" wrap="wrap" gap={'xs'}>
+                    {item?.category && (
+                      <Tag bordered={false}>
+                        <TextHighlighter keyword={search}>
+                          {item?.category}
+                        </TextHighlighter>
+                      </Tag>
+                    )}
+                    {item?.task && (
+                      <Tag bordered={false} color="success">
+                        <TextHighlighter keyword={search}>
+                          {item?.task}
+                        </TextHighlighter>
+                      </Tag>
+                    )}
+                    {item?.label &&
+                      _.map(item?.label, (label) => (
+                        <Tag key={label} bordered={false} color="blue">
+                          <TextHighlighter keyword={search}>
+                            {label}
+                          </TextHighlighter>
+                        </Tag>
+                      ))}
+                    {item?.error_msg && (
+                      <Alert
+                        style={{ width: '100%' }}
+                        message={
+                          <Typography.Paragraph
+                            ellipsis={{ rows: 6 }}
+                            style={{ marginBottom: 0 }}
+                          >
+                            {item.error_msg}
+                          </Typography.Paragraph>
+                        }
+                        type="error"
+                        showIcon
+                      />
+                    )}
+                  </Flex>
+                </Flex>
+              }
+            ></Card>
           </List.Item>
         )}
       />

diff --git a/resources/images/model-player/Llama-2-13b-chat-hf.jpeg b/resources/images/model-player/Llama-2-13b-chat-hf.jpeg
diff --git a/resources/images/model-player/Meta-Llama-3-8B-Instruct.jpeg b/resources/images/model-player/Meta-Llama-3-8B-Instruct.jpeg
diff --git a/resources/images/model-player/Mistral-7B-Instruct-v0.1.jpeg b/resources/images/model-player/Mistral-7B-Instruct-v0.1.jpeg
diff --git a/resources/images/model-player/Mixtral-8x7B-Instruct-v0.1.jpeg b/resources/images/model-player/Mixtral-8x7B-Instruct-v0.1.jpeg
diff --git a/resources/images/model-player/Qwen2-7B-Instruct.jpeg b/resources/images/model-player/Qwen2-7B-Instruct.jpeg
diff --git a/resources/images/model-player/Yi-1.5-9B-Chat.jpeg b/resources/images/model-player/Yi-1.5-9B-Chat.jpeg
diff --git a/resources/images/model-player/bert-large-cased.jpeg b/resources/images/model-player/bert-large-cased.jpeg
diff --git a/resources/images/model-player/calm3-22b-chat.jpeg b/resources/images/model-player/calm3-22b-chat.jpeg
diff --git a/resources/images/model-player/clip-vit-large-patch14.jpeg b/resources/images/model-player/clip-vit-large-patch14.jpeg
diff --git a/resources/images/model-player/efficientnet-b0.jpeg b/resources/images/model-player/efficientnet-b0.jpeg
diff --git a/resources/images/model-player/falcon-7b-instruct.jpeg b/resources/images/model-player/falcon-7b-instruct.jpeg
diff --git a/resources/images/model-player/flan-t5-xxl.jpeg b/resources/images/model-player/flan-t5-xxl.jpeg
diff --git a/resources/images/model-player/gemma-1.1-2b-it.jpeg b/resources/images/model-player/gemma-1.1-2b-it.jpeg
diff --git a/resources/images/model-player/gemma-2-27b-it.jpeg b/resources/images/model-player/gemma-2-27b-it.jpeg
diff --git a/resources/images/model-player/llama-3.1-8b-it.jpeg b/resources/images/model-player/llama-3.1-8b-it.jpeg
diff --git a/resources/images/model-player/sdxl-turbo.jpeg b/resources/images/model-player/sdxl-turbo.jpeg
diff --git a/resources/images/model-player/stable-diffusion-2.jpeg b/resources/images/model-player/stable-diffusion-2.jpeg
diff --git a/resources/images/model-player/stable-diffusion-3-medium.jpeg b/resources/images/model-player/stable-diffusion-3-medium.jpeg
diff --git a/resources/images/model-player/stable-diffusion-v1-5.jpeg b/resources/images/model-player/stable-diffusion-v1-5.jpeg
diff --git a/resources/images/model-player/talkativot-UI.jpeg b/resources/images/model-player/talkativot-UI.jpeg
diff --git a/resources/images/model-player/whisper-large-v3.jpeg b/resources/images/model-player/whisper-large-v3.jpeg