cards

Card components for rendering system monitoring dashboards with CPU, memory, disk, network, GPU, process, and temperature information.

---

source

get_cpu_text_color

 get_cpu_text_color (percent:float)

Get semantic color based on CPU usage percentage.

	Type	Details
percent	float	CPU usage percentage
Returns	ColoredUtilityDaisyUI	CSS class string for semantic color based on CPU usage

---

source

render_cpu_cores_grid

 render_cpu_cores_grid (cpu_percents:list)

Render CPU cores as a responsive grid with color-coded percentages.

	Type	Details
cpu_percents	list	List of CPU usage percentages for each core
Returns	FT	A Div element containing a responsive grid of CPU core usage

import random
render_cpu_cores_grid([random.randint(0,100) for i in range(32)])

<div class="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-5 2xl:grid-cols-6 gap-2 sm:gap-3 w-full">
  <div class="flex flex-col items-center justify-center p-2 sm:p-3 bg-base-200 rounded-md min-w-12 sm:min-w-14 h-12 sm:h-14">
<span class="text-xs text-base-content/60 font-normal">C0</span>    <div class="text-xs sm:text-sm font-semibold text-success">42%</div>
  </div>
  <div class="flex flex-col items-center justify-center p-2 sm:p-3 bg-base-200 rounded-md min-w-12 sm:min-w-14 h-12 sm:h-14">
<span class="text-xs text-base-content/60 font-normal">C1</span>    <div class="text-xs sm:text-sm font-semibold text-success">24%</div>
  </div>
  <div class="flex flex-col items-center justify-center p-2 sm:p-3 bg-base-200 rounded-md min-w-12 sm:min-w-14 h-12 sm:h-14">
<span class="text-xs text-base-content/60 font-normal">C2</span>    <div class="text-xs sm:text-sm font-semibold text-base-content/60">6%</div>
  </div>
  <div class="flex flex-col items-center justify-center p-2 sm:p-3 bg-base-200 rounded-md min-w-12 sm:min-w-14 h-12 sm:h-14">
<span class="text-xs text-base-content/60 font-normal">C3</span>    <div class="text-xs sm:text-sm font-semibold text-warning">68%</div>
  </div>
  <div class="flex flex-col items-center justify-center p-2 sm:p-3 bg-base-200 rounded-md min-w-12 sm:min-w-14 h-12 sm:h-14">
<span class="text-xs text-base-content/60 font-normal">C4</span>    <div class="text-xs sm:text-sm font-semibold text-error">91%</div>
  </div>
  <div class="flex flex-col items-center justify-center p-2 sm:p-3 bg-base-200 rounded-md min-w-12 sm:min-w-14 h-12 sm:h-14">
<span class="text-xs text-base-content/60 font-normal">C5</span>    <div class="text-xs sm:text-sm font-semibold text-base-content/60">12%</div>
  </div>
  <div class="flex flex-col items-center justify-center p-2 sm:p-3 bg-base-200 rounded-md min-w-12 sm:min-w-14 h-12 sm:h-14">
<span class="text-xs text-base-content/60 font-normal">C6</span>    <div class="text-xs sm:text-sm font-semibold text-success">37%</div>
  </div>
  <div class="flex flex-col items-center justify-center p-2 sm:p-3 bg-base-200 rounded-md min-w-12 sm:min-w-14 h-12 sm:h-14">
<span class="text-xs text-base-content/60 font-normal">C7</span>    <div class="text-xs sm:text-sm font-semibold text-success">23%</div>
  </div>
  <div class="flex flex-col items-center justify-center p-2 sm:p-3 bg-base-200 rounded-md min-w-12 sm:min-w-14 h-12 sm:h-14">
<span class="text-xs text-base-content/60 font-normal">C8</span>    <div class="text-xs sm:text-sm font-semibold text-warning">76%</div>
  </div>
  <div class="flex flex-col items-center justify-center p-2 sm:p-3 bg-base-200 rounded-md min-w-12 sm:min-w-14 h-12 sm:h-14">
<span class="text-xs text-base-content/60 font-normal">C9</span>    <div class="text-xs sm:text-sm font-semibold text-success">33%</div>
  </div>
  <div class="flex flex-col items-center justify-center p-2 sm:p-3 bg-base-200 rounded-md min-w-12 sm:min-w-14 h-12 sm:h-14">
<span class="text-xs text-base-content/60 font-normal">C10</span>    <div class="text-xs sm:text-sm font-semibold text-base-content/60">16%</div>
  </div>
  <div class="flex flex-col items-center justify-center p-2 sm:p-3 bg-base-200 rounded-md min-w-12 sm:min-w-14 h-12 sm:h-14">
<span class="text-xs text-base-content/60 font-normal">C11</span>    <div class="text-xs sm:text-sm font-semibold text-error">95%</div>
  </div>
  <div class="flex flex-col items-center justify-center p-2 sm:p-3 bg-base-200 rounded-md min-w-12 sm:min-w-14 h-12 sm:h-14">
