Update app.py

app.py

@@ -24,25 +24,37 @@ mp_hands = mp.solutions.hands
 hands = mp_hands.Hands(max_num_hands=1, min_detection_confidence=0.5)
 mp_drawing = mp.solutions.drawing_utils
 
-# Virtual Keyboard Layout
-keys = [["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"],
-        ["A", "S", "D", "F", "G", "H", "J", "K", "L", ";"],
-        ["Z", "X", "C", "V", "B", "N", "M", ",", ".", "/"]]
-
-
+# Improved keyboard layout with better styling
+keys = [
+    ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"],
+    ["A", "S", "D", "F", "G", "H", "J", "K", "L", ";"],
+    ["Z", "X", "C", "V", "B", "N", "M", ",", ".", "/"]
+]
+
+# Enhanced colors and styling
+COLORS = {
+    'KEY_IDLE': (75, 75, 75),        # Darker gray for idle keys
+    'KEY_HOVER': (100, 100, 255),    # Blue highlight for hover
+    'KEY_PRESS': (50, 200, 50),      # Green for pressed keys
+    'TEXT_NORMAL': (255, 255, 255),  # White text
+    'TEXT_PRESS': (0, 0, 0),         # Black text when pressed
+    'OUTPUT_BG': (45, 45, 45),       # Dark gray for output background
+}
+
+# Modified Button class with hover state
 class Button:
     def __init__(self, pos, text, size=[100, 100]):
         self.pos = pos
         self.size = size
         self.text = text
-
+        self.is_hover = False
+        self.is_pressed = False
 
 class Detection(NamedTuple):
     label: str
     score: float
     box: np.ndarray
 
-
 # Global variables
 result_queue: "queue.Queue[List[Detection]]" = queue.Queue()
 indexImg = 0
@@ -82,8 +94,29 @@ def video_frame_callback(frame: av.VideoFrame) -> av.VideoFrame:
     for button in buttonList:
         x, y = button.pos
         bw, bh = button.size
-        cv2.rectangle(img, (x, y), (x + bw, y + bh), (200, 200, 200), -1)
-        cv2.putText(img, button.text, (x + int(0.2 * bw), y + int(0.7 * bh)), cv2.FONT_HERSHEY_PLAIN, font_scale, (0, 0, 0), font_thickness)
+        
+        # Draw key background with rounded corners
+        if button.is_pressed:
+            color = COLORS['KEY_PRESS']
+            text_color = COLORS['TEXT_PRESS']
+        elif button.is_hover:
+            color = COLORS['KEY_HOVER']
+            text_color = COLORS['TEXT_NORMAL']
+        else:
+            color = COLORS['KEY_IDLE']
+            text_color = COLORS['TEXT_NORMAL']
+            
+        # Draw rounded rectangle
+        cv2.rectangle(img, (x, y), (x + bw, y + bh), color, -1, cv2.LINE_AA)
+        cv2.rectangle(img, (x, y), (x + bw, y + bh), (100, 100, 100), 1, cv2.LINE_AA)
+        
+        # Center text
+        text_size = cv2.getTextSize(button.text, cv2.FONT_HERSHEY_SIMPLEX, font_scale, font_thickness)[0]
+        text_x = x + (bw - text_size[0]) // 2
+        text_y = y + (bh + text_size[1]) // 2
+        
+        cv2.putText(img, button.text, (text_x, text_y), 
+                   cv2.FONT_HERSHEY_SIMPLEX, font_scale, text_color, font_thickness)
 
     detections = []
     if result.multi_hand_landmarks:
@@ -128,19 +161,23 @@ def video_frame_callback(frame: av.VideoFrame) -> av.VideoFrame:
                             else:
                                 output_text += ' '  # Add space
 
-    # Draw a background rectangle for the output text
-    text_x = int(0.05 * w)
-    text_y = int(0.70 * h)
-    text_width = int(0.9 * w)
-    text_height = int(0.1 * h)
+    # Improved output display
+    output_bg_height = int(0.15 * h)
+    output_y = int(0.8 * h)
+    
+    # Draw output background with rounded corners
     cv2.rectangle(img, 
-                  (text_x, text_y - text_height), 
-                  (text_x + text_width, text_y), 
-                  (100, 100, 100), 
-                  -1)
-
-    # Overlay the output text
-    cv2.putText(img, output_text, (text_x + int(0.02 * w), text_y - int(0.02 * h)), cv2.FONT_HERSHEY_PLAIN, 2, (255, 255, 255), 5)
+                 (int(0.05 * w), output_y - output_bg_height),
+                 (int(0.95 * w), output_y),
+                 COLORS['OUTPUT_BG'], -1, cv2.LINE_AA)
+    
+    # Add text with better positioning
+    text_size = cv2.getTextSize(output_text, cv2.FONT_HERSHEY_SIMPLEX, 1, 2)[0]
+    text_x = int(0.07 * w)
+    text_y = output_y - output_bg_height//2 + text_size[1]//2
+    
+    cv2.putText(img, output_text, (text_x, text_y),
+                cv2.FONT_HERSHEY_SIMPLEX, 1, COLORS['TEXT_NORMAL'], 2)
 
     result_queue.put(detections)
     return av.VideoFrame.from_ndarray(img, format="bgr24")