diff --git a/BillNote_frontend/src/App.tsx b/BillNote_frontend/src/App.tsx index d9ecd69..83334ea 100644 --- a/BillNote_frontend/src/App.tsx +++ b/BillNote_frontend/src/App.tsx @@ -7,12 +7,9 @@ import { Route } from 'react-router-dom' import Index from '@/pages/Index.tsx' import NotFoundPage from '@/pages/NotFoundPage' import Model from '@/pages/SettingPage/Model.tsx' -import Transcriber from '@/pages/SettingPage/transcriber.tsx' import ProviderForm from '@/components/Form/modelForm/Form.tsx' -import StepBar from '@/pages/HomePage/components/StepBar.tsx' -import Downloading from '@/components/Lottie/download.tsx' -import Prompt from '@/pages/SettingPage/Prompt.tsx' import AboutPage from '@/pages/SettingPage/about.tsx' +import Monitor from '@/pages/SettingPage/Monitor.tsx' import Downloader from '@/pages/SettingPage/Downloader.tsx' import DownloaderForm from '@/components/Form/DownloaderForm/Form.tsx' import { useEffect } from 'react' @@ -56,6 +53,7 @@ function App() { }> } /> + }> }> } /> diff --git a/BillNote_frontend/src/pages/SettingPage/Menu.tsx b/BillNote_frontend/src/pages/SettingPage/Menu.tsx index 11b5f32..3618ab0 100644 --- a/BillNote_frontend/src/pages/SettingPage/Menu.tsx +++ b/BillNote_frontend/src/pages/SettingPage/Menu.tsx @@ -1,10 +1,8 @@ import { BotMessageSquare, - SquareChevronRight, - Captions, HardDriveDownload, - Wrench, Info, + Activity, } from 'lucide-react' import MenuBar, { IMenuProps } from '@/pages/SettingPage/components/menuBar.tsx' @@ -37,6 +35,12 @@ const Menu = () => { // icon: , // path: '/settings/prompt', // }, + { + id: 'monitor', + name: '部署监控', + icon: , + path: '/settings/monitor', + }, { id: 'about', name: '关于', diff --git a/BillNote_frontend/src/pages/SettingPage/Monitor.tsx b/BillNote_frontend/src/pages/SettingPage/Monitor.tsx new file mode 100644 index 0000000..f806606 --- /dev/null +++ b/BillNote_frontend/src/pages/SettingPage/Monitor.tsx @@ -0,0 +1,241 @@ +import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' +import { Button } from '@/components/ui/button' +import { Badge } from '@/components/ui/badge' +import { ScrollArea } from '@/components/ui/scroll-area' +import { + Server, + Cpu, + AudioLines, + Film, + RefreshCw, + CheckCircle2, + XCircle, + Loader2 +} from 'lucide-react' +import { useState, useEffect, useCallback } from 'react' +import { getDeployStatus, DeployStatus } from '@/services/system' + +export default function Monitor() { + const [status, setStatus] = useState(null) + const [loading, setLoading] = useState(true) + const [error, setError] = useState(null) + const [lastUpdated, setLastUpdated] = useState(null) + + const fetchStatus = useCallback(async () => { + try { + setLoading(true) + setError(null) + const data = await getDeployStatus() + setStatus(data) + setLastUpdated(new Date()) + } catch (err) { + setError('无法连接到后端服务') + setStatus(null) + } finally { + setLoading(false) + } + }, []) + + useEffect(() => { + fetchStatus() + // 自动刷新（每 30 秒） + const interval = setInterval(fetchStatus, 30000) + return () => clearInterval(interval) + }, [fetchStatus]) + + const StatusBadge = ({ ok, label }: { ok: boolean; label?: string }) => ( + + {ok ? ( + <>{label || '正常'} + ) : ( + <>{label || '异常'} + )} + + ) + + return ( + +
+ {/* Header */} +
+
+

部署监控

+

+ 实时监控系统各组件运行状态 +

+
+
+ {lastUpdated && ( + + 最后更新: {lastUpdated.toLocaleTimeString()} + + )} + +
+
+ + {error && ( +
+ {error} +
+ )} + + {/* Status Cards */} +
+ {/* Backend FastAPI */} + + + + + 后端 FastAPI + + {status && } + + + {loading && !status ? ( +
+ + 加载中... +
+ ) : status ? ( +
+
+ 状态: + + {status.backend.status === 'running' ? '运行中' : status.backend.status} + +
+
+ 端口: + {status.backend.port} +
+
+ ) : null} + + + + {/* CUDA GPU */} + + + + + CUDA GPU + + {status && } + + + {loading && !status ? ( +
+ + 加载中... +
+ ) : status ? ( +
+ {status.cuda.available ? ( + <> +
+ GPU: + {status.cuda.gpu_name} +
+
+ CUDA 版本: + {status.cuda.version} +
+ + ) : ( +
+ CUDA 不可用，将使用 CPU 模式 +
+ )} +
+ ) : null} + + + + {/* Whisper Model */} + + + + + Whisper 模型 + + {status && } + + + {loading && !status ? ( +
+ + 加载中... +
+ ) : status ? ( +
+
+ 模型大小: + {status.whisper.model_size} +
+
+ 转写引擎: + {status.whisper.transcriber_type} +
+
+ ) : null} + + + + {/* FFmpeg */} + + + + + FFmpeg + + {status && } + + + {loading && !status ? ( +
+ + 加载中... +
+ ) : status ? ( +
+
+ 状态: + + {status.ffmpeg.available ? '已安装' : '未安装'} + +
+ {!status.ffmpeg.available && ( +
+ 请安装 FFmpeg 并添加到系统 PATH +
+ )} +
+ ) : null} + + +
+ + {/* Footer Info */} +
+ 状态每 30 秒自动刷新 +
+
+ + ) +} diff --git a/BillNote_frontend/src/services/system.ts b/BillNote_frontend/src/services/system.ts index 99a6b7c..4f54c97 100644 --- a/BillNote_frontend/src/services/system.ts +++ b/BillNote_frontend/src/services/system.ts @@ -1,5 +1,29 @@ import request from '@/utils/request' -export const systemCheck=async()=>{ +export const systemCheck = async () => { return await request.get('/sys_health') } + +export interface DeployStatus { + backend: { + status: string + port: number + } + cuda: { + available: boolean + version: string | null + gpu_name: string | null + } + whisper: { + model_size: string + transcriber_type: string + } + ffmpeg: { + available: boolean + } +} + +export const getDeployStatus = async (): Promise => { + return await request.get('/deploy_status') +} + diff --git a/backend/app/routers/config.py b/backend/app/routers/config.py index 350f104..eee01da 100644 --- a/backend/app/routers/config.py +++ b/backend/app/routers/config.py @@ -42,4 +42,37 @@ async def sys_health(): @router.get("/sys_check") async def sys_check(): - return R.success() \ No newline at end of file + return R.success() + + +@router.get("/deploy_status") +async def deploy_status(): + """返回部署监控所需的所有状态信息""" + import torch + import os + + # CUDA 状态 + cuda_available = torch.cuda.is_available() + cuda_info = { + "available": cuda_available, + "version": torch.version.cuda if cuda_available else None, + "gpu_name": torch.cuda.get_device_name(0) if cuda_available else None, + } + + # Whisper 模型状态 + model_size = os.getenv("WHISPER_MODEL_SIZE", "base") + transcriber_type = os.getenv("TRANSCRIBER_TYPE", "fast-whisper") + + # FFmpeg 状态 + try: + ensure_ffmpeg_or_raise() + ffmpeg_ok = True + except: + ffmpeg_ok = False + + return R.success(data={ + "backend": {"status": "running", "port": int(os.getenv("BACKEND_PORT", 8483))}, + "cuda": cuda_info, + "whisper": {"model_size": model_size, "transcriber_type": transcriber_type}, + "ffmpeg": {"available": ffmpeg_ok}, + }) \ No newline at end of file