Tech

Snorql — A Browser-Based UI for Exploring Multiple SPARQL Endpoints https://nakamura196.github.io/snorql/ Introduction Have you ever wanted a quick, easy way to try out SPARQL endpoints? SPARQL is the standard query language for searching Linked Open Data (LOD), but each endpoint often has a different UI — or none at all. To solve this, I published Snorql, a tool that lets you switch between multiple endpoints from a single, unified UI. ...

This article explains how to use the Mirador viewer for displaying IIIF images. Reference Implementation The embedding approach is based on Stanford University Libraries’ Stanford Digital Repository. The viewer is embedded above bibliographic information, allowing metadata and images to be viewed on the same page. File Structure a ├ │ ├ │ └ p ─ ─ ─ p ─ ─ ─ s / p └ s └ . w u ─ r ─ e e b ─ c ─ n b l / v / i i c M . c n o i l / d m r o m e p a c i x o d a r . n o l a h e r d t n V o m t i r l s e / / w i e t r e . m t / s x # # # M E E i m n r b v a e i d d r o d o r i n n m v g e i n e c t w o e m v r p a o r n i e a n b t l e s e t t i n g s URL Parameters /mirador/index.html accepts the following URL parameters: ...

Overview I investigated an issue where PLY files were not being output as items in IIIF manifests by the Omeka S IIIF Server module, while GLB files were output correctly. Prerequisites: Omeka S Configuration By default, PLY files cannot be uploaded to Omeka S. The following configuration is required. Error When Uploading PLY Files With default settings, upload errors occur because the PLY file’s media type (application/octet-stream) and extension (.ply) are not permitted. ...

I developed a viewer that allows browsing 3D Gaussian Splatting (3DGS) files in the browser. This article explains an overview of 3DGS, why a regular PLY Viewer cannot display it, and the implementation of a dedicated viewer. Demo: https://3dtiles-viewer.vercel.app/3dgs-viewer.html?manifest=https://3dtiles-viewer.vercel.app/iiif/ply/manifest.json Why a Regular PLY Viewer Cannot Display 3DGS Since 3DGS files have the .ply extension, they appear to be handled the same way as regular PLY files. However, they are not displayed correctly when loaded with Three.js’s PLYLoader. ...

! This article was composed and written based on a conversation with AI (Claude). While care has been taken regarding the accuracy of the content, it may contain errors or inaccuracies. If you notice any issues, I would appreciate your feedback in the comments. Situations where 3D point cloud data is used are increasing. Applications continue to expand, including digital archives of cultural properties, 3D scanning of cities, and LiDAR measurement for autonomous driving. However, with many related terms such as PLY, LAS, Gaussian Splatting, and Potree, it can be difficult to grasp their positioning and relationships. ...

This article explains how to programmatically retrieve information from the KAKEN (Grants-in-Aid for Scientific Research) database. 1. Introduction KAKEN is a database for Grants-in-Aid for Scientific Research provided by the National Institute of Informatics (NII). By using the OpenSearch API, you can programmatically retrieve information about research projects. 2. Preparation: Obtaining an Application ID To use the KAKEN API, you need to obtain an Application ID from CiNii. Access the CiNii API Registration page Fill in the required information and submit your registration request After approval, you will receive an Application ID (appid) by email Note: It may take some time from registration to approval. ...

Overview When displaying a GLTF model using React Three Fiber, I encountered an issue where textures appeared blurry or rough. This article explains the cause and solution. Symptoms GLTF model textures appear blurry The same model that displays correctly in other 3D viewers looks rough in a custom viewer Setting dpr (device pixel ratio) or antialias does not improve the issue Cause Since Three.js r152, the default output color space has been changed. ...

Overview In a Nuxt 3/4 + Nuxt Content environment with trailingSlash: "append" configured, links to static files such as PDFs and images within content may result in 404 errors. Conditions for Occurrence This occurs when all of the following conditions are met: Using Nuxt 3/4 + Nuxt Content trailingSlash: "append" is set in nuxt.config.ts There are links to static files (PDFs, images, etc.) in Markdown or content Problem Details Symptoms When writing a link like the following in content: ...

