Initial commit with enhanced functionality

.gitignore

@@ -0,0 +1,5 @@
+__pycache__/
+*.pyc
+.DS_Store
+.env
+venv/

Dockerfile

@@ -0,0 +1,15 @@
+FROM python:3.11-slim
+
+WORKDIR /app
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+RUN useradd -m -u 1000 user
+USER user
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH
+
+CMD ["gunicorn", "-b", "0.0.0.0:7860", "app:app"]

README.md

@@ -0,0 +1,55 @@
+---
+title: Seating Chart Solver
+emoji: 🪑
+colorFrom: indigo
+colorTo: purple
+sdk: docker
+app_port: 7860
+short_description: 基于模拟退火算法的智能活动排座与可视化系统
+---
+
+# Seating Chart Solver (智能排座专家)
+
+这是一个专为大型活动（婚礼、晚宴、会议）设计的智能排座系统。它利用**模拟退火算法 (Simulated Annealing)**，在满足各种复杂约束条件（如“必须坐在一起”、“不能坐在一起”）的同时，自动优化宾客的座位安排，最大化整体满意度。
+
+## 核心功能
+
+*   **智能优化引擎**: 一键自动计算最佳座位安排，解决 NP-Hard 排座问题。
+*   **复杂约束管理**: 支持定义“亲密关系”（权重加分）和“冲突关系”（权重扣分）。
+*   **可视化布局**: 直观的圆形餐桌视图，实时显示入座情况。
+*   **资产导出**: 支持将最终排座方案导出为高清图片 (PNG) 或 PDF 文档，直接用于打印或分享。
+*   **多维度评分**: 实时反馈当前方案的“和谐度”评分。
+
+## 解决痛点
+
+活动策划中最头疼的环节往往是排座位：
+*   如何让关系好的人坐在一起？
+*   如何避免死对头同桌？
+*   如何平衡每桌的人数？
+本工具通过算法自动化解决这些问题，将耗时数小时的工作缩短为几秒钟。
+
+## 技术栈
+
+*   **算法**: Python (Simulated Annealing), NumPy
+*   **后端**: Flask
+*   **前端**: Vue 3, Element Plus, TailwindCSS
+*   **导出**: html2canvas, jsPDF
+*   **部署**: Docker (Python 3.11 Slim)
+
+## 算法原理
+
+系统将排座问题建模为组合优化问题：
+1.  **目标函数**: $Score = \sum (Relation_{i,j} \times SameTable_{i,j}) - \sum (Conflict_{i,j} \times SameTable_{i,j}) + GroupBonus$
+2.  **寻优策略**: 使用模拟退火算法，允许以一定概率接受较差解以跳出局部最优，最终收敛到全局近似最优解。
+
+## 运行方式
+
+```bash
+# 构建
+docker build -t seating-solver .
+
+# 运行
+docker run -p 7860:7860 seating-solver
+```
+
+访问 `http://localhost:7860` 开始使用。

app.py

