Upload

README.md

@@ -1,8 +1,8 @@
 ---
-title: Llmclient
-emoji: 🐢
-colorFrom: green
-colorTo: blue
+title: llmclient
+emoji: 🐨
+colorFrom: pink
+colorTo: purple
 sdk: static
 pinned: false
 license: other

gemini.js

@@ -0,0 +1,1369 @@
+let lastSaveTimestamp = 0;
+let controller;
+let lastTokenUpdateTimestamp = 0;
+let summeries = {};
+let lastIndexUpdateTimestamp = 0;
+
+let replaceProofReadHistory = [];
+
+// 画像アップロード関連の機能
+let imageCounter = 0;
+
+function addImageInput() {
+    const container = document.getElementById('imageInputsContainer');
+    const imageInputGroup = document.createElement('div');
+    imageInputGroup.className = 'input-group mb-2';
+    imageInputGroup.id = `imageGroup_${imageCounter}`;
+
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.className = 'form-control';
+    input.accept = 'image/*';
+    input.id = `imageInput_${imageCounter}`;
+
+    const deleteButton = document.createElement('button');
+    deleteButton.className = 'btn btn-outline-danger';
+    deleteButton.innerHTML = '<i class="fas fa-trash"></i>';
+    deleteButton.onclick = function() {
+        removeImageInput(this.parentElement);
+    };
+
+    imageInputGroup.appendChild(input);
+    imageInputGroup.appendChild(deleteButton);
+    container.appendChild(imageInputGroup);
+
+    imageCounter++;
+}
+
+function removeImageInput(element) {
+    if (element) {
+        element.remove();
+    }
+}
+
+function getAttachedImages() {
+    const images = [];
+    const container = document.getElementById('imageInputsContainer');
+    const inputs = container.getElementsByTagName('input');
+    
+    for (let input of inputs) {
+        if (input.files && input.files[0]) {
+            images.push(input.files[0]);
+        }
+    }
+    
+    return images;
+}
+
+function replaceProofRead(textarea, proofReadText) {
+    let novelContent1TextLines = document.getElementById("novelContent1").value.split("\n");
+    let proofReadTextLines = proofReadText.split("\n");
+    let textareaTextLines = textarea.value.split("\n");
+    let start = novelContent1TextLines.indexOf(textareaTextLines[0]);
+    let end = novelContent1TextLines.indexOf(textareaTextLines[textareaTextLines.length - 1]);
+    console.log(start, end);
+
+    // 差し替え前のテキストを保存
+    let originalText = novelContent1TextLines.slice(start, end + 1);
+    replaceProofReadHistory.push([originalText, proofReadTextLines]);
+
+    // novelContent1TextLinesから該当部分を削除し、proofReadTextLinesを挿入
+    novelContent1TextLines.splice(start, end - start + 1, ...proofReadTextLines);
+
+    // 更新された内容をnovelContent1に反映
+    document.getElementById("novelContent1").value = novelContent1TextLines.join("\n");
+
+    // textareaの内容も更新
+    textarea.value = proofReadTextLines.join("\n");
+
+    console.log("校正が完了しました。");
+}
+
+
+async function getModelList() {
+    const url = 'https://generativelanguage.googleapis.com/v1beta/models?key=' + document.getElementById('geminiApiKey').value;
+    const response = await fetch(url);
+    const data = await response.json();
+    return data.models
+        .filter(x => x.supportedGenerationMethods.includes("generateContent"))
+        .filter(x => {
+            return x.name.match(/^models\/gemini/);
+        });
+}
+
+function getSafetySettings(endpoint) {
+    const threshold = endpoint.startsWith('models/model-exp-') ? 'OFF' : 'BLOCK_NONE';
+    return [
+        {
+            "category": "HARM_CATEGORY_HATE_SPEECH",
+            "threshold": threshold
+        },
+        {
+            "category": "HARM_CATEGORY_DANGEROUS_CONTENT",
+            "threshold": threshold
+        },
+        {
+            "category": "HARM_CATEGORY_HARASSMENT",
+            "threshold": threshold
+        },
+        {
+            "category": "HARM_CATEGORY_SEXUALLY_EXPLICIT",
+            "threshold": threshold
+        }
+    ];
+}
+
+async function proofRead(textarea) {
+    let content = textarea.value;
+    const ENDPOINT = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash-exp:generateContent?key=${document.getElementById('geminiApiKey').value}`;
+    let prompt = `以下の文章を校正してください。文法がおかしい、誤字脱字、冗長な表現などを校正するのみに留め、内容は一切変更しないでください。\n\n${content}`;
+    const payload = {
+        method: 'POST',
+        headers: {},
+        body: JSON.stringify({
+            contents: [{ parts: [{ text: prompt }] }],
+            generationConfig: {
+                "temperature": parseFloat(document.getElementById('temperature').value),
+                "max_output_tokens": 8192
+            },
+            safetySettings: getSafetySettings('models/gemini-2.0-flash-exp')
+        })
+    };
+    let proofReadText;
+    const response = await fetch(ENDPOINT, payload);
+    try {
+        const data = await response.json();
+        proofReadText = data.candidates[0].content.parts[0].text;
+    } catch (error) {
+        console.error('校正エラー:', error);
+        return '';
+    }
+    if (proofReadText) {
+        return replaceProofRead(textarea, proofReadText);
+    } else {
+        return '';
+    }
+}
+
+
+function formatText() {
+    const textOrg = document.getElementById('novelContent1').value;
+    let text = textOrg.replace(/[」。）]/g, '$&\n');
+    while (text.includes('\n\n')) {
+        text = text.replace(/\n\n/g, '\n');
+    }
+    text = text.replace(/「([^」\n]*)\n([^」\n]*)」/g, '「$1$2」');
+    text = text.replace(/（([^）\n]*)\n([^）\n]*)）/g, '（$1$2）');
+
+    while (text.search(/「[^「\n]*。\n/) >= 0) {
+        text = text.replace(/「([^「\n]*。)\n/, '「$1');
+    }
+
+    text = text.replace(/\n/g, "\n\n");
+    text = text.replace(/\n#/g, "\n\n#");
+
+    document.getElementById('novelContent1').value = text;
+}
+
+function unmalform(text) {
+    let result = null;
+    while (!result && text) {
+        try {
+            result = decodeURI(text);
+        } catch (error) {
+            text = text.slice(0, -1);
+        }
+    }
+    return result || '';
+}
+
+async function summerize(text) {
+    const ENDPOINT = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash-exp:generateContent?key=${document.getElementById('geminiApiKey').value}`;
+    const prompt = `以下の文章を240文字程度に要約してください:\n\n${text}`;
+    const payload = {
+        method: 'POST',
+        headers: {},
+        body: JSON.stringify({
+            contents: [{ parts: [{ text: prompt }] }],
+            generationConfig: { 
+                temperature: parseFloat(document.getElementById('temperature').value), 
+                max_output_tokens: 512 
+            },
+            safetySettings: getSafetySettings('models/gemini-2.0-flash-exp')
+        })
+    };
+    try {
+        const response = await fetch(ENDPOINT, payload);
+        const data = await response.json();
+        return data.candidates[0].content.parts[0].text;
+    } catch (error) {
+        console.error('要約エラー:', error);
+        return '';
+    }
+}
+
+function partialEncodeURI(text) {
+    if (!document.getElementById("partialEncodeToggle").checked) {
+        return text;
+    }
+    let length = parseInt(document.getElementById("encodeLength").value);
+    const chunks = [];
+    for (let i = 0; i < text.length; i += 1) {
+        chunks.push(text.slice(i, i + 1));
+    }
+    const encodedChunks = chunks.map((chunk, index) => {
+        if (index % length === 0) {
+            return encodeURI(chunk);
+        }
+        return chunk;
+    });
+    const result = encodedChunks.join('');
+    return result;
+}
+
+function saveToJson() {
+    const novelContent1 = document.getElementById('novelContent1').value;
+    const novelContent2 = document.getElementById('novelContent2').value;
+    const generatePrompt = document.getElementById('generatePrompt').value;
+    const nextPrompt = document.getElementById('nextPrompt').value;
+    const savedTitle = document.getElementById('savedTitle').value;
+    const jsonData = JSON.stringify({
+        novelContent1: novelContent1,
+        novelContent2: novelContent2,
+        generatePrompt: generatePrompt,
+        nextPrompt: nextPrompt,
+        savedTitle: savedTitle
+    });
+    const blob = new Blob([jsonData], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'novel_data.json';
+    if (savedTitle) {
+        a.download = savedTitle + '.json';
+    }
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+}
+
+function loadFromJson() {
+    const fileInput = document.createElement('input');
+    fileInput.type = 'file';
+    fileInput.accept = '.json,.txt';
+    fileInput.style.display = 'none';
+    document.body.appendChild(fileInput);
+    fileInput.addEventListener('change', function (event) {
+        const file = event.target.files[0];
+        if (file) {
+            const reader = new FileReader();
+            reader.onload = function (e) {
+                if (file.name.endsWith('.txt')) {
+                    document.getElementById('novelContent1').value = e.target.result;
+                    alert('テキストファイルを正常に読み込みました');
+                } else {
+                    try {
+                        const jsonData = JSON.parse(e.target.result);
+                        if (jsonData.novelContent1) {
+                            document.getElementById('novelContent1').value = jsonData.novelContent1;
+                        }
+                        if (jsonData.novelContent2) {
+                            document.getElementById('novelContent2').value = jsonData.novelContent2;
+                        }
+                        if (jsonData.generatePrompt) {
+                            document.getElementById('generatePrompt').value = jsonData.generatePrompt;
+                        }
+                        if (jsonData.nextPrompt) {
+                            document.getElementById('nextPrompt').value = jsonData.nextPrompt;
+                        }
+                        if (jsonData.savedTitle) {
+                            document.getElementById('savedTitle').value = jsonData.savedTitle;
+                        }
+                        generateIndexMenu(true);
+                        alert('JSONファイルを正常に読み込みました');
+                    } catch (error) {
+                        alert('無効なJSONファイルです。');
+                    }
+                }
+            };
+            reader.readAsText(file);
+        }
+    });
+    fileInput.click();
+}
+
+function saveToUserStorage(force = false) {
+    const currentTime = Date.now();
+    if (currentTime - lastSaveTimestamp < 5000 && !force) {
+        console.debug('セーブをスキップします');
+        return;
+    }
+    console.debug('セーブを実行します');
+
+    // 既存のデータを取得
+    const geminiClientData = JSON.parse(localStorage.getItem('geminiClient') || '{}');
+
+    const newData = {};
+    Array.from(document.querySelectorAll("input[id], textarea[id], select[id]")).forEach(el => {
+        if (el.id) {
+            newData[el.id] = el.type === 'checkbox' ? el.checked : el.value;
+        }
+    });
+    Object.assign(geminiClientData, newData);
+    console.log(geminiClientData);
+    localStorage.setItem('geminiClient', JSON.stringify(geminiClientData));
+    lastSaveTimestamp = currentTime;
+}
+
+function loadFromUserStorage() {
+    const savedData = localStorage.getItem('geminiClient');
+    if (savedData) {
+        const geminiClientData = JSON.parse(savedData);
+        Object.keys(geminiClientData).filter(key => key != "endpointSelect").forEach(key => {
+            const elem = document.getElementById(key);
+            if (elem) {
+                if (elem.type === 'checkbox') {
+                    elem.checked = geminiClientData[key];
+                } else {
+                    elem.value = geminiClientData[key];
+                }
+
+                // 特別な処理が必要な要素
+                if (key === 'encodeLength' || key === 'contentWidth') {
+                    const inputElem = document.getElementById(`${key}Input`);
+                    if (inputElem) {
+                        inputElem.value = geminiClientData[key];
+                    }
+                }
+            } else {
+                console.debug(`要素が見つかりません: ${key}`);
+            }
+        });
+        getModelList().then(models => {
+            const endpointSelect = document.getElementById('endpointSelect');
+            //endpointSelect.innerHTML = '';
+            models.forEach(model => {
+                const option = document.createElement('option');
+                option.value = model.name;
+                option.textContent = model.name;
+                endpointSelect.appendChild(option);
+            });
+            endpointSelect.value = geminiClientData.endpointSelect;
+        });
+    }
+}
+
+function createSummarizedText() {
+    const indexOffcanvasBody = document.querySelector('#indexOffcanvas .offcanvas-body');
+    const rootUl = indexOffcanvasBody.querySelector('ul.list-unstyled');
+    let summarizedText = '';
+
+    function processUl(ul, level = 0) {
+        const items = ul.children;
+        for (let item of items) {
+            const a = item.querySelector(':scope > a');
+            if (a) {
+                summarizedText += '#'.repeat(level + 1) + ' ' + a.textContent + '\n';
+            }
+
+            const contentItem = item.querySelector(':scope > ul > li');
+            if (contentItem) {
+                const fullText = contentItem.querySelector('.full-text');
+                const summaryText = contentItem.querySelector('.summery-text');
+                if (summaryText && summaryText.value.trim()) {
+                    summarizedText += summaryText.value + '\n\n';
+                } else if (fullText) {
+                    summarizedText += fullText.value + '\n\n';
+                }
+            }
+
+            const subUl = item.querySelector(':scope > ul');
+            if (subUl) {
+                processUl(subUl, level + 1);
+            }
+        }
+    }
+
+    if (rootUl) {
+        processUl(rootUl);
+    }
+    if (summarizedText) {
+        return summarizedText.trim();
+    } else {
+        return document.getElementById('novelContent1').value;
+    }
+}
+
+function createPayload() {
+    const novelContent1 = document.getElementById('novelContent1');
+    let text = novelContent1.value;
+    if (document.getElementById('summerizedPromptToggle').checked) {
+        text = createSummarizedText();
+    }
+    const lines = text.split('\n').filter(x => x);
+
+    let systemPrompt = `${partialEncodeURI(document.getElementById('generatePrompt').value)}`;
+    let prompt = `続きを書いて。${partialEncodeURI(document.getElementById('nextPrompt').value)} ${systemPrompt}`;
+    
+    // 画像の取得と変換
+    const attachedImages = getAttachedImages();
+    const imagePromises = attachedImages.map(file => {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = () => {
+                // Base64エンコードされた画像データを取得（"data:image/jpeg;base64,"などのプレフィックスを除去）
+                const base64Data = reader.result.split(',')[1];
+                resolve({
+                    inline_data: {
+                        data: base64Data,
+                        mime_type: file.type
+                    }
+                });
+            };
+            reader.onerror = reject;
+            reader.readAsDataURL(file);
+        });
+    });
+
+    // 画像の処理が完了してからペイロードを作成
+    return Promise.all(imagePromises).then(imageParts => {
+        let messages = [
+            {
+                "role": "user",
+                "parts": [{ "text": "." }]
+            },
+            {
+                "role": "model",
+                "parts": [{ "text": partialEncodeURI(lines.join("\n")) }]
+            },
+            {
+                "role": "user",
+                "parts": [
+                    { "text": prompt },
+                    ...imageParts
+                ]
+            }
+        ];
+
+        let max_output_tokens = 4096;
+        let selectedEndpoint = document.getElementById('endpointSelect').value;
+        if (selectedEndpoint.match(/^models\/gemini-2\.0/)) {
+            max_output_tokens = 8192;
+        }
+        if (selectedEndpoint.match(/^models\/gemini-2\.0-flash-thinking/)) {
+            max_output_tokens = 65536;
+        }
+
+        return {
+            method: 'POST',
+            headers: {},
+            body: JSON.stringify({
+                contents: messages,
+                generationConfig: {
+                    "temperature": parseFloat(document.getElementById('temperature').value),
+                    "max_output_tokens": max_output_tokens
+                },
+                safetySettings: getSafetySettings(selectedEndpoint)
+            }),
+            mode: 'cors'
+        };
+    });
+}
+
+function debugPrompt() {
+    console.log({
+        "gemini": JSON.parse(createPayload().body),
+        "openai": JSON.parse(createOpenAIPayload().body)
+    });
+}
+
+// 新しい関数を追加
+function updateRequestButtonState(state, flashClass = null) {
+    const requestButton = document.getElementById('requestButton');
+    const stopButton = document.getElementById('stopButton');
+
+    switch (state) {
+        case 'generating':
+            requestButton.disabled = true;
+            stopButton.classList.remove('d-none');
+            break;
+        case 'idle':
+            requestButton.disabled = false;
+            stopButton.classList.add('d-none');
+            break;
+        case 'error':
+            requestButton.disabled = false;
+            stopButton.classList.add('d-none');
+            break;
+    }
+
+    if (flashClass) {
+        requestButton.classList.add(flashClass);
+        setTimeout(() => {
+            requestButton.classList.remove(flashClass);
+        }, 2000);
+    }
+}
+
+function fetchStream(ENDPOINT, payload) {
+    const novelContent2 = document.getElementById('novelContent2');
+    updateRequestButtonState('generating');
+    controller = new AbortController();
+    const signal = controller.signal;
+
+    fetch(ENDPOINT, { ...payload, signal })
+        .then(response => {
+            if (!response.ok) {
+                throw new Error('ネットワークの応答が正常ではありません');
+            }
+            const reader = response.body.getReader();
+            const decoder = new TextDecoder();
+            let buffer = '';
+
+            function readStream() {
+                reader.read().then(({ done, value }) => {
+                    if (done) {
+                        console.debug('ストリームが完了しました');
+                        document.getElementById('stopButton').classList.add('d-none');
+                        requestButton.disabled = false;
+                        return;
+                    }
+
+                    const chunk = decoder.decode(value, { stream: true });
+                    buffer += chunk;
+                    console.debug('チャンクを受信しまし:', chunk);
+
+                    // バッファから完全なJSONオブジェクトを抽出して処理
+                    let startIndex = 0;
+                    while (true) {
+                        const endIndex = buffer.indexOf('\n', startIndex);
+                        if (endIndex === -1) break;
+
+                        const line = buffer.slice(startIndex, endIndex).trim();
+                        startIndex = endIndex + 1;
+
+                        if (line.startsWith('data: ')) {
+                            const jsonString = line.slice(5);
+                            if (jsonString === '[DONE]') {
+                                console.debug('Received [DONE] signal');
+                                break;
+                            }
+                            try {
+                                const data = JSON.parse(jsonString);
+                                console.debug('解析されたJSON:', data);
+                                if (data.candidates && data.candidates[0].content && data.candidates[0].content.parts) {
+                                    data.candidates[0].content.parts.forEach(part => {
+                                        if (part.text) {
+                                            console.debug('出力にテキストを追加:', part.text);
+                                            novelContent2.value += part.text;
+                                            novelContent2.scrollTop = novelContent2.scrollHeight;
+                                        }
+                                    });
+                                }
+                                // finishReasonとblockReasonをチェック
+                                if (data.candidates && data.candidates[0]) {
+                                    if (data.candidates[0].finishReason) {
+                                        if (data.candidates[0].finishReason === 'STOP') {
+                                            requestButton.classList.add('green-flash-bg');
+                                            setTimeout(() => {
+                                                requestButton.classList.remove('green-flash-bg');
+                                            }, 2000);
+                                        } else {
+                                            requestButton.classList.add('red-flash-bg');
+                                            setTimeout(() => {
+                                                requestButton.classList.remove('red-flash-bg');
+                                            }, 2000);
+                                        }
+                                    }
+                                    if (data.candidates[0].blockReason) {
+                                        requestButton.classList.add('red-flash-bg');
+                                        setTimeout(() => {
+                                            requestButton.classList.remove('red-flash-bg');
+                                        }, 2000);
+                                    }
+                                }
+                            } catch (error) {
+                                console.error('JSONパースエラー:', error);
+                            }
+                        }
+                    }
+
+                    // 処理済みの部分をバッファから削除
+                    buffer = buffer.slice(startIndex);
+
+                    readStream();
+                }).catch(error => {
+                    if (error.name === 'AbortError') {
+                        console.log('フェッチがユーザーによって中止されました');
+                        updateRequestButtonState('idle');
+                    } else {
+                        console.error('ストリーム読み取りエラー:', error);
+                        updateRequestButtonState('error', 'red-flash-bg');
+                    }
+                });
+            }
+
+            readStream();
+        })
+        .catch(error => {
+            if (error.name === 'AbortError') {
+                console.log('フェッチがユーザーよって中止されました');
+                updateRequestButtonState('idle');
+            } else {
+                console.error('フェッチエラー:', error);
+                updateRequestButtonState('error', 'red-flash-bg');
+            }
+        });
+}
+
+async function fetchNonStream(ENDPOINT, payload) {
+    const novelContent2 = document.getElementById('novelContent2');
+    updateRequestButtonState('generating');
+    try {
+        const response = await fetch(ENDPOINT, payload);
+        const data = await response.json();
+        if (data && data.candidates && data.candidates[0].content && data.candidates[0].content.parts && data.candidates[0].content.parts[0].text) {
+            novelContent2.value += data.candidates[0].content.parts[0].text;
+            novelContent2.scrollTop = novelContent2.scrollHeight;
+            updateRequestButtonState('idle', 'green-flash-bg');
+        } else {
+            throw new Error('予期しないレスポンス形式');
+        }
+    } catch (error) {
+        console.error('エラー:', error);
+        updateRequestButtonState('error', 'red-flash-bg');
+    }
+}
+
+function createOpenAIPayload() {
+    const novelContent1 = document.getElementById('novelContent1');
+    const text = novelContent1.value;
+    const lines = text.split('\n').filter(x => x);
+
+    let messages = [
+        {
+            "content": document.getElementById('generatePrompt').value || ".",
+            "role": "system"
+        },
+        {
+            "content": ".",
+            "role": "user"
+        },
+        {
+            "content": partialEncodeURI(lines.join("\n")) || ".",
+            "role": "assistant"
+        },
+        {
+            "content": `${partialEncodeURI(document.getElementById('nextPrompt').value)}`,
+            "role": "user"
+        }
+    ];
+
+    let jsonBody = JSON.parse(document.getElementById('openaiJsonBody').value);
+    jsonBody.messages = messages;
+    jsonBody.stream = document.getElementById('streamToggle').checked;
+
+    return {
+        method: 'POST',
+        headers: JSON.parse(document.getElementById('openaiHeaders').value),
+        body: JSON.stringify(jsonBody),
+        mode: 'cors',
+        credentials: 'same-origin'
+    };
+}
+
+function fetchOpenAIStream(ENDPOINT, payload) {
+    const novelContent2 = document.getElementById('novelContent2');
+    updateRequestButtonState('generating');
+    controller = new AbortController();
+    const signal = controller.signal;
+    payload.signal = signal;
+    fetch(ENDPOINT, payload)
+        .then(response => {
+            if (!response.ok) {
+                throw new Error('ネットワークの応答が常ではありません');
+            }
+            const reader = response.body.getReader();
+            const decoder = new TextDecoder();
+            let buffer = '';
+
+            function readStream() {
+                reader.read().then(({ done, value }) => {
+                    if (done) {
+                        console.debug('ストリームが完了しました');
+                        document.getElementById('stopButton').classList.add('d-none');
+                        requestButton.disabled = false;
+                        return;
+                    }
+
+                    const chunk = decoder.decode(value, { stream: true });
+                    buffer += chunk;
+
+                    const lines = buffer.split('\n');
+                    buffer = lines.pop();
+
+                    lines.forEach(line => {
+                        if (line.startsWith('data: ')) {
+                            const jsonString = line.slice(6);
+                            if (jsonString === '[DONE]') {
+                                console.debug('Received [DONE] signal');
+                                return;
+                            }
+                            try {
+                                const data = JSON.parse(jsonString);
+                                if (data.choices && data.choices[0].delta && data.choices[0].delta.content) {
+                                    novelContent2.value += data.choices[0].delta.content;
+                                    novelContent2.scrollTop = novelContent2.scrollHeight;
+                                }
+                            } catch (error) {
+                                console.error('JSONパースエラー:', error);
+                            }
+                        }
+                    });
+
+                    readStream();
+                }).catch(error => {
+                    if (error.name === 'AbortError') {
+                        console.log('フェッチがユーザーによって中止されました');
+                        updateRequestButtonState('idle');
+                    } else {
+                        console.error('ストリーム読み取りエラー:', error);
+                        updateRequestButtonState('error', 'red-flash-bg');
+                    }
+                });
+            }
+
+            readStream();
+        })
+        .catch(error => {
+            if (error.name === 'AbortError') {
+                console.log('フェッチがユーザーよって中止されました');
+                updateRequestButtonState('idle');
+            } else {
+                console.error('フェッチエラー:', error);
+                updateRequestButtonState('error', 'red-flash-bg');
+            }
+        });
+}
+
+async function fetchOpenAINonStream(ENDPOINT, payload) {
+    const novelContent2 = document.getElementById('novelContent2');
+    updateRequestButtonState('generating');
+    try {
+        const signal = controller.signal;
+        payload.signal = signal;
+        const response = await fetch(ENDPOINT, payload);
+        const data = await response.json();
+        if (data && data.choices && data.choices[0].message && data.choices[0].message.content) {
+            novelContent2.value += data.choices[0].message.content;
+            novelContent2.scrollTop = novelContent2.scrollHeight;
+            updateRequestButtonState('idle', 'green-flash-bg');
+        } else {
+            throw new Error('予期しないレスポンス形式');
+        }
+    } catch (error) {
+        console.error('エラー:', error);
+        updateRequestButtonState('error', 'red-flash-bg');
+    }
+}
+
+async function tokenCount() {
+    const selectedEndpoint = document.getElementById('endpointSelect').value;
+    let payload = createPayload();
+    payload.body = {
+        "contents": JSON.parse(payload.body).contents
+    };
+    payload.body = JSON.stringify(payload.body);
+    if (selectedEndpoint.startsWith('models/gemini')) {
+        const ENDPOINT = `https://generativelanguage.googleapis.com/v1beta/${selectedEndpoint}:countTokens?key=` + document.getElementById('geminiApiKey').value;
+        try {
+            const response = await fetch(ENDPOINT, payload);
+            const data = await response.json();
+            return data.totalTokens;
+        } catch (error) {
+            console.error('エラー:', error);
+            return null;
+        }
+    } else {
+        return -1;
+    }
+
+}
+
+async function createDraft() {
+    const ENDPOINT = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash-exp:generateContent?key=` + document.getElementById('geminiApiKey').value;
+    let payload = createPayload();
+    const response = await fetch(ENDPOINT, payload);
+    const data = await response.json();
+    const text = data.candidates[0].content.parts[0].text;
+    return text
+}
+
+
+async function Request() {
+    generateIndexMenu(true);
+    let selectedEndpoint = document.getElementById('endpointSelect').value;
+    const requestButton = document.getElementById('requestButton');
+    requestButton.disabled = true;
+    document.getElementById('novelContent2').value = '';
+    const outputAccordion = document.querySelector('#content2Collapse');
+    if (outputAccordion) {
+        const bsCollapse = new bootstrap.Collapse(outputAccordion, { toggle: false });
+        bsCollapse.show();
+    }
+
+    let ENDPOINT;
+    let payload;
+
+    if (selectedEndpoint.startsWith('models/gemini')) {
+        ENDPOINT = `https://generativelanguage.googleapis.com/v1beta/${selectedEndpoint}:generateContent?key=` + document.getElementById('geminiApiKey').value;
+        payload = await createPayload();  // 非同期処理を待機
+    } else if (selectedEndpoint === 'restart') {
+        ENDPOINT = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash-exp:generateContent?key=` + document.getElementById('geminiApiKey').value;
+        document.getElementById('novelContent2').value = '（下書き中）';
+        try {
+            draft = await createDraft();
+        } catch (error) {
+            console.error('エラー:', error);
+            requestButton.disabled = false;
+            requestButton.classList.add('green-flash-bg');
+            setTimeout(() => {
+                requestButton.classList.remove('green-flash-bg');
+            }, 2000);
+            return;
+        }
+        //document.getElementById('novelContent2').value = `# 下書き\n${draft}\n\n# リライト\n`;
+        document.getElementById('novelContent2').value = "";
+        const prompt = `以下の文章を、要件を満たす形に直したものを返信してください。\n返信内容は直した後のテキストのみになるようにし他の内容が混ざらないようにしてください。\n\n# 要件\n- 元の文章や会話の言い回しは不自然な日本語になっている部分もかなり多いので、根本的に書き替えること。ただし、登場人物の一人称や他者への呼称は変更しないこと。\n- 物語の大筋やキャラクターの性格は保ったまま、文章は全く別物に書き換える必要がある。元のテキストそのものはなるべく流用しないで新規に書くよう心掛ける。\n- 随所にレトリックを駆使しつつも凝り過ぎて読み辛くなることのないシンプルな美文になることを意識する。\n- 登場人物の会話を重視し、文脈を読み取り元のキャラクター設定に合った台詞回しを保ちつつ、より生き生きとした魅力的な物像に仕上がるようにする。\n- 細かい動作や心理描写のディテールを重視し、よりリアルな描写になるようにする。\n- 文章の終わりに「。」をつける、字下げをするなど、一般的な小説のフォーマットに従う書き方にする。\n\n# 文章\n${draft}`;
+        payload = {
+            method: 'POST',
+            headers: {},
+            body: JSON.stringify({
+                contents: [
+                    {
+                        "parts": [
+                            {
+                                "text": prompt
+                            }
+                        ],
+                        "role": "user"
+                    }
+                ],
+                generationConfig: {
+                    "temperature": 1.0,
+                    "max_output_tokens": 8192
+                },
+                safetySettings: getSafetySettings('models/gemini-2.0-flash-exp')
+            }),
+            mode: 'cors'
+        };
+        selectedEndpoint = 'models/gemini-2.0-flash-exp';
+    } else {
+        ENDPOINT = document.getElementById('openaiEndpoint').value;
+        payload = createOpenAIPayload();
+    }
+
+    let stream = document.getElementById('streamToggle').checked;
+    if (stream) {
+        if (selectedEndpoint.startsWith('models/gemini')) {
+            ENDPOINT = ENDPOINT.replace(':generateContent', ':streamGenerateContent') + '&alt=sse';
+            fetchStream(ENDPOINT, payload);
+        } else {
+            fetchOpenAIStream(ENDPOINT, payload);
+        }
+        document.getElementById('stopButton').classList.remove('d-none');
+    } else {
+        if (selectedEndpoint.startsWith('models/gemini')) {
+            fetchNonStream(ENDPOINT, payload);
+        } else {
+            fetchOpenAINonStream(ENDPOINT, payload);
+        }
+    }
+}
+
+function stopGeneration() {
+    if (controller) {
+        controller.abort();
+        controller = null;
+    }
+    updateRequestButtonState('idle');
+}
+
+// 新しい関数を追加
+function handleKeyPress(event) {
+    if (event.ctrlKey && event.key === 'Enter') {
+        Request();
+    }
+}
+
+function syncInputs() {
+    const inputs = document.querySelectorAll('input[type="range"], input[type="number"]');
+    inputs.forEach(input => {
+        const baseId = input.id.replace('Input', '');
+        const pairedInput = document.getElementById(baseId + (input.type === 'range' ? 'Input' : ''));
+
+        if (pairedInput) {
+            input.addEventListener('input', function () {
+                pairedInput.value = this.value;
+            });
+        }
+    });
+}
+
+function openNextAccordion() {
+    const accordions = document.querySelectorAll('#mainAccordion .accordion-item');
+    let currentIndex = -1;
+
+    // 現在開いているアコーディオンのインデックスを見つける
+    for (let i = 0; i < accordions.length; i++) {
+        if (!accordions[i].querySelector('.accordion-button').classList.contains('collapsed')) {
+            currentIndex = i;
+            break;
+        }
+    }
+
+    // 次のアコーディオンを開く
+    if (currentIndex < accordions.length - 1) {
+        new bootstrap.Collapse(accordions[currentIndex].querySelector('.accordion-collapse')).hide();
+        new bootstrap.Collapse(accordions[currentIndex + 1].querySelector('.accordion-collapse')).show();
+    } else {
+        // もう次がない場合、ボタンを赤く点滅させる
+        const nextButton = document.getElementById('nextAccordion');
+        nextButton.classList.add('red-flash-bg');
+        setTimeout(() => {
+            nextButton.classList.remove('red-flash-bg');
+        }, 2000);
+    }
+}
+
+function openPreviousAccordion() {
+    const accordions = document.querySelectorAll('#mainAccordion .accordion-item');
+    let currentIndex = -1;
+
+    // 現在開いているアコーディオンのインデックスを見つける
+    for (let i = 0; i < accordions.length; i++) {
+        if (!accordions[i].querySelector('.accordion-button').classList.contains('collapsed')) {
+            currentIndex = i;
+            break;
+        }
+    }
+
+    // 前のアコーディオンを開く
+    if (currentIndex > 0) {
+        new bootstrap.Collapse(accordions[currentIndex].querySelector('.accordion-collapse')).hide();
+        new bootstrap.Collapse(accordions[currentIndex - 1].querySelector('.accordion-collapse')).show();
+    } else {
+        // もう前がない場合、ボタンを赤く点滅させる
+        const prevButton = document.getElementById('prevAccordion');
+        prevButton.classList.add('red-flash-bg');
+        setTimeout(() => {
+            prevButton.classList.remove('red-flash-bg');
+        }, 2000);
+    }
+}
+
+function moveToInput() {
+    const content1 = document.getElementById('novelContent1');
+    const content2 = document.getElementById('novelContent2');
+
+    let content1Lines = content1.value.trim().split('\n');
+    let content2Lines = content2.value.trim().split('\n');
+
+    // content1の最後の行とcontent2の先頭行が完全に一致する場合、content2から削除
+    if (content1Lines[content1Lines.length - 1] === content2Lines[0]) {
+        content2Lines.shift();
+    } else {
+        // 分的な重複を検出して削除
+        const lastLine = content1Lines[content1Lines.length - 1];
+        const firstLine = content2Lines[0];
+        const overlapIndex = firstLine.indexOf(lastLine);
+        if (overlapIndex !== -1) {
+            content2Lines[0] = firstLine.slice(overlapIndex + lastLine.length).trim();
+            if (content2Lines[0] === '') {
+                content2Lines.shift();
+            }
+        }
+    }
+
+    // content2の内容をcontent1の末尾に追加
+    content1.value = content1Lines.join('\n') + '\n' + content2Lines.join('\n');
+
+    // content2を空にする
+    content2.value = '';
+
+    // content1Collapseを開く
+    const content1Collapse = new bootstrap.Collapse(document.getElementById('content1Collapse'), {
+        show: true
+    });
+}
+
+function updateNavbarBrand() {
+    const endpointSelect = document.getElementById('endpointSelect');
+    const navbarBrand = document.querySelector('.navbar-brand');
+    const googleIcon = navbarBrand.querySelector('.fa-google');
+    const robotIcon = navbarBrand.querySelector('.fa-robot');
+
+    if (endpointSelect.value.startsWith('models/gemini')) {
+        navbarBrand.style.color = '#4285F4'; // Googleブルー
+        googleIcon.classList.remove('d-none');
+        robotIcon.classList.add('d-none');
+    } else {
+        navbarBrand.style.color = '#00FF00'; // 明るい緑色
+        googleIcon.classList.add('d-none');
+        robotIcon.classList.remove('d-none');
+    }
+}
+
+async function updateTokenCount(force = false) {
+    const currentTime = Date.now();
+    if (currentTime - lastTokenUpdateTimestamp < 60000 && !force) {
+        console.debug('トークン数更新をスキップします');
+        return;
+    }
+    console.debug('トークン数更新を実行します');
+
+    const count = await tokenCount();
+    const indexOffcanvasLabel = document.getElementById('indexOffcanvasLabel');
+    indexOffcanvasLabel.textContent = `目次 (${count}トークン)`;
+    lastTokenUpdateTimestamp = currentTime;
+}
+
+function generateIndexMenu(force = false) {
+    const currentTime = Date.now();
+    if (currentTime - lastIndexUpdateTimestamp < 60000 && !force) {
+        console.debug('目次更新をスキップします');
+        return;
+    }
+    console.debug('目次更新を実行します');
+
+    const content = document.getElementById('novelContent1').value;
+    const tokens = marked.lexer(content);
+    const indexOffcanvasBody = document.querySelector('#indexOffcanvas .offcanvas-body');
+
+    indexOffcanvasBody.innerHTML = '';
+
+    const rootUl = document.createElement('ul');
+    rootUl.className = 'list-unstyled';
+
+    let stack = [{ ul: rootUl, level: 0 }];
+    let lastHeading = null;
+    let contentBuffer = '';
+
+    tokens.forEach((token, index) => {
+        if (token.type === 'heading') {
+            if (lastHeading && contentBuffer.trim()) {
+                addTextarea(lastHeading.querySelector('ul'), contentBuffer.trim());
+            }
+            contentBuffer = '';
+
+            while (stack.length > 1 && stack[stack.length - 1].level >= token.depth) {
+                stack.pop();
+            }
+
+            const li = document.createElement('li');
+            const toggleBtn = document.createElement('button');
+            toggleBtn.className = 'btn btn-sm btn-outline-secondary me-2 toggle-btn';
+            const icon = document.createElement('i');
+            icon.className = 'fas fa-plus'; // Font Awesomeのプラスアイコン
+            toggleBtn.appendChild(icon);
+            toggleBtn.onclick = () => toggleSubMenu(li);
+
+            const a = document.createElement('a');
+            a.href = '#';
+            a.textContent = token.text;
+            a.onclick = (e) => {
+                e.preventDefault();
+                scrollToHeading(token.text);
+            };
+
+            li.appendChild(toggleBtn);
+            li.appendChild(a);
+
+            const subUl = document.createElement('ul');
+            subUl.className = 'list-unstyled ms-3 d-none';
+            li.appendChild(subUl);
+
+            stack[stack.length - 1].ul.appendChild(li);
+
+            if (token.depth > stack[stack.length - 1].level) {
+                stack.push({ ul: subUl, level: token.depth });
+            }
+
+            lastHeading = li;
+        } else if (token.type === 'text' || token.type === 'paragraph') {
+            contentBuffer += token.text + '\n';
+        }
+    });
+
+    if (lastHeading && contentBuffer.trim()) {
+        addTextarea(lastHeading.querySelector('ul'), contentBuffer.trim());
+    }
+
+    if (rootUl.children.length > 0) {
+        indexOffcanvasBody.appendChild(rootUl);
+    } else {
+        indexOffcanvasBody.textContent = '目次がありません';
+    }
+
+    updateTokenCount(force);
+    lastIndexUpdateTimestamp = currentTime;
+}
+
+function toggleSubMenu(li) {
+    const subUl = li.querySelector('ul');
+    const toggleBtn = li.querySelector('.toggle-btn');
+    const icon = toggleBtn.querySelector('i');
+    subUl.classList.toggle('d-none');
+    icon.className = subUl.classList.contains('d-none') ? 'fas fa-plus' : 'fas fa-minus';
+}
+
+function addTextarea(ul, content) {
+    const li = document.createElement('li');
+
+    // テキストエリアの作成
+    const textarea = document.createElement('textarea');
+    textarea.readOnly = true;
+    textarea.className = 'form-control mt-2 full-text';
+    textarea.value = content;
+    textarea.rows = 3;
+
+    // 要約用のテキストエリアの作成
+    const summaryInput = document.createElement('textarea');
+    summaryInput.className = 'form-control mt-2 summery-text';
+    summaryInput.placeholder = '要約';
+    summaryInput.rows = 3;
+    if (summeries[content]) {
+        summaryInput.value = summeries[content];
+    }
+
+    // ボタン用のコンテナ作成
+    const buttonContainer = document.createElement('div');
+    buttonContainer.className = 'mt-2';
+
+    // 要約取得ボタンの作成
+    const summaryButton = document.createElement('button');
+    summaryButton.textContent = '要約を取得';
+    summaryButton.className = 'btn btn-secondary me-2';
+    summaryButton.onclick = async () => {
+        summaryButton.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...';
+        summaryButton.disabled = true;
+        try {
+            const summary = await summerize(content);
+            summaryInput.value = summary;
+            summeries[content] = summary;
+            updateTokenCount(true);
+        } finally {
+            summaryButton.innerHTML = '要約を取得';
+            summaryButton.disabled = false;
+        }
+    };
+
+    // 要約削除ボタンの作成
+    const deleteSummaryButton = document.createElement('button');
+    deleteSummaryButton.textContent = '要約を削除';
+    deleteSummaryButton.className = 'btn btn-danger';
+    deleteSummaryButton.onclick = () => {
+        summaryInput.value = '';
+        delete summeries[content];
+        updateTokenCount(true);
+    };
+
+    // 校正ボタンの作成
+    const proofReadButton = document.createElement('button');
+    proofReadButton.textContent = '校正';
+    proofReadButton.className = 'btn btn-secondary me-2';
+    proofReadButton.onclick = async () => {
+        proofReadButton.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 校正中...';
+        proofReadButton.disabled = true;
+        try {
+            await proofRead(textarea);
+        } finally {
+            proofReadButton.innerHTML = '校正';
+            proofReadButton.disabled = false;
+        }
+    };
+    const hr = document.createElement('hr');
+
+    // ボタンをコンテナに追加
+    buttonContainer.appendChild(summaryButton);
+    buttonContainer.appendChild(deleteSummaryButton);
+    buttonContainer.appendChild(hr);
+    buttonContainer.appendChild(proofReadButton);
+    // 要素の追加
+    li.appendChild(textarea);
+    li.appendChild(summaryInput);
+    li.appendChild(buttonContainer);
+    ul.appendChild(li);
+}
+
+function scrollToHeading(headingText) {
+    const content1 = document.getElementById('novelContent1');
+    const content1Collapse = document.getElementById('content1Collapse');
+    const accordion = new bootstrap.Collapse(content1Collapse, { toggle: false });
+
+    // テキストエリアの内容を行ごとに分割
+    const lines = content1.value.split('\n');
+
+    // 見出しテキストを含む行のインデックスを探す
+    const headingIndex = lines.findIndex(line => line.includes(headingText));
+
+    if (headingIndex !== -1) {
+        // 一時的な要素を作成してテキストエリアの内容をコピー
+        const tempDiv = document.createElement('div');
+        tempDiv.style.cssText = `
+            position: absolute;
+            top: -9999px;
+            left: -9999px;
+            width: ${content1.clientWidth}px;
+            font-size: ${window.getComputedStyle(content1).fontSize};
+            font-family: ${window.getComputedStyle(content1).fontFamily};
+            line-height: ${window.getComputedStyle(content1).lineHeight};
+            white-space: pre-wrap;
+            word-wrap: break-word;
+            visibility: hidden;
+        `;
+        document.body.appendChild(tempDiv);
+
+        // 見出しまでの内容を一時的な要素に挿入
+        tempDiv.textContent = lines.slice(0, headingIndex).join('\n');
+
+        // 見出しまでの高さを計算
+        const scrollPosition = tempDiv.clientHeight;
+
+        // 一時的な要素を削除
+        document.body.removeChild(tempDiv);
+
+        // アコーディオンが既に開かれているかチェック
+        if (content1Collapse.classList.contains('show')) {
+            // 既に開かれている場合は直接スクロール
+            content1.scrollTop = scrollPosition;
+        } else {
+            // 閉じている場合はアコーディオンを開いてからスクロール
+            accordion.show();
+            content1Collapse.addEventListener('shown.bs.collapse', function onShown() {
+                content1.scrollTop = scrollPosition;
+                content1Collapse.removeEventListener('shown.bs.collapse', onShown);
+            }, { once: true });
+        }
+    }
+}
+
+function updateAccordionHeaderCount(accordionId) {
+    const accordionItem = document.getElementById(accordionId).closest('.accordion-item');
+    if (!accordionItem) return;
+
+    const textarea = accordionItem.querySelector('.accordion-body textarea');
+    const header = accordionItem.querySelector('.accordion-header button');
+
+    if (textarea && header) {
+        const charCount = textarea.value.length;
+        const originalText = header.textContent.split('(')[0].trim();
+        header.textContent = `${originalText} (${charCount}文字)`;
+    }
+}
+
+function updateAllAccordionHeaderCounts() {
+    const accordionIds = ['promptsCollapse', 'content1Collapse', 'nextPromptCollapse', 'content2Collapse'];
+    accordionIds.forEach(updateAccordionHeaderCount);
+}
+
+function showDiffModal() {
+    const diffContainer = document.getElementById('diffContainer');
+    diffContainer.innerHTML = '';
+
+    if (replaceProofReadHistory.length === 0) {
+        diffContainer.innerHTML = '<p>校正履歴がありません。</p>';
+        return;
+    }
+
+    replaceProofReadHistory.forEach((entry, index) => {
+        const [original, corrected] = entry;
+        const diff = Diff.diffLines(original.join('\n'), corrected.join('\n'));
+
+        const diffHtml = diff.map(part => {
+            const color = part.added ? 'green' : part.removed ? 'red' : 'grey';
+            const prefix = part.added ? '+' : part.removed ? '-' : ' ';
+            return `<span style="color: ${color}">${prefix} ${part.value}</span>`;
+        }).join('');
+
+        const entryDiv = document.createElement('div');
+        entryDiv.innerHTML = `<h6>校正 ${index + 1}</h6><pre>${diffHtml}</pre><hr>`;
+        diffContainer.appendChild(entryDiv);
+    });
+
+    const modal = new bootstrap.Modal(document.getElementById('diffModal'));
+    modal.show();
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+    // ページ読み込み時にデータを復元
+    loadFromUserStorage();
+
+    // メイン画面の要素のイベントリスナー。inputイベントが発生する頻度が非常に高いのでこちらの発動は60秒に1回に制限する
+    ['novelContent1', 'novelContent2', 'generatePrompt', 'nextPrompt', 'savedTitle'].forEach(id => {
+        document.getElementById(id).addEventListener('input', () => {
+            saveToUserStorage(false);
+            generateIndexMenu(false);
+            updateAllAccordionHeaderCounts();
+        });
+    });
+
+    // 設定画面の要素のイベントリスナー
+    ['memo', 'geminiApiKey', 'endpointSelect', 'openaiEndpoint', 'openaiHeaders', 'openaiJsonBody', 'encodeLength', 'temperature'].forEach(id => {
+        document.getElementById(id).addEventListener('input', () => {
+            saveToUserStorage(true);
+        });
+    });
+
+    ['partialEncodeToggle', 'streamToggle'].forEach(id => {
+        document.getElementById(id).addEventListener('change', () => {
+            saveToUserStorage(true);
+        });
+    });
+
+    document.getElementById('novelContent1').addEventListener('keydown', handleKeyPress);
+
+    document.querySelectorAll('[data-modal-text]').forEach(element => {
+        element.addEventListener('click', function () {
+            document.querySelectorAll(".modal-text").forEach(el => {
+                el.classList.add("d-none");
+                if (el.classList.contains(this.getAttribute('data-modal-text'))) {
+                    el.classList.remove("d-none");
+                }
+            });
+        });
+    });
+
+    syncInputs();
+
+    // 60秒ごとに自動保存実行
+    setInterval(() => {
+        saveToUserStorage();
+        generateIndexMenu(true);
+        updateAllAccordionHeaderCounts();
+    }, 60000);
+
+    // 基本設定のアコーディオンを開く
+    const basicSettingsAccordion = document.querySelector('#promptsCollapse');
+    if (basicSettingsAccordion) {
+        new bootstrap.Collapse(basicSettingsAccordion).show();
+    }
+
+    // ナビゲーションボタンのイベントリスナーを設定
+    document.getElementById('prevAccordion').addEventListener('click', openPreviousAccordion);
+    document.getElementById('nextAccordion').addEventListener('click', openNextAccordion);
+
+    // エンドポイント選択が変更されたときにnavbar-brandを更新
+    document.getElementById('endpointSelect').addEventListener('change', updateNavbarBrand);
+
+    // 初期表示時にも実行
+    updateNavbarBrand();
+    //generateIndexMenu(true);
+    updateAllAccordionHeaderCounts();
+
+    // diff2htmlライブラリの読み込み
+    const script = document.createElement('script');
+    script.src = 'https://cdnjs.cloudflare.com/ajax/libs/jsdiff/5.1.0/diff.min.js';
+    document.head.appendChild(script);
+});

