NEWn1n v2.0.1 is live! Enterprise Unified LLM API Gateway with 500+ AI Models, up to 90% off, Try now

Building a 63,000-Word Interactive Flipbook with Qwen 4 Preview

Authors
  • avatar
    Name
    Nino
    Occupation
    Senior Tech Editor

When a new flagship model appears, the usual first tests are familiar: ask it a hard reasoning question, throw a coding benchmark at it, or have it build a small app. I wanted to try something less tidy. When building production-ready applications with high-performance LLMs, developers often rely on reliable infrastructure like n1n.ai to handle high-throughput API calls seamlessly.

I gave Qwen 4 Preview a project with several kinds of work tangled together: write a complete children's mystery, create a consistent illustration system for it, and turn the result into an interactive book that actually works in a browser.

The output was:

  • A 63,258-word novel across 40 chapters.
  • 42 SVG illustrations built around a reusable library of nine characters.
  • A single-file, 652-page HTML flipbook.
  • A headless browser run that reported zero runtime errors and zero text overflow.

The run took about 1 hour and 42 minutes and involved 242 assistant turns. I ran the model through Jouzu, a coding-agent harness. The source repository contains the prompts and generated artefacts.

The Project Structure: Pip Parker and the Bureau of Lost Things

This isn't a benchmark, and I'm not claiming that one run settles anything about the model. It is a practical look at how Qwen 4 Preview handled a long-running task where the requirements had to survive across multiple stages.

The project is called Pip Parker and the Bureau of Lost Things. Pip is a boy who labels everything. When his brother's stuffed dinosaur goes missing, the trail leads to a bureaucratic animal office that files the town's lost things. There's a mystery to solve, a set of clues to pay off, and a midpoint reframe: the apparent thief isn't saving things; he's stealing them—wait, the other way around.

A children's mystery makes a useful stress test because continuity failures are easy to spot. A character can't suddenly know something they haven't learned. An object can't be in two places at once. A clue introduced early has to matter later. And the ending has to resolve what the opening set in motion.

Then I added two more layers:

  1. Visuals: The book needed illustrations, but not 42 unrelated images. It needed a consistent visual language: nine reusable characters, an eight-colour palette, and SVG artwork that reused the same character definitions.
  2. Interaction: Finally, it needed to become a real reading experience. Not a PDF export or a long HTML page, but a flipbook with page turns, navigation, bookmarks, and controls.

Constraints and Specifications

I deliberately made the brief specific. I didn't want the model to decide halfway through that 20 chapters were enough, change the cast, or quietly simplify the illustration requirements. If you are experimenting with complex workflows using advanced models via n1n.ai, strict prompt engineering and parameter tuning are crucial for maintaining consistency.

The novel specification called for:

  • 40 chapters, each between 1,400 and 1,700 words.
  • A target of roughly 60,000 words.
  • A fixed cast and timeline.
  • Five explicit plant-and-payoff pairs.
  • A continuity ledger tracking day-by-day events and object ownership.
  • A fixed final sentence.
  • Kid-safe content rules: no death or gore, and a lonely rather than evil antagonist.

The illustration brief was equally constrained:

  • A nine-character SVG library.
  • A locked eight-colour palette.
  • One cover illustration and one illustration for each of the 40 chapters.
  • The same SVG definitions reused across the plates.

Execution and Verification Loop

The important thing is the feedback loop:

Build -> Run -> Inspect -> Fix -> Run again

The browser provides evidence from the running application, not just an assessment generated from the source code. A page can look plausible in code and still clip text. A control can exist in the DOM and do nothing useful. A bookmark can appear to work until the page is refreshed. Running the application makes those problems observable.

For developers integrating multi-step reasoning pipelines, utilizing robust endpoints on platforms like n1n.ai guarantees low latency and high availability during intensive execution loops.

Summary Metrics

MetricResult
Novel63,258 words
Chapters40
Chapter length1,400-1,700 words
Illustrations42 SVGs
Reusable character library9 characters
Colour palette8 colours
Flipbook652 pages
Final application1 HTML file
HTML file size~975 KB
Wall-clock time~1 hour 42 minutes
Assistant turns242
Output tokens~256K
Reasoning tokens~106K
Headless runtime errors0
Text overflow0

Key Takeaways

  • A good brief is a form of project management: Fixed requirements, explicit dependencies, and measurable constraints gave the agent a target that could be checked.
  • Long context isn't the same as reliable state: The project needed explicit continuity information. A model having a large context window doesn't automatically mean it will maintain every detail correctly across a long task.
  • Reusable structures are more reliable than repeated instructions: The SVG character library made visual consistency part of the implementation rather than a recurring request.
  • Tool use is only half the story: Feedback is the other half. Giving an agent access to a browser is useful. Having it run the application, inspect the result, and correct problems is much more useful.

Get a free API key at n1n.ai