<span class="text-xs text-base-content/60 font-normal">C12</span>    <div class="text-xs sm:text-sm font-semibold text-warning">59%</div>
  </div>
  <div class="flex flex-col items-center justify-center p-2 sm:p-3 bg-base-200 rounded-md min-w-12 sm:min-w-14 h-12 sm:h-14">
<span class="text-xs text-base-content/60 font-normal">C13</span>    <div class="text-xs sm:text-sm font-semibold text-success">40%</div>
  </div>
  <div class="flex flex-col items-center justify-center p-2 sm:p-3 bg-base-200 rounded-md min-w-12 sm:min-w-14 h-12 sm:h-14">
<span class="text-xs text-base-content/60 font-normal">C14</span>    <div class="text-xs sm:text-sm font-semibold text-warning">60%</div>
  </div>
  <div class="flex flex-col items-center justify-center p-2 sm:p-3 bg-base-200 rounded-md min-w-12 sm:min-w-14 h-12 sm:h-14">
<span class="text-xs text-base-content/60 font-normal">C15</span>    <div class="text-xs sm:text-sm font-semibold text-success">33%</div>
  </div>
  <div class="flex flex-col items-center justify-center p-2 sm:p-3 bg-base-200 rounded-md min-w-12 sm:min-w-14 h-12 sm:h-14">
<span class="text-xs text-base-content/60 font-normal">C16</span>    <div class="text-xs sm:text-sm font-semibold text-success">21%</div>
  </div>
  <div class="flex flex-col items-center justify-center p-2 sm:p-3 bg-base-200 rounded-md min-w-12 sm:min-w-14 h-12 sm:h-14">
<span class="text-xs text-base-content/60 font-normal">C17</span>    <div class="text-xs sm:text-sm font-semibold text-warning">70%</div>
  </div>
  <div class="flex flex-col items-center justify-center p-2 sm:p-3 bg-base-200 rounded-md min-w-12 sm:min-w-14 h-12 sm:h-14">
<span class="text-xs text-base-content/60 font-normal">C18</span>    <div class="text-xs sm:text-sm font-semibold text-warning">67%</div>
  </div>
  <div class="flex flex-col items-center justify-center p-2 sm:p-3 bg-base-200 rounded-md min-w-12 sm:min-w-14 h-12 sm:h-14">
<span class="text-xs text-base-content/60 font-normal">C19</span>    <div class="text-xs sm:text-sm font-semibold text-success">24%</div>
  </div>
  <div class="flex flex-col items-center justify-center p-2 sm:p-3 bg-base-200 rounded-md min-w-12 sm:min-w-14 h-12 sm:h-14">
<span class="text-xs text-base-content/60 font-normal">C20</span>    <div class="text-xs sm:text-sm font-semibold text-warning">52%</div>
  </div>
  <div class="flex flex-col items-center justify-center p-2 sm:p-3 bg-base-200 rounded-md min-w-12 sm:min-w-14 h-12 sm:h-14">
<span class="text-xs text-base-content/60 font-normal">C21</span>    <div class="text-xs sm:text-sm font-semibold text-warning">54%</div>
  </div>
  <div class="flex flex-col items-center justify-center p-2 sm:p-3 bg-base-200 rounded-md min-w-12 sm:min-w-14 h-12 sm:h-14">
<span class="text-xs text-base-content/60 font-normal">C22</span>    <div class="text-xs sm:text-sm font-semibold text-warning">59%</div>
  </div>
  <div class="flex flex-col items-center justify-center p-2 sm:p-3 bg-base-200 rounded-md min-w-12 sm:min-w-14 h-12 sm:h-14">
<span class="text-xs text-base-content/60 font-normal">C23</span>    <div class="text-xs sm:text-sm font-semibold text-success">30%</div>
  </div>
  <div class="flex flex-col items-center justify-center p-2 sm:p-3 bg-base-200 rounded-md min-w-12 sm:min-w-14 h-12 sm:h-14">
<span class="text-xs text-base-content/60 font-normal">C24</span>    <div class="text-xs sm:text-sm font-semibold text-success">43%</div>
  </div>
  <div class="flex flex-col items-center justify-center p-2 sm:p-3 bg-base-200 rounded-md min-w-12 sm:min-w-14 h-12 sm:h-14">
<span class="text-xs text-base-content/60 font-normal">C25</span>    <div class="text-xs sm:text-sm font-semibold text-success">31%</div>
  </div>
  <div class="flex flex-col items-center justify-center p-2 sm:p-3 bg-base-200 rounded-md min-w-12 sm:min-w-14 h-12 sm:h-14">
