comic-ocr-reader 0.0.2__py3-none-any.whl

comic_ocr_reader/filepaths.py

@@ -0,0 +1,3 @@
+from pathlib import Path
+
+PROJECT_FOLDER: Path = Path(__file__).parent.parent

comic_ocr_reader/functions/__init__.py

@@ -0,0 +1,58 @@
+from datetime import datetime
+from pathlib import Path
+
+from PIL import Image
+from easyocr import Reader
+from manga_ocr import MangaOcr
+
+from comic_ocr_reader.html_utils import Textbox, Page
+from comic_ocr_reader.img_utils import merge_textboxes_easyocr
+
+def process_page(
+        manga: dict[int, Page],
+        filepath: Path,
+        detector: Reader,
+        recogniser: MangaOcr,
+        page_num: int
+) -> None:
+
+    result = detector.detect(str(filepath))
+    with Image.open(filepath) as img:
+        textboxes: list[Textbox] = []
+        width, height = img.size
+
+        count: int = 0
+        page: Page = Page(
+            img_filepath=f"{filepath.stem}{filepath.suffix}",
+            page_num=page_num,
+            page_class="page"
+        )
+        merged_regions: list[list[int]] = merge_textboxes_easyocr(
+            result[0][0],
+            padding=1
+        )
+        for item in merged_regions:
+            count += 1
+            nums: list[int] = []
+            for np_num in item:
+                nums.append(int(np_num))
+
+            box_width: int = nums[1] - nums[0]
+            box_height: int = nums[3] - nums[2]
+            percent_width: int = round(box_width / width * 100)
+            percent_height: int = round(box_height / height * 100)
+
+            region = img.crop((nums[0], nums[2], nums[1], nums[3]))
+            start = datetime.now()
+            text: str = recogniser(region)
+            end = datetime.now()
+            textbox: Textbox = Textbox(
+                top=round(nums[2] / height * 100),
+                left=round(nums[0] / width * 100),
+                height=int(percent_height),
+                width=int(percent_width),
+                text=text
+            )
+            textboxes.append(textbox)
+            page.textboxes = textboxes
+        manga[page_num] = page

comic_ocr_reader/html_utils/__init__.py

@@ -0,0 +1,111 @@
+from pathlib import Path
+
+HTML_UTILS_FOLDER: Path = Path(__file__).parent
+class Textbox:
+    """Class containing details of the textbox on a page
+    Attributes:
+        top     %-age of page down from top of page to place textbox.
+        left    %-age of page right from left of page to place textbox.
+        width   %-age width of textbox in terms of containing page.
+        height  %-age height of textbox in terms of containing page.
+    """
+    top: int
+    left: int
+    width: int
+    height: int
+    text: str
+    btn_class: str
+    def __init__(
+            self,
+            top: int,
+            left: int,
+            width: int,
+            height: int,
+            text: str
+    ) -> None:
+        self.top = top
+        self.left = left
+        self.width = width
+        self.height = height
+        self.text = text
+
+class Page:
+    textboxes: list[Textbox] = []
+    img_filepath: Path
+    page_num: int
+    page_html: str
+    page_class: str
+
+    def __init__(
+            self,
+            img_filepath: Path|str,
+            page_num: int,
+            page_class: str
+    ):
+        self.img_filepath = img_filepath
+        self.page_num = page_num
+        self.page_class = page_class
+
+    def make_page_html(self) -> None:
+        """
+        Constructs the HTML of a page, shoves it into the page_html attribute of this object.
+        :return:
+        """
+        page_html: str = f"""
+        <div class="{self.page_class}" id="page{self.page_num}">
+        <button class="page-nav prev" onclick="lastPage()">Prev. Page</button>
+        <button class="page-nav next" onclick="nextPage()">Next Page</button>
+        <div class="zoom-hint">Ctrl + wheel to zoom</div>
+        <div class="page-content">
+        <div class="page-content-inner">
+        <img src="{self.img_filepath}" alt="Snow">
+        """
+        for textbox in self.textboxes:
+            page_html += f"""
+            <button class="text-btn"
+                    style="--top:{textbox.top}%;--left:{textbox.left}%;--height:{textbox.height}%;--width:{textbox.width}%;">
+                <span>{textbox.text}</span>
+            </button>
+            """
+        page_html+="""
+        </div>
+        </div>
+        </div>
+        """
+        self.page_html = page_html
+
+    def set_page_class(self, page_class: str):
+        self.page_class = page_class
+
+
+def make_html_file(
+        pages: dict[int, Page],
+        template: str|Path = f"{HTML_UTILS_FOLDER}/html_template.html"
+) -> str:
+    html_body: str = ""
+    for i in range(1, len(pages.keys())+1):
+        if (i - 1) % 2 == 0:
+            html_body += """
+            <div class="spread">
+            <button class="spread-nav prev" onclick="lastPage()">Prev. Page</button>
+            <button class="spread-nav next" onclick="nextPage()">Next Page</button>
+            <div class="spread-hint">Ctrl + wheel to zoom</div>
+            <div class="spread-scroll">
+            <div class="spread-content">
+            """
+        if i == len(pages):
+            pages[i].set_page_class("page last")
+        elif i == 1:
+            pages[i].set_page_class("page first")
+        pages[i].make_page_html()
+        html_body += pages[i].page_html
+        if (i - 1) % 2 == 1 or i == len(pages):
+            html_body += """
+            </div>
+            </div>
+            </div>
+            """
+    with open(template, "r", encoding="utf-8") as html_template:
+        template: str = html_template.read()
+        template = template.replace("{{BODY}}", html_body)
+    return template

