Mokuro: Read Japanese manga with selectable text inside a browser

The mokuro file is just JSON with a pages array with position and content of all the OCR’d text bubbles. I didn’t find any documentation for it, but it’s pretty self-describing – I think it’s basically the same data that was originally bundled into the generated html.

I think it’s an improvement, design-wise because it allows for decoupling the converted manga and the viewer app (or other tools), and you can do things like throw all the page images plus the .mokuro file in a .zip and have a convenient package. reader.mokuro.app will ingest these and stow everything in localStorage in your browser.

My little viewer thing is able to open a .mokuro file and use it to let you flip through pages, see the OCR’d data, etc. Should be pretty straightforward to hold on to any edits in localStorage and allow one to save a modified .mokuro file back out again – at least that’s what I’m aiming for.

2 Likes

I use Dropbox and can open the same mokuro files on my laptop or computer that :slight_smile: (don’t use it on mobile though) (I do lose the progress between devices but I don’t use that anyway)

1 Like

ah, bummer. If you (or anyone else) comes across the fork with progress saving lmk. That’s definitely something I’d poke around at to get to work for me.

Since the progress is in local storage, it doesn’t seem like this will work, but also, duh :woman_facepalming:t4: This is at least a good reminder for some of the other things I might want to do in the future.

This might end up being the easiest solution for my use case. I track my progress on Natively anyway so I could just grab my last read page from there if I needed to to switch devices. It’s not the most elegant solution, but it does solve my problems.

Thanks for the help, all!

2 Likes

You could give this a try. It’s been my personal project, so I’ve made it with my own reading preferences in mind, but who knows, they might overlap with yours.

A big thanks to @ChristopherFritz, by the way. Seeing your awesome projects in this thread back in March 2023 inspired me to start learning how to program. I never would have guessed that I would be starting a job as a web developer 1.5 years later :exploding_head: So I guess you changed my life :wink:

3 Likes

Wow that looks amazing.
I dislike dealing with Docker (I’m old) but I may need to put on my big girl pants to check it out.

2 Likes

I’ve cleaned up the steps that I use to have infinite scrolling, it’s really only down to 2 copy / paste :slight_smile: (this post, which is also the post I am replying to)

3 Likes

Today, my mokuro did something weird :joy_cat:

Here’s the command I executed:

Anyone has experienced this? I’m scared to stop the process lol

This happens when the console window you are running Mokuro in is under a certain width. Stretch it out wider, and it will “fix” itself. But there’s no harm when it’s looking crazy like that. It’s just a progress bar display issue.

2 Likes

Oh all right! Thank you for this. Although it used to be a single progress bar and suddenly it just started breaking into those percentages.


Just curious, what does disable gpu parameter do? Like what’s its impact? Is it on how long the whole process finishes?

–force_gpu

Instead of doing the calculations on your gpu, which is ways faster, it will do them on your cpu

1 Like

The progress bar repeating across lines is another sign that the window is too small to display correctly (but it’s still not an issue).

But making it even wider should get it back to only one progress bar.

As for why a certain width may give a single progress bar, and other times the same width gives the wild output, I don’t know.

1 Like

I’ve seen some updates to processed mokuro files … places… Including having mobile specific html files and other options that I don’t get in my output. Is this just a matter of me running older than dirt mokuro? Me not knowing about options that I can run? Another fork? :slightly_smiling_face:

Sorry if this is answered before, I could not find it. When I run the screenshot-simulator the first three pages works, and then I get this error:

“Uncaught SecurityError: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported.
at DownloadPage (:21:26)
at :52:9”

Any tips?

Edit: Tried different browsers, devices and incognito. Still doesn’t work :frowning:

Edit: Tried again, no changes made but it now works :slight_smile:

1 Like
dokugaku

Hey! I’m trying to set up Dokugaku because it looks amazing, but I’m pretty dumb and I’m struggling with basic install.

I’m on an iMac with Sonoma 14.6