<span class="text-xs text-base-content/60 font-normal">C26</span>    <div class="text-xs sm:text-sm font-semibold text-base-content/60">18%</div>
  </div>
  <div class="flex flex-col items-center justify-center p-2 sm:p-3 bg-base-200 rounded-md min-w-12 sm:min-w-14 h-12 sm:h-14">
<span class="text-xs text-base-content/60 font-normal">C27</span>    <div class="text-xs sm:text-sm font-semibold text-success">23%</div>
  </div>
  <div class="flex flex-col items-center justify-center p-2 sm:p-3 bg-base-200 rounded-md min-w-12 sm:min-w-14 h-12 sm:h-14">
<span class="text-xs text-base-content/60 font-normal">C28</span>    <div class="text-xs sm:text-sm font-semibold text-warning">54%</div>
  </div>
  <div class="flex flex-col items-center justify-center p-2 sm:p-3 bg-base-200 rounded-md min-w-12 sm:min-w-14 h-12 sm:h-14">
<span class="text-xs text-base-content/60 font-normal">C29</span>    <div class="text-xs sm:text-sm font-semibold text-base-content/60">13%</div>
  </div>
  <div class="flex flex-col items-center justify-center p-2 sm:p-3 bg-base-200 rounded-md min-w-12 sm:min-w-14 h-12 sm:h-14">
<span class="text-xs text-base-content/60 font-normal">C30</span>    <div class="text-xs sm:text-sm font-semibold text-warning">73%</div>
  </div>
  <div class="flex flex-col items-center justify-center p-2 sm:p-3 bg-base-200 rounded-md min-w-12 sm:min-w-14 h-12 sm:h-14">
<span class="text-xs text-base-content/60 font-normal">C31</span>    <div class="text-xs sm:text-sm font-semibold text-warning">79%</div>
  </div>
</div>

---

source

render_os_info_card

 render_os_info_card ()

Render the OS information card.

render_os_info_card()

<div class="card-body p-6">
  <div class="mb-6">
    <h3 class="card-title text-lg font-bold text-base-content">Operating System</h3>
  </div>
  <div class="stats stats-vertical bg-base-200 rounded-lg p-6 overflow-x-auto w-full">
    <div class="stat">
      <div class="stat-title text-xs text-base-content/60">System</div>
      <div class="stat-value text-2xl font-bold text-base-content">Linux 6.14.0-33-generic</div>
      <div class="stat-desc text-xs text-base-content/50">x86_64</div>
    </div>
    <div class="stat">
      <div class="stat-title text-xs text-base-content/60">Hostname</div>
      <div class="stat-value text-2xl font-bold text-base-content">innom-dt</div>
      <div class="stat-desc text-xs text-base-content/50">Python 3.11.13</div>
    </div>
    <div class="stat">
      <div class="stat-title text-xs text-base-content/60">Boot Time</div>
      <div class="stat-value text-2xl font-bold text-base-content">2025-10-03 11:03:05</div>
      <div class="stat-desc text-xs text-base-content/50">Uptime: 5h 25m</div>
    </div>
    <div class="stat">
      <div class="stat-title text-xs text-base-content/60">CPU Cores</div>
      <div class="stat-value text-2xl font-bold text-base-content">16 Physical</div>
      <div class="stat-desc text-xs text-base-content/50">32 Logical</div>
    </div>
  </div>
</div>

---

source

render_cpu_card

 render_cpu_card (cpu_info:dict)

Render the CPU usage card.

	Type	Details
cpu_info	dict	Dictionary containing CPU usage information
Returns	FT	A Div element containing the CPU usage card

from cjm_fasthtml_sysmon.monitors.cpu import get_cpu_info

cpu_info = get_cpu_info()
render_cpu_card(cpu_info=cpu_info)

<div id="cpu-card-body" class="card-body p-6">
  <div class="flex justify-between items-center mb-6">
    <h3 class="card-title text-lg font-bold text-base-content">CPU Usage</h3>
<span class="badge badge-primary badge-xl">67.5%</span>  </div>
  <div class="mb-6">
    <div>
      <div class="justify-between mb-2 flex">
<span class="text-sm font-medium text-base-content">Overall Usage</span><span class="text-xs text-base-content/70">67.5%</span>      </div>
<progress value="67.5" max="100" class="progress progress-warning w-full h-2"></progress>    </div>
  </div>
  <div class="mb-6">
    <p class="text-sm font-semibold mb-3">CPU Frequency</p>
    <div class="flex justify-between gap-2">
<span class="text-primary text-sm font-medium">Current: 3043 MHz</span><span class="text-base-content/70 text-xs">Min: 0 MHz</span><span class="text-base-content/70 text-xs">Max: 0 MHz</span>    </div>
  </div>
  <div class="mt-6">
    <p class="text-sm font-semibold mb-3">Per Core Usage</p>
    <div class="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-5 2xl:grid-cols-6 gap-2 sm:gap-3 w-full">
      <div class="flex flex-col items-center justify-center p-2 sm:p-3 bg-base-200 rounded-md min-w-12 sm:min-w-14 h-12 sm:h-14">
