はじめに
このブログは進化の過程を記録したもので、参考価値は低いです。以下のプロジェクトを直接確認し、Dockerで迅速にデプロイすることをお勧めします。
効果画像:
| ライト | ダーク |
|---|---|
![]() | ![]() |
旧ソリューション:SSHでnvidia-smi出力を取得
以前のフロントエンド経験はPythonでHTMLを生成する程度だったため、小型ホストを使ってGPU監視ソリューションを構築しました:
- SSHコマンドでnvidia-smiの出力を取得し、ビデオメモリ使用量などの情報を解析します。
- GPUプロセスを占有しているPIDに基づき、psコマンドでユーザーとコマンドを取得します。
- Pythonで上記情報をMarkdownとして出力し、MarkdownでHTMLに変換します。
- cronを毎分実行するように設定し、nginxでウェブルートをHTMLのディレクトリに設定します。
対応するコードは以下の通りです:
このソリューションにはいくつかの明らかな欠点があります。更新頻度が低く、完全にバックエンド依存で、アクセスの有無にかかわらずデータを絶えず更新しなければなりません。
新ソリューション:フロントエンドとバックエンドの分離
実はずっとフロントエンドとバックエンドを分離したGPU監視を実現したいと考えていました。各サーバーでfastapiを実行し、リクエストがあったときに必要なデータを返すようにします。最近開発した南哪充电のおかげで、APIからデータを取得してページにレンダリングするフロントエンドを開発する自信がつきました。
fastapiバックエンド
最近偶然、nvitopがPython呼び出しをサポートしていることを発見しました。以前はコマンドでしかデータを可視化できないと思っていました。
素晴らしい、これで必要なデータをより簡単に取得でき、コード量が大幅に削減されます! ( •̀ ω •́ )✧
しかし、面倒な問題が一つあります。私たちの研究室のサーバーはルーターの下にあり、ルーターは私の管理下になく、ポートフォワーディングはSSHのみです。
ここではfrpを使用して、各サーバーのAPIポートを私の学内の小型ホストにマッピングすることにしました。ちょうど私の小型ホストにはいくつかのWebサービスが設定されており、ドメイン経由でAPIにアクセスするのも便利です。
以前は愚かでしたが、実際にはSSH(ssh -fN -L 8000:localhost:8000 user@ip)でポートマッピングを行うことができ、コード内のfrp関連部分を削除し、DockerでWeb側を起動するのも容易になります。
コードには3つの環境変数があります:
SUBURL: APIのパスを設定するために使用します。例えばサーバー名などを指定します。FRP_PATH: frpとその設定が存在するパスで、APIポートを私の学内の小型ホストにマッピングするために使用します。もしサーバーに直接アクセスできるなら、関連関数を削除し、最後の行を0.0.0.0に変更し、IP(または各サーバーにドメインを設定)でアクセスすればよいです。PORT: APIが存在するポートです。
ここでは2つのインターフェースのみ記述しました 、実際には1つしか使用していません
/count: GPUの数を返します。/status: 具体的な状態情報を返します。返却データは以下の例を参照してください。ただし、ここでは2つのオプションパラメータを追加で記述しました:idx: カンマ区切りの数字で、指定したGPUの状態を取得できます。process: 返却するプロセスをフィルタリングするために使用します。使用時には直接Cに設定し、計算タスクのみを表示します。
Vueで実装したフロントエンド
ここでは少し手抜きをします 、実はできないからですが、とりあえず元々Pythonで生成したUIをそのままコピーしました。
npm run build でリリースファイルを無事取得し、nginxのrootをそのフォルダに設定すれば完了です。
実装効果: https://nvtop.njucite.cn/
UIは相変わらず醜いですが、少なくとも動的に更新できるようになりました。やったね!
新しいUI
まずはここに餅を描いておきます。学び終えて帰ってきたら。( ̄_, ̄ )
より美しいUI(これが達成できたかどうかはわかりません。私はデザインの才能がありません)
使用率折れ線グラフの追加
ダークモード対応
2024/12/27:nextjsを使って上記のTODOをすべて完了しました。さらに、一部のホストを非表示にする機能を実装し、非表示設定をcookieに保存して、次回開いたときに同じ状態を表示できるようにしました。
2025/03/11:nextjsにメールログイン機能を更新し、許可されたユーザーのみがアクセスできるようにしました。
2025/09/18:コードを整理し、現在は機能がほぼ完成し、他の人が直接デプロイしやすくなりました。
完全なコードは以下を参照してください:

