feat: implement frontend API service and image constraint components for model server management

app/frontend/src/App.jsx

@@ -106,6 +106,8 @@ function App() {
     useTaesd: true,
     useFlashAttn: true,
     useTiling: false,
+    vaeTiling: true,
+    vaeOnCpu: false,
     threads: 4,
     backendType: "auto",
   });

app/frontend/src/components/ImageConstraints.jsx

@@ -291,6 +291,54 @@ function ImageConstraints({ constraints, setConstraints, activeModel, specs, bac
                   </div>
                 )}
               </div>
+
+              <div className="m3-text-field" style={{ marginTop: "20px" }}>
+                <label className="m3-text-field-label">Memory Optimization (GPU VRAM)</label>
+                
+                <div style={{ display: "flex", flexDirection: "column", gap: "14px", marginTop: "10px" }}>
+                  <label style={{ display: "flex", alignItems: "flex-start", gap: "10px", cursor: "pointer", fontSize: "0.85rem" }}>
+                    <input
+                      type="checkbox"
+                      checked={constraints.vaeTiling !== false}
+                      onChange={(e) => updateConstraint("vaeTiling", e.target.checked)}
+                      style={{
+                        width: "16px",
+                        height: "16px",
+                        marginTop: "3px",
+                        accentColor: "var(--md-sys-color-primary)",
+                        cursor: "pointer"
+                      }}
+                    />
+                    <div>
+                      <strong style={{ color: "var(--md-sys-color-on-surface)" }}>Enable VAE Tiling</strong>
+                      <div style={{ fontSize: "0.75rem", color: "var(--md-sys-color-outline)", marginTop: "2px", lineHeight: 1.35 }}>
+                        Processes VAE decoding in smaller tiles. Drastically reduces VRAM usage (from 2GB+ down to ~100MB) with no speed loss. Highly recommended for GPUs with 4GB-6GB VRAM.
+                      </div>
+                    </div>
+                  </label>
+
+                  <label style={{ display: "flex", alignItems: "flex-start", gap: "10px", cursor: "pointer", fontSize: "0.85rem" }}>
+                    <input
+                      type="checkbox"
+                      checked={constraints.vaeOnCpu === true}
+                      onChange={(e) => updateConstraint("vaeOnCpu", e.target.checked)}
+                      style={{
+                        width: "16px",
+                        height: "16px",
+                        marginTop: "3px",
+                        accentColor: "var(--md-sys-color-primary)",
+                        cursor: "pointer"
+                      }}
+                    />
+                    <div>
+                      <strong style={{ color: "var(--md-sys-color-on-surface)" }}>Run VAE on CPU</strong>
+                      <div style={{ fontSize: "0.75rem", color: "var(--md-sys-color-outline)", marginTop: "2px", lineHeight: 1.35 }}>
+                        Offloads the heavy VAE decoder computation from GPU VRAM to system memory (RAM). Saves ~2GB of VRAM, but makes the final decoding stage slightly slower.
+                      </div>
+                    </div>
+                  </label>
+                </div>
+              </div>
             </div>
           </div>
         </div>

app/frontend/src/services/api.js

@@ -233,6 +233,8 @@ export async function startServer(modelPath, constraints) {
         threads:  constraints.threads  || 8,
         use_gpu:  constraints.useGpu !== false,
         backend_type: constraints.backendType || (constraints.useGpu === false ? "cpu" : "auto"),
+        vae_tiling: constraints.vaeTiling !== false,
+        vae_on_cpu: constraints.vaeOnCpu === true,
       }),
     });
     const text = await res.text();