Building a Gradio App Using NDL Kotenseki OCR-Lite

Overview

I built a Gradio App using NDL Kotenseki OCR-Lite.

You can try it at the following URL.

https://huggingface.co/spaces/nakamura196/ndlkotenocr-lite

“NDL Kotenseki OCR-Lite” provides a desktop application, so an execution environment is available without the need for a web app like Gradio.

Therefore, the intended use cases for this web app include usage from smartphones or tablets, and integration via web API.

Development Notes and Bug Fixes

Using Submodules

The original ndlkotenocr-lite was introduced as a submodule.

[submodule "ndlkotenocr-lite"]
	path = ndlkotenocr-lite
	url = https://github.com/ndl-lab/ndlkotenocr-lite.git

The following is executed during the build.

#!/bin/bash
# Initialize and update submodule
git submodule update --init --recursive
git submodule update --remote

This should allow the latest files from the original ndlkotenocr-lite to be used during the build.

(There may be some misunderstandings on my part.)

Using Dockerfile

For using the submodule, a Dockerfile-based build approach was adopted.

By setting the sdk to docker, the build is performed based on the Dockerfile.

---
title: NDL Kotenseki OCR-Lite Gradio App
emoji: 👀
colorFrom: red
colorTo: blue
sdk: docker
pinned: false
---
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

Using Gradio Version `4.44.1`

Initially, Gradio version 5.7.1 was used, but the following error occurred when attempting to use the API (described later).

ValueError: Could not fetch api info for https://nakamura196-ndlkotenocr-lite.hf.space/: {"detail":"Not Found"}

By using version 4.44.1, this error was resolved.

API Usage

Below is an example using “The Tale of Genji” (University of Tokyo General Library).

from gradio_client import Client, handle_file
client = Client("https://nakamura196-ndlkotenocr-lite.hf.space/")

result = client.predict(
		image_path=handle_file('https://iiif.dl.itc.u-tokyo.ac.jp/iiif/genji/TIFF/A00_6587/01/01_0004.tif/full/900,/0/default.jpg'),
		api_name="/predict"
)
print(result)

The following outputs can be obtained: image, text, XML, and JSON data.

