improve Models page

frontend/src/pages/Models.tsx

@@ -153,24 +153,32 @@ const columns: TableColumnDefinition<ModelSourceItem>[] = [
   })
 ];
 
-const Models: FC = observer(() => {
+const getTags = () => {
-  const { t } = useTranslation();
+  return Array.from(new Set(
-  const [tags, setTags] = useState<Array<string>>([]);
-  const [modelSourceList, setModelSourceList] = useState<ModelSourceItem[]>(commonStore.modelSourceList);
-
-  useEffect(() => {
-    setTags(Array.from(new Set(
     ['Recommended',
       ...commonStore.modelSourceList.map(item => item.tags || []).flat()
       .filter(i => !i.includes('Other') && !i.includes('Local'))
-        , 'Other', 'Local'])));
+      , 'Other', 'Local']));
+};
+
+const getCurrentModelList = () => {
+  if (commonStore.activeModelListTags.length === 0)
+    return commonStore.modelSourceList;
+  else
+    return commonStore.modelSourceList.filter(item => commonStore.activeModelListTags.some(tag => item.tags?.includes(tag)));
+};
+
+const Models: FC = observer(() => {
+  const { t } = useTranslation();
+  const [tags, setTags] = useState<Array<string>>(getTags());
+  const [modelSourceList, setModelSourceList] = useState<ModelSourceItem[]>(getCurrentModelList());
+
+  useEffect(() => {
+    setTags(getTags());
   }, [commonStore.modelSourceList]);
 
   useEffect(() => {
-    if (commonStore.activeModelListTags.length === 0)
+    setModelSourceList(getCurrentModelList());
-      setModelSourceList(commonStore.modelSourceList);
-    else
-      setModelSourceList(commonStore.modelSourceList.filter(item => commonStore.activeModelListTags.some(tag => item.tags?.includes(tag))));
   }, [commonStore.modelSourceList, commonStore.activeModelListTags]);
 
   return (