Spaces:

SenY
/

LLMClient

Running

App Files Files Community

hisaruki commited on Sep 30, 2024

Commit

45da44d

1 Parent(s): c8e4e29

TMP

Browse files

Files changed (2) hide show

gemini.html +0 -220
gemini.js +277 -83

gemini.html DELETED Viewed

@@ -1,220 +0,0 @@
-<!DOCTYPE html>
-<html lang="ja">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>LLM Client</title>
-    <link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
-        crossorigin="anonymous">
-    <style>
-        textarea.form-control {
-            min-height: 50vh;
-        }
-        .accordion-button:not(.collapsed) {
-            background-color: #212529;
-            color: #fff;
-        }
-        .navbar-toggler {
-            display: block !important;
-        }
-        @keyframes redFlashBg {
-            0%, 100% { background-color: initial; }
-            50% { background-color: rgba(255, 0, 0, 0.5); }
-        }
-        @keyframes redFlashFg {
-            0%, 100% { color: initial; }
-            50% { color: red; }
-        }
-        .red-flash-bg {
-            animation: redFlashBg 0.5s infinite;
-        }
-        .red-flash-fg {
-            animation: redFlashFg 0.5s infinite;
-        }
-        @keyframes greenFlashBg {
-            0%, 100% { background-color: initial; }
-            50% { background-color: rgba(0, 255, 0, 0.5); }
-        }
-        @keyframes greenFlashFg {
-            0%, 100% { color: initial; }
-            50% { color: green; }
-        }
-        .green-flash-bg {
-            animation: greenFlashBg 0.5s infinite;
-        }
-        .green-flash-fg {
-            animation: greenFlashFg 0.5s infinite;
-        }
-        /* 新しいスタイルを追加 */
-        .navbar {
-            position: sticky;
-            top: 0;
-            z-index: 1000;
-        }
-        /* メインコンテンツの上部にパディングを追加 */
-        #mainContent {
-            padding-top: 1rem;
-        }
-    </style>
-</head>
-<body data-bs-theme="dark">
-    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
-        <div class="container">
-            <div class="row justify-content-center w-100">
-                <div class="col-lg-7 d-flex justify-content-between align-items-center">
-                    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#settingsOffcanvas" aria-controls="settingsOffcanvas">
-                        <span class="navbar-toggler-icon"></span>
-                    </button>
-                    <button id="prevAccordion" class="btn btn-sm btn-outline-light me-2">
-                        <i class="fas fa-chevron-left"></i> 前へ
-                    </button>
-                    <button id="nextAccordion" class="btn btn-sm btn-outline-light me-2">
-                        次へ <i class="fas fa-chevron-right"></i>
-                    </button>
-                    <div class="input-group" style="max-width: 5rem;">
-                        <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 form-switch">
-                        <input class="form-check-input" type="checkbox" id="partialEncodeToggle">
-                        <label class="form-check-label" for="partialEncodeToggle">部分エンコード</label>
-                    </div>
-                    <button id="requestButton" class="btn btn-sm btn-primary" onclick="Request()">
-                        続きを生成
-                    </button>
-                    <button id="stopButton" class="btn btn-sm btn-danger d-none" onclick="stopGeneration()">
-                        中止
-                    </button>
-                    <a class="navbar-brand" href="#">LLM Client</a>
-                </div>
-            </div>
-        </div>
-    </nav>
-    <div class="container">
-        <div class="row justify-content-center">
-            <div id="mainContent" class="col-lg-7">
-                <div class="mt-3">
-                    <div class="accordion" id="mainAccordion">
-                        <div class="accordion-item">
-                            <h2 class="accordion-header">
-                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#promptsCollapse">
-                                    基本設定
-                                </button>
-                            </h2>
-                            <div id="promptsCollapse" class="accordion-collapse collapse" data-bs-parent="#mainAccordion">
-                                <div class="accordion-body">
-                                    <textarea class="form-control mb-2" id="generatePrompt" placeholder="システムプロンプトを入力"></textarea>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="accordion-item">
-                            <h2 class="accordion-header">
-                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#content1Collapse">
-                                    小説内容 (入力)
-                                </button>
-                            </h2>
-                            <div id="content1Collapse" class="accordion-collapse collapse" data-bs-parent="#mainAccordion">
-                                <div class="accordion-body">
-                                    <textarea class="form-control mb-2" id="novelContent1" placeholder="ここに小説の本文を入力してください"></textarea>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="accordion-item">
-                            <h2 class="accordion-header">
-                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#nextPromptCollapse">
-                                    次の展開
-                                </button>
-                            </h2>
-                            <div id="nextPromptCollapse" class="accordion-collapse collapse" data-bs-parent="#mainAccordion">
-                                <div class="accordion-body">
-                                    <div class="d-flex justify-content-between align-items-center">
-                                        <textarea class="form-control me-2" id="nextPrompt" placeholder="次の展開を指示" rows="1"></textarea>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="accordion-item">
-                            <h2 class="accordion-header">
-                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#content2Collapse">
-                                    小説内容 (出力)
-                                </button>
-                            </h2>
-                            <div id="content2Collapse" class="accordion-collapse collapse" data-bs-parent="#mainAccordion">
-                                <div class="accordion-body">
-                                    <textarea class="form-control" id="novelContent2" placeholder="ここに続きが表示されます。"></textarea>
-                                    <button id="moveToInputButton" class="btn btn-primary mt-2" onclick="moveToInput()">
-                                        入力欄へ移動
-                                    </button>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="row mt-3">
-                        <div class="col-12 d-flex justify-content-end">
-                            <input type="text" class="form-control d-inline-block w-auto me-2" id="savedTitle" placeholder="タイトル">
-                            <button id="saveButton" class="btn btn-secondary me-2" onclick="saveToJson()">
-                                保存
-                            </button>
-                            <button id="loadButton" class="btn btn-secondary" onclick="loadFromJson()">
-                                読込
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <div class="offcanvas offcanvas-start" tabindex="-1" id="settingsOffcanvas" aria-labelledby="settingsOffcanvasLabel">
-        <div class="offcanvas-header">
-            <h5 class="offcanvas-title" id="settingsOffcanvasLabel">設定</h5>
-            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
-        </div>
-        <div class="offcanvas-body">
-            <h5>Gemini API Key</h5>
-            <input type="text" class="form-control mb-2" id="geminiApiKey" placeholder="Gemini API Key">
-            <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>
-            </select>
-            <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="form-check mb-2">
-                <input class="form-check-input" type="checkbox" id="streamToggle" checked>
-                <label class="form-check-label" for="streamToggle">Stream</label>
-            </div>
-            <button id="formatTextButton" class="btn btn-primary mb-2" onclick="formatText()">
-                <i class="fa-solid fa-align-left"></i> 改行を整理
-            </button>
-            <h5 class="mt-4">メモ</h5>
-            <textarea class="form-control" id="memo" placeholder="メモを記録する項目" rows="10"></textarea>
-        </div>
-    </div>
-    <script src="https://unpkg.com/[email protected]/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
-    <script src="gemini.js"></script>
-</body>
-</html>

