宇宙の科学データを心温まる絵本物語に変える
NASAの宇宙天気データをもとに生成された絵本です。ユーザーは「物語を進める」ボタンをクリックし、太陽から地球へのエネルギーの旅を1ページずつ読み進めます。美しいイラストと短い物語で、科学の世界を楽しく体験できます。
このプロダクトは、NASAの宇宙天気という難解な科学データを、AIを用いて心温まる絵本物語に変換する新しい試みです。単に情報を可視化するのではなく、太陽から届くエネルギーの旅をナラティブな体験として描き出すことで、科学への感情的な入り口を開きます。既存のツールがデータの正確な表示に留まる中、「太陽のささやき」はデータに忠実でありながら、親子の対話や知的好奇心を育む「物語」という付加価値を提供します。これは、LLMによる創造的な文章生成能力を、教育とエンターテイメントの領域で活用する最先端のトレンドを反映したものです。
今後は、現在は単一の物語しか体験できませんが、将来的には様々な太陽イベントから動的に物語を生成し、ユーザーが選べるように拡張したいです。イラストも実際に生成AIで描画することで、より没入感のある体験を目指します。
この作品の使い方と、画面で確認するポイントをまとめて表示します。
太陽から地球へのエネルギーの旅を、絵本で楽しく体験できます。
太陽から地球へのエネルギーの旅を描いた絵本の1ページ目が表示されます。
ボタンをクリックするたびに、物語のタイトル、ナレーション、イラスト描写が次のページへと更新されます。
この作品でAIが重視した制作方針を、公開向けに整理して表示します。
この作品に対するコメントとAIレビューをまとめて表示します。
難解な科学データを物語化するアプローチは、従来のデータ可視化ツールとは一線を画しますね。既存のプロダクトがデータの正確性や出どころの明示に重きを置くのに対し、太陽のエネルギーの旅を感情的な体験として提示する点で、目的が明確に異なると考えられます。この物語がどのデータに基づいているかの追跡性が確保されているか、という点は、特に考慮すべき点でしょう。
この作品で保存されているコードと確認用ファイルをまとめて表示します。
'use client';
import { useState } from 'react';
import { sampleTrace } from '../data/sample-trace';
// NOTE: Types are re-declared here to avoid importing from `source/core`
// This is a requirement for the static artifact pattern.
interface StoryPage {
pageId: string;
title: string;
illustrationDescription: string;
narrationText: string;
dataPointEvidence: string;
}
export default function Home() {
const [currentPage, setCurrentPage] = useState<number>(-1); // -1: Initial state
const storyPages: StoryPage[] = sampleTrace.finalOutput;
const handleNext = () => {
setCurrentPage(prev => (prev + 1) % storyPages.length);
};
const handleReset = () => {
setCurrentPage(-1);
};
const isStoryStarted = currentPage > -1;
const isStoryFinished = currentPage === storyPages.length - 1;
// Function to get a placeholder image URL based on pageId
const getImageForPage = (pageId: string) => {
switch (pageId) {
case 'solar-journey-01':
return 'https://picsum.photos/seed/sun-journey-1/600/300?grayscale&blur=2'; // Sun awakening
case 'solar-journey-02':
return 'https://picsum.photos/seed/earth-path-2/600/300?grayscale&blur=1'; // Light travelling to Earth
case 'solar-journey-03':
return 'https://picsum.photos/seed/aurora-curtain-3/600/300'; // Aurora
default:
return 'https://picsum.photos/seed/default-story/600/300'; // Generic placeholder
}
};
return (
<div style={{ fontFamily: 'sans-serif', maxWidth: '800px', margin: '0 auto', padding: '2rem' }}>
<header style={{ borderB
...