<span class="text-xs text-base-content/60 font-normal">C0</span>        <div class="text-xs sm:text-sm font-semibold text-warning">70%</div>
      </div>
      <div class="flex flex-col items-center justify-center p-2 sm:p-3 bg-base-200 rounded-md min-w-12 sm:min-w-14 h-12 sm:h-14">
<span class="text-xs text-base-content/60 font-normal">C1</span>        <div class="text-xs sm:text-sm font-semibold text-success">30%</div>
      </div>
      <div class="flex flex-col items-center justify-center p-2 sm:p-3 bg-base-200 rounded-md min-w-12 sm:min-w-14 h-12 sm:h-14">
<span class="text-xs text-base-content/60 font-normal">C2</span>        <div class="text-xs sm:text-sm font-semibold text-warning">64%</div>
      </div>
      <div class="flex flex-col items-center justify-center p-2 sm:p-3 bg-base-200 rounded-md min-w-12 sm:min-w-14 h-12 sm:h-14">
<span class="text-xs text-base-content/60 font-normal">C3</span>        <div class="text-xs sm:text-sm font-semibold text-success">22%</div>
      </div>
    </div>
  </div>
</div>

---

source

render_memory_card

 render_memory_card (mem_info:dict)

Render the memory usage card.

	Type	Details
mem_info	dict	Dictionary containing memory usage information
Returns	FT	A Div element containing the memory usage card

from cjm_fasthtml_sysmon.monitors.memory import get_memory_info

mem_info = get_memory_info()
render_memory_card(mem_info=mem_info)

<div id="memory-card-body" class="card-body p-6">
  <div class="flex justify-between items-center mb-6">
    <h3 class="card-title text-lg font-bold text-base-content">Memory Usage</h3>
<span class="badge badge-primary badge-xl">8.7%</span>  </div>
  <div class="mb-6">
    <p class="text-sm font-semibold mb-3">RAM</p>
    <div>
      <div class="justify-between mb-2 flex">
<span class="text-sm font-medium text-base-content">1.4 GB / 15.6 GB</span><span class="text-xs text-base-content/70">8.7%</span>      </div>
<progress value="8.7" max="100" class="progress progress-success w-full h-2"></progress>    </div>
    <p class="text-xs text-base-content/70 mt-2">Available: 14.3 GB</p>
  </div>
  <div class="mt-6">
    <p class="text-sm font-semibold mb-3">Swap</p>
    <div>
      <div class="justify-between mb-2 flex">
<span class="text-sm font-medium text-base-content">0.0 B / 4.0 GB</span><span class="text-xs text-base-content/70">0.0%</span>      </div>
<progress value="0.0" max="100" class="progress progress-success w-full h-2"></progress>    </div>
  </div>
</div>

---

source

render_disk_entries

 render_disk_entries (disk_info:list)

Render just the disk entries section.

	Type	Details
disk_info	list	List of dictionaries containing disk information
Returns	FT	A Div element containing disk entries

---

source

render_disk_card

 render_disk_card (disk_info:list)

Render the disk usage card using helper functions.

	Type	Details
disk_info	list	List of dictionaries containing disk usage information
Returns	FT	A Div element containing the disk usage card

from cjm_fasthtml_sysmon.monitors.disk import get_disk_info

disk_info = get_disk_info()
render_disk_card(disk_info=disk_info)

<div id="disk-card-body" class="card-body p-6">
  <div class="mb-6">
    <h3 class="card-title text-lg font-bold text-base-content">Disk Usage</h3>
  </div>
  <div id="disk-entries">
    <div class="p-4 bg-base-200 rounded-lg mb-4">
      <div class="mb-3">
        <p class="text-sm font-semibold">/dev/sda1</p>
        <p class="text-xs text-base-content/70">/ (ext4)</p>
      </div>
      <div>
        <div class="justify-between mb-2 flex">
<span class="text-sm font-medium text-base-content">49.9 GB / 71.6 GB</span><span class="text-xs text-base-content/70">69.7%</span>        </div>
<progress value="69.7" max="100" class="progress progress-warning w-full h-2"></progress>      </div>
      <p class="text-xs text-base-content/70 mt-2">Free: 21.7 GB</p>
    </div>
    <div class="p-4 bg-base-200 rounded-lg mb-4">
      <div class="mb-3">
        <p class="text-sm font-semibold">/dev/sda16</p>
        <p class="text-xs text-base-content/70">/boot (ext4)</p>
      </div>
      <div>
        <div class="justify-between mb-2 flex">
