From 424a450ac465cde70f7f712eb562646463b902ae Mon Sep 17 00:00:00 2001
From: Rub21 <rub2106@gmail.com>
Date: Wed, 2 Oct 2024 20:31:15 -0500
Subject: [PATCH 1/2] Update readme

---
 README.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/README.md b/README.md
index 8dbe740..2c7c6e5 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,12 @@
 
 Magic wand and Segment Anything Model (SAM) annotation tool for machine learning training data.
 
+<video width="640" height="360" controls>
+  <source src="https://github.com/user-attachments/assets/c8532ae9-d073-4381-b466-adfca76d7d38" type="video/mp4">
+  Your browser does not support the video tag.
+</video>
+
+
 ## Installation and Usage
 The steps below will walk you through setting up your own instance of the project.
 

From 05aacc9573b896ac4993100e4a11d320b4bd36e8 Mon Sep 17 00:00:00 2001
From: Rub21 <rub2106@gmail.com>
Date: Thu, 10 Oct 2024 13:11:39 -0500
Subject: [PATCH 2/2] Update section to display gpu/cpu info

---
 src/components/ApiService.js | 35 ++++++++++++++++++++++-------------
 src/components/Sidebar.js    |  2 +-
 2 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/src/components/ApiService.js b/src/components/ApiService.js
index 03730bd..70963a5 100644
--- a/src/components/ApiService.js
+++ b/src/components/ApiService.js
@@ -16,6 +16,7 @@ export const ApiService = () => {
     dispatchActiveEncodeImageItem,
     setSpinnerLoading,
   } = useContext(MainContext);
+  
   const [apiDetails, setApiDetails] = useState({
     gpu: { gpu: false },
     cpu: { cpu_percent: 0 },
@@ -47,23 +48,31 @@ export const ApiService = () => {
   ]);
 
   return (
-    <div className="flex space-x-4">
+    <div className="flex space-x-4 mt-2">
       <span
         className={`inline-flex justify-center items-center text-[10px] font-medium rounded pr-4 pl-4 ${
-          apiDetails.gpu.gpu
-            ? "text-green-800 bg-green-400"
-            : "text-gray-800 bg-gray-200"
+          apiDetails.gpu.gpu ? "text-green-800 bg-green-200" : "text-yellow-800 bg-yellow-200"
         }`}
       >
-        {`GPU: ${
-          apiDetails.gpu && apiDetails.gpu.gpu
-            ? `${apiDetails.gpu.device}`
-            : "Desactive"
-        }`}
-        {apiDetails.gpu && apiDetails.gpu.gpu
-          ? `, CPU: ${apiDetails.cpu.cpu_percent}%, Memory: ${apiDetails.memory.memory_percent}%`
-          : ""}
+        {apiDetails.gpu.gpu ? "GPU Active" : "CPU Mode"}
+        {apiDetails.gpu.gpu && (
+          <>
+            {` | Device: ${apiDetails.gpu.device_name}`}
+            {` | GPUs: ${apiDetails.gpu.num_gpus}`}
+            {` | GPU Memory Total: ${apiDetails.gpu.gpu_memory_total}`}
+            {` | GPU Memory Allocated: ${apiDetails.gpu.gpu_memory_allocated}`}
+            {` | GPU Memory Cached: ${apiDetails.gpu.gpu_memory_cached}`}
+            {` | GPU Memory Free: ${apiDetails.gpu.gpu_memory_free}`}
+          </>
+        )}
+        {` | CPU Usage: ${apiDetails.cpu.cpu_percent}%`}
+        {` | CPU Cores: ${apiDetails.cpu.cpu_cores}`}
+        {` | Logical CPU Cores: ${apiDetails.cpu.cpu_logical_cores}`}
+        {` | Memory Usage: ${apiDetails.memory.memory_percent}%`}
+        {` | Total Memory: ${apiDetails.memory.total_memory}`}
+        {` | Used Memory: ${apiDetails.memory.used_memory}`}
+        {` | Free Memory: ${apiDetails.memory.free_memory}`}
       </span>
     </div>
   );
-};
+};
\ No newline at end of file
diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js
index 2972ea3..3c2f413 100644
--- a/src/components/Sidebar.js
+++ b/src/components/Sidebar.js
@@ -15,13 +15,13 @@ export const Sidebar = () => {
       <aside>
         <Header />
         <div className="overflow-y-auto pr-2 pl-2 scroll-smooth hover:scroll-auto overscroll-y-contain h-[calc(100vh-50px)]">
-          <ApiService />
           <Projects />
           <Classes />
           <EncodeItems />
           <DecodeItems />
           <Items />
           <MenuExpData />
+          <ApiService />
         </div>
       </aside>
     </>