Update app.py

app.py

@@ -196,33 +196,30 @@ input, textarea, select {
 }
 
 /* Upload/Webcam tab buttons - make them visible and styled */
-[data-testid="image"] [role="tablist"] {
-    background: #f8f9fa !important;
-    padding: 12px !important;
-    border-radius: 12px !important;
-    gap: 12px !important;
-    margin-bottom: 20px !important;
-    display: flex !important;
-    justify-content: center !important;
+[data-testid="image"] [role="tablist"],
+.image-container [role="tablist"],
+button[role="tab"] {
+    background: transparent !important;
 }
 
-[data-testid="image"] [role="tab"] {
+[data-testid="image"] [role="tab"],
+.image-container [role="tab"],
+button[role="tab"] {
     background: white !important;
     border: 2px solid #cbd5e0 !important;
     border-radius: 10px !important;
-    padding: 16px 32px !important;
-    font-size: 1.1em !important;
+    padding: 14px 28px !important;
+    font-size: 1em !important;
     font-weight: 600 !important;
     color: #2d3748 !important;
     transition: all 0.3s ease !important;
-    min-width: 150px !important;
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important;
-    gap: 8px !important;
+    min-width: 130px !important;
+    margin: 4px !important;
 }
 
-[data-testid="image"] [role="tab"]:hover {
+[data-testid="image"] [role="tab"]:hover,
+.image-container [role="tab"]:hover,
+button[role="tab"]:hover {
     background: #667eea !important;
     border-color: #667eea !important;
     color: white !important;
@@ -230,25 +227,41 @@ input, textarea, select {
     box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3) !important;
 }
 
-[data-testid="image"] [role="tab"][aria-selected="true"] {
+[data-testid="image"] [role="tab"][aria-selected="true"],
+.image-container [role="tab"][aria-selected="true"],
+button[role="tab"][aria-selected="true"] {
     background: #667eea !important;
     border-color: #667eea !important;
     color: white !important;
     box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4) !important;
 }
 
-/* Icon colors in tabs */
-[data-testid="image"] [role="tab"] svg {
-    width: 22px !important;
-    height: 22px !important;
+/* Icon colors in tabs - force visibility */
+[data-testid="image"] [role="tab"] svg,
+.image-container [role="tab"] svg,
+button[role="tab"] svg {
+    width: 20px !important;
+    height: 20px !important;
+    fill: currentColor !important;
+    stroke: currentColor !important;
 }
 
 [data-testid="image"] [role="tab"] svg path,
 [data-testid="image"] [role="tab"] svg line,
 [data-testid="image"] [role="tab"] svg circle,
-[data-testid="image"] [role="tab"] svg rect {
+[data-testid="image"] [role="tab"] svg rect,
+.image-container [role="tab"] svg path,
+button[role="tab"] svg path {
     stroke: currentColor !important;
-    fill: none !important;
+    fill: currentColor !important;
+    stroke-width: 2 !important;
+}
+
+/* Ensure tab text is visible */
+[data-testid="image"] [role="tab"] span,
+.image-container [role="tab"] span,
+button[role="tab"] span {
+    color: inherit !important;
 }
 
 /* Upload area */
@@ -566,11 +579,16 @@ def create_checkout_item_display(item_data, index):
     item = item_data['item']
     desc = item_data['description']
     
-    display = f"""**Detected:** {desc}
-**Matched:** {item['Item Name']}
-**Category:** {item['Category']}
-**Location:** {item['Location']}
-**Available:** {item['Quantity']} {item['Unit']}"""
+    display = f"""<div style="background: #f8f9fa; padding: 15px; border-radius: 8px; border-left: 4px solid #667eea; margin: 10px 0;">
+<div style="color: #667eea; font-weight: 600; font-size: 0.9em; margin-bottom: 8px;">🔍 DETECTED ITEM</div>
+<div style="color: #2d3748; font-size: 1.05em; margin-bottom: 12px;">{desc}</div>
+<div style="display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 0.95em;">
+<span style="color: #718096; font-weight: 600;">Matched Item:</span><span style="color: #2d3748;">{item['Item Name']}</span>
+<span style="color: #718096; font-weight: 600;">Category:</span><span style="color: #2d3748;">{item['Category']}</span>
+<span style="color: #718096; font-weight: 600;">Location:</span><span style="color: #2d3748;">{item['Location']}</span>
+<span style="color: #718096; font-weight: 600;">Available:</span><span style="color: #2d3748;">{item['Quantity']} {item['Unit']}</span>
+</div>
+</div>"""
     
     return display
 
@@ -676,7 +694,14 @@ def extract_text_from_receipt(file_path):
         text = ""
         
         if file_path.name.lower().endswith('.pdf'):
-            images = convert_from_path(file_path.name)
+            # Hugging Face Spaces installs poppler in /usr/bin
+            # Try with explicit poppler path first, fall back to default
+            try:
+                images = convert_from_path(file_path.name, poppler_path='/usr/bin')
+            except:
+                # Fallback to default path detection
+                images = convert_from_path(file_path.name)
+            
             for img in images:
                 text += pytesseract.image_to_string(img) + "\n"
         else:
@@ -1291,8 +1316,8 @@ with gr.Blocks(title="Makerspace Inventory System", css=CUSTOM_CSS) as demo:
             checkout_scan_btn = gr.Button("🔍 Scan & Match Items", variant="primary", size="lg")
         
         with gr.Group(visible=False) as checkout_screen2:
-            gr.Markdown("### ✅ Review Items", elem_classes=["subsection-header"])
-            gr.Markdown("*Adjust quantities or remove items before checkout*")
+            gr.Markdown("### Review Selected Items", elem_classes=["subsection-header"])
+            gr.Markdown("*Verify items, adjust quantities, or remove unwanted items before proceeding*")
             
             checkout_item_controls = []
             for i in range(10):