CursorがDuckDB-Wasm + VSS な論文マッチングWEBアプリを作ったよ
q‑finder: 素敵な金融論文と出会いポロリを探求しよう
金融・投資分野の最新研究を、スワイプひとつで。
TL;DR
- q‑finder は arXiv q‑fin 論文を Tinder ライクな UI でサクサク仕分けできる PWA
- DuckDB‑wasm で ブラウザ内 SQL、Google Gemini で日本語 3 行サマリ＋トレーダー向けスコア
- 完全サーバレス & フレームワークレス。S3 + CloudFront に置くだけで世界中へデプロイ
- オフライン動作、ベクトル検索、Like ベースのレコメンドまで全部ブラウザで完結
デモ: https://qfinder.p-hunters.com
なぜ作ったのか
GWは暇なものです。
金融の世界は情報が命。ところが、論文探索は未だに arXiv 検索窓＋ PDF ダウンロードの繰り返し……。 "もっとカジュアルに論文を漁りたい" という欲望から生まれたのが q‑finder です。
ポロリとは：https://x.com/search?q=エッジ ポロリ&src=typed_query&f=top
プロダクト概要
| 機能 | ひと言で | 技術ハイライト |
|---|---|---|
| Tinder 風スワイプ | 右＝Like / 左＝Skip | CSS アニメーション + スワイプ検出 |
| リアルタイムフィルタ | 年・サブカテゴリなど即絞り込み | DuckDB WHERE 句 |
| AI 要約 & スコア | 日本語 3 行 + 0‑10 点の有用度 | Google Gemini |
| フルブラウザ処理 | SQL もベクトル検索も JS で完結 | DuckDB‑wasm + WebAssembly SIMD |
| PWA & オフライン | トンネル移動中でも読める | Service Worker, Cache Storage |
アーキテクチャ図
[arXiv] ─▶ S3(Parquet) ─▶ CloudFront
│
├─▶ q‑finder (PWA)
│ ├─ DuckDB‑wasm
│ └─ Gemini summarizer API
│
└─▶ AWS Lambda (Container)
└─ Gemini API
技術スタック詳細
フロントエンド（ブラウザ）
- HTML/CSS/Vanilla JS —— 依存ゼロで最速描画.Plain HTMLでフレームワークも未使用.
- DuckDB‑wasm —— Parquet 直読み & SQL 実行
- Apache Parquet —— 軽量カラム指向フォーマット
- Service Worker —— キャッシュ戦略 + オフライン
クラウド / インフラ
- 静的ホスティング: S3 + CloudFront
- AI 要約: AWS Lambda (Container) + Google Gemini API
- IaC: Terraform
01. DuckDB‑wasm で"サーバいらず"の全文検索
// DuckDB 初期化（最短パターン）
import * as duckdb from "@duckdb/duckdb-wasm";
const db = await duckdb.createDuckDB();
await db.openParquet("papers.parquet");
const papers = await db.query(`
SELECT title, published
FROM papers
WHERE categories LIKE '%q-fin%' AND EXTRACT(YEAR FROM published) >= 2023
ORDER BY published DESC;
`);
- DuckDB-Wasm + VSS でブラウザで高速検索
- CloudFront から配信された Parquet を
fetch()で直ロード
02. ベクトル埋め込みで"意味"検索
BigQuery + Vertex AI で Embeddings を生成し、768次元のベクトルを Parquet に保存。ブラウザでは以下の 3 ステップで類似論文を取得します。
- クエリを Embedding に変換
- DuckDB-Wasm + VSS で
cosine_distance()を使って類似度計算 ORDER BY similarity DESC LIMIT 10
const result = await conn.query(`
SELECT arxiv_id, title,
1 - cosine_distance(ml_generate_embedding_result, ?) AS similarity_score
FROM papers_embeddings
ORDER BY similarity_score DESC
LIMIT 10;
`, [queryEmbedding]);
ポイント: 計算コストはすべてユーザーの CPU。サーバーは 0 円！
03. Gemini API で 3 行サマリ + スコアリング
Lambda (コンテナ) 経由で Gemini を呼び出し、次の JSON を返します。
{
"id": "2201.12345",
"title": "Market Efficiency in Crypto Markets",
"s1": "この論文は暗号通貨市場の効率性について分析している",
"s2": "従来の金融市場と比較して特異な価格形成メカニズムを発見した",
"s3": "市場の非効率性から生じる裁定機会について議論している",
"score": "8",
"score_reason": "暗号通貨トレーダーにとって市場の非効率性は直接的な収益機会につながるため"
}
Why Lambda?
- 常時稼働サーバ0 → コスト削減（リクエストがあるときだけ起動）
- コンテナで依存ライブラリを固めて 1 コマンドデプロイ
04. NotebookLM連携とPodcast機能
q-finderには論文理解を促進するユニークな機能として、NotebookLMとの連携と論文Podcastの共有システムを実装しています。
[論文] ──▶ NotebookLM ──▶ Podcast録音 ──▶ q-finder
│
▼
[Whisper で字幕生成] ──▶ VTTファイル
NotebookLM連携
各論文の詳細ページには「Open NotebookLM」ボタンがあり、ワンクリックで以下が可能です：
- 論文PDFのURLを自動的にクリップボードにコピー
- NotebookLMを新しいタブで開く
- ユーザーがNotebookLMに論文をインポートして深い分析が可能
// NotebookLM連携コード例
function openNotebookLM() {
// PDFのURLをクリップボードにコピー
let paperPdfUrl = document.querySelector('.paper-link[href]');
navigator.clipboard.writeText(paperPdfUrl.href);
// 新しいタブでNotebookLMを開く
window.open('https://notebooklm.google.com/', '_blank');
}
Podcastアップロード機能
論文に関する音声解説（Podcast）をアップロード・共有できる機能も実装しています：
- NotebookLMで生成されたAI解説や、自分の解説音声をアップロード
- バックエンドでMP3に自動変換（WAVやMP4も対応）
- Whisperによる自動文字起こしで字幕（VTTファイル）生成
- ブラウザで字幕付きプレーヤーとして再生可能
このPodcast機能により、視覚的だけでなく聴覚的にも論文内容を理解できるようになり、移動中や作業しながらの論文探索が可能になります。
実装のポイント
- 音声・動画ファイルはAWS S3にアップロード、CloudFrontで配信
- 字幕はWebVTT形式で保存し、HTMLのtrack要素でプレーヤーに追加
- カスタム字幕表示UIで視認性を向上
- Service Workerでオフライン再生対応
今後のロードマップ
- パーソナライズされた推薦機能: ユーザーの「いいね」履歴に基づいた論文推薦
- 複数データソース対応: arXiv以外の論文ソースも統合
- コメント機能: AI/ユーザー間での論文に関するディスカッション
- Podcast生成機能: NotebookLMとの連携を深め、AIによる論文解説音声の自動生成
コントリビュート歓迎！ 特にNotebookLMの音声作成・アップロードをお願いしたいです。
金融に興味ある学生さん、月1,600円くらいするGoogle Workspaceのアカウントを無償発行するのでDMください(https://x.com/HunterP0r0ry)
※10名くらいまで. q-finder以外の用途でのNotebookLMノートブック作成もOK
まとめ
q‑finder は "論文の発見" をエンタメに変える試みです。DuckDB‑wasm × Gemini という オールブラウザ アプローチが、Web アプリの新しい可能性を示すと信じています。ぜひ触ってフィードバックをお寄せください！
▶︎ 触ってみる: https://qfinder.p-hunters.com
次回予告
今回は簡単なサービス紹介と技術概要にとどめました。
個人的にDuckDB‑wasmが面白いので反響あれば続編もCursorが執筆してくれるかもしれません。
次回は 「DuckDB‑wasm で実装するブラウザ内大規模データ処理」 を深掘り予定。お楽しみに！
Discussion