Inspiration
I enjoy long-form comics, but reading them can be difficult when you are tired, commuting, or just want to relax without constantly scrolling.
That gave me the idea for Panels Aloud: turn any comic page into a hands-free, video-like reading experience.
What it does
Panels Aloud takes a long comic chapter and turns it into an audio-guided experience.
It creates a narration script, generates the voice audio, matches the audio with the comic panels, and automatically scrolls through the page while the narration is playing.
This lets you enjoy the comic without constantly touching or scrolling the screen.
How I built it
The project has a FastAPI backend and a browser-extension frontend.
I used GPT-5.6 to generate the narration script from the comic chapter.
I used GPT-4o mini TTS to turn the script into spoken audio.
I then used OpenAI Whisper to help match the narration timing with the script and the comic panels, so the page can scroll at the correct time.
Codex helped me build the application, understand web-development concepts that were new to me, connect the backend and browser extension, and debug problems throughout development.
Challenges
One of the biggest challenges was matching the narration with the correct place on a very long comic page.
Comic chapters can have different panel sizes, layouts, speech bubbles, and spacing, so the system has to understand where each part of the story appears.
Another challenge was making the automatic scrolling feel natural instead of moving too early or too late.
What I learned
My background is mainly in data analysis, and before this project I wrote most of my code in notebooks.
This project taught me much more about building a complete application, including APIs, browser extensions, frontend and backend communication, audio processing, and working with AI models as part of a real product.
Using Codex helped me move much faster and build things that would have been difficult for me to create before.
What's next
I want to improve the panel detection and timing, support more comic websites, add more narration options, and eventually bring the same experience to mobile devices.
Built With
- chrome
- css
- extension
- fastapi
- gpt-4o-mini-tts
- gpt-5.6
- html
- javascript
- openai
- openai-api
- python
- whisper
Log in or sign up for Devpost to join the conversation.