function TitleInputForm({ title, setTitle }) { return /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, "タイトルを入力してください"), /*#__PURE__*/ React.createElement("input", { type: "text", value: title, onChange: (e)=>setTitle(e.target.value), placeholder: "図解のタイトル", className: "w-full", name: "title", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this })); } function TitleInputFormStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(TitleInputForm, { title: "Example Title", setTitle: ()=>{}, __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(TitleInputForm, { title: "", setTitle: ()=>{}, __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(TitleInputForm, { title: "Another Title", setTitle: ()=>{}, __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this })); } function DiagramGenerator({ onGenerate, isGenerating, onClear, numItemsToGenerate, setNumItemsToGenerate }) { return /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-2", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "numItemsToGenerate", className: "mr-2", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, "生成する項目数："), /*#__PURE__*/ React.createElement("input", { type: "number", id: "numItemsToGenerate", className: "w-20 mr-2", min: "1", name: "numItemsToGenerate", value: numItemsToGenerate, onChange: (e)=>setNumItemsToGenerate(Math.max(1, parseInt(e.target.value) || 1)), __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>onGenerate(numItemsToGenerate), disabled: isGenerating, className: `btn ${isGenerating ? 'cursor-not-allowed' : ''}`, __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, isGenerating ? "生成中..." : "図解を生成"), /*#__PURE__*/ React.createElement("button", { onClick: onClear, className: "btn ml-2", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, "クリア"))); } function DiagramGeneratorStory() { const [numItems1, setNumItems1] = React.useState(5); const [numItems2, setNumItems2] = React.useState(10); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 37, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(DiagramGenerator, { onGenerate: ()=>{}, isGenerating: false, onClear: ()=>{}, numItemsToGenerate: numItems1, setNumItemsToGenerate: setNumItems1, __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(DiagramGenerator, { onGenerate: ()=>{}, isGenerating: true, onClear: ()=>{}, numItemsToGenerate: numItems2, setNumItemsToGenerate: setNumItems2, __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this })); } "use client"; function DiagramDisplay({ title, items, colorScheme, numColumns, numRows, setItems }) { const [isEditing, setIsEditing] = React.useState(false); const getColorStyle = ()=>{ const gradients = { "gradient-purple": `bg-gradient-to-br from-purple-400 to-cyan-500`, "gradient-blue": `bg-gradient-to-br from-blue-400 to-red-500`, "gradient-green": `bg-gradient-to-br from-green-400 to-yellow-400` }; return gradients[colorScheme] || gradients["gradient-purple"]; }; const handleItemChange = (id, field, value)=>{ setItems((prevItems)=>prevItems.map((item)=>item.id === id ? { ...item, [field]: value } : item)); }; const regenerateAllIcons = ()=>{ setItems((prevItems)=>prevItems.map((item)=>({ ...item, icon: getRandomEmoji() }))); }; const getRandomEmoji = ()=>{ const emojis = [ "😀", "🎉", "🚀", "🌟", "🔥", "💡", "🌈", "🦄", "🎨", "🏆" ]; return emojis[Math.floor(Math.random() * emojis.length)]; }; return /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded-lg shadow-lg max-w-7xl mx-auto", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8 text-center", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-extrabold tracking-tight lg:text-5xl mb-2 font-roboto", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, title), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsEditing(!isEditing), className: "bg-blue-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, isEditing ? '終了' : '編集'), isEditing && /*#__PURE__*/ React.createElement("button", { onClick: regenerateAllIcons, className: "bg-red-500 text-white px-4 py-2 rounded ml-4", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, "アイコン再生成")), /*#__PURE__*/ React.createElement("div", { className: "grid gap-6", style: { gridTemplateColumns: `repeat(${numColumns}, minmax(0, 1fr))`, gridTemplateRows: `repeat(${numRows}, minmax(0, 1fr))`, width: "960px", height: "1280px", margin: "0 auto" }, __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, items.map((item)=>/*#__PURE__*/ React.createElement("div", { key: item.id, className: `p-4 rounded shadow-md ${getColorStyle()}`, __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, isEditing ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("input", { type: "text", value: item.title, onChange: (e)=>handleItemChange(item.id, 'title', e.target.value), className: "mb-2 p-2 border rounded w-full", name: "title", __source: { fileName: "", lineNumber: 72, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", value: item.content, onChange: (e)=>handleItemChange(item.id, 'content', e.target.value), className: "mb-2 p-2 border rounded w-full", name: "content", __source: { fileName: "", lineNumber: 79, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleItemChange(item.id, 'icon', getRandomEmoji()), className: "bg-yellow-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 86, columnNumber: 17 }, __self: this }, "アイコン再生成")) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-2", __source: { fileName: "", lineNumber: 95, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-2xl mr-2", __source: { fileName: "", lineNumber: 96, columnNumber: 19 }, __self: this }, item.icon), /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-white", __source: { fileName: "", lineNumber: 97, columnNumber: 19 }, __self: this }, item.title)), /*#__PURE__*/ React.createElement("p", { className: "text-white text-sm", __source: { fileName: "", lineNumber: 99, columnNumber: 17 }, __self: this }, item.content)))))); } function DiagramDisplayStory() { const [items, setItems] = React.useState([ { id: 1, icon: "😀", title: "迅速な対応", content: "利用者のニーズに迅速かつ効果的に対応します。" }, { id: 2, icon: "🎉", title: "創造的解決", content: "チャレンジングな技術的問題に対して、革新的な解決策を設計し実装します。" }, { id: 3, icon: "💡", title: "イノベーション", content: "私たちの分野で可能な限りの限界に挑戦する新しいアイデアやコンセプトを生み出します。" }, { id: 4, icon: "🚀", title: "製品開発", content: "アイデアを具体的な製品に変え、ユーザーの期待を上回る製品を提供します。" }, { id: 5, icon: "🤝", title: "コラボレーション", content: "チームワークとオープンなコミュニケーション文化を育み、共通の目標を達成します。" }, { id: 6, icon: "🌐", title: "グローバルインパクト", content: "影響力を広げ、世界規模でポジティブな変化をもたらします。" } ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 py-12", __source: { fileName: "", lineNumber: 150, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(DiagramDisplay, { title: "イノベーション & 卓越", items: items, colorScheme: "gradient-blue", numColumns: 3, numRows: 2, setItems: setItems, __source: { fileName: "", lineNumber: 151, columnNumber: 7 }, __self: this })); } function MainComponent() { const [title, setTitle] = React.useState("高度な図解"); const [colorScheme, setColorScheme] = React.useState("gradient-purple"); const [items, setItems] = React.useState([]); const [numColumns, setNumColumns] = React.useState(3); const [numRows, setNumRows] = React.useState(3); const [isGenerating, setIsGenerating] = React.useState(false); const [numItemsToGenerate, setNumItemsToGenerate] = React.useState(5); const [claudeResponse, setClaudeResponse] = React.useState(null); const [showClaudeResponse, setShowClaudeResponse] = React.useState(false); const generateUniqueId = ()=>Math.random().toString(36).substr(2, 9); const generateRandomIcon = ()=>{ const iconNames = [ "🌟", "❤️", "⭐", "💎" ]; return iconNames[Math.floor(Math.random() * iconNames.length)]; }; const handleGenerateDiagram = async (numItemsToGenerate)=>{ setIsGenerating(true); try { const response = await fetch("https://www.create.xyz/integrations/anthropic-claude-sonnet-3-5/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: `あなたは図形作成を支援しています。タイトル「${title}」に基づいて、${numItemsToGenerate}個の項目と説明を生成してください。データは、オブジェクトのJSON配列として返してください。各オブジェクトには、"title"と"content"のキーが必要です。 #制約条件 json部分のみの応答をすること例： [ {"title": "項目1のタイトル", "content": "項目1の説明"}, {"title": "項目2のタイトル", "content": "項目2の説明"} ]` } ] }) }); const data = await response.json(); setClaudeResponse(data); const generatedItems = JSON.parse(data.choices[0].message.content); const newItems = generatedItems.map((item)=>({ ...item, id: generateUniqueId(), icon: generateRandomIcon() })); setItems(newItems); } catch (error) { console.error("図形説明の生成中にエラーが発生しました:", error); } finally{ setIsGenerating(false); } }; const handleColorSchemeChange = (newColorScheme)=>{ setColorScheme(newColorScheme); }; const handleColumnChange = (newColumns)=>{ setNumColumns(newColumns); }; const handleRowChange = (newRows)=>{ setNumRows(newRows); }; const clearDiagram = ()=>{ setTitle('高度な図解'); setItems([]); setColorScheme('gradient-purple'); }; return /*#__PURE__*/ React.createElement("div", { className: "p-10 bg-gray-100 text-gray-900 min-h-screen font-sans", __source: { fileName: "", lineNumber: 76, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(TitleInputForm, { title: title, setTitle: setTitle, __source: { fileName: "", lineNumber: 77, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(DiagramGenerator, { onGenerate: handleGenerateDiagram, isGenerating: isGenerating, onClear: clearDiagram, numItemsToGenerate: numItemsToGenerate, setNumItemsToGenerate: setNumItemsToGenerate, __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4 mb-4", __source: { fileName: "", lineNumber: 86, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("select", { value: colorScheme, onChange: (e)=>handleColorSchemeChange(e.target.value), className: "px-4 py-2 border rounded bg-white shadow", __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "gradient-purple", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, "Purple Gradient"), /*#__PURE__*/ React.createElement("option", { value: "gradient-blue", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }, "Blue Gradient"), /*#__PURE__*/ React.createElement("option", { value: "gradient-green", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, "Green Gradient")), /*#__PURE__*/ React.createElement("input", { type: "number", value: numColumns, onChange: (e)=>handleColumnChange(parseInt(e.target.value)), min: "1", max: "5", className: "px-4 py-2 border rounded w-16 bg-white shadow", name: "numColumns", __source: { fileName: "", lineNumber: 96, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", value: numRows, onChange: (e)=>handleRowChange(parseInt(e.target.value)), min: "1", max: "5", className: "px-4 py-2 border rounded w-16 bg-white shadow", name: "numRows", __source: { fileName: "", lineNumber: 105, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 116, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowClaudeResponse(!showClaudeResponse), className: "px-4 py-2 bg-blue-500 text-white rounded shadow hover:bg-blue-600", __source: { fileName: "", lineNumber: 117, columnNumber: 9 }, __self: this }, showClaudeResponse ? "Claudeの応答を隠す" : "Claudeの応答を表示")), showClaudeResponse && claudeResponse && /*#__PURE__*/ React.createElement("pre", { className: "p-4 bg-gray-200 rounded-md mt-4 mb-4 overflow-auto max-h-60 shadow-inner", __source: { fileName: "", lineNumber: 125, columnNumber: 9 }, __self: this }, JSON.stringify(claudeResponse, null, 2)), /*#__PURE__*/ React.createElement(DiagramDisplay, { title: title, items: items, setItems: setItems, colorScheme: colorScheme, numColumns: numColumns, numRows: numRows, __source: { fileName: "", lineNumber: 130, columnNumber: 7 }, __self: this })); }