ホーム 記事一覧 ブック DH週間トピックス 検索 このサイトについて
English
openai-assistants-quickstartの微修正

openai-assistants-quickstartの微修正

概要 OpenAIのAssistants APIを用いたRAG( Retrieval-augmented generation)を用いたチャット画面の構築にあたり、以下のリポジトリを使用しました。 https://github.com/openai/openai-assistants-quickstart この時、citationの扱いについて修正が必要であったため、備忘録としてメモします。 背景 上記のリポジトリを使い、OpenAIのAssistants APIを用いたRAGを試みました。 この時、デフォルトの設定では、以下のように、「4:13†」のように、引用箇所を示す記号がそのまま表示されてしまいました。 対策 annotateLastMessageを以下のように修正しました。file_pathをfile_citationに変更することで、引用箇所を置換することができた。 一例として、以下では、File APIへのリンクに置換しています。 const annotateLastMessage = (annotations) => { // Get the current messages setMessages((prevMessages) => { const lastMessage = prevMessages[prevMessages.length - 1]; const updatedLastMessage = { ...lastMessage, }; annotations.forEach((annotation) => { if (annotation.type === "file_citation") { updatedLastMessage.text = updatedLastMessage.text.replaceAll( annotation.text, `[リンク](/api/files/${annotation.file_citation.file_id})` ); } }); return [...prevMessages.slice(0, -1), updatedLastMessage]; }); }; 結果、以下のようにリンクが表示されました。 まとめ 目的に応じて、置換の内容を変更できるかと思います。参考になりましたら幸いです。

GakuNin RDMをNext.jsから使用する

GakuNin RDMをNext.jsから使用する

概要 GakuNin RDMをNext.jsから使用する備忘録です。 背景 以下の記事で、NextAuth.jsを使って、GakuNin RDMの認証を行う方法を紹介しました。 この延長で、GakuNin RDMのデータをロードするNext.jsのアプリを試作します。 デモ GakuNin RDMの認証が使用できる方に限られますが、以下からお試しいただけます。 https://rdm-app.vercel.app/ 例えば以下は、接続したストレージの一覧を確認するページです。 選択したストレージ(ここではosfstorage)におけるフォルダやファイルの一覧です。 以下は、figshareに登録したファイルを参照している例です。 osfstorageやfigshare、GitHubなど、さまざまなストレージに格納されたデータを共通のAPIから利用できる点は便利だと感じました。 GitHubのリポジトリは以下です。 https://github.com/nakamura196/rdm_app まとめ 現時点(データをロードするだけ)においては、本アプリを使用する利点はありませんが、今後、他のアプリとの連携などを通じて、GakuNin RDMのデータを活用できればと思います。 参考になりましたら幸いです。

NextAuth.jsを使って、ORCID・The Open Science Framework・ GakuNin RDMの認証を行う

NextAuth.jsを使って、ORCID・The Open Science Framework・ GakuNin RDMの認証を行う

概要 NextAuth.jsを使って、ORCID・OSF(The Open Science Framework)・ GRDM(GakuNin RDM)の認証を行う方法です。 デモアプリ ORCID https://orcid-app.vercel.app/ OSF https://osf-app.vercel.app/ GRDM https://rdm-app.vercel.app/ リポジトリ ORCID https://github.com/nakamura196/orcid_app 以下がオプションの記述例です。 https://github.com/nakamura196/orcid_app/blob/main/src/app/api/auth/[…nextauth]/authOptions.js export const authOptions = { providers: [ { id: "orcid", name: "ORCID", type: "oauth", clientId: process.env.ORCID_CLIENT_ID, clientSecret: process.env.ORCID_CLIENT_SECRET, authorization: { url: "https://orcid.org/oauth/authorize", params: { scope: "/authenticate", response_type: "code", redirect_uri: process.env.NEXTAUTH_URL + "/api/auth/callback/orcid", }, }, token: "https://orcid.org/oauth/token", userinfo: { url: "https://pub.orcid.org/v3.0/[ORCID]", async request({ tokens }) { const res = await fetch(`https://pub.orcid.org/v3.0/${tokens.orcid}`, { headers: { Authorization: `Bearer ${tokens.access_token}`, Accept: "application/json", }, }); return await res.json(); }, }, profile(profile) { return { id: profile["orcid-identifier"].path, // ORCID の ID を取得 name: profile.person?.name?.["given-names"]?.value + " " + profile.person?.name?.["family-name"]?.value, email: profile.person?.emails?.email?.[0]?.email, }; }, }, ], callbacks: { async session({ session, token }) { session.accessToken = token.accessToken; session.user.id = token.orcid; // ORCID ID をセッションに追加 return session; }, async jwt({ token, account }) { if (account) { token.accessToken = account.access_token; token.orcid = account.orcid; } return token; }, }, }; OSF https://github.com/nakamura196/osf-app ...

