Hackbase.ai

評価・採点

何が面白いか

「自分の書いた物語、本当に読者の心を掴めているだろうか？」FlowShaperは、そんなクリエイターの根源的な問いに、AIによる客観的な視点で答える新しい試みです。単なる文章校正ツールとは異なり、読者の感情の起伏や飽きてしまう危険な箇所を「感情グラフ」と「ラフな絵コンテ」で可視化するのが最大の特徴。最新のLLMによる物語構造の理解を応用し、作り手の主観だけでは見えなかった改善のヒントを発見できます。完成前に作品をプレビューする、あなただけの「物語の試写室」です。

今後改良したいところ

今後は、今は単一のサンプル分析を再生するだけですが、次はユーザーが自由なテキストを入力して、その場で簡易的な分析（モック）が動くようにしたいです。最終的には、様々なジャンルや文体に対応できる分析モデルを組み込んで、プロの作家の頼れる相棒にしたいと考えています。

使い方

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

FlowShaperは、あなたの物語が読者にどのような感情の起伏をもたらすかを予測し、視覚化します。

脚本やブログ記事の下書きを用意する

日本語のテキスト（例：「晴れた日の午後、少年は森の奥深くへと足を踏み入れた。小鳥のさえずりが彼を歓迎し、木漏れ日が道を照らす。しばらく進むと、突然、奇妙な音が聞こえてきた。

AIが物語の各シーンを詳細に分析する

プロダクトは「専門の物語分析者」として、分割された各テキストセグメントについて、感情の傾向（positive/negative/neutral）、喜び・悲しみ・驚き・怒りの感情スコア、エンゲージメントスコアを分析する設計です。さらに、読者がエンゲージメントを失う可能性のある箇所を予測し、各シーンのラフな絵コンテを生成するためのプロンプトも作成します。

分析結果と予測された絵コンテを表示する

感情グラフのイメージと、シーンごとの絵コンテが表示されます。例えば、エンゲージメント低下の可能性が指摘された箇所として「心臓の鼓動が速くなる。」といった具体的なテキストが示されます。

制作メモ

この作品で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 { sampleInput } from '../data/sample-input';
import { sampleTrace } from '../data/sample-trace';

// NOTE: Types are re-declared here to avoid importing from 'source/core'.
// This is a requirement for static CORE-LOGIC-FIRST artifacts.

type Emotion = {
  joy: number;
  sadness: number;
  surprise: number;
  anger: number;
};

type Segment = {
  text: string;
  sentiment: 'positive' | 'negative' | 'neutral';
  emotion: Emotion;
  engagementScore: number;
  storyboardImagePrompt: string;
  segmentIndex: number;
};

type ScriptAnalysisResult = {
  id: string;
  scriptInputId: string;
  segments: Segment[];
  overallSentimentScore: number;
  predictedEngagementLossPoints: number[];
};

export default function Home() {
  const [traceVisible, setTraceVisible] = useState(false);
  const analysis: ScriptAnalysisResult = sampleTrace.analysis;

  const styles = {
    container: { fontFamily: 'sans-serif', maxWidth: '1200px', margin: '0 auto', padding: '20px' },
    header: { textAlign: 'center' as const, marginBottom: '40px' },
    pipelineList: { listStyle: 'none', padding: 0, display: 'flex', justifyContent: 'center', gap: '20px', marginBottom: '20px' },
    pipelineStep: { background: '#f0f0f0', padding: '10px 15px', borderRadius: '8px' },
    buttonContainer: { textAlign: 'center' as const, margin: '20px 0' },
    button: { padding: '12px 24px', fontSize: '16px', cursor: 'pointer', border: 'none', background: '#0070f3', color: 'white', borderRadius: '8px' },
    studio: { display: 'flex', gap: '24px', marginTop: '20px' },
...

全文を別ページで見る →