fix: wire humanization sliders to canvas and mock backend

Author: SarmaHighOnCode

backend/app/ml/llm_engine.py

@@ -491,9 +491,9 @@ async def _stream_mock(
                 cursor_y += line_height + random.uniform(-1.5, 1.5)
                 line_num += 1
 
-            # Baseline drift
-            global_drift = baseline_drift * 3.0 * math.sin(
-                2 * math.pi * line_num / 10.0 + random.uniform(0, 0.5)
+            # Baseline drift (Exaggerated for visual awareness in mock mode)
+            global_drift = baseline_drift * 8.0 * math.sin(
+                2 * math.pi * line_num / max(total_words / 5.0, 3.0) + random.uniform(0, 0.5)
             )
 
             char_x = cursor_x

frontend/src/App.jsx

@@ -54,6 +54,7 @@ function App() {
     const [error, setError] = useState(null);
     const [charCount, setCharCount] = useState(0);
     const [inkColor, setInkColor] = useState("black");
+    const [strokeWidth, setStrokeWidth] = useState(0.5);
 
     const canvasRef = useRef(null);
     const abortRef = useRef(null);
@@ -116,7 +117,7 @@ function App() {
                     character_inconsistency: f.character_inconsistency,
                     slant_angle: f.slant_angle,
                     baseline_drift: f.baseline_drift,
-                    ink_bleed: f.ink_bleed,
+                    fatigue_simulation: f.ink_bleed, // map the UI slider
                     ligature_enabled: f.ligature_enabled,
                 },
                 paper_texture: f.paper_texture,
@@ -165,9 +166,11 @@ function App() {
     const setField = (key) => (e) => {
         const val = e.target.type === "checkbox" ? e.target.checked : e.target.value;
         formRef.current[key] = e.target.type === "range" ? parseFloat(val) : val;
-        // Sync ink color to state so CanvasBoard gets the updated value
+        // Sync visual styles to state so CanvasBoard gets the updated value
         if (key === "ink_color") {
             setInkColor(val);
+        } else if (key === "stroke_width_variation") {
+            setStrokeWidth(parseFloat(val));
         }
     };
 
@@ -338,20 +341,20 @@ function App() {
                         </div>
                     )}
 
-                    {/* Canvas Area */}
-                    <div
-                        className="flex-1 flex items-start justify-center rounded-xl p-6"
-                        style={{
-                            background: "var(--bg-secondary)",
-                            border: "1px solid var(--border-subtle)",
-                        }}
-                    >
-                        <CanvasBoard
-                            ref={canvasRef}
-                            width={800}
-                            height={600}
-                            inkColor={inkColor}
-                        />
+                    {/* ─── Canvas Area ─── */}
+                    <div className="flex-1 p-6 flex flex-col items-center justify-center relative overflow-hidden">
+                        <div
+                            className="w-full max-w-[900px] h-[600px] shadow-2xl transition-all duration-300 relative flex items-center justify-center"
+                            style={{ background: formRef.current?.paper_texture === "blank" ? "#fefefe" : "#f4f4f4" }}
+                        >
+                            <CanvasBoard
+                                ref={canvasRef}
+                                width={900}
+                                height={600}
+                                inkColor={inkColor}
+                                strokeWidthVariation={strokeWidth}
+                            />
+                        </div>
                     </div>
                 </main>
             </div>

frontend/src/components/CanvasBoard.jsx

@@ -23,7 +23,7 @@ const DEFAULT_WIDTH = 800;
 const DEFAULT_HEIGHT = 600;
 
 const CanvasBoard = forwardRef(function CanvasBoard(
-    { width = DEFAULT_WIDTH, height = DEFAULT_HEIGHT, inkColor = "black" },
+    { width = DEFAULT_WIDTH, height = DEFAULT_HEIGHT, inkColor = "black", strokeWidthVariation = 0.5 },
     ref
 ) {
     const canvasRef = useRef(null);
@@ -32,6 +32,12 @@ const CanvasBoard = forwardRef(function CanvasBoard(
     // Mutable cursor position — never triggers a render
     const cursorRef = useRef({ x: 40, y: 40 });
 
+    // Helper to calculate line width
+    const getLineWidth = (variation) => {
+        // Map 0-1 variation to 1.0 - 2.8 context line width
+        return 1.0 + (variation * 1.8);
+    };
+
     // Initialize canvas context once on mount or when dimensions change
     useEffect(() => {
         const canvas = canvasRef.current;
@@ -40,23 +46,24 @@ const CanvasBoard = forwardRef(function CanvasBoard(
         const ctx = canvas.getContext("2d");
         ctx.lineCap = "round";
         ctx.lineJoin = "round";
-        ctx.lineWidth = 1.8;
+        ctx.lineWidth = getLineWidth(strokeWidthVariation);
         ctx.strokeStyle = INK_COLORS[inkColor] || INK_COLORS.black;
         ctxRef.current = ctx;
 
         // Start with a clean slate
         ctx.clearRect(0, 0, width, height);
         ctx.beginPath();
         ctx.moveTo(cursorRef.current.x, cursorRef.current.y);
-    }, [width, height]); // Note: inkColor excluded - handled separately
+    }, [width, height]); // Exclude style paints so we don't clear midway
 
-    // Update ink color without clearing canvas
+    // Update styling properties dynamically without clearing canvas
     useEffect(() => {
         const ctx = ctxRef.current;
         if (ctx) {
             ctx.strokeStyle = INK_COLORS[inkColor] || INK_COLORS.black;
+            ctx.lineWidth = getLineWidth(strokeWidthVariation);
         }
-    }, [inkColor]);
+    }, [inkColor, strokeWidthVariation]);
 
     // Expose imperative methods to parent via ref
     useImperativeHandle(