webui build
This commit is contained in:
josc146
@@ -16,32 +16,170 @@ import { observer } from 'mobx-react-lite';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { checkUpdate, toastWithButton } from '../utils';
|
||||
import { RestartApp } from '../../wailsjs/go/backend_golang/App';
|
||||
import { Language, Languages } from '../types/settings';
|
||||
|
||||
export const Languages = {
|
||||
dev: 'English', // i18n default
|
||||
zh: '简体中文',
|
||||
ja: '日本語'
|
||||
};
|
||||
export const GeneralSettings: FC = observer(() => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
export type Language = keyof typeof Languages;
|
||||
return <div className="flex flex-col gap-2">
|
||||
<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
|
||||
});
|
||||
}} />
|
||||
} />
|
||||
</div>;
|
||||
});
|
||||
|
||||
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 AdvancedGeneralSettings: FC = observer(() => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
export const Settings: FC = observer(() => {
|
||||
return <div className="flex flex-col gap-2">
|
||||
<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: '33px' }} 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 type="password" 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: '33px' }} 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: '33px' }} 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>;
|
||||
});
|
||||
|
||||
const Settings: FC = observer(() => {
|
||||
const { t } = useTranslation();
|
||||
const advancedHeaderRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
@@ -53,227 +191,101 @@ export const Settings: FC = observer(() => {
|
||||
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>
|
||||
} />
|
||||
commonStore.platform === 'web' ?
|
||||
(
|
||||
<div className="flex flex-col gap-2">
|
||||
<GeneralSettings />
|
||||
<AdvancedGeneralSettings />
|
||||
</div>
|
||||
</AccordionPanel>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
)
|
||||
:
|
||||
(
|
||||
<div className="flex flex-col gap-2">
|
||||
<GeneralSettings />
|
||||
<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
|
||||
});
|
||||
}} />
|
||||
} />
|
||||
<AdvancedGeneralSettings />
|
||||
</div>
|
||||
</AccordionPanel>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
} />
|
||||
);
|
||||
});
|
||||
|
||||
export default Settings;
|
||||
|
||||
Reference in New Issue
Block a user