Upload app_gradio.py

app_gradio.py

@@ -3,6 +3,7 @@ import csv
 import io
 import json
 from typing import List, Dict, Any
+import math
 
 def parse_csv_file(file_content: str) -> Dict[str, Any]:
     """Parse CSV content and extract guest information from name and message columns"""
@@ -126,6 +127,102 @@ def arrange_guests_into_tables(guests: List[Dict]) -> List[List[Dict]]:
     
     return tables
 
+def create_circular_table_html(table_number: int, guests: List[Dict]) -> str:
+    """Create HTML for a circular table with guests seated around it"""
+    if not guests:
+        return ""
+    
+    # Calculate positions for seats around the circle
+    num_guests = len(guests)
+    radius = 120  # Radius of the circle
+    center_x, center_y = 150, 150  # Center of the circle
+    
+    # Generate seat positions
+    seats = []
+    for i in range(num_guests):
+        angle = (2 * 3.14159 * i) / num_guests  # Distribute evenly around circle
+        x = center_x + radius * math.cos(angle)
+        y = center_y + radius * math.sin(angle)
+        seats.append((x, y))
+    
+    # Create HTML for the table
+    html = f"""
+    <div class="table-container" style="margin: 20px; display: inline-block; text-align: center;">
+        <div class="table-circle" style="
+            width: 300px;
+            height: 300px;
+            position: relative;
+            margin: 0 auto;
+        ">
+            <!-- Table circle -->
+            <div style="
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                width: 240px;
+                height: 240px;
+                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+                border-radius: 50%;
+                border: 4px solid #4a5568;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                color: white;
+                font-weight: bold;
+                font-size: 18px;
+                box-shadow: 0 4px 8px rgba(0,0,0,0.3);
+            ">
+                Table {table_number}
+            </div>
+    """
+    
+    # Add seats around the table
+    for i, (guest, (x, y)) in enumerate(zip(guests, seats)):
+        # Get initials from name
+        initials = ''.join([name[0].upper() for name in guest['name'].split() if name])
+        if not initials:
+            initials = guest['name'][:2].upper()
+        
+        html += f"""
+            <div class="seat" style="
+                position: absolute;
+                left: {x}px;
+                top: {y}px;
+                transform: translate(-50%, -50%);
+                width: 40px;
+                height: 40px;
+                background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
+                border-radius: 50%;
+                border: 2px solid #2f855a;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                color: white;
+                font-weight: bold;
+                font-size: 12px;
+                cursor: pointer;
+                box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+                transition: all 0.3s ease;
+            " 
+            title="{guest['name']} - {guest['title']}"
+            onmouseover="this.style.transform='translate(-50%, -50%) scale(1.1)'; this.style.boxShadow='0 4px 8px rgba(0,0,0,0.4)';"
+            onmouseout="this.style.transform='translate(-50%, -50%) scale(1)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.2)';"
+            >
+                {initials}
+            </div>
+        """
+    
+    html += """
+        </div>
+        <div style="margin-top: 10px; font-weight: bold; color: #4a5568;">
+            {len(guests)} guests
+        </div>
+    </div>
+    """
+    
+    return html
+
 def process_csv_and_arrange_tables(csv_content: str) -> str:
     """Main function to process CSV and arrange tables"""
     try:
@@ -147,20 +244,80 @@ def process_csv_and_arrange_tables(csv_content: str) -> str:
         if not tables:
             return "❌ No tables could be created."
         
-        # Generate output
+        # Generate output with circular tables
         output = f"🎉 Successfully processed {total_guests} guests!\n\n"
         output += f"📊 Created {len(tables)} table(s) with smart distribution:\n\n"
         
-        for i, table in enumerate(tables, 1):
-            output += f"🍽️ **Table {i}** ({len(table)} guests):\n"
-            for j, guest in enumerate(table, 1):
-                output += f"  {j}. **{guest['name']}** - {guest['title']}\n"
-            output += "\n"
+        # Add CSS for styling
+        output += """
+        <style>
+        .tables-container {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            gap: 20px;
+            margin: 20px 0;
+        }
+        .table-container {
+            background: white;
+            border-radius: 15px;
+            padding: 20px;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+            border: 1px solid #e2e8f0;
+        }
+        .guest-list {
+            margin-top: 20px;
+            text-align: left;
+            max-width: 800px;
+            margin-left: auto;
+            margin-right: auto;
+        }
+        .guest-list h3 {
+            color: #4a5568;
+            border-bottom: 2px solid #e2e8f0;
+            padding-bottom: 10px;
+            margin-bottom: 15px;
+        }
+        .guest-item {
+            background: #f7fafc;
+            padding: 8px 12px;
+            margin: 5px 0;
+            border-radius: 6px;
+            border-left: 4px solid #667eea;
+        }
+        .stats {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 15px;
+            border-radius: 10px;
+            margin: 20px 0;
+            text-align: center;
+        }
+        </style>
+        """
         
         # Add statistics
