Refactor CSS into separate file, add size selector and prompt clear button

- Extract styles.css from inline <style> in flux-index.html
- Add image size selector with 9 preset aspect ratios (standard + XL)
- Add clear (✕) button in prompt input field
- Pass width/height to Flux pipeline API endpoint

api.py

@@ -3,7 +3,8 @@ import base64
 from io import BytesIO
 from fastapi import FastAPI, HTTPException
 from fastapi.middleware.cors import CORSMiddleware
-from pydantic import BaseModel
+from pydantic import BaseModel, model_validator
+from typing import Any
 import torch
 from diffusers import FluxPipeline
 
@@ -33,6 +34,20 @@ pipe.vae.enable_tiling()
 class ImageRequest(BaseModel):
     prompt: str
     model: str = "flux-schnell"
+    width: int = 1024
+    height: int = 1024
+
+    @model_validator(mode="before")
+    @classmethod
+    def validate_dimensions(cls, data: Any) -> Any:
+        if isinstance(data, dict):
+            width = data.get("width", 1024)
+            height = data.get("height", 1024)
+            if width % 32 != 0 or height % 32 != 0:
+                raise ValueError("Width and height must be multiples of 32")
+            if width > 2048 or height > 2048:
+                raise ValueError("Maximum width and height is 2048")
+        return data
 
 @app.post("/v1/images/generations")
 async def generate(request: ImageRequest):
@@ -42,6 +57,8 @@ async def generate(request: ImageRequest):
             guidance_scale=0.0,
             num_inference_steps=4,
             max_sequence_length=256,
+            width=request.width,
+            height=request.height,
         ).images[0]
 
         buffered = BytesIO()