From 546bb2fe126a93ee2c90eabfd8dff65f673a7184 Mon Sep 17 00:00:00 2001
From: agatha197 <kimsujin@lablup.com>
Date: Thu, 29 Aug 2024 15:39:56 +0900
Subject: [PATCH] feat: publishing

---
 react/src/App.tsx                           |   2 +
 react/src/components/BAIStartBasicCard.tsx  | 127 +++++++++++++++++
 react/src/components/BAIStartSimpleCard.tsx | 111 +++++++++++++++
 react/src/pages/StartPage.tsx               | 142 ++++++++++++++++++++
 resources/icons/URLStart.svg                |   4 +
 resources/icons/batchSession.svg            |   4 +
 resources/icons/exampleStart.svg            |   6 +
 resources/icons/interactiveSession.svg      |   4 +
 resources/icons/modelService.svg            |   3 +
 resources/icons/session.svg                 |   3 +
 resources/theme.json                        |   9 +-
 src/components/backend-ai-webui.ts          |   4 +-
 12 files changed, 413 insertions(+), 6 deletions(-)
 create mode 100644 react/src/components/BAIStartBasicCard.tsx
 create mode 100644 react/src/components/BAIStartSimpleCard.tsx
 create mode 100644 react/src/pages/StartPage.tsx
 create mode 100644 resources/icons/URLStart.svg
 create mode 100644 resources/icons/batchSession.svg
 create mode 100644 resources/icons/exampleStart.svg
 create mode 100644 resources/icons/interactiveSession.svg
 create mode 100644 resources/icons/modelService.svg
 create mode 100644 resources/icons/session.svg

diff --git a/react/src/App.tsx b/react/src/App.tsx
index 2eb8e37f05..f5c273b721 100644
--- a/react/src/App.tsx
+++ b/react/src/App.tsx
@@ -29,6 +29,7 @@ const EndpointDetailPage = React.lazy(
   () => import('./pages/EndpointDetailPage'),
 );
 // const SummaryPage = React.lazy(() => import('./pages/SummaryPage'));