comic_ocr_reader/html_utils/html_template.html

@@ -0,0 +1,789 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<style>
+    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
+
+    body {
+      margin: 0;
+      min-height: 100vh;
+      display: grid;
+      place-items: center;
+      /* Leave room for the three fixed view controls. */
+      padding: 10rem 1rem 1rem;
+      box-sizing: border-box;
+      background: #2b2b2b;
+      font-family: 'Roboto', sans-serif;
+    }
+
+    body.two-page-mode {
+      display: block;
+      place-items: initial;
+      overflow-y: auto;
+      padding-top: 10rem;
+    }
+
+    .view-toggle {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.45rem 0.7rem;
+      border-radius: 999px;
+      background: rgba(245, 245, 245, 0.94);
+      border: 1px solid #666;
+      color: #222;
+      box-shadow: 0 1px 6px rgba(0, 0, 0, 0.22);
+      user-select: none;
+    }
+
+    .view-controls {
+      position: fixed;
+      top: 0.75rem;
+      left: 0.75rem;
+      right: 0.75rem;
+      z-index: 40;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    .view-toggle input {
+      margin: 0;
+    }
+
+    .view-toggle.text-toggle {
+      position: static;
+    }
+
+    body.show-text-buttons .page .text-btn {
+      opacity: 1 !important;
+    }
+
+    body.hide-page-navigation .page-nav,
+    body.hide-page-navigation .spread-nav {
+      display: none !important;
+    }
+
+    .page{
+      position: relative;
+      width: min(95vw, 1600px);
+      container-type: inline-size;
+      display: none;
+    }
+
+    .page.active{
+    display: block;
+    }
+
+    .spread {
+      display: none;
+      position: relative;
+    }
+
+    .spread.active {
+      display: block;
+    }
+
+    body.two-page-mode .page {
+      display: block;
+      margin: 0;
+      width: auto;
+      flex: 1 1 0;
+      min-width: 0;
+    }
+
+    body.two-page-mode .spread {
+      width: min(95vw, 1800px);
+      margin: 0 auto;
+    }
+
+    body.two-page-mode .spread.active {
+      display: block;
+      margin: 0 auto 1rem;
+      padding: 0;
+      background: transparent;
+      border: none;
+      border-radius: 0;
+      box-shadow: none;
+      overflow: visible;
+    }
+
+    body.two-page-mode .page-nav {
+      display: none;
+    }
+
+    .spread-nav {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      z-index: 25;
+      padding: 0.75rem 0.5rem;
+      border: 1px solid #666;
+      background: rgba(245, 245, 245, 0.94);
+      color: #111;
+      cursor: pointer;
+      user-select: none;
+      display: none;
+    }
+
+    body.two-page-mode .spread-nav {
+      display: block;
+    }
+
+    .spread-nav.prev {
+      left: 0;
+      border-left: none;
+      border-radius: 0 10px 10px 0;
+    }
+
+    .spread-nav.next {
+      right: 0;
+      border-right: none;
+      border-radius: 10px 0 0 10px;
+    }
+
+    .spread-hint {
+      position: absolute;
+      top: -2.1rem;
+      left: 50%;
+      transform: translateX(-50%);
+      z-index: 30;
+      display: none;
+      width: fit-content;
+      padding: 0.4rem 0.7rem;
+      border-radius: 999px;
+      background: rgba(245, 245, 245, 0.94);
+      border: 1px solid #666;
+      color: #222;
+      font-size: 0.85rem;
+      pointer-events: none;
+      box-shadow: 0 1px 6px rgba(0, 0, 0, 0.22);
+    }
+
+    body.two-page-mode .spread-hint {
+      display: block;
+    }
+
+    body.two-page-mode .zoom-hint {
+      display: none;
+    }
+
+    .page-content {
+      position: relative;
+      width: 100%;
+      height: 80vh;
+      margin: 0;
+      overflow: auto;
+      box-sizing: border-box;
+      background: #f4f4f4;
+      border: 1px solid #666;
+      border-radius: 10px;
+      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
+    }
+
+    body.two-page-mode .page-content {
+      height: auto;
+      overflow: visible;
+      border: none;
+      background: transparent;
+      box-shadow: none;
+      border-radius: 0;
+    }
+
+    .spread-scroll {
+      display: block;
+    }
+
+    body.two-page-mode .spread-scroll {
+      display: block;
+      height: 80vh;
+      overflow: auto;
+      box-sizing: border-box;
+      background: #f4f4f4;
+      border: 1px solid #666;
+      border-radius: 10px;
+      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
+    }
+
+    .spread-content {
+      display: block;
+    }
+
+    body.two-page-mode .spread-content {
+      display: flex;
+      flex-direction: row-reverse;
+      gap: 0;
+      align-items: flex-start;
+      justify-content: center;
+      width: calc(100% * var(--spread-zoom, 1));
+      min-height: 100%;
+      margin: 0 auto;
+    }
+
+    .page-nav {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      z-index: 20;
+      padding: 0.75rem 0.5rem;
+      border: 1px solid #666;
+      background: rgba(245, 245, 245, 0.94);
+      color: #111;
+      cursor: pointer;
+      user-select: none;
+    }
+
+    .page-nav.prev {
+      left: 0;
+      border-left: none;
+      border-radius: 0 10px 10px 0;
+    }
+
+    .page-nav.next {
+      right: 0;
+      border-right: none;
+      border-radius: 10px 0 0 10px;
+    }
+
+    .zoom-hint {
+      position: static;
+      display: block;
+      width: fit-content;
+      margin: 0 0 0.6rem auto;
+      z-index: 20;
+      padding: 0.4rem 0.7rem;
+      border-radius: 999px;
+      background: rgba(245, 245, 245, 0.94);
+      border: 1px solid #666;
+      color: #222;
+      font-size: 0.85rem;
+      pointer-events: none;
+      box-shadow: 0 1px 6px rgba(0, 0, 0, 0.22);
+    }
+
+    .page-content-inner {
+      position: relative;
+      width: calc(100% * var(--zoom, 1));
+      margin: 0 auto;
+    }
+
+    body.two-page-mode .page-content-inner {
+      width: 100%;
+      margin: 0;
+    }
+
+    .page {
+      margin: 0 auto;
+    }
+
+    /* Make the image responsive inside the viewport */
+    .page-content-inner img {
+      display: block;
+      width: 100%;
+      height: auto;
+    }
+
+    .page .text-btn{
+      position: absolute;
+      container-type: size;
+      padding: 8px;
+      top: var(--top);
+      left: var(--left);
+      width: var(--width);
+      height: var(--height);
+      opacity: 0;
+      display: flex;
+      overflow: hidden;
+      box-sizing: content-box;
+      user-select: text;
+      -webkit-user-select: text;
+      cursor: text;
+    }
+    .page.active .text-btn:hover {
+      opacity: 1;
+    }
+    .page .text-btn span{
+      line-height: var(--text-line-height, 1.35);
+      white-space: normal;
+      overflow-wrap: anywhere;
+      writing-mode: vertical-rl;
+      text-orientation: upright;
+      width: auto;
+      height: 100%;
+      user-select: text;
+      -webkit-user-select: text;
+	  color: black;
+    }
+</style>
+<body>
+    <div class="view-controls">
+      <label class="view-toggle" for="two-page-toggle">
+        <input type="checkbox" id="two-page-toggle">
+        Two-page spread
+      </label>
+      <label class="view-toggle text-toggle" for="text-buttons-toggle">
+        <input type="checkbox" id="text-buttons-toggle">
+        Show text buttons
+      </label>
+      <label class="view-toggle" for="page-navigation-toggle">
+        <input type="checkbox" id="page-navigation-toggle" checked>
+        Show page navigation
+      </label>
+    </div>
+    {{BODY}}
+<script>
+    function isTwoPageMode() {
+      return document.body.classList.contains("two-page-mode");
+    }
+
+    let singlePageZoom = 1;
+    let spreadZoom = 1;
+
+    function updateTextButtonVisibility(enabled) {
+      document.body.classList.toggle("show-text-buttons", enabled);
+    }
+
+    function updatePageNavigationVisibility(enabled) {
+      document.body.classList.toggle("hide-page-navigation", !enabled);
+    }
+
+    function getPages() {
+      return Array.from(document.querySelectorAll(".page"));
+    }
+
+    function getSpreads() {
+      return Array.from(document.querySelectorAll(".spread"));
+    }
+
+    function getActivePageIndex(pages) {
+      return pages.findIndex((page) => page.classList.contains("active"));
+    }
+
+    function clearActivePages(pages) {
+      pages.forEach((page) => page.classList.remove("active"));
+    }
+
+    function getActiveSpreadIndex(spreads) {
+      return spreads.findIndex((spread) => spread.classList.contains("active"));
+    }
+
+    function clearActiveSpreads(spreads) {
+      spreads.forEach((spread) => spread.classList.remove("active"));
+    }
+
+    function getSpreadForPage(page) {
+      return page ? page.closest(".spread") : null;
+    }
+
+    function getActiveSpread() {
+      return document.querySelector(".spread.active");
+    }
+
+    function getActiveSpreadScroll() {
+      const activeSpread = getActiveSpread();
+      return activeSpread ? activeSpread.querySelector(".spread-scroll") : null;
+    }
+
+    function resetActiveSpreadScroll() {
+      const scroll = getActiveSpreadScroll();
+      if (!scroll) {
+        return;
+      }
+      scroll.scrollLeft = 0;
+      scroll.scrollTop = 0;
+    }
+
+    function getSpreadStartIndex(pages) {
+      const activeIndex = getActivePageIndex(pages);
+      if (activeIndex === -1) {
+        return 0;
+      }
+      return activeIndex - (activeIndex % 2);
+    }
+
+    function setSingleActivePage(pages, index) {
+      if (!pages[index]) {
+        return;
+      }
+      clearActivePages(pages);
+      pages[index].classList.add("active");
+      const spread = getSpreadForPage(pages[index]);
+      if (spread) {
+        clearActiveSpreads(getSpreads());
+        spread.classList.add("active");
+      }
+      const viewport = pages[index].querySelector(".page-content");
+      setViewportZoom(viewport, singlePageZoom);
+    }
+
+    function activateSinglePageByOffset(pages, offset) {
+      const currentIndex = getActivePageIndex(pages);
+      const nextIndex = currentIndex === -1 ? 0 : currentIndex + offset;
+      if (!pages[nextIndex]) {
+        return;
+      }
+      setSingleActivePage(pages, nextIndex);
+    }
+
+    function setActiveSpreadByIndex(spreads, spreadIndex) {
+      if (!spreads[spreadIndex]) {
+        return;
+      }
+      const pages = getPages();
+      clearActivePages(pages);
+      clearActiveSpreads(spreads);
+
+      const spread = spreads[spreadIndex];
+      spread.classList.add("active");
+      const spreadContent = spread.querySelector(".spread-content");
+      if (spreadContent) {
+        spreadContent.style.setProperty("--spread-zoom", spreadZoom);
+      }
+      spread.querySelectorAll(".page").forEach((page) => {
+        page.classList.add("active");
+      });
+    }
+
+    function scrollActiveTargetIntoView(twoPageEnabled) {
+      if (twoPageEnabled) {
+        resetActiveSpreadScroll();
+        return;
+      }
+
+      const pages = getPages();
+      if (!pages.length) {
+        return;
+      }
+
+      const activeIndex = getActivePageIndex(pages);
+      if (activeIndex === -1) {
+        return;
+      }
+
+      const target = pages[activeIndex];
+
+      target.scrollIntoView({
+        block: twoPageEnabled ? "start" : "center",
+        inline: "nearest"
+      });
+    }
+
+    function activateSpreadByOffset(spreads, offset) {
+      const currentSpreadIndex = getActiveSpreadIndex(spreads);
+      const nextSpreadIndex = currentSpreadIndex === -1 ? 0 : currentSpreadIndex + offset;
+      if (!spreads[nextSpreadIndex]) {
+        return false;
+      }
+      setActiveSpreadByIndex(spreads, nextSpreadIndex);
+      return true;
+    }
+
+    function updateViewMode(twoPageEnabled) {
+      document.body.classList.toggle("two-page-mode", twoPageEnabled);
+      const pages = getPages();
+      const spreads = getSpreads();
+      if (!pages.length) {
+        return;
+      }
+
+      if (twoPageEnabled) {
+        setActiveSpreadByIndex(spreads, Math.floor(getSpreadStartIndex(pages) / 2));
+      } else {
+        clearActiveSpreads(spreads);
+        const activeIndex = getActivePageIndex(pages);
+        setSingleActivePage(pages, activeIndex === -1 ? 0 : activeIndex);
+      }
+
+      scrollActiveTargetIntoView(twoPageEnabled);
+      resizeAllButtonText();
+    }
+
+    function nextPage() {
+            const pages = getPages();
+            const spreads = getSpreads();
+            if (!pages.length) {
+              return;
+            }
+
+            if (isTwoPageMode()) {
+              if (!activateSpreadByOffset(spreads, 1)) {
+                return;
+              }
+              const event = new Event("newpage");
+              window.dispatchEvent(event);
+              resetActiveSpreadScroll();
+              return;
+            }
+
+            const currentIndex = getActivePageIndex(pages);
+            if (currentIndex === -1) {
+                setSingleActivePage(pages, 0);
+            } else if (pages[currentIndex].classList.contains("last")) {
+                return;
+            } else {
+                activateSinglePageByOffset(pages, 1);
+            }
+
+            const event = new Event("newpage");
+            window.dispatchEvent(event);
+            scrollActiveTargetIntoView(false);
+        }
+</script>
+<script>
+    function lastPage() {
+        const pages = getPages();
+        const spreads = getSpreads();
+        if (!pages.length) {
+          return;
+        }
+
+        if (isTwoPageMode()) {
+          const currentSpreadIndex = getActiveSpreadIndex(spreads);
+          if (currentSpreadIndex <= 0) {
+            return;
+          }
+
+          if (!activateSpreadByOffset(spreads, -1)) {
+            return;
+          }
+          const event = new Event("newpage");
+          window.dispatchEvent(event);
+          resetActiveSpreadScroll();
+          return;
+        }
+
+        const currentIndex = getActivePageIndex(pages);
+        if (currentIndex === -1) {
+            setSingleActivePage(pages, 0);
+            const event = new Event("newpage");
+            window.dispatchEvent(event);
+            scrollActiveTargetIntoView(false);
+            return;
+        }
+
+        if (pages[currentIndex].classList.contains("first")) {
+            return;
+        }
+
+        activateSinglePageByOffset(pages, -1);
+        const event = new Event("newpage");
+        window.dispatchEvent(event);
+        scrollActiveTargetIntoView(false);
+    }
+</script>
+<script>
+    function fitTextToButton(button, options = {}) {
+      const text = button.querySelector(".text-btn span");
+
+      if (!text) {
+        return;
+      }
+
+      const {
+        minFontSize = 4,
+        maxFontSize = 100,
+        precision = 0.1
+      } = options;
+
+      const buttonStyles = getComputedStyle(button);
+
+      const availableWidth =
+        button.clientWidth -
+        parseFloat(buttonStyles.paddingLeft) -
+        parseFloat(buttonStyles.paddingRight);
+
+      const availableHeight =
+        button.clientHeight -
+        parseFloat(buttonStyles.paddingTop) -
+        parseFloat(buttonStyles.paddingBottom);
+
+      text.style.width = `${availableWidth}px`;
+      text.style.setProperty("--text-line-height", "1.12");
+      text.style.fontSize = `${maxFontSize}px`;
+
+      let low = minFontSize;
+      let high = maxFontSize;
+      let bestSize = minFontSize;
+
+      while (high - low > precision) {
+        const middle = (low + high) / 2;
+
+        text.style.fontSize = `${middle}px`;
+
+        const fitsWidth = text.scrollWidth <= availableWidth + 0.5;
+        const fitsHeight = text.scrollHeight <= availableHeight + 0.5;
+
+        if (fitsWidth && fitsHeight) {
+          bestSize = middle;
+          low = middle;
+        } else {
+          high = middle;
+        }
+      }
+
+      text.style.fontSize = `${bestSize}px`;
+
+      const rawText = (text.textContent || "").replace(/\s+/g, "");
+      const punctuationMatches = rawText.match(/[。、，．・「」『』（）\(\)！？…—‥]/g) || [];
+      const punctuationDensity = rawText.length > 0
+        ? punctuationMatches.length / rawText.length
+        : 0;
+      const renderedColumns = Math.max(1, Math.ceil(text.scrollWidth / Math.max(1, availableWidth)));
+      const adaptiveLineHeight = Math.min(
+        1.62,
+        Math.max(
+          1.12,
+          1.12 +
+            Math.min((renderedColumns - 1) * 0.09, 0.38) +
+            Math.min(punctuationDensity * 0.25, 0.12)
+        )
+      );
+      text.style.setProperty("--text-line-height", adaptiveLineHeight.toFixed(2));
+    }
+    function resizeAllButtonText() {
+      document.querySelectorAll(".text-btn").forEach((button) => {
+        fitTextToButton(button, {
+          minFontSize: 4,
+          maxFontSize: 100,
+          precision: 0.1
+        });
+      });
+    }
+    window.addEventListener("resize", resizeAllButtonText);
+    window.addEventListener("newpage",resizeAllButtonText);
+    function getViewportContent(viewport) {
+      return viewport ? viewport.querySelector(".page-content-inner") : null;
+    }
+
+    function setViewportZoom(viewport, zoom) {
+      const content = getViewportContent(viewport);
+      if (!content) {
+        return;
+      }
+      const clampedZoom = Math.min(3, Math.max(0.25, zoom));
+      content.style.setProperty("--zoom", clampedZoom);
+      return clampedZoom;
+    }
+
+    function handleViewportWheel(event) {
+      if (isTwoPageMode()) {
+        return;
+      }
+      if (!event.ctrlKey) {
+        return;
+      }
+
+      const viewport = event.currentTarget;
+      const content = getViewportContent(viewport);
+      if (!content) {
+        return;
+      }
+
+      const currentZoom = parseFloat(getComputedStyle(content).getPropertyValue("--zoom")) || 1;
+      const zoomFactor = event.deltaY > 0 ? 0.9 : 1.1;
+      const nextZoom = Math.min(3, Math.max(0.25, currentZoom * zoomFactor));
+
+      if (nextZoom === currentZoom) {
+        return;
+      }
+
+      const rect = viewport.getBoundingClientRect();
+      const cursorX = event.clientX - rect.left;
+      const cursorY = event.clientY - rect.top;
+
+      const anchorX = (viewport.scrollLeft + cursorX) / currentZoom;
+      const anchorY = (viewport.scrollTop + cursorY) / currentZoom;
+
+      setViewportZoom(viewport, nextZoom);
+      singlePageZoom = nextZoom;
+      viewport.scrollLeft = anchorX * nextZoom - cursorX;
+      viewport.scrollTop = anchorY * nextZoom - cursorY;
+
+      event.preventDefault();
+    }
+
+    function handleSpreadWheel(event) {
+      if (!isTwoPageMode() || !event.ctrlKey) {
+        return;
+      }
+
+      const scroll = event.currentTarget;
+      const activeSpread = scroll.closest(".spread");
+      if (!activeSpread || !activeSpread.classList.contains("active")) {
+        return;
+      }
+
+      const spreadContent = activeSpread.querySelector(".spread-content");
+      if (!spreadContent) {
+        return;
+      }
+
+      const currentZoom = parseFloat(getComputedStyle(spreadContent).getPropertyValue("--spread-zoom")) || 1;
+      const zoomFactor = event.deltaY > 0 ? 0.9 : 1.1;
+      const nextZoom = Math.min(3, Math.max(0.25, currentZoom * zoomFactor));
+
+      if (nextZoom === currentZoom) {
+        return;
+      }
+
+      const rect = scroll.getBoundingClientRect();
+      const cursorX = event.clientX - rect.left;
+      const cursorY = event.clientY - rect.top;
+
+      const anchorX = (scroll.scrollLeft + cursorX) / currentZoom;
+      const anchorY = (scroll.scrollTop + cursorY) / currentZoom;
+
+      spreadContent.style.setProperty("--spread-zoom", nextZoom);
+      spreadZoom = nextZoom;
+
+      scroll.scrollLeft = anchorX * nextZoom - cursorX;
+      scroll.scrollTop = anchorY * nextZoom - cursorY;
+      event.preventDefault();
+    }
+
+    function attachViewportWheelHandlers() {
+      document.querySelectorAll(".page-content").forEach((viewport) => {
+        setViewportZoom(viewport, 1);
+        viewport.addEventListener("wheel", handleViewportWheel, { passive: false });
+      });
+      document.querySelectorAll(".spread-scroll").forEach((scroll) => {
+        const spreadContent = scroll.querySelector(".spread-content");
+        if (spreadContent) {
+          spreadContent.style.setProperty("--spread-zoom", 1);
+        }
+        scroll.addEventListener("wheel", handleSpreadWheel, { passive: false });
+      });
+    }
+
+    attachViewportWheelHandlers();
+    const twoPageToggle = document.getElementById("two-page-toggle");
+    twoPageToggle.addEventListener("change", (event) => {
+      updateViewMode(event.target.checked);
+    });
+    const textButtonsToggle = document.getElementById("text-buttons-toggle");
+    textButtonsToggle.addEventListener("change", (event) => {
+      updateTextButtonVisibility(event.target.checked);
+    });
+    const pageNavigationToggle = document.getElementById("page-navigation-toggle");
+    pageNavigationToggle.addEventListener("change", (event) => {
+      updatePageNavigationVisibility(event.target.checked);
+    });
+    window.addEventListener("keydown", (event) => {
+      if (event.key === "ArrowLeft" || event.key === "a" || event.key === "A") {
+        event.preventDefault();
+        lastPage();
+      } else if (event.key === "ArrowRight" || event.key === "d" || event.key === "D") {
+        event.preventDefault();
+        nextPage();
+        }
+    });
+    updateViewMode(false);
+    updateTextButtonVisibility(false);
+    updatePageNavigationVisibility(pageNavigationToggle.checked);
+</script>
+</body>
+</html>

comic_ocr_reader/img_utils/__init__.py

@@ -0,0 +1,64 @@
+import numpy as np
+
+def __compare_regions(
+        r1: list[int],
+        r2: list[int],
+        padding: int = 0,
+) -> bool:
+    ef_r1: list[int] = [r1[0]-padding, r1[1]+padding, r1[2]-padding, r1[3]+padding]
+    ef_r2: list[int] = [r2[0]-padding, r2[1]+padding, r2[2]-padding, r2[3]+padding]
+    return (ef_r1[1] > ef_r2[0] and ef_r1[0] < ef_r2[1]) and (ef_r1[3] > ef_r2[2] and ef_r1[2] < ef_r2[3])
+
+def __merge_regions(
+        r1: list[int],
+        r2: list[int],
+) -> list[int]:
+    y_cords: list[int] = [r1[2], r2[2], r1[3], r2[3]]
+    x_cords: list[int] = [r1[0], r2[0], r1[1], r2[1]]
+    x_max: int = max(x_cords)
+    x_min: int = min(x_cords)
+    y_max: int = max(y_cords)
+    y_min: int = min(y_cords)
+    new_region: list[int] = [x_min, x_max, y_min, y_max]
+    return new_region
+
+def merge_textboxes_easyocr(
+        region_list: list[list[int]],
+        padding: int = 0
+) -> list[list[int]]:
+    """
+    :param padding: Leniency for region merging. Larger number means more regions likely to be merged.
+    :param region_list: A list of regions where text is detected from easyOCR. This takes the form
+    [x_min, x_max, y_min, y_max]
+    :return: A list where close/overlapping regions have been merged into a larger box.
+    """
+    """
+    """
+    all_merged: bool = False
+    last_region_list: list[list[int]] = region_list
+    merged_regions: list[list[int]] = []
+    while not all_merged:
+        region_created: bool = False
+        for counter_1 in range(len(last_region_list)):
+            r1 = last_region_list[counter_1]
+            for counter_2 in range(len(last_region_list)):
+                if counter_2 == counter_1:
+                    continue
+                r2 = last_region_list[counter_2]
+                if __compare_regions(r1, r2, padding):
+                    new_region: list[int] = __merge_regions(r1, r2)
+                    merged_regions.append(new_region)
+                    leftover_regions: list[list[int]] = [
+                        region for index, region in enumerate(last_region_list) if index not in [counter_1, counter_2]
+                    ]
+                    merged_regions += leftover_regions
+                    last_region_list = merged_regions
+                    merged_regions = []
+                    region_created = True
+                    break
+            if region_created:
+                break
+        if not region_created:
+            all_merged = True
+
+    return last_region_list

comic_ocr_reader/main.py

@@ -0,0 +1,103 @@
+import os
+from pathlib import Path
+from typing import Final
+from tqdm import tqdm
+from loguru import logger
+
+from easyocr import Reader
+from manga_ocr import MangaOcr
+
+from html_utils import Page, make_html_file
+from functions import process_page
+
+VALID_EXTENSIONS: Final[list[str]] = [
+        "jpg",
+        "jpeg",
+        "png",
+        "bmp",
+        "tiff"
+]
+logger.disable("manga_ocr")
+
+def main(
+        folder_path: str,
+        manga_name: str = ...
+) -> bool:
+    path_folder: Path = Path(folder_path)
+    file_list: list[str] = os.listdir(path_folder)
+    images: list[str] = []
+    page_num = 0
+    manga: dict[int, Page] = {}
+    manga_name: str = path_folder.name if manga_name is ... else manga_name
+    print(f"Processing the folder of manga titled \"{manga_name}\"")
+    for file in file_list:
+        if Path(f"{path_folder}/{file}").is_file():
+            if file.split('.')[-1] in VALID_EXTENSIONS:
+                images.append(file)
+            else:
+                continue
+        else:
+            continue
+    print(f"Found {len(images)} pages in folder.")
+    try:
+        images.sort(key=lambda fname: int(fname.split('.')[0]))
+    except ValueError:
+        print("One of the image files in the folder you have entered has a non-integer name. (e.g. 123abc.jpeg instead of 123.jpeg)\n"
+              "All image files within the folder *must* have an integer name for ordering purposes.")
+        return False
+    detector = Reader(
+        lang_list=['ja'],
+        recognizer=False,
+        gpu=True
+    )
+    recogniser = MangaOcr()
+    for file in tqdm(images):
+        page_num += 1
+        process_page(
+            manga=manga,
+            filepath=Path(f"{folder_path}/{file}"),
+            detector=detector,
+            recogniser=recogniser,
+            page_num=page_num
+        )
+
+    final_html: str = make_html_file(manga)
+    with open(f"{folder_path}/{manga_name}.html", "w+", encoding="utf-8") as f:
+        f.write(final_html)
+        f.flush()
+    return True
+
+while True:
+    try:
+        user_input: str = input(
+            f"Hello! Please type in \"help\" to see a list of commands. Otherwise, please type in a valid command.\n"
+        )
+        user_input = user_input.strip()
+        match user_input:
+            case "help":
+                print(
+                    """
+    The valid commands are:
+    - folder 
+        Allows you to specify a folder containing the image files for the manga you want to process.
+        Also optionally allows you to give the manga a name. Otherwise the folder name will be used.
+        Supported file formats for images in folder: .jpg, .jpeg, .png, .bmp, .tiff 
+    And of course, 
+    - help 
+    Which you are currently using.
+                    """
+                )
+            case "folder":
+                target_folder: str = input("Please input a target folder.\n")
+                if os.path.isdir(target_folder):
+                    if main(target_folder):
+                        print("Success! Please press Ctrl+C to exit.")
+                    else:
+                        print("Something went wrong.")
+                else:
+                    print("Please input a valid folder.")
+            case _:
+                print("That was not a valid command.")
+    except KeyboardInterrupt:
+        print("\nGoodbye!")
+        exit(0)

comic_ocr_reader-0.0.2.dist-info/METADATA

@@ -0,0 +1,56 @@
+Metadata-Version: 2.4
+Name: comic_ocr_reader
+Version: 0.0.2
+Summary: A Python package made for processing Japanese manga into a format usable with web-based on-screen dictionaries like Yomitan.
+Project-URL: Homepage, https://github.com/HagantaRG/comic-ocr
+Author-email: HRG <rhaganta@gmail.com>
+License-Expression: MIT
+License-File: LICENSE.MD
+Classifier: Operating System :: OS Independent
+Classifier: Programming Language :: Python :: 3
+Requires-Python: >=3.9
+Requires-Dist: easyocr~=1.7.2
+Requires-Dist: loguru
+Requires-Dist: manga-ocr
+Requires-Dist: numpy~=2.5.1
+Requires-Dist: pillow~=12.3.0
+Requires-Dist: tqdm
+Description-Content-Type: text/markdown
+
+# Jelly's Manga Reading Thingy.
+This is my own rendition of the excellent [Mokuro](https://github.com/kha-white/mokuro) project, made mostly just to do it.
+That being said, if you have any suggestions, please give me a heads-up and I will be happy to implement it. Probably.
+
+## Usage
+1. Prepare a folder containing the images you would like to process. As of v.0.0.1 the images in this folder must be named the page number you would like that image to be.
+   (e.g. the PNG image you would like to use as the second page should be titled "2.png")
+   The name of the folder will be the name of the resultant HTML file. (e.g. if your folder is titled "Naruto" the output HTML file will be "Naruto.html" )
+2. Run comic-reader-ocr and enter the "folder" command.
+3. Enter the absolute path of the folder from step 1 and wait for comic-reader-ocr to process all the images.
+4. Once finished, the resulting HTML file will be placed in an outputs folder within the folder from step 1.
+5. Open the resulting HTML using your web browser of choice.
+
+## FAQs (as decided by Myself)
+1. Is this a worse version of various other projects (e.g. [Mokuro](https://github.com/kha-white/mokuro))?
+
+   - Yes.
+
+2. Do you know how to like. Write things. That work?
+
+   - No.
+
+3. Why did you do this?
+
+   - As a learning exercise, mostly. Plus, I like trying to reinvent wheels.
+
+4. Can I make suggestions?
+
+   - Yes. 
+
+5. Did you use AI for this?
+
+   - Yes. Most of the HTML and JS was AI generated, as unfortunately I really *really* don't like looking at either of those things.
+
+6. Are you going to try to make this a webapp because that probably makes a lot of sense or just. Like. Something that isn't Python so that it's easier to distribute or something?
+
+   - Yes. I'll probably try to rewrite this in Rust or do something like the [mokuro-reader](https://github.com/Gnathonic/mokuro-reader) project.

comic_ocr_reader-0.0.2.dist-info/RECORD

@@ -0,0 +1,11 @@
+comic_ocr_reader/__init__.py,sha256=47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU,0
+comic_ocr_reader/filepaths.py,sha256=EfdHE04NexfQQ6TasbZefDZ-IvFmBOUBLcz8UHcthm0,79
+comic_ocr_reader/main.py,sha256=AySN1rtI4ZSq1h6WBe5G2QzfEyLGCt1eus1JcZnzlgA,3448
+comic_ocr_reader/functions/__init__.py,sha256=6ZpVEsVXP3UOUfSz3J9cMKiyCxHyoP9tk6s7K3zC95M,1887
+comic_ocr_reader/html_utils/__init__.py,sha256=cJ_Ty22JDeF69jkvDoit2a3BqdT4GVYjPMY9nb2sTjA,3642
+comic_ocr_reader/html_utils/html_template.html,sha256=XvrnZVtfHyVXeI-KaXDXY9uv1rLlztHQfmSHmRY-vxI,21717
+comic_ocr_reader/img_utils/__init__.py,sha256=vjU13Y2FrcQ-BXraOqgngMokzBrUrHR6BMmjLl8bugI,2527
+comic_ocr_reader-0.0.2.dist-info/METADATA,sha256=a_dZSeHAqoyuw0JCDp8ab0hk-62Y3xqckf4b3FWyu0M,2545
+comic_ocr_reader-0.0.2.dist-info/WHEEL,sha256=lCkmxWfQsSc9CfIClYeavTdQeEX2toPqufh9gI35EQA,87
+comic_ocr_reader-0.0.2.dist-info/licenses/LICENSE.MD,sha256=ziuoPeOm0imLaM2XWeL7s5zZ6iaqWj3EJFTQ-MULm30,1094
+comic_ocr_reader-0.0.2.dist-info/RECORD,,

comic_ocr_reader-0.0.2.dist-info/WHEEL

@@ -0,0 +1,4 @@
+Wheel-Version: 1.0
+Generator: hatchling 1.31.0
+Root-Is-Purelib: true
+Tag: py3-none-any

comic_ocr_reader-0.0.2.dist-info/licenses/LICENSE.MD

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Haganta R. Ginting
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.