<span class="text-sm font-medium text-base-content">59.2 MB / 880.4 MB</span><span class="text-xs text-base-content/70">7.2%</span>        </div>
<progress value="7.2" max="100" class="progress progress-success w-full h-2"></progress>      </div>
      <p class="text-xs text-base-content/70 mt-2">Free: 759.5 MB</p>
    </div>
    <div class="p-4 bg-base-200 rounded-lg mb-4">
      <div class="mb-3">
        <p class="text-sm font-semibold">/dev/sda15</p>
        <p class="text-xs text-base-content/70">/boot/efi (vfat)</p>
      </div>
      <div>
        <div class="justify-between mb-2 flex">
<span class="text-sm font-medium text-base-content">6.1 MB / 104.3 MB</span><span class="text-xs text-base-content/70">5.8%</span>        </div>
<progress value="5.8" max="100" class="progress progress-success w-full h-2"></progress>      </div>
      <p class="text-xs text-base-content/70 mt-2">Free: 98.2 MB</p>
    </div>
    <div class="p-4 bg-base-200 rounded-lg mb-4">
      <div class="mb-3">
        <p class="text-sm font-semibold">/dev/sdb1</p>
        <p class="text-xs text-base-content/70">/mnt (ext4)</p>
      </div>
      <div>
        <div class="justify-between mb-2 flex">
<span class="text-sm font-medium text-base-content">4.0 GB / 73.3 GB</span><span class="text-xs text-base-content/70">5.8%</span>        </div>
<progress value="5.8" max="100" class="progress progress-success w-full h-2"></progress>      </div>
      <p class="text-xs text-base-content/70 mt-2">Free: 65.5 GB</p>
    </div>
  </div>
</div>

---

source

render_network_interfaces

 render_network_interfaces (net_info:dict)

Render just the network interfaces section.

	Type	Details
net_info	dict	Dictionary containing network information
Returns	FT	A Div element containing network interfaces

---

source

render_network_connections

 render_network_connections (net_info:dict)

Render just the network connections section.

	Type	Details
net_info	dict	Dictionary containing network information
Returns	FT	A Div element containing connection statistics

---

source

render_network_card

 render_network_card (net_info:dict)

Render the network monitoring card using helper functions.

	Type	Details
net_info	dict	Dictionary containing network interface and connection information
Returns	FT	A Div element containing the network monitoring card

from cjm_fasthtml_sysmon.monitors.network import get_network_info

net_info = get_network_info()
render_network_card(net_info=net_info)

<div id="network-card-body" class="card-body p-6">
  <div class="flex justify-between items-center mb-6">
    <h3 class="card-title text-lg font-bold text-base-content">Network</h3>
<span class="badge badge-info badge-xl">2 Active</span>  </div>
  <div id="network-interfaces">
    <div class="p-4 bg-base-200 rounded-lg mb-4">
      <div class="mb-3">
        <p class="text-sm font-semibold">eth0</p>
        <p class="text-xs text-base-content/70">10.1.0.221</p>
      </div>
      <div>
<label class="mb-3"><label class="flex justify-between"><span class="text-xs text-base-content">↑ Upload</span><span class="text-xs text-info font-medium">0 B/s</span></label><progress value="0.0" max="100" class="progress progress-info w-full h-2"></progress></label><label class="mb-3"><label class="flex justify-between"><span class="text-xs text-base-content">↓ Download</span><span class="text-xs text-success font-medium">0 B/s</span></label><progress value="0.0" max="100" class="progress progress-success w-full h-2"></progress></label><label class="mt-2"><span class="text-xs text-base-content/70">Total: ↑8.5 MB ↓392.4 MB</span></label>      </div>
    </div>
    <div class="p-4 bg-base-200 rounded-lg mb-4">
      <div class="mb-3">
        <p class="text-sm font-semibold">docker0</p>
        <p class="text-xs text-base-content/70">172.17.0.1</p>
      </div>
      <div>
<label class="mb-3"><label class="flex justify-between"><span class="text-xs text-base-content">↑ Upload</span><span class="text-xs text-info font-medium">0 B/s</span></label><progress value="0.0" max="100" class="progress progress-info w-full h-2"></progress></label><label class="mb-3"><label class="flex justify-between"><span class="text-xs text-base-content">↓ Download</span><span class="text-xs text-success font-medium">0 B/s</span></label><progress value="0.0" max="100" class="progress progress-success w-full h-2"></progress></label><label class="mt-2"><span class="text-xs text-base-content/70">Total: ↑0.0 B ↓0.0 B</span></label>      </div>
    </div>
  </div>
  <div id="network-connections" class="mt-3">
    <p class="text-sm font-medium mb-2">Connections</p>
    <div class="stats bg-base-200 rounded-lg p-2 text-xs overflow-x-auto w-full">
      <div class="stat">
        <div class="stat-title text-xs text-base-content/60">Total</div>
        <div class="stat-value text-2xl font-bold text-base-content">22</div>
      </div>
      <div class="stat">
        <div class="stat-title text-xs text-base-content/60">Established</div>
        <div class="stat-value text-2xl font-bold text-base-content">11</div>
      </div>
      <div class="stat">
        <div class="stat-title text-xs text-base-content/60">Listening</div>
        <div class="stat-value text-2xl font-bold text-base-content">4</div>
      </div>
      <div class="stat">
        <div class="stat-title text-xs text-base-content/60">Time Wait</div>
        <div class="stat-value text-2xl font-bold text-base-content">2</div>
      </div>
    </div>
  </div>