index.html

@@ -1,19 +1,434 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="ja">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>LLM Client</title>
+    <link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
+        crossorigin="anonymous">
+    <style>
+        #mainContent textarea.form-control {
+            min-height: 40vh;
+            font-size: 1.2rem;
+        }
+
+        .accordion-button:not(.collapsed) {
+            background-color: #212529;
+            color: #fff;
+        }
+
+        .navbar-toggler {
+            display: block !important;
+        }
+
+
+        @keyframes redFlashBg {
+
+            0%,
+            100% {
+                background-color: initial;
+            }
+
+            50% {
+                background-color: rgba(255, 0, 0, 0.5);
+            }
+        }
+
+        @keyframes redFlashFg {
+
+            0%,
+            100% {
+                color: initial;
+            }
+
+            50% {
+                color: red;
+            }
+        }
+
+        .red-flash-bg {
+            animation: redFlashBg 0.5s infinite;
+        }
+
+        .red-flash-fg {
+            animation: redFlashFg 0.5s infinite;
+        }
+
+        @keyframes greenFlashBg {
+
+            0%,
+            100% {
+                background-color: initial;
+            }
+
+            50% {
+                background-color: rgba(0, 255, 0, 0.5);
+            }
+        }
+
+        @keyframes greenFlashFg {
+
+            0%,
+            100% {
+                color: initial;
+            }
+
+            50% {
+                color: green;
+            }
+        }
+
+        .green-flash-bg {
+            animation: greenFlashBg 0.5s infinite;
+        }
+
+        .green-flash-fg {
+            animation: greenFlashFg 0.5s infinite;
+        }
+
+        /* 新しいスタイルを追加 */
+        .navbar {
+            position: sticky;
+            top: 0;
+            z-index: 1000;
+        }
+
+        /* メインコンテンツの上部にパディングを追加 */
+        #mainContent {
+            padding-top: 1rem;
+        }
+
+        @media (max-width: 991.98px) {
+            .navbar-brand {
+                font-size: 1rem;
+            }
+
+            .btn-sm {
+                padding: 0.25rem 0.5rem;
+                font-size: 0.75rem;
+            }
+        }
+
+        @media (min-width: 1400px) {}
+
+        /* 目次のスタイル */
+        #indexOffcanvas .offcanvas-body ul {
+            padding-left: 0;
+        }
+
+        #indexOffcanvas .offcanvas-body li {
+            margin-bottom: 0.5rem;
+        }
+
+        #indexOffcanvas .offcanvas-body a {
+            text-decoration: none;
+            color: inherit;
+        }
+
+        #indexOffcanvas .offcanvas-body .toggle-btn {
+            padding: 0.1rem 0.3rem;
+            font-size: 0.8rem;
+        }
+    </style>
+</head>
+
+<body data-bs-theme="dark">
+    <div class="container-fluid">
+        <div class="row">
+            <div class="col-12 text-center">
+                <a class="navbar-brand" href="#">
+                    <i class="fa-brands fa-google"></i>
+                    <i class="fa-solid fa-robot d-none"></i>
+                    LLM Client
+                </a>
+            </div>
+        </div>
+        <div class="row w-100">
+            <div class="col-3 d-flex justify-content-end">
+                <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas"
+                    data-bs-target="#settingsOffcanvas" aria-controls="settingsOffcanvas">
+                    <i class="fas fa-list"></i>
+                </button>
+            </div>
+            <div class="col-6 d-flex justify-content-center">
+                <button id="prevAccordion" class="btn btn-outline-light">
+                    <i class="fas fa-chevron-left"></i> 前へ
+                </button>
+                <button id="requestButton" class="btn btn-primary" onclick="Request()">
+                    生成
+                </button>
+                <button id="stopButton" class="btn btn-danger d-none" onclick="stopGeneration()">
+                    中止
+                </button>
+                <button id="nextAccordion" class="btn btn-outline-light">
+                    次へ <i class="fas fa-chevron-right"></i>
+                </button>
+            </div>
+            <div class="col-3 d-flex justify-content-start">
+                <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#indexOffcanvas"
+                    aria-controls="indexOffcanvas">
+                    <i class="fas fa-book"></i>
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <div class="container">
+        <div class="row justify-content-center">
+            <!-- 画像アップロード用セクション -->
+            <div id="imageUploadSection" class="mb-3">
+                <div class="d-flex justify-content-between align-items-center mb-2">
+                    <h5>画像添付</h5>
+                    <button class="btn btn-outline-primary btn-sm" onclick="addImageInput()">
+                        <i class="fas fa-plus"></i> 画像を追加
+                    </button>
+                </div>
+                <div id="imageInputsContainer">
+                    <!-- 画像入力フィールドがここに動的に追加されます -->
+                </div>
+            </div>
+            <div id="mainContent">
+                <div class="mt-3">
+                    <div class="accordion" id="mainAccordion">
+                        <div class="accordion-item">
+                            <h2 class="accordion-header">
+                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                                    data-bs-target="#promptsCollapse">
+                                    基本設定
+                                </button>
+                            </h2>
+                            <div id="promptsCollapse" class="accordion-collapse collapse"
+                                data-bs-parent="#mainAccordion">
+                                <div class="accordion-body">
+                                    <textarea class="form-control mb-2" id="generatePrompt"
+                                        placeholder="システムプロンプトを入力"></textarea>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="accordion-item">
+                            <h2 class="accordion-header">
+                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                                    data-bs-target="#content1Collapse">
+                                    小説内容 (入力)
+                                </button>
+                            </h2>
+                            <div id="content1Collapse" class="accordion-collapse collapse"
+                                data-bs-parent="#mainAccordion">
+                                <div class="accordion-body">
+                                    <textarea class="form-control mb-2" id="novelContent1"
+                                        placeholder="ここに小説の本文を入力してください"></textarea>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="accordion-item">
+                            <h2 class="accordion-header">
+                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                                    data-bs-target="#nextPromptCollapse">
+                                    次の展開
+                                </button>
+                            </h2>
+                            <div id="nextPromptCollapse" class="accordion-collapse collapse"
+                                data-bs-parent="#mainAccordion">
+                                <div class="accordion-body">
+                                    <div class="d-flex justify-content-between align-items-center mb-3">
+                                        <textarea class="form-control me-2" id="nextPrompt" placeholder="次の展開を指示" rows="1"></textarea>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="accordion-item">
+                            <h2 class="accordion-header">
+                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                                    data-bs-target="#content2Collapse">
+                                    小説内容 (出力)
+                                </button>
+                            </h2>
+                            <div id="content2Collapse" class="accordion-collapse collapse"
+                                data-bs-parent="#mainAccordion">
+                                <div class="accordion-body">
+                                    <textarea class="form-control" id="novelContent2"
+                                        placeholder="ここに続きが表示されます。"></textarea>
+                                    <button id="moveToInputButton" class="btn btn-primary mt-2" onclick="moveToInput()">
+                                        入力欄に追記
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="row mt-3">
+                        <div class="col-12 d-flex justify-content-end">
+                            <input type="text" class="form-control d-inline-block w-auto me-2" id="savedTitle"
+                                placeholder="タイトル">
+                            <button id="saveButton" class="btn btn-secondary me-2" onclick="saveToJson()">
+                                保存
+                            </button>
+                            <button id="loadButton" class="btn btn-secondary" onclick="loadFromJson()">
+                                読込
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="offcanvas offcanvas-start" tabindex="-1" id="settingsOffcanvas"
+        aria-labelledby="settingsOffcanvasLabel">
+        <div class="offcanvas-header">
+            <h5 class="offcanvas-title" id="settingsOffcanvasLabel">設定</h5>
+            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+        </div>
+        <div class="offcanvas-body">
+            <div class="accordion" id="settingsAccordion">
+                <!-- API設定 -->
+                <div class="accordion-item">
+                    <h2 class="accordion-header">
+                        <button class="accordion-button" type="button" data-bs-toggle="collapse"
+                            data-bs-target="#apiSettings">
+                            API設定
+                        </button>
+                    </h2>
+                    <div id="apiSettings" class="accordion-collapse collapse show" data-bs-parent="#settingsAccordion">
+                        <div class="accordion-body">
+                            <h5>エンドポイント</h5>
+                            <select class="form-select mb-2" id="endpointSelect">
+                                <option value="restart">Restart</option>
+                                <option value="openai">OpenAI Compatible</option>
+                            </select>
+
+                            <h5>Gemini API Key</h5>
+                            <p class="text-muted">エンドポイントがGeminiの場合は必須</p>
+                            <input type="text" class="form-control mb-2" id="geminiApiKey" placeholder="Gemini API Key">
+
+                            <h5 class="mt-3">OpenAI Compatible設定</h5>
+                            <p class="text-muted">エンドポイントがOpenAI Compatibleの場合は必須</p>
+                            <input type="text" class="form-control mb-2" id="openaiEndpoint"
+                                placeholder="OpenAI Endpoint">
+                            <textarea class="form-control mb-2" id="openaiHeaders"
+                                placeholder='{
+    "Content-Type": "application/json",
+    "Authorization": "Bearer sk-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
+}'></textarea>
+                            <textarea class="form-control mb-2" id="openaiJsonBody"
+                                placeholder='{
+    "model": "gemini-pro",
+    "messages": [],
+    "temperature": 1.0,
+    "max_tokens": 8192,
+    "stream": true
+}'></textarea>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 生成設定 -->
+                <div class="accordion-item">
+                    <h2 class="accordion-header">
+                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                            data-bs-target="#generationSettings">
+                            生成設定
+                        </button>
+                    </h2>
+                    <div id="generationSettings" class="accordion-collapse collapse"
+                        data-bs-parent="#settingsAccordion">
+                        <div class="accordion-body">
+                            <div class="mb-2">
+                                <label for="encodeLength" class="form-label">エンコード長</label>
+                                <input type="range" class="form-range" id="encodeLength" placeholder="エンコード長" min="1"
+                                    max="16" value="4">
+                                <input type="number" class="form-control" id="encodeLengthInput" placeholder="エンコード長"
+                                    min="1" max="16" value="4">
+                            </div>
+                            <div class="form-check mb-2 form-switch">
+                                <input class="form-check-input" type="checkbox" id="summerizedPromptToggle">
+                                <label class="form-check-label" for="summerizedPromptToggle">Summerize</label>
+                            </div>
+                            <div class="form-check mb-2 form-switch">
+                                <input class="form-check-input" type="checkbox" id="partialEncodeToggle">
+                                <label class="form-check-label" for="partialEncodeToggle">Encode</label>
+                            </div>
+                            <div class="form-check mb-2 form-switch">
+                                <input class="form-check-input" type="checkbox" id="streamToggle" checked>
+                                <label class="form-check-label" for="streamToggle">Stream</label>
+                            </div>
+                            <div class="mb-2">
+                                <label for="temperature" class="form-label">Temperature</label>
+                                <input type="range" class="form-range" id="temperature" min="0" max="2" value="1.0" step="0.1">
+                                <input type="number" class="form-control" id="temperatureInput" value="1.0" min="0" max="2" step="0.1">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- その他の設定 -->
+                <div class="accordion-item">
+                    <h2 class="accordion-header">
+                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                            data-bs-target="#otherSettings">
+                            その他の設定
+                        </button>
+                    </h2>
+                    <div id="otherSettings" class="accordion-collapse collapse" data-bs-parent="#settingsAccordion">
+                        <div class="accordion-body">
+                            <h5>メモ欄</h5>
+                            <textarea class="form-control mb-2" id="memo" placeholder="メモ用項目。生成に一切影響しません。"
+                                rows="5"></textarea>
+
+                            <button id="formatTextButton" class="btn btn-primary mb-2" onclick="formatText()">
+                                <i class="fa-solid fa-align-left"></i> 改行を整理
+                            </button>
+
+                            <h5 class="mt-3">デバッグ</h5>
+                            <button id="debugButton" class="btn btn-secondary mb-2" onclick="debugPrompt()">
+                                <i class="fa-solid fa-bug"></i> payload
+                            </button>
+                            <button id="summaryButton" class="btn btn-secondary mb-2" onclick="console.log(createSummarizedText())">
+                                <i class="fa-solid fa-bug"></i> 要約
+                            </button>
+
+                            <h5 class="mt-3">校正履歴</h5>
+                            <button id="showDiffButton" class="btn btn-secondary mb-2" onclick="showDiffModal()">
+                                <i class="fa-solid fa-history"></i> 校正履歴を表示
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 新しい右側のOffCanvas -->
+    <div class="offcanvas offcanvas-end" tabindex="-1" id="indexOffcanvas" aria-labelledby="indexOffcanvasLabel">
+        <div class="offcanvas-header">
+            <h5 class="offcanvas-title" id="indexOffcanvasLabel">目次</h5>
+            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+        </div>
+        <div class="offcanvas-body">
+            <!-- ここに目次の内容を追加します -->
+        </div>
+    </div>
+
+    <!-- モーダルウィンドウの追加 -->
+    <div class="modal fade" id="diffModal" tabindex="-1" aria-labelledby="diffModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-lg">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="diffModalLabel">校正履歴</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <div id="diffContainer"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="https://unpkg.com/[email protected]/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <script src="gemini.js"></script>
+</body>
+
+</html>

