#3 Form state is lost when navigating between pages

Description

When setting up a generation job (e.g., img2img) and navigating to another page before starting the job, all form inputs are reset to their default values when returning to the original page.

Steps to Reproduce

1. Navigate to any generation page (e.g., /ui/img2img/)
2. Fill in form fields (prompt, negative prompt, dimensions, steps, etc.)
3. DO NOT start the generation
4. Navigate to another menu item (e.g., "Models" or "Queue")
5. Navigate back to the original page
6. All form inputs have been reset to default values

Expected Behavior

Form state should persist when navigating between pages, so users can:

• Switch pages to check queue status or load a model
• Return to their form and continue where they left off
• Not lose their work accidentally

Current Behavior

Navigation acts like a page refresh - all inputs revert to original state.

Proposed Solution

Implement form state persistence using one of these approaches:

• localStorage: Save form state to browser localStorage on change
• React Context: Use global state management to preserve form data
• URL parameters: Store critical params in URL query string
• SessionStorage: Similar to localStorage but clears on tab close

Recommended: localStorage with automatic saving on form change and restoration on page mount.

Impact

This is a significant UX issue that can frustrate users who accidentally lose their configured settings.

Components Affected

• /webui/app/text2img/page.tsx
• /webui/app/img2img/page.tsx
• /webui/app/upscaler/page.tsx

Fixed in commit e952506.

Solution Implemented: Created a custom React hook for localStorage-based form state persistence.

New File: /webui/lib/hooks.ts

• useLocalStorage<T>() - Hook that automatically saves/restores state to localStorage
• useAutoSave<T>() - Helper hook for debounced auto-saving

Implementation Applied To:

1. text2img page - Key: text2img-form-data

   • Persists: prompt, negative_prompt, width, height, steps, cfg_scale, seed, sampling_method, scheduler, batch_count

2. img2img page - Key: img2img-form-data

   • Persists: prompt, negative_prompt, image (base64), strength, steps, cfg_scale, seed, sampling_method

3. upscaler page - Key: upscaler-form-data

   • Persists: image (base64), upscale_factor, model

Behavior:

• ✅ Form state automatically saved on every change
• ✅ State restored when returning to the page
• ✅ Users can navigate away and return without losing work
• ✅ Works across browser sessions (persists until cleared)

Note: Large base64 images may hit localStorage limits (~5-10MB). This is documented in CLAUDE.md.