IIIF Tsukushi Viewer

“IIIF Tsukushi Viewer”は、IIIF形式で公開されている本との生成AIチャット機能を備えたIIIFビューワである。

本ツールは、IIIF Curation Viewerをベースとして、AIチャット用途に特化して機能を加除したツールである。この文章では、本ツール固有の内容を中心に記述する。

目次

動作デモ/活用例

日本古典籍データセットを対象としたデモとして、IIIF Tsukushi Viewerを用いた「つくしチャット」や、テキスト検索サービス「つくしサーチ」を公開している。

「つくしチャット」は、日本古典籍を対象としたAIチャット機能により、古典籍に対する現代日本語によるアクセスを提供する。「つくしサーチ」の検索結果や日本古典籍データセットの資料ページに用意されたリンクから利用できる。

使い方

マニフェストの指定

IIIF Curation Viewerと同じく、GET引数(パラメータ名:manifest)の指定やドラッグ&ドロップ、ペースト(貼り付け)により、閲覧する資料のIIIFマニフェストURLを指定する。

閲覧対象を読み込むと、資料画像が表示されるとともに、AIチャットに関する機能が画像右側に表示される。

ブックモードとページモード

IIIF Tsukushi Viewerは、ブックモードとページモードの2つの表示モードで動作する。

ページモードに切り替え/ブックモードに切り替えボタン(画面左側上部)をクリックすることで、ブックモード/ページモードを切り替えることができる。

ブックモード

本全体を対象としたチャットを行うモードである。 GET引数(パラメータ名:manifest)の指定やドラッグ&ドロップ、ペースト(貼り付け)により、閲覧する資料のIIIFマニフェストURLのみが指定された場合、このモードで起動する。 ブックモードは、特定のページの内容に限定せず、本全体の内容に関する質問に適している。

ブックモードキャプチャ

ページモード

個別のページを対象としたチャットを行うモードである。 マニフェストの指定に加え、GET引数(パラメータ名:canvasまたはpos)の指定によりページ(キャンバス)が指定された場合、このモードで起動する。 ページモードは、画像表示領域が大きく、ページ内容を確認しながらチャットを行うことができ、特定のページの詳細な内容確認や部分領域の画像に対する質問に適している。

ページモードキャプチャ

AIチャットに関する機能の切り替え

画面右端には、ロボットアイコン()ボタン、歯車アイコン()ボタン、情報アイコン()ボタンが表示され、それぞれのボタン押下により表示が切り替わる。

AIチャット

画面右端のロボットアイコン()ボタン押下により、画面右側に「AIチャット」が表示される。

AIチャットは、上から、チャット履歴部、プロンプト部の二つの部分によって構成される。

AIチャットキャプチャ
チャット履歴部

ブックモード/ページモードの切り替えやページ移動があったとき、現在閲覧している本/ページに関する内容が表示される。

本/ページに関する内容は、画面右上の開いた目アイコン()ボタン/開いた目アイコン()ボタンの押下により、表示/非表示を切り替えられる。

プロンプトを入力またはプロンプトライブラリから一つを選んでチャットを開始すると、質問とAIからの回答がチャット履歴部に表示される。新しいチャットボタンが押下されるまでは、それまでに行ったやり取りに基づいた回答がなされる。

AIからの回答内に参考ページへのリンクが含まれる場合、押下することで該当ページに移動できる。 現在表示している本/ページのテキストが取得できない場合は、OCRをリクエストするためのボタンが表示される。このボタンを押下すると、OCR処理が依頼され、処理完了後にテキストが利用可能になる。

利用回数制限のあるモデルを利用している場合、24時間以内に利用可能な残り回数があわせて表示されることがある。

プロンプト部

プロンプト部には、左側に新しいチャット()ボタン、右側上にプロンプトを自由に入力できるテキストボックス、右側下にプロンプトライブラリおよび場合によりサジェスチョンが表示される。

新しいチャットボタンを押下すると、それまでにAIと行ったやり取りがクリアされる。この後に行う質問では、AIはそれまでのやり取りの内容を忘却し、新しいチャットが開始される。