Overview To improve the interoperability of geospatial data in the IIIF Georeference Viewer, we added support for data structures conforming to the Linked Places Format (LPF). This article explains the overview of LPF and the implementation details. What is Linked Places Format (LPF)? Linked Places Format is an interoperability format for gazetteer data developed by the Pelagios Network. It extends GeoJSON and incorporates Linked Data (JSON-LD) concepts, enabling sharing and linking of place information across different datasets. ...

Introduction I developed a rotation plugin called “mirador-rotation” for the latest version of the IIIF viewer Mirador (Mirador 4) and published it on npm. This article explains the process from plugin development to publication, and the integration methods for actual use. Background With the major update from Mirador 3 to Mirador 4, the following changes were made: React 16 → React 18 Material-UI v4 → MUI v7 Many other dependency updates As a result, existing Mirador 3 plugins no longer work as-is. ...

Introduction IIIF (International Image Interoperability Framework) is an international standard for image delivery widely used in digital archives and museum collections. The IIIF Content Search API allows you to search annotations (notes and tags) within manifests. However, the IIIF Content Search API typically assumes server-side implementation, and it has been considered difficult to implement on static sites (GitHub Pages, Vercel, Netlify, etc.). In this article, I will introduce a method for implementing the IIIF Content Search API on the client side using Service Workers. This approach enables the use of search functionality in IIIF viewers such as Mirador even on static sites. ...

Introduction When I tried to deploy a Next.js application to Vercel, I encountered a problem where the build succeeded locally but failed on Vercel. The error message was vague, and it was difficult to identify the cause. In this article, I share the process from discovering the problem to resolving it, along with what I learned about JavaScript operator precedence. Symptoms Error Message E [ T r E h r r e o r r o s r p o : e c c c A i u n f r i r e c e r d r m o e p r s r s e o a r c g e c e n u d r i e r s r e i d o n m g i i n t p t a t e g h d e e i " S n / e e r p n r / e o s r d m u e C c l o t l m i s p o / o n 2 n 2 e b - n u 0 t i 3 s l " d r s e n t d o e r a . v o i d l e a k i n g s e n s i t i v e d e t a i l s . ] Characteristic Behavior Local build succeeds, but Vercel build fails Errors occur on different pages each time (22-03, 24-03, 25-04, etc.) Error details are hidden in production builds Finding the Cause While investigating multiple files, I discovered the following code pattern: ...

I built a web app that uses the Sketchfab API to download 3D models as GLB files and display them in the browser using Three.js. This article covers everything from the security-conscious architecture design to implementation. What I Wanted to Do Download 3D models from Sketchfab in GLB format Display downloaded GLB files in 3D within the browser Manage API tokens securely Tech Stack Next.js 16 (App Router) React Three Fiber / @react-three/drei TypeScript First Attempt: Client-Side Only Implementation Initially, I tried implementing it with just HTML + JavaScript. ...

