279 lines
11 KiB
TypeScript
279 lines
11 KiB
TypeScript
import React, { FC, useEffect, useRef } from 'react';
|
|
import { Page } from '../components/Page';
|
|
import {
|
|
Accordion,
|
|
AccordionHeader,
|
|
AccordionItem,
|
|
AccordionPanel,
|
|
Dropdown,
|
|
Input,
|
|
Option,
|
|
Switch
|
|
} from '@fluentui/react-components';
|
|
import { Labeled } from '../components/Labeled';
|
|
import commonStore from '../stores/commonStore';
|
|
import { observer } from 'mobx-react-lite';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { checkUpdate, toastWithButton } from '../utils';
|
|
import { RestartApp } from '../../wailsjs/go/backend_golang/App';
|
|
|
|
export const Languages = {
|
|
dev: 'English', // i18n default
|
|
zh: '简体中文'
|
|
};
|
|
|
|
export type Language = keyof typeof Languages;
|
|
|
|
export type SettingsType = {
|
|
language: Language
|
|
darkMode: boolean
|
|
autoUpdatesCheck: boolean
|
|
giteeUpdatesSource: boolean
|
|
cnMirror: boolean
|
|
host: string
|
|
dpiScaling: number
|
|
customModelsPath: string
|
|
customPythonPath: string
|
|
apiUrl: string
|
|
apiKey: string
|
|
apiChatModelName: string
|
|
apiCompletionModelName: string
|
|
}
|
|
|
|
export const Settings: FC = observer(() => {
|
|
const { t, i18n } = useTranslation();
|
|
const advancedHeaderRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (advancedHeaderRef.current)
|
|
(advancedHeaderRef.current.firstElementChild as HTMLElement).style.padding = '0';
|
|
}, []);
|
|
|
|
return (
|
|
<Page title={t('Settings')} content={
|
|
<div className="flex flex-col gap-2 overflow-y-auto overflow-x-hidden p-1">
|
|
<Labeled label={t('Language')} flex spaceBetween content={
|
|
<Dropdown style={{ minWidth: 0 }} listbox={{ style: { minWidth: 0 } }}
|
|
value={Languages[commonStore.settings.language]}
|
|
selectedOptions={[commonStore.settings.language]}
|
|
onOptionSelect={(_, data) => {
|
|
if (data.optionValue) {
|
|
const lang = data.optionValue as Language;
|
|
commonStore.setSettings({
|
|
language: lang
|
|
});
|
|
}
|
|
}}>
|
|
{
|
|
Object.entries(Languages).map(([langKey, desc]) =>
|
|
<Option key={langKey} value={langKey}>{desc}</Option>)
|
|
}
|
|
</Dropdown>
|
|
} />
|
|
{
|
|
commonStore.platform === 'windows' &&
|
|
<Labeled label={t('DPI Scaling')} flex spaceBetween content={
|
|
<Dropdown style={{ minWidth: 0 }} listbox={{ style: { minWidth: 0 } }}
|
|
value={commonStore.settings.dpiScaling + '%'}
|
|
selectedOptions={[commonStore.settings.dpiScaling.toString()]}
|
|
onOptionSelect={(_, data) => {
|
|
if (data.optionValue) {
|
|
commonStore.setSettings({
|
|
dpiScaling: Number(data.optionValue)
|
|
});
|
|
toastWithButton(t('Restart the app to apply DPI Scaling.'), t('Restart'), () => {
|
|
RestartApp();
|
|
}, {
|
|
autoClose: 5000
|
|
});
|
|
}
|
|
}}>
|
|
{
|
|
Array.from({ length: 7 }, (_, i) => (i + 2) * 25).map((v, i) =>
|
|
<Option key={i} value={v.toString()}>{v + '%'}</Option>)
|
|
}
|
|
</Dropdown>
|
|
} />
|
|
}
|
|
<Labeled label={t('Dark Mode')} flex spaceBetween content={
|
|
<Switch checked={commonStore.settings.darkMode}
|
|
onChange={(e, data) => {
|
|
commonStore.setSettings({
|
|
darkMode: data.checked
|
|
});
|
|
}} />
|
|
} />
|
|
<Labeled label={t('Automatic Updates Check')} flex spaceBetween content={
|
|
<Switch checked={commonStore.settings.autoUpdatesCheck}
|
|
onChange={(e, data) => {
|
|
commonStore.setSettings({
|
|
autoUpdatesCheck: data.checked
|
|
});
|
|
if (data.checked)
|
|
checkUpdate(true);
|
|
}} />
|
|
} />
|
|
{
|
|
commonStore.settings.language === 'zh' &&
|
|
<Labeled label={t('Use Gitee Updates Source')} flex spaceBetween content={
|
|
<Switch checked={commonStore.settings.giteeUpdatesSource}
|
|
onChange={(e, data) => {
|
|
commonStore.setSettings({
|
|
giteeUpdatesSource: data.checked
|
|
});
|
|
}} />
|
|
} />
|
|
}
|
|
{
|
|
commonStore.settings.language === 'zh' && commonStore.platform != 'linux' &&
|
|
<Labeled label={t('Use Tsinghua Pip Mirrors')} flex spaceBetween content={
|
|
<Switch checked={commonStore.settings.cnMirror}
|
|
onChange={(e, data) => {
|
|
commonStore.setSettings({
|
|
cnMirror: data.checked
|
|
});
|
|
}} />
|
|
} />
|
|
}
|
|
<Labeled label={t('Allow external access to the API (service must be restarted)')} flex spaceBetween content={
|
|
<Switch checked={commonStore.settings.host !== '127.0.0.1'}
|
|
onChange={(e, data) => {
|
|
commonStore.setSettings({
|
|
host: data.checked ? '0.0.0.0' : '127.0.0.1'
|
|
});
|
|
}} />
|
|
} />
|
|
<Accordion collapsible openItems={!commonStore.advancedCollapsed && 'advanced'} onToggle={(e, data) => {
|
|
if (data.value === 'advanced')
|
|
commonStore.setAdvancedCollapsed(!commonStore.advancedCollapsed);
|
|
}}>
|
|
<AccordionItem value="advanced">
|
|
<AccordionHeader ref={advancedHeaderRef} size="large">{t('Advanced')}</AccordionHeader>
|
|
<AccordionPanel>
|
|
<div className="flex flex-col gap-2 overflow-hidden">
|
|
{commonStore.platform !== 'darwin' &&
|
|
<Labeled label={t('Custom Models Path')}
|
|
content={
|
|
<Input className="grow" placeholder="./models" value={commonStore.settings.customModelsPath}
|
|
onChange={(e, data) => {
|
|
commonStore.setSettings({
|
|
customModelsPath: data.value
|
|
});
|
|
}} />
|
|
} />
|
|
}
|
|
<Labeled label={t('Custom Python Path')} // if set, will not use precompiled cuda kernel
|
|
content={
|
|
<Input className="grow" placeholder="./py310/python" value={commonStore.settings.customPythonPath}
|
|
onChange={(e, data) => {
|
|
commonStore.setDepComplete(false);
|
|
commonStore.setSettings({
|
|
customPythonPath: data.value
|
|
});
|
|
}} />
|
|
} />
|
|
<Labeled label={'API URL'}
|
|
content={
|
|
<div className="flex gap-2">
|
|
<Input style={{ minWidth: 0 }} className="grow" value={commonStore.settings.apiUrl}
|
|
onChange={(e, data) => {
|
|
commonStore.setSettings({
|
|
apiUrl: data.value
|
|
});
|
|
}} />
|
|
<Dropdown style={{ minWidth: 0 }} listbox={{ style: { minWidth: 0 } }}
|
|
value="..." selectedOptions={[]} expandIcon={null}
|
|
onOptionSelect={(_, data) => {
|
|
commonStore.setSettings({
|
|
apiUrl: data.optionValue
|
|
});
|
|
if (data.optionText === 'OpenAI') {
|
|
if (commonStore.settings.apiChatModelName === 'rwkv')
|
|
commonStore.setSettings({
|
|
apiChatModelName: 'gpt-3.5-turbo'
|
|
});
|
|
if (commonStore.settings.apiCompletionModelName === 'rwkv')
|
|
commonStore.setSettings({
|
|
apiCompletionModelName: 'text-davinci-003'
|
|
});
|
|
}
|
|
}}>
|
|
<Option value="">{t('Localhost')!}</Option>
|
|
<Option value="https://api.openai.com">OpenAI</Option>
|
|
</Dropdown>
|
|
</div>
|
|
} />
|
|
<Labeled label={'API Key'}
|
|
content={
|
|
<Input className="grow" placeholder="sk-" value={commonStore.settings.apiKey}
|
|
onChange={(e, data) => {
|
|
commonStore.setSettings({
|
|
apiKey: data.value
|
|
});
|
|
}} />
|
|
} />
|
|
<Labeled label={t('API Chat Model Name')}
|
|
content={
|
|
<div className="flex gap-2">
|
|
<Input style={{ minWidth: 0 }} className="grow" placeholder="rwkv"
|
|
value={commonStore.settings.apiChatModelName}
|
|
onChange={(e, data) => {
|
|
commonStore.setSettings({
|
|
apiChatModelName: data.value
|
|
});
|
|
}} />
|
|
<Dropdown style={{ minWidth: 0 }} listbox={{ style: { minWidth: 0 } }}
|
|
value="..." selectedOptions={[]} expandIcon={null}
|
|
onOptionSelect={(_, data) => {
|
|
if (data.optionValue) {
|
|
commonStore.setSettings({
|
|
apiChatModelName: data.optionValue
|
|
});
|
|
}
|
|
}}>
|
|
{
|
|
['rwkv', 'gpt-4', 'gpt-4-0613', 'gpt-4-32k', 'gpt-4-32k-0613', 'gpt-3.5-turbo', 'gpt-3.5-turbo-0613', 'gpt-3.5-turbo-16k', 'gpt-3.5-turbo-16k-0613']
|
|
.map((v, i) =>
|
|
<Option key={i} value={v}>{v}</Option>
|
|
)
|
|
}
|
|
</Dropdown>
|
|
</div>
|
|
} />
|
|
<Labeled label={t('API Completion Model Name')}
|
|
content={
|
|
<div className="flex gap-2">
|
|
<Input style={{ minWidth: 0 }} className="grow" placeholder="rwkv"
|
|
value={commonStore.settings.apiCompletionModelName}
|
|
onChange={(e, data) => {
|
|
commonStore.setSettings({
|
|
apiCompletionModelName: data.value
|
|
});
|
|
}} />
|
|
<Dropdown style={{ minWidth: 0 }} listbox={{ style: { minWidth: 0 } }}
|
|
value="..." selectedOptions={[]} expandIcon={null}
|
|
onOptionSelect={(_, data) => {
|
|
if (data.optionValue) {
|
|
commonStore.setSettings({
|
|
apiCompletionModelName: data.optionValue
|
|
});
|
|
}
|
|
}}>
|
|
{
|
|
['rwkv', 'text-davinci-003', 'text-davinci-002', 'text-curie-001', 'text-babbage-001', 'text-ada-001']
|
|
.map((v, i) =>
|
|
<Option key={i} value={v}>{v}</Option>
|
|
)
|
|
}
|
|
</Dropdown>
|
|
</div>
|
|
} />
|
|
</div>
|
|
</AccordionPanel>
|
|
</AccordionItem>
|
|
</Accordion>
|
|
</div>
|
|
} />
|
|
);
|
|
});
|