Back to Blog

【AI-coding】easy epub online reader

by 无光の闇

https://miumiureading.netlify.app/

blog29_1

Using AI to make handy little tools is becoming more and more effortless now.

This time, I used AI to build an online EPUB reader.

Recently, I've been reading the novel A Step into the Past (寻秦记). It took me forever just to find a version without typos.

I have to say, the crowd of "web scrapers" on the internet never care about the quality of resources. If one version has a typo, a whole bunch of other versions will have the exact same mistake. Even the top result on Google search couldn't escape this.

After much effort, I finally found a good one on Haodoo, which has no typos. I even cross-checked it across multiple sources.

https://www.haodoo.net/?M=book&P=69#gsc.tab=0

After getting the EPUB file, the next step was to look at my own [scenarios].

First, I need to be able to read it on my phone, since reading a bit before going to sleep is quite nice.

Second, I also want to read it when I am using my computer. So the reader needs to be responsive.

I did a quick search, and for the top three results that popped up, either the functions were buried too deep (for example, to change the font size you have to click settings, then click font, and then adjust it), or they lacked the features I wanted (for example, the one ranked second didn't have the background color I wanted. Black text on a white background hurts the eyes; I wanted that light green color). It's clear that even independent sites cannot be fully [personalized].

But nowadays, writing a website is incredibly simple.

First, I used Gemini to write a version, but found it had issues with online reading capability. So I synthesized a solution using GPT, and in the end, it resolved the issue.

Then, I optimized the tap-to-flip hitboxes and the table of contents function. I also embedded my book directly into the frontend page, so there's no need for a database to store and retrieve my files. I have to say, if it's just for personal use, this method is highly suitable.

However, while creating this simple online EPUB reader, another idea sprouted in my mind.

What if we could combine AI with the structure of the webpage itself, allowing users to revamp the page at any time without touching the backend? Wouldn't that mean anyone could have the exact tool they want?

So I gave it a try, and it actually works.

https://ops-factory-xi.vercel.app/pages/newuitest/index.html

For instance, on this page, it's all for the user "abai". Originally, version 1.0 didn't have a sorting feature. But by chatting with the AI assistant in the bottom right corner, the AI processed the code, allowing this user to have a sequential sorting function. Meanwhile, other users still keep their own original interfaces.

blog29_2

blog29_3

Handling it this way allows the webpage to be bound to the user themselves.

  1. Every website, while keeping its core logic unchanged, can adapt to the independent needs of each user.

  2. There's no need for so many frontend developers to maintain it.

  3. Users can also share with each other.

Letting the user decide the interaction process of the website.

This can also be called: generating deformable websites through interactive AI.

I believe this is the characteristic of webpages in the next era. Universal personalization, based on the principle of "unchanging core, ever-changing interaction," will eventually become a reality.