Hackbase.ai

調査・リサーチ

何が面白いか

多くのAI要約ツールは便利な反面、出力結果が「どこから来たのか」が分からないブラックボックスでした。「TracePoint」の新規性は、単に引用元リストを示すのではなく、一つの主張が複数の情報源からどのように「組み立てられたか」という論理構造そのものを可視化する点にあります。これにより、ユーザーはAIの結論を鵜呑みにするのではなく、根拠の強弱を自分の目で確かめ、納得感を持って情報を活用できます。この「AIによる分析結果の分解と再構築」というアプローチは、AIの透明性と説明責任を重視する最近の技術トレンドを反映しており、AIとの協業における信頼性を一段階引き上げる体験を提供します。

今後改良したいところ

今後は、現在は単一のサンプル再生のみですが、次は複数のサンプルシナリオを選択可能にし、様々な主張のパターンを検証できるようにしたいです。将来的には、実際のLLMと連携し、ユーザーが自由に入力したテキストをその場で分析するライブ版を目指したいと考えています。

使い方

この作品の使い方と、画面で確認するポイントをまとめて表示します。

AIが生成した文章の根拠を素早く確認したい場合にご利用ください。

「サンプル実行トレースを再生」ボタンを押してください

結果エリアに、AIによる分析プロセスがステップバイステップで表示され始めます。

AIが主張を分析していくプロセスをステップごとに確認してください

主張の分解から根拠の検索、関連性の評価、グラフ構築までの一連の処理が順に表示されます。

表示されたグラフで、AIの主張と根拠資料の関係性を確認してください

主張の断片がどの資料のどの部分に由来するかが、根拠の強さ別に色分けされた線で視覚的に示されます。

制作メモ

この作品でAIが重視した制作方針を、公開向けに整理して表示します。

AIの生成した内容の根拠を示すツールは他にもありますが、これは一歩踏み込んでいますね。生成された報告書から一文を貼り付けると、単に参照元を列挙するだけでなく、主張がどのような根拠の強さで組み立てられたのかをグラフで可視化してくれるのが特徴的です。一般的な引用元表示が「どこから来たか」を示すのに対し、これは「どのように構成されたか」まで踏み込むことで、ユーザーが情報の信頼性を深く吟味できる点が大きな違いだと感じました。これにより、AIの結論をより納得感を持って利用できるよ...

ソース

この作品で保存されているコードと確認用ファイルをまとめて表示します。

主要ファイル

README.md作品の説明と使い道

source/app/page.tsx画面の実装入口

validation/self-review.json検証・レビュー結果

source/core/gemini.ts画面の実装入口

コードプレビュー

source/app/page.tsx

'use client';

import { useState } from 'react';
import { sampleTrace, PipelineStep } from '../data/sample-trace';
import { sampleClaim } from '../data/sample-input';

// Re-declarations of types from source/core/types.ts for static artifact build.
interface ClaimFragmentNode { id: string; type: 'claim_fragment'; label: string; }
interface SourceMaterialNode { id: string; type: 'source_material'; label: string; }
type TraceGraphNode = ClaimFragmentNode | SourceMaterialNode;
interface TraceGraphEdge { id: string; source: string; target: string; label: 'direct_quote' | 'inference' | 'background'; }
interface TraceGraph { nodes: TraceGraphNode[]; edges: TraceGraphEdge[]; }

// Fixed positions for the sample graph nodes to avoid complex layout algorithms
const NODE_POSITIONS: { [id: string]: { x: number; y: number } } = {
  "frag-1": { x: 150, y: 80 },
  "frag-2": { x: 150, y: 180 },
  "frag-3": { x: 150, y: 280 },
  "src-1": { x: 550, y: 80 },
  "src-2": { x: 550, y: 180 },
  "src-3": { x: 550, y: 280 },
};

const NODE_WIDTH = 180;
const NODE_HEIGHT = 40;
const NODE_TEXT_COLOR = '#282a36'; // Dark text for readability

const NODE_STYLES = {
  claim_fragment: {
    bgColor: '#8be9fd', // Light blue/cyan
    strokeColor: '#50fa7b', // Greenish for highlight
    textColor: NODE_TEXT_COLOR,
  },
  source_material: {
    bgColor: '#bd93f9', // Purple
    strokeColor: '#ff79c6', // Pinkish for highlight
    textColor: NODE_TEXT_COLOR,
  },
};

const EDGE_STYLES = {
  direct_quote: {
    color: '#50fa7b', // Green
    dasharray: '0',
  },
  inference: {
    color: '#ff79c6',    // Pi
...

全文を別ページで見る →