Skip to content

front-en: read models config from request #44

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
JiaYingLii merged 6 commits into from
Jan 25, 2024
Merged

front-en: read models config from request #44

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f5c5a77
feat: mod models config
Echo-minn Jan 23, 2024
dc9a67a
feat: get model config by request
Echo-minn Jan 25, 2024
aff7c76
feat: mod GlobalConfig
Echo-minn Jan 25, 2024
275628c
Merge branch 'dev' of https://github.com/InternLM/OpenAOE into feat_c…
Echo-minn Jan 25, 2024
eaa05b5
feat: mod GlobalConfig2
Echo-minn Jan 25, 2024
e076a58
feat: mod GlobalConfig3
Echo-minn Jan 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions openaoe/frontend/dist/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,8 @@
}
}
</style>
<script type="module" crossorigin src="./assets/index-d0401642.js"></script>
<link rel="modulepreload" crossorigin href="./assets/vendor-0b33134f.js">
<script type="module" crossorigin src="./assets/index-e351f658.js"></script>
<link rel="modulepreload" crossorigin href="./assets/vendor-98eade59.js">
<link rel="stylesheet" href="./assets/index-d5c224e8.css">
</head>
<body>
Expand Down
11 changes: 7 additions & 4 deletions openaoe/frontend/src/app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,18 @@
import RootRouter from '@routes/root.tsx';
import GlobalConfig from '@components/global-config';
import { GlobalLang } from '@/components/global-lang';
import Header from '@/layout/header/header.tsx';
import './styles/index.less';
import 'sea-lion-ui/dist/index.css';

const App = () => {
return (
<GlobalLang>
<Header />
<RootRouter />
</GlobalLang>
<GlobalConfig>
<GlobalLang>
<Header />
<RootRouter />
</GlobalLang>
</GlobalConfig>
);
};

Expand Down
7 changes: 7 additions & 0 deletions openaoe/frontend/src/components/global-config/global-config-context.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import React from 'react';

export const DefaultConfigInfo = {
models: null,
};

export const GlobalConfigContext = React.createContext(DefaultConfigInfo);
43 changes: 43 additions & 0 deletions openaoe/frontend/src/components/global-config/global-config.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import {
FC, ReactNode, useEffect, useMemo, useState
} from 'react';
import { GlobalConfigContext } from '@components/global-config/global-config-context.tsx';
import { models as defaultModels } from '@config/model-config.ts';

export interface GlobalInfoProps {
children?: ReactNode;
}

const GlobalConfig: FC<GlobalInfoProps> = ({ children }) => {
const [models, setModels] = useState(defaultModels);
const [loading, setLoading] = useState(true);

useEffect(() => {
setLoading(true);
fetch('/config/json')
.then(res => res.json())
.then(res => {
if (res && res.models) {
setModels(res.models);
}
})
.catch(err => {
console.log(err);
})
.finally(() => {
setLoading(false);
});
}, []);

const values = useMemo(() => ({
models
}), [models]);

return (
<GlobalConfigContext.Provider value={values}>
{!loading && children}
</GlobalConfigContext.Provider>
);
};

export default GlobalConfig;
3 changes: 3 additions & 0 deletions openaoe/frontend/src/components/global-config/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import GlobalConfig from './global-config.tsx';

export default GlobalConfig;
129 changes: 60 additions & 69 deletions openaoe/frontend/src/config/model-config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,87 +1,78 @@
import internlm from '@assets/imgs/internlm.svg';
import openai from '@assets/imgs/openai.svg';
import claude from '@assets/imgs/claude.svg';
import google from '@assets/imgs/google-palm.webp';
import minimax from '@assets/imgs/minimax.png';
import spark from '@assets/imgs/spark.svg';
import admin from '@assets/imgs/A.svg';
import { BotState } from '@/store/bot.ts';

