Skip to content

Commit

Permalink
Prettified Code!
Browse files Browse the repository at this point in the history
  • Loading branch information
@cheeseonamonkey @actions-user
cheeseonamonkey authored and actions-user committed Mar 30, 2024
1 parent ce09786 commit f6f7a5d
Show file tree
Hide file tree
Showing 4 changed files with 277 additions and 183 deletions.
23 changes: 18 additions & 5 deletions src/api/api.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,29 @@ import { ShareGPTSubmitBodyInterface } from '@type/api';
import { ConfigInterface, MessageInterface, ModelDefinition } from '@type/chat';
import { isAzureEndpoint, uuidv4 } from '@utils/api';

const getHeaders = (apiKey?: string, customHeaders?: Record<string, string>): HeadersInit => {
const headers: HeadersInit = { 'Content-Type': 'application/json', ...customHeaders };
const getHeaders = (
apiKey?: string,
customHeaders?: Record<string, string>
): HeadersInit => {
const headers: HeadersInit = {
'Content-Type': 'application/json',
...customHeaders,
};
if (apiKey) headers.Authorization = `Bearer ${apiKey}`;
return headers;
};

const buildEndpoint = (endpoint: string, modelDef: ModelDefinition, apiKey?: string): string => {
const buildEndpoint = (
endpoint: string,
modelDef: ModelDefinition,
apiKey?: string
): string => {
if (isAzureEndpoint(endpoint) && apiKey) {
const modelName = modelDef.model;
const apiVersion = '2023-03-15-preview';
const path = `openai/deployments/${modelName}/chat/completions?api-version=${apiVersion}`;
if (!endpoint.endsWith(path)) endpoint += endpoint.endsWith('/') ? path : `/${path}`;
if (!endpoint.endsWith(path))
endpoint += endpoint.endsWith('/') ? path : `/${path}`;
}
return endpoint;
};
Expand All @@ -27,7 +38,9 @@ const handleErrorResponse = async (response: Response): Promise<never> => {
throw new Error(errorMessage);
} else if (response.status === 429 || !response.ok) {
let error = text;
if (text.includes('insufficient_quota')) error += '\nMessage from KoalaClient:\nWe recommend changing your API endpoint or API key';
if (text.includes('insufficient_quota'))
error +=
'\nMessage from KoalaClient:\nWe recommend changing your API endpoint or API key';
if (response.status === 429) error += '\nRate limited!';
throw new Error(error);
}
Expand Down
121 changes: 89 additions & 32 deletions src/components/ApiMenu/ApiMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,22 +15,26 @@ import DownChevronArrow from '@icon/DownChevronArrow';
import { tokenCostToCost } from '@utils/messageUtils';
import { ModelInput } from './ModelInput';


const ApiMenu = ({ setIsModalOpen }: { setIsModalOpen: React.Dispatch<React.SetStateAction<boolean>> }) => {
const ApiMenu = ({
setIsModalOpen,
}: {
setIsModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
}) => {
const { t } = useTranslation(['main', 'api']);

const apiAuth = useStore(state => state.apiAuth);
const setApiAuth = useStore(state => state.setApiAuth);
const modelDefs = useStore(state => state.modelDefs);
const setModelDefs = useStore(state => state.setModelDefs);
const totalTokenUsed = useStore(state => state.totalTokenUsed);
const setTotalTokenUsed = useStore(state => state.setTotalTokenUsed);
const costOfDeleted = useStore(state => state.costOfDeleted);
const setCostOfDeleted = useStore(state => state.setCostOfDeleted);
const apiAuth = useStore((state) => state.apiAuth);
const setApiAuth = useStore((state) => state.setApiAuth);
const modelDefs = useStore((state) => state.modelDefs);
const setModelDefs = useStore((state) => state.setModelDefs);
const totalTokenUsed = useStore((state) => state.totalTokenUsed);
const setTotalTokenUsed = useStore((state) => state.setTotalTokenUsed);
const costOfDeleted = useStore((state) => state.costOfDeleted);
const setCostOfDeleted = useStore((state) => state.setCostOfDeleted);

const [_apiAuth, _setApiAuth] = useState<EndpointAuth[]>(apiAuth);
const [_modelDefs, _setModelDefs] = useState<ModelDefinition[]>(modelDefs);
const [_totalTokenUsed, _setTotalTokenUsed] = useState<TotalTokenUsed>(totalTokenUsed);
const [_totalTokenUsed, _setTotalTokenUsed] =
useState<TotalTokenUsed>(totalTokenUsed);

const [activeDropdown, setActiveDropdown] = useState<null | number>(null);

Expand All @@ -42,11 +46,11 @@ const ApiMenu = ({ setIsModalOpen }: { setIsModalOpen: React.Dispatch<React.SetS
};

const addApi = () => {
_setApiAuth(prev => [...prev, { endpoint: '', apiKey: '' }]);
_setApiAuth((prev) => [...prev, { endpoint: '', apiKey: '' }]);
};

const deleteApi = (index: number) => {
_setApiAuth(prev => {
_setApiAuth((prev) => {
const newApiAuth = [...prev];
newApiAuth.splice(index, 1);
return newApiAuth;
Expand All @@ -61,7 +65,7 @@ const ApiMenu = ({ setIsModalOpen }: { setIsModalOpen: React.Dispatch<React.SetS
};

const addModel = () => {
_setModelDefs(prev => [
_setModelDefs((prev) => [
...prev,
{
name: '',
Expand All @@ -77,82 +81,124 @@ const ApiMenu = ({ setIsModalOpen }: { setIsModalOpen: React.Dispatch<React.SetS
};

const setHideModel = (index: number, value: boolean) => {
_setModelDefs(prev => {
_setModelDefs((prev) => {
const newModelDefs = [...prev];
newModelDefs[index].swap_visible = value;
return newModelDefs;
});
};

const setModelEndpoint = (index: number, value: number) => {
_setModelDefs(prev => {
_setModelDefs((prev) => {
const newModelDefs = [...prev];
newModelDefs[index].endpoint = value;
return newModelDefs;
});
};

const deleteModel = (index: number) => {
const modelCostHistory = tokenCostToCost(_totalTokenUsed[index], index, modelDefs);
const modelCostHistory = tokenCostToCost(
_totalTokenUsed[index],
index,
modelDefs
);

setCostOfDeleted(costOfDeleted + modelCostHistory);

_setTotalTokenUsed(prev => {
_setTotalTokenUsed((prev) => {
const newTotalTokenUsed = { ...prev };
delete newTotalTokenUsed[index];
return newTotalTokenUsed;
});

_setModelDefs(prev => {
_setModelDefs((prev) => {
const newModelDefs = [...prev];
newModelDefs.splice(index, 1);
return newModelDefs;
});
};

return (
<PopupModal title={t('api') as string} setIsModalOpen={setIsModalOpen} handleConfirm={handleSave}>
<div className='p-6 border-b border-custom-white text-custom-white' onClick={() => { if (activeDropdown != null) { setActiveDropdown(null); } }}>
<PopupModal
title={t('api') as string}
setIsModalOpen={setIsModalOpen}
handleConfirm={handleSave}
>
<div
className='p-6 border-b border-custom-white text-custom-white'
onClick={() => {
if (activeDropdown != null) {
setActiveDropdown(null);
}
}}
>
<div className='min-w-fit text-custom-white text-sm flex flex-col gap-2 leading-relaxed'>
<p>Deleting an endpoint will delete all associated models.</p>
<p>Whisper record always uses the first endpoint.</p>
<div className='flex flex-col max-w-full'>
<div className='flex items-center border-b border-neutral-base/50 mb-1 p-1'>
<div className='w-3/4 text-center font-bold p-2'>Endpoint URL</div>
<div className='w-3/4 text-center font-bold p-2'>
Endpoint URL
</div>
<div className='w-1/4 text-center font-bold p-2'>API Key</div>
<div className='p-1 ml-2 h-4 w-4'></div>
</div>
{_apiAuth.map((auth, index) => (
<div key={'api' + index} className='flex items-center border-b border-neutral-base/50 mb-1 p-1'>
<div
key={'api' + index}
className='flex items-center border-b border-neutral-base/50 mb-1 p-1'
>
<div className='w-3/4 pr-2'>
<input
type='text'
className='text-custom-black p-3 text-sm border-none bg-custom-white rounded-md m-0 w-full mr-0 h-8 focus:outline-none'
value={auth.endpoint}
onChange={e => { _setApiAuth(prev => { const newApiKeys = [...prev]; newApiKeys[index].endpoint = e.target.value; return newApiKeys; }); }}
onChange={(e) => {
_setApiAuth((prev) => {
const newApiKeys = [...prev];
newApiKeys[index].endpoint = e.target.value;
return newApiKeys;
});
}}
/>
</div>
<div className='w-1/4 pl-2'>
<input
type='password'
className='text-custom-black p-3 text-sm border-none bg-custom-white rounded-md m-0 w-full mr-0 h-8 focus:outline-none'
value={auth.apiKey}
onChange={e => { _setApiAuth(prev => { const newApiKeys = [...prev]; newApiKeys[index].apiKey = e.target.value; return newApiKeys; }); }}
onChange={(e) => {
_setApiAuth((prev) => {
const newApiKeys = [...prev];
newApiKeys[index].apiKey = e.target.value;
return newApiKeys;
});
}}
/>
</div>
<div className='p-1 ml-2 hover:text-neutral-dark hover:bg-custom-white hover:rounded' onClick={() => deleteApi(index)}>
<CrossIcon className={`${_apiAuth.length > 1 ? '' : 'invisible'}`} />
<div
className='p-1 ml-2 hover:text-neutral-dark hover:bg-custom-white hover:rounded'
onClick={() => deleteApi(index)}
>
<CrossIcon
className={`${_apiAuth.length > 1 ? '' : 'invisible'}`}
/>
</div>
</div>
))}
</div>
<div className='flex justify-center mt-0 mb-8'>
<div className='cursor-pointer p-2 mt-0 rounded-xl btn btn-neutral' onClick={addApi}>
<div
className='cursor-pointer p-2 mt-0 rounded-xl btn btn-neutral'
onClick={addApi}
>
<PlusIcon />
</div>
</div>
<div className='flex flex-col max-w-full'>
<div className='text-center font-bold items-center border-b border-neutral-base/50 mb-1 p-1'>Models</div>
<div className='text-center font-bold items-center border-b border-neutral-base/50 mb-1 p-1'>
Models
</div>
{_modelDefs.map((modelDef, index) => (
<ModelInput
key={index}
Expand All @@ -167,19 +213,30 @@ const ApiMenu = ({ setIsModalOpen }: { setIsModalOpen: React.Dispatch<React.SetS
))}
</div>
<div className='flex justify-center mt-0 mb-8'>
<div className='cursor-pointer p-2 mt-0 rounded-xl btn btn-neutral' onClick={addModel}>
<div
className='cursor-pointer p-2 mt-0 rounded-xl btn btn-neutral'
onClick={addModel}
>
<PlusIcon />
</div>
</div>
<p>* Prompt costs are in dollars per 1000 tokens.</p>
<p>Title generation always uses the first model.</p>
<p>Hiding a model option will only remove it from the top-bar dropdown.</p>
<p>
Hiding a model option will only remove it from the top-bar dropdown.
</p>
<p>
<Trans
i18nKey='apiKey.howTo'
ns='api'
components={[
<a key={null} href='https://platform.openai.com/account/api-keys' className='link' target='_blank' rel='noreferrer' />,
<a
key={null}
href='https://platform.openai.com/account/api-keys'
className='link'
target='_blank'
rel='noreferrer'
/>,
]}
/>{' '}
{t('securityMessage', { ns: 'api' })}
Expand Down
Loading

0 comments on commit f6f7a5d

Please sign in to comment.