+const StartPage = React.lazy(() => import('./pages/StartPage'));
 const EnvironmentPage = React.lazy(() => import('./pages/EnvironmentPage'));
 const MyEnvironmentPage = React.lazy(() => import('./pages/MyEnvironmentPage'));
 const StorageHostSettingPage = React.lazy(
@@ -134,6 +135,7 @@ const router = createBrowserRouter([
                 closable
               />
               {/* <SummaryPage /> */}
+              <StartPage />
             </>
           );
         },
diff --git a/react/src/components/BAIStartBasicCard.tsx b/react/src/components/BAIStartBasicCard.tsx
new file mode 100644
index 0000000000..7bc3c5b932
--- /dev/null
+++ b/react/src/components/BAIStartBasicCard.tsx
@@ -0,0 +1,127 @@
+import Flex from './Flex';
+import {
+  Button,
+  ButtonProps,
+  Card,
+  CardProps,
+  ConfigProvider,
+  Divider,
+  theme,
+  Typography,
+} from 'antd';
+
+export interface BAIStartBasicCardProps extends CardProps {
+  icon: React.ReactNode;
+  title: React.ReactNode;
+  footerButtonProps: ButtonProps;
+  description?: string;
+  secondary?: Boolean;
+}
+
+const BAIStartBasicCard: React.FC<BAIStartBasicCardProps> = ({
+  icon,
+  title,
+  footerButtonProps,
+  description,
+  secondary,
+  ...cardProps
+}) => {
+  const { token } = theme.useToken();
+
+  return (
+    <ConfigProvider
+      theme={{
+        components: {
+          Button: {
+            defaultBorderColor: 'none',
+            defaultColor: secondary ? '#E8FAF6' : '#FFF6E8',
+            defaultBg: secondary ? '#00BD9B' : token.colorPrimary,
+            defaultHoverColor: secondary ? '#00BD9B' : token.colorPrimary,
+            defaultHoverBorderColor: secondary ? '#00BD9B' : token.colorPrimary,
+          },
+        },
+      }}
+    >
+      <Card
+        {...cardProps}
+        styles={{
+          body: {
+            paddingTop: token.paddingSM,
+            paddingBottom: token.paddingSM,
+            paddingLeft: token.paddingMD,
+            paddingRight: token.paddingMD,
+            width: 210,
+            height: 308,
+          },
+        }}
+      >
+        <Flex
+          direction="column"
+          justify="between"
+          align="stretch"
+          style={{ height: '100%' }}
+        >
+          <Flex
+            align="center"
+            direction="column"
+            gap={16}
+            style={{
+              minHeight: 202,
+            }}
+          >
+            <Flex
+              align="center"
+              justify="center"
+              style={{
+                width: 50,
+                height: 50,
+                padding: 0,
+                border: 0,
+                color: secondary ? '#00BD9B' : '#FF7A00',
+                background: secondary ? '#E8FAF6' : '#FFF6E8',
+                fontSize: token.sizeLG,
+                borderRadius: '50%',
+              }}
+            >
+              {icon}
+            </Flex>
+            <Typography.Text
+              strong
+              style={{
+                fontSize: token.fontSizeLG,
+                color: secondary ? '#00BD9B' : token.colorLink,
+                textAlign: 'center',
+              }}
+            >
+              {title}
+            </Typography.Text>
+            {description && (
+              <Typography.Paragraph
+                style={{
+                  color: token.colorTextDescription,
+                  fontSize: token.fontSize - 4,
+                  textAlign: 'center',
+                }}
+              >
+                {description}
+              </Typography.Paragraph>
+            )}
+          </Flex>
+          <Flex direction="column">
+            <Divider style={{ margin: 0, marginBottom: token.margin }} />
+            <Button
+              {...footerButtonProps}
+              size="large"
+              block
+              style={{
+                borderRadius: token.borderRadiusLG,
+              }}
+            />
+          </Flex>
+        </Flex>
+      </Card>
+    </ConfigProvider>
+  );
+};
+
+export default BAIStartBasicCard;
diff --git a/react/src/components/BAIStartSimpleCard.tsx b/react/src/components/BAIStartSimpleCard.tsx
new file mode 100644
index 0000000000..edba74a58b
--- /dev/null
+++ b/react/src/components/BAIStartSimpleCard.tsx
@@ -0,0 +1,111 @@
+import Flex from './Flex';
+import {
+  Button,
+  ButtonProps,
+  Card,
+  CardProps,
+  ConfigProvider,
+  theme,
+  Typography,
+} from 'antd';
+
+export interface BAIStartSimpleCardProps extends CardProps {
+  icon: React.ReactNode;
+  title: React.ReactNode;
+  footerButtonProps: ButtonProps;
+  description?: string;
+  secondary?: Boolean;
+}
+
+const BAIStartSimpleCard: React.FC<BAIStartSimpleCardProps> = ({
+  icon,
+  title,
+  footerButtonProps,
+  description,
+  secondary,
+  ...cardProps
+}) => {
+  const { token } = theme.useToken();
+
+  return (
+    <ConfigProvider
+      theme={{
+        components: {
+          Button: {
+            defaultBorderColor: 'none',
+            defaultColor: secondary ? '#E8FAF6' : '#FFF6E8',
+            defaultBg: secondary ? '#00BD9B' : token.colorPrimary,
+            defaultHoverColor: secondary ? '#00BD9B' : token.colorPrimary,
+            defaultHoverBorderColor: secondary ? '#00BD9B' : token.colorPrimary,
+          },
+        },
+      }}
+    >
+      <Card
+        {...cardProps}
+        styles={{
+          body: {
+            width: 194,
+            height: 192,
+          },
+        }}
+      >
+        <Flex
+          direction="column"
+          justify="between"
+          align="stretch"
+          style={{ height: '100%' }}
+        >
+          <Flex align="center" direction="column" gap={16}>
+            <Flex
+              align="center"
+              justify="center"
+              style={{
+                width: 50,
+                height: 50,
+                padding: 0,
+                border: 0,
+                color: secondary ? '#00BD9B' : '#FF7A00',
+                background: secondary ? '#E8FAF6' : '#FFF6E8',
+                fontSize: token.sizeLG,
+                borderRadius: '50%',
+              }}
+            >
+              {icon}
+            </Flex>
+            <Typography.Text
+              strong
+              style={{
+                fontSize: token.fontSizeSM,
+                color: '#333333',
+                textAlign: 'center',
+              }}
+            >
+              {title}
+            </Typography.Text>
+            {description && (
+              <Typography.Paragraph
+                style={{
+                  color: token.colorTextDescription,
+                  fontSize: token.fontSize - 4,
+                  textAlign: 'center',
+                }}
+              >
+                {description}
+              </Typography.Paragraph>
+            )}
+            <Button
+              {...footerButtonProps}
+              block
+              style={{
+                borderRadius: token.borderRadiusLG,
+              }}
+            />
+          </Flex>
+        </Flex>
+      </Card>
+    </ConfigProvider>
+  );
+};
+
+export default BAIStartSimpleCard;
diff --git a/react/src/pages/StartPage.tsx b/react/src/pages/StartPage.tsx
new file mode 100644
index 0000000000..82ba8d306b
--- /dev/null
+++ b/react/src/pages/StartPage.tsx
@@ -0,0 +1,142 @@
+import BAIStartBasicCard from '../components/BAIStartBasicCard';
+// import BAIStartSimpleCard from '../components/BAIStartSimpleCard';
+import Flex from '../components/Flex';
+import { useWebUINavigate } from '../hooks';
+import { FolderAddOutlined } from '@ant-design/icons';
+import React from 'react';
+
+interface StartPageProps {}
+
+const StartPage: React.FC<StartPageProps> = (props) => {
+  const webuiNavigate = useWebUINavigate();
+
+  return (
+    <Flex gap={16} wrap="wrap" direction="column" align="start">
+      <Flex gap={16} wrap="wrap">
+        <BAIStartBasicCard
+          icon={<FolderAddOutlined />}
+          title={
+            <div>
+              Create a New
+              <br />
+              Storage Folder
+            </div>
+          }
+          description="Creating a folder and uploading files are crucial for training models or providing services externally. Please begin by uploading the files."
+          footerButtonProps={{
+            onClick: () => {
+              webuiNavigate('/data');
+            },
+            children: 'Create Folder',
+          }}
+        />
+        <BAIStartBasicCard
+          icon={
+            <img
+              src="/resources/icons/interactiveSession.svg"
+              alt="interactive session"
+            />
+          }
+          title={
+            <div>
+              Start an
+              <br />
+              Interactive Session
+            </div>
+          }
+          description="Want to train a model? Click the button to create a session instantly. Choose your preferred environment and resources for running code and other tasks."
+          footerButtonProps={{
+            onClick: () => {
+              webuiNavigate('/session/start');
+            },
+            children: 'Start Session',
+          }}
+        />
+        <BAIStartBasicCard
+          icon={
+            <img src="/resources/icons/batchSession.svg" alt="batch session" />
+          }
+          title={
+            <div>
+              Start a<br />
+              Batch Session
+            </div>
+          }
+          description="For predefined files or scheduled tasks, try Batch sessions. Enter the command, set the date and time, and run as needed."
+          footerButtonProps={{
+            onClick: () => {
+              webuiNavigate(
+                '/session/start?formValues=%7B%22sessionType%22%3A%22batch%22%2C%22environments%22%3A%7B%22environment%22%3A%22cr.backend.ai%2Fmultiarch%2Fpython%22%2C%22version%22%3A%22cr.backend.ai%2Fmultiarch%2Fpython%3A3.9-ubuntu20.04%40x86_64%22%7D%2C%22envvars%22%3A%5B%5D%2C%22resourceGroup%22%3A%22default%22%2C%22allocationPreset%22%3A%22cpu01-small%22%2C%22resource%22%3A%7B%22cpu%22%3A1%2C%22mem%22%3A%221G%22%2C%22shmem%22%3A%2264m%22%2C%22accelerator%22%3A0%7D%2C%22enabledAutomaticShmem%22%3Atrue%2C%22num_of_sessions%22%3A1%2C%22cluster_mode%22%3A%22single-node%22%2C%22cluster_size%22%3A1%2C%22hpcOptimization%22%3A%7B%22autoEnabled%22%3Atrue%2C%22OMP_NUM_THREADS%22%3A%221%22%2C%22OPENBLAS_NUM_THREADS%22%3A%221%22%7D%2C%22vfoldersAliasMap%22%3A%7B%7D%2C%22batch%22%3A%7B%22enabled%22%3Afalse%7D%7D',
+              );
+            },
+            children: 'Start Session',
+          }}
+        />
+      </Flex>
+      <Flex gap={16} wrap="wrap">
+        <BAIStartBasicCard
+          secondary
+          icon={
+            <img src="/resources/icons/modelService.svg" alt="model service" />
+          }
+          title={
+            <div>
+              Start a
+              <br /> Model Service
+            </div>
+          }
+          description="Ready to share your trained model with others? Click the button to create a service."
+          footerButtonProps={{
+            onClick: () => {
+              webuiNavigate('/serving');
+            },
+            children: 'Start Service',
+          }}
+        />
+        <BAIStartBasicCard
+          secondary
+          icon={
+            <img src="/resources/icons/exampleStart.svg" alt="example start" />
+          }
+          title={
+            <div>
+              Start
+              <br />
+              from the Example
+            </div>
+          }
+          description="Explore various example codes and get started."
+          footerButtonProps={{
+            children: 'Start Now',
+          }}
+        />
+        <BAIStartBasicCard
+          secondary
+          icon={<img src="/resources/icons/URLStart.svg" alt="URL start" />}
+          title={
+            <div>
+              Start
+              <br />
+              from a URL
+            </div>
+          }
+          description="Import your project and code from various environments such as GitHub, GitLab, Notebook, etc."
+          footerButtonProps={{
+            children: 'Start Now',
+          }}
+        />
+      </Flex>
+      {/* <BAIStartSimpleCard
+        icon={<img src="/resources/icons/session.svg" alt="session"/>}
+        title={'Create a Session'}
+        footerButtonProps={{
+          onClick: () => {
+            webuiNavigate('/session/start');
+          },
+          children: 'Start Session',
+        }}
+      /> */}
+    </Flex>
+  );
+};
+export default StartPage;
diff --git a/resources/icons/URLStart.svg b/resources/icons/URLStart.svg
new file mode 100644
index 0000000000..aae5b7338f
--- /dev/null
+++ b/resources/icons/URLStart.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 13C10.4295 13.5741 10.9774 14.0491 11.6066 14.3929C12.2357 14.7367 12.9315 14.9411 13.6467 14.9923C14.3618 15.0435 15.0796 14.9403 15.7513 14.6897C16.4231 14.4392 17.0331 14.047 17.54 13.54L20.54 10.54C21.4508 9.59695 21.9548 8.33394 21.9434 7.02296C21.932 5.71198 21.4061 4.45791 20.4791 3.53087C19.5521 2.60383 18.298 2.07799 16.987 2.0666C15.676 2.0552 14.413 2.55918 13.47 3.46997L11.75 5.17997" stroke="#00BD9B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 11.0002C13.5705 10.4261 13.0226 9.95104 12.3934 9.60729C11.7642 9.26353 11.0684 9.05911 10.3533 9.00789C9.63816 8.95667 8.92037 9.05986 8.24861 9.31044C7.57685 9.56103 6.96684 9.95316 6.45996 10.4602L3.45996 13.4602C2.54917 14.4032 2.04519 15.6662 2.05659 16.9772C2.06798 18.2882 2.59382 19.5423 3.52086 20.4693C4.4479 21.3964 5.70197 21.9222 7.01295 21.9336C8.32393 21.945 9.58694 21.441 10.53 20.5302L12.24 18.8202" stroke="#00BD9B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/resources/icons/batchSession.svg b/resources/icons/batchSession.svg
new file mode 100644
index 0000000000..7b70892ca4
--- /dev/null
+++ b/resources/icons/batchSession.svg
@@ -0,0 +1,4 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="50" height="50" rx="25" fill="#FFF6E8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.999 14.2979C24.6476 14.2979 24.3025 14.3901 23.9981 14.5654L20.1296 16.776L20.1261 16.778C19.8215 16.9538 19.5685 17.2067 19.3925 17.5112C19.2165 17.8157 19.1237 18.1621 19.1233 18.5138L19.1233 22.9376C19.1233 22.978 19.1246 23.0184 19.1271 23.0586C19.0921 23.0761 19.0575 23.0946 19.0235 23.1142L15.155 25.3248L15.1515 25.3268C14.8469 25.5027 14.5939 25.7555 14.4179 26.06C14.2419 26.3646 14.149 26.7109 14.1487 27.0627V31.4864C14.149 31.8381 14.2419 32.1836 14.4179 32.4881C14.5939 32.7926 14.8469 33.0455 15.1515 33.2213L15.155 33.2233L19.0215 35.4327L19.0235 35.4339C19.3068 35.597 19.6253 35.6882 19.9513 35.7001C19.9754 35.702 19.9997 35.703 20.0243 35.703C20.0488 35.703 20.0731 35.702 20.0971 35.7001C20.4232 35.6883 20.7418 35.597 21.0252 35.4339L21.0272 35.4327L24.8937 33.2233L24.8972 33.2213C24.9321 33.2011 24.9664 33.18 24.9999 33.1578C25.0335 33.18 25.0678 33.2011 25.1027 33.2213L25.1062 33.2233L28.9727 35.4327L28.9747 35.4339C29.258 35.597 29.5765 35.6882 29.9025 35.7001C29.9265 35.702 29.9509 35.703 29.9754 35.703C30 35.703 30.0243 35.702 30.0483 35.7001C30.3744 35.6883 30.693 35.597 30.9764 35.4339L30.9784 35.4327L34.8449 33.2233L34.8483 33.2213C35.1529 33.0455 35.4059 32.7926 35.582 32.4881C35.758 32.1836 35.8508 31.8372 35.8512 31.4855V27.0617C35.8508 26.71 35.758 26.3646 35.582 26.06C35.4059 25.7555 35.1529 25.5027 34.8483 25.3268L30.9784 23.1154L30.9764 23.1143C30.9417 23.0943 30.9065 23.0754 30.8708 23.0576C30.8733 23.0174 30.8746 22.9771 30.8746 22.9366V18.5129C30.8743 18.1612 30.7814 17.8157 30.6054 17.5112C30.4294 17.2067 30.1764 16.9538 29.8718 16.778L26.0018 14.5666L25.9998 14.5654C25.6954 14.3901 25.3503 14.2979 24.999 14.2979ZM25.9 31.4919C25.9012 31.5254 25.9106 31.5582 25.9275 31.5873C25.9453 31.6182 25.9709 31.6438 26.0016 31.6619L26.0027 31.6625L29.0754 33.4183V29.7951L25.9 27.9702V31.4855C25.9 31.4876 25.9 31.4898 25.9 31.4919ZM30.8754 33.4184L33.9483 31.6625L33.9494 31.6618C33.9802 31.6438 34.0057 31.6181 34.0236 31.5873C34.0415 31.5562 34.0511 31.5209 34.0512 31.485V27.9699L30.8754 29.795V33.4184ZM33.1345 26.4206L29.9753 28.2362L26.8164 26.4207L29.8692 24.6762L29.8727 24.6742C29.9039 24.6562 29.9394 24.6467 29.9755 24.6467C30.0116 24.6467 30.0471 24.6562 30.0784 24.6742L33.1345 26.4206ZM24.0999 27.97L20.9243 29.795V33.4184L23.9972 31.6625L23.9982 31.6618C24.029 31.6438 24.0546 31.6181 24.0724 31.5873C24.0892 31.5582 24.0986 31.5255 24.0999 31.492C24.0999 31.4901 24.0999 31.4883 24.0999 31.4864V27.97ZM20.1272 24.6742L23.1833 26.4206L20.0242 28.2362L16.8652 26.4207L19.918 24.6762L19.9215 24.6742C19.9528 24.6562 19.9882 24.6467 20.0243 24.6467C20.0605 24.6467 20.0959 24.6562 20.1272 24.6742ZM15.9487 31.4848V27.9701L19.1243 29.7951V33.4183L16.0515 31.6625L16.0505 31.6619C16.0197 31.6438 15.9941 31.6182 15.9763 31.5873C15.9583 31.5561 15.9488 31.5208 15.9487 31.4848ZM25.8989 24.8696L28.9718 23.1136L28.9728 23.113C29.0036 23.095 29.0292 23.0693 29.047 23.0384C29.065 23.0073 29.0745 22.9721 29.0746 22.9362L29.0746 19.4211L25.8989 21.2462V24.8696ZM28.158 17.8718L25.1018 16.1254C25.0705 16.1074 25.0351 16.0979 24.999 16.0979C24.9628 16.0979 24.9274 16.1074 24.8961 16.1254L24.8926 16.1274L21.8398 17.8719L24.9988 19.6874L28.158 17.8718ZM20.9233 19.4213V22.936C20.9234 22.972 20.9329 23.0073 20.9509 23.0384C20.9687 23.0693 20.9943 23.095 21.0251 23.113L21.0261 23.1136L24.0989 24.8695V21.2463L20.9233 19.4213Z" fill="#FF7A00"/>
+</svg>
diff --git a/resources/icons/exampleStart.svg b/resources/icons/exampleStart.svg
new file mode 100644
index 0000000000..efcd298b1d
--- /dev/null
+++ b/resources/icons/exampleStart.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.7281 0.566727V2.00127C16.7281 2.13277 16.6123 2.24036 16.4708 2.24036H4.12297C3.98148 2.24036 3.86572 2.13277 3.86572 2.00127V0.566727C3.86572 0.435227 3.98148 0.327637 4.12297 0.327637H16.4708C16.6123 0.327637 16.7281 0.435227 16.7281 0.566727Z" fill="#00BD9B"/>
+<path d="M2.17171 2.14954L3.60625 2.14954C3.73775 2.14954 3.84534 2.30881 3.84534 2.50348L3.84534 19.4927C3.84534 19.6874 3.73775 19.8467 3.60625 19.8467L2.17171 19.8467C2.04021 19.8467 1.93262 19.6874 1.93262 19.4927L1.93262 2.50348C1.93262 2.30881 2.04021 2.14954 2.17171 2.14954Z" fill="#00BD9B"/>
+<path d="M10.0708 21.1076L7.71641 21.1091L7.71709 6.09215H18.856V11.4614C18.856 11.5792 18.9524 11.6757 19.0703 11.6757H20.5703C20.6881 11.6757 20.7845 11.5792 20.7845 11.4614V5.02072C20.7845 4.54661 20.4015 4.16357 19.9274 4.16357H6.64567C6.17156 4.16357 5.78852 4.54661 5.78852 5.02072L5.78784 22.1806C5.78784 22.6547 6.17088 23.0377 6.64498 23.0377L10.0708 23.0361C10.1887 23.0361 10.2851 22.9397 10.2851 22.8219V21.3219C10.2851 21.204 10.1887 21.1076 10.0708 21.1076ZM22.008 22.4886L19.5089 19.9895C20.1062 19.1993 20.4624 18.2136 20.4624 17.1448C20.4624 14.5413 18.3517 12.4306 15.7481 12.4306C13.1446 12.4306 11.0339 14.5413 11.0339 17.1448C11.0339 19.7484 13.1446 21.8591 15.7481 21.8591C16.7071 21.8591 17.5964 21.5725 18.341 21.0824L20.8776 23.619C20.9205 23.6618 20.974 23.6806 21.0276 23.6806C21.0812 23.6806 21.1374 23.6591 21.1776 23.619L22.008 22.7886C22.0277 22.7689 22.0434 22.7456 22.0541 22.7198C22.0648 22.6941 22.0703 22.6665 22.0703 22.6386C22.0703 22.6107 22.0648 22.5831 22.0541 22.5574C22.0434 22.5316 22.0277 22.5083 22.008 22.4886ZM15.7481 20.1448C14.0901 20.1448 12.7481 18.8029 12.7481 17.1448C12.7481 15.4868 14.0901 14.1448 15.7481 14.1448C17.4062 14.1448 18.7481 15.4868 18.7481 17.1448C18.7481 18.8029 17.4062 20.1448 15.7481 20.1448Z" fill="#00BD9B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.84644 2.98096H3.85826V2.24791H4.66345V2.23828H16.472C16.6135 2.23828 16.7293 2.13069 16.7293 1.99919V0.564651C16.7293 0.433152 16.6135 0.325562 16.472 0.325562H4.66345V0.319336H2.78683C2.31272 0.319336 1.92969 0.702372 1.92969 1.17648V2.98096H1.93372L1.93372 19.4907C1.93372 19.6853 2.04131 19.8446 2.17281 19.8446H3.60735C3.73885 19.8446 3.84644 19.6853 3.84644 19.4907L3.84644 2.98096Z" fill="#00BD9B"/>
+</svg>
diff --git a/resources/icons/interactiveSession.svg b/resources/icons/interactiveSession.svg
new file mode 100644
index 0000000000..4e9dce72a4
--- /dev/null
+++ b/resources/icons/interactiveSession.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.0492 1.02164C12.4219 0.659454 11.649 0.659454 11.0217 1.02164L3.03476 5.63287C2.40744 5.99506 2.021 6.6644 2.021 7.38876V16.6112C2.021 17.3356 2.40744 18.0049 3.03476 18.3671L11.0217 22.9784C11.2124 23.0885 11.4166 23.1651 11.6261 23.2083C11.7419 23.2542 11.8682 23.2795 12.0004 23.2795C12.5609 23.2795 13.0154 22.8251 13.0154 22.2645V22.1853H13.0171V20.6557L13.0154 20.6567V19.2372C13.0154 19.2055 13.0139 19.1742 13.0111 19.1433V12.5845L20.0223 8.55509V9.02133C20.0211 9.04152 20.0205 9.06188 20.0205 9.08238V11.2054C20.0205 11.766 20.4749 12.2204 21.0355 12.2204C21.5961 12.2204 22.0505 11.766 22.0505 11.2054V9.08238C22.0505 9.06996 22.0503 9.05759 22.0498 9.04528V7.38876C22.0498 6.6644 21.6634 5.99506 21.0361 5.63287L13.0492 1.02164ZM19.0048 6.80133L12.0354 2.77753L5.02777 6.8234L11.9971 10.8288L19.0048 6.80133ZM4.04852 8.59913V16.6112L10.9835 20.6152V12.5848L4.04852 8.59913Z" fill="#FF7A00"/>
+<path d="M16.6596 21.3625C16.5946 21.4032 16.5199 21.4257 16.4433 21.4277C16.3666 21.4297 16.2908 21.4112 16.2238 21.374C16.1567 21.3368 16.1008 21.2824 16.0619 21.2163C16.023 21.1503 16.0024 21.075 16.0024 20.9983V13.9574C16.0024 13.8807 16.023 13.8054 16.0619 13.7394C16.1008 13.6733 16.1567 13.6188 16.2238 13.5817C16.2908 13.5445 16.3666 13.526 16.4433 13.528C16.5199 13.53 16.5946 13.5525 16.6596 13.5931L21.7092 16.7493C21.8328 16.8266 21.9347 16.9339 22.0053 17.0614C22.0759 17.1888 22.113 17.3321 22.113 17.4778C22.113 17.6235 22.0759 17.7668 22.0053 17.8943C21.9347 18.0217 21.8328 18.1291 21.7092 18.2063L16.6596 21.3625Z" stroke="#FF7A00" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/resources/icons/modelService.svg b/resources/icons/modelService.svg
new file mode 100644
index 0000000000..9df9737ef5
--- /dev/null
+++ b/resources/icons/modelService.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.26444 4.53923C3.91159 4.81731 3.9001 4.97984 3.9001 5.0001C3.9001 5.02035 3.91159 5.18289 4.26444 5.46096C4.60714 5.73104 5.15881 6.01363 5.92074 6.2676C7.43519 6.77242 9.58463 7.1001 12.0001 7.1001C14.4156 7.1001 16.565 6.77242 18.0795 6.2676C18.8414 6.01363 19.3931 5.73104 19.7358 5.46096C20.0886 5.18289 20.1001 5.02035 20.1001 5.0001C20.1001 4.97984 20.0886 4.81731 19.7358 4.53923C19.3931 4.26915 18.8414 3.98657 18.0795 3.73259C16.565 3.22778 14.4156 2.9001 12.0001 2.9001C9.58463 2.9001 7.43519 3.22778 5.92074 3.73259C5.15881 3.98657 4.60714 4.26915 4.26444 4.53923ZM3.15029 3.12549C2.59229 3.56525 2.1001 4.19193 2.1001 5.0001V12.0001V19.0001C2.1001 19.7826 2.56696 20.4035 3.12093 20.8493C3.68322 21.3018 4.45205 21.6754 5.35153 21.9752C7.15644 22.5769 9.54729 22.9001 12.0001 22.9001C14.4529 22.9001 16.8438 22.5769 18.6487 21.9752C19.5481 21.6754 20.317 21.3018 20.8793 20.8493C21.4332 20.4035 21.9001 19.7826 21.9001 19.0001V12.0001V5.0001C21.9001 4.19193 21.4079 3.56525 20.8499 3.12549C20.2818 2.67774 19.5154 2.31388 18.6487 2.02496C16.9058 1.44399 14.5552 1.1001 12.0001 1.1001C9.445 1.1001 7.09444 1.44399 5.35153 2.02496C4.48478 2.31388 3.71843 2.67774 3.15029 3.12549ZM20.1001 12.0001V7.36106C19.6684 7.59501 19.1772 7.79905 18.6487 7.97523C16.9058 8.5562 14.5552 8.9001 12.0001 8.9001C9.445 8.9001 7.09444 8.5562 5.35153 7.97523C4.82299 7.79905 4.33179 7.59501 3.9001 7.36106V12.0001C3.9001 12.0132 3.90735 12.1717 4.24943 12.447C4.5832 12.7156 5.1324 13.0048 5.92074 13.2676C7.49149 13.7912 9.67901 14.1001 12.0001 14.1001C14.3212 14.1001 16.5087 13.7912 18.0795 13.2676C18.8678 13.0048 19.417 12.7156 19.7508 12.447C20.0928 12.1717 20.1001 12.0132 20.1001 12.0001ZM3.9001 14.3603C4.32694 14.5921 4.81608 14.7968 5.35153 14.9752C7.15644 15.5769 9.54729 15.9001 12.0001 15.9001C14.4529 15.9001 16.8438 15.5769 18.6487 14.9752C19.1841 14.7968 19.6733 14.5921 20.1001 14.3603V19.0001C20.1001 19.0132 20.0928 19.1717 19.7508 19.447C19.417 19.7156 18.8678 20.0048 18.0795 20.2676C16.5087 20.7912 14.3212 21.1001 12.0001 21.1001C9.67901 21.1001 7.49149 20.7912 5.92074 20.2676C5.1324 20.0048 4.5832 19.7156 4.24943 19.447C3.90735 19.1717 3.9001 19.0132 3.9001 19.0001V14.3603Z" fill="#00BD9B"/>
+</svg>
diff --git a/resources/icons/session.svg b/resources/icons/session.svg
new file mode 100644
index 0000000000..5c025c6154
--- /dev/null
+++ b/resources/icons/session.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.6479 1.36169C15.4843 0.878784 16.5148 0.878784 17.3512 1.36169L28.0004 7.51001C28.8368 7.99292 29.3521 8.88538 29.3521 9.8512V22.1478C29.3521 23.1136 28.8368 24.0061 28.0004 24.489L17.3512 30.6373C16.5148 31.1202 15.4843 31.1202 14.6479 30.6373L3.99866 24.489C3.16223 24.0061 2.64697 23.1136 2.64697 22.1478V9.8512C2.64697 8.88538 3.16223 7.99292 3.99866 7.51001L14.6479 1.36169ZM15.9995 3.70288L25.2921 9.06795L15.9485 14.4379L6.65601 9.09737L15.9995 3.70288ZM5.35034 22.1478V11.465L14.597 16.7792V27.4864L5.35034 22.1478ZM17.3004 27.5451L26.6487 22.1478V11.4063L17.3004 16.7789V27.5451Z" fill="#FF7A00"/>
+</svg>
diff --git a/resources/theme.json b/resources/theme.json
index ad4851a698..66729fe20a 100644
--- a/resources/theme.json
+++ b/resources/theme.json
@@ -3,13 +3,14 @@
   "light" : {
     "token": {
       "fontFamily": "'Ubuntu', Roboto, sans-serif",
-      "colorPrimary": "#37B076",
-      "colorLink": "#37B076",
-      "colorLinkHover": "#71b98c",
+      "colorPrimary": "#FF9D00",
+      "colorLink": "#FF7A00",
       "colorSuccess": "#37B076",
       "colorBorder": "#DEE1E7",
       "colorBorderSecondary": "#E1E1E2",
-      "colorWarning": "#f1a239"
+      "colorWarning": "#f1a239",
+      "colorTextDescription": "#767676",
+      "borderRadius": 5
     },
     "components": {
       "Tag": {
diff --git a/src/components/backend-ai-webui.ts b/src/components/backend-ai-webui.ts
index c0c69ba109..87cf76cad4 100644
--- a/src/components/backend-ai-webui.ts
+++ b/src/components/backend-ai-webui.ts
@@ -896,13 +896,13 @@ export default class BackendAIWebUI extends connect(store)(LitElement) {
         <div id="loading-drag-area" class="loading-background-drag-area"></div>
       </div>
       <div id="app-page">
-        <backend-ai-summary-view
+        <!-- <backend-ai-summary-view
           class="page"
           name="summary"
           ?active="${this._page === 'summary'}"
         >
           <mwc-circular-progress indeterminate></mwc-circular-progress>
-        </backend-ai-summary-view>
+        </backend-ai-summary-view> -->
         <backend-ai-import-view
           class="page"
           name="import"