function MainComponent() { const maxCharacters = 10000; const [inputText, setInputText] = React.useState(""); const [isProcessing, setIsProcessing] = React.useState(false); const [markdownText, setMarkdownText] = React.useState(""); const [error, setError] = React.useState(""); const [charCount, setCharCount] = React.useState(0); const fetchMarkdownConversion = async (text)=>{ setIsProcessing(true); setError(""); try { const response = await fetch('/integrations/anthropic-claude-haiku/', { method: 'POST', body: JSON.stringify({ messages: [ { role: 'user', content: `テキスト構造化して、Markdown記法に変換\n${text}` } ] }), headers: { 'Content-Type': 'application/json' } }); if (!response.ok) { throw new Error('Network response was not ok'); } const data = await response.json(); setMarkdownText(data.choices[0].message.content); } catch (error) { setError("テキストのMarkdownへの変換に失敗しました。後ほど再試行してください。"); } setIsProcessing(false); }; const handleTextToSpeech = async ()=>{ if (markdownText) { const response = await fetch(`/integrations/text-to-speech/speech?text=${encodeURIComponent(markdownText)}`, { method: 'GET' }); if (response.ok) { const blob = await response.blob(); const url = URL.createObjectURL(blob); const audio = new Audio(url); audio.play(); } else { setError("音声の読み上げに失敗しました。後ほど再試行してください。"); } } }; const copyToClipboard = async (text)=>{ try { await navigator.clipboard.writeText(text); setError(""); alert("クリップボードにコピーしました！"); } catch (error) { setError("クリップボードへのコピーに失敗しました。"); } }; const downloadMarkdown = (text)=>{ const element = document.createElement("a"); const file = new Blob([ text ], { type: 'text/plain' }); element.href = URL.createObjectURL(file); element.download = "converted_markdown.md"; document.body.appendChild(element); element.click(); document.body.removeChild(element); }; const handleInputChange = (event)=>{ const text = event.target.value; setInputText(text); setCharCount(text.length); if (text.length > maxCharacters) { setError(`テキストの最大文字数は${maxCharacters}文字です。`); } else { setError(""); } }; const handleButtonDisabled = isProcessing || charCount > maxCharacters || !inputText; const handleCopyClick = ()=>{ copyToClipboard(markdownText); }; const handleDownloadClick = ()=>{ downloadMarkdown(markdownText); }; const handleRetry = ()=>{ setInputText(""); setMarkdownText(""); setError(""); setCharCount(0); }; const showError = error && !isProcessing; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col min-h-screen bg-gray-100 font-sans", __source: { fileName: "", lineNumber: 105, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex items-center justify-between p-4 border-b bg-white", __source: { fileName: "", lineNumber: 106, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 107, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "logo.png", alt: "Service logo", className: "mr-3 h-6 sm:h-9", __source: { fileName: "", lineNumber: 108, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "self-center text-xl font-semibold whitespace-nowrap", __source: { fileName: "", lineNumber: 109, columnNumber: 11 }, __self: this }, "Generative Writer"))), /*#__PURE__*/ React.createElement("main", { className: `flex-grow ${showError ? 'flex justify-center items-center' : 'justify-start'} p-4 bg-gray-100`, __source: { fileName: "", lineNumber: 112, columnNumber: 7 }, __self: this }, showError ? /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 114, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 115, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg font-bold mb-5", __source: { fileName: "", lineNumber: 116, columnNumber: 15 }, __self: this }, "申し訳ございません、問題が発生しました。"), /*#__PURE__*/ React.createElement("p", { className: "mb-6", __source: { fileName: "", lineNumber: 117, columnNumber: 15 }, __self: this }, error), /*#__PURE__*/ React.createElement("button", { onClick: handleRetry, className: "px-8 py-2 border rounded-full font-semibold text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring", __source: { fileName: "", lineNumber: 118, columnNumber: 15 }, __self: this }, "再試行する"))) : /*#__PURE__*/ React.createElement("div", { className: "container mx-auto", __source: { fileName: "", lineNumber: 127, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 128, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "inputText", rows: "6", placeholder: "ここにテキストを入力してください", disabled: isProcessing, value: inputText, onChange: handleInputChange, className: "w-full p-4 text-gray-700 border rounded-lg focus:ring-blue-500 focus:border-blue-500 block transition duration-300", __source: { fileName: "", lineNumber: 129, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-right mt-1 text-sm text-gray-600", __source: { fileName: "", lineNumber: 138, columnNumber: 15 }, __self: this }, charCount, " / ", maxCharacters), /*#__PURE__*/ React.createElement("button", { onClick: ()=>fetchMarkdownConversion(inputText), disabled: handleButtonDisabled, className: "mt-4 px-8 py-2 rounded-full text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring disabled:bg-gray-300 disabled:cursor-not-allowed", __source: { fileName: "", lineNumber: 139, columnNumber: 15 }, __self: this }, "Markdownに変換")), markdownText && /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 148, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 p-4 rounded-lg shadow", __source: { fileName: "", lineNumber: 149, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("pre", { className: "whitespace-pre-wrap text-gray-800", __source: { fileName: "", lineNumber: 150, columnNumber: 19 }, __self: this }, markdownText)), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4 mt-4", __source: { fileName: "", lineNumber: 152, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleCopyClick, className: "px-8 py-2 border rounded-full font-semibold text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring", __source: { fileName: "", lineNumber: 153, columnNumber: 19 }, __self: this }, "コピー"), /*#__PURE__*/ React.createElement("button", { onClick: handleTextToSpeech, className: "px-8 py-2 border rounded-full font-semibold text-white bg-yellow-600 hover:bg-yellow-700 focus:outline-none focus:ring", __source: { fileName: "", lineNumber: 159, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-volume-up", __source: { fileName: "", lineNumber: 163, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: handleDownloadClick, className: "px-8 py-2 border rounded-full font-semibold text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring", __source: { fileName: "", lineNumber: 165, columnNumber: 19 }, __self: this }, "ダウンロード"))))), /*#__PURE__*/ React.createElement("footer", { className: "p-4 bg-white border-t", __source: { fileName: "", lineNumber: 177, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center text-sm", __source: { fileName: "", lineNumber: 178, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-blue-600 hover:underline", __source: { fileName: "", lineNumber: 179, columnNumber: 11 }, __self: this }, "利用規約"), " |", /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-blue-600 hover:underline", __source: { fileName: "", lineNumber: 180, columnNumber: 11 }, __self: this }, "プライバシーポリシー"), " |", /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-blue-600 hover:underline", __source: { fileName: "", lineNumber: 181, columnNumber: 11 }, __self: this }, "お問い合わせ")))); }