</div>

---

source

render_process_card

 render_process_card (proc_info:dict)

Render the process monitoring card.

	Type	Details
proc_info	dict	Dictionary containing process information and statistics
Returns	FT	A Div element containing the process monitoring card

from cjm_fasthtml_sysmon.monitors.processes import get_process_info

proc_info = get_process_info()
render_process_card(proc_info=proc_info)

<div id="process-card-body" class="card-body">
  <div class="flex justify-between items-center mb-4">
    <h3 class="card-title text-base-content">Process Monitor</h3>
<span id="process-count" class="badge badge-primary badge-lg">41 processes</span>  </div>
  <div id="process-status" class="flex flex-wrap gap-1 mb-4">
<span class="badge badge-neutral badge-sm mr-2">sleeping: 40</span><span class="badge badge-info badge-sm mr-2">running: 1</span>  </div>
  <div class="mb-4">
    <div role="tablist" class="tabs tabs-box">
<button onclick="document.getElementById('cpu-processes').style.display='block'; document.getElementById('memory-processes').style.display='none'; this.classList.add('tab-active'); document.getElementById('mem-tab').classList.remove('tab-active')" id="cpu-tab" class="tab tab-active" name="cpu-tab">Top CPU</button><button onclick="document.getElementById('memory-processes').style.display='block'; document.getElementById('cpu-processes').style.display='none'; this.classList.add('tab-active'); document.getElementById('cpu-tab').classList.remove('tab-active')" id="mem-tab" class="tab" name="mem-tab">Top Memory</button>    </div>
  </div>
  <div id="cpu-processes" class="overflow-x-auto" style="display: block;">
    <div id="cpu-processes-table">
      <table class="table table-zebra table-xs w-full">
        <thead>
          <tr>
            <th class="text-xs w-16">PID</th>
            <th class="text-xs">Name</th>
            <th class="text-xs w-20">CPU %</th>
            <th class="text-xs w-24">Memory</th>
            <th class="text-xs">User</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="text-xs">1</td>
            <td class="text-xs font-medium">systemd</td>
            <td>
<label class="badge badge-info badge-sm">0.0%</label>            </td>
            <td class="text-xs">14 MB</td>
            <td class="text-xs">root</td>
          </tr>
          <tr>
            <td class="text-xs">172</td>
            <td class="text-xs font-medium">systemd-journald</td>
            <td>
<label class="badge badge-info badge-sm">0.0%</label>            </td>
            <td class="text-xs">15 MB</td>
            <td class="text-xs">root</td>
          </tr>
          <tr>
            <td class="text-xs">236</td>
            <td class="text-xs font-medium">multipathd</td>
            <td>
<label class="badge badge-info badge-sm">0.0%</label>            </td>
            <td class="text-xs">42 MB</td>
            <td class="text-xs">root</td>
          </tr>
          <tr>
            <td class="text-xs">240</td>
            <td class="text-xs font-medium">systemd-udevd</td>
            <td>
<label class="badge badge-info badge-sm">0.0%</label>            </td>
            <td class="text-xs">7 MB</td>
            <td class="text-xs">root</td>
          </tr>
          <tr>
            <td class="text-xs">387</td>
            <td class="text-xs font-medium">hv_kvp_daemon</td>
            <td>
<label class="badge badge-info badge-sm">0.0%</label>            </td>
            <td class="text-xs">3 MB</td>
            <td class="text-xs">root</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div id="memory-processes" class="overflow-x-auto" style="display: none;">
    <div id="memory-processes-table">
      <table class="table table-zebra table-xs w-full">
        <thead>
          <tr>
            <th class="text-xs w-16">PID</th>
            <th class="text-xs">Name</th>
            <th class="text-xs w-20">Memory %</th>
            <th class="text-xs w-24">Memory</th>
            <th class="text-xs">User</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="text-xs">2004</td>
            <td class="text-xs font-medium">Runner.Worker</td>
            <td>
<label class="badge badge-info badge-sm">0.8%</label>            </td>
            <td class="text-xs">125 MB</td>
            <td class="text-xs">runner</td>
          </tr>
          <tr>
            <td class="text-xs">1989</td>
            <td class="text-xs font-medium">Runner.Listener</td>
            <td>