@@ -0,0 +1,305 @@
+import random
+import math
+import numpy as np
+import pandas as pd
+import io
+from flask import Flask, jsonify, request, render_template
+
+app = Flask(__name__)
+app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024  # 16MB limit
+
+# 模拟退火算法参数
+INITIAL_TEMP = 1000
+COOLING_RATE = 0.995
+MIN_TEMP = 1
+MAX_ITERATIONS = 5000
+
+class SeatingSolver:
+    def __init__(self, guests, tables, constraints):
+        """
+        guests: list of {id, name, group, tags}
+        tables: list of {id, name, capacity}
+        constraints: list of {guest_id_1, guest_id_2, type: 'must'|'cannot', weight}
+        """
+        self.guests = guests
+        self.tables = tables
+        self.constraints = constraints
+        self.guest_map = {g['id']: g for g in guests}
+        
+        # 预处理关系矩阵
+        self.relation_matrix = {} # (id1, id2) -> score
+        for c in constraints:
+            key = tuple(sorted([c['g1'], c['g2']]))
+            w = c.get('weight', 10)
+            if c['type'] == 'must':
+                self.relation_matrix[key] = w
+            elif c['type'] == 'cannot':
+                self.relation_matrix[key] = -w
+                
+    def solve(self):
+        # 初始解：随机分配
+        current_solution = self._initial_solution()
+        current_score = self._calculate_score(current_solution)
+        
+        best_solution = current_solution.copy()
+        best_score = current_score
+        
+        temp = INITIAL_TEMP
+        
+        for i in range(MAX_ITERATIONS):
+            if temp < MIN_TEMP:
+                break
+                
+            # 产生新解：随机移动或交换
+            new_solution = self._neighbor_solution(current_solution)
+            new_score = self._calculate_score(new_solution)
+            
+            # 接受准则
+            delta = new_score - current_score
+            if delta > 0 or math.exp(delta / temp) > random.random():
+                current_solution = new_solution
+                current_score = new_score
+                
+                if current_score > best_score:
+                    best_solution = current_solution.copy()
+                    best_score = current_score
+            
+            temp *= COOLING_RATE
+            
+        return self._format_result(best_solution, best_score)
+    
+    def _initial_solution(self):
+        # 简单的随机分配，尽量填满桌子
+        solution = {} # guest_id -> table_id
+        table_slots = []
+        for t in self.tables:
+            for _ in range(t['capacity']):
+                table_slots.append(t['id'])
+        
+        random.shuffle(table_slots)
+        
+        for i, guest in enumerate(self.guests):
+            if i < len(table_slots):
+                solution[guest['id']] = table_slots[i]
+            else:
+                # 没座位的放在 unassigned (None)
+                solution[guest['id']] = None
+        return solution
+
+    def _neighbor_solution(self, solution):
+        new_sol = solution.copy()
+        guest_ids = list(self.guests)
+        if not guest_ids:
+            return new_sol
+            
+        action = random.choice(['move', 'swap'])
+        
+        if action == 'move':
+            # 移动一个客人到另一张桌子（如果有空位）
+            g1 = random.choice(self.guests)['id']
+            t_target = random.choice(self.tables)['id']
+            
+            # 检查容量
+            current_count = sum(1 for gid, tid in new_sol.items() if tid == t_target)
+            table_cap = next(t['capacity'] for t in self.tables if t['id'] == t_target)
+            
+            if current_count < table_cap:
+                new_sol[g1] = t_target
+                
+        elif action == 'swap':
+            # 交换两个客人的位置
+            g1 = random.choice(self.guests)['id']
+            g2 = random.choice(self.guests)['id']
+            if g1 != g2:
+                new_sol[g1], new_sol[g2] = new_sol[g2], new_sol[g1]
+                
+        return new_sol
+
+    def _calculate_score(self, solution):
+        score = 0
+        
+        # 1. 约束分数
+        for (g1, g2), weight in self.relation_matrix.items():
+            t1 = solution.get(g1)
+            t2 = solution.get(g2)
+            if t1 is not None and t2 is not None and t1 == t2:
+                score += weight * 10 # 权重放大
+                
+        # 2. 组别分数 (同一组的尽量坐一起)
+        # 遍历每张桌子
+        table_guests = {}
+        for gid, tid in solution.items():
+            if tid:
+                if tid not in table_guests: table_guests[tid] = []
+                table_guests[tid].append(self.guest_map[gid])
+        
+        for tid, guests in table_guests.items():
+            groups = [g.get('group') for g in guests if g.get('group')]
+            # 计算组别一致性
+            # 如果桌子上大部分人是同一组，加分
+            if groups:
+                # 简单做法：每有一对同组人，加 2 分
+                for i in range(len(groups)):
+                    for j in range(i+1, len(groups)):
+                        if groups[i] == groups[j]:
+                            score += 2
+                            
+        return score
+
+    def _format_result(self, solution, score):
+        # 转换为前端易用的格式
+        tables_res = []
+        unassigned = []
+        
+        table_guests = {t['id']: [] for t in self.tables}
+        
+        for gid, tid in solution.items():
+            if tid:
+                table_guests[tid].append(self.guest_map[gid])
+            else:
+                unassigned.append(self.guest_map[gid])
+                
+        for t in self.tables:
+            tables_res.append({
+                'id': t['id'],
+                'name': t['name'],
+                'capacity': t['capacity'],
+                'guests': table_guests[t['id']]
+            })
+            
+        return {
+            'tables': tables_res,
+            'unassigned': unassigned,
+            'score': score
+        }
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/api/solve', methods=['POST'])
+def solve_seating():
+    data = request.json
+    guests = data.get('guests', [])
+    tables = data.get('tables', [])
+    constraints = data.get('constraints', []) # [{g1: id, g2: id, type: 'must'|'cannot'}]
+    
+    if not guests or not tables:
+        return jsonify({'error': 'Missing guests or tables'}), 400
+        
+    solver = SeatingSolver(guests, tables, constraints)
+    result = solver.solve()
+    
+    return jsonify(result)
+
+@app.route('/api/upload', methods=['POST'])
+def upload_file():
+    if 'file' not in request.files:
+        return jsonify({'error': 'No file part'}), 400
+    file = request.files['file']
+    if file.filename == '':
+        return jsonify({'error': 'No selected file'}), 400
+        
+    try:
+        # Determine file type
+        if file.filename.endswith('.csv'):
+            df = pd.read_csv(file)
+        elif file.filename.endswith(('.xls', '.xlsx')):
+            df = pd.read_excel(file)
+        else:
+            return jsonify({'error': 'Unsupported file type'}), 400
+            
+        # Normalize columns
+        # Expected columns: Name (required), Group (optional), ID (optional)
+        # Rename columns to standard names if possible
+        df.columns = [str(c).strip().lower() for c in df.columns]
+        
+        # Map common Chinese headers to English keys
+        col_map = {
+            '姓名': 'name', 'name': 'name',
+            '组别': 'group', 'group': 'group', '部门': 'group',
+            'id': 'id', '编号': 'id'
+        }
+        
+        # Rename columns
+        new_cols = {}
+        for col in df.columns:
+            if col in col_map:
+                new_cols[col] = col_map[col]
+        df = df.rename(columns=new_cols)
+        
+        if 'name' not in df.columns:
+            return jsonify({'error': '缺少必要列: 姓名 (Name)'}), 400
+            
+        guests = []
+        for i, row in df.iterrows():
+            guest_id = str(row.get('id', f'g_{i}_{random.randint(1000,9999)}'))
+            if pd.isna(guest_id) or guest_id == 'nan':
+                guest_id = f'g_{i}_{random.randint(1000,9999)}'
+                
+            name = str(row['name'])
+            if pd.isna(name) or name == 'nan':
+                continue
+                
+            group = str(row.get('group', 'Default'))
+            if pd.isna(group) or group == 'nan':
+                group = 'Default'
+                
+            guests.append({
+                'id': guest_id,
+                'name': name,
+                'group': group,
+                'avatar': f'https://api.dicebear.com/7.x/avataaars/svg?seed={guest_id}'
+            })
+            
+        return jsonify({'guests': guests})
+        
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/api/demo-data')
+def demo_data():
+    # 生成演示数据
+    groups = ['家人', '同事', '大学同学', '高中同学', '合作伙伴']
+    guests = []
+    for i in range(50):
+        group = random.choice(groups)
+        guests.append({
+            'id': f'g_{i}',
+            'name': f'Guest {i+1}',
+            'group': group,
+            'avatar': f'https://api.dicebear.com/7.x/avataaars/svg?seed={i}'
+        })
+        
+    tables = []
+    for i in range(6):
+        tables.append({
+            'id': f't_{i}',
+            'name': f'Table {i+1}',
+            'capacity': 10
+        })
+        
+    # 随机生成一些约束
+    constraints = []
+    # 必须坐一起
+    for _ in range(5):
+        g1 = random.choice(guests)['id']
+        g2 = random.choice(guests)['id']
+        if g1 != g2:
+            constraints.append({'g1': g1, 'g2': g2, 'type': 'must', 'weight': 10})
+            
+    # 不能坐一起
+    for _ in range(3):
+        g1 = random.choice(guests)['id']
+        g2 = random.choice(guests)['id']
+        if g1 != g2:
+            constraints.append({'g1': g1, 'g2': g2, 'type': 'cannot', 'weight': 10})
+            
+    return jsonify({
+        'guests': guests,
+        'tables': tables,
+        'constraints': constraints
+    })
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=7860, debug=True)