gemini.js CHANGED Viewed

@@ -1,5 +1,6 @@
 let lastSaveTimestamp = 0;
 let controller;
 function formatText() {
     const textOrg = document.getElementById('novelContent1').value;
@@ -33,35 +34,21 @@ function unmalform(text) {
 }
 function partialEncodeURI(text) {
-    console.log('partialEncodeURI called');
-    console.log('partialEncodeToggle checked:', document.getElementById("partialEncodeToggle").checked);
     if (!document.getElementById("partialEncodeToggle").checked) {
-        console.log('Partial encode is disabled, returning original text');
         return text;
     }
     let length = parseInt(document.getElementById("encodeLength").value);
-    console.log('Encode length:', length);
     const chunks = [];
     for (let i = 0; i < text.length; i += 1) {
         chunks.push(text.slice(i, i + 1));
     }
-    console.log('Original text:', text);
     const encodedChunks = chunks.map((chunk, index) => {
         if (index % length === 0) {
-            console.log('Encoding chunk at index', index, ':', chunk);
             return encodeURI(chunk);
         }
         return chunk;
     });
     const result = encodedChunks.join('');
-    console.log('Encoded text:', result);
     return result;
 }
@@ -132,79 +119,91 @@ function loadFromJson() {
 }
 function saveToUserStorage(force = false) {
     const currentTime = Date.now();
     if (!force && currentTime - lastSaveTimestamp < 5000) {
         return;
     }
     const geminiClientData = {
-        novelContent: document.getElementById('novelContent1').value,
         novelContent2: document.getElementById('novelContent2').value,
         generatePrompt: document.getElementById('generatePrompt').value,
         nextPrompt: document.getElementById('nextPrompt').value,
         savedTitle: document.getElementById('savedTitle').value,
-        memo: document.getElementById('memo').value,
-        geminiApiKey: document.getElementById('geminiApiKey').value,
-        selectedEndpoint: document.getElementById('endpointSelect').value
     };
     localStorage.setItem('geminiClient', JSON.stringify(geminiClientData));
     lastSaveTimestamp = currentTime;
 }
 function loadFromUserStorage() {
     const savedData = localStorage.getItem('geminiClient');
     if (savedData) {
         const geminiClientData = JSON.parse(savedData);
-        document.getElementById('novelContent1').value = geminiClientData.novelContent || '';
-        document.getElementById('novelContent2').value = geminiClientData.novelContent2 || '';
-        document.getElementById('generatePrompt').value = geminiClientData.generatePrompt || '';
-        document.getElementById('nextPrompt').value = geminiClientData.nextPrompt || '';
-        document.getElementById('savedTitle').value = geminiClientData.savedTitle || '';
-        document.getElementById('memo').value = geminiClientData.memo || '';
-        document.getElementById('geminiApiKey').value = geminiClientData.geminiApiKey || '';
-        document.getElementById('endpointSelect').value = geminiClientData.selectedEndpoint || 'models/gemini-1.5-pro-002';
     }
 }
 function createPayload() {
     const novelContent1 = document.getElementById('novelContent1');
     const text = novelContent1.value;
     const lines = text.split('\n').filter(x => x);
-    let lastPart = lines.pop() || '';
     let systemPrompt = `${partialEncodeURI(document.getElementById('generatePrompt').value)}`;
     let messages = [
         {
             "role": "user",
-            "parts": [{ "text": systemPrompt || "." }]
-        }
-    ];
-    if (lines.length > 0) {
-        messages.push(
-            {
-                "role": "model",
-                "parts": [{ "text": partialEncodeURI(lines.join("\n")) }]
-            },
-            {
-                "role": "user",
-                "parts": [{ "text": "続きを書いて。" }]
-            }
-        );
-    }
-    messages.push(
         {
             "role": "model",
-            "parts": [{ "text": lastPart }]
         },
         {
             "role": "user",
-            "parts": [{ "text": `続きを書いて。${partialEncodeURI(document.getElementById('nextPrompt').value)} ${document.getElementById('characterCountInput').value}文字程度。` }]
         }
-    );
     return {
         method: 'POST',
@@ -238,6 +237,13 @@ function createPayload() {
     };
 }
 function fetchStream(ENDPOINT, payload) {
     const novelContent2 = document.getElementById('novelContent2');
     const requestButton = document.getElementById('requestButton');
@@ -283,24 +289,32 @@ function fetchStream(ENDPOINT, payload) {
                             }
                             try {
                                 const data = JSON.parse(jsonString);
-                                console.debug('Parsed 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('Adding text to output:', part.text);
                                             novelContent2.value += part.text;
                                             novelContent2.scrollTop = novelContent2.scrollHeight;
                                         }
                                     });
                                 }
-                                // finishReasonをチェック
-                                if (data.candidates && 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');
@@ -358,38 +372,181 @@ function fetchNonStream(ENDPOINT, payload) {
         });
 }
 function Request() {
     const selectedEndpoint = document.getElementById('endpointSelect').value;
-    let ENDPOINT = `https://generativelanguage.googleapis.com/v1beta/${selectedEndpoint}:generateContent?key=` + document.getElementById('geminiApiKey').value;
-    try {
-        if (!document.getElementById('geminiApiKey').value) {
-            throw new Error("Gemini APIキーが設定されていません。");
-        }
-    } catch (e) {
-        console.error(e);
-        document.getElementById("geminiApiKey").classList.add("bg-danger");
-        document.querySelector('[data-bs-toggle="offcanvas"]').click();
-        return;
     }
-    document.getElementById("geminiApiKey").classList.remove("bg-danger");
     document.getElementById('requestButton').disabled = true;
     let stream = document.getElementById('streamToggle').checked;
-    document.getElementById('novelContent2').value = ''; // 新しい生成を開始する前に内容をクリア
-    const payload = createPayload();
     if (stream) {
-        // ここでエンドポイントを正しく変更
-        ENDPOINT = ENDPOINT.replace(':generateContent', ':streamGenerateContent') + '&alt=sse';
-        console.debug('Stream ENDPOINT:', ENDPOINT); // デバッグ用出力を追加
-        fetchStream(ENDPOINT, payload);
         document.getElementById('stopButton').classList.remove('d-none');
     } else {
-        fetchNonStream(ENDPOINT, payload);
     }
-    // 出力のアコーディオンを開く
     const outputAccordion = document.querySelector('#content2Collapse');
     if (outputAccordion) {
         const bsCollapse = new bootstrap.Collapse(outputAccordion, { toggle: false });
@@ -430,7 +587,7 @@ function syncInputs() {
 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')) {
@@ -438,7 +595,7 @@ function openNextAccordion() {
             break;
         }
     }
     // 次のアコーディオンを開く
     if (currentIndex < accordions.length - 1) {
         new bootstrap.Collapse(accordions[currentIndex].querySelector('.accordion-collapse')).hide();
@@ -456,7 +613,7 @@ function openNextAccordion() {
 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')) {
@@ -464,7 +621,7 @@ function openPreviousAccordion() {
             break;
         }
     }
     // 前のアコーディオンを開く
     if (currentIndex > 0) {
         new bootstrap.Collapse(accordions[currentIndex].querySelector('.accordion-collapse')).hide();
@@ -514,16 +671,47 @@ function moveToInput() {
     });
 }
 document.addEventListener('DOMContentLoaded', function () {
     // ページ読み込み時にデータを復元
     loadFromUserStorage();
-    // イベントリスナーの設定
-    ['novelContent1', 'novelContent2', 'generatePrompt', 'nextPrompt', 'memo', 'geminiApiKey', 'endpointSelect'].forEach(id => {
         document.getElementById(id).addEventListener('input', () => {
             saveToUserStorage(true);
         });
     });
     document.getElementById('novelContent1').addEventListener('keydown', handleKeyPress);
     document.querySelectorAll('[data-modal-text]').forEach(element => {
@@ -553,4 +741,10 @@ document.addEventListener('DOMContentLoaded', function () {
     // ナビゲーションボタンのイベントリスナーを設定
     document.getElementById('prevAccordion').addEventListener('click', openPreviousAccordion);
     document.getElementById('nextAccordion').addEventListener('click', openNextAccordion);
 });

 let lastSaveTimestamp = 0;
 let controller;
+let isLoading = false;
 function formatText() {
     const textOrg = document.getElementById('novelContent1').value;
 }
 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 saveToUserStorage(force = false) {
+    if (isLoading) return;
+    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() {
+    isLoading = true;
     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}`);
+            }
+        });
     }
+    isLoading = false;
 }
 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',
     };
 }
+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');
                             }
                             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');
         });
 }
+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 });
 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')) {
             break;
         }
     }
     // 次のアコーディオンを開く
     if (currentIndex < accordions.length - 1) {
         new bootstrap.Collapse(accordions[currentIndex].querySelector('.accordion-collapse')).hide();
 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')) {
             break;
         }
     }
     // 前のアコーディオンを開く
     if (currentIndex > 0) {
         new bootstrap.Collapse(accordions[currentIndex].querySelector('.accordion-collapse')).hide();
     });
 }
+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 => {
     // ナビゲーションボタンのイベントリスナーを設定
     document.getElementById('prevAccordion').addEventListener('click', openPreviousAccordion);
     document.getElementById('nextAccordion').addEventListener('click', openNextAccordion);
+    // エンドポイント選択が変更されたときにnavbar-brandを更新
+    document.getElementById('endpointSelect').addEventListener('change', updateNavbarBrand);
+    // 初期表示時にも実行
+    updateNavbarBrand();
 });