Upload 2 files

gemini.js

@@ -0,0 +1,746 @@
+let lastSaveTimestamp = 0;
+let controller;
+
+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 || '';
+}
+
+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';
+    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) {
+                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;
+                    }
+                    alert('JSONファイルを正常に読み込みました。');
+                } catch (error) {
+                    alert('無効なJSONファイルです。');
+                }
+            };
+            reader.readAsText(file);
+        }
+    });
+    fileInput.click();
+}
+
+function saveToUserStorage(force = false) {
+    console.debug('saveToUserStorage', force);
+    const currentTime = Date.now();
+    if (!force && currentTime - lastSaveTimestamp < 5000) {
+        return;
+    }
+    console.debug('セーブを実行します');
+
+    const geminiClientData = {
+        // メイン画面の要素（forceがfalseの場合も保存）
+        novelContent1: document.getElementById('novelContent1').value,
+        novelContent2: document.getElementById('novelContent2').value,
+        generatePrompt: document.getElementById('generatePrompt').value,
+        nextPrompt: document.getElementById('nextPrompt').value,
+        savedTitle: document.getElementById('savedTitle').value,
+    };
+
+    if (force) {
+        // 設定画面の要素（forceがtrueの場合のみ保存）
+        geminiClientData.memo = document.getElementById('memo').value;
+        geminiClientData.geminiApiKey = document.getElementById('geminiApiKey').value;
+        geminiClientData.endpointSelect = document.getElementById('endpointSelect').value;
+        geminiClientData.openaiEndpoint = document.getElementById('openaiEndpoint').value;
+        geminiClientData.openaiHeaders = document.getElementById('openaiHeaders').value;
+        geminiClientData.openaiJsonBody = document.getElementById('openaiJsonBody').value;
+        geminiClientData.characterCount = document.getElementById('characterCount').value;
+        geminiClientData.partialEncodeToggle = document.getElementById('partialEncodeToggle').checked;
+        geminiClientData.encodeLength = document.getElementById('encodeLength').value;
+        geminiClientData.streamToggle = document.getElementById('streamToggle').checked;
+    }
+
+    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).forEach(key => {
+            const elem = document.getElementById(key);
+            if (elem) {
+                if (elem.type === 'checkbox') {
+                    elem.checked = geminiClientData[key];
+                } else {
+                    elem.value = geminiClientData[key];
+                }
+                
+                // 特別な処理が必要な要素
+                if (key === 'characterCount' || key === 'encodeLength' || key === 'contentWidth') {
+                    const inputElem = document.getElementById(`${key}Input`);
+                    if (inputElem) {
+                        inputElem.value = geminiClientData[key];
+                    }
+                }
+            } else {
+                console.debug(`要素が見つかりません: ${key}`);
+            }
+        });
+    }
+}
+
+function createPayload() {
+    const novelContent1 = document.getElementById('novelContent1');
+    const text = novelContent1.value;
+    const lines = text.split('\n').filter(x => x);
+
+
+    let systemPrompt = `${partialEncodeURI(document.getElementById('generatePrompt').value)}`;
+    let messages = [
+        {
+            "role": "user",
+            "parts": [{ "text": "." }]
+        },
+        {
+            "role": "model",
+            "parts": [{ "text": partialEncodeURI(lines.join("\n")) }]
+        },
+        {
+            "role": "user",
+            "parts": [{ "text": `続きを書いて。${partialEncodeURI(document.getElementById('nextPrompt').value)} ${document.getElementById('characterCountInput').value}文字程度。${systemPrompt}` }]
+        }
+    ];
+
+    return {
+        method: 'POST',
+        headers: {},
+        body: JSON.stringify({
+            contents: messages,
+            "generationConfig": {
+                "temperature": 1.0,
+                "max_output_tokens": 4096
+            },
+            safetySettings: [
+                {
+                    "category": "HARM_CATEGORY_HATE_SPEECH",
+                    "threshold": "BLOCK_NONE"
+                },
+                {
+                    "category": "HARM_CATEGORY_DANGEROUS_CONTENT",
+                    "threshold": "BLOCK_NONE"
+                },
+                {
+                    "category": "HARM_CATEGORY_HARASSMENT",
+                    "threshold": "BLOCK_NONE"
+                },
+                {
+                    "category": "HARM_CATEGORY_SEXUALLY_EXPLICIT",
+                    "threshold": "BLOCK_NONE"
+                }
+            ]
+        }),
+        mode: 'cors'
+    };
+}
+
+function debugPrompt() {
+    console.log({
+        "gemini": JSON.parse(createPayload().body),
+        "openai": JSON.parse(createOpenAIPayload().body)
+    });
+}
+
+function fetchStream(ENDPOINT, payload) {
+    const novelContent2 = document.getElementById('novelContent2');
+    const requestButton = document.getElementById('requestButton');
+    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('フェッチがユーザーによって中止されました');
+                    } else {
+                        console.error('ストリーム読み取りエラー:', error);
+                    }
+                    document.getElementById('stopButton').classList.add('d-none');
+                    requestButton.disabled = false;
+                });
+            }
+
+            readStream();
+        })
+        .catch(error => {
+            if (error.name === 'AbortError') {
+                console.log('フェッチがユーザーよって中止されました');
+            } else {
+                console.error('フェッチエラー:', error);
+            }
+            requestButton.disabled = false;
+        });
+}
+
+function fetchNonStream(ENDPOINT, payload) {
+    const novelContent2 = document.getElementById('novelContent2');
+    fetch(ENDPOINT, payload)
+        .then(response => response.json())
+        .then(data => {
+            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;
+            }
+        })
+        .catch(error => {
+            console.error('エラー:', error);
+        })
+        .finally(() => {
+            document.getElementById('requestButton').disabled = false;
+        });
+}
+
+function createOpenAIPayload() {
+    const novelContent1 = document.getElementById('novelContent1');
+    const text = novelContent1.value;
+    const lines = text.split('\n').filter(x => x);
+    let lastPart = lines.pop() || '';
+
+    let messages = [
+        {
+            "content": document.getElementById('generatePrompt').value || ".",
+            "role": "system"
+        },
+        {
+            "content": ".",
+            "role": "user"
+        },
+        {
+            "content": partialEncodeURI(lines.join("\n")) || ".",
+            "role": "assistant"
+        },
+        {
+            "content": `続きを${document.getElementById('characterCountInput').value}文字程度で書いてください。${partialEncodeURI(document.getElementById('nextPrompt').value)}`,
+            "role": "user"
+        },
+        {
+            "content": lastPart,
+            "role": "assistant"
+        }
+    ];
+
+    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',  // CORSモードを追加
+        credentials: 'same-origin'  // 必要に応じて認証情報を含める
+    };
+}
+
+function fetchOpenAIStream(ENDPOINT, payload) {
+    const novelContent2 = document.getElementById('novelContent2');
+    const requestButton = document.getElementById('requestButton');
+    controller = new AbortController();
+    const signal = controller.signal;
+
+    fetch(ENDPOINT, {
+        ...payload,
+        signal,
+        mode: 'cors',  // CORSモードを追加
+        credentials: 'same-origin'  // 必要に応じて認証情報を含める
+    })
+        .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('フェッチがユーザーによって中止されました');
+                    } else {
+                        console.error('ストリーム読み取りエラー:', error);
+                    }
+                    document.getElementById('stopButton').classList.add('d-none');
+                    requestButton.disabled = false;
+                });
+            }
+
+            readStream();
+        })
+        .catch(error => {
+            if (error.name === 'AbortError') {
+                console.log('フェッチがユーザーよって中止されました');
+            } else {
+                console.error('フェッチエラー:', error);
+            }
+            requestButton.disabled = false;
+        });
+}
+
+function fetchOpenAINonStream(ENDPOINT, payload) {
+    const novelContent2 = document.getElementById('novelContent2');
+    fetch(ENDPOINT, {
+        ...payload,
+        mode: 'cors',  // CORSモードを追加
+        credentials: 'same-origin'  // 必要に応じて認証情報を含める
+    })
+        .then(response => response.json())
+        .then(data => {
+            if (data && data.choices && data.choices[0].message && data.choices[0].message.content) {
+                novelContent2.value += data.choices[0].message.content;
+                novelContent2.scrollTop = novelContent2.scrollHeight;
+            }
+        })
+        .catch(error => {
+            console.error('エラー:', error);
+        })
+        .finally(() => {
+            document.getElementById('requestButton').disabled = false;
+        });
+}
+
+function Request() {
+    const selectedEndpoint = document.getElementById('endpointSelect').value;
+    let ENDPOINT;
+    let payload;
+
+    if (selectedEndpoint.startsWith('models/gemini')) {
+        ENDPOINT = `https://generativelanguage.googleapis.com/v1beta/${selectedEndpoint}:generateContent?key=` + document.getElementById('geminiApiKey').value;
+        payload = createPayload();
+    } else {
+        ENDPOINT = document.getElementById('openaiEndpoint').value;
+        payload = createOpenAIPayload();
+    }
+
+    document.getElementById('requestButton').disabled = true;
+    let stream = document.getElementById('streamToggle').checked;
+    document.getElementById('novelContent2').value = '';
+
+    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);
+        }
+    }
+
+    const outputAccordion = document.querySelector('#content2Collapse');
+    if (outputAccordion) {
+        const bsCollapse = new bootstrap.Collapse(outputAccordion, { toggle: false });
+        bsCollapse.show();
+    }
+}
+
+function stopGeneration() {
+    if (controller) {
+        controller.abort();
+        controller = null;
+    }
+    document.getElementById('stopButton').classList.add('d-none');
+    document.getElementById('requestButton').disabled = false;
+}
+
+// 新しい関数を追加
+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');
+    }
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+    // ページ読み込み時にデータを復元
+    loadFromUserStorage();
+
+    // メイン画面の要素のイベントリスナー
+    ['novelContent1', 'novelContent2', 'generatePrompt', 'nextPrompt', 'savedTitle'].forEach(id => {
+        document.getElementById(id).addEventListener('input', () => {
+            saveToUserStorage(false);
+        });
+    });
+
+    // 設定画面の要素のイベントリスナー
+    ['memo', 'geminiApiKey', 'endpointSelect', 'openaiEndpoint', 'openaiHeaders', 'openaiJsonBody', 'characterCount', 'encodeLength'].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();
+    }, 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();
+});

