Update src/App.jsx

src/App.jsx

@@ -32,6 +32,9 @@ const App = () => {
   const [selectedVae, setSelectedVae] = useState("Default");
   const [selectedUpscaler, setSelectedUpscaler] = useState("None");
   
+  // Settings
+  const [width, setWidth] = useState(1024);
+  const [height, setHeight] = useState(1024);
   const [steps, setSteps] = useState(30);
   const [cfgScale, setCfgScale] = useState(7.0);
   const [seed, setSeed] = useState(-1);
@@ -146,7 +149,9 @@ const App = () => {
       else if (upscaleFactor > 1) upscalerValue = upscaleFactor.toString();
 
       const payload = {
-        prompt, negative_prompt: negPrompt, steps, cfg_scale: cfgScale, seed,
+        prompt, negative_prompt: negPrompt, 
+        width, height, // Gửi kích thước ảnh
+        steps, cfg_scale: cfgScale, seed,
         sampler_name: sampler, checkpoint: selectedCheckpoint, lora: selectedLora,
         vae: selectedVae, upscaler: upscalerValue, upscale_strength: upscaleStrength
       };
@@ -271,6 +276,24 @@ const App = () => {
 
             {showAdvanced && (
               <div className="p-4 border-t border-slate-800 bg-slate-950/30 space-y-4 animate-in slide-in-from-top-2">
+                {/* Size Sliders */}
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <label className="text-[10px] uppercase text-slate-500 font-bold mb-1 block">Width: {width}px</label>
+                    <input 
+                      type="range" min="512" max="1536" step="64" value={width} onChange={(e) => setWidth(Number(e.target.value))}
+                      className="w-full h-1 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-purple-500"
+                    />
+                  </div>
+                  <div>
+                    <label className="text-[10px] uppercase text-slate-500 font-bold mb-1 block">Height: {height}px</label>
+                    <input 
+                      type="range" min="512" max="1536" step="64" value={height} onChange={(e) => setHeight(Number(e.target.value))}
+                      className="w-full h-1 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-purple-500"
+                    />
+                  </div>
+                </div>
+
                 {/* Steps & CFG */}
                 <div className="space-y-3">
                     <div className="flex justify-between text-[10px] uppercase text-slate-500 font-bold"><span>Steps: {steps}</span><span>CFG: {cfgScale}</span></div>