function NewComponent({ coordinateData, metrics, analysis, onFileUpload }) { const displayMetrics = JSON.stringify(metrics, null, 2); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 py-12 px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-center text-gray-900 mb-8", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, "モーションキャプチャ分析アプリ"), /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "file-upload", __source: { fileName: "", lineNumber: 10, columnNumber: 13 }, __self: this }, "座標データファイルをアップロード (CSV)"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "file-upload", type: "file", onChange: onFileUpload, accept: ".csv", name: "file-upload", __source: { fileName: "", lineNumber: 13, columnNumber: 13 }, __self: this })), metrics && /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-gray-900 mb-2", __source: { fileName: "", lineNumber: 24, columnNumber: 15 }, __self: this }, "計算された指標"), /*#__PURE__*/ React.createElement("pre", { className: "bg-gray-100 p-4 rounded overflow-auto max-h-60", __source: { fileName: "", lineNumber: 25, columnNumber: 15 }, __self: this }, displayMetrics)), analysis && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-gray-900 mb-2", __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this }, "AIによる分析結果とアドバイス"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 whitespace-pre-wrap", __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }, analysis))))); } function NewComponentStory() { const [coordinateData, setCoordinateData] = React.useState(null); const [metrics, setMetrics] = React.useState(null); const [analysis, setAnalysis] = React.useState(null); const calculateMetrics = (data)=>{ // ... calculations logic return {}; // placeholder return object }; const analyzeData = async (metrics)=>{ // ... analysis logic return ''; // placeholder return string }; const handleFileUpload = (event)=>{ const file = event.target.files[0]; const reader = new FileReader(); reader.onload = async (e)=>{ const text = e.target.result; const rows = text.split('\n').map((row)=>row.split(',')); const headers = rows[0]; const data = rows.slice(1).map((row)=>{ const obj = {}; headers.forEach((header, index)=>{ obj[header] = row[index]; }); return obj; }); setCoordinateData(data); const calculatedMetrics = calculateMetrics(data); setMetrics(calculatedMetrics); const aiAnalysis = await analyzeData(calculatedMetrics); setAnalysis(aiAnalysis); }; reader.readAsText(file); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 81, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(NewComponent, { coordinateData: coordinateData, metrics: metrics, analysis: analysis, onFileUpload: handleFileUpload, __source: { fileName: "", lineNumber: 82, columnNumber: 7 }, __self: this })); } function MainComponent() { const [coordinateData, setCoordinateData] = React.useState(null); const [metrics, setMetrics] = React.useState(null); const [analysis, setAnalysis] = React.useState(null); const calculateMetrics = (data)=>{ return { jointAngles: "Calculated joint angles", acceleration: "Calculated acceleration", strideLength: "Calculated stride length" }; }; const analyzeData = async (metrics)=>{ return "AI-generated analysis and advice based on the motion capture data"; }; const handleFileUpload = (event)=>{ const file = event.target.files[0]; const reader = new FileReader(); reader.onload = async (e)=>{ const text = e.target.result; const rows = text.split('\n').map((row)=>row.split(',')); const headers = rows[0]; const data = rows.slice(1).map((row)=>{ const obj = {}; headers.forEach((header, idx)=>{ obj[header] = row[idx]; }); return obj; }); setCoordinateData(data); const calculatedMetrics = calculateMetrics(data); setMetrics(calculatedMetrics); const aiAnalysis = await analyzeData(calculatedMetrics); setAnalysis(aiAnalysis); }; reader.readAsText(file); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(NewComponent, { coordinateData: coordinateData, metrics: metrics, analysis: analysis, onFileUpload: handleFileUpload, __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this })); }