Knight LabのTimelineJSやStoryMapJSをNext.jsから利用する

Knight LabのTimelineJSやStoryMapJSをNext.jsから利用する

概要 Knight LabのTimelineJSやStoryMapJSをNext.jsから利用する方法のメモです。 背景 Knight LabのTimelineJSやStoryMapJSは、デジタルストーリーテリングのためのオープンソースツールです。 https://knightlab.northwestern.edu/ データ 以下で公開されている『渋沢栄一伝記資料』のテキストデータを利用します。 https://github.com/shibusawa-dlab/lab1 リポジトリ 以下で公開しています。 https://github.com/nakamura196/shibusawa ストーリーマップ 以下のようなコンポーネントを用意することで、Next.jsからも利用することができました。 https://github.com/nakamura196/shibusawa/blob/main/src/components/Storymap.tsx TypeScriptの利用にあたり、以下の型定義ファイルも作成しました。 https://github.com/nakamura196/shibusawa/blob/main/src/global.d.ts 以下のように表示することができました。 https://shibusawa.vercel.app/storymap/1868-08-02 タイムライン ストーリーマップ同様、タイムラインについても以下のようなコンポーネントを作成しました。 https://github.com/nakamura196/shibusawa/blob/main/src/components/Timeline.tsx 以下のように表示することができました。 https://shibusawa.vercel.app/timeline/1868 ただし、タイムラインについては、以下でES6 modules/webpackが公開されていることに後から気がつきました。こちらの使い方について、別途調査したいと思います。 https://www.npmjs.com/package/@knight-lab/timelinejs まとめ デジタル・ヒューマニティーズ(DH)の分野で広く活用されているTimelineJSやStoryMapJSについて、データの視覚化や物語の構築を行う際の参考になりましたら幸いです。 なお、これらのツールはプログラムを介さず、Googleスプレッドシートを入力として、可視化アプリを作成することもできます。こちらも参考になりましたら幸いです。 https://timeline.knightlab.com/ https://storymap.knightlab.com/

ZoteroのAPIをNext.jsから使う

ZoteroのAPIをNext.jsから使う

概要 ZoteroのAPIをNext.jsから使う方法を調べましたので、備忘録です。結果、以下のアプリケーションを作成しました。 https://zotero-rouge.vercel.app/ ライブラリ 以下のライブラリを使用しました。 https://github.com/tnajdek/zotero-api-client API Keyなどの取得 以下の記事を参考にしてください。 使い方 コレクション一覧 // app/api/zotero/collections/route.js import { NextResponse } from "next/server"; import api from "zotero-api-client"; import { prisma } from "@/lib/prisma"; import { decrypt } from "../../posts/encryption"; import { getSession } from "@auth0/nextjs-auth0"; async function fetchZoteroCollections( zoteroApiKey: string, zoteroUserId: string ) { const myapi = api(zoteroApiKey).library("user", zoteroUserId); const collectionsResponse = await myapi.collections().get(); return collectionsResponse.raw; } 特定のコレクション // app/api/zotero/collection/[id]/route.ts import { NextResponse } from "next/server"; import api from "zotero-api-client"; import { prisma } from "@/lib/prisma"; import { decrypt } from "@/app/api/posts/encryption"; import { getSession } from "@auth0/nextjs-auth0"; async function fetchZoteroCollection( zoteroApiKey: string, zoteroUserId: string, collectionId: string ) { const myapi = api(zoteroApiKey).library("user", zoteroUserId); const collectionResponse = await myapi.collections(collectionId).get(); return collectionResponse.raw; } 特定のコレクション内のアイテム一覧 // app/api/zotero/collection/[id]/items/route.ts import { NextResponse, NextRequest } from "next/server"; import api from "zotero-api-client"; import { prisma } from "@/lib/prisma"; import { decrypt } from "@/app/api/posts/encryption"; import { getSession } from "@auth0/nextjs-auth0"; async function fetchZoteroCollection( zoteroApiKey: string, zoteroUserId: string, collectionId: string ) { const myapi = api(zoteroApiKey).library("user", zoteroUserId); const collectionResponse = await myapi .collections(collectionId) .items() .get(); return collectionResponse.raw; 参考 アプリケーションはVercelにホスティングされており、データベースにはVercel Postgres、ORMにはPrismaを使用しました。UIはTailwind CSSで構築され、ChatGPTのデザイン提案を使用しました。また、認証にはAuth0を採用しています。 まとめ ZoteroのAPI利用にあたり、参考になりましたら幸いです。 ...

LEAF WriterをNext.jsから使用する

LEAF WriterをNext.jsから使用する