Restricting an Element’s Attributes to Specific Ones Only By default in TEI, elements inherit many attribute classes (att.global, att.datable, etc.), making numerous attributes available. If you want to allow only specific attributes, configure it as follows. Example: Allowing Only xml:id and corresp on persName < e / l < < e e c / a / l m l < < < < < < < c t < < a e e a ! m m m m m m l t a / a / t m n s - e e e e e e a L t < < a t < < a t e t s - m m m m m m s i t d d / t t d d / t L n S e b b b b b b s s D e a < d t D e a < d t i t p s 属 e e e e e e e t e s t d a D e s t d a D s S e 性 r r r r r r s > f c a a t e f c a a t e t p c m ク O O O O O O > > t t a f > t t a f > e o ラ f f f f f f i 要 y a t > i 関 y a t > c i d ス d 素 p R y d 連 p R y > d e を k k k k k k e の e e p e す e e p e = 削 e e e e e e n 一 > f e n る > f e n " 除 y y y y y y t 意 > t 人 > t c （ = = = = = = = な n = 物 k = h モ " " " " " " " 識 a " 情 e " a デ a a a a a a x 別 m c 報 y p n ル t t t t t t m 子 e o へ = e g ク t t t t t t l < = r の " r e ラ . . . . . . : / " r リ t s " ス g c d e p t i d I e ン e N > は l m a d e y d e D s ク i a 維 o c t i r p " s " p < d m 持 b " a t s e c / " / a e ） a b L o d m > > d t " l m l i n " o m e a " o e k a d o s . m d " e l m e d c p o m e " " o = e > o d o = m d " = i e d " o m m e a " n = e d d o o = d a t " = e e d d " d d e c " l = e e d " d r h d e " = = e " " a e t d " " l u / n l e e d d e s u > g e " l e e t a s e t / e l l e g a " e > t e e " e g > " e t t / = e / " e e > " = > / " " o " > / / p o > > t p " t > " > Key Points Use <classes mode="change">: If you use mode="replace" and leave it empty, the model classes will also be deleted, making the element itself unusable Delete attribute classes individually: Remove unnecessary attribute classes with <memberOf key="att.xxx" mode="delete"/> Add required attributes: Define the attributes you want to allow with <attDef ident="xxx" mode="add"> Notes You can check which attribute classes an element belongs to in the TEI Guidelines Deleting att.global will also remove xml:id, xml:lang, etc., so add them individually as needed Adding Attributes to an Element When adding a new attribute while keeping existing attribute classes: ...

Overview When deploying an application using Next Auth (Auth.js v5) to a Docker container or production environment, the following error occurs with GitHub OAuth authentication if the AUTH_URL environment variable is not configured: B T e h e c a r r e e d f i u r l e ! c t _ u r i i s n o t a s s o c i a t e d w i t h t h i s a p p l i c a t i o n . Development Environment vs Production Environment Development Environment (npm run dev) In the development environment, Next.js automatically detects host information, so configuring AUTH_URL is not required. ...

This article introduces the steps to publish a YOLOv11x model trained on the Japanese Classical Kuzushiji Dataset on Hugging Face and create a demo with Gradio Spaces. Overview Model: YOLOv11x (for kuzushiji character detection) Dataset: Japanese Classical Kuzushiji Dataset Publication: Hugging Face Models + Spaces 1. Register the Model on Hugging Face Models 1.1 Install huggingface_hub p i p i n s t a l l h u g g i n g f a c e _ h u b 1.2 Login h u g g i n g f a c e - c l i l o g i n Or from Python: ...

This article summarizes the steps to generate XYZ tiles from IIIF Georeference Extension JSON, serve them with TileServer GL, and display them with MapLibre GL JS. Bird’s-eye view map of the University of Tokyo overlaid on OSM Overview I ┌ │ │ └ ┌ │ │ └ ┌ │ │ └ ┌ │ │ └ I ─ ─ ─ ─ ─ ─ ─ ─ I ─ i ( ─ ─ m ( ─ ─ T ( ─ ─ M ( ─ F ─ i X ─ ─ b m ─ ─ i t ─ ─ a m ─ ─ i Y ─ ─ - b ─ ─ l i ─ ─ p a ─ G ─ f Z ─ ─ u t ─ ─ e l ─ ─ L p ─ e ─ - ─ ─ t i ─ ─ S e ─ ─ i ─ o ─ g t ─ ─ i l ─ ─ e ─ ─ b d ─ r │ ▼ ─ e i ─ │ ▼ ─ l e ─ │ ▼ ─ r s ─ │ ▼ ─ r i ─ e ─ o l ─ ─ s ─ ─ v e ─ ─ e s ─ f ─ r e ─ ─ ─ ─ e r ─ ─ p ─ e ─ e ─ ─ c ─ ─ r v ─ ─ G l ─ r ─ f g ─ ─ o ─ ─ i ─ ─ L a ─ e ─ - e ─ ─ n ─ ─ G n ─ ─ y ─ n ─ t n ─ ─ v ─ ─ L g ─ ─ J ) ─ c ─ i e ─ ─ e ─ ─ ) ─ ─ S ─ e ─ l r ─ ─ r ─ ─ ─ ─ ─ ─ e a ─ ─ s ─ ─ ─ ─ ─ J ─ s t ─ ─ i ─ ─ ─ ─ ─ S ─ i ─ ─ o ─ ─ ─ ─ ─ O ─ o ─ ─ n ─ ─ ─ ─ ─ N ─ n ─ ─ ) ─ ─ ─ ─ ─ ─ ) ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐ │ │ ┘ ┐ │ │ ┘ ┐ │ │ ┘ ┐ │ │ ┘ Prerequisites Docker / Docker Compose Python 3.x GDAL (gdal_translate, gdalwarp, gdal2tiles.py) Pillow (pip3 install pillow) mb-util Installing GDAL # b # s r u m e U d a w b o c u O i n a S n t p s u t ( t / H a D i o l e n m l b s e i t b g a a r d n l e a l w l ) g d a l - b i n p y t h o n 3 - g d a l Installing mb-util p i p 3 i n s t a l l m b u t i l 1. Project Structure w ├ ├ ├ ├ └ t ─ ─ ─ ─ ─ m ─ ─ ─ ─ ─ s / d d s f d o a t r o c t y o c k a l n s e / e t / r s e - / n c d o / m p o s e . y m l # # # m C M b u a t s p i t L l o i e m b s r s e f t i y v l l i e e e s s w e r o p t i o n a l ) 2. Docker Compose Configuration docker-compose.yml: ...