requirements.txt

@@ -0,0 +1,5 @@
+flask
+numpy
+gunicorn
+pandas
+openpyxl

templates/index.html

@@ -0,0 +1,350 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Seating Chart Solver | 智能排座专家</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <script src="//unpkg.com/element-plus"></script>
+    <script src="//unpkg.com/@element-plus/icons-vue"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
+    <style>
+        body { background-color: #f3f4f6; }
+        .guest-item { cursor: grab; transition: all 0.2s; }
+        .guest-item:active { cursor: grabbing; }
+        .table-circle { transition: all 0.3s; }
+        .table-circle:hover { transform: scale(1.02); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
+        .chair { position: absolute; width: 40px; height: 40px; border-radius: 50%; transform-origin: center 100px; }
+        .chair-content { width: 100%; height: 100%; border-radius: 50%; background: white; border: 2px solid #e5e7eb; display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 10px; position: relative; }
+        .chair-content img { width: 100%; height: 100%; object-fit: cover; }
+        .chair-content.empty { background: #f9fafb; border-style: dashed; }
+        [v-cloak] { display: none; }
+    </style>
+</head>
+<body>
+    <div id="app" v-cloak class="flex h-screen overflow-hidden">
+        <!-- Sidebar: Configuration -->
+        <div class="w-1/4 bg-white shadow-lg z-10 flex flex-col border-r">
+            <div class="p-5 border-b bg-gray-50">
+                <h1 class="text-xl font-bold flex items-center text-gray-800">
+                    <el-icon class="mr-2 text-indigo-600"><Grid /></el-icon>
+                    智能排座专家
+                </h1>
+                <p class="text-xs text-gray-500 mt-1">基于模拟退火算法 (Simulated Annealing)</p>
+            </div>
+            
+            <div class="flex-1 overflow-y-auto p-5 space-y-6">
+                <!-- Data Controls -->
+                <div class="space-y-3">
+                    <div class="flex justify-between items-center">
+                        <h3 class="font-bold text-gray-700">宾客名单 (${guests.length})</h3>
+                        <div class="space-x-2">
+                            <input type="file" ref="fileInput" class="hidden" accept=".xlsx,.xls,.csv" @change="handleFileUpload">
+                            <el-button size="small" @click="triggerUpload">导入Excel</el-button>
+                            <el-button size="small" @click="loadDemoData" :loading="loading">演示数据</el-button>
+                        </div>
+                    </div>
+                    <div class="max-h-40 overflow-y-auto border rounded p-2 bg-gray-50 text-sm">
+                        <div v-for="g in guests" :key="g.id" class="flex items-center justify-between py-1 border-b last:border-0">
+                            <div class="flex items-center">
+                                <span class="w-2 h-2 rounded-full mr-2" :style="{background: getGroupColor(g.group)}"></span>
+                                ${g.name}
+                            </div>
+                            <span class="text-xs text-gray-400">${g.group}</span>
+                        </div>
+                        <div v-if="guests.length === 0" class="text-center text-gray-400 py-4">暂无数据</div>
+                    </div>
+                </div>
+                
+                <div class="space-y-3">
+                    <h3 class="font-bold text-gray-700">桌台设置 (${tables.length})</h3>
+                    <div class="max-h-40 overflow-y-auto border rounded p-2 bg-gray-50 text-sm">
+                        <div v-for="t in tables" :key="t.id" class="flex justify-between py-1 border-b last:border-0">
+                            <span>${t.name}</span>
+                            <span class="text-gray-500">${t.capacity}座</span>
+                        </div>
+                        <div v-if="tables.length === 0" class="text-center text-gray-400 py-4">暂无数据</div>
+                    </div>
+                </div>
+                
+                <div class="space-y-3">
+                    <h3 class="font-bold text-gray-700">排座约束 (${constraints.length})</h3>
+                    <div class="max-h-32 overflow-y-auto border rounded p-2 bg-gray-50 text-sm">
+                         <div v-for="(c, i) in constraints" :key="i" class="flex items-center text-xs py-1">
+                             <el-tag size="small" :type="c.type === 'must' ? 'success' : 'danger'" class="mr-2">
+                                 ${c.type === 'must' ? '必须' : '不能'}
+                             </el-tag>
+                             ${getGuestName(c.g1)} & ${getGuestName(c.g2)}
+                         </div>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="p-5 border-t bg-gray-50">
+                <el-button type="primary" class="w-full" size="large" @click="solveSeating" :loading="solving" :disabled="guests.length === 0">
+                    <el-icon class="mr-2"><Magic-Stick /></el-icon> 开始智能排座
+                </el-button>
+                <div class="mt-2 text-center text-xs text-gray-400" v-if="lastScore">
+                    当前方案评分: <span class="font-bold text-indigo-600">${lastScore}</span>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Main: Visualization -->
+        <div class="flex-1 flex flex-col h-full bg-gray-100">
+            <!-- Toolbar -->
+            <div class="h-14 bg-white border-b flex items-center justify-between px-6 shadow-sm">
+                <div class="flex items-center space-x-4">
+                    <div class="flex items-center text-sm">
+                        <span class="w-3 h-3 rounded-full bg-indigo-500 mr-2"></span>
+                        <span>已分配: ${assignedCount}</span>
+                    </div>
+                    <div class="flex items-center text-sm">
+                        <span class="w-3 h-3 rounded-full bg-gray-300 mr-2"></span>
+                        <span>未分配: ${unassignedGuests.length}</span>
+                    </div>
+                </div>
+                <div class="flex space-x-2">
+                    <el-button size="default" @click="exportImage" icon="Picture">导出图片</el-button>
+                    <el-button size="default" @click="exportPDF" type="danger" icon="Document">导出 PDF</el-button>
+                </div>
+            </div>
+            
+            <!-- Canvas -->
+            <div class="flex-1 overflow-auto p-8 relative" id="seating-canvas">
+                <div v-if="tables.length === 0" class="h-full flex flex-col items-center justify-center text-gray-400">
+                    <el-icon size="48" class="mb-4"><Files /></el-icon>
+                    <p>请先加载数据或创建桌台</p>
+                </div>
+                
+                <div v-else class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-12 auto-rows-max">
+                    <div v-for="table in tables" :key="table.id" 
+                         class="relative w-64 h-64 mx-auto table-circle bg-white rounded-full shadow-md border-4 border-indigo-100 flex items-center justify-center">
+                        
+                        <div class="text-center z-10">
+                            <div class="font-bold text-gray-700 text-lg">${table.name}</div>
+                            <div class="text-xs text-gray-400">${getAssignedGuests(table.id).length}/${table.capacity}</div>
+                        </div>
+                        
+                        <!-- Chairs -->
+                        <div v-for="(seat, idx) in getTableSeats(table)" :key="idx"
+                             class="absolute w-10 h-10"
+                             :style="getSeatStyle(idx, table.capacity)">
+                             
+                            <div class="chair-content shadow-sm" :class="{'empty': !seat}" :title="seat ? seat.name : '空座'">
+                                <img v-if="seat && seat.avatar" :src="seat.avatar" />
+                                <span v-else-if="seat" class="font-bold text-gray-600">${seat.name[0]}</span>
+                                <span v-else class="text-gray-300 text-xs">${idx+1}</span>
+                            </div>
+                            
+                            <div v-if="seat" class="absolute -bottom-5 left-1/2 transform -translate-x-1/2 whitespace-nowrap text-[10px] bg-gray-800 text-white px-1 rounded opacity-80 z-20">
+                                ${seat.name}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        const { createApp, ref, computed } = Vue;
+
+        const app = createApp({
+            delimiters: ['${', '}'],
+            setup() {
+                const guests = ref([]);
+                const tables = ref([]);
+                const constraints = ref([]);
+                const solution = ref({}); // guest_id -> table_id
+                const fileInput = ref(null);
+                
+                const loading = ref(false);
+                const solving = ref(false);
+                const lastScore = ref(null);
+                
+                const groupColors = {};
+                
+                const getGroupColor = (group) => {
+                    if (!groupColors[group]) {
+                        const colors = ['#f87171', '#fb923c', '#fbbf24', '#a3e635', '#34d399', '#22d3ee', '#818cf8', '#e879f9'];
+                        groupColors[group] = colors[Object.keys(groupColors).length % colors.length];
+                    }
+                    return groupColors[group];
+                };
+                
+                const loadDemoData = async () => {
+                    loading.value = true;
+                    try {
+                        const res = await fetch('/api/demo-data');
+                        const data = await res.json();
+                        guests.value = data.guests;
+                        tables.value = data.tables;
+                        constraints.value = data.constraints;
+                        solution.value = {}; // Reset
+                        lastScore.value = null;
+                        ElementPlus.ElMessage.success('演示数据加载成功');
+                    } catch (e) {
+                        ElementPlus.ElMessage.error('加载失败');
+                    } finally {
+                        loading.value = false;
+                    }
+                };
+
+                const triggerUpload = () => {
+                    fileInput.value.click();
+                };
+
+                const handleFileUpload = async (event) => {
+                    const file = event.target.files[0];
+                    if (!file) return;
+
+                    const formData = new FormData();
+                    formData.append('file', file);
+
+                    loading.value = true;
+                    try {
+                        const res = await fetch('/api/upload', {
+                            method: 'POST',
+                            body: formData
+                        });
+                        const data = await res.json();
+                        
+                        if (res.ok) {
+                            guests.value = data.guests;
+                            ElementPlus.ElMessage.success(`成功导入 ${data.guests.length} 位宾客`);
+                            // Clear input value to allow re-uploading same file
+                            event.target.value = '';
+                        } else {
+                            ElementPlus.ElMessage.error(data.error || '上传失败');
+                        }
+                    } catch (e) {
+                        ElementPlus.ElMessage.error('上传出错: ' + e.message);
+                    } finally {
+                        loading.value = false;
+                    }
+                };
+                
+                // Auto load demo data if empty on init
+                Vue.onMounted(() => {
+                    loadDemoData();
+                });
+                
+                const solveSeating = async () => {
+                    solving.value = true;
+                    try {
+                        const res = await fetch('/api/solve', {
+                            method: 'POST',
+                            headers: {'Content-Type': 'application/json'},
+                            body: JSON.stringify({
+                                guests: guests.value,
+                                tables: tables.value,
+                                constraints: constraints.value
+                            })
+                        });
+                        const result = await res.json();
+                        
+                        // Parse result back to solution map for reactivity
+                        const newSol = {};
+                        result.tables.forEach(t => {
+                            t.guests.forEach(g => {
+                                newSol[g.id] = t.id;
+                            });
+                        });
+                        solution.value = newSol;
+                        lastScore.value = result.score;
+                        ElementPlus.ElMessage.success(`优化完成! 评分: ${result.score}`);
+                    } catch (e) {
+                        ElementPlus.ElMessage.error('计算失败');
+                    } finally {
+                        solving.value = false;
+                    }
+                };
+                
+                const getGuestName = (id) => {
+                    const g = guests.value.find(x => x.id === id);
+                    return g ? g.name : id;
+                };
+                
+                const getAssignedGuests = (tableId) => {
+                    return guests.value.filter(g => solution.value[g.id] === tableId);
+                };
+                
+                const unassignedGuests = computed(() => {
+                    return guests.value.filter(g => !solution.value[g.id]);
+                });
+                
+                const assignedCount = computed(() => {
+                    return guests.value.filter(g => solution.value[g.id]).length;
+                });
+                
+                const getTableSeats = (table) => {
+                    const assigned = getAssignedGuests(table.id);
+                    const seats = new Array(table.capacity).fill(null);
+                    assigned.forEach((g, i) => {
+                        if (i < table.capacity) seats[i] = g;
+                    });
+                    return seats;
+                };
+                
+                const getSeatStyle = (index, capacity) => {
+                    // Calculate position on circle
+                    const angle = (index * 360 / capacity) * (Math.PI / 180);
+                    // Radius = 100px (half of w-64/256px minus padding)
+                    const r = 90; 
+                    const x = Math.sin(angle) * r; // x offset
+                    const y = -Math.cos(angle) * r; // y offset
+                    
+                    return {
+                        left: '50%',
+                        top: '50%',
+                        transform: `translate(calc(-50% + ${x}px), calc(-50% + ${y}px))`
+                    };
+                };
+
+                const exportImage = () => {
+                    const element = document.getElementById('seating-canvas');
+                    html2canvas(element).then(canvas => {
+                        const link = document.createElement('a');
+                        link.download = 'seating-chart.png';
+                        link.href = canvas.toDataURL();
+                        link.click();
+                    });
+                };
+                
+                const exportPDF = () => {
+                    const { jsPDF } = window.jspdf;
+                    const element = document.getElementById('seating-canvas');
+                    html2canvas(element).then(canvas => {
+                        const imgData = canvas.toDataURL('image/png');
+                        const pdf = new jsPDF('l', 'mm', 'a4');
+                        const width = pdf.internal.pageSize.getWidth();
+                        const height = pdf.internal.pageSize.getHeight();
+                        pdf.addImage(imgData, 'PNG', 0, 0, width, height);
+                        pdf.save("seating-plan.pdf");
+                    });
+                };
+
+                return {
+                    guests, tables, constraints,
+                    loading, solving, lastScore,
+                    unassignedGuests, assignedCount,
+                    loadDemoData, solveSeating,
+                    getGroupColor, getGuestName,
+                    getAssignedGuests, getTableSeats, getSeatStyle,
+                    exportImage, exportPDF,
+                    fileInput, triggerUpload, handleFileUpload
+                };
+            }
+        });
+        
+        for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+            app.component(key, component)
+        }
+        app.use(ElementPlus).mount('#app');
+    </script>
+</body>
+</html>