Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-22 03:10:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: Google Gemini ❇️ (#1355)

Browse source 
* refactor: add gemini-pro to google Models list; use defaultModels for central model listing

* refactor(SetKeyDialog): create useMultipleKeys hook to use for Azure, export `isJson` from utils, use EModelEndpoint

* refactor(useUserKey): change variable names to make keyName setting more clear

* refactor(FileUpload): allow passing container className string

* feat(GoogleClient): Gemini support

* refactor(GoogleClient): alternate stream speed for Gemini models

* feat(Gemini): styling/settings configuration for Gemini

* refactor(GoogleClient): substract max response tokens from max context tokens if context is above 32k (I/O max is combined between the two)

* refactor(tokens): correct google max token counts and subtract max response tokens when input/output count are combined towards max context count

* feat(google/initializeClient): handle both local and user_provided credentials and write tests

* fix(GoogleClient): catch if credentials are undefined, handle if serviceKey is string or object correctly, handle no examples passed, throw error if not a Generative Language model and no service account JSON key is provided, throw error if it is a Generative m
odel, but not google API key was provided

* refactor(loadAsyncEndpoints/google): activate Google endpoint if either the service key JSON file is provided in /api/data, or a GOOGLE_KEY is defined.

* docs: updated Google configuration

* fix(ci): Mock import of Service Account Key JSON file (auth.json)

* Update apis_and_tokens.md

* feat: increase max output tokens slider for gemini pro

* refactor(GoogleSettings): handle max and default maxOutputTokens on model change

* chore: add sensitive redact regex

* docs: add warning about data privacy

* Update apis_and_tokens.md
This commit is contained in:
Danny Avila 2023-12-15 02:18:07 -05:00 • committed by GitHub
parent d259431316
commit 561ce8e86a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
37 changed files with 702 additions and 219 deletions
Download patch file Download diff file Expand all files Collapse all files

2
client/src/components/Chat/Input/HeaderOptions.tsx
View file

@ -93,7 +93,7 @@ export default function OptionsBar() {
visible={showPopover}
saveAsPreset={saveAsPreset}
closePopover={() => setShowPopover(false)}
PopoverButtons={<PopoverButtons endpoint={endpoint} />}
PopoverButtons={<PopoverButtons />}
>
<div className="px-4 py-4">
<EndpointSettings

28
client/src/components/Chat/Input/PopoverButtons.tsx
View file

@ -13,18 +13,28 @@ type TPopoverButton = {
};
export default function PopoverButtons({
endpoint,
buttonClass,
iconClass = '',
}: {
endpoint: EModelEndpoint;
buttonClass?: string;
iconClass?: string;
}) {
const { optionSettings, setOptionSettings, showAgentSettings, setShowAgentSettings } =
useChatContext();
const {
conversation,
optionSettings,
setOptionSettings,
showAgentSettings,
setShowAgentSettings,
} = useChatContext();
const { model, endpoint } = conversation ?? {};
const isGenerativeModel = model?.toLowerCase()?.includes('gemini');
const isChatModel = !isGenerativeModel && model?.toLowerCase()?.includes('chat');
const isTextModel = !isGenerativeModel && !isChatModel && /code|text/.test(model ?? '');
const { showExamples } = optionSettings;
const showExamplesButton = !isGenerativeModel && !isTextModel && isChatModel;
const { showExamples, isCodeChat } = optionSettings;
const triggerExamples = () =>
setOptionSettings((prev) => ({ ...prev, showExamples: !prev.showExamples }));
@ -32,7 +42,7 @@ export default function PopoverButtons({
[EModelEndpoint.google]: [
{
label: (showExamples ? 'Hide' : 'Show') + ' Examples',
buttonClass: isCodeChat ? 'disabled' : '',
buttonClass: isGenerativeModel || isTextModel ? 'disabled' : '',
handler: triggerExamples,
icon: <MessagesSquared className={cn('mr-1 w-[14px]', iconClass)} />,
},
@ -47,11 +57,15 @@ export default function PopoverButtons({
],
};
const endpointButtons = buttons[endpoint];
const endpointButtons = buttons[endpoint ?? ''];
if (!endpointButtons) {
return null;
}
if (endpoint === EModelEndpoint.google && !showExamplesButton) {
return null;
}
return (
<div>
{endpointButtons.map((button, index) => (

11
client/src/components/Endpoints/Icon.tsx
View file

@ -6,6 +6,7 @@ import {
AzureMinimalIcon,
PaLMIcon,
CodeyIcon,
GeminiIcon,
} from '~/components/svg';
import { useAuthContext } from '~/hooks/AuthContext';
import { IconProps } from '~/common';
@ -59,12 +60,18 @@ const Icon: React.FC<IconProps> = (props) => {
name: 'Plugins',
},
[EModelEndpoint.google]: {
icon: model?.includes('code') ? (
icon: model?.toLowerCase()?.includes('code') ? (
<CodeyIcon size={size * 0.75} />
) : model?.toLowerCase()?.includes('gemini') ? (
<GeminiIcon size={size * 0.7} />
) : (
<PaLMIcon size={size * 0.7} />
),
name: model?.includes('code') ? 'Codey' : 'PaLM2',
name: model?.toLowerCase()?.includes('code')
? 'Codey'
: model?.toLowerCase()?.includes('gemini')
? 'Gemini'
: 'PaLM2',
},
[EModelEndpoint.anthropic]: {
icon: <AnthropicIcon size={size * 0.5555555555555556} />,

44
client/src/components/Endpoints/Settings/Google.tsx
View file

@ -1,4 +1,4 @@
import React from 'react';
import { useEffect } from 'react';
import TextareaAutosize from 'react-textarea-autosize';
import { EModelEndpoint, endpointSettings } from 'librechat-data-provider';
import type { TModelSelectProps } from '~/common';
@ -18,11 +18,32 @@ import { useLocalize } from '~/hooks';
export default function Settings({ conversation, setOption, models, readonly }: TModelSelectProps) {
const localize = useLocalize();
const google = endpointSettings[EModelEndpoint.google];
const { model, modelLabel, promptPrefix, temperature, topP, topK, maxOutputTokens } =
conversation ?? {};
const isGeminiPro = model?.toLowerCase()?.includes('gemini-pro');
const maxOutputTokensMax = isGeminiPro
? google.maxOutputTokens.maxGeminiPro
: google.maxOutputTokens.max;
const maxOutputTokensDefault = isGeminiPro
? google.maxOutputTokens.defaultGeminiPro
: google.maxOutputTokens.default;
useEffect(
() => {
if (model) {
setOption('maxOutputTokens')(Math.min(Number(maxOutputTokens) ?? 0, maxOutputTokensMax));
}
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[model],
);
if (!conversation) {
return null;
}
const { model, modelLabel, promptPrefix, temperature, topP, topK, maxOutputTokens } =
conversation;
const setModel = setOption('model');
const setModelLabel = setOption('modelLabel');
@ -32,8 +53,9 @@ export default function Settings({ conversation, setOption, models, readonly }:
const setTopK = setOption('topK');
const setMaxOutputTokens = setOption('maxOutputTokens');
const isTextModel = !model?.includes('chat') && /code|text/.test(model ?? '');
const google = endpointSettings[EModelEndpoint.google];
const isGenerativeModel = model?.toLowerCase()?.includes('gemini');
const isChatModel = !isGenerativeModel && model?.toLowerCase()?.includes('chat');
const isTextModel = !isGenerativeModel && !isChatModel && /code|text/.test(model ?? '');
return (
<div className="grid grid-cols-5 gap-6">
@ -216,15 +238,15 @@ export default function Settings({ conversation, setOption, models, readonly }:
<Label htmlFor="max-tokens-int" className="text-left text-sm font-medium">
{localize('com_endpoint_max_output_tokens')}{' '}
<small className="opacity-40">
({localize('com_endpoint_default_with_num', google.maxOutputTokens.default + '')})
({localize('com_endpoint_default_with_num', maxOutputTokensDefault + '')})
</small>
</Label>
<InputNumber
id="max-tokens-int"
disabled={readonly}
value={maxOutputTokens}
onChange={(value) => setMaxOutputTokens(value ?? google.maxOutputTokens.default)}
max={google.maxOutputTokens.max}
onChange={(value) => setMaxOutputTokens(value ?? maxOutputTokensDefault)}
max={maxOutputTokensMax}
min={google.maxOutputTokens.min}
step={google.maxOutputTokens.step}
controls={false}
@ -239,10 +261,10 @@ export default function Settings({ conversation, setOption, models, readonly }:
</div>
<Slider
disabled={readonly}
value={[maxOutputTokens ?? google.maxOutputTokens.default]}
value={[maxOutputTokens ?? maxOutputTokensDefault]}
onValueChange={(value) => setMaxOutputTokens(value[0])}
doubleClickHandler={() => setMaxOutputTokens(google.maxOutputTokens.default)}
max={google.maxOutputTokens.max}
doubleClickHandler={() => setMaxOutputTokens(maxOutputTokensDefault)}
max={maxOutputTokensMax}
min={google.maxOutputTokens.min}
step={google.maxOutputTokens.step}
className="flex h-4 w-full"

9
client/src/components/Endpoints/Settings/MultiView/GoogleSettings.tsx
View file

@ -12,9 +12,12 @@ export default function GoogleView({ conversation, models, isPreset = false }) {
return null;
}
const { examples } = conversation;
const { showExamples, isCodeChat } = optionSettings;
return showExamples && !isCodeChat ? (
const { examples, model } = conversation;
const isGenerativeModel = model?.toLowerCase()?.includes('gemini');
const isChatModel = !isGenerativeModel && model?.toLowerCase()?.includes('chat');
const isTextModel = !isGenerativeModel && !isChatModel && /code|text/.test(model ?? '');
const { showExamples } = optionSettings;
return showExamples && isChatModel && !isTextModel ? (
<Examples
examples={examples ?? [{ input: { content: '' }, output: { content: '' } }]}
setExample={setExample}

3
client/src/components/Input/EndpointMenu/FileUpload.tsx
View file

@ -6,6 +6,7 @@ import { useLocalize } from '~/hooks';
type FileUploadProps = {
onFileSelected: (jsonData: Record<string, unknown>) => void;
className?: string;
containerClassName?: string;
successText?: string;
invalidText?: string;
validator?: ((data: Record<string, unknown>) => boolean) | null;
@ -16,6 +17,7 @@ type FileUploadProps = {
const FileUpload: React.FC<FileUploadProps> = ({
onFileSelected,
className = '',
containerClassName = '',
successText = null,
invalidText = null,
validator = null,
@ -66,6 +68,7 @@ const FileUpload: React.FC<FileUploadProps> = ({
className={cn(
'mr-1 flex h-auto cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-medium font-normal transition-colors hover:bg-slate-200 hover:text-green-700 dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-green-500',
statusColor,
containerClassName,
)}
>
<FileUp className="mr-1 flex w-[22px] items-center stroke-1" />

54
client/src/components/Input/SetKeyDialog/GoogleConfig.tsx
View file

@ -1,8 +1,11 @@
import React from 'react';
import { object, string } from 'zod';
import { AuthKeys } from 'librechat-data-provider';
import type { TConfigProps } from '~/common';
import FileUpload from '../EndpointMenu/FileUpload';
import { useLocalize } from '~/hooks';
import FileUpload from '~/components/Input/EndpointMenu/FileUpload';
import { useLocalize, useMultipleKeys } from '~/hooks';
import InputWithLabel from './InputWithLabel';
import { Label } from '~/components/ui';
const CredentialsSchema = object({
client_email: string().email().min(3),
@ -15,20 +18,43 @@ const validateCredentials = (credentials: Record<string, unknown>) => {
return result.success;
};
const GoogleConfig = ({ setUserKey }: Pick<TConfigProps, 'setUserKey'>) => {
const GoogleConfig = ({ userKey, setUserKey }: Pick<TConfigProps, 'userKey' | 'setUserKey'>) => {
const localize = useLocalize();
const { getMultiKey, setMultiKey } = useMultipleKeys(setUserKey);
return (
<FileUpload
id="googleKey"
className="w-full"
text={localize('com_endpoint_config_key_import_json_key')}
successText={localize('com_endpoint_config_key_import_json_key_success')}
invalidText={localize('com_endpoint_config_key_import_json_key_invalid')}
validator={validateCredentials}
onFileSelected={(data) => {
setUserKey(JSON.stringify(data));
}}
/>
<>
<div className="flex flex-row">
<Label htmlFor={AuthKeys.GOOGLE_SERVICE_KEY} className="text-left text-sm font-medium">
{localize('com_endpoint_config_google_service_key')}
</Label>
<div className="mx-1 text-left text-sm text-gray-700 dark:text-gray-400">
{localize('com_endpoint_config_google_cloud_platform')}
</div>
<br />
</div>
<FileUpload
id={AuthKeys.GOOGLE_SERVICE_KEY}
className="w-full"
containerClassName="dark:bg-gray-700 h-10 max-h-10 w-full resize-none py-2 dark:ring-1 dark:ring-gray-400"
text={localize('com_endpoint_config_key_import_json_key')}
successText={localize('com_endpoint_config_key_import_json_key_success')}
invalidText={localize('com_endpoint_config_key_import_json_key_invalid')}
validator={validateCredentials}
onFileSelected={(data) => {
setMultiKey(AuthKeys.GOOGLE_SERVICE_KEY, JSON.stringify(data), userKey);
}}
/>
<InputWithLabel
id={AuthKeys.GOOGLE_API_KEY}
value={getMultiKey(AuthKeys.GOOGLE_API_KEY, userKey) ?? ''}
onChange={(e: { target: { value: string } }) =>
setMultiKey(AuthKeys.GOOGLE_API_KEY, e.target.value ?? '', userKey)
}
label={localize('com_endpoint_config_google_api_key')}
subLabel={localize('com_endpoint_config_google_gemini_api')}
/>
</>
);
};

61
client/src/components/Input/SetKeyDialog/HelpText.tsx
View file

@ -55,28 +55,45 @@ function HelpText({ endpoint }: { endpoint: string }) {
</small>
),
[EModelEndpoint.google]: (
<small className="break-all text-gray-600">
{localize('com_endpoint_config_key_google_need_to')}{' '}
<a
target="_blank"
href="https://console.cloud.google.com/vertex-ai"
rel="noreferrer"
className="text-blue-600 underline"
>
{localize('com_endpoint_config_key_google_vertex_ai')}
</a>{' '}
{localize('com_endpoint_config_key_google_vertex_api')}{' '}
<a
target="_blank"
href="https://console.cloud.google.com/projectselector/iam-admin/serviceaccounts/create?walkthrough_id=iam--create-service-account#step_index=1"
rel="noreferrer"
className="text-blue-600 underline"
>
{localize('com_endpoint_config_key_google_service_account')}
</a>
{'. '}
{localize('com_endpoint_config_key_google_vertex_api_role')}
</small>
<>
<small className="break-all text-gray-600">
{localize('com_endpoint_config_google_service_key')}
{': '}
{localize('com_endpoint_config_key_google_need_to')}{' '}
<a
target="_blank"
href="https://console.cloud.google.com/vertex-ai"
rel="noreferrer"
className="text-blue-600 underline"
>
{localize('com_endpoint_config_key_google_vertex_ai')}
</a>{' '}
{localize('com_endpoint_config_key_google_vertex_api')}{' '}
<a
target="_blank"
href="https://console.cloud.google.com/projectselector/iam-admin/serviceaccounts/create?walkthrough_id=iam--create-service-account#step_index=1"
rel="noreferrer"
className="text-blue-600 underline"
>
{localize('com_endpoint_config_key_google_service_account')}
</a>
{'. '}
{localize('com_endpoint_config_key_google_vertex_api_role')}
</small>
<small className="break-all text-gray-600">
{localize('com_endpoint_config_google_api_key')}
{': '}
{localize('com_endpoint_config_google_api_info')}{' '}
<a
target="_blank"
href="https://makersuite.google.com/app/apikey"
rel="noreferrer"
className="text-blue-600 underline"
>
{localize('com_endpoint_config_click_here')}
</a>{' '}
</small>
</>
),
};

16
client/src/components/Input/SetKeyDialog/InputWithLabel.tsx
View file

@ -1,23 +1,29 @@
import React, { ChangeEvent, FC } from 'react';
import { Input, Label } from '~/components';
import { cn, defaultTextPropsLabel, removeFocusOutlines } from '~/utils/';
import { Input, Label } from '~/components/ui';
import { useLocalize } from '~/hooks';
interface InputWithLabelProps {
value: string;
onChange: (event: ChangeEvent<HTMLInputElement>) => void;
label: string;
subLabel?: string;
id: string;
}
const InputWithLabel: FC<InputWithLabelProps> = ({ value, onChange, label, id }) => {
const InputWithLabel: FC<InputWithLabelProps> = ({ value, onChange, label, subLabel, id }) => {
const localize = useLocalize();
return (
<>
<Label htmlFor={id} className="text-left text-sm font-medium">
{label}
<div className="flex flex-row">
<Label htmlFor={id} className="text-left text-sm font-medium">
{label}
</Label>
{subLabel && (
<div className="mx-1 text-left text-sm text-gray-700 dark:text-gray-400">{subLabel}</div>
)}
<br />
</Label>
</div>
<Input
id={id}

46
client/src/components/Input/SetKeyDialog/OpenAIConfig.tsx
View file

@ -3,20 +3,14 @@ import React, { useEffect, useState } from 'react';
// TODO: Temporarily remove checkbox until Plugins solution for Azure is figured out
// import * as Checkbox from '@radix-ui/react-checkbox';
// import { CheckIcon } from '@radix-ui/react-icons';
import { useMultipleKeys } from '~/hooks/Input';
import InputWithLabel from './InputWithLabel';
import type { TConfigProps } from '~/common';
function isJson(str: string) {
try {
JSON.parse(str);
} catch (e) {
return false;
}
return true;
}
import { isJson } from '~/utils/json';
const OpenAIConfig = ({ userKey, setUserKey, endpoint }: TConfigProps) => {
const [showPanel, setShowPanel] = useState(endpoint === 'azureOpenAI');
const { getMultiKey: getAzure, setMultiKey: setAzure } = useMultipleKeys(setUserKey);
useEffect(() => {
if (isJson(userKey)) {
@ -31,24 +25,6 @@ const OpenAIConfig = ({ userKey, setUserKey, endpoint }: TConfigProps) => {
}
}, [showPanel]);
function getAzure(name: string) {
if (isJson(userKey)) {
const newKey = JSON.parse(userKey);
return newKey[name];
} else {
return '';
}
}
function setAzure(name: string, value: number | string | boolean) {
let newKey = {};
if (isJson(userKey)) {
newKey = JSON.parse(userKey);
}
newKey[name] = value;
setUserKey(JSON.stringify(newKey));
}
return (
<>
{!showPanel ? (
@ -64,36 +40,36 @@ const OpenAIConfig = ({ userKey, setUserKey, endpoint }: TConfigProps) => {
<>
<InputWithLabel
id={'instanceNameLabel'}
value={getAzure('azureOpenAIApiInstanceName') ?? ''}
value={getAzure('azureOpenAIApiInstanceName', userKey) ?? ''}
onChange={(e: { target: { value: string } }) =>
setAzure('azureOpenAIApiInstanceName', e.target.value ?? '')
setAzure('azureOpenAIApiInstanceName', e.target.value ?? '', userKey)
}
label={'Azure OpenAI Instance Name'}
/>
<InputWithLabel
id={'deploymentNameLabel'}
value={getAzure('azureOpenAIApiDeploymentName') ?? ''}
value={getAzure('azureOpenAIApiDeploymentName', userKey) ?? ''}
onChange={(e: { target: { value: string } }) =>
setAzure('azureOpenAIApiDeploymentName', e.target.value ?? '')
setAzure('azureOpenAIApiDeploymentName', e.target.value ?? '', userKey)
}
label={'Azure OpenAI Deployment Name'}
/>
<InputWithLabel
id={'versionLabel'}
value={getAzure('azureOpenAIApiVersion') ?? ''}
value={getAzure('azureOpenAIApiVersion', userKey) ?? ''}
onChange={(e: { target: { value: string } }) =>
setAzure('azureOpenAIApiVersion', e.target.value ?? '')
setAzure('azureOpenAIApiVersion', e.target.value ?? '', userKey)
}
label={'Azure OpenAI API Version'}
/>
<InputWithLabel
id={'apiKeyLabel'}
value={getAzure('azureOpenAIApiKey') ?? ''}
value={getAzure('azureOpenAIApiKey', userKey) ?? ''}
onChange={(e: { target: { value: string } }) =>
setAzure('azureOpenAIApiKey', e.target.value ?? '')
setAzure('azureOpenAIApiKey', e.target.value ?? '', userKey)
}
label={'Azure OpenAI API Key'}
/>

11
client/src/components/Messages/Content/Error.tsx
View file

@ -1,17 +1,8 @@
import React from 'react';
import type { TOpenAIMessage } from 'librechat-data-provider';
import { formatJSON, extractJson } from '~/utils/json';
import { formatJSON, extractJson, isJson } from '~/utils/json';
import CodeBlock from './CodeBlock';
const isJson = (str: string) => {
try {
JSON.parse(str);
} catch (e) {
return false;
}
return true;
};
type TConcurrent = {
limit: number;
};

36
client/src/components/svg/GeminiIcon.tsx Normal file
View file

@ -0,0 +1,36 @@
export default function GeminiIcon({
size = 25,
className = '',
}: {
size?: number;
className?: string;
}) {
return (
<svg
width={size}
height={size}
className={className}
viewBox="0 0 18 18"
preserveAspectRatio="xMidYMid meet"
focusable="false"
>
<path
fill="url(#_4rif_paint0_radial_897_42)"
d="M9 18c0-1.245-.24-2.415-.72-3.51a8.934 8.934 0 00-1.912-2.857A8.934 8.934 0 003.51 9.72 8.646 8.646 0 000 9a8.886 8.886 0 003.51-.697 9.247 9.247 0 002.857-1.936A8.934 8.934 0 008.28 3.51C8.76 2.415 9 1.245 9 0c0 1.245.232 2.415.697 3.51a9.247 9.247 0 001.936 2.857 9.247 9.247 0 002.857 1.936A8.886 8.886 0 0018 9c-1.245 0-2.415.24-3.51.72a8.934 8.934 0 00-2.857 1.912 9.247 9.247 0 00-1.935 2.858A8.886 8.886 0 009 18z"
/>
<defs>
<radialGradient
id="_4rif_paint0_radial_897_42"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="rotate(135 9 3.728) scale(25.4558 12.7279)"
>
<stop offset=".325" stopColor="#FFDDB7"></stop>
<stop offset=".706" stopColor="#076EFF"></stop>
</radialGradient>
</defs>
</svg>
);
}

1
client/src/components/svg/index.ts
View file

@ -36,6 +36,7 @@ export { default as BingAIMinimalIcon } from './BingAIMinimalIcon';
export { default as PaLMinimalIcon } from './PaLMinimalIcon';
export { default as PaLMIcon } from './PaLMIcon';
export { default as CodeyIcon } from './CodeyIcon';
export { default as GeminiIcon } from './GeminiIcon';
export { default as GoogleMinimalIcon } from './GoogleMinimalIcon';
export { default as AnthropicMinimalIcon } from './AnthropicMinimalIcon';
export { default as SendMessageIcon } from './SendMessageIcon';