util/index.html

@@ -0,0 +1,406 @@
+<!DOCTYPE html>
+<html lang="ja" data-bs-theme="dark">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>テキスト編集ユーティリティ</title>
+    <!-- Bootstrap 5 CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Font Awesome -->
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <style>
+        .text-area-container {
+            margin: 20px 0;
+            position: relative;
+        }
+
+        .text-area-controls {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            z-index: 10;
+            display: flex;
+            gap: 5px;
+        }
+
+        .text-area-controls .btn {
+            padding: 4px 8px;
+            font-size: 12px;
+            border-radius: 4px;
+        }
+
+        .text-area-container textarea {
+            padding-right: 80px;
+        }
+
+        .accordion-button:not(.collapsed) {
+            background-color: var(--bs-primary-bg-subtle);
+        }
+
+        .layout-wrapper {
+            display: flex;
+            flex-direction: row;
+            height: 100vh;
+        }
+
+        .sidebar {
+            width: 250px;
+            min-width: 250px;
+            transition: all 0.3s;
+            z-index: 1000;
+            background-color: var(--bs-body-bg);
+            border-right: 1px solid var(--bs-border-color, #444);
+            margin-top: 32px;
+        }
+
+        .main-content {
+            flex: 1 1 0%;
+            transition: all 0.3s;
+            margin-top: 32px;
+            display: flex;
+            flex-direction: column;
+            align-items: stretch;
+        }
+
+        .main-inner {
+            width: 100%;
+            max-width: 100%;
+            padding: 0 8px;
+            margin: 0;
+        }
+
+        @media (min-width: 768px) {
+            .layout-wrapper {
+                padding: 0 25vh;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div class="layout-wrapper">
+
+        <!-- メインコンテンツ -->
+        <div class="main-content" id="mainContent">
+            <div class="main-inner">
+                <h2 class="mb-3">テキスト編集ユーティリティ</h2>
+                <div class="d-grid gap-2">
+                    <button class="btn btn-primary" id="processBtn">
+                        <i class="fas fa-cog me-2"></i>Process
+                    </button>
+                    <button class="btn btn-secondary" id="deprocessBtn">
+                        <i class="fas fa-undo me-2"></i>Deprocess
+                    </button>
+                </div>
+                <div class="accordion" id="textEditorAccordion">
+                    <!-- 上部テキストエリア -->
+                    <div class="accordion-item">
+                        <h2 class="accordion-header">
+                            <button class="accordion-button" type="button" data-bs-toggle="collapse"
+                                data-bs-target="#collapseOne">
+                                <i class="fas fa-chevron-down me-2"></i>上部テキストエリア
+                            </button>
+                        </h2>
+                        <div id="collapseOne" class="accordion-collapse collapse show"
+                            data-bs-parent="#textEditorAccordion">
+                            <div class="accordion-body">
+                                <div class="text-area-container">
+                                    <div class="text-area-controls">
+                                        <button class="btn btn-outline-primary btn-sm" onclick="copyToClipboard('topText', event)" title="コピー">
+                                            <i class="fas fa-copy"></i>
+                                        </button>
+                                        <button class="btn btn-outline-secondary btn-sm" onclick="pasteFromClipboard('topText')" title="ペースト">
+                                            <i class="fas fa-paste"></i>
+                                        </button>
+                                    </div>
+                                    <textarea id="topText" class="form-control" style="width:100%; min-height:50vh;"
+                                        rows="10" placeholder="ここにテキストを入力してください"></textarea>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- 下部テキストエリア -->
+                    <div class="accordion-item">
+                        <h2 class="accordion-header">
+                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                                data-bs-target="#collapseTwo">
+                                <i class="fas fa-chevron-down me-2"></i>下部テキストエリア
+                            </button>
+                        </h2>
+                        <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#textEditorAccordion">
+                            <div class="accordion-body">
+                                <div class="text-area-container">
+                                    <div class="text-area-controls">
+                                        <button class="btn btn-outline-primary btn-sm" onclick="copyToClipboard('bottomText', event)" title="コピー">
+                                            <i class="fas fa-copy"></i>
+                                        </button>
+                                        <button class="btn btn-outline-secondary btn-sm" onclick="pasteFromClipboard('bottomText')" title="ペースト">
+                                            <i class="fas fa-paste"></i>
+                                        </button>
+                                    </div>
+                                    <textarea id="bottomText" class="form-control" style="width:100%; min-height:50vh;"
+                                        rows="10" placeholder="ここにテキストを入力してください"></textarea>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="accordion-item">
+                        <h2 class="accordion-header">
+                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                                data-bs-target="#collapseThree">
+                                <i class="fas fa-chevron-down me-2"></i>メモ
+                            </button>
+                        </h2>
+                        <div id="collapseThree" class="accordion-collapse collapse"
+                            data-bs-parent="#textEditorAccordion">
+                            <div class="accordion-body">
+                                <div class="text-area-container">
+                                    <div class="text-area-controls">
+                                        <button class="btn btn-outline-primary btn-sm" onclick="copyToClipboard('memoArea', event)" title="コピー">
+                                            <i class="fas fa-copy"></i>
+                                        </button>
+                                        <button class="btn btn-outline-secondary btn-sm" onclick="pasteFromClipboard('memoArea')" title="ペースト">
+                                            <i class="fas fa-paste"></i>
+                                        </button>
+                                    </div>
+                                    <textarea id="memoArea" class="form-control" style="width:100%; min-height:50vh;"
+                                        rows="10" placeholder="ここにテキストを入力してください"></textarea>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Bootstrap 5 JS Bundle with Popper -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+    <script>
+        let lastSaveTimestamp = 0;
+
+        // 0pxスペース（ゼロ幅スペース）の定数
+        const ZERO_WIDTH_SPACE = '&#8204;';
+
+        // 既知のダミー文字の候補
+        const KNOWN_DUMMY_CHARS = [
+            '\u200c', '\u200b', '\u200d',  // ゼロ幅文字
+            '&#8204;', '&#8203;', '&zwnj;', // HTMLエンティティ
+            '\u200e', '\u200f',            // 方向制御文字
+            '\u2060', '\u2061', '\u2062', '\u2063', '\u2064' // その他の制御文字
+        ];
+
+        // 文字の出現頻度を分析する関数
+        function analyzeCharFrequency(text) {
+            const frequency = new Map();
+            for (let i = 0; i < text.length; i++) {
+                const char = text[i];
+                frequency.set(char, (frequency.get(char) || 0) + 1);
+            }
+            return frequency;
+        }
+
+        // 文字列のパターンを分析してダミー文字の候補を探す関数
+        function findPatternCandidate(text) {
+            if (!text || text.length < 3) return null;
+
+            // 文字の出現頻度を分析
+            const frequency = analyzeCharFrequency(text);
+
+            // 文字列を2文字ずつに分割して、各文字の間の文字を確認
+            const patternMap = new Map();
+            for (let i = 1; i < text.length - 1; i += 2) {
+                const char = text[i];
+                const prevChar = text[i - 1];
+                const nextChar = text[i + 1];
+
+                // 前後の文字が同じで、かつ現在の文字が一定の頻度で出現している場合
+                if (prevChar === nextChar &&
+                    frequency.get(char) > text.length * 0.3) { // 30%以上の出現率
+                    patternMap.set(char, (patternMap.get(char) || 0) + 1);
+                }
+            }
+
+            // 最も頻出するパターンを返す
+            let maxCount = 0;
+            let candidate = null;
+            for (const [char, count] of patternMap) {
+                if (count > maxCount) {
+                    maxCount = count;
+                    candidate = char;
+                }
+            }
+
+            return candidate;
+        }
+
+        // 文字間のダミー文字を検出する関数
+        function detectDummyChar(text) {
+            if (!text || text.length < 3) return null;
+
+            // まず既知のダミー文字をチェック
+            for (let i = 1; i < text.length - 1; i += 2) {
+                const char = text[i];
+                if (KNOWN_DUMMY_CHARS.includes(char) &&
+                    text[i - 1] !== char && text[i + 1] !== char) {
+                    return char;
+                }
+            }
+
+            // 既知のダミー文字が見つからない場合はパターン分析を実行
+            return findPatternCandidate(text);
+        }
+
+        // 文字列の各文字の間に指定の文字列を挟む
+        function insertBetweenChars(text, insertStr) {
+            if (!text) return '';
+            return text.split('').join(insertStr);
+        }
+
+        // 文字列から指定の文字列を除去
+        function removeBetweenChars(text, removeStr) {
+            if (!text) return '';
+            return text.split(removeStr).join('');
+        }
+
+        // HTMLエンティティを実体参照に変換する関数
+        function decodeHtmlEntities(str) {
+            const textarea = document.createElement('textarea');
+            textarea.innerHTML = str;
+            return textarea.value;
+        }
+
+        // テキストエリアの値を取得・設定する関数
+        function getUpperText() {
+            return document.querySelectorAll('.text-area-container textarea')[0].value;
+        }
+        function setUpperText(val) {
+            document.querySelectorAll('.text-area-container textarea')[0].value = val;
+        }
+        function getLowerText() {
+            return document.querySelectorAll('.text-area-container textarea')[1].value;
+        }
+        function setLowerText(val) {
+            document.querySelectorAll('.text-area-container textarea')[1].value = val;
+        }
+
+        // processボタンの挙動
+        document.getElementById('processBtn').addEventListener('click', function () {
+            const upperText = getUpperText();
+            const processed = insertBetweenChars(upperText, ZERO_WIDTH_SPACE);
+            setLowerText(processed);
+            // 下部テキストエリアを表示
+            const lowerAccordion = new bootstrap.Collapse(document.getElementById('collapseTwo'), {
+                toggle: false
+            });
+            lowerAccordion.show();
+        });
+
+        // deprocessボタンの挙動
+        document.getElementById('deprocessBtn').addEventListener('click', function () {
+            let lowerText = getLowerText();
+            // まずHTMLエンティティを実体参照に変換
+            lowerText = decodeHtmlEntities(lowerText);
+            const dummyChar = detectDummyChar(lowerText);
+            if (!dummyChar) {
+                alert('文字間のダミー文字を検出できませんでした。');
+                return;
+            }
+            const deprocessed = removeBetweenChars(lowerText, dummyChar);
+            setUpperText(deprocessed);
+            // 上部テキストエリアを表示
+            const upperAccordion = new bootstrap.Collapse(document.getElementById('collapseOne'), {
+                toggle: false
+            });
+            upperAccordion.show();
+        });
+
+        function saveToUserStorage(force = false) {
+            const currentTime = Date.now();
+            if (currentTime - lastSaveTimestamp < 5000 && !force) {
+                console.debug('セーブをスキップします');
+                return;
+            }
+            console.debug('セーブを実行します');
+
+            // 既存のデータを取得
+            const textUtilData = JSON.parse(localStorage.getItem('textUtil') || '{}');
+
+            const newData = {};
+            Array.from(document.querySelectorAll("input[id], textarea[id], select[id]")).forEach(el => {
+                if (el.id) {
+                    newData[el.id] = el.type === 'checkbox' ? el.checked : el.value;
+                }
+            });
+            Object.assign(textUtilData, newData);
+            console.log(textUtilData);
+            localStorage.setItem('textUtil', JSON.stringify(textUtilData));
+            lastSaveTimestamp = currentTime;
+        }
+
+        function loadFromUserStorage() {
+            const textUtilData = JSON.parse(localStorage.getItem('textUtil') || '{}');
+            document.getElementById('bottomText').value = textUtilData['bottomText'] || '';
+            document.getElementById('topText').value = textUtilData['topText'] || '';
+            document.getElementById('memoArea').value = textUtilData['memoArea'] || '';
+        }
+
+        document.querySelectorAll("#bottomText, #topText").forEach(el => {
+            el.addEventListener('input', () => {
+                saveToUserStorage(false);
+            });
+        });
+        document.querySelectorAll("#memoArea").forEach(el => {
+            el.addEventListener('input', () => {
+                saveToUserStorage(true);
+            });
+        });
+
+        document.addEventListener('DOMContentLoaded', function () {
+            // ページ読み込み時にデータを復元
+            loadFromUserStorage();
+        });
+
+        // クリップボードにコピーする関数
+        async function copyToClipboard(textareaId, event) {
+            const textarea = document.getElementById(textareaId);
+            const text = textarea.value;
+            
+            try {
+                await navigator.clipboard.writeText(text);
+                // 成功時のフィードバック（オプション）
+                const button = event.target.closest('button');
+                const originalText = button.innerHTML;
+                button.innerHTML = '<i class="fas fa-check"></i>';
+                setTimeout(() => {
+                    button.innerHTML = originalText;
+                }, 1000);
+            } catch (err) {
+                console.error('クリップボードへのコピーに失敗しました:', err);
+                alert('クリップボードへのコピーに失敗しました');
+            }
+        }
+
+        // クリップボードからペーストする関数
+        async function pasteFromClipboard(textareaId) {
+            const textarea = document.getElementById(textareaId);
+            
+            try {
+                const text = await navigator.clipboard.readText();
+                textarea.value = text;
+                // ペースト後に自動保存
+                saveToUserStorage(true);
+            } catch (err) {
+                console.error('クリップボードからのペーストに失敗しました:', err);
+                alert('クリップボードからのペーストに失敗しました');
+            }
+        }
+
+
+    </script>
+</body>
+
+</html>