<label class="badge badge-info badge-sm">0.6%</label>            </td>
            <td class="text-xs">91 MB</td>
            <td class="text-xs">runner</td>
          </tr>
          <tr>
            <td class="text-xs">2342</td>
            <td class="text-xs font-medium">python</td>
            <td>
<label class="badge badge-info badge-sm">0.5%</label>            </td>
            <td class="text-xs">81 MB</td>
            <td class="text-xs">runner</td>
          </tr>
          <tr>
            <td class="text-xs">2341</td>
            <td class="text-xs font-medium">python</td>
            <td>
<label class="badge badge-info badge-sm">0.5%</label>            </td>
            <td class="text-xs">80 MB</td>
            <td class="text-xs">runner</td>
          </tr>
          <tr>
            <td class="text-xs">2338</td>
            <td class="text-xs font-medium">python</td>
            <td>
<label class="badge badge-info badge-sm">0.5%</label>            </td>
            <td class="text-xs">79 MB</td>
            <td class="text-xs">runner</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

---

source

render_gpu_metrics

 render_gpu_metrics (gpu_info:dict)

Render just the GPU metrics section (utilization, memory, temp, power).

	Type	Details
gpu_info	dict	Dictionary containing GPU information
Returns	FT	A Div element containing GPU metrics section

---

source

render_gpu_processes_section

 render_gpu_processes_section (gpu_info:dict)

Render just the GPU processes section.

	Type	Details
gpu_info	dict	Dictionary containing GPU information
Returns	FT	A Div element containing GPU processes section

---

source

render_gpu_card

 render_gpu_card (gpu_info:dict)

Render the GPU information card using helper functions.

	Type	Details
gpu_info	dict	Dictionary containing GPU information and statistics
Returns	FT	A Div element containing the GPU information card

from cjm_fasthtml_sysmon.monitors.gpu import get_gpu_info

gpu_info = get_gpu_info()
render_gpu_card(gpu_info=gpu_info)

<div id="gpu-card-body" class="card-body">
  <div class="flex justify-between items-center mb-4">
    <h3 class="card-title text-base-content">GPU Information</h3>
<span class="badge badge-success badge-lg">NVIDIA</span>  </div>
  <div id="gpu-metrics">
    <div class="p-3 bg-base-200 rounded-lg mb-3">
      <p class="text-sm font-medium mb-2">NVIDIA GeForce RTX 4090</p>
      <div>
<label class="mb-3">          <p class="text-xs text-base-content">GPU Utilization</p>
          <div>
<progress value="26" max="100" class="progress progress-success w-full h-2"></progress>          </div>
</label><label class="mb-3">          <p class="text-xs text-base-content">Memory</p>
          <div>
            <div class="justify-between mb-2 flex">
<span class="text-sm font-medium text-base-content">1666 MB / 24564 MB</span><span class="text-xs text-base-content/70">6.8%</span>            </div>
<progress value="6.782283015795473" max="100" class="progress progress-success w-full h-2"></progress>          </div>
</label><label class="mb-3">          <p class="text-xs text-base-content">Temperature</p>
<label class="mt-1"><span class="font-medium text-success">47°C</span></label></label><label class="mb-3">          <p class="text-xs text-base-content">Power</p>
<label><span class="text-sm text-base-content">28.1W / 450.0W</span>            <div>
<progress value="6.250666666666667" max="100" class="progress progress-success w-full h-2"></progress>            </div>
</label></label><label class="flex items-center"><span class="text-xs text-base-content">Fan: 0%</span><span class="text-xs text-base-content ml-3">Enc: 0%</span><span class="text-xs text-base-content ml-3">Dec: 0%</span><span class="text-xs text-base-content ml-3">Processes: 9</span></label>      </div>
    </div>
  </div>
  <div id="gpu-processes-section">
    <div class="divider my-3"></div>
    <p class="text-sm font-semibold mb-3 text-base-content">GPU Processes</p>
    <div id="gpu-processes-table" class="overflow-x-auto bg-base-200 rounded-lg p-2">
      <table class="table table-xs w-full">
        <thead>
          <tr>
            <th class="text-xs font-medium text-base-content">PID</th>
            <th class="text-xs font-medium text-base-content">Process</th>
            <th class="text-xs font-medium text-base-content">GPU Memory</th>
            <th class="text-xs font-medium text-base-content">GPU Usage</th>
            <th class="text-xs font-medium text-base-content">Device</th>
          </tr>
        </thead>
        <tbody id="gpu-processes-table-body">
          <tr>
            <td class="text-xs text-base-content">5540</td>
            <td class="text-xs font-medium">/usr/lib/xorg/Xorg vt2 -displayfd 3 -auth /run/user/1000/gdm/Xauthority -nolisten tcp -background none -noreset -keeptty -novtswitch -verbose 3</td>
            <td>
