From 55c8de4ef2ece652d184ec61fb2e7ba2a12c6600 Mon Sep 17 00:00:00 2001 From: cp3hnu Date: Thu, 11 Apr 2024 11:30:35 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=90=AF=E5=8A=A8TensorBoard?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/assets/img/tensor-board-export.png | Bin 0 -> 1027 bytes .../src/assets/img/tensor-board-failed.png | Bin 0 -> 1226 bytes .../src/assets/img/tensor-board-pending.png | Bin 0 -> 1600 bytes .../src/assets/img/tensor-board-running.png | Bin 0 -> 1127 bytes react-ui/src/assets/img/tensor-board-stop.png | Bin 0 -> 815 bytes .../assets/img/tensor-board-terminated.png | Bin 0 -> 923 bytes .../src/assets/img/tensor-board-unknown.png | Bin 0 -> 1570 bytes react-ui/src/components/KFModal/index.less | 2 +- react-ui/src/components/ModalTitle/index.less | 1 + react-ui/src/hooks/index.ts | 24 ++++ react-ui/src/pages/Dataset/datasetIntro.jsx | 12 +- react-ui/src/pages/Dataset/index.jsx | 8 +- react-ui/src/pages/Dataset/personalData.jsx | 4 +- .../components/TensorBoardStatus/index.less | 26 ++++ .../components/TensorBoardStatus/index.tsx | 82 +++++++++++ .../experimentText/paramsModal.less | 2 +- react-ui/src/pages/Experiment/index.jsx | 136 ++++++++++++++++-- react-ui/src/pages/Model/modelIntro.jsx | 10 +- react-ui/src/pages/Model/personalData.jsx | 4 +- react-ui/src/pages/Pipeline/index.jsx | 2 +- react-ui/src/services/experiment/index.js | 16 +++ 21 files changed, 298 insertions(+), 31 deletions(-) create mode 100644 react-ui/src/assets/img/tensor-board-export.png create mode 100644 react-ui/src/assets/img/tensor-board-failed.png create mode 100644 react-ui/src/assets/img/tensor-board-pending.png create mode 100644 react-ui/src/assets/img/tensor-board-running.png create mode 100644 react-ui/src/assets/img/tensor-board-stop.png create mode 100644 react-ui/src/assets/img/tensor-board-terminated.png create mode 100644 react-ui/src/assets/img/tensor-board-unknown.png create mode 100644 react-ui/src/pages/Experiment/components/TensorBoardStatus/index.less create mode 100644 react-ui/src/pages/Experiment/components/TensorBoardStatus/index.tsx diff --git a/react-ui/src/assets/img/tensor-board-export.png b/react-ui/src/assets/img/tensor-board-export.png new file mode 100644 index 0000000000000000000000000000000000000000..46f296ee430d1179796de7567101a0f2c3c6b742 GIT binary patch literal 1027 zcmV+e1pNDnP)GSZ~sZH$C93 zHP#!L=&^@-FsTVY6UxDcOSyQX7jO0tD4r>aAV2*+GE0VGcER1*HZ>*LuKHp|A7+k`%@1n1Hu`j^x zw_2@KsZ?s{@5Vscn#_pPjfy2aD_Mbul2xO643=hZQBd{<`fPMMokX!%JfL@Dpt9+J zA-tANg%xPN4s2irF!%86KCat5E8oUF5C(BDd>I49D1Qi0F|(@Vl`>q43i&P?KO$X*QdiyaU%EQ0D-ke*HHJ(L|FO&a7%;@Z_#&FK~+Gvq2uf7N|_kS=Xfzw4}`nqSGr| zpiuKYTuXp+EfbD)r{Jcg=PI{B4$b^5@b+y4=J6L)35~T z^Z7oapRpuGx7&?OZ1dQN=u|j5Y%#zSI?v$#7#ojKhD`-Lk`C0@BJIK?Ie_7`Q$G`F zM+%FmOd~tj4;`Dqq3OGPX(HDwfp8Y|va`KeYMhP&2{Cth2A~!6nG{c?Q~wpANCAUd x=F^d?VbOMj{3X`^k(eRT`8p>*We*x+ey-6ZFv6}z@002ovPDHLkV1g}y+}HpB literal 0 HcmV?d00001 diff --git a/react-ui/src/assets/img/tensor-board-failed.png b/react-ui/src/assets/img/tensor-board-failed.png new file mode 100644 index 0000000000000000000000000000000000000000..e2d9439287331f107ed6eaa51ed897c1cc5d5acd GIT binary patch literal 1226 zcmV;*1U37KP)V(b+J1>km}C||+Ydx%Cs`C^=AWI!u8|5l_@pLQk^_uO<{ z9sjCndlW_a9)LTg0Az)QxMiB=F~H6`sXBtvL_q+52ILl5znU#9|+<1DyB0r}M_-?8JQx$An?QSz_Fft7 zO>J$gX<#6ua{tmLw$QuY1VJ`Kjvk1vhtt#S#>ta1u2yA*=;hIH_y^gon_5%Dng<6N zfml~QY(6B(E%fxT`4X4k=1sCEhXe?K*cPjehI06Nfwmk?O-2_jDi%`%0%?*XOW2y(X=^rr-qWR1LiNNlzv(<;ikp2T28e>yaa_rArnzU7oxYe5Z6< zW3re!D+Nmh-^&t8Agv=Kt|iD0_D+94qmT4OODHKJ{SQ&1R@b>AuKXp`X?EwsdRan| z_J6P^t@X6cBLMB&$qZfQBg6y=km9=FUwh-M#B z{+Z<_w*kRepi0-L@Mmk8Io!<)F|lkI-Hr_i(!SQz^zxHna2ik0@GM}drGqwPB)<)5 z+az0SH;z@TllL?tf0-*Q9i6kY3;98MuG)?mmv2Pk@t9pET^qU4P$&ypUJdE^X1f%$5O*OzWO6=Gw&NQ+plji97-vR@@ad*QG041_ oEoU8w;d=rPHs&-@ih0=o0co-S59o#G82|tP07*qoM6N<$f?D)Ob^rhX literal 0 HcmV?d00001 diff --git a/react-ui/src/assets/img/tensor-board-pending.png b/react-ui/src/assets/img/tensor-board-pending.png new file mode 100644 index 0000000000000000000000000000000000000000..f9eee3a972cbb3923506e82dbdceae46d22ea838 GIT binary patch literal 1600 zcmV-G2EX}E&-q5%@bR-%GN z)I?AdBb2H?Oyq}&3T&$;C`O|Y5ETPT0&3JmULpF!Xab065HWP253sr@`D za?8l8tH-4@|D#M;EX)x%{0y8RnCk;3-k}vIkGtV@3^Wyu)H3mN0Nv$AK>^yG#CS2# z-2SZ-c}0Qp>ygo^G+qMnA^};H-igwF8Wtndra;D6K`kAfg?I}pPOh$=0-t}I2)NcA z0N2#NB4acLTRINrF7}*2F9S#mn?#9I@L^^y zuvtL4t+FO*2KS0Lj`wDm(zwKHj|R159WCoVIZ%=fD6d3WDiq!?cV=p7>Pq7l%kBxr zW4F^v7`>8gK$Fq%hXV56($pxCa+yn9V%fLKn%kFV0Zpx`xsf&cPQr!HvkrX-^v3tW z=>&}J4+EK`XHl}*3~QL&>#uzlO+>?AND92O1j(Q=^%hXIjBN{H9^X@nICV1HgUe&{ zl@JSPx^2`* z(lk{gSU{7l;q`*~AxGQ-Qg8YID64?+`4ix-!+mUpfKt^&_-4NWN}NG@>wRv(ZV;<3 zCMhz8rF_0q0(7_|pylJ>pR*3y$jRV%J2GFj^c`_Npft7~{#mO)p$N>bLojwc2J|?r zNtok-c&vh4AG`9GtLvcO5d}hWlmoz0w3C5eB2 z>bZ2QoB;paH$mr=-`y{Mm$F|Te;NEun?d5w>77f#-9NiDM=v>Vr(`s8Ku&6kM+w02 z8sOaNERcQjd_ibK%VEal8hBldgOq3upOSW=x~L4XjuyGaR+3uEPdl>`RZRj7>+e+9 zlqN>i%!5uL7Y=E2I^^gh3HcZ-2GrlU8QPfJ>}1Km7_^8eJjACPfa(qd-EQkXr* zK#^K;{T}OrX%*w4%~=brYD!kRbp=!fd`~GfPg*3&|9X>3p^VhW3xIC%syyk|4NxnE zT6aGh{#*PsQ8Ey0*H1|ASRzHqF(>NOrq4?C6!K8!>Ed@E ziQh??w{wXtG!-oKtaQ5${BJi5Rpv=O;B4{vGEWhwTWjh}XwJ)VpKje`ob9mbDpoin zB8uP7sb8LTqE7BU-B|qw&?J_qNjhQK}$R_LKC22*J;KZxp>&V2RlA1eJ zEzNsZ@&_YrHFx%E%AFCUxnr6no#-!$&(gyc18Ql4@ra4_}7X_sYevL@IZYw49f zcmUx~jR>ojd0J^;OXHRS#6B57G~^vXDDk|iYE;q}_+CU$7_xlaS_&UaCqZ1z7ZNtvMFni>260000d$7IG?x~pe`DQFma z>izZgtL@b*1rH^#LMDkHB}y<$DHKzxC_yeHf*X9NpKIYdb+(c@&sF;u+U8dsp=B?f(7h;SF3J2(aQ)*z+rj7 zUUp%S-J7w#lSX58s3{bz`Qpc>wo@vU&Ngks{g=!5JU`A5aHJamw{;2pq}{@j_YJB! zm2FB;JyDbom+8X-w+$QB7rcx5Fe6f<9woC+3fkq6f5-DtdKrY3$5(-z9zD%K(*E_dUeSj6V(nI zy7Y7S6$+G>Zr5_@K=uCz&H(%QcqvhZGF4PAJ2_H!nF?hB)w;8{0uP>>wm>_Ak~1In%Q1J}@gx%TKtj?qsXt42k4JwYE5lpCR0 zaWY0Vpa%6&?8($kmZ$Er;OBY^-Oj+|7y}e9#oj`-0Hdc*{E=@WmTrvdTqXaY@|Uw)_n2D<#IVp(DiP;nv?p1 z13cJmj%mjyAW9`KFqB7T9;kBCxISnc?PU(F0 zV@6^cGHH@bryG0tajnZTd9hCwL||cBs6n+Pe*J%yc9baQhU?YcWL=a#ksFi=OoyND zl0>e;()YDWAB&QfjH&Lz1(NUUiz6Hc6B@+J<$J^XhXt{fwY7V}04c?AbON z%+Cri^GfXs`?7Y~kO*a8-&j~h59|GRm>X#B+pk!^`lsM{&aQ8g0r7M&k?%_gTt@I& t{LS26T(K|2nC`x*EMADEm?%y@_7@w*j`w6;!(;#e002ovPDHLkV1o1@6^{S_ literal 0 HcmV?d00001 diff --git a/react-ui/src/assets/img/tensor-board-stop.png b/react-ui/src/assets/img/tensor-board-stop.png new file mode 100644 index 0000000000000000000000000000000000000000..3a23a0924cde571ae00373d93d5e516e86527699 GIT binary patch literal 815 zcmV+~1JL}5P)9V0^u4v&Tn%q-coUUJWl#xd+n3M` zYp?zw3au#mQWf|h=*ss8(7;!a`Ss}vR|sICi(wG3ww0q4G|}Sip6@kH%)T5&pUSkW z1WkPL!N3nqx3PxhCMwuM&<-He%_(8`Ks$sih0TG=2j}JG;njWekaNIihx7Sy_O?8z z=LLY|7}@TP*h)#^;STeY9S>n zwg_sWl$zT|wqu%$z`9qNXwT40&U9FBzRj?#l; zdP&(N>jG9nM$x#aqgUE?Y!kK&GWXOMnJ#JMs+$YV*?VcZ?sV7O+2s$m#$P=e>@>qv zd#?m4VdLzj-;z;lUABZ8d)crnCvgWKC&H<2WRQNyuWwxUyv)o+d#kL`LLcT5kza;! to+momi@)3;6XF@y_?;4W=0a1q{sR;_`&DXh)Q127002ovPDHLkV1jh*exv{Z literal 0 HcmV?d00001 diff --git a/react-ui/src/assets/img/tensor-board-terminated.png b/react-ui/src/assets/img/tensor-board-terminated.png new file mode 100644 index 0000000000000000000000000000000000000000..c234bba575f74917d8cc07efc4e49a9d2afcb7a1 GIT binary patch literal 923 zcmV;M17!S(P)U7JJBME)b%wULCU`_YD>3RL8r-h*L>Uvnj z^xi-PAWiW-0@_6;NE=H)4wmTPzJPOqwtAJy@6y^K4{VtL823Q{oz>~hQKvp0XZgTUA`&+l;0G-Bp5EYaJn=%xalfwX#sd8oPw;qQ`LPXn6>bm1U_#btoK1N6~A=75a= zmBjgDm3g~kdZ@acs&>rT757&?oL~{4`~8g$gKVn$H)=<8d{VobE6p6JFXR_SC)0IS za<_xzngiwIuxColb@Bb9E6K52m;XJWPcoVTT0g2D(7i$R1OM^HR3uFL;gjp*>CWZu zETaAD4;^7Aa1Q{i5dgKBJ}*oH<>F_2QoDSP@4jr<7GY1-d9Y%!pVbBBE`zP9`b)BN zk?P2j)MiOKRCY{s#4^$j+Z(46&w-rnj#dN`fO>QqtnV@%&XofYHT*0Qz0f*|Qh>@l zLMwE!%N71JEx>$I;r^h?G}Cx8fCkdX1vjgTUXndH(0P(sYa^Y=E(GXI0`(}i5TFdQ z$$8MxAQ(v254HG{$I(GmGM^Pd{o#w?w+E9a!?mp^PsRn`yIN1IPnTwKNis0)W zp%B}8K9w5WHQ}3U!RAE9io7FK-tYCR(sof2Wp34sR^6Lzxi*+cnmAte|MRqVSus-P z30MT;c8&SFRM~v36ADsvxF2!$pp0<#y}r<@ZteWonb`F~AB)TypKC zj$UTlagkuNKt{4YY0La}xOR1(M+e~~El(Qp?atl$@BqIGlEUR-nrE?QSlXg;d-#E& zAKi}DjWt{lv6%D6hL*994e=Gu09!5jd{a~zgopC^hL&&JS=*cx)q6)Y$=E9qU9hDX xVV-Tq_1CM+0Y_X44qXeJv)5Nn9$(Ym{{_UxwiP7({Gk8<002ovPDHLkV1iu4#9aUY literal 0 HcmV?d00001 diff --git a/react-ui/src/assets/img/tensor-board-unknown.png b/react-ui/src/assets/img/tensor-board-unknown.png new file mode 100644 index 0000000000000000000000000000000000000000..843d0e5e01e1c055b0891b37057b15a1a05c95c9 GIT binary patch literal 1570 zcmV+-2Hp9IP)b=GTADMGSw3LJCoXXJ^t*Rmbb$r# zy{mQpJbS+H_w6~q$2q^tpkXXX&WaFpY$^wf0_V|;vCw~BNIyKTZez5eIB-U6LiF~{`TyL@FM>)kz zgf?^9&?NRiO&`A*`_1NNHn?XN96YD~-io|vE0#7giRNYzf*_#k#AzHqc?vggHK?MN3j)|U>5kwMnr5<+=6F?X1bTi( z6lTwgL4d!18;Y~%&SS&oPf>T}s!DopvlbQ@SzJa&cj1=b1v;@HHB6Hxj75@hZimo| zm+SCRp%s^E?aEDXe*J8yA%tl;_8!4O$X=R+zI`5+1stuc!jWUusH?MM_!C3$?DWZa zsAmuPxAKZgY$^Rhxlq|boiWUqn*APms#y&~{dw+htX#Jhw;FCMH^pI=gzi#%b(=YL66Vi+Q8xVL?jNvc?*R`H!9jt@S-J?J zp}pn#cXC$2Ua!JeDf(G_YW8vR&v4~`6POq=3aJZY(b(98?A*1ev)6mjNEu++;so>y z?E{Cyf#vV7!PRTm6`P{FYZasXd4Z696{GI}h71aW{YpIvxY33pCTb!U#L8)qT;nX( zSZuiMXjEhBA_+B-(=dY?bVr!cSLFg^Mi#Lb&6Pai1%2_>KH(k@bVQ7Pg3;O693Gh*0d$Xp`zCV-;i z&rxygSKkPgN~pv{0dQ=W=TM zOewMCmEV1eq?-2A@lRFD>Q5CYZQ&b`lD#w>R4Q}w)}hvZMJ=TiM4nF(i77E9XSm43 zYAuhu-XXn^v|tVl1_QqNb{{IM+iiMuNx1a5qj$(t+X@R#NdS-Ma(tTUV|t@3=@OHd zMF9Z@=mb4(+`OrUhJuK%wpj|6xk)^PPBWYJgD*E$(2wIZSKEg+0pUtj z%ld)okJ4tl>fi$&QcK4vHcoEchHSS#cgmw%oVRH|+_cyX;t+m&$Go?RFFicePCJjFt~#;D?+dFY^{CUHP;B0w9PB U0q&Q~0RR9107*qoM6N<$f=Y-7C;$Ke literal 0 HcmV?d00001 diff --git a/react-ui/src/components/KFModal/index.less b/react-ui/src/components/KFModal/index.less index 192ec678..40ee7df4 100644 --- a/react-ui/src/components/KFModal/index.less +++ b/react-ui/src/components/KFModal/index.less @@ -5,7 +5,7 @@ border-radius: 21px; } .ant-modal-header { - margin: 20px 0; + margin: 20px 0 30px; background-color: transparent; } .ant-modal-footer { diff --git a/react-ui/src/components/ModalTitle/index.less b/react-ui/src/components/ModalTitle/index.less index b56ecc7d..1ff70e81 100644 --- a/react-ui/src/components/ModalTitle/index.less +++ b/react-ui/src/components/ModalTitle/index.less @@ -3,6 +3,7 @@ display: flex; align-items: center; color: @kf-primary-color; + font-weight: 400; font-size: 20px; &_image { diff --git a/react-ui/src/hooks/index.ts b/react-ui/src/hooks/index.ts index d60bc345..8e0f60c6 100644 --- a/react-ui/src/hooks/index.ts +++ b/react-ui/src/hooks/index.ts @@ -37,3 +37,27 @@ export function useAntdModal(initialValue: boolean) { return [visible, open, close]; } + +type Callback = (state: T) => void; + +/** + * Generates a stateful value and a function to update it that triggers callbacks. + * + * @param initialValue - The initial value of the state. + * @return A tuple containing the current state value and a function to update the state. + */ +export function useCallbackState(initialValue: T) { + const [state, _setState] = useState(initialValue); + const callbackQueue = useRef[]>([]); + useEffect(() => { + callbackQueue.current.forEach((cb) => cb(state)); + callbackQueue.current = []; + }, [state]); + const setState = (newValue: T, callback: Callback) => { + _setState(newValue); + if (callback && typeof callback === 'function') { + callbackQueue.current.push(callback); + } + }; + return [state, setState]; +} diff --git a/react-ui/src/pages/Dataset/datasetIntro.jsx b/react-ui/src/pages/Dataset/datasetIntro.jsx index 19069507..5fb5e093 100644 --- a/react-ui/src/pages/Dataset/datasetIntro.jsx +++ b/react-ui/src/pages/Dataset/datasetIntro.jsx @@ -59,16 +59,18 @@ const Dataset = () => { const locationParams = useParams(); //新版本获取路由参数接口 const [wordList, setWordList] = useState([]); const [activeTabKey, setActiveTabKey] = useState('1'); + const [uuid, setUuid] = useState(Date.now()); const getDatasetByDetail = () => { getDatasetById(locationParams.id).then((ret) => { console.log(ret); setDatasetDetailObj(ret.data); }); }; + // 获取数据集版本 const getDatasetVersionList = () => { getDatasetVersionsById(locationParams.id).then((ret) => { console.log(ret); - if (ret.data && ret.data.length > 0) { + if (ret && ret.data && ret.data.length > 0) { setVersionList( ret.data.map((item) => { return { @@ -77,6 +79,8 @@ const Dataset = () => { }; }), ); + setVersion(ret.data[0]); + getDatasetVersions({ version: ret.data[0], dataset_id: locationParams.id }); } }); }; @@ -90,6 +94,7 @@ const Dataset = () => { form.setFieldsValue({ name: datasetDetailObj.name }); setDialogTitle('创建新版本'); + setUuid(Date.now()); setIsModalOpen(true); }; const handleCancel = () => { @@ -109,9 +114,7 @@ const Dataset = () => { onOk: () => { deleteDatasetVersion({ dataset_id: locationParams.id, version }).then((ret) => { - setVersion(null); getDatasetVersionList(); - getDatasetVersions({ version, dataset_id: locationParams.id }); message.success('删除成功'); }); }, @@ -124,6 +127,7 @@ const Dataset = () => { message.success('创建成功'); }); }; + // 获取版本下的文件列表 const getDatasetVersions = (params) => { getDatasetVersionIdList(params).then((res) => { setWordList(res?.data?.content ?? []); @@ -368,7 +372,7 @@ const Dataset = () => { }, ]} > - +