index.html

@@ -9,156 +9,360 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
         crossorigin="anonymous">
     <style>
-        #novelContent1,
-        #novelContent2 {
-            height: 50vh;
+        #mainContent textarea.form-control {
+            min-height: 50vh;
         }
 
-        #generatePrompt,
-        #nextPrompt {
-            height: 20vh;
+        .accordion-button:not(.collapsed) {
+            background-color: #212529;
+            color: #fff;
         }
 
-        @media (max-width: 767px) {
+        .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 {
 
-            #novelContent1,
-            #novelContent2,
-            #modal-body-1 textarea {
-                height: 90vh;
+            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) {
+            #mainContent {
+                max-width: 50vw;
             }
         }
     </style>
 </head>
 
 <body data-bs-theme="dark">
-    <div id="my-modal" class="modal fade" tabindex="-1" aria-labelledby="my-modalLabel" aria-hidden="true">
-        <div class="modal-dialog modal-lg modal-dialog-centered">
-            <div class="modal-content">
-                <div class="bg-primary modal-header">
-                    <h5 id="modal-title-1" class="modal-title modal-text modal-text-1">API Settings</h5>
-                    <h5 id="modal-title-2" class="modal-title modal-text modal-text-2">Utility</h5>
-                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
-                        aria-label="Close"></button>
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+        <div class="container-fluid">
+            <div class="row justify-content-between align-items-center w-100">
+                <div class="col-auto">
+                    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas"
+                        data-bs-target="#settingsOffcanvas" aria-controls="settingsOffcanvas">
+                        <span class="navbar-toggler-icon"></span>
+                    </button>
+                </div>
+                <div class="col-auto 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 class="col-auto"></div>
+            </div>
+        </div>
+    </nav>
+
+    <div class="container-fluid mt-2">
+        <div class="row justify-content-center">
+            <div class="col-auto">
+                <button id="prevAccordion" class="btn btn-outline-light">
+                    <i class="fas fa-chevron-left"></i> 前へ
+                </button>
+            </div>
+            <div class="col-auto">
+                <div class="form-check form-switch">
+                    <input class="form-check-input" type="checkbox" id="partialEncodeToggle">
+                    <label class="form-check-label" for="partialEncodeToggle">Encode</label>
                 </div>
