improve frontend details

This commit is contained in:
josc146 2024-05-10 15:38:21 +08:00
parent 79eff01b33
commit 14461930ab
2 changed files with 54 additions and 44 deletions

View File

@ -268,50 +268,58 @@ const Configs: FC = observer(() => {
title={t('Model Parameters')} title={t('Model Parameters')}
content={ content={
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
<Labeled label={t('Model')} content={ <div className="sm:col-span-2">
<div className="flex gap-2 grow"> <div className="flex flex-col sm:flex-row gap-2">
<Select style={{ minWidth: 0 }} className="grow" <div className="flex gap-2 items-center min-w-0 grow">
value={selectedConfig.modelParameters.modelName} <div className="shrink-0">
onChange={(e, data) => { {t('Model')}
const modelSource = commonStore.modelSourceList.find(item => item.name === data.value); </div>
if (modelSource?.customTokenizer) <Select style={{ minWidth: 0 }} className="grow"
setSelectedConfigModelParams({ value={selectedConfig.modelParameters.modelName}
modelName: data.value, onChange={(e, data) => {
useCustomTokenizer: true, const modelSource = commonStore.modelSourceList.find(item => item.name === data.value);
customTokenizer: modelSource?.customTokenizer if (modelSource?.customTokenizer)
}); setSelectedConfigModelParams({
else // prevent customTokenizer from being overwritten modelName: data.value,
setSelectedConfigModelParams({ useCustomTokenizer: true,
modelName: data.value, customTokenizer: modelSource?.customTokenizer
useCustomTokenizer: false });
}); else // prevent customTokenizer from being overwritten
}}> setSelectedConfigModelParams({
{!commonStore.modelSourceList.find(item => item.name === selectedConfig.modelParameters.modelName)?.isComplete modelName: data.value,
&& <option key={-1} useCustomTokenizer: false
value={selectedConfig.modelParameters.modelName}>{selectedConfig.modelParameters.modelName} });
</option>} }}>
{commonStore.modelSourceList.map((modelItem, index) => {!commonStore.modelSourceList.find(item => item.name === selectedConfig.modelParameters.modelName)?.isComplete
modelItem.isComplete && <option key={index} value={modelItem.name}>{modelItem.name}</option> && <option key={-1}
)} value={selectedConfig.modelParameters.modelName}>{selectedConfig.modelParameters.modelName}
</Select> </option>}
<ToolTipButton desc={t('Manage Models')} icon={<DataUsageSettings20Regular />} onClick={() => { {commonStore.modelSourceList.map((modelItem, index) =>
navigate({ pathname: '/models' }); modelItem.isComplete && <option key={index} value={modelItem.name}>{modelItem.name}</option>
}} /> )}
</Select>
<ToolTipButton desc={t('Manage Models')} icon={<DataUsageSettings20Regular />} onClick={() => {
navigate({ pathname: '/models' });
}} />
</div>
{
!selectedConfig.modelParameters.device.startsWith('WebGPU') ?
(selectedConfig.modelParameters.device !== 'CPU (rwkv.cpp)' ?
<ToolTipButton text={t('Convert')}
className="shrink-0"
desc={t('Convert model with these configs. Using a converted model will greatly improve the loading speed, but model parameters of the converted model cannot be modified.')}
onClick={() => convertModel(selectedConfig, navigate)} /> :
<ToolTipButton text={t('Convert To GGML Format')}
className="shrink-0"
desc=""
onClick={() => convertToGGML(selectedConfig, navigate)} />)
: <ToolTipButton text={t('Convert To Safe Tensors Format')}
className="shrink-0"
desc=""
onClick={() => convertToSt(selectedConfig, navigate)} />
}
</div> </div>
} /> </div>
{
!selectedConfig.modelParameters.device.startsWith('WebGPU') ?
(selectedConfig.modelParameters.device !== 'CPU (rwkv.cpp)' ?
<ToolTipButton text={t('Convert')}
desc={t('Convert model with these configs. Using a converted model will greatly improve the loading speed, but model parameters of the converted model cannot be modified.')}
onClick={() => convertModel(selectedConfig, navigate)} /> :
<ToolTipButton text={t('Convert To GGML Format')}
desc=""
onClick={() => convertToGGML(selectedConfig, navigate)} />)
: <ToolTipButton text={t('Convert To Safe Tensors Format')}
desc=""
onClick={() => convertToSt(selectedConfig, navigate)} />
}
<Labeled label={t('Strategy')} content={ <Labeled label={t('Strategy')} content={
<Dropdown style={{ minWidth: 0 }} className="grow" value={t(selectedConfig.modelParameters.device)!} <Dropdown style={{ minWidth: 0 }} className="grow" value={t(selectedConfig.modelParameters.device)!}
selectedOptions={[selectedConfig.modelParameters.device]} selectedOptions={[selectedConfig.modelParameters.device]}

View File

@ -436,7 +436,9 @@ const LoraFinetune: FC = observer(() => {
content={ content={
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
<div className="flex gap-2 items-center"> <div className="flex gap-2 items-center">
{t('Base Model')} <div className="shrink-0">
{t('Base Model')}
</div>
<Select style={{ minWidth: 0 }} className="grow" <Select style={{ minWidth: 0 }} className="grow"
value={loraParams.baseModel} value={loraParams.baseModel}
onChange={(e, data) => { onChange={(e, data) => {