These are the listed instructions on github:

  1. Make sure you have Docker installed. – :white_check_mark: done

  2. Click on the green ‘Code’ button in the top right and download the ZIP file. – :white_check_mark: done

  3. Use your text editor of choice to create a file named .env inside of the dokugaku folder you just unzipped. It should contain the following variables… – :man_shrugging: This is where it starts to get wiggly. When I save the text file as .env in the dokugaku folder the file just disappears. I know I’ve made it, my text editor knows that I last saved something in the dokugaku folder, but it’s not visibly there. I tried this with the built-in text editor on Mac as well as with the Sublime text editor. They both disappear, but I’m simply trusting that it’s “there”.

  4. Use your terminal of choice to navigate to the dokugaku folder and run docker compose up. – :x: There isn’t a file called docker compose up that I can find, and the two docker compose files are .yaml which simply opens up my text editor. I’m not sure how I’d run this?

I’m a true layman and all of this is above me. If you have any guidance here I’d love to know my next steps :pray:

Dokugaku

Ahhh ok, that is a good point about the disappearing file, I could’ve added a bit more info there. It’s a standard behaviour of macOS to hide files starting with a dot. Those are usually the kind of system files or configuration files a layman doesn’t need to see. You can show them like this.

As for running docker compose up:

  1. Open your Terminal
  2. Type cd (with the space at the end)
  3. In Finder, find your Dokugaku folder and drag it into the Terminal
  4. That should print the path to the folder in there. It now says something like cd /Users/taiyousea/path/to/dokugaku Hit enter.
  5. Then type docker compose up and hit enter.

Let me know if this helps. I’ll update the instructions accordingly. Thanks for being a guinea pig :grin:

EDIT: Considering your status as a layman, I thought it’d also be good to point out where you can find the logs. Not sure if you’re using Orbstack or Docker Desktop, but the principle is similar. Once you’ve got the containers up and running, you can select the work-processor container and click on ‘Logs’. That should allow you to keep tabs on how a work upload is going.

You can also use the Orbstack or Docker Desktop app to pause the containers when you’re not using Dokugaku. In the case of Orbstack, you see a square ‘stop’ button beside the ‘dokugaku’ container group. Alternatively, you can individually turn off containers you’re not using. For example, if you’re not uploading anything but only want to use Dokugaku to read, you can turn off ichiran, ichiran-db, mokuro and work-processor.

I cloned your mokuro fork repository and installed it using pip install. Then I cloned the mokuro bookshelf repository, but when I open the Bookshelf.html file it doesn’t show any manga, am I doing something wrong?

You’ll need to do two things for a manga to show up in the bookshelf page:

  1. Run it through my fork of Mokuro. If you’ve already run a manga volume through the main Mokuro, you can delete the HTML file for the volume, then run my fork of Mokuro to re-generate the HTML file with extra Javascript included.

  2. Open the HTML file.

(Re)load the bookshelf file, and it should show the manga volume.

The big caveat is that it doesn’t work in Firefox. (I’m not sure about Safari.)

1 Like

Probably when I cloned the modified version of mokuro using git clone repository-url it was downloading the most current version of the original mokuro, so I cloned it using git clone -b mokuro-bookshelf repository-url and it worked.

Thanks a lot! This bookshelf feature is very useful!

1 Like

Hello, I spent the afternoon making this work on Mac (I don’t know why, getting python on my windows didn’t work) anyway, it was a hassle since I know nothing about programming or coding so this thread came in handy!
The only problem I am facing when uploading my zip file is "missing .mokuro file but I can’t understand how to get that, maybe I missed a step??
Thank you in advance for reading this late post

I assume you mean uploading to reader.mokuro.app? There are a couple different ways to read the files so just checking. If you haven’t already, check out this guide.

If you are using a latest version of mokuro one of the generated files should be a .mokuro file. That is what it is referring to. If you are only getting _ocr and .html (or sometimes also .html.mobile) you may have installed either an older version or a different fork of the code. That or it’s an issue with Macs, I don’t have much experience with them. The good news is that so long as you have the _ocr rerunning with different versions is super duper quick since the legwork has already been done.

(As for python in windows, if you didn’t check “add to path” during install, that it probably the most common issue, with the second being not installing pip3 after)

1 Like