ui fix

app.py

@@ -263,15 +263,20 @@ with gr.Blocks(title="OCR Comparison", css="""
         border-collapse: collapse;
         width: 100%;
         margin: 10px 0;
+        min-width: 800px;
     }
     .vote-table th, .vote-table td {
         border: 1px solid #ddd;
-        padding: 8px;
+        padding: 6px;
         text-align: left;
+        vertical-align: top;
     }
     .vote-table th {
         background-color: #f2f2f2;
         font-weight: bold;
+        position: sticky;
+        top: 0;
+        z-index: 10;
     }
     .vote-table tr:nth-child(even) {
         background-color: #f9f9f9;
@@ -281,6 +286,8 @@ with gr.Blocks(title="OCR Comparison", css="""
     }
     .vote-table img {
         transition: transform 0.2s ease;
+        max-width: 100%;
+        height: auto;
     }
     .vote-table img:hover {
         transform: scale(1.1);

ocr_votes.sql

@@ -0,0 +1,25 @@
+-- New database schema for three-model OCR comparison system
+-- This script creates a new table with model information
+
+-- Drop the existing table if it exists
+DROP TABLE IF EXISTS ocr_votes;
+
+-- Create the new table with model information
+CREATE TABLE ocr_votes (
+    id SERIAL PRIMARY KEY,
+    username VARCHAR(255) NOT NULL,
+    model_a VARCHAR(50) NOT NULL,  -- 'gemini', 'mistral', or 'openai'
+    model_b VARCHAR(50) NOT NULL,  -- 'gemini', 'mistral', or 'openai'
+    model_a_output TEXT NOT NULL,
+    model_b_output TEXT NOT NULL,
+    vote VARCHAR(50) NOT NULL,     -- 'model_a' or 'model_b'
+    image_url TEXT,
+    timestamp VARCHAR(50) NOT NULL, -- Format: YYYY-MM-DD HH:MM:SS
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
+);
+
+-- Create indexes for better performance
+CREATE INDEX idx_ocr_votes_username ON ocr_votes(username);
+CREATE INDEX idx_ocr_votes_timestamp ON ocr_votes(timestamp);
+CREATE INDEX idx_ocr_votes_vote ON ocr_votes(vote);
+CREATE INDEX idx_ocr_votes_models ON ocr_votes(model_a, model_b);

ui_helpers.py

@@ -35,19 +35,20 @@ def format_votes_table(votes: List[Dict[str, Any]]) -> str:
     sorted_votes = sorted(votes, key=lambda x: x.get('timestamp', ''), reverse=True)
 
     html = """
-    <table class="vote-table">
-        <thead>
-            <tr>
-                <th>Timestamp</th>
-                <th>Username</th>
-                <th>Models</th>
-                <th>Vote</th>
-                <th>Model A Output</th>
-                <th>Model B Output</th>
-                <th>Image</th>
-            </tr>
-        </thead>
-        <tbody>
+    <div style="overflow-x: auto; max-width: 100%;">
+        <table class="vote-table" style="width: 100%; table-layout: fixed; font-size: 12px;">
+            <thead>
+                <tr>
+                    <th style="width: 12%;">Timestamp</th>
+                    <th style="width: 8%;">Username</th>
+                    <th style="width: 10%;">Models</th>
+                    <th style="width: 8%;">Vote</th>
+                    <th style="width: 25%;">Model A Output</th>
+                    <th style="width: 25%;">Model B Output</th>
+                    <th style="width: 12%;">Image</th>
+                </tr>
+            </thead>
+            <tbody>
     """
 
     for vote in sorted_votes:
@@ -92,9 +93,9 @@ def format_votes_table(votes: List[Dict[str, Any]]) -> str:
             voted_model_name = model_b_name
             vote_color = "blue"
 
-        # Truncate OCR outputs for table display
-        model_a_preview = model_a_output[:100] + "..." if len(model_a_output) > 100 else model_a_output
-        model_b_preview = model_b_output[:100] + "..." if len(model_b_output) > 100 else model_b_output
+        # Truncate OCR outputs for table display (shorter for better fit)
+        model_a_preview = model_a_output[:80] + "..." if len(model_a_output) > 80 else model_a_output
+        model_b_preview = model_b_output[:80] + "..." if len(model_b_output) > 80 else model_b_output
 
         # Fix image URL - use the correct Supabase storage URL format
         if image_url and image_url != 'N/A' and not image_url.startswith('http'):
@@ -104,25 +105,26 @@ def format_votes_table(votes: List[Dict[str, Any]]) -> str:
 
         # Create image thumbnail or placeholder
         if image_url and image_url != 'N/A':
-            image_html = f'<img src="{image_url}" alt="OCR Image" style="width: 80px; height: 60px; object-fit: cover; border-radius: 4px; cursor: pointer;" onclick="window.open(\'{image_url}\', \'_blank\')" title="Click to view full image">'
+            image_html = f'<img src="{image_url}" alt="OCR Image" style="width: 60px; height: 45px; object-fit: cover; border-radius: 4px; cursor: pointer;" onclick="window.open(\'{image_url}\', \'_blank\')" title="Click to view full image">'
         else:
             image_html = '<span style="color: #999; font-style: italic;">No image</span>'
 
         html += f"""
         <tr>
-            <td>{formatted_time}</td>
-            <td><strong>{username}</strong></td>
-            <td><small>{models_display}</small></td>
-            <td style="color: {vote_color}; font-weight: bold;">{voted_model_name}</td>
-            <td title="{model_a_output}">{model_a_preview}</td>
-            <td title="{model_b_output}">{model_b_preview}</td>
-            <td>{image_html}</td>
+            <td style="word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{formatted_time}</td>
+            <td style="word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><strong>{username}</strong></td>
+            <td style="word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><small>{models_display}</small></td>
+            <td style="color: {vote_color}; font-weight: bold; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{voted_model_name}</td>
+            <td style="word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="{model_a_output}">{model_a_preview}</td>
+            <td style="word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="{model_b_output}">{model_b_preview}</td>
+            <td style="text-align: center;">{image_html}</td>
         </tr>
         """
 
     html += """
         </tbody>
     </table>
+    </div>
     """
 
     return html