/**
* You can add more models here.
* Models used to be showed in the model selection part.
* provider is required
* model is required and must be unique
* */
export const ALL_MODELS: BotState[] = [
{
export const USER_INFO = {
provider: 'user',
model: 'user',
avatar: 'user.png',
border: '#71e875',
background: '#71e875',
};

export const ADMIN_INFO = {
provider: 'admin',
model: 'admin',
avatar: admin,
border: '#4e6ef2',
background: 'linear-gradient(rgb(255 255 255 / 80%) 0%, rgb(168 245 179) 100%)',
};

export const models = {
'internlm-chat-7b': {
provider: 'internlm',
model: 'internlm-chat-7b',
avatar: internlm,
border: 'rgba(1,52,220,0.85)',
background: 'linear-gradient(rgb(3 26 108 / 85%) 0%, rgb(29 60 161 / 85%) 100%)',
webui: {
avatar: 'https://oss.openmmlab.com/frontend/OpenAOE/internlm.svg',
background: 'linear-gradient(rgb(3 26 108 / 85%) 0%, rgb(29 60 161 / 85%) 100%)',
},
},
{
'gpt-3.5-turbo': {
provider: 'openai',
model: 'gpt-3.5-turbo',
avatar: openai,
border: '#1a8d15',
background: 'linear-gradient(180deg, rgba(156, 206, 116, 0.15) 0%, #1a8d15 100%)',
webui: {
avatar: 'https://oss.openmmlab.com/frontend/OpenAOE/openai.svg',
background: 'linear-gradient(180deg, rgba(156, 206, 116, 0.15) 0%, #1a8d15 100%)',
}
},
{
'gpt-4': {
provider: 'openai',
model: 'gpt-4',
avatar: openai,
border: '#4dd547',
background: 'linear-gradient(180deg, rgba(156, 206, 116, 0.15) 0%, #08be00 100%)',
webui: {
avatar: 'https://oss.openmmlab.com/frontend/OpenAOE/openai.svg',
background: 'linear-gradient(180deg, rgba(156, 206, 116, 0.15) 0%, #08be00 100%)',
}
},
{
'claude-1': {
provider: 'claude',
model: 'claude-1',
avatar: claude,
border: '#8550ca',
background: 'linear-gradient(180deg, rgba(141, 90, 181, 0.15) 0%, rgba(106, 39, 123, 0.7) 53.12%, #663E9A 100%)',
webui: {
avatar: 'https://oss.openmmlab.com/frontend/OpenAOE/claude.svg',
background: 'linear-gradient(180deg, rgba(141, 90, 181, 0.15) 0%, rgba(106, 39, 123, 0.7) 53.12%, #663E9A 100%)',
}
},
{
'claude-1-100k': {
provider: 'claude',
model: 'claude-1-100k',
avatar: claude,
border: '#8550ca',
background: 'linear-gradient(180deg, rgba(141, 90, 181, 0.15) 0%, rgba(106, 39, 123, 0.7) 53.12%, #663E9A 100%)',
webui: {
avatar: 'https://oss.openmmlab.com/frontend/OpenAOE/claude.svg',
background: 'linear-gradient(180deg, rgba(141, 90, 181, 0.15) 0%, rgba(106, 39, 123, 0.7) 53.12%, #663E9A 100%)',
}
},
{
'chat-bison-001': {
provider: 'google',
model: 'chat-bison-001',
avatar: google,
border: '#ff85c7',
background: 'linear-gradient(180deg, rgba(181, 90, 90, 0.15) 0%, #fa5ab1 100%)',
webui: {
avatar: 'https://oss.openmmlab.com/frontend/OpenAOE/google-palm.webp',
isStream: false,
background: 'linear-gradient(180deg, rgba(181, 90, 90, 0.15) 0%, #fa5ab1 100%)',
}
},
{
'abab5-chat': {
provider: 'minimax',
model: 'abab5-chat',
avatar: minimax,
border: '#be1313',
background: 'linear-gradient(180deg, rgba(207, 72, 72, 0.15) 0%, rgba(151, 43, 43, 0.7) 53.12%, #742828 100%)',
webui: {
avatar: 'https://oss.openmmlab.com/frontend/OpenAOE/minimax.png',
background: 'linear-gradient(180deg, rgba(207, 72, 72, 0.15) 0%, rgba(151, 43, 43, 0.7) 53.12%, #742828 100%)',
}
},
{
spark: {
provider: 'spark',
model: 'spark',
avatar: spark,
border: '#6fa2db',
background: 'linear-gradient(180deg, rgba(72, 72, 207, 0.15) 0%, #7498be 100%)',
},
{
provider: 'admin',
model: 'admin',
avatar: admin,
border: '#4e6ef2',
background: 'linear-gradient(rgb(255 255 255 / 80%) 0%, rgb(168 245 179) 100%)',
},
{
provider: 'user',
model: 'user',
avatar: 'user.png',
border: '#71e875',
background: '#71e875',
webui: {
avatar: 'https://oss.openmmlab.com/frontend/OpenAOE/spark.svg',
isStream: false,
background: 'linear-gradient(180deg, rgba(72, 72, 207, 0.15) 0%, #7498be 100%)',
}
},
];
};
11 changes: 9 additions & 2 deletions openaoe/frontend/src/pages/chat/components/chat-operations/chat-operation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { Tooltip } from 'sea-lion-ui';
import { getNeedEventCallback, scrollToBottom } from '@utils/utils.ts';
import { BASE_IMG_URL, CLEAR_CONTEXT, SERIAL_SESSION } from '@constants/models.ts';
import React, { useEffect } from 'react';
import React, { useContext, useEffect } from 'react';
import { GlobalConfigContext } from '@components/global-config/global-config-context.tsx';
import styles from './chat-operation.module.less';
import { useConfigStore } from '@/store/config.ts';
import { createMessage, useChatStore } from '@/store/chat.ts';
Expand Down Expand Up @@ -120,6 +121,7 @@ const RetryIcon = () => {
);
};
const ChatOperation = (props: ChatOperationProps) => {
const { models } = useContext(GlobalConfigContext);
const { modelName } = props;
const chatStore = useChatStore();
const { sessions } = chatStore;
Expand Down Expand Up @@ -160,6 +162,11 @@ const ChatOperation = (props: ChatOperationProps) => {
chatStore.closeController(modelName);
};

const handleRetry = () => {
const provider = models[modelName]?.provider;
chatStore.retry(currSession.name, provider, currSession.name === SERIAL_SESSION && botStore.currentBot);
};

useEffect(() => {
return () => {
// when component unmount, stop non-stop stream request
Expand Down Expand Up @@ -196,7 +203,7 @@ const ChatOperation = (props: ChatOperationProps) => {
</Tooltip>
<Tooltip title="Regenerate" className={styles.opBtn}>
<div
{...getNeedEventCallback(() => chatStore.retry(currSession.name, currSession.name === SERIAL_SESSION && botStore.currentBot))}
{...getNeedEventCallback(handleRetry)}
>
<RetryIcon />
</div>
Expand Down
37 changes: 27 additions & 10 deletions openaoe/frontend/src/pages/chat/components/chat/chat.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import React, { useEffect, useRef, useState } from 'react';
import React, {
useContext, useEffect, useRef, useState
} from 'react';
import classNames from 'classnames';
import ReactMarkdown from 'react-markdown';
import 'katex/dist/katex.min.css';
Expand All @@ -14,8 +16,9 @@ import { autoScroll, getNeedEventCallback } from '@utils/utils.ts';
import {
CLEAR_CONTEXT, PARALLEL_MODE, SERIAL_MODE, SERIAL_SESSION
} from '@constants/models.ts';
import { ALL_MODELS } from '@config/model-config.ts';
import { ADMIN_INFO, USER_INFO } from '@config/model-config.ts';
import ChatOperation from '@pages/chat/components/chat-operations/chat-operation.tsx';
import { GlobalConfigContext } from '@components/global-config/global-config-context.tsx';
import { useChatStore, ChatMessage as ChatMessageProps, ChatSession as ChatSessionProps } from '@/store/chat.ts';
import styles from './chat.module.less';
import { useConfigStore } from '@/store/config.ts';
Expand Down Expand Up @@ -74,18 +77,31 @@ const RunningMario = () => {
return <div id={styles.mario} />;
};
function ChatMessage(props: { message: ChatMessageProps, sessionInfo: {id: number, name: string, bot: string} }) {
const { models } = useContext(GlobalConfigContext);
const [showDate, setShowDate] = useState(false);
const { message } = props;
const isUser = message.sender_type === 'user' || message.provider === 'user';
const isAdmin = message.sender_type === 'admin' || message.provider === 'admin';
const isClear = message.sender_type === CLEAR_CONTEXT;
const className = classNames(
styles.messageWrapper,
isUser ? styles.chatUser : styles.chatBot,
);
const configStore = useConfigStore();

const model = ALL_MODELS.find((m) => m.model === (message.model || 'user'));
const getModel = () => {
if (isUser) {
return USER_INFO;
}
if (isAdmin) {
return ADMIN_INFO;
}
return models[message.model];
};

const model = getModel();

if (!model) {
if (!isClear && !model) {
return null;
}

Expand All @@ -96,16 +112,16 @@ function ChatMessage(props: { message: ChatMessageProps, sessionInfo: {id: numbe
onMouseEnter={() => setShowDate(true)}
onMouseLeave={() => setShowDate(false)}
>
{(message.sender_type === CLEAR_CONTEXT) ? (
{(isClear) ? (
<div className={styles.clearLine}>
Context cleared
</div>
) : (
<>
{!isMobile && !isUser && (
<div style={{ background: model.background }} className={styles.modelAvatar}>
<div style={{ background: model.webui.background }} className={styles.modelAvatar}>
<img
src={model.avatar}
src={model.webui.avatar}
className={styles.modelAvatarImg}
alt={model.model}
/>
Expand All @@ -119,7 +135,7 @@ function ChatMessage(props: { message: ChatMessageProps, sessionInfo: {id: numbe
{message.stream && <RunningMario />}
{!isUser && (
<div className={styles.chatOperations}>
{`${model.provider} - ${model.model}`}
{`${model.provider} - ${message.model}`}
</div>
)}
<ReactMarkdown
Expand All @@ -143,7 +159,7 @@ function ChatMessage(props: { message: ChatMessageProps, sessionInfo: {id: numbe
)}
</div>
{!isMobile && isUser && (
<div style={{ color: model.background, marginRight: 2 }} className={styles.modelAvatar}>
<div style={{ color: USER_INFO.background, marginRight: 2 }} className={styles.modelAvatar}>
ME
</div>
)}
Expand Down Expand Up @@ -196,6 +212,7 @@ function ChatSession(props: { session: ChatSessionProps }) {
}

const ChatPage: React.FC = () => {
const { models } = useContext(GlobalConfigContext);
const chatStore = useChatStore();
const configStore = useConfigStore();
const { sessions } = chatStore;
Expand All @@ -210,7 +227,7 @@ const ChatPage: React.FC = () => {
return null;
}
// If this session belongs to a non-exist model, remove this session
if (configStore.mode === PARALLEL_MODE && !ALL_MODELS.find((model) => model.model === session.name)) {
if (configStore.mode === PARALLEL_MODE && !models[session.name]) {
chatStore.removeSession(session.name);
return null;
}
Expand Down
Loading