function AiNarrationGenerator({ title, onGenerate, loading, narrations }) { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-8", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-gray-800 mb-8 text-center font-roboto", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, title), /*#__PURE__*/ React.createElement("button", { onClick: onGenerate, disabled: loading, className: "w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-6 rounded-lg mb-8 transition duration-200 ease-in-out font-roboto disabled:opacity-50", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, loading ? "generating..." : "ナレーションを生成"), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, narrations.map((narration, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white p-6 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 17, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-600 mb-2 font-roboto", __source: { fileName: "", lineNumber: 18, columnNumber: 15 }, __self: this }, narration.style), /*#__PURE__*/ React.createElement("textarea", { readOnly: true, value: narration.text, className: "w-full h-32 p-2 border rounded-md font-roboto resize-none", __source: { fileName: "", lineNumber: 21, columnNumber: 15 }, __self: this })))))); } function AiNarrationGeneratorStory() { const narrations = [ { style: "Style 1", text: "Sample text 1" }, { style: "Style 2", text: "Sample text 2" } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(AiNarrationGenerator, { title: "ＡＩナレーションジェネレーター", onGenerate: ()=>console.log("Generate narrations"), loading: false, narrations: narrations, __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this })); } function MainComponent() { const [narrations, setNarrations] = useState([]); const [loading, setLoading] = useState(false); const generateNarrations = async ()=>{ setLoading(true); try { const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: "印象的で魅力的なナレーションのテキストを3つ作成してください。それぞれ異なる雰囲気で書いてください。" } ], json_schema: { name: "narrations", schema: { type: "object", properties: { narrations: { type: "array", items: { type: "object", properties: { text: { type: "string" }, style: { type: "string" } }, required: [ "text", "style" ], additionalProperties: false } } }, required: [ "narrations" ], additionalProperties: false } } }) }); const data = await response.json(); const result = JSON.parse(data.choices[0].message.content); setNarrations(result.narrations); } catch (error) { console.error(error); } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement(AiNarrationGenerator, { title: "ＡＩナレーションジェネレーターVer.1.0", onGenerate: generateNarrations, loading: loading, narrations: narrations, __source: { fileName: "", lineNumber: 54, columnNumber: 5 }, __self: this }); }

ＡＩ ナレーションジェネレーターVer.1.0

ＡＩナレーションジェネレーターVer.1.0