Overview I performed a large-scale dependency package update, including a major update from Nuxt 3.2.3 to 3.20.2. Major Package Updates Package Before After nuxt 3.2.3 3.20.2 @nuxt/content 2.5.2 3.11.0 @nuxtjs/i18n 8.0.0-beta.10 10.2.1 vuetify 3.1.8 3.7.6 sass 1.58.3 1.83.4 @mdi/js 7.1.96 7.4.47 Newly Added Packages better-sqlite3: ^12.5.0 - Dependency of @nuxt/content v3 vue-i18n: ^11.0.0 - Dependency of the i18n module Changes That Required Action 1. Migration to @nuxt/content v3 Creating a new content.config.ts was required. ...

A tool for generating XYZ tiles from IIIF Georeference Extension JSON and displaying them with MapLibre GL JS. Repository: https://github.com/nakamura196/iiif-georef-tiles GitHub Pages: https://nakamura196.github.io/iiif-georef-tiles/ Requirements Python 3.x GDAL (gdal_translate, gdalwarp, gdal2tiles.py) Installing GDAL # b # s r u m e U d a w b o c u O i n a S n t p s u t ( t / H a D i o l e n m l b s e i t b g a a r d n l e a l w l ) g d a l - b i n p y t h o n 3 - g d a l Usage p y t h o n 3 s c r i p t s / i i i f _ g e o r e f _ t o _ t i l e s . p y < I I I F _ G E O R E F _ J S O N _ U R L > Example p y t h o n 3 s c r i p t s / i i i f _ g e o r e f _ t o _ t i l e s . p y h t t p s : / / n a k a m u r a 1 9 6 . g i t h u b . i o / i i i f _ g e o / c a n v a s . j s o n Options Option Default Description --scale 0.25 Image scale factor --zoom 14-18 Tile zoom level range --output-dir docs Output directory --name tiles Tile folder name --work-dir work Working directory --keep-work - Do not delete working files Processing Flow I ┌ │ │ └ ┌ │ │ └ ┌ │ │ └ ┌ │ │ │ └ ┌ │ │ └ ┌ │ │ │ └ I ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ I ─ 1 ─ ─ 2 ─ ─ 3 ─ ─ 4 ─ ─ 5 ─ ─ 6 ─ F ─ . ─ ─ . ─ ─ . ─ ─ . ─ ─ . ─ ─ . ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ G ─ F ( ─ ─ D ( ─ ─ E ( ─ ─ C t ( ─ ─ G ( ─ ─ G v ( ─ e ─ e f ─ ─ o I ─ ─ m g ─ ─ o r g ─ ─ e g ─ ─ e i M ─ o ─ t e ─ ─ w I ─ ─ b d ─ ─ o a d ─ ─ n d ─ ─ n e a ─ r │ ▼ ─ c t ─ │ ▼ ─ n I ─ │ ▼ ─ e a ─ │ ▼ ─ r n a ─ │ ▼ ─ e a ─ │ ▼ ─ e w p ─ e ─ h c ─ ─ l F ─ ─ d l ─ ─ d s l ─ ─ r l ─ ─ r e L ─ f ─ h ─ ─ o ─ ─ _ ─ ─ i f w ─ ─ a 2 ─ ─ a r i ─ e ─ J ─ ─ a I ─ ─ G t ─ ─ n o a ─ ─ t t ─ ─ t b ─ r ─ S f ─ ─ d m ─ ─ C r ─ ─ a r r ─ ─ e i ─ ─ e r ─ e ─ O r ─ ─ a ─ ─ P a ─ ─ t m p ─ ─ l ─ ─ e ─ n ─ N o ─ ─ i g ─ ─ s n ─ ─ e a ) ─ ─ t e ─ ─ H ─ c ─ m ─ ─ m e ─ ─ s ─ ─ t ─ ─ i s ─ ─ T G ─ e ─ ─ ─ a ─ ─ l ─ ─ i ─ ─ l . ─ ─ M L ─ ─ U ─ ─ g A ─ ─ a ─ ─ o ─ ─ e p ─ ─ L ─ J ─ R ─ ─ e P ─ ─ t ─ ─ n ─ ─ s y ─ ─ J ─ S ─ L ─ ─ I ─ ─ e ─ ─ ─ ─ ) ─ ─ S ─ O ─ ) ─ ─ ) ─ ─ ) ─ ─ ─ ─ ─ ─ ) ─ N ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐ │ │ ┘ ┐ │ │ ┘ ┐ │ │ ┘ ┐ │ │ │ ┘ ┐ │ │ ┘ ┐ │ │ │ ┘ Conversion Results Original image After georeferencing Output Files d ├ ├ └ o ─ ─ ─ c ─ ─ ─ s / i s t ├ ├ ├ ├ └ n o i ─ ─ ─ ─ ─ d u l ─ ─ ─ ─ ─ e r e x c s 1 1 1 1 1 . e 4 5 6 7 8 h . / / / / / t j m s l o n # # # M O X a r Y p i Z L g i i t b n i r a l e l e s G I L I I J F S G v e i o e r w e e f r e r e n c e J S O N Local Preview c # d O d p o e c n s h & t & t p p : y / t / h l o o n c 3 a l - h m o s h t t : t 8 p 0 . 0 s 0 e / r v e r 8 0 0 0 IIIF Georeference Extension The IIIF Georeference Extension is an extension specification for adding georeference information to IIIF images. ...