-                <div id="modal-body-1" class="modal-body modal-text modal-text-1">
-                    <div class="row">
-                        <div class="col-12">
-                            <input type="text" class="form-control" id="endpoint" placeholder="Endpoint">
+                <button id="requestButton" class="btn btn-primary" onclick="Request()">
+                    生成
+                </button>
+                <button id="stopButton" class="btn btn-danger d-none" onclick="stopGeneration()">
+                    中止
+                </button>
+            </div>
+            <div class="col-auto">
+                <button id="nextAccordion" class="btn btn-outline-light">
+                    次へ <i class="fas fa-chevron-right"></i>
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <div class="container">
+        <div class="row justify-content-center">
+            <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="col-12">
-                            <textarea class="form-control" id="headers" placeholder="Headers" rows="7"></textarea>
+                        <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="col-12">
-                            <textarea class="form-control" id="jsonBody" placeholder="Body" rows="7"></textarea>
+                        <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">
+                                        <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>
-                <div id="modal-body-2" class="modal-body modal-text modal-text-2">
-                    <div class="row">
-                        <div class="col-12 mb-3">
-                            <button id="formatTextButton" class="btn btn-primary" onclick="formatText()">
-                                <i class="fa-solid fa-align-left"></i> 改行を整理
+
+                    <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 class="modal-footer">
-                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-                </div>
             </div>
         </div>
     </div>
-    <div class="container-fluid">
-        <div class="row m-0 border-start border-end border-2">
-            <div class="col-12">
-                <textarea class="form-control" id="generatePrompt" placeholder="システムプロンプトを入力"></textarea>
-            </div>
-            <div class="col-12 col-md-6">
-                <textarea class="form-control" id="novelContent1" placeholder="ここに小説の本文を入力してください"></textarea>
-            </div>
-            <div class="col-12 col-md-6">
-                <textarea class="form-control" id="novelContent2" placeholder="ここに続きが表示されます。"></textarea>
-            </div>
 