プロンプト入力テキストボックスには、自由に質問を入力し、入力を終えればエンターキー押下または質問を送信()ボタン押下により、質問を行う。

プロンプトライブラリには、コンテキストに応じた典型的な質問のボタンが表示され、ボタン押下により典型的な質問を簡単に行うことができる。

AIからの回答内にサジェスチョンが含まれる場合、サジェスチョンボタンが表示される。サジェスチョンは、AIが提案する追加質問であり、ボタンを押下することで続けて質問を行うことができる。

AIへの質問中は、質問をキャンセルするボタンが表示される。質問をキャンセルすると、AIからの応答を待たずに次の質問を行うことができる。

設定

画面右端の歯車アイコン()ボタン押下により、画面右側に「設定」が表示される。

ここでは、AIチャットに関する設定が表示され、利用するモデルの選択を行える。表示内容は、IIIF Tsukushi Viewerの設置時オプションで設定された内容に応じて異なる。

設定キャプチャ

関連情報

画面右端の情報アイコン()ボタン押下により、画面右側に「関連情報」が表示される。

ここでは、本ツールに関連するシステムの情報が表示される。表示内容は、IIIF Tsukushi Viewerの設置時オプションで設定された内容に応じて異なる。

関連情報キャプチャ

設置時の設定

IIIF Tsukushi Viewer設置時のオプション指定により、IIIF Curation Viewerと同様に、IIIF Tsukushi Viewerの挙動をカスタマイズできる。IIIF Curation Viewer設置時の設定資料を参照のこと。

オプション指定

IIIF Tsukushi Viewer固有のオプション指定は、以下の4項目からなる。

  • contentService:コンテントサービス(IIIF資料のテキストを提供するサービス)に関する指定
  • chatService:チャットサービス(本を対象としたAIチャット機能を提供するサービス)に関する指定
  • ocrService:OCRサービス(オンデマンドOCR機能を提供するサービス)に関する指定
  • tsukushiViewer:フロントエンド動作に関する指定

それぞれの詳細を以下に挙げる。

contentService

コンテントサービスに関する設定を指定する。

  • contentService
    • endpointUrl:サービスのエンドポイントURLを指定する。
    • label:サービスの表示名を指定する。「関連情報」で利用される。
    • description:サービスの説明を指定する。「関連情報」で利用される。

chatService

チャットサービスに関する設定を指定する。

  • chatService
    • endpointUrl:サービスのエンドポイントURLを指定する。
    • label:サービスの表示名を指定する。「関連情報」で利用される。
    • description:サービスの説明を指定する。「関連情報」で利用される。
    • chatMethod:プロンプトに関するJSON-RPCリクエストに用いるメソッド設定を、チャット対象ごとに指定する。
      • book:本全体をチャット対象とする際の動作に関する設定を指定する。
        • method:JSON-RPCリクエストで実行するメソッド名を指定する。
        • params:メソッドに送信するパラメータオブジェクトに含めるプロパティを含むオブジェクトを指定する。オブジェクトに含めるプロパティ名はmanifestcanvasimage_urlpromptのいずれかとし、その値は任意とする(リクエスト実行時は、ビューワによって適切な値が設定され送信される)。
      • page:ページをチャット対象とする際の動作に関する設定を指定する。指定方法はbookと同じ。
      • region:画像領域をチャット対象とする際の動作に関する設定を指定する。指定方法はbookと同じ。
    • promptLibrary:プロンプトライブラリに関する設定を指定する。
      • book:本全体をチャット対象とする際の動作に関する設定を指定する。以下のプロパティを持つオブジェクトの配列を指定する。
        • method:JSON-RPCリクエストで実行するメソッド名を指定する。
        • library: JSON-RPCリクエストで実行する事前定義されたオペレーション名を指定する。
        • label:プロンプトライブラリに表示されるボタンの表示名を指定する。
        • text:チャット履歴に表示される質問文を指定する。
        • params:メソッドに送信するパラメータオブジェクトに含めるプロパティを含むオブジェクトを指定する。オブジェクトに含めるプロパティ名はmanifestcanvasimage_urlpromptのいずれかとし、その値は任意とする(リクエスト実行時は、ビューワによって適切な値が設定され送信される)。
      • page:ページをチャット対象とする際の動作に関する設定を指定する。指定方法はbookと同じ。
      • region:画像領域をチャット対象とする際の動作に関する設定を指定する。指定方法はbookと同じ。
    • models:モデルに関する設定を指定する。
      • モデル名:モデル名を指定する。JSON-RPCリクエストやチャット履歴表示に利用される。
        • label:「設定」に表示されるモデル名を指定する。
        • description:「設定」に表示されるモデルの説明を指定する。
        • hasQuota:利用回数制限のあるモデルであるか否かを指定する。「設定」で利用される。

