KeyArgo
/
llama-gpt
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨ feat: add DEFAULT_MODEL environment variable (#280) 

* ✨ feat: add DEFAULT_MODEL environment variable

* set the model maxLength setting in the models definition

* set the model tokenLimit setting in the models definition
This commit is contained in:
Thomas LÉVEIL 2023-03-29 05:10:47 +02:00 committed by GitHub
parent 3f82710cdd
commit 00c6c72270
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 94 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.env.local.example
View File

@ -1 +1,2 @@
OPENAI_API_KEY=YOUR_KEY OPENAI_API_KEY=YOUR_KEY
DEFAULT_MODEL=gpt-3.5-turbo

12
README.md
View File

@ -103,6 +103,18 @@ npm run dev
You should be able to start chatting. You should be able to start chatting.
## Configuration
When deploying the application, the following environment variables can be set:
| Environment Variable | Default value | Description |
|----------------------|------------------|---------------------------------------------------------|
| OPENAI_API_KEY | | The default API key used for authentication with OpenAI |
| DEFAULT_MODEL | `gpt-3.5-turbo` | The default model to use on new conversations |
If you do not provide an OpenAI API key with `OPENAI_API_KEY`, users will have to provide their own key.
If you don't have an OpenAI API key, you can get one [here](https://platform.openai.com/account/api-keys).
## Contact ## Contact
If you have any questions, feel free to reach out to me on [Twitter](https://twitter.com/mckaywrigley). If you have any questions, feel free to reach out to me on [Twitter](https://twitter.com/mckaywrigley).

15
components/Chat/Chat.tsx
View File

@ -2,7 +2,7 @@ import { Conversation, Message } from '@/types/chat';
import { IconArrowDown } from '@tabler/icons-react'; import { IconArrowDown } from '@tabler/icons-react';
import { KeyValuePair } from '@/types/data'; import { KeyValuePair } from '@/types/data';
import { ErrorMessage } from '@/types/error'; import { ErrorMessage } from '@/types/error';
import { OpenAIModel } from '@/types/openai'; import { OpenAIModel, OpenAIModelID } from '@/types/openai';
import { Prompt } from '@/types/prompt'; import { Prompt } from '@/types/prompt';
import { throttle } from '@/utils'; import { throttle } from '@/utils';
import { IconClearAll, IconKey, IconSettings } from '@tabler/icons-react'; import { IconClearAll, IconKey, IconSettings } from '@tabler/icons-react';
@ -29,6 +29,7 @@ interface Props {
models: OpenAIModel[]; models: OpenAIModel[];
apiKey: string; apiKey: string;
serverSideApiKeyIsSet: boolean; serverSideApiKeyIsSet: boolean;
defaultModelId: OpenAIModelID;
messageIsStreaming: boolean; messageIsStreaming: boolean;
modelError: ErrorMessage | null; modelError: ErrorMessage | null;
loading: boolean; loading: boolean;
@ -48,6 +49,7 @@ export const Chat: FC<Props> = memo(
models, models,
apiKey, apiKey,
serverSideApiKeyIsSet, serverSideApiKeyIsSet,
defaultModelId,
messageIsStreaming, messageIsStreaming,
modelError, modelError,
loading, loading,
@ -206,6 +208,7 @@ export const Chat: FC<Props> = memo(
<ModelSelect <ModelSelect
model={conversation.model} model={conversation.model}
models={models} models={models}
defaultModelId={defaultModelId}
onModelChange={(model) => onModelChange={(model) =>
onUpdateConversation(conversation, { onUpdateConversation(conversation, {
key: 'model', key: 'model',
@ -236,12 +239,13 @@ export const Chat: FC<Props> = memo(
className="ml-2 cursor-pointer hover:opacity-50" className="ml-2 cursor-pointer hover:opacity-50"
onClick={handleSettings} onClick={handleSettings}
> >
<IconSettings size={18} /> <IconSettings size={18} />
</button> </button>
<button <button
className="ml-2 cursor-pointer hover:opacity-50" className="ml-2 cursor-pointer hover:opacity-50"
onClick={onClearAll}> onClick={onClearAll}
<IconClearAll size={18} /> >
<IconClearAll size={18} />
</button> </button>
</div> </div>
{showSettings && ( {showSettings && (
@ -250,6 +254,7 @@ export const Chat: FC<Props> = memo(
<ModelSelect <ModelSelect
model={conversation.model} model={conversation.model}
models={models} models={models}
defaultModelId={defaultModelId}
onModelChange={(model) => onModelChange={(model) =>
onUpdateConversation(conversation, { onUpdateConversation(conversation, {
key: 'model', key: 'model',
@ -306,7 +311,7 @@ export const Chat: FC<Props> = memo(
className="flex h-7 w-7 items-center justify-center rounded-full bg-white shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-[#515152d7]" className="flex h-7 w-7 items-center justify-center rounded-full bg-white shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-[#515152d7]"
onClick={handleScrollDown} onClick={handleScrollDown}
> >
<IconArrowDown size={18}/> <IconArrowDown size={18} />
</button> </button>
</div> </div>
)} )}

27
components/Chat/ChatInput.tsx
View File

@ -1,5 +1,5 @@
import { Message } from '@/types/chat'; import { Message } from '@/types/chat';
import { OpenAIModel, OpenAIModelID } from '@/types/openai'; import { OpenAIModel } from '@/types/openai';
import { Prompt } from '@/types/prompt'; import { Prompt } from '@/types/prompt';
import { IconPlayerStop, IconRepeat, IconSend } from '@tabler/icons-react'; import { IconPlayerStop, IconRepeat, IconSend } from '@tabler/icons-react';
import { useTranslation } from 'next-i18next'; import { useTranslation } from 'next-i18next';
@ -56,7 +56,7 @@ export const ChatInput: FC<Props> = ({
const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => { const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
const value = e.target.value; const value = e.target.value;
const maxLength = model.id === OpenAIModelID.GPT_3_5 ? 12000 : 24000; const maxLength = model.maxLength;
if (value.length > maxLength) { if (value.length > maxLength) {
alert( alert(
@ -109,7 +109,10 @@ export const ChatInput: FC<Props> = ({
const selectedPrompt = filteredPrompts[activePromptIndex]; const selectedPrompt = filteredPrompts[activePromptIndex];
if (selectedPrompt) { if (selectedPrompt) {
setContent((prevContent) => { setContent((prevContent) => {
const newContent = prevContent?.replace(/\/\w*$/, selectedPrompt.content); const newContent = prevContent?.replace(
/\/\w*$/,
selectedPrompt.content,
);
return newContent; return newContent;
}); });
handlePromptSelect(selectedPrompt); handlePromptSelect(selectedPrompt);
@ -211,8 +214,9 @@ export const ChatInput: FC<Props> = ({
if (textareaRef && textareaRef.current) { if (textareaRef && textareaRef.current) {
textareaRef.current.style.height = 'inherit'; textareaRef.current.style.height = 'inherit';
textareaRef.current.style.height = `${textareaRef.current?.scrollHeight}px`; textareaRef.current.style.height = `${textareaRef.current?.scrollHeight}px`;
textareaRef.current.style.overflow = `${textareaRef?.current?.scrollHeight > 400 ? 'auto' : 'hidden' textareaRef.current.style.overflow = `${
}`; textareaRef?.current?.scrollHeight > 400 ? 'auto' : 'hidden'
}`;
} }
}, [content]); }, [content]);
@ -257,15 +261,16 @@ export const ChatInput: FC<Props> = ({
<div className="relative mx-2 flex w-full flex-grow flex-col rounded-md border border-black/10 bg-white shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:border-gray-900/50 dark:bg-[#40414F] dark:text-white dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] sm:mx-4"> <div className="relative mx-2 flex w-full flex-grow flex-col rounded-md border border-black/10 bg-white shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:border-gray-900/50 dark:bg-[#40414F] dark:text-white dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] sm:mx-4">
<textarea <textarea
ref={textareaRef} ref={textareaRef}
className="m-0 w-full resize-none border-0 bg-transparent p-0 pr-8 pl-2 text-black dark:bg-transparent dark:text-white py-2 md:py-3 md:pl-4" className="m-0 w-full resize-none border-0 bg-transparent p-0 py-2 pr-8 pl-2 text-black dark:bg-transparent dark:text-white md:py-3 md:pl-4"
style={{ style={{
resize: 'none', resize: 'none',
bottom: `${textareaRef?.current?.scrollHeight}px`, bottom: `${textareaRef?.current?.scrollHeight}px`,
maxHeight: '400px', maxHeight: '400px',
overflow: `${textareaRef.current && textareaRef.current.scrollHeight > 400 overflow: `${
? 'auto' textareaRef.current && textareaRef.current.scrollHeight > 400
: 'hidden' ? 'auto'
}`, : 'hidden'
}`,
}} }}
placeholder={ placeholder={
t('Type a message or type "/" to select a prompt...') || '' t('Type a message or type "/" to select a prompt...') || ''
@ -278,7 +283,7 @@ export const ChatInput: FC<Props> = ({
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
/> />
<button <button
className="absolute right-2 top-2 rounded-sm p-1 text-neutral-800 hover:bg-neutral-200 hover:text-neutral-900 dark:bg-opacity-50 dark:text-neutral-100 dark:hover:text-neutral-200 opacity-60" className="absolute right-2 top-2 rounded-sm p-1 text-neutral-800 opacity-60 hover:bg-neutral-200 hover:text-neutral-900 dark:bg-opacity-50 dark:text-neutral-100 dark:hover:text-neutral-200"
onClick={handleSend} onClick={handleSend}
> >
<IconSend size={18} /> <IconSend size={18} />

17
components/Chat/ModelSelect.tsx
View File

@ -1,15 +1,22 @@
import { OpenAIModel } from '@/types/openai'; import { OpenAIModel, OpenAIModelID } from '@/types/openai';
import { useTranslation } from 'next-i18next'; import { useTranslation } from 'next-i18next';
import { FC } from 'react'; import { FC } from 'react';
interface Props { interface Props {
model: OpenAIModel; model: OpenAIModel;
models: OpenAIModel[]; models: OpenAIModel[];
defaultModelId: OpenAIModelID;
onModelChange: (model: OpenAIModel) => void; onModelChange: (model: OpenAIModel) => void;
} }
export const ModelSelect: FC<Props> = ({ model, models, onModelChange }) => { export const ModelSelect: FC<Props> = ({
model,
models,
defaultModelId,
onModelChange,
}) => {
const { t } = useTranslation('chat'); const { t } = useTranslation('chat');
return ( return (
<div className="flex flex-col"> <div className="flex flex-col">
<label className="mb-2 text-left text-neutral-700 dark:text-neutral-400"> <label className="mb-2 text-left text-neutral-700 dark:text-neutral-400">
@ -19,7 +26,7 @@ export const ModelSelect: FC<Props> = ({ model, models, onModelChange }) => {
<select <select
className="w-full bg-transparent p-2" className="w-full bg-transparent p-2"
placeholder={t('Select a model') || ''} placeholder={t('Select a model') || ''}
value={model.id} value={model?.id || defaultModelId}
onChange={(e) => { onChange={(e) => {
onModelChange( onModelChange(
models.find( models.find(
@ -34,7 +41,9 @@ export const ModelSelect: FC<Props> = ({ model, models, onModelChange }) => {
value={model.id} value={model.id}
className="dark:bg-[#343541] dark:text-white" className="dark:bg-[#343541] dark:text-white"
> >
{model.name} {model.id === defaultModelId
? `Default (${model.name})`
: model.name}
</option> </option>
))} ))}
</select> </select>

3
components/Chat/SystemPrompt.tsx
View File

@ -43,8 +43,7 @@ export const SystemPrompt: FC<Props> = ({
const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => { const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
const value = e.target.value; const value = e.target.value;
const maxLength = const maxLength = conversation.model.maxLength;
conversation.model.id === OpenAIModelID.GPT_3_5 ? 12000 : 24000;
if (value.length > maxLength) { if (value.length > maxLength) {
alert( alert(

5
pages/api/chat.ts
View File

@ -1,5 +1,4 @@
import { ChatBody, Message } from '@/types/chat'; import { ChatBody, Message } from '@/types/chat';
import { OpenAIModelID } from '@/types/openai';
import { DEFAULT_SYSTEM_PROMPT } from '@/utils/app/const'; import { DEFAULT_SYSTEM_PROMPT } from '@/utils/app/const';
import { OpenAIStream } from '@/utils/server'; import { OpenAIStream } from '@/utils/server';
import tiktokenModel from '@dqbd/tiktoken/encoders/cl100k_base.json'; import tiktokenModel from '@dqbd/tiktoken/encoders/cl100k_base.json';
@ -22,8 +21,6 @@ const handler = async (req: Request): Promise<Response> => {
tiktokenModel.pat_str, tiktokenModel.pat_str,
); );
const tokenLimit = model.id === OpenAIModelID.GPT_4 ? 6000 : 3000;
let promptToSend = prompt; let promptToSend = prompt;
if (!promptToSend) { if (!promptToSend) {
promptToSend = DEFAULT_SYSTEM_PROMPT; promptToSend = DEFAULT_SYSTEM_PROMPT;
@ -38,7 +35,7 @@ const handler = async (req: Request): Promise<Response> => {
const message = messages[i]; const message = messages[i];
const tokens = encoding.encode(message.content); const tokens = encoding.encode(message.content);
if (tokenCount + tokens.length > tokenLimit) { if (tokenCount + tokens.length > model.tokenLimit) {
break; break;
} }
tokenCount += tokens.length; tokenCount += tokens.length;

39
pages/index.tsx
View File

@ -7,7 +7,12 @@ import { KeyValuePair } from '@/types/data';
import { ErrorMessage } from '@/types/error'; import { ErrorMessage } from '@/types/error';
import { LatestExportFormat, SupportedExportFormats } from '@/types/export'; import { LatestExportFormat, SupportedExportFormats } from '@/types/export';
import { Folder, FolderType } from '@/types/folder'; import { Folder, FolderType } from '@/types/folder';
import { OpenAIModel, OpenAIModelID, OpenAIModels } from '@/types/openai'; import {
fallbackModelID,
OpenAIModel,
OpenAIModelID,
OpenAIModels,
} from '@/types/openai';
import { Prompt } from '@/types/prompt'; import { Prompt } from '@/types/prompt';
import { import {
cleanConversationHistory, cleanConversationHistory,
@ -32,9 +37,13 @@ import { v4 as uuidv4 } from 'uuid';
interface HomeProps { interface HomeProps {
serverSideApiKeyIsSet: boolean; serverSideApiKeyIsSet: boolean;
defaultModelId: OpenAIModelID;
} }
const Home: React.FC<HomeProps> = ({ serverSideApiKeyIsSet }) => { const Home: React.FC<HomeProps> = ({
serverSideApiKeyIsSet,
defaultModelId,
}) => {
const { t } = useTranslation('chat'); const { t } = useTranslation('chat');
// STATE ---------------------------------------------- // STATE ----------------------------------------------
@ -371,7 +380,7 @@ const Home: React.FC<HomeProps> = ({ serverSideApiKeyIsSet }) => {
id: uuidv4(), id: uuidv4(),
name: `${t('New Conversation')}`, name: `${t('New Conversation')}`,
messages: [], messages: [],
model: OpenAIModels[OpenAIModelID.GPT_3_5], model: lastConversation?.model || defaultModelId,
prompt: DEFAULT_SYSTEM_PROMPT, prompt: DEFAULT_SYSTEM_PROMPT,
folderId: null, folderId: null,
}; };
@ -404,7 +413,7 @@ const Home: React.FC<HomeProps> = ({ serverSideApiKeyIsSet }) => {
id: uuidv4(), id: uuidv4(),
name: 'New conversation', name: 'New conversation',
messages: [], messages: [],
model: OpenAIModels[OpenAIModelID.GPT_3_5], model: OpenAIModels[defaultModelId],
prompt: DEFAULT_SYSTEM_PROMPT, prompt: DEFAULT_SYSTEM_PROMPT,
folderId: null, folderId: null,
}); });
@ -438,7 +447,7 @@ const Home: React.FC<HomeProps> = ({ serverSideApiKeyIsSet }) => {
id: uuidv4(), id: uuidv4(),
name: 'New conversation', name: 'New conversation',
messages: [], messages: [],
model: OpenAIModels[OpenAIModelID.GPT_3_5], model: OpenAIModels[defaultModelId],
prompt: DEFAULT_SYSTEM_PROMPT, prompt: DEFAULT_SYSTEM_PROMPT,
folderId: null, folderId: null,
}); });
@ -486,7 +495,7 @@ const Home: React.FC<HomeProps> = ({ serverSideApiKeyIsSet }) => {
name: `Prompt ${prompts.length + 1}`, name: `Prompt ${prompts.length + 1}`,
description: '', description: '',
content: '', content: '',
model: OpenAIModels[OpenAIModelID.GPT_3_5], model: OpenAIModels[defaultModelId],
folderId: null, folderId: null,
}; };
@ -601,7 +610,7 @@ const Home: React.FC<HomeProps> = ({ serverSideApiKeyIsSet }) => {
id: uuidv4(), id: uuidv4(),
name: 'New conversation', name: 'New conversation',
messages: [], messages: [],
model: OpenAIModels[OpenAIModelID.GPT_3_5], model: OpenAIModels[defaultModelId],
prompt: DEFAULT_SYSTEM_PROMPT, prompt: DEFAULT_SYSTEM_PROMPT,
folderId: null, folderId: null,
}); });
@ -663,7 +672,7 @@ const Home: React.FC<HomeProps> = ({ serverSideApiKeyIsSet }) => {
</button> </button>
<div <div
onClick={handleToggleChatbar} onClick={handleToggleChatbar}
className="absolute top-0 left-0 z-10 w-full h-full bg-black opacity-70 sm:hidden" className="absolute top-0 left-0 z-10 h-full w-full bg-black opacity-70 sm:hidden"
></div> ></div>
</div> </div>
) : ( ) : (
@ -681,6 +690,7 @@ const Home: React.FC<HomeProps> = ({ serverSideApiKeyIsSet }) => {
messageIsStreaming={messageIsStreaming} messageIsStreaming={messageIsStreaming}
apiKey={apiKey} apiKey={apiKey}
serverSideApiKeyIsSet={serverSideApiKeyIsSet} serverSideApiKeyIsSet={serverSideApiKeyIsSet}
defaultModelId={defaultModelId}
modelError={modelError} modelError={modelError}
models={models} models={models}
loading={loading} loading={loading}
@ -713,7 +723,7 @@ const Home: React.FC<HomeProps> = ({ serverSideApiKeyIsSet }) => {
</button> </button>
<div <div
onClick={handleTogglePromptbar} onClick={handleTogglePromptbar}
className="absolute top-0 left-0 z-10 w-full h-full bg-black opacity-70 sm:hidden" className="absolute top-0 left-0 z-10 h-full w-full bg-black opacity-70 sm:hidden"
></div> ></div>
</div> </div>
) : ( ) : (
@ -733,15 +743,24 @@ const Home: React.FC<HomeProps> = ({ serverSideApiKeyIsSet }) => {
export default Home; export default Home;
export const getServerSideProps: GetServerSideProps = async ({ locale }) => { export const getServerSideProps: GetServerSideProps = async ({ locale }) => {
const defaultModelId =
(process.env.DEFAULT_MODEL &&
Object.values(OpenAIModelID).includes(
process.env.DEFAULT_MODEL as OpenAIModelID,
) &&
process.env.DEFAULT_MODEL) ||
fallbackModelID;
return { return {
props: { props: {
serverSideApiKeyIsSet: !!process.env.OPENAI_API_KEY, serverSideApiKeyIsSet: !!process.env.OPENAI_API_KEY,
defaultModelId,
...(await serverSideTranslations(locale ?? 'en', [ ...(await serverSideTranslations(locale ?? 'en', [
'common', 'common',
'chat', 'chat',
'sidebar', 'sidebar',
'markdown', 'markdown',
'promptbar' 'promptbar',
])), ])),
}, },
}; };

11
types/openai.ts
View File

@ -1,6 +1,8 @@
export interface OpenAIModel { export interface OpenAIModel {
id: string; id: string;
name: string; name: string;
maxLength: number; // maximum length of a message
tokenLimit: number;
} }
export enum OpenAIModelID { export enum OpenAIModelID {
@ -8,13 +10,20 @@ export enum OpenAIModelID {
GPT_4 = 'gpt-4', GPT_4 = 'gpt-4',
} }
// in case the `DEFAULT_MODEL` environment variable is not set or set to an unsupported model
export const fallbackModelID = OpenAIModelID.GPT_3_5;
export const OpenAIModels: Record<OpenAIModelID, OpenAIModel> = { export const OpenAIModels: Record<OpenAIModelID, OpenAIModel> = {
[OpenAIModelID.GPT_3_5]: { [OpenAIModelID.GPT_3_5]: {
id: OpenAIModelID.GPT_3_5, id: OpenAIModelID.GPT_3_5,
name: 'Default (GPT-3.5)', name: 'GPT-3.5',
maxLength: 12000,
tokenLimit: 3000,
}, },
[OpenAIModelID.GPT_4]: { [OpenAIModelID.GPT_4]: {
id: OpenAIModelID.GPT_4, id: OpenAIModelID.GPT_4,
name: 'GPT-4', name: 'GPT-4',
maxLength: 24000,
tokenLimit: 6000,
}, },
}; };