Enhance functionality: Excel import, bug fixes, UI improvements

Dockerfile

@@ -0,0 +1,18 @@
+FROM python:3.11-slim
+
+# Create a non-root user for Hugging Face Spaces
+RUN useradd -m -u 1000 user
+USER user
+ENV PATH="/home/user/.local/bin:$PATH"
+
+WORKDIR /app
+
+COPY --chown=user:user requirements.txt requirements.txt
+RUN pip install --no-cache-dir --upgrade pip && \
+    pip install --no-cache-dir -r requirements.txt
+
+COPY --chown=user:user . /app
+
+EXPOSE 7860
+
+CMD ["python", "app.py"]

README.md

@@ -0,0 +1,49 @@
+---
+title: Smart Load Packer
+emoji: 📦
+colorFrom: blue
+colorTo: green
+sdk: docker
+app_port: 7860
+short_description: 智能装箱大师 - 3D可视化装箱模拟与算法引擎
+pinned: false
+---
+
+# 智能装箱大师 (Smart Load Packer)
+
+这是一个基于 3D 装箱算法（3D Bin Packing）的可视化模拟工具，旨在帮助物流、仓储和电商企业优化货物装载，提高空间利用率，降低运输成本。
+
+## 核心功能
+
+- **智能装箱算法**: 采用启发式 3D 装箱策略，自动计算最优装载方案。
+- **3D 可视化**: 基于 Three.js 的实时 3D 渲染，直观展示装箱结果，支持旋转、缩放、平移。
+- **多规格货物支持**: 支持自定义多种尺寸、重量、颜色的货物。
+- **容器定制**: 支持自定义集装箱/货车/纸箱的尺寸和最大载重。
+- **数据分析**: 实时计算空间利用率、装载数量、总重量等关键指标。
+- **装箱清单**: 生成详细的装箱坐标清单 (Manifest)。
+
+## 技术栈
+
+- **后端**: Python (Flask) - 处理装箱核心算法逻辑
+- **前端**: Vue 3 + Tailwind CSS - 响应式交互界面
+- **可视化**: Three.js - 3D 场景渲染
+- **部署**: Docker - 容器化部署
+
+## 商业价值
+
+该项目可应用于：
+1. **物流运输**: 优化卡车/集装箱装载，减少车辆使用。
+2. **仓储管理**: 优化货架摆放和纸箱打包。
+3. **电商发货**: 自动推荐包装箱尺寸，减少包材浪费。
+
+## 本地运行
+
+```bash
+# 构建镜像
+docker build -t smart-load-packer .
+
+# 运行容器
+docker run -p 7860:7860 smart-load-packer
+```
+
+访问: http://localhost:7860

app.py

