Hackbase.ai

評価・採点

何が面白いか

退屈になりがちな発音練習を、「的を射る」という爽快なアーチェリーゲームに見立てた点がユニークです。既存のツールと違い、単なる正誤判定ではなく、Geminiの分析力で「なぜそのスコアなのか」を音素レベルで可視化し、遊び心のあるフィードバックを返すことで、楽しみながら上達できる短い挑戦のループを実現します。音声処理はサンプルデータですが、将来的にはオンデバイスの音声認識と組み合わせることで、プライバシーを守りつつ、どこでも手軽に遊べる体験を目指すという技術的な面白さも持っています。

今後改良したいところ

今後は、今は関西弁のサンプル一つだけですが、次は全国の方言や海外のアクセントにも対応して、声で遊べる世界の地図を作りたいです！プリセットを共有する機能もつけたいですね。

使い方

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

Accent Archerは、地域アクセントの発音練習を支援するツールとして設計されています。

お手本フレーズの取得

発音練習のためのお手本フレーズがシステムによって準備されます。リアルタイムのアプリケーションではデータベースから取得されますが、このデモでは固定のサンプルデータを使用します。例として、『関西弁』の『もうかりまっか？

ユーザー音声の音素化 (シミュレーション)

ユーザーが発音した音声は、自動音声認識（ASR）によって音素のシーケンスに変換される設計です。このデモでは、お手本フレーズとわずかに異なる音素列がユーザーの発音としてシミュレートされます。例として、『m, o, k, a, r, i, m, a, :, k, a, ?

Geminiによる発音分析

AIモデルGeminiは、『Accent Archer』として、ユーザーの音素列とお手本の音素列を比較し、発音の正確さを採点します。類似性に基づいて0から100のスコアを算出し、弓道にちなんだフィードバックメッセージと、音素ごとの一致/不一致の詳細な結果をJSON形式で出力する設計です。例として、スコア『85』と『お見事！

制作メモ

この作品で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 { pipelineSteps, completeTrace } from '../data/sample-trace';

// NOTE: Core logic types are re-declared here to avoid importing from source/core/**
// This is a strict requirement for static artifact builds.
type PhonemeMatchResult = {
  phoneme: string;
  match: boolean;
  details: string;
};

interface AccentAnalysisResult {
  score: number;
  feedback: string;
  results: PhonemeMatchResult[];
}

export default function Home() {
  const [traceLog, setTraceLog] = useState<string[]>([]);
  const [currentStep, setCurrentStep] = useState(0);
  const [finalResult, setFinalResult] = useState<AccentAnalysisResult | null>(null);
  const [isRunning, setIsRunning] = useState(false);

  const handleReplay = () => {
    if (isRunning) return;
    setIsRunning(true);
    setTraceLog(['実行開始...']);
    setCurrentStep(0);
    setFinalResult(null);

    const interval = setInterval(() => {
      setCurrentStep(prev => {
        const nextStep = prev + 1;
        if (nextStep > pipelineSteps.length) {
          clearInterval(interval);
          setFinalResult(completeTrace.finalOutput);
          setTraceLog(prevLog => [...prevLog, '分析完了！']);
          setIsRunning(false);
          return prev;
        }
        setTraceLog(prevLog => [...prevLog, `ステップ${nextStep}: ${pipelineSteps[nextStep - 1].name} 完了`]);
        return nextStep;
      });
    }, 500);
  };

  const renderResultForStep = (stepIndex: number) => {
    if (currentStep <= stepIndex) return null;
    const step = pipelineSteps[stepIndex];
    const output = completeTr
...

全文を別ページで見る →