Reactで、2つの文章がどれだけ似ているかを数値で出す方法

"🐈‍⬛と遊ぶ".length = 7, "🐈と遊ぶ".length = 5
fastest-levenshtein の distance: 2
書記素で分けた levenshtein  : 1

const graphemes = new Intl.Segmenter('ja', { granularity: 'grapheme' });

// 全角・半角と大文字・小文字をそろえ、空白と句読点を除いてから、1文字ずつ（書記素ごと）の配列にする
export function toChars(text: string): string[] {
  const s = text.normalize('NFKC').toLowerCase().replace(/[\s\p{P}]/gu, '');
  return Array.from(graphemes.segment(s), (g) => g.segment);
}

// レーベンシュタイン距離：a を b にするのに要る、1文字の挿入・削除・置き換えの最小の回数
export function levenshtein(a: string[], b: string[]): number {
  if (a.length < b.length) [a, b] = [b, a]; // 短いほうを横に並べて、配列を小さくする
  let prev = Array.from({ length: b.length + 1 }, (_, j) => j);
  for (let i = 1; i <= a.length; i++) {
    const cur = [i];
    for (let j = 1; j <= b.length; j++) {
      const cost = a[i - 1] === b[j - 1] ? 0 : 1;
      cur[j] = Math.min(prev[j] + 1, cur[j - 1] + 1, prev[j - 1] + cost);
    }
    prev = cur;
  }
  return prev[b.length];
}

// 編集距離をもとにした似ている度合い（0〜1）。長いほうの文字数で割る
export function editSimilarity(a: string[], b: string[]): number {
  const len = Math.max(a.length, b.length);
  return len === 0 ? 1 : 1 - levenshtein(a, b) / len;
}

// 隣り合う2文字（bigram）ごとの回数。1文字しかないときは、その1文字を使う
function bigrams(chars: string[]): Map<string, number> {
  const m = new Map<string, number>();
  if (chars.length === 1) m.set(chars[0], 1);
  for (let i = 0; i < chars.length - 1; i++) {
    const g = chars[i] + chars[i + 1];
    m.set(g, (m.get(g) ?? 0) + 1);
  }
  return m;
}

// ダイス係数（0〜1）：2 ×（共通する bigram の数）÷（両方の bigram の数の合計）
export function diceSimilarity(a: string[], b: string[]): number {
  const A = bigrams(a), B = bigrams(b);
  let sizeA = 0, sizeB = 0, common = 0;
  for (const n of A.values()) sizeA += n;
  for (const [g, n] of B) {
    sizeB += n;
    common += Math.min(n, A.get(g) ?? 0);
  }
  return sizeA + sizeB === 0 ? 1 : (2 * common) / (sizeA + sizeB);
}

import { useId, useState } from 'react';
import { diceSimilarity, editSimilarity, toChars } from './similarity';

const percent = (x: number) => `${Math.round(x * 100)}%`;
// 編集距離は（文字数）×（文字数）回の計算になるので、2000字どうしを超えたら計算しない
const MAX_CELLS = 2000 * 2000;

export function TextSimilarity() {
  const [a, setA] = useState('猫が犬を追いかけた。');
  const [b, setB] = useState('犬が猫を追いかけた。');
  const idA = useId();
  const idB = useId();

  const charsA = toChars(a);
  const charsB = toChars(b);
  const edit = charsA.length * charsB.length <= MAX_CELLS ? editSimilarity(charsA, charsB) : null;
  const dice = diceSimilarity(charsA, charsB);

  return (
    <div className="text-similarity">
      <label htmlFor={idA}>文章1</label>
      <textarea id={idA} rows={2} value={a} onChange={(e) => setA(e.target.value)} />
      <label htmlFor={idB}>文章2</label>
      <textarea id={idB} rows={2} value={b} onChange={(e) => setB(e.target.value)} />

      <dl>
        <dt>編集距離で見た似ている度合い</dt>
        <dd>
          {edit === null ? (
            <output>長すぎるため計算しません</output>
          ) : (
            <>
              <meter min={0} max={1} value={edit} /> <output>{percent(edit)}</output>
            </>
          )}
        </dd>
        <dt>2文字ずつ（ダイス係数）で見た似ている度合い</dt>
        <dd>
          <meter min={0} max={1} value={dice} /> <output>{percent(dice)}</output>
        </dd>
      </dl>
    </div>
  );
}