function MainComponent() { const [result, setResult] = React.useState(''); const [videoDetails, setVideoDetails] = React.useState(null); const analyzeYouTube = async (content)=>{ try { const response = await fetch('/integrations/anthropic-claude-sonnet-3-5/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content } ] }) }); const data = await response.json(); const analysisResult = data.choices[0].message.content; return analysisResult; } catch (error) { return '解析中にエラーが発生しました。'; } }; const handleSubmit = async (event)=>{ event.preventDefault(); const youtubeLink = event.target.elements.youtubeLink.value; if (!youtubeLink) { setResult('YouTubeのリンクを入力してください。'); return; } const content = `YouTubeを解析するプログラムを作成しましょう。まずは要求を分析し、計画を立ててから実装に進みます。 1. タスク分析：1.1 ユーザーの要求は、YouTubeを解析するプログラムを作成することです。1.2 主要な構成要素と要件： - YouTube Data APIを使用してデータにアクセス - 特定の動画の情報を取得 - 視聴回数、いいね数、コメント数などの統計を収集 - データの可視化や分析機能 2. 計画：コーディング：2.1 タスクの論理的ステップ： a) YouTube Data APIのセットアップ b) 特定の動画や채널の情報を取得する機能の実装 c) 統計データの収集と処理 d) データの可視化と分析機能の実装 e) ユーザーインターフェースの作成. YouTubeのリンク: ${youtubeLink}`; const analysisResult = await analyzeYouTube(content); setResult(analysisResult); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center bg-gray-100 min-h-screen p-4", __source: { fileName: "", lineNumber: 52, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-3xl mb-6", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, "YouTube解析プログラム"), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-lg w-full max-w-[600px]", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "flex flex-col space-y-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "youtubeLink", placeholder: "YouTubeのリンクを入力", className: "border border-gray-300 p-2 rounded w-full font-roboto", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white py-2 px-4 rounded font-roboto hover:bg-blue-600", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "解析を開始")), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-2xl", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, "結果"), /*#__PURE__*/ React.createElement("div", { className: "mt-4 border-t border-gray-300 pt-4", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, videoDetails ? /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 74, columnNumber: 17 }, __self: this }, "タイトル: ", videoDetails.title), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 75, columnNumber: 17 }, __self: this }, "ビュー: ", videoDetails.views), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 76, columnNumber: 17 }, __self: this }, "いいね: ", videoDetails.likes), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 77, columnNumber: 17 }, __self: this }, "コメント: ", videoDetails.comments)) : /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 80, columnNumber: 15 }, __self: this }, result || '情報がここに表示されます。'))))); }