-            <div class="col-12">
-                <textarea class="form-control" id="nextPrompt" placeholder="次の展開を指示"></textarea>
-            </div>
-            <div class="col-12 col-md-6 small lh-1">
-                <div class="row">
-                    <div class="col-12 col-md-2 d-flex align-items-center mb-2 mb-md-0">
-                        <button class="btn btn-primary mx-1" data-bs-toggle="modal" data-bs-target="#my-modal"
-                            data-modal-text="modal-text-1">
-                            <i class="fa-solid fa-cog"></i>
-                        </button>
-                        <button class="btn btn-primary mx-1" data-bs-toggle="modal" data-bs-target="#my-modal"
-                            data-modal-text="modal-text-2">
-                            <i class="fa-solid fa-wrench"></i>
+    <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="models/gemini-1.5-pro-002">gemini-1.5-pro-002</option>
+                                <option value="models/gemini-1.5-flash-002">gemini-1.5-flash-002</option>
+                                <option value="models/gemini-1.5-pro-latest">gemini-1.5-pro-latest</option>
+                                <option value="models/gemini-1.5-flash-latest">gemini-1.5-flash-latest</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="OpenAI Headers (JSON形式)"></textarea>
+                            <textarea class="form-control mb-2" id="openaiJsonBody"
+                                placeholder="OpenAI Body (JSON形式)"></textarea>
+                        </div>
                     </div>
-                    <div class="col-12 col-md-4 mb-2 mb-md-0 px-5">
-                        <label for="characterCount" class="form-label mb-0 me-3">文字数</label>
-                        <input data-input-group="characterCount" type="range" class="form-range me-2"
-                            id="characterCount" min="1" max="4096" value="3000">
-                        <input data-input-group="characterCount" type="number" class="form-control me-2"
-                            id="characterCountInput" value="3000" min="1" max="4096">
-                    </div>
-                    <div class="col-12 col-md-3 mb-2 mb-md-0 px-5">
-                        <label for="encodeLength" class="form-label mb-0 me-3">エンコード頻度</label>
-                        <input data-input-group="encodeLength" type="range" class="form-range me-2" id="encodeLength"
-                            min="1" max="16" value="16">
-                        <input data-input-group="encodeLength" type="number" class="form-control me-2"
-                            id="encodeLengthInput" min="1" max="16" value="16">
-                    </div>
-                    <div class="col-12 col-md-3">
-                        <div class="form-check mb-0">
-                            <label class="form-check-label" for="partialEncodeToggle">エンコード</label>
-                            <input class="form-check-input" type="checkbox" id="partialEncodeToggle">
+                </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="characterCount" class="form-label">文字数</label>
+                                <input type="range" class="form-range" id="characterCount" min="64" max="8192"
+                                    value="4096" step="64">
+                                <input type="number" class="form-control" id="characterCountInput" value="4096" min="64"
+                                    max="8192" step="64">
+                            </div>
+                            <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">
+                                <input class="form-check-input" type="checkbox" id="streamToggle" checked>
+                                <label class="form-check-label" for="streamToggle">Stream</label>
+                            </div>
                         </div>
-                        <div class="form-check mb-0">
-                            <label class="form-check-label" for="streamToggle">stream</label>
-                            <input class="form-check-input" type="checkbox" id="streamToggle" checked>
+                    </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> 送信するプロンプトを表示
+                            </button>
                         </div>
                     </div>
                 </div>
             </div>
-            <script>
-                const inputGroups = document.querySelectorAll('[data-input-group]');
-                inputGroups.forEach(group => {
-                    const inputs = document.querySelectorAll(`[data-input-group="${group.dataset.inputGroup}"]`);
-
-                    inputs.forEach(input => {
-                        input.addEventListener('input', function () {
-                            inputs.forEach(otherInput => {
-                                if (otherInput !== input) {
-                                    otherInput.value = this.value;
-                                }
-                            });
-                        });
-                    });
-                });
-            </script>
-            <div class="col-12 col-md-2 d-flex align-items-center mb-2 mb-md-0">
-                <button id="requestButton" class="btn btn-primary me-2" onclick="Request()">
-                    続きを生成
-                </button>
-                <button id="stopButton" class="btn btn-danger d-none" onclick="stopGeneration()">
-                    中止
-                </button>
-            </div>
-            <div class="col-12 col-md-4 d-flex align-items-center justify-content-end">
-                <input type="text" class="form-control 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>
+
     <script src="https://unpkg.com/[email protected]/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
-    <script src="script.js"></script>
+    <script src="gemini.js"></script>
 </body>
 
 </html>