Restartモード実装

gemini.js

@@ -1,6 +1,5 @@
 let lastSaveTimestamp = 0;
 let controller;
-let isLoading = false;
 
 function formatText() {
     const textOrg = document.getElementById('novelContent1').value;
@@ -107,7 +106,7 @@ function loadFromJson() {
                     if (jsonData.savedTitle) {
                         document.getElementById('savedTitle').value = jsonData.savedTitle;
                     }
-                    alert('JSONファイルを正常に読み込みました。');
+                    alert('JSONファイルを正常読み込みました。');
                 } catch (error) {
                     alert('無効なJSONファイルです。');
                 }
@@ -119,43 +118,29 @@ function loadFromJson() {
 }
 
 function saveToUserStorage(force = false) {
-    if (isLoading) return;
-    console.debug('saveToUserStorage', force);
     const currentTime = Date.now();
-    if (!force && currentTime - lastSaveTimestamp < 5000) {
+    if (currentTime - lastSaveTimestamp < 5000 && !force) {
+        console.debug('セーブをスキップします');
         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;
-    }
+    // 既存のデータを取得
+    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() {
-    isLoading = true;
     const savedData = localStorage.getItem('geminiClient');
     if (savedData) {
         const geminiClientData = JSON.parse(savedData);
@@ -167,7 +152,7 @@ function loadFromUserStorage() {
                 } else {
                     elem.value = geminiClientData[key];
                 }
-                
+
                 // 特別な処理が必要な要素
                 if (key === 'characterCount' || key === 'encodeLength' || key === 'contentWidth') {
                     const inputElem = document.getElementById(`${key}Input`);
@@ -180,7 +165,6 @@ function loadFromUserStorage() {
             }
         });
     }
-    isLoading = false;
 }
 
 function createPayload() {
@@ -270,7 +254,7 @@ function fetchStream(ENDPOINT, payload) {
 
                     const chunk = decoder.decode(value, { stream: true });
                     buffer += chunk;
-                    console.debug('チャンクを受信しました:', chunk);
+                    console.debug('チャンクを受信しまし:', chunk);
 
                     // バッファから完全なJSONオブジェクトを抽出して処理
                     let startIndex = 0;
@@ -305,9 +289,9 @@ function fetchStream(ENDPOINT, payload) {
                                         if (data.candidates[0].finishReason === 'STOP') {
                                             requestButton.classList.add('green-flash-bg');
                                             setTimeout(() => {
-                                            requestButton.classList.remove('green-flash-bg');
+                                                requestButton.classList.remove('green-flash-bg');
                                             }, 2000);
-                                        }else{
+                                        } else {
                                             requestButton.classList.add('red-flash-bg');
                                             setTimeout(() => {
                                                 requestButton.classList.remove('red-flash-bg');
@@ -514,22 +498,103 @@ function fetchOpenAINonStream(ENDPOINT, payload) {
         });
 }
 
-function Request() {
+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);
+    const ENDPOINT = `https://generativelanguage.googleapis.com/v1beta/${selectedEndpoint}:countTokens?key=` + document.getElementById('geminiApiKey').value;
+    fetch(ENDPOINT, payload)
+        .then(response => response.json())
+        .then(data => {
+            console.log(data);
+        })
+        .catch(error => {
+            console.error('エラー:', error);
+        });
+}
+
+async function createDraft() {
+    const ENDPOINT = `https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash-002: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() {
+    let selectedEndpoint = document.getElementById('endpointSelect').value;
+
+    document.getElementById('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 = createPayload();
+    } else if (selectedEndpoint === 'restart') {
+        ENDPOINT = `https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-pro-002:generateContent?key=` + document.getElementById('geminiApiKey').value;
+        document.getElementById('novelContent2').value = '（下書き中）';
+        draft = await createDraft();
+        document.getElementById('novelContent2').value = `# 下書き\n${draft}\n\n# リライト\n`;
+        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": 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'
+        };
+        selectedEndpoint = 'models/gemini-1.5-pro-002';
     } 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')) {
@@ -546,12 +611,6 @@ function Request() {
             fetchOpenAINonStream(ENDPOINT, payload);
         }
     }
-
-    const outputAccordion = document.querySelector('#content2Collapse');
-    if (outputAccordion) {
-        const bsCollapse = new bootstrap.Collapse(outputAccordion, { toggle: false });
-        bsCollapse.show();
-    }
 }
 
 function stopGeneration() {
@@ -688,14 +747,148 @@ function updateNavbarBrand() {
     }
 }
 
+function generateIndexMenu() {
+    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 = '目次がありません';
+    }
+}
+
+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';
+    textarea.value = content;
+    textarea.rows = 3;
+    textarea.readOnly = true;
+    li.appendChild(textarea);
+    ul.appendChild(li);
+}
+
+function scrollToHeading(headingText) {
+    const content = document.getElementById('novelContent1');
+    const lines = content.value.split('\n');
+    let position = 0;
+
+    for (let i = 0; i < lines.length; i++) {
+        if (lines[i].trim().startsWith('#') && lines[i].includes(headingText)) {
+            // アコーディオンを開く
+            openAccordionContainingPosition(position);
+
+            content.focus();
+            content.setSelectionRange(position, position);
+            content.scrollTop = content.scrollHeight * (position / content.value.length);
+            break;
+        }
+        position += lines[i].length + 1; // +1 for newline character
+    }
+
+    // Offcanvasを閉じる
+    const indexOffcanvas = bootstrap.Offcanvas.getInstance(document.getElementById('indexOffcanvas'));
+}
+
+function openAccordionContainingPosition(position) {
+    const content = document.getElementById('novelContent1');
+    const accordionItems = document.querySelectorAll('#mainAccordion .accordion-item');
+    let currentPosition = 0;
+
+    for (let i = 0; i < accordionItems.length; i++) {
+        const textArea = accordionItems[i].querySelector('textarea');
+        if (textArea && textArea.id === 'novelContent1') {
+            if (position >= currentPosition && position < currentPosition + textArea.value.length) {
+                // このアコーディオンアイテムに目的の位置が含まれている
+                const collapseElement = accordionItems[i].querySelector('.accordion-collapse');
+                const bsCollapse = new bootstrap.Collapse(collapseElement, { toggle: false });
+                bsCollapse.show();
+                break;
+            }
+            currentPosition += textArea.value.length;
+        }
+    }
+}
+
 document.addEventListener('DOMContentLoaded', function () {
     // ページ読み込み時にデータを復元
     loadFromUserStorage();
 
-    // メイン画面の要素のイベントリスナー
+    // メイン画面の要素のイベントリスナー。inputイベントが発生する頻度が非常に高いのでこちらの発動は5秒に1回に制限する
     ['novelContent1', 'novelContent2', 'generatePrompt', 'nextPrompt', 'savedTitle'].forEach(id => {
         document.getElementById(id).addEventListener('input', () => {
             saveToUserStorage(false);
+            generateIndexMenu();
         });
     });
 
@@ -703,12 +896,14 @@ document.addEventListener('DOMContentLoaded', function () {
     ['memo', 'geminiApiKey', 'endpointSelect', 'openaiEndpoint', 'openaiHeaders', 'openaiJsonBody', 'characterCount', 'encodeLength'].forEach(id => {
         document.getElementById(id).addEventListener('input', () => {
             saveToUserStorage(true);
+            generateIndexMenu();
         });
     });
 
     ['partialEncodeToggle', 'streamToggle'].forEach(id => {
         document.getElementById(id).addEventListener('change', () => {
             saveToUserStorage(true);
+            generateIndexMenu();
         });
     });
 
@@ -730,6 +925,7 @@ document.addEventListener('DOMContentLoaded', function () {
     // 60秒ごとに自動保存実行
     setInterval(() => {
         saveToUserStorage();
+        generateIndexMenu();
     }, 60000);
 
     // 基本設定のアコーディオンを開く
@@ -747,4 +943,5 @@ document.addEventListener('DOMContentLoaded', function () {
 
     // 初期表示時にも実行
     updateNavbarBrand();
+    generateIndexMenu();
 });