a lot of changes

app.py

@@ -3,8 +3,23 @@ import pandas as pd
 import numpy as np
 from typing import List, Dict
 from flask import Flask, send_from_directory
+import threading
 import os
 
+app = Flask(__name__, static_url_path='/static')
+
+@app.route('/static/thumbs/<path:filename>')
+def serve_image(filename):
+    return send_from_directory('thumbs', filename)
+
+# Start Flask server in a separate thread
+def start_flask():
+    app.run(port=7861, threaded=True)
+
+flask_thread = threading.Thread(target=start_flask)
+flask_thread.daemon = True
+flask_thread.start()
+
 class CSVViewer:
     def __init__(self, csv_path: str):
         self.df = pd.read_csv(csv_path)
@@ -50,7 +65,7 @@ class CSVViewer:
             'total_pages': self.total_pages
         }
 
-def create_page_view(page_num: int) -> str:
+def create_page_view(page_num: int):
     viewer = CSVViewer('attr.csv')
     page_data = viewer.get_page_data(page_num)
     
@@ -63,29 +78,56 @@ def create_page_view(page_num: int) -> str:
     # Find matching image file
     image_files = [f for f in os.listdir('thumbs') if f.startswith(product_code)]
     if image_files:
-        # Use relative path for Gradio
-        image_path = f"/static/thumbs/{image_files[0]}"
+        # Use the Flask server URL for images
+        image_path = f"http://localhost:7861/static/thumbs/{image_files[0]}"
+        print(f"Found image: {image_path}")
     else:
         image_path = None
     
-    # Product information header
+    # Create HTML content
     html = f"<h3>Page {page_data['page_num']} of {page_data['total_pages']}</h3>"
     html += "<div style='margin-bottom: 20px; display: flex; gap: 20px;'>"
     
-    # Image section
-    if image_path:
-        html += f"<div style='flex: 0 0 300px;'>"
-        html += f"<img src='{image_path}' alt='Product Image' style='max-width: 100%; border-radius: 5px;'>"
-        html += "</div>"
-    
     # Product info section
     html += "<div>"
+    if image_path:
+        html += f"<img src='{image_path}' alt='Product Image' style='max-width: 100%; border-radius: 5px;'>"
     for key, value in page_data['product_info'].items():
         html += f"<p><strong>{key}:</strong> {value}</p>"
     html += "</div></div>"
     
     html += "<div style='display: flex; gap: 20px;'>"
     
+    # Comparison section
+    html += "<div style='flex: 1; border: 1px solid #ddd; padding: 15px; border-radius: 5px;'>"
+    html += "<h4>Comparison</h4>"
+    html += "<table style='width: 100%;'>"
+    html += "<tr style='background-color: #f5f5f5;'><th>Attribute</th><th>Original</th><th>AI Prediction</th><th>Status</th></tr>"
+    
+    # Add comparison rows
+    for key, orig_value in page_data['original_data'].items():
+        # Find matching AI prediction
+        ai_key = key + '_AI'
+        ai_value = page_data['ai_data'].get(ai_key, '')
+        
+        # Determine comparison status
+        if orig_value.lower() == ai_value.lower():
+            status = "✓ Match"
+            row_color = "#e8f5e9"  # Light green background
+        else:
+            status = "✗ Mismatch"
+            row_color = "#ffebee"  # Light red background
+            
+        # Add row with comparison
+        html += f"<tr style='background-color: {row_color};'>"
+        html += f"<td style='width: 150px;'>{key}</td>"
+        html += f"<td>{orig_value}</td>"
+        html += f"<td>{ai_value}</td>"
+        html += f"<td style='color: {'#4CAF50' if orig_value.lower() == ai_value.lower() else '#f44336'}; font-weight: bold;'>{status}</td>"
+        html += "</tr>"
+    
+    html += "</table></div>"
+    
     # Original data section
     html += "<div style='flex: 1; border: 1px solid #ddd; padding: 15px; border-radius: 5px;'>"
     html += "<h4>Original Data</h4>"
@@ -106,29 +148,16 @@ def create_page_view(page_num: int) -> str:
     return html
 
 # Create Gradio interface
-demo = gr.Interface(
-    fn=create_page_view,
-    inputs=gr.Slider(0, 100, step=1, label="Page Number"),
-    outputs="html",
-    title="CSV Data Viewer",
-    description="Navigate through CSV data pages to compare original and AI-predicted values"
-)
-
-# Create Flask app
-app = Flask(__name__, static_folder='.', static_url_path='')
-
-@app.route('/static/thumbs/<path:filename>')
-def serve_image(filename):
-    return send_from_directory('thumbs', filename)
+demo = gr.Blocks()
+with demo:
+    gr.Markdown("# CSV Data Viewer")
+    gr.Markdown("Navigate through CSV data pages to compare original and AI-predicted values")
+    
+    page_num = gr.Slider(0, 100, step=1, label="Page Number")
+    html_output = gr.HTML()
+    
+    page_num.change(create_page_view, [page_num], [html_output])
 
-# Create Gradio interface
-demo = gr.Interface(
-    fn=create_page_view,
-    inputs=gr.Slider(0, 100, step=1, label="Page Number"),
-    outputs="html",
-    title="CSV Data Viewer",
-    description="Navigate through CSV data pages to compare original and AI-predicted values"
-)
+# Launch Gradio interface
+demo.launch(server_name="0.0.0.0", server_port=7860, share=True)
 
-# Launch Gradio interface with Flask server
-demo.launch(server_name="0.0.0.0", server_port=7860)