"use client"; function MainComponent() { const THEMES = { light: { bg: "#ffffff", text: "#333333" }, dark: { bg: "#333333", text: "#ffffff" } }; const SHAPES = { square: "square", circle: "circle", diamond: "diamond" }; const LAYOUTS = [ "grid", "list", "flex", "mindmap", "flowchart" ]; const generateUniqueId = ()=>Math.random().toString(36).substr(2, 9); const [title, setTitle] = React.useState("高度な図解"); const [items, setItems] = React.useState([]); const [layout, setLayout] = React.useState("grid"); const [colorScheme, setColorScheme] = React.useState("gradient-purple"); const [theme, setTheme] = React.useState("light"); const [showColorPicker, setShowColorPicker] = React.useState(false); const [customColor, setCustomColor] = React.useState("#ff0000"); const [connections, setConnections] = React.useState([]); const [selectedItems, setSelectedItems] = React.useState([]); const [numItemsToAdd, setNumItemsToAdd] = React.useState(1); const [numColumns, setNumColumns] = React.useState(3); const [numRows, setNumRows] = React.useState(3); const diagramRef = React.useRef(null); const [autoGenerate, setAutoGenerate] = React.useState(false); const [isGenerating, setIsGenerating] = React.useState(false); const [numItemsToGenerate, setNumItemsToGenerate] = React.useState(5); React.useEffect(()=>{ generateInitialItems(); }, []); React.useEffect(()=>{ if (title && autoGenerate) { generateDiagramDescription(); } }, [ title ]); const generateInitialItems = ()=>{ const newItems = Array.from({ length: 4 }, (_, i)=>({ id: generateUniqueId(), title: `項目 ${i + 1}`, content: `項目 ${i + 1} の詳細な内容がここに入ります。`, shape: Object.keys(SHAPES)[Math.floor(Math.random() * Object.keys(SHAPES).length)], position: { x: i * 150, y: i * 100 } })); setItems(newItems); }; const [claudeResponse, setClaudeResponse] = React.useState(null); const [showClaudeResponse, setShowClaudeResponse] = React.useState(false); const generateDiagramDescription = async ()=>{ if (isGenerating) return; 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 = data.choices[0].message.content; let parsedItems; try { parsedItems = JSON.parse(generatedItems); } catch (error) { console.error("JSONパースエラー:", error); console.error("Claudeからのレスポンス:", generatedItems); setIsGenerating(false); return; } if (!parsedItems.every((item)=>item.title && item.content)) { console.error("無効なアイテムデータ:", parsedItems); setIsGenerating(false); return; } setItems((prevItems)=>[ ...prevItems, ...parsedItems.map((item, index)=>({ id: generateUniqueId(), title: item.title, content: item.content, shape: Object.keys(SHAPES)[Math.floor(Math.random() * Object.keys(SHAPES).length)], position: { x: (prevItems.length + index) * 150, y: (prevItems.length + index) * 100 } })) ]); } catch (error) { console.error("図形説明の生成中にエラーが発生しました:", error); } finally{ setIsGenerating(false); } }; const getColorStyle = (index)=>{ const gradients = { "gradient-purple": `linear-gradient(135deg, #C779D0 0%, #4BC0C8 100%)`, "gradient-blue": `linear-gradient(135deg, #12C2E9 0%, #F64F59 100%)`, "gradient-green": `linear-gradient(135deg, #56AB2F 0%, #A8E063 100%)`, custom: `linear-gradient(135deg, ${customColor} 0%, ${customColor} 100%)` }; return { background: gradients[colorScheme] || gradients["gradient-purple"], boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)", animation: `fadeIn 0.5s ease-out ${index * 0.1}s both` }; }; const getLayoutStyle = ()=>{ switch(layout){ case "grid": return { display: "grid", gridTemplateColumns: `repeat(${numColumns}, 1fr)`, gridTemplateRows: `repeat(${numRows}, 1fr)`, gap: "1rem" }; case "list": return { display: "flex", flexDirection: "column", gap: "1rem" }; case "flex": return { display: "flex", flexWrap: "wrap", gap: "1rem", justifyContent: "center" }; case "mindmap": return { position: "relative", height: "600px" }; case "flowchart": return { position: "relative", height: "600px" }; default: return { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: "1rem" }; } }; const onDragEnd = (result)=>{ if (!result.destination) return; const newItems = Array.from(items); const [reorderedItem] = newItems.splice(result.source.index, 1); newItems.splice(result.destination.index, 0, reorderedItem); setItems(newItems); }; const addItems = ()=>{ generateDiagramDescription(); }; const updateItem = (id, field, value)=>{ setItems(items.map((item)=>item.id === id ? { ...item, [field]: value } : item)); }; const deleteItem = (id)=>{ setItems(items.filter((item)=>item.id !== id)); setConnections(connections.filter((conn)=>conn.start !== id && conn.end !== id)); }; const addConnection = ()=>{ if (selectedItems.length === 2) { const [start, end] = selectedItems; setConnections([ ...connections, { start, end } ]); setSelectedItems([]); } }; const exportDiagram = (format)=>{ const svgData = new XMLSerializer().serializeToString(diagramRef.current); const svgBlob = new Blob([ svgData ], { type: "image/svg+xml;charset=utf-8" }); const svgUrl = URL.createObjectURL(svgBlob); if (format === "svg") { const downloadLink = document.createElement("a"); downloadLink.href = svgUrl; downloadLink.download = `${title || "advanced-diagram"}.svg`; downloadLink.click(); } else if (format === "png") { const img = new Image(); img.onload = ()=>{ const canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; const ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0); const pngUrl = canvas.toDataURL("image/png"); const downloadLink = document.createElement("a"); downloadLink.href = pngUrl; downloadLink.download = `${title || "advanced-diagram"}.png`; downloadLink.click(); }; img.src = svgUrl; } }; const importDiagram = (event)=>{ const file = event.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = (e)=>{ try { const importedData = JSON.parse(e.target.result); setTitle(importedData.title); setItems(importedData.items); setConnections(importedData.connections); setLayout(importedData.layout); setColorScheme(importedData.colorScheme); } catch (error) { console.error("Invalid file format", error); } }; reader.readAsText(file); } }; const exportJSON = ()=>{ const data = { title, items, connections, layout, colorScheme }; const jsonString = JSON.stringify(data, null, 2); const blob = new Blob([ jsonString ], { type: "application/json" }); const url = URL.createObjectURL(blob); const link = document.createElement("a"); link.href = url; link.download = `${title || "diagram-data"}.json`; link.click(); }; const clearDiagram = ()=>{ setTitle("高度な図解"); setItems([]); setConnections([]); setLayout("grid"); setColorScheme("gradient-purple"); }; return /*#__PURE__*/ React.createElement("div", { className: `p-8 ${theme === "dark" ? "font-crimson-text" : "font-roboto"}`, style: { backgroundColor: THEMES[theme].bg, color: THEMES[theme].text, transition: "all 0.3s" }, __source: { fileName: "", lineNumber: 245, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 246, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .input-style { width: 100%; padding: 0.75rem; margin-bottom: 1rem; border: 1px solid #e2e8f0; border-radius: 0.375rem; font-size: 1rem; transition: all 0.3s; background-color: ${THEMES[theme].bg}; color: ${THEMES[theme].text}; } .input-style:focus { outline: none; border-color: #4299e1; box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5); } .button-style { padding: 0.75rem 1.5rem; border: none; border-radius: 0.375rem; font-size: 1rem; font-weight: bold; color: white; cursor: pointer; transition: all 0.3s; margin-right: 0.5rem; margin-bottom: 0.5rem; } .button-style:hover { transform: translateY(-2px); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } `), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 284, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { __source: { fileName: "", lineNumber: 285, columnNumber: 9 }, __self: this }, "タイトルを入力してください"), /*#__PURE__*/ React.createElement("input", { type: "text", value: title, onChange: (e)=>setTitle(e.target.value), placeholder: "図解のタイトル", className: "input-style", name: "title", __source: { fileName: "", lineNumber: 286, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mt-2", __source: { fileName: "", lineNumber: 287, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", checked: autoGenerate, onChange: (e)=>setAutoGenerate(e.target.checked), id: "autoGenerate", className: "mr-2", __source: { fileName: "", lineNumber: 288, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "autoGenerate", __source: { fileName: "", lineNumber: 289, columnNumber: 11 }, __self: this }, "タイトル入力後に自動生成")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mt-2", __source: { fileName: "", lineNumber: 291, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "numItemsToGenerate", className: "mr-2", __source: { fileName: "", lineNumber: 292, columnNumber: 11 }, __self: this }, "生成する項目数："), /*#__PURE__*/ React.createElement("input", { type: "number", id: "numItemsToGenerate", value: numItemsToGenerate, onChange: (e)=>setNumItemsToGenerate(Math.max(1, parseInt(e.target.value) || 1)), className: "input-style w-20", min: "1", name: "numItemsToGenerate", __source: { fileName: "", lineNumber: 293, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 295, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: generateDiagramDescription, className: `button-style ${theme === "light" ? "bg-[#5a67d8]" : "bg-[#48bb78]"}`, disabled: isGenerating, name: "generateDiagram", __source: { fileName: "", lineNumber: 296, columnNumber: 11 }, __self: this }, isGenerating ? "生成中..." : "図解を生成"), /*#__PURE__*/ React.createElement("button", { onClick: clearDiagram, className: "button-style bg-[#e53e3e]", name: "clearDiagram", __source: { fileName: "", lineNumber: 299, columnNumber: 11 }, __self: this }, "クリア")), /*#__PURE__*/ React.createElement("h2", { __source: { fileName: "", lineNumber: 301, columnNumber: 9 }, __self: this }, "テーマを選択してください"), /*#__PURE__*/ React.createElement("select", { value: layout, onChange: (e)=>setLayout(e.target.value), className: "input-style", name: "layout", __source: { fileName: "", lineNumber: 302, columnNumber: 9 }, __self: this }, LAYOUTS.map((l)=>/*#__PURE__*/ React.createElement("option", { key: l, value: l, __source: { fileName: "", lineNumber: 303, columnNumber: 32 }, __self: this }, l.charAt(0).toUpperCase() + l.slice(1)))), /*#__PURE__*/ React.createElement("h2", { __source: { fileName: "", lineNumber: 305, columnNumber: 9 }, __self: this }, "カラーを選択してください"), /*#__PURE__*/ React.createElement("select", { value: colorScheme, onChange: (e)=>setColorScheme(e.target.value), className: "input-style", name: "colorScheme", __source: { fileName: "", lineNumber: 306, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "gradient-purple", __source: { fileName: "", lineNumber: 307, columnNumber: 11 }, __self: this }, "パープルグラデーション"), /*#__PURE__*/ React.createElement("option", { value: "gradient-blue", __source: { fileName: "", lineNumber: 308, columnNumber: 11 }, __self: this }, "ブルーグラデーション"), /*#__PURE__*/ React.createElement("option", { value: "gradient-green", __source: { fileName: "", lineNumber: 309, columnNumber: 11 }, __self: this }, "グリーングラデーション"), /*#__PURE__*/ React.createElement("option", { value: "custom", __source: { fileName: "", lineNumber: 310, columnNumber: 11 }, __self: this }, "カスタム")), layout === "grid" && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("h2", { __source: { fileName: "", lineNumber: 314, columnNumber: 13 }, __self: this }, "グリッドの列数"), /*#__PURE__*/ React.createElement("input", { type: "number", value: numColumns, onChange: (e)=>setNumColumns(parseInt(e.target.value) || 1), min: "1", className: "input-style w-20 mb-4", name: "numColumns", __source: { fileName: "", lineNumber: 315, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { __source: { fileName: "", lineNumber: 316, columnNumber: 13 }, __self: this }, "グリッドの行数"), /*#__PURE__*/ React.createElement("input", { type: "number", value: numRows, onChange: (e)=>setNumRows(parseInt(e.target.value) || 1), min: "1", className: "input-style w-20", name: "numRows", __source: { fileName: "", lineNumber: 317, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap mt-4", __source: { fileName: "", lineNumber: 320, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: addConnection, className: "button-style bg-[#4299e1]", __source: { fileName: "", lineNumber: 321, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-link mr-2", __source: { fileName: "", lineNumber: 321, columnNumber: 81 }, __self: this }), "接続追加"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>exportDiagram("svg"), className: "button-style bg-[#ed8936]", name: "exportSvg", __source: { fileName: "", lineNumber: 322, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download mr-2", __source: { fileName: "", lineNumber: 322, columnNumber: 111 }, __self: this }), "SVG"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>exportDiagram("png"), className: "button-style bg-[#9f7aea]", name: "exportPng", __source: { fileName: "", lineNumber: 323, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download mr-2", __source: { fileName: "", lineNumber: 323, columnNumber: 111 }, __self: this }), "PNG"), /*#__PURE__*/ React.createElement("button", { onClick: exportJSON, className: "button-style bg-[#667eea]", name: "exportJson", __source: { fileName: "", lineNumber: 324, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-save mr-2", __source: { fileName: "", lineNumber: 324, columnNumber: 96 }, __self: this }), "JSON保存"), /*#__PURE__*/ React.createElement("label", { className: "button-style bg-[#4fd1c5] cursor-pointer", __source: { fileName: "", lineNumber: 325, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-upload mr-2", __source: { fileName: "", lineNumber: 325, columnNumber: 71 }, __self: this }), "JSON読込", /*#__PURE__*/ React.createElement("input", { type: "file", accept: ".json", className: "hidden", onChange: importDiagram, name: "jsonUpload", __source: { fileName: "", lineNumber: 326, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setTheme(theme === "light" ? "dark" : "light"), className: "button-style bg-[#718096]", name: "toggleTheme", __source: { fileName: "", lineNumber: 328, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-palette mr-2", __source: { fileName: "", lineNumber: 328, columnNumber: 139 }, __self: this }), "テーマ切替"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowColorPicker(!showColorPicker), className: "button-style bg-[#f56565]", name: "customColor", __source: { fileName: "", lineNumber: 329, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cog mr-2", __source: { fileName: "", lineNumber: 329, columnNumber: 129 }, __self: this }), "カスタムカラー")), showColorPicker && /*#__PURE__*/ React.createElement("div", { className: "absolute z-10", __source: { fileName: "", lineNumber: 331, columnNumber: 29 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowClaudeResponse(!showClaudeResponse), __source: { fileName: "", lineNumber: 333, columnNumber: 7 }, __self: this }, showClaudeResponse ? "Claudeの応答を隠す" : "Claudeの応答を表示"), showClaudeResponse && /*#__PURE__*/ React.createElement("pre", { className: "p-4 bg-gray-100 rounded-md mt-4", __source: { fileName: "", lineNumber: 334, columnNumber: 31 }, __self: this }, JSON.stringify(claudeResponse, null, 2)), /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-8", __source: { fileName: "", lineNumber: 335, columnNumber: 7 }, __self: this }, title), /*#__PURE__*/ React.createElement("div", { style: getLayoutStyle(), __source: { fileName: "", lineNumber: 336, columnNumber: 7 }, __self: this }, items.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: item.id, className: "p-4", style: getColorStyle(index), __source: { fileName: "", lineNumber: 338, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold", __source: { fileName: "", lineNumber: 339, columnNumber: 13 }, __self: this }, item.title), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 340, columnNumber: 13 }, __self: this }, item.content), /*#__PURE__*/ React.createElement("button", { onClick: ()=>updateItem(item.id, "shape", prompt("Enter new shape", item.shape)), className: "mt-2 button-style bg-[#38b2ac]", __source: { fileName: "", lineNumber: 341, columnNumber: 13 }, __self: this }, "形状を変更"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>deleteItem(item.id), className: "mt-2 button-style bg-[#e53e3e]", __source: { fileName: "", lineNumber: 342, columnNumber: 13 }, __self: this }, "削除"))))); }