ocrService

OCRサービスに関する設定を指定する。

  • ocrService
    • endpointUrl:サービスのベースURLを指定する。
    • label:サービスの表示名を指定する。「AIチャット」および「関連情報」で利用される。
    • description:サービスの説明を指定する。「関連情報」で利用される。

tsukushiViewer

IIIF Tsukushi Viewerのフロントエンド動作に関わる設定を指定する。

  • tsukushiViewer
    • message:資料読み込み時に表示するメッセージに関する内容を指定する。
      • title:メッセージのタイトルを指定する。
      • description:メッセージの内容を指定する。

設定例

index.js

var iiifViewer = (function() {
    var config = {
        //Tsukushi Content Service
        contentService: {
            endpointUrl: 'https://codh.rois.ac.jp/tsukushi/api/v2/content-service/iiif-text',
            label: 'Tsukushi Content Service',
            description: [
                {
                    '@language': 'en',
                    '@value': 'A web service that offers the ability to register and search text using the fundamental unit of the IIIF as a RESTful API. Refer to <a href="/tsukushi/ai-chat/#tsukushi-content-service">Tsukushi Content Service</a> for details.'
                },
                {
                    '@language': 'ja',
                    '@value': 'IIIFの基本単位でテキストを登録し検索する機能をRESTful APIとして提供するウェブサービスです。詳しくは<a href="/tsukushi/ai-chat/#tsukushi-content-service">Tsukushi Content Service</a>をご覧下さい。'
                }
            ]
        },
        //Tsukushi Chat Service
        chatService: {
            endpointUrl: 'https://codh.rois.ac.jp/tsukushi/api/v2/chat-service',
            label: 'Tsukushi Chat Service',
            description: [
                {
                    '@language': 'en',
                    '@value': 'A web service offering chat functionality with a large language model via a JSON-RPC API based on the book content. Refer to <a href="/tsukushi/ai-chat/#tsukushi-chat-service">Tsukushi Chat Service</a> for details and <a href="/tsukushi/terms/">Privacy Policy / Terms of Use</a> when using this service.'
                },
                {
                    '@language': 'ja',
                    '@value': '本の内容に基づく大規模言語モデルとのチャット機能をJSON-RPC APIとして提供するウェブサービスです。詳しくは<a href="/tsukushi/ai-chat/#tsukushi-chat-service">Tsukushi Chat Service</a>を、また本サービスの利用にあたっては、<a href="/tsukushi/terms/">プライバシーポリシー/利用規約</a>をご覧ください。'
                }
            ],
            chatMethod: {
                book: {
                    method: 'manifest',
                    params: {
                        prompt: '',
                        manifest: ''
                    }
                },
                page: {
                    method: 'canvas',
                    params: {
                        prompt: '',
                        manifest: '',
                        canvas: ''
                    }
                },
                region: {
                    method: 'image',
                    params: {
                        prompt: '',
                        image_url: ''
                    }
                }
            },
            promptLibrary: {
                book: [
                    {
                        method: 'manifest',
                        library: 'summarize',
                        label: [
                            {
                                '@language': 'en',
                                '@value': 'Summarize'
                            },
                            {
                                '@language': 'ja',
                                '@value': '要約する'
                            }
                        ],
                        text: [
                            {
                                '@language': 'en',
                                '@value': 'Summarize the book'
                            },
                            {
                                '@language': 'ja',
                                '@value': '本全体の内容をまとめて'
                            }
                        ],
                        params: {
                            manifest: ''
                        }
                    }
                ],
                page: [
                    {
                        method: 'canvas',
                        library: 'summarize',
                        label: [
                            {
                                '@language': 'en',
                                '@value': 'Summarize'
                            },
                            {
                                '@language': 'ja',
                                '@value': '要約する'
                            }
                        ],
                        text: [
                            {
                                '@language': 'en',
                                '@value': 'Summarize the page'
                            },
                            {
                                '@language': 'ja',
                                '@value': 'ページの内容を要約して'
                            }
                        ],
                        params: {
                            manifest: '',
                            canvas: ''
                        }
                    },
                    {
                        method: 'canvas',
                        library: 'translate',
                        label: [
                            {
                                '@language': 'en',
                                '@value': 'Translate'
                            },
                            {
                                '@language': 'ja',
                                '@value': '翻訳する'
                            }
                        ],
                        text: [
                            {
                                '@language': 'en',
                                '@value': 'Translate the page to English'
                            },
                            {
                                '@language': 'ja',
                                '@value': 'ページを英語に翻訳して'
                            }
                        ],
                        params: {
                            manifest: '',
                            canvas: ''
                        }
                    }
                ],
                region: [
                    {
                        method: 'image',
                        library: 'summarize',
                        label: [
                            {
                                '@language': 'en',
                                '@value': 'Describe'
                            },
                            {
                                '@language': 'ja',
                                '@value': '記述する'
                            }
                        ],
                        text: [
                            {
                                '@language': 'en',
                                '@value': 'Describe the image'
                            },
                            {
                                '@language': 'ja',
                                '@value': '画像の内容を記述して'
                            }
                        ],
                        params: {
                            image_url: ''
                        }
                    }
                ]
            },
            models: {
              'claude-4-sonnet': {
                  label: 'claude-4-sonnet☆☆☆',
                  description: [
                      {
                          '@language': 'en',
                          '@value': 'Use the paid APIs provided by Anthropic. There is a limit of a maximum of 100 uses per 24 hours for all paid APIs combined. [ <a href="/tsukushi/ai-chat/#claude-4-sonnet" target="_blank">Detailed Information</a> ]'
                      },
                      {
                          '@language': 'ja',
                          '@value': 'Anthropicが提供する課金APIを利用します。すべての課金APIを合計して、24時間あたり最大100回の利用回数制限があります。[ <a href="/tsukushi/ai-chat/#claude-3-5-sonnet" target="_blank">詳細情報</a> ]'
                      }
                  ],
                  hasQuota: true
              },
              'gpt-4o': {
                  label: 'gpt-4o☆☆☆',
                  description: [
                      {
                          '@language': 'en',
                          '@value': 'Use the paid APIs provided by OpenAI. There is a limit of a maximum of 100 uses per 24 hours for all paid APIs combined. [ <a href="/tsukushi/ai-chat/#gpt-4o" target="_blank">Detailed Information</a> ]'
                      },
                      {
                          '@language': 'ja',
                          '@value': 'OpenAIが提供する課金APIを利用します。すべての課金APIを合計して、24時間あたり最大100回の利用回数制限があります。[ <a href="/tsukushi/ai-chat/#gpt-4o" target="_blank">詳細情報</a> ]'
                      }
                  ],
                  hasQuota: true
              },
              'gemini-2-flash': {
                  label: 'gemini-2.0-flash☆☆☆',
                  description: [
                      {
                          '@language': 'en',
                          '@value': 'Use the paid APIs provided by Google. There is a limit of a maximum of 100 uses per 24 hours for all paid APIs combined. [ <a href="/tsukushi/ai-chat/#gemini" target="_blank">Detailed Information</a> ]'
                      },
                      {
                          '@language': 'ja',
                          '@value': 'Googleが提供する課金APIを利用します。すべての課金APIを合計して、24時間あたり最大100回の利用回数制限があります。[ <a href="/tsukushi/ai-chat/#gemini" target="_blank">詳細情報</a> ]'
                      }
                  ],
                  hasQuota: true
              },
              'phi4': {
                  label: 'phi-4☆☆',
                  description: [
                      {
                          '@language': 'en',
                          '@value': 'Phi-4 released from Microsoft is a multilingual language model. [ <a href="/tsukushi/ai-chat/#phi4" target="_blank">Detailed Information</a> ]'
                      },
                      {
                          '@language': 'ja',
                          '@value': 'Microsoftが公開するPhi-4は、多言語の言語モデルです。[ <a href="/tsukushi/ai-chat/#phi4" target="_blank">詳細情報</a> ]'
                      }
                  ]
              },
              'gemma3': {
                  label: 'gemma3☆☆',
                  description: [
                      {
                          '@language': 'en',
                          '@value': 'Gemma 3 released from Google DeepMind is a multilingual and multimodal model. [ <a href="/tsukushi/ai-chat/#gemma3" target="_blank">Detailed Information</a> ]'
                      },
                      {
                          '@language': 'ja',
                          '@value': 'Google DeepMindが公開するGemma 3は、多言語のマルチモーダルモデルです。 [ <a href="/tsukushi/ai-chat/#gemma3" target="_blank">詳細情報</a> ]'
                      }
                  ]
              },
              'qwen': {
                  label: 'qwen2.5☆☆',
                  description: [
                      {
                          '@language': 'en',
                          '@value': 'Qwen2.5 released from Alibaba is a multilingual language model. [ <a href="/tsukushi/ai-chat/#qwen" target="_blank">Detailed Information</a> ]'
                      },
                      {
                          '@language': 'ja',
                          '@value': 'Alibabaが公開するQwen2.5は、多言語の言語モデルです。 [ <a href="/tsukushi/ai-chat/#qwen"  target="_blank">詳細情報</a> ]'
                      }
                  ]
              },
              'deepseek': {
                  label: 'deepseek-r1☆☆',
                  description: [
                      {
                          '@language': 'en',
                          '@value': 'DeepSeek-R1 released from DeepSeek is a multilingual language (inference) model. [ <a href="/tsukushi/ai-chat/#deepseek" target="_blank">Detailed Information</a> ]'
                      },
                      {
                          '@language': 'ja',
                          '@value': 'DeepSeekが公開するDeepSeek-R1は、多言語の言語(推論)モデルです。[ <a href="/tsukushi/ai-chat/#deepseek" target="_blank">詳細情報</a> ]'
                      }
                  ]
              },
              'gpt-oss': {
                  label: 'gpt-oss☆',
                  description: [
                      {
                          '@language': 'en',
                          '@value': 'gpt-oss released from OpenAI is an multilingual language model. [ <a href="/tsukushi/ai-chat/#gpt-oss" target="_blank">Detailed Information</a> ]'
                      },
                      {
                          '@language': 'ja',
                          '@value': 'OpenAIが公開するgpt-ossは、英語中心の言語モデルです。[ <a href="/tsukushi/ai-chat/#gpt-oss" target="_blank">詳細情報</a> ]'
                      }
                  ]
              },
              'llm-jp': {
                  label: 'LLM-jp☆☆',
                  description: [
                      {
                          '@language': 'en',
                          '@value': 'LLM-jp-3.1-13b-instruct4 released from the LLM Study Group is a Japanese-centric language model. [ <a href="/tsukushi/ai-chat/#llm-jp" target="_blank">Detailed Information</a> ]'
                      },
                      {
                          '@language': 'ja',
                          '@value': 'LLM勉強会が公開するLLM-jp-3.1-13b-instruct4は、日本語中心の言語モデルです。[ <a href="/tsukushi/ai-chat/#llm-jp" target="_blank">詳細情報</a> ]'
                      }
                  ]
              },
              'elyza': {
                  label: 'elyza☆',
                  description: [
                      {
                          '@language': 'en',
                          '@value': 'Llama-3-ELYZA-JP-8B released by Elyza is a Japanese-centric language model. [ <a href="/tsukushi/ai-chat/#elyza" target="_blank">Detailed Information</a> ]'
                      },
                      {
                          '@language': 'ja',
                          '@value': 'Elyzaが公開するLlama-3-ELYZA-JP-8Bは、日本語中心の言語モデルです。[ <a href="/tsukushi/ai-chat/#elyza" target="_blank">詳細情報</a> ]'
                      }
                  ]
              },
              'mistral': {
                  label: 'Mistral Small 3.2☆',
                  description: [
                      {
                          '@language': 'en',
                          '@value': 'Mistral small 3.2 released from Mistral AI is a multilingual language model. <a href="/tsukushi/ai-chat/#mistral" target="_blank">Detailed Information</a>.'
                      },
                      {
                          '@language': 'ja',
                          '@value': 'Mistral AIが公開するMistral Small 3.2は、多言語の言語モデルです。[ <a href="/tsukushi/ai-chat/#mistral" target="_blank">詳細情報</a> ]'
                      }
                  ]
              }
        },
        //Tsukushi OCR Service
        ocrService: {
            endpointUrl: 'https://codh.rois.ac.jp/tsukushi/api/v2/ocr-service',
            label: [
                {
                    '@language': 'en',
                    '@value': 'Kuzushiji OCR Service'
                },
                {
                    '@language': 'ja',
                    '@value': 'くずし字OCRサービス'
                }
            ],
            description: [
                {
                    '@language': 'en',
                    '@value': 'A web service that offers on-demand OCR functionality for premodern Japanese text. Refer to <a href="/tsukushi/ai-chat/#tsukushi-ocr-service">Tsukushi OCR Service</a> for details.'
                },
                {
                    '@language': 'ja',
                    '@value': '日本古典籍を対象としたオンデマンドくずし字OCR機能を提供するウェブサービスです。詳しくは<a href="/tsukushi/ai-chat/#tsukushi-ocr-service">Tsukushi OCR Service</a>をご覧下さい。'
                }
            ]
        },
        //IIIF Tsukushi Viewer
        tsukushiViewer: {
            message: {
                title: [
                    {
                        '@language': 'en',
                        '@value': 'Note on the Usage of Generative AI'
                    },
                    {
                        '@language': 'ja',
                        '@value': '生成AIの利用に関する注意事項'
                    }
                ],
                description: [
                    {
                        '@language': 'en',
                        '@value': 'The output of Generative AI should be verified by the original text or appropriate references.<br/>Some models have a limit of a maximum number of uses per 24 hours.'
                    },
                    {
                        '@language': 'ja',
                        '@value': '生成AIの出力内容は、原文や適切な情報源で確認してください。<br/>一部のモデルには、24時間あたりの利用回数制限があります。'
                    }
                ]
            }
        }
    };
    return IIIFTsukushiViewer(config);
})();

ライセンス

IIIF Tsukushi Viewer v3.0
http://codh.rois.ac.jp/software/iiif-tsukushi-viewer/

Copyright 2024 Center for Open Data in the Humanities, Research Organization of Information and Systems
Released under the MIT license

Core contributor: Jun HOMMA (@2SC1815J)

Licenses of open source libraries, see acknowledgements.txt

開発履歴

バージョン3.0 (2025-10-30)

  1. デザインの全面的な改良。
  2. 本、ページ、領域を対象としたチャットの統合、および会話のコンテキスト管理機能の改良。
  3. チャットのサジェスチョン機能の導入。
  4. Tsukushi OCR Serviceの導入。

バージョン2.0 (2024-11-11)

  1. IIIF Curation Viewer v2.0相当の機能に更新。

バージョン1.1 (2024-08-27)

  1. IIIF Presentation API 3.0のマニフェスト表示に対応。

バージョン1.0 (2024-07-18)

  1. 最初のバージョンを公開。