('/private/var/folders/z5/3p9s8m011dv0tjt7ch21jtmh0000gn/T/gradio/14190ea20e00e24f50c0ba0f1efd9f411747a6bb7f9f4067404d94c1fcb681f9/image.webp',
 'いつれの御時よりか女仏更衣あまたさふらひ給ける\n中にいとやんごとなきゝはにはあらぬかすくれくと\nきめき給ふありけりはしめより我いと思ひ\nあかり給へる御かた〳〵めざましきものにをとし\nめそねみ様おなしほとそれ下らうの更衣たち\nはましてやすからす朝夕の宮つかへにつけても\n人の心をうごかしうらみをおふつもりにやあり\nけむいとあつしくなり行もの心ほそけにさとかち\nなるをいよ〳〵あかす哀なる棚におほゝして\n人のそしりをもえはゝからせ給はす世のためし',
 '<?xml version="1.0" ?>\n<OCRDATASET>\n\t<PAGE IMAGENAME="default.jpeg" WIDTH="900" HEIGHT="676">\n\t\t<LINE TYPE="本文" X="433" Y="169" WIDTH="29" HEIGHT="365" CONF="0.845" ORDER="0" STRING="いつれの御時よりか女仏更衣あまたさふらひ給ける"/>\n\t\t<LINE TYPE="本文" X="401" Y="169" WIDTH="29" HEIGHT="364" CONF="0.814" ORDER="1" STRING="中にいとやんごとなきゝはにはあらぬかすくれくと"/>\n\t\t<LINE TYPE="本文" X="372" Y="163" WIDTH="27" HEIGHT="377" CONF="0.812" ORDER="2" STRING="きめき給ふありけりはしめより我いと思ひ"/>\n\t\t<LINE TYPE="本文" X="342" Y="162" WIDTH="29" HEIGHT="378" CONF="0.841" ORDER="3" STRING="あかり給へる御かた〳〵めざましきものにをとし"/>\n\t\t<LINE TYPE="本文" X="312" Y="169" WIDTH="27" HEIGHT="365" CONF="0.819" ORDER="4" STRING="めそねみ様おなしほとそれ下らうの更衣たち"/>\n\t\t<LINE TYPE="本文" X="279" Y="162" WIDTH="28" HEIGHT="379" CONF="0.835" ORDER="5" STRING="はましてやすからす朝夕の宮つかへにつけても"/>\n\t\t<LINE TYPE="本文" X="248" Y="162" WIDTH="31" HEIGHT="378" CONF="0.845" ORDER="6" STRING="人の心をうごかしうらみをおふつもりにやあり"/>\n\t\t<LINE TYPE="本文" X="220" Y="170" WIDTH="27" HEIGHT="362" CONF="0.842" ORDER="7" STRING="けむいとあつしくなり行もの心ほそけにさとかち"/>\n\t\t<LINE TYPE="本文" X="189" Y="162" WIDTH="28" HEIGHT="378" CONF="0.830" ORDER="8" STRING="なるをいよ〳〵あかす哀なる棚におほゝして"/>\n\t\t<LINE TYPE="本文" X="158" Y="169" WIDTH="28" HEIGHT="363" CONF="0.844" ORDER="9" STRING="人のそしりをもえはゝからせ給はす世のためし"/>\n\t</PAGE>\n</OCRDATASET>\n',
 {'contents': [[{'boundingBox': [[433, 169],
      [433, 534],
      [462, 169],
      [462, 534]],
     'id': 0,
     'isVertical': 'true',
     'text': 'いつれの御時よりか女仏更衣あまたさふらひ給ける',
     'isTextline': 'true',
     'confidence': 0.845},
    {'boundingBox': [[401, 169], [401, 533], [430, 169], [430, 533]],
     'id': 1,
     'isVertical': 'true',
     'text': '中にいとやんごとなきゝはにはあらぬかすくれくと',
     'isTextline': 'true',
     'confidence': 0.814},
    {'boundingBox': [[372, 163], [372, 540], [399, 163], [399, 540]],
     'id': 2,
     'isVertical': 'true',
     'text': 'きめき給ふありけりはしめより我いと思ひ',
     'isTextline': 'true',
     'confidence': 0.812},
    {'boundingBox': [[342, 162], [342, 540], [371, 162], [371, 540]],
     'id': 3,
     'isVertical': 'true',
     'text': 'あかり給へる御かた〳〵めざましきものにをとし',
     'isTextline': 'true',
     'confidence': 0.841},
    {'boundingBox': [[312, 169], [312, 534], [339, 169], [339, 534]],
     'id': 4,
     'isVertical': 'true',
     'text': 'めそねみ様おなしほとそれ下らうの更衣たち',
     'isTextline': 'true',
     'confidence': 0.819},
    {'boundingBox': [[279, 162], [279, 541], [307, 162], [307, 541]],
     'id': 5,
     'isVertical': 'true',
     'text': 'はましてやすからす朝夕の宮つかへにつけても',
     'isTextline': 'true',
     'confidence': 0.835},
    {'boundingBox': [[248, 162], [248, 540], [279, 162], [279, 540]],
     'id': 6,
     'isVertical': 'true',
     'text': '人の心をうごかしうらみをおふつもりにやあり',
     'isTextline': 'true',
     'confidence': 0.845},
    {'boundingBox': [[220, 170], [220, 532], [247, 170], [247, 532]],
     'id': 7,
     'isVertical': 'true',
     'text': 'けむいとあつしくなり行もの心ほそけにさとかち',
     'isTextline': 'true',
     'confidence': 0.842},
    {'boundingBox': [[189, 162], [189, 540], [217, 162], [217, 540]],
     'id': 8,
     'isVertical': 'true',
     'text': 'なるをいよ〳〵あかす哀なる棚におほゝして',
     'isTextline': 'true',
     'confidence': 0.83},
    {'boundingBox': [[158, 169], [158, 532], [186, 169], [186, 532]],
     'id': 9,
     'isVertical': 'true',
     'text': '人のそしりをもえはゝからせ給はす世のためし',
     'isTextline': 'true',
     'confidence': 0.844}]],
  'imginfo': {'img_width': 900,
   'img_height': 676,
   'img_path': 'default.jpeg',
   'img_name': 'default.jpeg'}})

Development

The repository includes a docker-compose.yml, so it can be used for building development environments and deploying to production environments outside of HuggingFace Spaces.

Summary

I am grateful that “NDL Kotenseki OCR-Lite” was released as OSS.

I may be unfamiliar with Docker-based development and there may be inaccuracies, but I hope this serves as a helpful reference.

Overview#

Development Notes and Bug Fixes#

Using Submodules#

Using Dockerfile#

Using Gradio Version 4.44.1#

API Usage#

Development#

Summary#