@@ -0,0 +1,232 @@
+import os
+import json
+import time
+import uuid
+import pandas as pd
+from flask import Flask, render_template, request, jsonify
+
+app = Flask(__name__)
+app.config['SECRET_KEY'] = 'smart-load-packer-secret'
+app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024  # 16MB max upload
+
+# --- Error Handlers ---
+@app.errorhandler(500)
+def internal_error(error):
+    return jsonify({'status': 'error', 'message': 'Internal Server Error', 'details': str(error)}), 500
+
+@app.errorhandler(413)
+def request_entity_too_large(error):
+    return jsonify({'status': 'error', 'message': 'File Too Large'}), 413
+
+# --- 3D Packing Algorithm (Heuristic) ---
+
+class Item:
+    def __init__(self, id, name, w, h, d, color, weight):
+        self.id = id
+        self.name = name
+        self.w = float(w)
+        self.h = float(h)
+        self.d = float(d)
+        self.color = color
+        self.weight = float(weight)
+        self.x = 0
+        self.y = 0
+        self.z = 0
+        self.volume = self.w * self.h * self.d
+
+    def to_dict(self):
+        return {
+            'id': self.id,
+            'name': self.name,
+            'w': self.w, 'h': self.h, 'd': self.d,
+            'x': self.x, 'y': self.y, 'z': self.z,
+            'color': self.color,
+            'weight': self.weight
+        }
+
+class Bin:
+    def __init__(self, w, h, d, max_weight):
+        self.w = float(w)
+        self.h = float(h)
+        self.d = float(d)
+        self.max_weight = float(max_weight)
+        self.items = []
+        self.unpacked_items = []
+        # Potential placement points (x, y, z)
+        # Start with origin
+        self.points = [(0, 0, 0)]
+
+    def intersect(self, i1, x2, y2, z2, w2, h2, d2):
+        return (
+            i1.x < x2 + w2 and i1.x + i1.w > x2 and
+            i1.y < y2 + h2 and i1.y + i1.h > y2 and
+            i1.z < z2 + d2 and i1.z + i1.d > z2
+        )
+
+    def can_fit(self, item, x, y, z):
+        # Check boundaries
+        if x + item.w > self.w or y + item.h > self.h or z + item.d > self.d:
+            return False
+        # Check intersections
+        for i in self.items:
+            if self.intersect(i, x, y, z, item.w, item.h, item.d):
+                return False
+        return True
+
+    def pack(self, items_to_pack):
+        # Sort items by volume desc, then max dimension
+        # Heuristic: Bigger items first
+        items_to_pack.sort(key=lambda x: (x.volume, max(x.w, x.h, x.d)), reverse=True)
+
+        for item in items_to_pack:
+            placed = False
+            # Sort points to try to pack bottom-up, back-left
+            # Priority: Y (height/vertical) asc, Z (depth) asc, X (width) asc
+            # Assuming Y is vertical axis
+            self.points.sort(key=lambda p: (p[1], p[2], p[0]))
+
+            for i, (px, py, pz) in enumerate(self.points):
+                # Try standard orientation
+                if self.can_fit(item, px, py, pz):
+                    item.x, item.y, item.z = px, py, pz
+                    self.items.append(item)
+                    self._add_new_points(item)
+                    placed = True
+                    break
+                
+                # Try rotation (swap W and D) - simple rotation on floor
+                # Swap W and D
+                if self.can_fit(item, px, py, pz): 
+                     # Wait, I need to actually change dimensions to test rotation
+                     # But let's stick to simple non-rotation for MVP to avoid complexity
+                     pass
+
+            if not placed:
+                self.unpacked_items.append(item)
+            else:
+                # Remove the used point? Not necessarily, but for efficiency we could.
+                # Actually, the used point is now inside an item, so it will fail can_fit for future items
+                # But to keep list small, we can remove it.
+                if (item.x, item.y, item.z) in self.points:
+                    self.points.remove((item.x, item.y, item.z))
+
+    def _add_new_points(self, item):
+        # Add 3 new candidate points relative to the item
+        # 1. Top of item
+        p1 = (item.x, item.y + item.h, item.z)
+        # 2. Right of item
+        p2 = (item.x + item.w, item.y, item.z)
+        # 3. Front of item
+        p3 = (item.x, item.y, item.z + item.d)
+
+        for p in [p1, p2, p3]:
+            # Simple bound check optimization
+            if p[0] < self.w and p[1] < self.h and p[2] < self.d:
+                if p not in self.points:
+                    self.points.append(p)
+
+# --- Routes ---
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/api/import-excel', methods=['POST'])
+def import_excel():
+    if 'file' not in request.files:
+        return jsonify({'status': 'error', 'message': 'No file part'}), 400
+    file = request.files['file']
+    if file.filename == '':
+        return jsonify({'status': 'error', 'message': 'No selected file'}), 400
+    
+    if file and (file.filename.endswith('.xlsx') or file.filename.endswith('.xls')):
+        try:
+            df = pd.read_excel(file)
+            # Expected columns: name, width, height, depth, quantity, color, weight
+            # Map columns vaguely
+            items = []
+            for _, row in df.iterrows():
+                # Normalize keys
+                row_keys = {k.lower(): v for k, v in row.to_dict().items()}
+                
+                # Helper to find key
+                def get_val(keys_list, default=None):
+                    for k in keys_list:
+                        for rk in row_keys:
+                            if k in rk:
+                                return row_keys[rk]
+                    return default
+
+                items.append({
+                    'name': str(get_val(['name', '名称', '名字'], 'Item')),
+                    'width': float(get_val(['width', '宽', 'length', '长'], 10)),
+                    'height': float(get_val(['height', '高'], 10)),
+                    'depth': float(get_val(['depth', '深', 'width2'], 10)),
+                    'quantity': int(get_val(['quantity', 'qty', '数量', 'count'], 1)),
+                    'color': str(get_val(['color', '颜色'], '#888888')),
+                    'weight': float(get_val(['weight', '重'], 1))
+                })
+            return jsonify({'status': 'success', 'items': items})
+        except Exception as e:
+            return jsonify({'status': 'error', 'message': str(e)}), 500
+    return jsonify({'status': 'error', 'message': 'Invalid file type'}), 400
+
+@app.route('/api/calculate', methods=['POST'])
+def calculate():
+    data = request.json
+    container = data.get('container', {})
+    items_data = data.get('items', [])
+
+    # Create Bin
+    # Assuming Y is vertical height.
+    bin_obj = Bin(
+        w=container.get('width', 200),
+        h=container.get('height', 200),
+        d=container.get('depth', 400),
+        max_weight=container.get('max_weight', 10000)
+    )
+
+    # Create Items
+    items = []
+    for i_data in items_data:
+        qty = int(i_data.get('quantity', 1))
+        for _ in range(qty):
+            items.append(Item(
+                id=str(uuid.uuid4())[:8],
+                name=i_data.get('name', 'Item'),
+                w=i_data.get('width'),
+                h=i_data.get('height'),
+                d=i_data.get('depth'),
+                color=i_data.get('color', '#888888'),
+                weight=i_data.get('weight', 0)
+            ))
+
+    start_time = time.time()
+    bin_obj.pack(items)
+    end_time = time.time()
+
+    # Calculate stats
+    total_volume = bin_obj.w * bin_obj.h * bin_obj.d
+    used_volume = sum(i.volume for i in bin_obj.items)
+    volume_util = (used_volume / total_volume) * 100 if total_volume > 0 else 0
+    
+    total_weight = sum(i.weight for i in bin_obj.items)
+    
+    return jsonify({
+        'status': 'success',
+        'time_taken': f"{end_time - start_time:.4f}s",
+        'container': {
+            'w': bin_obj.w, 'h': bin_obj.h, 'd': bin_obj.d
+        },
+        'items_packed': [i.to_dict() for i in bin_obj.items],
+        'items_unpacked': [i.to_dict() for i in bin_obj.unpacked_items],
+        'stats': {
+            'volume_utilization': round(volume_util, 2),
+            'packed_count': len(bin_obj.items),
+            'unpacked_count': len(bin_obj.unpacked_items),
+            'total_weight': total_weight
+        }
+    })
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=7860)

