自立活動の話し合いお助けツール

話し合った内容を自立活動の６区分に自動で分類します。音声入力をオンにして使ってみてください！

↓↓ここに入力してください↓↓

setInputText(e.target.value)}
              placeholder="ここに文章を入力するか、音声入力ボタンを押してください..."
              className="w-full h-40 p-3 pr-12 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
            />
            <button
              onClick={isListening ? stopListening : startListening}
              className={`absolute top-3 right-3 p-2 rounded-full transition-colors ${
                isListening
                  ? "bg-red-500 text-white hover:bg-red-600"
                  : "bg-gray-200 text-gray-600 hover:bg-gray-300"
              }`}
              title={isListening ? "音声入力を停止" : "音声入力を開始"}
            >
              {isListening ? (
                <div className="flex items-center justify-center">
                  <div className="w-4 h-4 bg-white rounded-full animate-pulse"></div>
                </div>
              ) : (
                <i className="fas fa-microphone w-4 h-4"></i>
              )}
            </button>
          </div>

{isListening && (
            <div className="mt-2 text-sm text-blue-600 flex items-center">
              <div className="animate-pulse mr-2">🎤</div>
              音声を聞いています...
            </div>
          )}

<div className="flex gap-3 mt-4">
            <button
              onClick={handleCorrectText}
              disabled={loading || !inputText.trim()}
              className="flex-1 bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
            >
              {loading ? (
                <div className="flex items-center justify-center">
                  <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
                  処理中...
                </div>
              ) : (
                "訂正・箇条書き変換"
              )}
            </button>

{error && (
            <div className="mt-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded-md">
              {error}
            </div>
          )}
        </div>

{correctedText && (
          <div className="bg-white rounded-lg shadow-md p-6 mb-6">
            <h2 className="text-lg font-semibold text-gray-900 mb-3">
              訂正・箇条書き結果
            </h2>
            <div className="bg-gray-50 p-4 rounded-md mb-4">
              <pre className="whitespace-pre-wrap text-gray-800 font-sans leading-relaxed">
                {correctedText}
              </pre>
            </div>

<div className="flex gap-3">
              <button
                onClick={() => navigator.clipboard.writeText(correctedText)}
                className="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors"
              >
                結果をコピー
              </button>

<button
                onClick={handleClassifyText}
                disabled={classifyLoading}
                className="px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
              >
                {classifyLoading ? (
                  <div className="flex items-center justify-center">
                    <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
                    分類中...
                  </div>
                ) : (
                  "6項目に分類"
                )}
              </button>
            </div>
          </div>
        )}

{classifiedText && (
          <div className="bg-white rounded-lg shadow-md p-6">
            <h2 className="text-lg font-semibold text-gray-900 mb-3">
              6項目分類結果
            </h2>
            <div className="bg-gray-50 p-4 rounded-md">
              <pre className="whitespace-pre-wrap text-gray-800 font-sans leading-relaxed">
                {classifiedText}
              </pre>
            </div>

<button
              onClick={() => navigator.clipboard.writeText(classifiedText)}
              className="mt-3 px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors"
            >
              分類結果をコピー
            </button>
          </div>
        )}
      </div>
    </div>
  );
}
</article></body></html>