-        output += "📈 **Table Statistics:**\n"
+        output += f"""
+        <div class="stats">
+            <h3>📈 Table Statistics</h3>
+            <p>Total Guests: {total_guests} | Tables Created: {len(tables)}</p>
+        </div>
+        """
+        
+        # Create circular tables
+        output += '<div class="tables-container">'
         for i, table in enumerate(tables, 1):
-            output += f"  Table {i}: {len(table)} guests\n"
+            output += create_circular_table_html(i, table)
+        output += '</div>'
+        
+        # Add detailed guest list
+        output += '<div class="guest-list">'
+        for i, table in enumerate(tables, 1):
+            output += f'<h3>🍽️ Table {i} ({len(table)} guests)</h3>'
+            for j, guest in enumerate(table, 1):
+                output += f'<div class="guest-item">{j}. <strong>{guest["name"]}</strong> - {guest["title"]}</div>'
+            output += '<br>'
+        output += '</div>'
         
         return output
         
@@ -179,7 +336,12 @@ Lisa Chen,UX Designer at Design Studio
 Robert Taylor,Sales Manager at SalesForce
 Amanda Rodriguez,Financial Analyst at Finance Corp
 James Lee,Content Strategist at Media Group
-Jennifer White,Business Development at Growth Co"""
+Jennifer White,Business Development at Growth Co
+Alex Thompson,Data Engineer at DataFlow
+Maria Garcia,Creative Director at ArtStudio
+Chris Anderson,VP of Sales at SalesPro
+Rachel Kim,Product Designer at DesignHub
+Tom Wilson,Investment Analyst at Capital Corp"""
     return sample_data
 
 # Create the Gradio interface
@@ -188,18 +350,31 @@ with gr.Blocks(
     theme=gr.themes.Soft(),
     css="""
     .gradio-container {
-        max-width: 1200px !important;
+        max-width: 1400px !important;
         margin: 0 auto !important;
     }
     .main-header {
         text-align: center;
         margin-bottom: 2rem;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+        padding: 2rem;
+        border-radius: 15px;
+        margin-bottom: 2rem;
     }
     .sample-csv {
         background: #f0f8ff;
         padding: 1rem;
         border-radius: 8px;
         margin: 1rem 0;
+        border-left: 4px solid #667eea;
+    }
+    .input-section {
+        background: white;
+        padding: 20px;
+        border-radius: 10px;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        margin-bottom: 20px;
     }
     """
 ) as demo:
@@ -207,26 +382,28 @@ with gr.Blocks(
     gr.HTML("""
     <div class="main-header">
         <h1>🎉 Party Planner - Guest Table Arranger</h1>
-        <p>Upload your guest list CSV and let AI arrange them into optimal table seating!</p>
+        <p>Upload your guest list CSV and let AI arrange them into optimal circular table seating!</p>
     </div>
     """)
     
     with gr.Row():
         with gr.Column(scale=1):
             gr.HTML("""
-            <h3>📋 How to use:</h3>
-            <ol>
-                <li>Prepare a CSV file with 2 columns: <strong>name</strong> and <strong>message/description</strong></li>
-                <li>Upload your CSV file below</li>
-                <li>Click "Arrange Tables" to see the smart seating arrangement</li>
-            </ol>
-            
-            <div class="sample-csv">
-                <h4>📄 Sample CSV Format:</h4>
-                <pre>name,message
+            <div class="input-section">
+                <h3>📋 How to use:</h3>
+                <ol>
+                    <li>Prepare a CSV file with 2 columns: <strong>name</strong> and <strong>message/description</strong></li>
+                    <li>Upload your CSV file below</li>
+                    <li>Click "Arrange Tables" to see the smart circular seating arrangement</li>
+                </ol>
+                
+                <div class="sample-csv">
+                    <h4>📄 Sample CSV Format:</h4>
+                    <pre>name,message
 John Smith,Software Engineer at TechCorp
 Sarah Johnson,Marketing Director at Creative Agency
 Michael Brown,CEO of StartupXYZ</pre>
+                </div>
             </div>
             """)
             
@@ -240,6 +417,12 @@ Michael Brown,CEO of StartupXYZ</pre>
             download_sample = gr.Button("📥 Download Sample CSV", variant="secondary")
             
         with gr.Column(scale=2):
+            gr.HTML("""
+            <div class="input-section">
+                <h3>📁 Upload Your Guest List</h3>
+            </div>
+            """)
+            
             csv_input = gr.Textbox(
                 label="📁 Paste your CSV content here (or upload file below)",
                 placeholder="Paste your CSV content here...",
@@ -254,9 +437,9 @@ Michael Brown,CEO of StartupXYZ</pre>
             
             arrange_btn = gr.Button("🎯 Arrange Tables", variant="primary", size="lg")
             
-            output = gr.Markdown(
+            output = gr.HTML(
                 label="📊 Table Arrangement Results",
-                value="Upload your guest list to see the table arrangement!"
+                value="<div style='text-align: center; padding: 40px; color: #666;'><h3>Upload your guest list to see the circular table arrangement!</h3><p>🎉 Your tables will appear as beautiful circles with guests seated around them</p></div>"
             )
     
     # Event handlers