requirements.txt

@@ -0,0 +1,3 @@
+flask
+pandas
+openpyxl

templates/index.html

@@ -0,0 +1,455 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>智能装箱大师 | Smart Load Packer</title>
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#3b82f6',
+                        secondary: '#10b981',
+                        dark: '#1f2937'
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        body { font-family: 'Inter', sans-serif; }
+        #canvas-container { width: 100%; height: 500px; background: #f0f0f0; border-radius: 8px; overflow: hidden; }
+        .dark #canvas-container { background: #111827; }
+        /* Custom Scrollbar */
+        ::-webkit-scrollbar { width: 8px; height: 8px; }
+        ::-webkit-scrollbar-track { background: transparent; }
+        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
+        ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
+        .dark ::-webkit-scrollbar-thumb { background: #374151; }
+    </style>
+</head>
+<body class="bg-gray-50 text-gray-800 dark:bg-gray-900 dark:text-gray-100 transition-colors duration-200">
+    <div id="app" class="min-h-screen flex flex-col">
+        <!-- Header -->
+        <header class="bg-white dark:bg-gray-800 shadow-sm z-10">
+            <div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
+                <div class="flex items-center space-x-3">
+                    <i class="fas fa-cubes text-primary text-2xl"></i>
+                    <h1 class="text-xl font-bold tracking-tight">智能装箱大师 <span class="text-xs font-normal text-gray-500 dark:text-gray-400">Smart Load Packer</span></h1>
+                </div>
+                <div class="flex items-center space-x-4">
+                    <button @click="toggleDark" class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition">
+                        <i :class="isDark ? 'fas fa-sun text-yellow-400' : 'fas fa-moon text-gray-600'"></i>
+                    </button>
+                    <a href="https://huggingface.co/spaces" target="_blank" class="text-sm text-gray-500 hover:text-primary">
+                        <i class="fas fa-rocket mr-1"></i> Deploy to HF
+                    </a>
+                </div>
+            </div>
+        </header>
+
+        <!-- Main Content -->
+        <main class="flex-1 max-w-7xl w-full mx-auto px-4 py-6 grid grid-cols-1 lg:grid-cols-12 gap-6">
+            
+            <!-- Left Panel: Configuration -->
+            <div class="lg:col-span-4 space-y-6 overflow-y-auto max-h-[calc(100vh-100px)] pr-2">
+                <!-- Container Config -->
+                <div class="bg-white dark:bg-gray-800 p-5 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700">
+                    <h2 class="text-lg font-semibold mb-4 flex items-center">
+                        <i class="fas fa-truck-loading mr-2 text-primary"></i> 容器设置 (Container)
+                    </h2>
+                    <div class="grid grid-cols-3 gap-3 mb-3">
+                        <div>
+                            <label class="block text-xs font-medium text-gray-500 mb-1">宽 (Width)</label>
+                            <input v-model.number="container.width" type="number" class="w-full bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded px-3 py-2 text-sm focus:ring-2 focus:ring-primary outline-none">
+                        </div>
+                        <div>
+                            <label class="block text-xs font-medium text-gray-500 mb-1">高 (Height)</label>
+                            <input v-model.number="container.height" type="number" class="w-full bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded px-3 py-2 text-sm focus:ring-2 focus:ring-primary outline-none">
+                        </div>
+                        <div>
+                            <label class="block text-xs font-medium text-gray-500 mb-1">深 (Depth)</label>
+                            <input v-model.number="container.depth" type="number" class="w-full bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded px-3 py-2 text-sm focus:ring-2 focus:ring-primary outline-none">
+                        </div>
+                    </div>
+                    <div>
+                        <label class="block text-xs font-medium text-gray-500 mb-1">最大载重 (Max Weight)</label>
+                        <input v-model.number="container.max_weight" type="number" class="w-full bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded px-3 py-2 text-sm focus:ring-2 focus:ring-primary outline-none">
+                    </div>
+                </div>
+
+                <!-- Items Config -->
+                <div class="bg-white dark:bg-gray-800 p-5 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700">
+                    <div class="flex justify-between items-center mb-4">
+                        <h2 class="text-lg font-semibold flex items-center">
+                            <i class="fas fa-box-open mr-2 text-secondary"></i> 货物列表 (Cargo)
+                        </h2>
+                        <button @click="addItem" class="text-xs bg-secondary hover:bg-green-600 text-white px-3 py-1.5 rounded transition">
+                            <i class="fas fa-plus mr-1"></i> 添加货物
+                        </button>
+                    </div>
+                    
+                    <div class="space-y-3">
+                        <div v-for="(item, index) in items" :key="index" class="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg border border-gray-200 dark:border-gray-600 relative group">
+                            <button @click="removeItem(index)" class="absolute top-2 right-2 text-gray-400 hover:text-red-500 opacity-0 group-hover:opacity-100 transition">
+                                <i class="fas fa-times"></i>
+                            </button>
+                            <div class="grid grid-cols-1 gap-2 mb-2">
+                                <input v-model="item.name" type="text" placeholder="货物名称" class="w-full bg-transparent border-b border-gray-300 dark:border-gray-600 text-sm focus:border-primary outline-none pb-1">
+                            </div>
+                            <div class="grid grid-cols-4 gap-2 mb-2">
+                                <div><label class="text-[10px] text-gray-400">W</label><input v-model.number="item.width" type="number" class="w-full bg-white dark:bg-gray-800 rounded px-1 py-1 text-xs border border-gray-200 dark:border-gray-600"></div>
+                                <div><label class="text-[10px] text-gray-400">H</label><input v-model.number="item.height" type="number" class="w-full bg-white dark:bg-gray-800 rounded px-1 py-1 text-xs border border-gray-200 dark:border-gray-600"></div>
+                                <div><label class="text-[10px] text-gray-400">D</label><input v-model.number="item.depth" type="number" class="w-full bg-white dark:bg-gray-800 rounded px-1 py-1 text-xs border border-gray-200 dark:border-gray-600"></div>
+                                <div><label class="text-[10px] text-gray-400">Qty</label><input v-model.number="item.quantity" type="number" class="w-full bg-white dark:bg-gray-800 rounded px-1 py-1 text-xs border border-gray-200 dark:border-gray-600 font-bold text-primary"></div>
+                            </div>
+                            <div class="flex items-center gap-2">
+                                <input v-model="item.color" type="color" class="h-6 w-6 rounded cursor-pointer border-none bg-transparent">
+                                <input v-model.number="item.weight" type="number" placeholder="Weight" class="flex-1 bg-white dark:bg-gray-800 rounded px-2 py-1 text-xs border border-gray-200 dark:border-gray-600">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <button @click="calculate" :disabled="loading" class="w-full bg-primary hover:bg-blue-600 text-white py-3 rounded-xl font-bold shadow-lg shadow-blue-500/30 transition transform active:scale-95 flex justify-center items-center">
+                    <span v-if="loading"><i class="fas fa-spinner fa-spin mr-2"></i> 计算中...</span>
+                    <span v-else><i class="fas fa-calculator mr-2"></i> 开始装箱计算 (Calculate)</span>
+                </button>
+            </div>
+
+            <!-- Right Panel: Visualization & Stats -->
+            <div class="lg:col-span-8 flex flex-col gap-6">
+                <!-- 3D View -->
+                <div class="bg-white dark:bg-gray-800 p-1 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 relative">
+                    <div id="canvas-container"></div>
+                    <div class="absolute top-4 left-4 bg-black/50 text-white px-3 py-1 rounded text-xs backdrop-blur">
+                        <i class="fas fa-mouse mr-1"></i> 左键旋转 / 右键平移 / 滚轮缩放
+                    </div>
+                </div>
+
+                <!-- Stats Grid -->
+                <div v-if="result" class="grid grid-cols-2 md:grid-cols-4 gap-4">
+                    <div class="bg-white dark:bg-gray-800 p-4 rounded-xl border border-gray-100 dark:border-gray-700 shadow-sm">
+                        <div class="text-xs text-gray-500 mb-1">空间利用率 (Volume)</div>
+                        <div class="text-2xl font-bold text-primary">${ result.stats.volume_utilization }%</div>
+                        <div class="w-full bg-gray-200 rounded-full h-1.5 mt-2">
+                            <div class="bg-primary h-1.5 rounded-full" :style="{ width: result.stats.volume_utilization + '%' }"></div>
+                        </div>
+                    </div>
+                    <div class="bg-white dark:bg-gray-800 p-4 rounded-xl border border-gray-100 dark:border-gray-700 shadow-sm">
+                        <div class="text-xs text-gray-500 mb-1">已装载数量 (Packed)</div>
+                        <div class="text-2xl font-bold text-secondary">${ result.stats.packed_count } <span class="text-sm text-gray-400">/ ${ totalItemsCount }</span></div>
+                    </div>
+                    <div class="bg-white dark:bg-gray-800 p-4 rounded-xl border border-gray-100 dark:border-gray-700 shadow-sm">
+                        <div class="text-xs text-gray-500 mb-1">总重量 (Weight)</div>
+                        <div class="text-2xl font-bold text-orange-500">${ result.stats.total_weight } <span class="text-sm text-gray-400">kg</span></div>
+                    </div>
+                    <div class="bg-white dark:bg-gray-800 p-4 rounded-xl border border-gray-100 dark:border-gray-700 shadow-sm">
+                        <div class="text-xs text-gray-500 mb-1">未装载 (Failed)</div>
+                        <div class="text-2xl font-bold text-red-500">${ result.stats.unpacked_count }</div>
+                    </div>
+                </div>
+
+                <!-- Manifest Table -->
+                <div v-if="result && result.items_packed.length > 0" class="bg-white dark:bg-gray-800 rounded-xl border border-gray-100 dark:border-gray-700 shadow-sm overflow-hidden">
+                    <div class="px-5 py-3 border-b border-gray-100 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
+                        <h3 class="font-semibold text-sm">装箱清单 (Manifest)</h3>
+                    </div>
+                    <div class="overflow-x-auto">
+                        <table class="w-full text-sm text-left">
+                            <thead class="text-xs text-gray-500 uppercase bg-gray-50 dark:bg-gray-700/50">
+                                <tr>
+                                    <th class="px-4 py-3">ID</th>
+                                    <th class="px-4 py-3">Name</th>
+                                    <th class="px-4 py-3">Size (WxHxD)</th>
+                                    <th class="px-4 py-3">Position (x,y,z)</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr v-for="item in result.items_packed" :key="item.id" class="border-b dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700/50">
+                                    <td class="px-4 py-2 font-mono text-xs text-gray-400">${ item.id }</td>
+                                    <td class="px-4 py-2 flex items-center">
+                                        <span class="w-3 h-3 rounded-full mr-2" :style="{ backgroundColor: item.color }"></span>
+                                        ${ item.name }
+                                    </td>
+                                    <td class="px-4 py-2 text-gray-500">${ item.w } x ${ item.h } x ${ item.d }</td>
+                                    <td class="px-4 py-2 font-mono text-xs text-primary">${ item.x }, ${ item.y }, ${ item.z }</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    <script>
+        const { createApp, ref, computed, onMounted, watch } = Vue;
+
+        createApp({
+            delimiters: ['${', '}'],
+            setup() {
+                const isDark = ref(false);
+                const loading = ref(false);
+                const result = ref(null);
+
+                // Initial Data
+                const container = ref({
+                    width: 500,
+                    height: 300,
+                    depth: 800,
+                    max_weight: 5000
+                });
+
+                const items = ref([
+                    { name: 'Standard Box A', width: 100, height: 100, depth: 100, quantity: 12, color: '#3b82f6', weight: 10 },
+                    { name: 'Long Box B', width: 200, height: 50, depth: 100, quantity: 8, color: '#10b981', weight: 15 },
+                    { name: 'Large Crate C', width: 150, height: 150, depth: 150, quantity: 4, color: '#f59e0b', weight: 30 },
+                ]);
+
+                // Three.js variables
+                let scene, camera, renderer, controls, containerMesh;
+                let itemMeshes = [];
+
+                const toggleDark = () => {
+                    isDark.value = !isDark.value;
+                    if (isDark.value) {
+                        document.documentElement.classList.add('dark');
+                    } else {
+                        document.documentElement.classList.remove('dark');
+                    }
+                    initThree(); // Re-init to update background colors
+                    if(result.value) visualize(result.value);
+                };
+
+                const addItem = () => {
+                    items.value.push({
+                        name: 'New Item', width: 50, height: 50, depth: 50, quantity: 1, color: '#' + Math.floor(Math.random()*16777215).toString(16), weight: 5
+                    });
+                };
+
+                const removeItem = (index) => {
+                    items.value.splice(index, 1);
+                };
+
+                const importExcel = async (event) => {
+                    const file = event.target.files[0];
+                    if (!file) return;
+
+                    const formData = new FormData();
+                    formData.append('file', file);
+
+                    loading.value = true;
+                    try {
+                        const response = await fetch('/api/import-excel', {
+                            method: 'POST',
+                            body: formData
+                        });
+                        const data = await response.json();
+                        if (data.status === 'success') {
+                            // Merge or replace? Let's append.
+                            items.value = [...items.value, ...data.items];
+                            alert(`Successfully imported ${data.items.length} items.`);
+                        } else {
+                            alert('Import failed: ' + data.message);
+                        }
+                    } catch (e) {
+                        alert('Error uploading file: ' + e.message);
+                    } finally {
+                        loading.value = false;
+                        event.target.value = ''; // Reset input
+                    }
+                };
+
+                const totalItemsCount = computed(() => {
+                    return items.value.reduce((acc, item) => acc + item.quantity, 0);
+                });
+
+                const calculate = async () => {
+                    loading.value = true;
+                    try {
+                        const response = await fetch('/api/calculate', {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({
+                                container: container.value,
+                                items: items.value
+                            })
+                        });
+                        const data = await response.json();
+                        result.value = data;
+                        visualize(data);
+                    } catch (e) {
+                        alert('Calculation failed: ' + e.message);
+                    } finally {
+                        loading.value = false;
+                    }
+                };
+
+                // Three.js Visualization Logic
+                const initThree = () => {
+                    const canvasContainer = document.getElementById('canvas-container');
+                    canvasContainer.innerHTML = ''; // Clear existing
+
+                    const width = canvasContainer.clientWidth;
+                    const height = canvasContainer.clientHeight;
+
+                    scene = new THREE.Scene();
+                    scene.background = new THREE.Color(isDark.value ? 0x111827 : 0xf0f0f0);
+
+                    // Camera setup
+                    camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
+                    camera.position.set(1000, 1000, 1000);
+                    camera.lookAt(0, 0, 0);
+
+                    renderer = new THREE.WebGLRenderer({ antialias: true });
+                    renderer.setSize(width, height);
+                    canvasContainer.appendChild(renderer.domElement);
+
+                    // Controls
+                    controls = new THREE.OrbitControls(camera, renderer.domElement);
+                    controls.enableDamping = true;
+
+                    // Lights
+                    const ambientLight = new THREE.AmbientLight(0x404040, 1.5);
+                    scene.add(ambientLight);
+
+                    const dirLight = new THREE.DirectionalLight(0xffffff, 1);
+                    dirLight.position.set(500, 1000, 500);
+                    scene.add(dirLight);
+                    
+                    // Initial Grid/Ground
+                    // const gridHelper = new THREE.GridHelper(2000, 20);
+                    // scene.add(gridHelper);
+
+                    animate();
+                };
+
+                const visualize = (data) => {
+                    // Clear previous items
+                    while(scene.children.length > 0){ 
+                        scene.remove(scene.children[0]); 
+                    }
+                    
+                    // Re-add lights
+                    const ambientLight = new THREE.AmbientLight(0x404040, 1.5);
+                    scene.add(ambientLight);
+                    const dirLight = new THREE.DirectionalLight(0xffffff, 1);
+                    dirLight.position.set(data.container.w, data.container.h * 2, data.container.d);
+                    scene.add(dirLight);
+
+                    // Draw Container Wireframe
+                    // Note: Three.js coordinates are usually centered. 
+                    // Our packing coordinates are from (0,0,0).
+                    // So we need to offset everything so (0,0,0) is at a corner or center the group.
+                    
+                    const cw = data.container.w;
+                    const ch = data.container.h;
+                    const cd = data.container.d;
+
+                    const geometry = new THREE.BoxGeometry(cw, ch, cd);
+                    const edges = new THREE.EdgesGeometry(geometry);
+                    const line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({ color: isDark.value ? 0xffffff : 0x000000 }));
+                    
+                    // Center of container is at (cw/2, ch/2, cd/2) in our packing logic
+                    // In Three.js BoxGeometry is centered at (0,0,0)
+                    // So we place the wireframe at (0,0,0) and move our items relative to it?
+                    // No, easier to place wireframe at (0,0,0) and represent that as center.
+                    // Then item at (x,y,z) with size (w,h,d) needs to be mapped to Three.js world.
+                    
+                    // Let's treat (0,0,0) of Three.js world as the Center of the Container bottom face? 
+                    // Or just Center of Container Volume.
+                    
+                    line.position.set(0, ch/2, 0); // Lift up so bottom is at y=0 if we assume floor is 0?
+                    // Actually, let's keep it simple: Center everything around (0,0,0)
+                    // Container center: (0,0,0)
+                    // Container bottom-left-back: (-cw/2, -ch/2, -cd/2)
+                    
+                    scene.add(line);
+
+                    // Add Axes
+                    const axesHelper = new THREE.AxesHelper(Math.max(cw,ch,cd)/2 + 100);
+                    scene.add(axesHelper);
+
+                    // Draw Packed Items
+                    const offset = { x: -cw/2, y: -ch/2, z: -cd/2 };
+
+                    data.items_packed.forEach(item => {
+                        const geometry = new THREE.BoxGeometry(item.w, item.h, item.d);
+                        const material = new THREE.MeshLambertMaterial({ 
+                            color: item.color, 
+                            opacity: 0.9, 
+                            transparent: true 
+                        });
+                        const mesh = new THREE.Mesh(geometry, material);
+                        
+                        // Edges for item
+                        const itemEdges = new THREE.EdgesGeometry(geometry);
+                        const itemLine = new THREE.LineSegments(itemEdges, new THREE.LineBasicMaterial({ color: 0x000000, linewidth: 1 }));
+                        mesh.add(itemLine);
+
+                        // Position
+                        // Item x,y,z is bottom-left-back corner in packing logic.
+                        // Three.js mesh position is center of mesh.
+                        mesh.position.set(
+                            offset.x + item.x + item.w/2,
+                            offset.y + item.y + item.h/2,
+                            offset.z + item.z + item.d/2
+                        );
+
+                        scene.add(mesh);
+                    });
+
+                    // Adjust Camera
+                    const maxDim = Math.max(cw, ch, cd);
+                    camera.position.set(maxDim * 1.5, maxDim * 1.2, maxDim * 1.5);
+                    controls.target.set(0, 0, 0);
+                    controls.update();
+                };
+
+                const animate = () => {
+                    requestAnimationFrame(animate);
+                    controls.update();
+                    renderer.render(scene, camera);
+                };
+
+                onMounted(() => {
+                    // Load from LocalStorage
+                    const savedContainer = localStorage.getItem('slp_container');
+                    if (savedContainer) container.value = JSON.parse(savedContainer);
+                    
+                    const savedItems = localStorage.getItem('slp_items');
+                    if (savedItems) items.value = JSON.parse(savedItems);
+
+                    initThree();
+                    window.addEventListener('resize', initThree);
+                });
+
+                // Persistence
+                watch(container, (newVal) => {
+                    localStorage.setItem('slp_container', JSON.stringify(newVal));
+                }, { deep: true });
+
+                watch(items, (newVal) => {
+                    localStorage.setItem('slp_items', JSON.stringify(newVal));
+                }, { deep: true });
+
+                return {
+                    isDark, toggleDark,
+                    container, items,
+                    loading, result,
+                    addItem, removeItem,
+                    calculate, totalItemsCount
+                };
+            }
+        }).mount('#app');
+    </script>
+</body>
+</html>