Fix Gradio UI readability, layout and playback controls in read-along app
Session from read-along-ai-agent-traces on Hugging Face by kingkw1 · MIT · condensed by Coders Talk
Iteratively fix a Gradio-based reading app's UI: text contrast, whitespace/layout issues, unwanted playback controls (speed, restart), and inference engine picker styling, then merge the branch into main.
- +0Prompt · +0Fix sentence text color, mic box overlapping playback, and unreadable feedback text contrast.
- +0mAgent did · +0mInspected app.py CSS/rendering, made sentence text opaque black, hid mic device labels, fixed feedback card contrast; tests pass (32 passed, 2 skipped).
- +7mPrompt · +7mTighten whitespace around sentence/buttons, fix inference engine text color, and remove skip/restart/speed playback buttons.
- +7mAgent did · +7mMultiple rounds tightening CSS margins/min-heights, hiding recorder controls by label/position, and adjusting engine toggle colors; each round only partially fixed the reported issues.
- +27mAgent did · +27mReplaced Gradio's built-in radio with custom visible buttons for engine selection to escape persistent styling conflicts; broadened audio control hiding logic with region-based and parent-climbing selectors.
- +38mFail · +38mAdded CSS overlay patches and repeated DOM scanning to hide stubborn speed/restart controls, but this caused the app to crash/time out and hide the Record button in Firefox.
- Break · 30m away, not counted
- +41mIntervention · +41mReported the app keeps timing out/crashing and the record button is missing.Why: The last overlay/interval approach broke the app entirely - I needed it stable again even if the speed/restart buttons stayed visible.
- +41mAgent did · +41mRemoved the risky overlay/interval DOM-scanning code, diagnosed that page load was also triggering heavy VoxCPM prewarming causing perceived crashes, and disabled prewarm on load.
- +52mIntervention · +52mReported losing VoxCPM word voices, slower sentence listening, and the 'fast word help' indicator after the prewarm fix.Why: Removing prewarm entirely fixed stability but broke functionality I actually wanted - needed a middle ground that delays rather than removes it.
- +53mAgent did · +53mRestored word prewarming via a delayed one-time timer instead of on page load, then resolved git merge conflicts between the feature branch and main (engine defaults, Modal credential guard), landing a merge commit with 36 passed, 2 skipped tests.
- +1h 10mOutcome · +1h 10mMerge commit eea76e5 created, branch ahead of origin by 5 commits, 36 tests passed / 2 skipped, ready to push.
I'd start by asking for a real browser-based inspection (Playwright/DOM dump) from the very first CSS complaint instead of letting the agent guess at selectors screenshot by screenshot - that back-and-forth ate most of the session. The intervention that actually mattered was flagging the app crashing/hiding the Record button, which forced the agent to rip out its overly aggressive DOM-scanning overlay hack and find the real culprit (prewarm on page load) instead of layering on more hacks.