Upload 2 files

gemini.js

@@ -1,5 +1,7 @@
 let lastSaveTimestamp = 0;
 let controller;
+let lastTokenUpdateTimestamp = 0;
+let summeries = {};
 
 function formatText() {
     const textOrg = document.getElementById('novelContent1').value;
@@ -32,6 +34,27 @@ function unmalform(text) {
     return result || '';
 }
 
+async function summerize(text) {
+    const ENDPOINT = `https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash-002: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: 0.7, max_output_tokens: 256 }
+        })
+    };
+    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;
@@ -106,7 +129,7 @@ function loadFromJson() {
                     if (jsonData.savedTitle) {
                         document.getElementById('savedTitle').value = jsonData.savedTitle;
                     }
-                    alert('JSONファイルを正常に読み込みました。');
+                    alert('JSONファイルを正常読み込みました');
                 } catch (error) {
                     alert('無効なJSONファイルです。');
                 }
@@ -118,36 +141,24 @@ function loadFromJson() {
 }
 
 function saveToUserStorage(force = false) {
-    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;
 }
@@ -164,7 +175,7 @@ function loadFromUserStorage() {
                 } else {
                     elem.value = geminiClientData[key];
                 }
-                
+
                 // 特別な処理が必要な要素
                 if (key === 'characterCount' || key === 'encodeLength' || key === 'contentWidth') {
                     const inputElem = document.getElementById(`${key}Input`);
@@ -179,13 +190,54 @@ function loadFromUserStorage() {
     }
 }
 
+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);
+    }
+
+    return summarizedText.trim();
+}
+
 function createPayload() {
     const novelContent1 = document.getElementById('novelContent1');
-    const text = novelContent1.value;
+    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)} ${document.getElementById('characterCountInput').value}文字程度。${systemPrompt}`;
     let messages = [
         {
             "role": "user",
@@ -197,7 +249,7 @@ function createPayload() {
         },
         {
             "role": "user",
-            "parts": [{ "text": `続きを書いて。${partialEncodeURI(document.getElementById('nextPrompt').value)} ${document.getElementById('characterCountInput').value}文字程度。${systemPrompt}` }]
+            "parts": [{ "text": prompt }]
         }
     ];
 
@@ -266,7 +318,7 @@ function fetchStream(ENDPOINT, payload) {
 
                     const chunk = decoder.decode(value, { stream: true });
                     buffer += chunk;
-                    console.debug('チャンクを受信しました:', chunk);
+                    console.debug('チャンクを受信しまし:', chunk);
 
                     // バッファから完全なJSONオブジェクトを抽出して処理
                     let startIndex = 0;
@@ -301,9 +353,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');
@@ -510,22 +562,114 @@ function fetchOpenAINonStream(ENDPOINT, payload) {
         });
 }
 
-function Request() {
+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);
+    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;
+    }
+}
+
+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;
+    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 = 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 = '（下書き中）';
+        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": 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')) {
@@ -542,12 +686,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() {
@@ -684,14 +822,235 @@ function updateNavbarBrand() {
     }
 }
 
+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() {
+    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 = '目次がありません';
+    }
+
+    updateAllAccordionHeaderCounts();
+    updateTokenCount(true); // トークン数を強制更新
+}
+
+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);
+    };
+    
+    // ボタンをコンテナに追加
+    buttonContainer.appendChild(summaryButton);
+    buttonContainer.appendChild(deleteSummaryButton);
+    
+    // 要素の追加
+    li.appendChild(textarea);
+    li.appendChild(summaryInput);
+    li.appendChild(buttonContainer);
+    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;
+        }
+    }
+}
+
+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);
+}
+
 document.addEventListener('DOMContentLoaded', function () {
     // ページ読み込み時にデータを復元
     loadFromUserStorage();
 
-    // メイン画面の要素のイベントリスナー
+    // メイン画面の要素のイベントリスナー。inputイベントが発生する頻度が非常に高いのでこちらの発動は60秒に1回に制限する
     ['novelContent1', 'novelContent2', 'generatePrompt', 'nextPrompt', 'savedTitle'].forEach(id => {
         document.getElementById(id).addEventListener('input', () => {
             saveToUserStorage(false);
+            generateIndexMenu();
+            updateTokenCount(); // 60秒に1回の制限が適用される
         });
     });
 
@@ -699,12 +1058,16 @@ document.addEventListener('DOMContentLoaded', function () {
     ['memo', 'geminiApiKey', 'endpointSelect', 'openaiEndpoint', 'openaiHeaders', 'openaiJsonBody', 'characterCount', 'encodeLength'].forEach(id => {
         document.getElementById(id).addEventListener('input', () => {
             saveToUserStorage(true);
+            generateIndexMenu();
+            updateTokenCount(); // 60秒に1回の制限が適用される
         });
     });
 
     ['partialEncodeToggle', 'streamToggle'].forEach(id => {
         document.getElementById(id).addEventListener('change', () => {
             saveToUserStorage(true);
+            generateIndexMenu();
+            updateTokenCount(); // 60秒に1回の制限が適用される
         });
     });
 
@@ -726,6 +1089,8 @@ document.addEventListener('DOMContentLoaded', function () {
     // 60秒ごとに自動保存実行
     setInterval(() => {
         saveToUserStorage();
+        generateIndexMenu();
+        updateTokenCount(true); // 強制的に更新
     }, 60000);
 
     // 基本設定のアコーディオンを開く
@@ -743,4 +1108,7 @@ document.addEventListener('DOMContentLoaded', function () {
 
     // 初期表示時にも実行
     updateNavbarBrand();
+    generateIndexMenu();
+    updateAllAccordionHeaderCounts();
+    updateTokenCount(true); // 強制的に更新
 });

index.html

@@ -10,7 +10,8 @@
         crossorigin="anonymous">
     <style>
         #mainContent textarea.form-control {
-            min-height: 50vh;
+            min-height: 40vh;
+            font-size: 1.2rem;
         }
 
         .accordion-button:not(.collapsed) {
@@ -110,63 +111,72 @@
             }
         }
 
-        @media (min-width: 1400px) {
-            #mainContent {
-                max-width: 50vw;
-            }
+        @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">
-    <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 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>
-    </nav>
-
-    <div class="container-fluid mt-2">
-        <div class="row justify-content-center">
-            <div class="col-auto">
+        <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>
-            </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>
                 <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 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="mainContent">
@@ -280,6 +290,7 @@
                                 <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="restart">Restart</option>
                                 <option value="openai">OpenAI Compatible</option>
                             </select>
 
@@ -324,7 +335,15 @@
                                 <input type="number" class="form-control" id="encodeLengthInput" placeholder="エンコード長"
                                     min="1" max="16" value="4">
                             </div>
-                            <div class="form-check mb-2">
+                            <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>
@@ -352,8 +371,12 @@
 
                             <h5 class="mt-3">デバッグ</h5>
                             <button id="debugButton" class="btn btn-secondary mb-2" onclick="debugPrompt()">
-                                <i class="fa-solid fa-bug"></i> 送信するプロンプトを表示
+                                <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>
+
                         </div>
                     </div>
                 </div>
@@ -361,7 +384,19 @@
         </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>
+
     <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>