Implement asset upload API and utility functions

- Add Asset and CardLayer model updates
- Create asset upload API endpoints
- Add AssetUploadDialog component
- Create card layout algorithms
- Implement symmetry generation utils
- Add template configurations

frontend/src/utils/symmetry.js

@@ -0,0 +1,81 @@
+import { fabric } from 'fabric'
+
+export async function createSymmetricalImage(originalImage, canvasWidth, canvasHeight) {
+  const imgWidth = originalImage.width
+  const imgHeight = originalImage.height
+  const halfHeight = imgHeight / 2
+
+  const topHalf = new fabric.Image(originalImage, {
+    clipPath: new fabric.Rect({
+      width: imgWidth,
+      height: halfHeight,
+      originX: 'left',
+      originY: 'top'
+    }),
+    top: 0,
+    scaleX: canvasWidth / imgWidth,
+    scaleY: (canvasHeight / 2) / halfHeight
+  })
+
+  const bottomHalf = new fabric.Image(originalImage, {
+    clipPath: new fabric.Rect({
+      width: imgWidth,
+      height: halfHeight,
+      originX: 'left',
+      originY: 'top',
+      top: halfHeight
+    }),
+    top: canvasHeight / 2,
+    scaleX: canvasWidth / imgWidth,
+    scaleY: -(canvasHeight / 2) / halfHeight,
+    flipY: true
+  })
+
+  const group = new fabric.Group([topHalf, bottomHalf], {
+    left: 0,
+    top: 0,
+    width: canvasWidth,
+    height: canvasHeight
+  })
+
+  return group
+}
+
+export async function loadAndProcessImage(imageUrl) {
+  return new Promise((resolve, reject) => {
+    fabric.Image.fromURL(imageUrl, (img) => {
+      if (!img) {
+        reject(new Error('Failed to load image'))
+        return
+      }
+      resolve(img)
+    }, { crossOrigin: 'anonymous' })
+  })
+}
+
+export function applySymmetryToFaceCard(canvas, imageUrl, cardWidth, cardHeight) {
+  return new Promise((resolve, reject) => {
+    fabric.Image.fromURL(imageUrl, async (originalImage) => {
+      if (!originalImage) {
+        reject(new Error('Failed to load image'))
+        return
+      }
+
+      const symmetricalGroup = await createSymmetricalImage(
+        originalImage.getElement(),
+        cardWidth - 100,
+        cardHeight - 100
+      )
+
+      symmetricalGroup.set({
+        left: 50,
+        top: 50,
+        selectable: true
+      })
+
+      canvas.add(symmetricalGroup)
+      canvas.renderAll()
+      resolve(symmetricalGroup)
+    }, { crossOrigin: 'anonymous' })
+  })
+}