I have summarized how to automatically add English subtitles and English audio to Japanese videos. This uses Azure OpenAI Service’s Whisper and Speech Services. Overview The goal this time is to make a Japanese audio video multilingual as follows: Japanese version: Original video (Japanese audio, no subtitles) English version: English audio + English subtitles Services Used Service Purpose Azure OpenAI Service (Whisper) Translation from Japanese audio to English text Azure Speech Services (TTS) Synthesis from English text to English audio FFmpeg Audio extraction and video merging Procedure 1. Environment Setup Required Tools # b # p r i I e P p n w y s t i t i h n a n o s l s n t l t a a l l F l i l F l b m r p p f a y e f r t g m i h p e o ( e s n m g - a d c o O t S e ) n v r e q u e s t s Azure Configuration (.env) A A A A Z Z Z Z U U U U R R R R E E E E _ _ _ _ O O O O P P P P E E E E N N N N A A A A I I I I _ _ _ _ E A D A N P E P D I P I P _ L _ O K O V I E Y E N Y M R T = E S = y N I h o T O t u _ N t r N = p - A 2 s a M 0 : p E 2 / i = 4 / - w - x k h 0 x e i 6 x y s - x p 0 x e 1 . r o p e n a i . a z u r e . c o m 2. Extract Audio from Video Since the Azure Whisper API has a 25MB file size limit, the audio is compressed and extracted. ...