feat: add background image to login page and alter tooltip of base_url and add llm type to Added models List (#173)

* feat: add llm type to Added models List

* feat: alter tooltip of base_url

* feat: add background image to login page

web/src/assets/svg/login-star.svg

@@ -0,0 +1,11 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M0 40C25.4247 40 40 25.4247 40 0C40 25.4247 54.5753 40 80 40C54.5753 40 40 54.5753 40 80C40 54.5753 25.4247 40 0 40Z"
+        fill="white" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M0 12C7.62742 12 12 7.62742 12 0C12 7.62742 16.3726 12 24 12C16.3726 12 12 16.3726 12 24C12 16.3726 7.62742 12 0 12Z"
+        fill="#FEC84B" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M64 24C69.0849 24 72 21.0849 72 16C72 21.0849 74.9151 24 80 24C74.9151 24 72 26.9151 72 32C72 26.9151 69.0849 24 64 24Z"
+        fill="#FEC84B" />
+</svg>

web/src/global.less

@@ -2,4 +2,5 @@
 
 body {
   font-family: Inter;
+  margin: 0;
 }

web/src/pages/login/index.less

@@ -1,32 +1,77 @@
 @import '../../theme/vars';
 
 .loginPage {
-  // width: 100%;
   display: flex;
-
   .loginLeft {
     // width: 610px;
     width: 40%;
     background-color: #fff;
     height: 100vh;
+    display: flex;
+    align-items: center;
   }
 
-  @media screen and (max-width: 957px) {
-    .loginLeft {
-      // width: 610px;
-      width: 100%;
-      background-color: #fff;
-      height: 100vh;
-    }
-
-    .modal {
-      width: 80%;
-    }
+  .leftContainer {
+    width: 60%;
+    padding: 5px, 0px, 5px, 0px;
+    margin: 0 auto;
   }
 
   .loginRight {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     flex: 1;
-    background-color: #f2f4f7;
+    position: relative;
+    &::before {
+      content: ' ';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background-color: rgba(24, 73, 169, 0.6);
+      background-image: url('@/assets/svg/login-background.svg');
+      background-size: cover;
+      background-blend-mode: multiply;
+      filter: blur(3px);
+      background-position: center;
+      z-index: -1;
+    }
+    .white {
+      color: #fff;
+    }
+    .pink {
+      color: #e9d7fe;
+    }
+    .rightPanel {
+      max-width: 640px;
+      .loginTitle {
+        font-size: 72px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 90px;
+        letter-spacing: -1.44px;
+      }
+      .loginDescription {
+        font-size: 20px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 30px;
+      }
+      .loginRateNumber {
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 24px;
+      }
+      .loginRateReviews {
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 24px;
+      }
+    }
   }
 
   .loginTitle {
@@ -46,12 +91,16 @@
       color: #000000a6;
     }
   }
-}
 
-.modal {
-  // width: 360px;
-  width: 60%;
-  height: 724px;
-  padding: 5px, 0px, 5px, 0px;
-  margin: 80px auto;
+  @media screen and (max-width: 957px) {
+    .loginLeft {
+      width: 100%;
+      background-color: #fff;
+      height: 100%;
+    }
+
+    .modal {
+      width: 80%;
+    }
+  }
 }

web/src/pages/login/index.tsx

@@ -2,6 +2,8 @@ import { rsaPsw } from '@/utils';
 import { Button, Checkbox, Form, Input } from 'antd';
 import { useEffect, useState } from 'react';
 import { Icon, useDispatch, useNavigate, useSelector } from 'umi';
+import RightPanel from './right-panel';
+
 import styles from './index.less';
 
 const Login = () => {
@@ -73,7 +75,7 @@ const Login = () => {
   return (
     <div className={styles.loginPage}>
       <div className={styles.loginLeft}>
-        <div className={styles.modal}>
+        <div className={styles.leftContainer}>
           <div className={styles.loginTitle}>
             <div>{title === 'login' ? 'Sign in' : 'Create an account'}</div>
             <span>
@@ -189,7 +191,9 @@ const Login = () => {
           </Form>
         </div>
       </div>
-      <div className={styles.loginRight}></div>
+      <div className={styles.loginRight}>
+        <RightPanel></RightPanel>
+      </div>
     </div>
   );
 };

web/src/pages/login/right-panel.tsx

@@ -0,0 +1,46 @@
+import { ReactComponent as Avatars } from '@/assets/svg/login-avatars.svg';
+import SvgIcon from '@/components/svg-icon';
+import { Flex, Rate, Space, Typography } from 'antd';
+import classNames from 'classnames';
+
+import styles from './index.less';
+
+const { Title, Text } = Typography;
+
+const LoginRightPanel = () => {
+  return (
+    <section className={styles.rightPanel}>
+      <SvgIcon name="login-star" width={80}></SvgIcon>
+      <Flex vertical gap={40}>
+        <Title
+          level={1}
+          className={classNames(styles.white, styles.loginTitle)}
+        >
+          Start building your smart assisstants.
+        </Title>
+        <Text className={classNames(styles.pink, styles.loginDescription)}>
+          Sign up for free to explore top RAG technology. Create knowledge bases
+          and AIs to empower your business.
+        </Text>
+        <Flex align="center" gap={16}>
+          <Avatars></Avatars>
+          <Flex vertical>
+            <Space>
+              <Rate disabled defaultValue={5} />
+              <span
+                className={classNames(styles.white, styles.loginRateNumber)}
+              >
+                5.0
+              </span>
+            </Space>
+            <span className={classNames(styles.pink, styles.loginRateReviews)}>
+              from 500+ reviews
+            </span>
+          </Flex>
+        </Flex>
+      </Flex>
+    </section>
+  );
+};
+
+export default LoginRightPanel;

web/src/pages/user-setting/setting-model/api-key-modal/index.tsx

@@ -78,10 +78,9 @@ const ApiKeyModal = ({
           <Form.Item<FieldType>
             label="Base-Url"
             name="base_url"
-            tooltip="The API key can be obtained by registering the corresponding LLM supplier."
-            rules={[{ required: true, message: 'Please input base url!' }]}
+            tooltip="If your API key is from OpenAI, just ignore it. Any other intermediate providers will give this base url with the API key."
           >
-            <Input />
+            <Input placeholder="https://api.openai.com/v1" />
           </Form.Item>
         )}
       </Form>

web/src/pages/user-setting/setting-model/index.tsx

@@ -24,6 +24,7 @@ import {
   Row,
   Space,
   Spin,
+  Tag,
   Typography,
 } from 'antd';
 import { useCallback } from 'react';
@@ -105,7 +106,13 @@ const ModelCard = ({ item, clickApiKey }: IModelCardProps) => {
             size="small"
             dataSource={item.llm}
             className={styles.llmList}
-            renderItem={(item) => <List.Item>{item.name}</List.Item>}
+            renderItem={(item) => (
+              <List.Item>
+                <Space>
+                  {item.name} <Tag color="#b8b8b8">{item.type}</Tag>
+                </Space>
+              </List.Item>
+            )}
           />
         )}
       </Card>