Skip to content

Commit fcc3fee

Browse files
yiboyasssyiboyasss
authored
FEAT: [UI] highlight the input box content. (xorbitsai#3306)
1 parent fc0dfa2 commit fcc3fee

File tree

4 files changed

+39
-10
lines changed

4 files changed

+39
-10
lines changed

‎xinference/web/ui/src/scenes/launch_model/components/addPair.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,11 +121,16 @@ const AddPair = ({
121121
updateArr(index, customData.key, newValue)
122122
}}
123123
renderInput={(params) => (
124-
<TextField {...params} label={customData.key} />
124+
<TextField
125+
className="textHighlight"
126+
{...params}
127+
label={customData.key}
128+
/>
125129
)}
126130
/>
127131
) : (
128132
<TextField
133+
className="textHighlight"
129134
label={customData.key}
130135
value={item[customData.key]}
131136
onChange={(e) => {
@@ -135,6 +140,7 @@ const AddPair = ({
135140
/>
136141
)}
137142
<TextField
143+
className="textHighlight"
138144
label={customData.value}
139145
value={item[customData.value]}
140146
onChange={(e) => {

‎xinference/web/ui/src/scenes/launch_model/components/progress.js‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,10 @@
1-
import MobileStepper from '@mui/material/MobileStepper'
1+
import LinearProgress from '@mui/material/LinearProgress'
22
import React from 'react'
33

44
const Progress = ({ progress }) => {
5-
console.log('progress', progress)
65
return (
7-
<div>
8-
<MobileStepper
9-
variant="progress"
10-
steps={100}
11-
position="static"
12-
activeStep={progress * 100}
13-
/>
6+
<div style={{ marginBottom: 10 }}>
7+
<LinearProgress variant="determinate" value={progress * 100} />
148
</div>
159
)
1610
}

‎xinference/web/ui/src/scenes/launch_model/modelCard.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1327,6 +1327,7 @@ const ModelCard = ({
13271327
{t('launchModel.modelEngine')}
13281328
</InputLabel>
13291329
<Select
1330+
className="textHighlight"
13301331
labelId="modelEngine-label"
13311332
value={modelEngine}
13321333
onChange={(e) => setModelEngine(e.target.value)}
@@ -1368,6 +1369,7 @@ const ModelCard = ({
13681369
{t('launchModel.modelFormat')}
13691370
</InputLabel>
13701371
<Select
1372+
className="textHighlight"
13711373
labelId="modelFormat-label"
13721374
value={modelFormat}
13731375
onChange={(e) => setModelFormat(e.target.value)}
@@ -1404,6 +1406,7 @@ const ModelCard = ({
14041406
{t('launchModel.modelSize')}
14051407
</InputLabel>
14061408
<Select
1409+
className="textHighlight"
14071410
labelId="modelSize-label"
14081411
value={modelSize}
14091412
onChange={(e) => setModelSize(e.target.value)}
@@ -1441,6 +1444,7 @@ const ModelCard = ({
14411444
{t('launchModel.quantization')}
14421445
</InputLabel>
14431446
<Select
1447+
className="textHighlight"
14441448
labelId="quantization-label"
14451449
value={quantization}
14461450
onChange={(e) => setQuantization(e.target.value)}
@@ -1492,6 +1496,7 @@ const ModelCard = ({
14921496
)}
14931497
</InputLabel>
14941498
<Select
1499+
className="textHighlight"
14951500
labelId="n-gpu-label"
14961501
value={nGPU}
14971502
onChange={(e) => setNGPU(e.target.value)}
@@ -1515,6 +1520,7 @@ const ModelCard = ({
15151520
{(modelFormat === 'ggufv2' || modelFormat === 'ggmlv3') && (
15161521
<FormControl variant="outlined" margin="normal" fullWidth>
15171522
<TextField
1523+
className="textHighlight"
15181524
disabled={!modelFormat || !modelSize || !quantization}
15191525
type="number"
15201526
label={t('launchModel.nGpuLayers')}
@@ -1534,6 +1540,7 @@ const ModelCard = ({
15341540
<Grid item xs={12}>
15351541
<FormControl variant="outlined" margin="normal" fullWidth>
15361542
<TextField
1543+
className="textHighlight"
15371544
disabled={!modelFormat || !modelSize || !quantization}
15381545
type="number"
15391546
InputProps={{
@@ -1576,6 +1583,7 @@ const ModelCard = ({
15761583
<Grid item xs={12}>
15771584
<FormControl variant="outlined" margin="normal" fullWidth>
15781585
<TextField
1586+
className="textHighlight"
15791587
variant="outlined"
15801588
value={modelUID}
15811589
label={t('launchModel.modelUID.optional')}
@@ -1586,6 +1594,7 @@ const ModelCard = ({
15861594
<Grid item xs={12}>
15871595
<FormControl variant="outlined" margin="normal" fullWidth>
15881596
<TextField
1597+
className="textHighlight"
15891598
value={requestLimits}
15901599
label={t('launchModel.requestLimits.optional')}
15911600
onChange={(e) => {
@@ -1613,6 +1622,7 @@ const ModelCard = ({
16131622
{enginesWithNWorker.includes(modelEngine) && (
16141623
<FormControl variant="outlined" margin="normal" fullWidth>
16151624
<TextField
1625+
className="textHighlight"
16161626
type="number"
16171627
InputProps={{
16181628
inputProps: {
@@ -1631,6 +1641,7 @@ const ModelCard = ({
16311641
<Grid item xs={12}>
16321642
<FormControl variant="outlined" margin="normal" fullWidth>
16331643
<TextField
1644+
className="textHighlight"
16341645
variant="outlined"
16351646
value={workerIp}
16361647
label={t('launchModel.workerIp.optional')}
@@ -1641,6 +1652,7 @@ const ModelCard = ({
16411652
<Grid item xs={12}>
16421653
<FormControl variant="outlined" margin="normal" fullWidth>
16431654
<TextField
1655+
className="textHighlight"
16441656
value={GPUIdx}
16451657
label={t('launchModel.GPUIdx.optional')}
16461658
onChange={(e) => {
@@ -1668,6 +1680,7 @@ const ModelCard = ({
16681680
{t('launchModel.downloadHub.optional')}
16691681
</InputLabel>
16701682
<Select
1683+
className="textHighlight"
16711684
labelId="download_hub-label"
16721685
value={downloadHub}
16731686
onChange={(e) => {
@@ -1704,6 +1717,7 @@ const ModelCard = ({
17041717
<Grid item xs={12}>
17051718
<FormControl variant="outlined" margin="normal" fullWidth>
17061719
<TextField
1720+
className="textHighlight"
17071721
variant="outlined"
17081722
value={modelPath}
17091723
label={t('launchModel.modelPath.optional')}
@@ -1772,12 +1786,14 @@ const ModelCard = ({
17721786
>
17731787
<FormControl variant="outlined" margin="normal" fullWidth>
17741788
<TextField
1789+
className="textHighlight"
17751790
variant="outlined"
17761791
value={modelUID}
17771792
label={t('launchModel.modelUID.optional')}
17781793
onChange={(e) => setModelUID(e.target.value)}
17791794
/>
17801795
<TextField
1796+
className="textHighlight"
17811797
style={{ marginTop: '25px' }}
17821798
type="number"
17831799
InputProps={{
@@ -1794,6 +1810,7 @@ const ModelCard = ({
17941810
{t('launchModel.device')}
17951811
</InputLabel>
17961812
<Select
1813+
className="textHighlight"
17971814
labelId="n-gpu-label"
17981815
value={nGpu}
17991816
onChange={(e) => setNGpu(e.target.value)}
@@ -1811,6 +1828,7 @@ const ModelCard = ({
18111828
{nGpu === 'GPU' && (
18121829
<FormControl variant="outlined" margin="normal" fullWidth>
18131830
<TextField
1831+
className="textHighlight"
18141832
value={GPUIdx}
18151833
label={t('launchModel.GPUIdx')}
18161834
onChange={(e) => {
@@ -1834,6 +1852,7 @@ const ModelCard = ({
18341852
)}
18351853
<FormControl variant="outlined" margin="normal" fullWidth>
18361854
<TextField
1855+
className="textHighlight"
18371856
variant="outlined"
18381857
value={workerIp}
18391858
label={t('launchModel.workerIp')}
@@ -1845,6 +1864,7 @@ const ModelCard = ({
18451864
{t('launchModel.downloadHub.optional')}
18461865
</InputLabel>
18471866
<Select
1867+
className="textHighlight"
18481868
labelId="download_hub-label"
18491869
value={downloadHub}
18501870
onChange={(e) => {
@@ -1867,6 +1887,7 @@ const ModelCard = ({
18671887
</FormControl>
18681888
<FormControl variant="outlined" margin="normal" fullWidth>
18691889
<TextField
1890+
className="textHighlight"
18701891
variant="outlined"
18711892
value={modelPath}
18721893
label={t('launchModel.modelPath.optional')}
@@ -1879,6 +1900,7 @@ const ModelCard = ({
18791900
{t('launchModel.GGUFQuantization.optional')}
18801901
</InputLabel>
18811902
<Select
1903+
className="textHighlight"
18821904
labelId="gguf_quantizations-label"
18831905
value={ggufQuantizations}
18841906
onChange={(e) => {
@@ -1901,6 +1923,7 @@ const ModelCard = ({
19011923
{modelData.gguf_quantizations && (
19021924
<FormControl variant="outlined" margin="normal" fullWidth>
19031925
<TextField
1926+
className="textHighlight"
19041927
variant="outlined"
19051928
value={ggufModelPath}
19061929
label={t('launchModel.GGUFModelPath.optional')}

‎xinference/web/ui/src/scenes/launch_model/styles/modelCardStyle.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -218,3 +218,9 @@
218218
.drawer.open .drawer-content {
219219
transform: translateX(0);
220220
}
221+
.textHighlight .MuiSelect-select {
222+
color: #1976d2;
223+
}
224+
.textHighlight .MuiInputBase-input {
225+
color: #1976d2;
226+
}

0 commit comments

Comments
 (0)