概要 LEAF WriterをNext.jsから使用する方法について紹介します。 デモ 以下のURLからお試しいただけます。 https://leaf-writer-nextjs.vercel.app/ 以下が画面例です。ヘッダー部分がNext.jsを用いて追加した部分です。エディタ部分はLEAF Writerを使用しています。 ソースコードは以下でご確認いただけます。 https://github.com/nakamura196/leaf-writer-nextjs 使用方法 以下に記載があります。 https://gitlab.com/calincs/cwrc/leaf-writer/leaf-writer/-/tree/main/packages/cwrc-leafwriter?ref_type=heads 注意点として、div containerのidをleaf-writer-containerにする必要があります。これを行わない場合、スタイルが崩れることがわかりました。この点は、今後プルリクエストを送りたいと思います。 # const container = document.getElementById('#leaf-writer'); const container = document.getElementById('#leaf-writer-container'); まとめ LEAF Writerの応用にあたり、参考になりましたら幸いです。

Next.jsでアンダースコアから始まるURLセグメントを利用する

Next.jsでアンダースコアから始まるURLセグメントを利用する

概要 </api/_search> のようなAPIを作成するにあたり、アンダースコアから始まるURLセグメントを作成する方法を調べましたので、備忘録です。 方法 以下に記載がありました。 https://nextjs.org/docs/app/building-your-application/routing/colocation#:~:text=js file conventions.-,Good to know,-While not a 以下、日本語訳です。 URLセグメントでアンダースコアから始まる部分を作成するには、フォルダー名に %5F(アンダースコアのURLエンコード形式)を付けてください。例: %5FfolderName。 /api/%5Fsearch/route.ts のようにファイルを作成することで、解決することができました。 まとめ 参考になりましたら幸いです。

Next.jsを用いたTEI/XMLファイルの簡易ビューアを作成しました

Next.jsを用いたTEI/XMLファイルの簡易ビューアを作成しました

概要 TEI/XMLファイルの内容を表示する簡易なビューアを作成しました。 https://github.com/utda/tei-viewer 校異源氏物語のTEI/XMLを対象とした表示例は以下です。 https://utda.github.io/tei-viewer/?u=https://kouigenjimonogatari.github.io/tei/01.xml&v=true 使い方 最低限の機能として、IIIFマニフェストファイルが関連付けられている場合には、Miradorビューアが表示されるようにしました。関連付けの方法としては、以下のフォーマットをベースとしています。 https://github.com/TEI-EAJ/jp_guidelines/wiki/IIIF画像とのリンク またpbタグのn属性が与えられている場合は、ページ番号が表示される機能を提供します。さらに日本語への対応として、クエリパラメータにv=trueを与えた場合、縦書きテキストが表示されます。 https://github.com/utda/tei-viewer/blob/main/src/app/components/Ceteicean.tsx その他 フレームワークにはNext.js、TEI/XMLの表示スタイルにはCETEICeanを使用しました。 https://github.com/utda/tei-viewer/blob/main/src/app/CETEIcean.css そのほか、以下の記事を参考に、GitHubリポジトリとZenodoの連携を試行しています。 改善の余地があるかと思いますが、以下のコマンドを使って、新しいリリースを作成しています。 "release": "npm version patch && git push origin --tags && VERSION=$(node -pe \"require('./package.json').version\") && gh release create \"v$VERSION\" --title \"Version $VERSION\"" 今後 pbタグとMiradorビューアの画像表示が対応する機能を追加したいと思います。 まとめ TEI/XMLファイルの可視化にあたり、参考になりましたら幸いです。

Next.jsでジャパンサーチのウェブパーツを使う

Next.jsでジャパンサーチのウェブパーツを使う

概要 ジャパンサーチでは、ジャパンサーチ内で使われている画面の構成要素を、部品としてジャパンサーチ以外のウェブサイトでも利用できる機能であるウェブパーツを提供しています。 https://jpsearch.go.jp/static/developer/webparts/ja.html 今回、Next.jsで本機能を使用する機会がありましたので、その備忘録です。 使用例 以下のページでご確認いただけます。 https://jps-2023-next.vercel.app/jps ソースコード 以下で公開しています。 https://github.com/nakamura196/jps_2023_next 以下のように、Scriptタグを使ってjsファイルを読み込むことで、うまく表示させることができました。 <Layout> <Script src="https://jpsearch.go.jp/assets/js/wp.bundle.js"></Script> <Container sx={{ my: 5, }} > <p> 東京大学「総合図書館バーチャルミュージアム」を改変して作成しています。 </p> <div className="jps" data-lang="ja" data-cur={data}></div> </Container> </Layout> まとめ ジャパンサーチのウェブパーツを同様の環境でお使いになられる際の参考になりましたら幸いです。