function RoundedButtonDesign({ isGenerating }) { const buttonText = isGenerating ? 'プロンプトを生成中...' : 'プロンプトを生成'; return /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full px-4 py-2 font-bold text-white bg-blue-500 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-400", disabled: isGenerating, __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, buttonText); } function RoundedButtonDesignStory() { const [isGenerating, setIsGenerating] = React.useState(false); const handleClick = ()=>{ setIsGenerating(true); setTimeout(()=>setIsGenerating(false), 2000); // 2秒後に元に戻す }; return /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(RoundedButtonDesign, { isGenerating: isGenerating, onClick: handleClick, __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this })); } function MainComponent() { const [userInput, setUserInput] = React.useState(''); const [generatedPrompt, setGeneratedPrompt] = React.useState(''); const [colorOption, setColorOption] = React.useState(''); const [styleOption, setStyleOption] = React.useState(''); const [contentOption, setContentOption] = React.useState(''); const [detailOption, setDetailOption] = React.useState(''); const [isGenerating, setIsGenerating] = React.useState(false); const [usedModel, setUsedModel] = React.useState(''); const integrations = [ { url: '/integrations/anthropic-claude/', name: 'ANTHROPIC_CLAUDE' }, { url: '/integrations/chat-gpt/conversationgpt4', name: 'CHAT_GPT' }, { url: '/integrations/google-gemini-1-5/', name: 'GOOGLE_GEMINI_1_5' }, { url: '/integrations/anthropic-claude-sonnet/', name: 'ANTHROPIC_CLAUDE_SONNET' }, { url: '/integrations/anthropic-claude-haiku/', name: 'ANTHROPIC_CLAUDE_HAIKU' }, { url: '/integrations/google-gemini/', name: 'GOOGLE_GEMINI' } ]; const submitToApi = async (url, index)=>{ try { const response = await fetch(url, { method: 'POST', body: JSON.stringify({ messages: [ { role: "user", content: `You are an AI assistant that creates high-quality prompts in English for Stable Diffusion based on the user's input. Follow these guidelines: Output ONLY the English prompt, no other text. Structure the prompt with BREAK separating elements in this order: Subject details BREAK Clothing/accessories BREAK Pose/camera angle BREAK Background/setting Use descriptive language. Make reasonable assumptions for unclear input. Output format: Stable Diffusion prompt Generate the prompt based on the user's input without confirmation or acknowledgment: ${userInput} Additional details: Color: ${colorOption} Style: ${styleOption} Content type: ${contentOption} Details like era, mood, environment: ${detailOption}` } ] }), headers: { 'Content-Type': 'application/json' } }); if (!response.ok) throw new Error('API request failed'); const data = await response.json(); setGeneratedPrompt(data.choices[0].message.content); setUsedModel(integrations[index].name); setIsGenerating(false); } catch (error) { if (index + 1 < integrations.length) { submitToApi(integrations[index + 1].url, index + 1); } else { console.error('All API requests failed.'); setIsGenerating(false); } } }; const handleSubmit = (e)=>{ e.preventDefault(); setIsGenerating(true); submitToApi(integrations[0].url, 0); }; const copyPrompt = ()=>{ navigator.clipboard.writeText(generatedPrompt); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100 font-sans", __source: { fileName: "", lineNumber: 67, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-8 text-center text-[#333]", __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }, "プロンプトツールAI"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "bg-white p-8 rounded-lg shadow-md w-full max-w-2xl", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "userInput", className: "block mb-2 font-bold text-[#333]", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, "イラストの内容を入力:"), /*#__PURE__*/ React.createElement("textarea", { id: "userInput", name: "userInput", value: userInput, onChange: (e)=>setUserInput(e.target.value), rows: "4", className: "w-full px-3 py-2 text-[#333] border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400", placeholder: "ここにイラストの内容を入力してください...", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6 grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "colorOption", className: "block mb-2 font-bold text-[#333]", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, "色彩:"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "colorOption", name: "colorOption", value: colorOption, onChange: (e)=>setColorOption(e.target.value), className: "w-full px-3 py-2 text-[#333] border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "styleOption", className: "block mb-2 font-bold text-[#333]", __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this }, "スタイル:"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "styleOption", name: "styleOption", value: styleOption, onChange: (e)=>setStyleOption(e.target.value), className: "w-full px-3 py-2 text-[#333] border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400", __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "contentOption", className: "block mb-2 font-bold text-[#333]", __source: { fileName: "", lineNumber: 108, columnNumber: 13 }, __self: this }, "コンテンツの種類:"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "contentOption", name: "contentOption", value: contentOption, onChange: (e)=>setContentOption(e.target.value), className: "w-full px-3 py-2 text-[#333] border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400", __source: { fileName: "", lineNumber: 109, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 118, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "detailOption", className: "block mb-2 font-bold text-[#333]", __source: { fileName: "", lineNumber: 119, columnNumber: 13 }, __self: this }, "細かなディテール:"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "detailOption", name: "detailOption", value: detailOption, onChange: (e)=>setDetailOption(e.target.value), className: "w-full px-3 py-2 text-[#333] border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400", __source: { fileName: "", lineNumber: 120, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 131, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(RoundedButtonDesign, { isGenerating: isGenerating, __source: { fileName: "", lineNumber: 132, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600 mb-6", __source: { fileName: "", lineNumber: 135, columnNumber: 9 }, __self: this }, usedModel ? `使用モデル: ${usedModel}` : ''), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 137, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "promptOutput", className: "block mb-2 font-bold text-[#333]", __source: { fileName: "", lineNumber: 138, columnNumber: 11 }, __self: this }, "生成されたプロンプト:"), /*#__PURE__*/ React.createElement("textarea", { id: "promptOutput", name: "promptOutput", value: generatedPrompt, rows: "6", readOnly: true, className: "w-full px-3 py-2 text-[#333] bg-gray-100 border rounded-lg focus:outline-none", placeholder: "ここに生成されたプロンプトが表示されます...", __source: { fileName: "", lineNumber: 139, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 150, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", onClick: copyPrompt, className: "w-full px-4 py-2 font-bold text-white bg-green-500 rounded-full hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400", __source: { fileName: "", lineNumber: 151, columnNumber: 11 }, __self: this }, "プロンプトをコピー"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 157, columnNumber: 7 }, __self: this }, ` @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .generating-animation { display: inline-block; width: 20px; height: 20px; border: 2px solid #fff; border-top-color: transparent; border-radius: 50%; animation: spin 1s linear infinite; margin-left: 8px; vertical-align: middle; } `)); } function RoundedButtonDesign({ isGenerating }) { const buttonText = isGenerating ? 'プロンプトを生成中...' : 'プロンプトを生成'; return /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full px-4 py-2 font-bold text-white bg-blue-500 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-400", disabled: isGenerating, __source: { fileName: "", lineNumber: 185, columnNumber: 5 }, __self: this }, buttonText, isGenerating && /*#__PURE__*/ React.createElement("span", { className: "generating-animation", __source: { fileName: "", lineNumber: 191, columnNumber: 24 }, __self: this })); }