<span class="badge badge-primary badge-xs">662 MB</span>            </td>
            <td class="text-xs text-success">13%</td>
            <td class="text-xs text-base-content">GPU 0</td>
          </tr>
          <tr>
            <td class="text-xs text-base-content">15213</td>
            <td class="text-xs font-medium">/snap/firefox/6933/usr/lib/firefox/firefox</td>
            <td>
<span class="badge badge-primary badge-xs">585 MB</span>            </td>
            <td class="text-xs text-success">7%</td>
            <td class="text-xs text-base-content">GPU 0</td>
          </tr>
          <tr>
            <td class="text-xs text-base-content">5789</td>
            <td class="text-xs font-medium">/usr/bin/gnome-shell</td>
            <td>
<span class="badge badge-primary badge-xs">67 MB</span>            </td>
            <td class="text-xs text-success">12%</td>
            <td class="text-xs text-base-content">GPU 0</td>
          </tr>
          <tr>
            <td class="text-xs text-base-content">11943</td>
            <td class="text-xs font-medium">/usr/share/typora/Typora --type=zygote --no-zygote-sandbox</td>
            <td>
<span class="badge badge-primary badge-xs">60 MB</span>            </td>
            <td class="text-xs text-success">0%</td>
            <td class="text-xs text-base-content">GPU 0</td>
          </tr>
          <tr>
            <td class="text-xs text-base-content">10959</td>
            <td class="text-xs font-medium">/proc/self/exe --type=gpu-process --disable-gpu-sandbox --no-sandbox --enable-crash-reporter=94bcc087-1c49-442f-93c6-80a5155613d1,no_channel --user-data-dir=/home/innom-dt/.config/Code --gpu-preferences=UAAAAAAAAAAgAAAEAAAAAAAAAAAAAAAAAABgAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAAABAAAAAAAAAAEAAAAAAAAAAIAAAAAAAAAAgAAAAAAAAA --shared-files --field-trial-handle=3,i,9560145419620642606,14455839646559291578,262144 --enable-features=DocumentPolicyIncludeJSCallStacksInCrashReports,EarlyEstablishGpuChannel,EstablishGpuChannelAsync --disable-features=CalculateNativeWinOcclusion,FontationsLinuxSystemFonts,ScreenAIOCREnabled,SpareRendererForSitePerProcess --variations-seed-version</td>
            <td>
<span class="badge badge-primary badge-xs">37 MB</span>            </td>
            <td class="text-xs text-success">0%</td>
            <td class="text-xs text-base-content">GPU 0</td>
          </tr>
          <tr>
            <td class="text-xs text-base-content">179510</td>
            <td class="text-xs font-medium">/usr/bin/vlc --started-from-file "/home/innom-dt/Downloads/EVERYTHING you need to know to build a Dashboard UI in 8 minutes.mp4"</td>
            <td>
<span class="badge badge-primary badge-xs">31 MB</span>            </td>
            <td class="text-xs text-success">0%</td>
            <td class="text-xs text-base-content">GPU 0</td>
          </tr>
          <tr>
            <td class="text-xs text-base-content">10723</td>
            <td class="text-xs font-medium">/usr/bin/nautilus --gapplication-service</td>
            <td>
<span class="badge badge-primary badge-xs">16 MB</span>            </td>
            <td class="text-xs text-success">0%</td>
            <td class="text-xs text-base-content">GPU 0</td>
          </tr>
          <tr>
            <td class="text-xs text-base-content">6439</td>
            <td class="text-xs font-medium">/usr/libexec/xdg-desktop-portal-gnome</td>
            <td>
<span class="badge badge-primary badge-xs">8 MB</span>            </td>
            <td class="text-xs text-success">0%</td>
            <td class="text-xs text-base-content">GPU 0</td>
          </tr>
          <tr>
            <td class="text-xs text-base-content">27005</td>
            <td class="text-xs font-medium">/usr/bin/nvidia-settings</td>
            <td>
<span class="badge badge-primary badge-xs">0 MB</span>            </td>
            <td class="text-xs text-success">0%</td>
            <td class="text-xs text-base-content">GPU 0</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

---

source

render_temperature_sensors

 render_temperature_sensors (temp_info:list)

Render just the temperature sensors section.

	Type	Details
temp_info	list	List of dictionaries containing temperature information
Returns	FT	A Div element containing temperature sensors

---

source

render_temperature_card

 render_temperature_card (temp_info:list)

Render the temperature sensors card using helper functions.

	Type	Details
temp_info	list	List of dictionaries containing temperature sensor information
Returns	FT	A Div element containing the temperature sensors card

from cjm_fasthtml_sysmon.monitors.sensors import get_temperature_info

temp_info = get_temperature_info()
render_temperature_card(temp_info=temp_info)

<div class="card-body">
  <div class="mb-4">
    <h3 class="card-title text-base-content">Temperature Sensors</h3>
  </div>
  <div class="alert alert-info">No temperature sensors detected</div>
</div>