要約機能実装

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ファイルです。');
                 }
@@ -167,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",
@@ -185,7 +249,7 @@ function createPayload() {
         },
         {
             "role": "user",
-            "parts": [{ "text": `続きを書いて。${partialEncodeURI(document.getElementById('nextPrompt').value)} ${document.getElementById('characterCountInput').value}文字程度。${systemPrompt}` }]
+            "parts": [{ "text": prompt }]
         }
     ];
 
@@ -498,7 +562,7 @@ function fetchOpenAINonStream(ENDPOINT, payload) {
         });
 }
 
-function tokenCount() {
+async function tokenCount() {
     const selectedEndpoint = document.getElementById('endpointSelect').value;
     let payload = createPayload();
     payload.body = {
@@ -506,14 +570,14 @@ function tokenCount() {
     };
     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);
-        });
+    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() {
@@ -528,8 +592,8 @@ async function createDraft() {
 
 async function Request() {
     let selectedEndpoint = document.getElementById('endpointSelect').value;
-
-    document.getElementById('requestButton').disabled = true;
+    const requestButton = document.getElementById('requestButton');
+    requestButton.disabled = true;
     document.getElementById('novelContent2').value = '';
     const outputAccordion = document.querySelector('#content2Collapse');
     if (outputAccordion) {
@@ -546,8 +610,19 @@ async function Request() {
     } 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`;
+        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',
@@ -747,6 +822,20 @@ 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);
@@ -816,6 +905,9 @@ function generateIndexMenu() {
     } else {
         indexOffcanvasBody.textContent = '目次がありません';
     }
+
+    updateAllAccordionHeaderCounts();
+    updateTokenCount(true); // トークン数を強制更新
 }
 
 function toggleSubMenu(li) {
@@ -828,13 +920,42 @@ function toggleSubMenu(li) {
 
 function addTextarea(ul, content) {
     const li = document.createElement('li');
+    
+    // テキストエリアの作成
     const textarea = document.createElement('textarea');
     textarea.readOnly = true;
-    textarea.className = 'form-control mt-2';
+    textarea.className = 'form-control mt-2 full-text';
     textarea.value = content;
     textarea.rows = 3;
-    textarea.readOnly = true;
+    
+    // 要約用のテキストエリアの作成
+    const summaryInput = document.createElement('textarea');
+    summaryInput.className = 'form-control mt-2 summery-text';
+    summaryInput.placeholder = '要約';
+    summaryInput.rows = 3;
+    
+    // 要約取得ボタンの作成
+    const summaryButton = document.createElement('button');
+    summaryButton.textContent = '要約を取得';
+    summaryButton.className = 'btn btn-secondary mt-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(textarea.value);
+            summaryInput.value = summary;
+            summeries[textarea.value] = summary;
+            updateTokenCount(true);
+        } finally {
+            summaryButton.innerHTML = '要約を取得';
+            summaryButton.disabled = false;
+        }
+    };
+    
+    // 要素の追加
     li.appendChild(textarea);
+    li.appendChild(summaryInput);
+    li.appendChild(summaryButton);
     ul.appendChild(li);
 }
 
@@ -880,15 +1001,35 @@ function openAccordionContainingPosition(position) {
     }
 }
 
+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イベントが発生する頻度が非常に高いのでこちらの発動は5秒に1回に制限する
+    // メイン画面の要素のイベントリスナー。inputイベントが発生する頻度が非常に高いのでこちらの発動は60秒に1回に制限する
     ['novelContent1', 'novelContent2', 'generatePrompt', 'nextPrompt', 'savedTitle'].forEach(id => {
         document.getElementById(id).addEventListener('input', () => {
             saveToUserStorage(false);
             generateIndexMenu();
+            updateTokenCount(); // 60秒に1回の制限が適用される
         });
     });
 
@@ -897,6 +1038,7 @@ document.addEventListener('DOMContentLoaded', function () {
         document.getElementById(id).addEventListener('input', () => {
             saveToUserStorage(true);
             generateIndexMenu();
+            updateTokenCount(); // 60秒に1回の制限が適用される
         });
     });
 
@@ -904,6 +1046,7 @@ document.addEventListener('DOMContentLoaded', function () {
         document.getElementById(id).addEventListener('change', () => {
             saveToUserStorage(true);
             generateIndexMenu();
+            updateTokenCount(); // 60秒に1回の制限が適用される
         });
     });
 
@@ -926,6 +1069,7 @@ document.addEventListener('DOMContentLoaded', function () {
     setInterval(() => {
         saveToUserStorage();
         generateIndexMenu();
+        updateTokenCount(true); // 強制的に更新
     }, 60000);
 
     // 基本設定のアコーディオンを開く
@@ -944,4 +1088,6 @@ document.addEventListener('DOMContentLoaded', function () {
     // 初期表示時にも実行
     updateNavbarBrand();
     generateIndexMenu();
+    updateAllAccordionHeaderCounts();
+    updateTokenCount(true); // 強制的に更新
 });