Upload 6 files

control.js

@@ -0,0 +1,22 @@
+updateHistoryList();
+loadFromUserStorage();
+setInterval(() => {
+    saveToUserStorage();
+}, 60000);
+// 入力フォームの内容を保存する
+document.querySelectorAll('input, textarea').forEach(input => {
+    input.addEventListener('input', saveToUserStorage);
+});
+// Ctrl+Enterでプロンプト生成を実行する
+document.addEventListener('keydown', function (event) {
+    if (event.ctrlKey && event.key === 'Enter') {
+        event.preventDefault(); // デフォルトの動作を防ぐ
+        generatePrompt(); // プロンプト生成関数を呼び出す
+    }
+});
+
+// サイドバーの切り替え機能を追加
+document.getElementById('sidebarToggle').addEventListener('click', function () {
+    document.getElementById('sidebar').classList.toggle('active');
+    document.getElementById('content').classList.toggle('active');
+});

history.js

@@ -0,0 +1,120 @@
+function saveToHistory() {
+    const historyItem = {
+        query: document.getElementById('query').value,
+        promptEn: document.getElementById('promptEn').value,
+        promptMyLanguage: document.getElementById('promptMyLanguage').value,
+        danbooruTags: document.getElementById('danbooruTags').value,
+        timestamp: new Date().toISOString()
+    };
+
+    let history = JSON.parse(localStorage.getItem('gemini_prompt_history') || '[]');
+    history.unshift(historyItem);
+    history = history.slice(0, 10); // 最新の10件のみを保持
+    localStorage.setItem('gemini_prompt_history', JSON.stringify(history));
+
+    updateHistoryList();
+}
+function updateHistoryList() {
+    const historyList = document.getElementById('historyList');
+    const noHistoryMessage = document.getElementById('noHistoryMessage');
+    historyList.innerHTML = '';
+
+    const history = JSON.parse(localStorage.getItem('gemini_prompt_history') || '[]');
+
+    if (history.length === 0) {
+        noHistoryMessage.classList.remove('d-none');
+        historyList.classList.add('d-none');
+    } else {
+        noHistoryMessage.classList.add('d-none');
+        historyList.classList.remove('d-none');
+
+        history.forEach((item, index) => {
+            const li = document.createElement('li');
+            li.className = 'list-group-item list-group-item-action d-flex justify-content-between align-items-start';
+
+            const contentDiv = document.createElement('div');
+            contentDiv.className = 'ms-2 me-auto';
+            contentDiv.style.width = 'calc(100% - 40px)';
+            contentDiv.style.cursor = 'pointer';
+            contentDiv.onclick = () => loadHistoryItem(index);
+
+            const queryDiv = document.createElement('div');
+            queryDiv.className = 'text-truncate';
+            queryDiv.textContent = item.query;
+
+            const dateDiv = document.createElement('div');
+            dateDiv.className = 'small text-muted';
+            dateDiv.textContent = new Date(item.timestamp).toLocaleString();
+
+            contentDiv.appendChild(queryDiv);
+            contentDiv.appendChild(dateDiv);
+
+            const deleteButton = document.createElement('button');
+            deleteButton.className = 'btn btn-danger btn-sm';
+            deleteButton.innerHTML = '<i class="fas fa-trash"></i>';
+            deleteButton.onclick = (e) => {
+                e.stopPropagation();
+                deleteHistoryItem(index);
+            };
+
+            li.appendChild(contentDiv);
+            li.appendChild(deleteButton);
+            historyList.appendChild(li);
+        });
+    }
+}
+function deleteHistoryItem(index) {
+    if (confirm('この履歴項目を削除してもよろしいですか？')) {
+        let history = JSON.parse(localStorage.getItem('gemini_prompt_history') || '[]');
+        history.splice(index, 1);
+        localStorage.setItem('gemini_prompt_history', JSON.stringify(history));
+        updateHistoryList();
+    }
+}
+function loadHistoryItem(index) {
+    const history = JSON.parse(localStorage.getItem('gemini_prompt_history') || '[]');
+    const item = history[index];
+
+    document.getElementById('query').value = item.query;
+    document.getElementById('promptEn').value = item.promptEn;
+    document.getElementById('promptMyLanguage').value = item.promptMyLanguage;
+    document.getElementById('danbooruTags').value = item.danbooruTags;
+
+    saveToUserStorage(true);
+}
+
+function clearHistory() {
+    if (confirm('本当に履歴をすべて削除してもよろしいですか？')) {
+        localStorage.removeItem('gemini_prompt_history');
+        updateHistoryList();
+    }
+}
+
+function createHistoryItem(item, index) {
+    const li = document.createElement('li');
+    li.className = 'list-group-item d-flex justify-content-between align-items-center';
+    li.textContent = item.query;
+
+    const buttonsContainer = document.createElement('div');
+
+    const useButton = document.createElement('button');
+    useButton.className = 'btn btn-sm btn-primary me-2';
+    useButton.innerHTML = '<i class="fas fa-redo"></i>';
+    useButton.onclick = () => useHistoryItem(index);
+
+    const deleteButton = document.createElement('button');
+    deleteButton.className = 'btn btn-sm btn-danger';
+    deleteButton.innerHTML = '<i class="fas fa-trash"></i>';
+    deleteButton.onclick = () => {
+        // 個別の履歴項目削除時にも確認ポップアップを表示
+        if (confirm('この履歴項目を削除してもよろしいですか？')) {
+            deleteHistoryItem(index);
+        }
+    };
+
+    buttonsContainer.appendChild(useButton);
+    buttonsContainer.appendChild(deleteButton);
+    li.appendChild(buttonsContainer);
+
+    return li;
+}

index.html

@@ -8,16 +8,6 @@
     <link href="https://unpkg.com/bootstrap@5.3.1/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">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/json5/2.2.3/index.min.js"
-        integrity="sha512-44jdhc+R2TFfzBflS3/dGNEABiNUxBkkrqwO7GWTvGsj3HkQNr3GESvI9PUvAxmqxSnTosR0Ij9y3+o+6J1hig=="
-        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/i18next/23.14.0/i18next.min.js"
-        integrity="sha512-8ANNUVMWPf6aWGXZqDhS4OXJWBCRxfjlW7lKfupuiG1FZah0ST6LiI2qnEb1L5mp05v/+0hn3s2FO4EwIbIgfA=="
-        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-    <script
-        src="https://cdnjs.cloudflare.com/ajax/libs/i18next-browser-languagedetector/8.0.0/i18nextBrowserLanguageDetector.min.js"
-        integrity="sha512-8/RTkAM23B3lQzi6fmPs+Yf9qhIHzrzRpeSZsBsQ8OEmo95mbVp+68dB647VDCuyQIBbF+OIbS9b30aTWUkoog=="
-        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <style>
         #query {
             min-height: 40vh;
@@ -27,12 +17,155 @@
         #promptMyLanguage {
             min-height: 20vh;
         }
+
+        #sidebar {
+            position: fixed;
+            top: 0;
+            left: -250px;
+            width: 250px;
+            height: 100%;
+            background-color: #343a40;
+            transition: 0.3s;
+            z-index: 1000;
+        }
+
+        #sidebar.active {
+            left: 0;
+        }
+
+        #content {
+            transition: margin-left 0.3s;
+        }
+
+        #content.active {
+            margin-left: 250px;
+        }
+
+        #historyContainer::-webkit-scrollbar {
+            width: 5px;
+        }
+
+        #historyContainer::-webkit-scrollbar-track {
+            background: #f1f1f1;
+        }
+
+        #historyContainer::-webkit-scrollbar-thumb {
+            background: #888;
+        }
+
+        #historyContainer::-webkit-scrollbar-thumb:hover {
+            background: #555;
+        }
+
+        .comic-animation {
+            width: 100%;
+            height: auto;
+            max-width: 680px;
+            max-height: 680px;
+            margin: 0 auto;
+            background-size: contain;
+            background-repeat: no-repeat;
+            background-position: center;
+            aspect-ratio: 1 / 1;
+            animation: comic-frame-switch 6s step-end infinite;
+        }
+
+        @media (min-width: 768px) {
+            .modal-dialog.modal-large {
+                max-width: 700px;
+            }
+        }
+
+        @media (max-width: 767px) {
+            .comic-animation {
+                width: 100%;
+                height: auto;
+            }
+        }
+
+        @keyframes comic-frame-switch {
+
+            0%,
+            50% {
+                background-image: url("https://i.imgur.com/4A7K3TC.png");
+            }
+
+            50.01%,
+            100% {
+                background-image: url("https://i.imgur.com/LqLqwJi.png");
+            }
+        }
     </style>
 </head>
 
 <body data-bs-theme="dark">
-    <div class="container">
-        <div class="row m-0 border-start border-end border-2">
+    <div id="sidebar">
+        <div class="p-3">
+            <h3 id="settingsTitle" class="text-white">設定</h3>
+            <div class="form-group mb-3">
+                <label for="apiKey" class="form-label" id="apiKeyLabel">
+
+                    <a href="https://aistudio.google.com/app/apikey?hl=ja" target="_blank">APIキー</a>
+                </label>
+                <input type="text" class="form-control" id="apiKey" placeholder="APIキーを入力してください">
+            </div>
+            <div class="form-group">
+                <label for="characterCount" class="form-label" id="characterCountLabel">文字数</label>
+                <input type="number" value="320" class="form-control" id="characterCount"
+                    placeholder="生成するプロンプトの文字数を入力してください">
+            </div>
+            <div class="form-group">
+                <label for="languageSelect" class="form-label" id="languageSelectLabel">Language</label>
+                <select class="form-select" id="languageSelect">
+                    <option value="ja">日本語</option>
+                    <option value="en">English</option>
+                    <option value="zh">中文</option>
+                    <option value="ko">한국어</option>
+                    <option value="fr">Français</option>
+                    <option value="es">Español</option>
+                    <option value="de">Deutsch</option>
+                    <option value="it">Italiano</option>
+                </select>
+            </div>
+            <div class="form-group mb-3">
+                <label for="endpointSelect" class="form-label" id="endpointSelectLabel">エンドポイント</label>
+                <select class="form-select" id="endpointSelect">
+                    <option value="gemini-1.5-pro-exp-0827">gemini-1.5-pro-exp-0827</option>
+                    <option value="gemini-1.5-flash-exp-0827">gemini-1.5-flash-exp-0827</option>
+                    <option value="gemini-1.5-pro-latest">gemini-1.5-pro-latest</option>
+                    <option value="gemini-1.5-flash-latest">gemini-1.5-flash-latest</option>
+
+                </select>
+            </div>
+
+            <h3 class="text-white mt-4">履歴</h3>
+            <div id="historyContainer" style="max-height: 300px; overflow-y: auto;">
+                <ul id="historyList" class="list-group">
+                    <!-- 履歴項目がここに動的に追加されます -->
+                </ul>
+                <p id="noHistoryMessage" class="text-white mt-2 d-none">履歴がありません。</p>
+            </div>
+
+            <!-- デバッグ用のモーダル表示ボタンを追加 -->
+            <div class="mt-4">
+                <button id="showLoadingModalButton" class="btn btn-secondary w-100">
+                    ローディングモーダルを表示
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <div id="content">
+        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+            <div class="container-fluid">
+                <button id="sidebarToggle" class="btn btn-outline-light me-2">
+                    <i class="fas fa-bars"></i>
+                </button>
+                <a class="navbar-brand" href="#">Gemini Prompt Generator</a>
+            </div>
+        </nav>
+
+        <div class="container mt-3">
             <div class="row">
                 <div id="inputQuery" class="col-md-6 mb-4">
                     <div class="card">
@@ -73,421 +206,57 @@
                                 <textarea class="form-control" id="promptMyLanguage" disabled
                                     placeholder="日本訳がここに表示されます"></textarea>
                             </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-12 mb-4">
-                    <div class="card">
-                        <div class="card-header bg-primary text-white">
-                            <h5 class="mb-0" id="settingsTitle">設定</h5>
-                        </div>
-                        <div class="card-body">
-                            <div class="form-group mb-3">
+                            <div class="form-group mt-3">
                                 <label for="danbooruTags" class="form-label" id="danbooruTagsLabel">
                                     danbooru tags
                                 </label>
                                 <input type="text" class="form-control" id="danbooruTags" placeholder="danbooru tags"
                                     readonly>
                             </div>
-                            <div class="form-group mb-3">
-                                <label for="apiKey" class="form-label" id="apiKeyLabel">
-                                    <a href="https://aistudio.google.com/app/apikey?hl=ja" target="_blank">APIキー</a>
-                                </label>
-                                <input type="text" class="form-control" id="apiKey" placeholder="APIキーを入力してください">
-                            </div>
-                            <div class="form-group">
-                                <label for="characterCount" class="form-label" id="characterCountLabel">文字数</label>
-                                <input type="number" value="320" class="form-control" id="characterCount"
-                                    placeholder="生成するプロンプトの文字数を入力してください">
-                            </div>
-                            <div class="form-group">
-                                <label for="languageSelect" class="form-label" id="languageSelectLabel">Language</label>
-                                <select class="form-select" id="languageSelect">
-                                    <option value="ja">日本語</option>
-                                    <option value="en">English</option>
-                                    <option value="zh">中文</option>
-                                    <option value="ko">한국어</option>
-                                    <option value="fr">Français</option>
-                                    <option value="es">Español</option>
-                                    <option value="de">Deutsch</option>
-                                    <option value="it">Italiano</option>
-                                </select>
-                            </div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
-    <script>
-        let language;
-        const translations = {
-            ja: {
-                inputQueryTitle: "入力クエリ",
-                generateButtonText: "プロンプト生成",
-                splitStrings: "分割送信",
-                outputPromptTitle: "生成されたプロンプト",
-                settingsTitle: "設定",
-                apiKeyLabel: "APIキー",
-                characterCountLabel: "文字数",
-                languageSelectLabel: "言語",
-                promptEnPlaceholder: "英語のプロンプトがここに表示されます",
-                promptMyLanguagePlaceholder: "日本訳がここに表示されます",
-                apiKeyPlaceholder: "APIキーを入力してください",
-                characterCountPlaceholder: "生成するプロンプトの文字数を入力してください"
-            },
-            en: {
-                inputQueryTitle: "Input Query",
-                generateButtonText: "Generate Prompt",
-                splitStrings: "Split Strings",
-                outputPromptTitle: "Generated Prompt",
-                settingsTitle: "Settings",
-                apiKeyLabel: "API Key",
-                characterCountLabel: "Character Count",
-                languageSelectLabel: "Language",
-                promptEnPlaceholder: "English prompt will be displayed here",
-                promptMyLanguagePlaceholder: "Translation will be displayed here",
-                apiKeyPlaceholder: "Enter your API key",
-                characterCountPlaceholder: "Enter the number of characters for the generated prompt"
-            },
-            zh: {
-                inputQueryTitle: "输入查询",
-                generateButtonText: "生成提示",
-                splitStrings: "分割字符串",
-                outputPromptTitle: "生成的提示",
-                settingsTitle: "设置",
-                apiKeyLabel: "API密钥",
-                characterCountLabel: "字符数",
-                languageSelectLabel: "语言",
-                promptEnPlaceholder: "英文提示将显示在这里",
-                promptMyLanguagePlaceholder: "翻译将显示在这里",
-                apiKeyPlaceholder: "请输入您的API密钥",
-                characterCountPlaceholder: "请输入生成提示的字符数"
-            },
-            ko: {
-                inputQueryTitle: "입력 쿼리",
-                generateButtonText: "프롬프트 생성",
-                splitStrings: "문자열 분할",
-                outputPromptTitle: "생성된 프롬프트",
-                settingsTitle: "설정",
-                apiKeyLabel: "API 키",
-                characterCountLabel: "문자 수",
-                languageSelectLabel: "언어",
-                promptEnPlaceholder: "영어 프롬프트가 여기에 표시됩니다",
-                promptMyLanguagePlaceholder: "번역이 여기에 표시됩니다",
-                apiKeyPlaceholder: "API 키를 입력하세요",
-                characterCountPlaceholder: "생성할 프롬프트의 문자 수를 입력하세요"
-            },
-            fr: {
-                inputQueryTitle: "Requête d'entrée",
-                generateButtonText: "Générer le prompt",
-                splitStrings: "Diviser les chaînes",
-                outputPromptTitle: "Prompt généré",
-                settingsTitle: "Paramètres",
-                apiKeyLabel: "Clé API",
-                characterCountLabel: "Nombre de caractères",
-                languageSelectLabel: "Langue",
-                promptEnPlaceholder: "Le prompt en anglais s'affichera ici",
-                promptMyLanguagePlaceholder: "La traduction s'affichera ici",
-                apiKeyPlaceholder: "Entrez votre clé API",
-                characterCountPlaceholder: "Entrez le nombre de caractères pour le prompt généré"
-            },
-            es: {
-                inputQueryTitle: "Consulta de entrada",
-                generateButtonText: "Generar prompt",
-                splitStrings: "Dividir cadenas",
-                outputPromptTitle: "Prompt generado",
-                settingsTitle: "Configuración",
-                apiKeyLabel: "Clave API",
-                characterCountLabel: "Recuento de caracteres",
-                languageSelectLabel: "Idioma",
-                promptEnPlaceholder: "El prompt en inglés se mostrará aquí",
-                promptMyLanguagePlaceholder: "La traducción se mostrará aquí",
-                apiKeyPlaceholder: "Ingrese su clave API",
-                characterCountPlaceholder: "Ingrese el número de caracteres para el prompt generado"
-            },
-            de: {
-                inputQueryTitle: "Eingabeabfrage",
-                generateButtonText: "Prompt generieren",
-                splitStrings: "Zeichenketten aufteilen",
-                outputPromptTitle: "Generierter Prompt",
-                settingsTitle: "Einstellungen",
-                apiKeyLabel: "API-Schlüssel",
-                characterCountLabel: "Zeichenanzahl",
-                languageSelectLabel: "Sprache",
-                promptEnPlaceholder: "Der englische Prompt wird hier angezeigt",
-                promptMyLanguagePlaceholder: "Die Übersetzung wird hier angezeigt",
-                apiKeyPlaceholder: "Geben Sie Ihren API-Schlüssel ein",
-                characterCountPlaceholder: "Geben Sie die Anzahl der Zeichen für den generierten Prompt ein"
-            },
-            it: {
-                inputQueryTitle: "Query di input",
-                generateButtonText: "Genera prompt",
-                splitStrings: "Dividi stringhe",
-                outputPromptTitle: "Prompt generato",
-                settingsTitle: "Impostazioni",
-                apiKeyLabel: "Chiave API",
-                characterCountLabel: "Conteggio caratteri",
-                languageSelectLabel: "Lingua",
-                promptEnPlaceholder: "Il prompt in inglese verrà visualizzato qui",
-                promptMyLanguagePlaceholder: "La traduzione verrà visualizzata qui",
-                apiKeyPlaceholder: "Inserisci la tua chiave API",
-                characterCountPlaceholder: "Inserisci il numero di caratteri per il prompt generato"
-            }
-        }
-        const resources = {
-            ja: {
-                translation: translations.ja
-            },
-            en: {
-                translation: translations.en
-            },
-            zh: {
-                translation: translations.zh
-            },
-            ko: {
-                translation: translations.ko
-            },
-            fr: {
-                translation: translations.fr
-            },
-            es: {
-                translation: translations.es
-            },
-            de: {
-                translation: translations.de
-            },
-            it: {
-                translation: translations.it
-            }
-        }
-
-        // 既存のスクリプトの前に追加
-        document.addEventListener('DOMContentLoaded', function () {
-            i18next
-                .use(i18nextBrowserLanguageDetector)
-                .init({
-                    fallbackLng: 'ja', // デフォルト言語
-                    resources: resources
-                })
-                .then(function (t) {
-                    document.getElementById('languageSelect').value = i18next.language;
-                    document.getElementById('languageSelect').dispatchEvent(new Event('change'));
-                });
-        });
-
-        function updateContent() {
-            // 各要素のテキストを更新
-            document.getElementById('inputQueryTitle').textContent = i18next.t('inputQueryTitle');
-            document.getElementById('generateButtonText').textContent = i18next.t('generateButtonText');
-            document.getElementById('splitStrings').textContent = i18next.t('splitStrings');
-            document.getElementById('outputPromptTitle').textContent = i18next.t('outputPromptTitle');
-            document.getElementById('settingsTitle').textContent = i18next.t('settingsTitle');
-            document.querySelector('#apiKeyLabel > a').textContent = i18next.t('apiKeyLabel');
-            document.getElementById('characterCountLabel').textContent = i18next.t('characterCountLabel');
-            document.getElementById('languageSelectLabel').textContent = i18next.t('languageSelectLabel');
-
-            // プレースホルダーを更新
-            document.getElementById('promptEn').placeholder = i18next.t('promptEnPlaceholder');
-            document.getElementById('promptMyLanguage').placeholder = i18next.t('promptMyLanguagePlaceholder');
-            document.getElementById('apiKey').placeholder = i18next.t('apiKeyPlaceholder');
-            document.getElementById('characterCount').placeholder = i18next.t('characterCountPlaceholder');
-        }
-
-        // 言語切り替え関数
-        function changeLang(language) {
-            i18next.changeLanguage(language, (err, t) => {
-                if (err) return console.error('言語切り替えエラー', err);
-                updateContent();
-            });
-        }
 
-        document.getElementById('languageSelect').addEventListener('change', function () {
-            changeLang(this.value);
-        });
-    </script>
+    <div class="modal fade" id="loadingModal" tabindex="-1" aria-labelledby="loadingModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered modal-large">
+            <div class="modal-content bg-dark text-white">
+                <div class="modal-body text-center">
+                    <h5 id="loadingModalLabel">プロンプト生成中...</h5>
+                    <div class="comic-animation"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/json5/2.2.3/index.min.js"
+        integrity="sha512-44jdhc+R2TFfzBflS3/dGNEABiNUxBkkrqwO7GWTvGsj3HkQNr3GESvI9PUvAxmqxSnTosR0Ij9y3+o+6J1hig=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/i18next/23.14.0/i18next.min.js"
+        integrity="sha512-8ANNUVMWPf6aWGXZqDhS4OXJWBCRxfjlW7lKfupuiG1FZah0ST6LiI2qnEb1L5mp05v/+0hn3s2FO4EwIbIgfA=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script
+        src="https://cdnjs.cloudflare.com/ajax/libs/i18next-browser-languagedetector/8.0.0/i18nextBrowserLanguageDetector.min.js"
+        integrity="sha512-8/RTkAM23B3lQzi6fmPs+Yf9qhIHzrzRpeSZsBsQ8OEmo95mbVp+68dB647VDCuyQIBbF+OIbS9b30aTWUkoog=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
+        crossorigin="anonymous"></script>
+    <script src="translation.js"></script>
+    <script src="prompt.js"></script>
+    <script src="storage.js"></script>
+    <script src="history.js"></script>
+    <script src="control.js"></script>
 
     <script>
-        function generatePrompt() {
-            if (!document.getElementById('apiKey').value) {
-                alert("APIキーを入力してください");
-                return;
-            }
-            let query = document.getElementById('query').value;
-            let textFormat = 'str';
+        document.getElementById('showLoadingModalButton').addEventListener('click', function () {
 
-            if (document.getElementById('splitStringsSwitch').checked) {
-                query = Array.from(document.getElementById('query').value).join(":::");
-                //textFormat = 'array, # テキストは1character(not word)ずつ格納した配列にして返すこと。 Example: ["I", "t", " ", "i", "s", " ", "a", " ", "p", "e", "n", "."], ["こ", "れ", "は", " ", "ペ", "ン", "で", "す", "。"], ';
-            }
-
-            let anotherLanguage = "";
-
-            if (!["en", "ja"].includes(i18next.language)) {
-                anotherLanguage = `,
-        {
-            "language": "${i18next.language}",
-            "text": ${textFormat}
-        }`;
-            }
-
-
-            const text = `「 ${query} 」をテーマに画像生成AIに送るプロンプトを考えてください。
-背景や小物のディテイール、構図、視覚効果など視覚的な情報のみに言及すること。
-その上で長文を日本語と英語で返信してください。
-返答は以下のフォーマットのjson形式でのみ行う。json以外の内容をレスポンスに含めないこと。また、出力されるjsonには改行コード(\\n)や空白は含めないこと。
-\`\`\`json
-{
-    "results": [
-        {
-            "language": "en",
-            "text": ${textFormat} # ${document.getElementById('characterCount').value}文字程度,
-        },
-        {
-            "language": "danbooru",
-            "tags": [str],
-        },
-        {
-            "language": "ja",
-            "text": ${textFormat}
-        }${anotherLanguage}
-    ]
-}
-\`\`\`
-`;
-            const url = "https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-pro-exp-0827:generateContent?key=" + document.getElementById('apiKey').value;
-            const payload = {
-                contents: [
-                    {
-                        parts: [
-                            { text: text }
-                        ]
-                    }
-                ],
-                generation_config: {
-                    max_output_tokens: 4095,
-                    temperature: 1,
-                    top_p: 1,
-                    top_k: 32
-                },
-                safetySettings: [
-                    {
-                        category: "HARM_CATEGORY_SEXUALLY_EXPLICIT",
-                        threshold: "BLOCK_NONE"
-                    }
-                ]
-            };
-
-            console.debug(text);
-
-            // fetchを使用してリクエストを送信
-            // ローディングアイコンを表示
-            document.getElementById('loading').classList.remove('d-none');
-            // generatePromptボタンを無効化
-            document.getElementById('generatePromptButton').disabled = true;
-            document.getElementById('generatePromptButton').classList.remove('btn-primary');
-            document.getElementById('generatePromptButton').classList.remove('btn-danger');
-            document.getElementById('generatePromptButton').classList.add('btn-secondary');
-            fetch(url, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify(payload)
-            })
-                .then(response => response.json())
-                .then(data => {
-                    console.debug(data.candidates[0].content);
-                    // レスポンスからテキストを抽出
-                    const responseText = data.candidates[0].content.parts[0].text
-                    console.debug(responseText);
-
-                    let jsonString = responseText.replace(/```json|```/g, '').trim();
-                    jsonString = jsonString.replace(/\\n/g, '');
-                    console.debug(jsonString);
-                    // JSONをパース
-                    const parsedData = JSON5.parse(jsonString);
-
-                    // 結果を表示
-                    console.debug(parsedData);
-                    let promptEn = parsedData.results.find(x => x.language === 'en').text;
-                    let promptMyLanguage = parsedData.results.find(x => x.language === i18next.language).text;
-                    [promptEn, promptMyLanguage] = [promptEn, promptMyLanguage].map(x => {
-                        return Array.isArray(x) ? x.join("") : x;
-                    });
-                    document.getElementById('promptEn').value = promptEn.replace(/\. ?/g, '.\n\n');
-                    document.getElementById('promptEn').value = document.getElementById('promptEn').value.replace(/^ */g, '');
-                    document.getElementById('promptMyLanguage').value = promptMyLanguage.replace(/\。 ?/g, '。\n\n');
-
-                    let danbooruTags = parsedData.results.find(x => x.language === 'danbooru');
-                    if(danbooruTags.tags){
-                        danbooruTags = danbooruTags.tags.map(x => x.replace("_", " "));
-                        document.getElementById('danbooruTags').value = danbooruTags.join(", ");
-                    }
-                    if(danbooruTags.text){
-                        danbooruTags = danbooruTags.text.map(x => x.replace("_", " "));
-                        document.getElementById('danbooruTags').value = danbooruTags.join(", ");
-                    }
-                    
-
-                    // ローディングアイコンを非表示
-                    document.getElementById('loading').classList.add('d-none');
-                    document.getElementById('generatePromptButton').disabled = false;
-                    document.getElementById('generatePromptButton').classList.remove('btn-secondary');
-                    document.getElementById('generatePromptButton').classList.add('btn-primary');
-                    saveToUserStorage(true);
-                })
-                .catch(error => {
-                    console.error(error);
-                    // エラー時もローディングアイコンを非表示
-                    document.getElementById('loading').classList.add('d-none');
-                    document.getElementById('generatePromptButton').disabled = false;
-                    document.getElementById('generatePromptButton').classList.remove('btn-secondary');
-                    document.getElementById('generatePromptButton').classList.add('btn-danger');
-                });
-        };
-        let lastSaveTimestamp = new Date();
-        function saveToUserStorage(force = false) {
-            const currentTime = new Date();
-            if (!force && currentTime - lastSaveTimestamp < 5000) {
-                return;
-            }
-            const data = {};
-            document.querySelectorAll('input, textarea').forEach(input => {
-                data[input.id] = input.value;
-            });
-            localStorage.setItem('gemini_prompt', JSON.stringify(data));
-            lastSaveTimestamp = currentTime;
-            return true;
-        }
-        function loadFromUserStorage() {
-            const data = JSON.parse(localStorage.getItem('gemini_prompt')) || {};
-            document.querySelectorAll('input, textarea').forEach(input => {
-                let v = data[input.id] || "";
-                if (v) {
-                    if (input.type === "number") {
-                        v = parseInt(v);
-                    }
-                    input.value = v;
-                }
-            });
-        }
-        loadFromUserStorage();
-        // 60秒ごとに自動保存を実行
-        setInterval(() => {
-            saveToUserStorage();
-        }, 60000);
-        document.querySelectorAll('input, textarea').forEach(input => {
-            input.addEventListener('input', saveToUserStorage);
-        });
-        // Ctrl+Enterでプロンプト生成を実行する
-        document.addEventListener('keydown', function (event) {
-            if (event.ctrlKey && event.key === 'Enter') {
-                event.preventDefault(); // デフォルトの動作を防ぐ
-                generatePrompt(); // プロンプト生成関数を呼び出す
-            }
+            var loadingModal = new bootstrap.Modal(document.getElementById('loadingModal'));
+            loadingModal.show();
         });
     </script>
+
 </body>
 
 </html>

prompt.js

@@ -0,0 +1,156 @@
+function generatePrompt() {
+    if (!document.getElementById('apiKey').value) {
+        alert("APIキーを入力してください");
+        return;
+    }
+    let query = document.getElementById('query').value;
+    let textFormat = 'str';
+
+    if (document.getElementById('splitStringsSwitch').checked) {
+        query = Array.from(document.getElementById('query').value).join(":::");
+        //textFormat = 'array, # テキストは1character(not word)ずつ格納した配列にして返すこと。 Example: ["I", "t", " ", "i", "s", " ", "a", " ", "p", "e", "n", "."], ["こ", "れ", "は", " ", "ペ", "ン", "で", "す", "。"], ';
+    }
+
+    let anotherLanguage = "";
+
+    if (!["en", "ja"].includes(i18next.language)) {
+        anotherLanguage = `,
+{
+    "language": "${i18next.language}",
+    "text": ${textFormat}
+}`;
+    }
+
+    const selectedEndpoint = document.getElementById('endpointSelect').value;
+    const url = `https://generativelanguage.googleapis.com/v1beta/models/${selectedEndpoint}:generateContent?key=` + document.getElementById('apiKey').value;
+
+    const text = `「 ${query} 」をテーマに画像生成AIに送るプロンプトを考えてください。
+背景や小物のディテイール、構図、視覚効果など視覚的な情報のみに言及すること。
+その上で長文を日本語と英語で返信してください。
+返答は以下のフォーマットのjson形式でのみ行う。json以外の内容をレスポンスに含めないこと。
+\`\`\`json
+{
+"results": [
+{
+    "language": "en",
+    "text": ${textFormat} # ${document.getElementById('characterCount').value}文字程度,
+},
+{
+    "language": "danbooru",
+    "tags": [str],
+},
+{
+    "language": "ja",
+    "text": ${textFormat}
+}${anotherLanguage}
+]
+}
+\`\`\`
+`;
+    const payload = {
+        contents: [
+            {
+                parts: [
+                    { text: text }
+                ]
+            }
+        ],
+        generation_config: {
+            max_output_tokens: 4095,
+            temperature: 1,
+            top_p: 1,
+            top_k: 32
+        },
+        safetySettings: [
+            {
+                category: "HARM_CATEGORY_SEXUALLY_EXPLICIT",
+                threshold: "BLOCK_NONE"
+            }
+        ]
+    };
+
+    console.debug(text);
+
+    // モーダルを表示
+    const loadingModal = new bootstrap.Modal(document.getElementById('loadingModal'));
+    loadingModal.show();
+
+    // ローディングアイコンを表示
+    document.getElementById('loading').classList.remove('d-none');
+    // generatePromptボタンを無効化
+    document.getElementById('generatePromptButton').disabled = true;
+    document.getElementById('generatePromptButton').classList.remove('btn-primary');
+    document.getElementById('generatePromptButton').classList.remove('btn-danger');
+    document.getElementById('generatePromptButton').classList.add('btn-secondary');
+    fetch(url, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(payload)
+    })
+        .then(response => response.json())
+        .then(data => {
+            console.debug(data.candidates[0].content);
+            // レスポンスからテキストを抽出
+            const responseText = data.candidates[0].content.parts[0].text
+            console.debug(responseText);
+
+            let jsonString = responseText.replace(/```json|```/g, '').trim();
+            jsonString = jsonString.replace(/\n/g, '');
+            console.debug(jsonString);
+            // JSONをパース
+            const parsedData = JSON5.parse(jsonString);
+
+            // 結果を表示
+            console.debug(parsedData);
+            let promptEn = parsedData.results.find(x => x.language === 'en').text;
+            let promptMyLanguage = parsedData.results.find(x => x.language === i18next.language).text;
+            [promptEn, promptMyLanguage] = [promptEn, promptMyLanguage].map(x => {
+                return Array.isArray(x) ? x.join("") : x;
+            });
+            document.getElementById('promptEn').value = promptEn.replace(/\. ?/g, '.\n\n');
+            document.getElementById('promptEn').value = document.getElementById('promptEn').value.replace(/^ */g, '');
+            document.getElementById('promptMyLanguage').value = promptMyLanguage.replace(/\。 ?/g, '。\n\n');
+
+            let danbooruTags = parsedData.results.find(x => x.language === 'danbooru');
+            if (danbooruTags.tags) {
+                danbooruTags = danbooruTags.tags.map(x => x.replace("_", " "));
+                document.getElementById('danbooruTags').value = danbooruTags.join(", ");
+            }
+            if (danbooruTags.text) {
+                danbooruTags = danbooruTags.text.map(x => x.replace("_", " "));
+                document.getElementById('danbooruTags').value = danbooruTags.join(", ");
+            }
+
+
+            // ローディングアイコンを非表示
+            document.getElementById('loading').classList.add('d-none');
+            document.getElementById('generatePromptButton').disabled = false;
+            document.getElementById('generatePromptButton').classList.remove('btn-secondary');
+            document.getElementById('generatePromptButton').classList.add('btn-primary');
+            saveToUserStorage(true);
+            saveToHistory(); // 履歴に保存
+        })
+        .catch(error => {
+            console.error(error);
+            // エラー時の処理
+            document.getElementById('generatePromptButton').classList.remove('btn-secondary');
+            document.getElementById('generatePromptButton').classList.add('btn-danger');
+        })
+        .finally(() => {
+            // ローディングアイコンを非表示
+            document.getElementById('loading').classList.add('d-none');
+            document.getElementById('generatePromptButton').disabled = false;
+            document.getElementById('generatePromptButton').classList.remove('btn-secondary');
+            if (!document.getElementById('generatePromptButton').classList.contains('btn-danger')) {
+                document.getElementById('generatePromptButton').classList.add('btn-primary');
+            }
+            
+            // モーダルを非表示
+            setTimeout(() => {
+                loadingModal.hide();
+            }, 500);
+        });
+};
+

storage.js

@@ -0,0 +1,30 @@
+function saveToUserStorage(force = false) {
+    const currentTime = new Date().getTime();
+    const lastSaveTimestamp = parseInt(localStorage.getItem('lastSaveTimestamp') || '0');
+    if (!force && currentTime - lastSaveTimestamp < 5000) {
+        return;
+    }
+    const data = {};
+    document.querySelectorAll('input, textarea, select').forEach(input => {
+        data[input.id] = input.value;
+    });
+    localStorage.setItem('gemini_prompt', JSON.stringify(data));
+    localStorage.setItem('lastSaveTimestamp', currentTime.toString());
+    return true;
+}
+function loadFromUserStorage() {
+    const data = JSON.parse(localStorage.getItem('gemini_prompt')) || {};
+    document.querySelectorAll('input, textarea, select').forEach(input => {
+        let v = data[input.id] || "";
+        if (v) {
+            if (input.type === "number") {
+                v = parseInt(v);
+            }
+            input.value = v;
+        }
+    });
+    // エンドポイントが保存されていない場合、デフォルト値を設定
+    if (!data.endpointSelect) {
+        document.getElementById('endpointSelect').value = "gemini-1.5-pro-exp-0827";
+    }
+}

translation.js

@@ -0,0 +1,184 @@
+const translations = {
+    ja: {
+        inputQueryTitle: "入力クエリ",
+        generateButtonText: "プロンプト生成",
+        splitStrings: "分割送信",
+        outputPromptTitle: "生成されたプロンプト",
+        settingsTitle: "設定",
+        apiKeyLabel: "APIキー",
+        characterCountLabel: "文字数",
+        languageSelectLabel: "言語",
+        promptEnPlaceholder: "英語のプロンプトがここに表示されます",
+        promptMyLanguagePlaceholder: "日本訳がここに表示されます",
+        apiKeyPlaceholder: "APIキーを入力してください",
+        characterCountPlaceholder: "生成するプロンプトの文字数を入力してください"
+    },
+    en: {
+        inputQueryTitle: "Input Query",
+        generateButtonText: "Generate Prompt",
+        splitStrings: "Split Strings",
+        outputPromptTitle: "Generated Prompt",
+        settingsTitle: "Settings",
+        apiKeyLabel: "API Key",
+        characterCountLabel: "Character Count",
+        languageSelectLabel: "Language",
+        promptEnPlaceholder: "English prompt will be displayed here",
+        promptMyLanguagePlaceholder: "Translation will be displayed here",
+        apiKeyPlaceholder: "Enter your API key",
+        characterCountPlaceholder: "Enter the number of characters for the generated prompt"
+    },
+    zh: {
+        inputQueryTitle: "输入查询",
+        generateButtonText: "生成提示",
+        splitStrings: "分割字符串",
+        outputPromptTitle: "生成的提示",
+        settingsTitle: "设置",
+        apiKeyLabel: "API密钥",
+        characterCountLabel: "字符数",
+        languageSelectLabel: "语言",
+        promptEnPlaceholder: "英文提示将显示在这里",
+        promptMyLanguagePlaceholder: "翻译将显示在这里",
+        apiKeyPlaceholder: "请输入您的API密钥",
+        characterCountPlaceholder: "请输入生成提示的字符数"
+    },
+    ko: {
+        inputQueryTitle: "입력 쿼리",
+        generateButtonText: "프롬프트 생성",
+        splitStrings: "문자열 분할",
+        outputPromptTitle: "생성된 프롬프트",
+        settingsTitle: "설정",
+        apiKeyLabel: "API 키",
+        characterCountLabel: "문자 수",
+        languageSelectLabel: "언어",
+        promptEnPlaceholder: "영어 프롬프트가 여기에 표시됩니다",
+        promptMyLanguagePlaceholder: "번역이 여기에 표시됩니다",
+        apiKeyPlaceholder: "API 키를 입력하세요",
+        characterCountPlaceholder: "생성할 프롬프트의 문자 수를 입력하세요"
+    },
+    fr: {
+        inputQueryTitle: "Requête d'entrée",
+        generateButtonText: "Générer le prompt",
+        splitStrings: "Diviser les chaînes",
+        outputPromptTitle: "Prompt généré",
+        settingsTitle: "Paramètres",
+        apiKeyLabel: "Clé API",
+        characterCountLabel: "Nombre de caractères",
+        languageSelectLabel: "Langue",
+        promptEnPlaceholder: "Le prompt en anglais s'affichera ici",
+        promptMyLanguagePlaceholder: "La traduction s'affichera ici",
+        apiKeyPlaceholder: "Entrez votre clé API",
+        characterCountPlaceholder: "Entrez le nombre de caractères pour le prompt généré"
+    },
+    es: {
+        inputQueryTitle: "Consulta de entrada",
+        generateButtonText: "Generar prompt",
+        splitStrings: "Dividir cadenas",
+        outputPromptTitle: "Prompt generado",
+        settingsTitle: "Configuración",
+        apiKeyLabel: "Clave API",
+        characterCountLabel: "Recuento de caracteres",
+        languageSelectLabel: "Idioma",
+        promptEnPlaceholder: "El prompt en inglés se mostrará aquí",
+        promptMyLanguagePlaceholder: "La traducción se mostrará aquí",
+        apiKeyPlaceholder: "Ingrese su clave API",
+        characterCountPlaceholder: "Ingrese el número de caracteres para el prompt generado"
+    },
+    de: {
+        inputQueryTitle: "Eingabeabfrage",
+        generateButtonText: "Prompt generieren",
+        splitStrings: "Zeichenketten aufteilen",
+        outputPromptTitle: "Generierter Prompt",
+        settingsTitle: "Einstellungen",
+        apiKeyLabel: "API-Schlüssel",
+        characterCountLabel: "Zeichenanzahl",
+        languageSelectLabel: "Sprache",
+        promptEnPlaceholder: "Der englische Prompt wird hier angezeigt",
+        promptMyLanguagePlaceholder: "Die Übersetzung wird hier angezeigt",
+        apiKeyPlaceholder: "Geben Sie Ihren API-Schlüssel ein",
+        characterCountPlaceholder: "Geben Sie die Anzahl der Zeichen für den generierten Prompt ein"
+    },
+    it: {
+        inputQueryTitle: "Query di input",
+        generateButtonText: "Genera prompt",
+        splitStrings: "Dividi stringhe",
+        outputPromptTitle: "Prompt generato",
+        settingsTitle: "Impostazioni",
+        apiKeyLabel: "Chiave API",
+        characterCountLabel: "Conteggio caratteri",
+        languageSelectLabel: "Lingua",
+        promptEnPlaceholder: "Il prompt in inglese verrà visualizzato qui",
+        promptMyLanguagePlaceholder: "La traduzione verrà visualizzata qui",
+        apiKeyPlaceholder: "Inserisci la tua chiave API",
+        characterCountPlaceholder: "Inserisci il numero di caratteri per il prompt generato"
+    }
+}
+const resources = {
+    ja: {
+        translation: translations.ja
+    },
+    en: {
+        translation: translations.en
+    },
+    zh: {
+        translation: translations.zh
+    },
+    ko: {
+        translation: translations.ko
+    },
+    fr: {
+        translation: translations.fr
+    },
+    es: {
+        translation: translations.es
+    },
+    de: {
+        translation: translations.de
+    },
+    it: {
+        translation: translations.it
+    }
+}
+
+// 既存のスクリプトの前に追加
+document.addEventListener('DOMContentLoaded', function () {
+    i18next
+        .use(i18nextBrowserLanguageDetector)
+        .init({
+            fallbackLng: 'ja', // デフォルト言語
+            resources: resources
+        })
+        .then(function (t) {
+            document.getElementById('languageSelect').value = i18next.language;
+            document.getElementById('languageSelect').dispatchEvent(new Event('change'));
+        });
+});
+
+function updateContent() {
+    // 各要素のテキストを更新
+    document.getElementById('inputQueryTitle').textContent = i18next.t('inputQueryTitle');
+    document.getElementById('generateButtonText').textContent = i18next.t('generateButtonText');
+    document.getElementById('splitStrings').textContent = i18next.t('splitStrings');
+    document.getElementById('outputPromptTitle').textContent = i18next.t('outputPromptTitle');
+    document.getElementById('settingsTitle').textContent = i18next.t('settingsTitle');
+    document.querySelector('#apiKeyLabel > a').textContent = i18next.t('apiKeyLabel');
+    document.getElementById('characterCountLabel').textContent = i18next.t('characterCountLabel');
+    document.getElementById('languageSelectLabel').textContent = i18next.t('languageSelectLabel');
+
+    // プレースホルダーを更新
+    document.getElementById('promptEn').placeholder = i18next.t('promptEnPlaceholder');
+    document.getElementById('promptMyLanguage').placeholder = i18next.t('promptMyLanguagePlaceholder');
+    document.getElementById('apiKey').placeholder = i18next.t('apiKeyPlaceholder');
+    document.getElementById('characterCount').placeholder = i18next.t('characterCountPlaceholder');
+}
+
+// 言語切り替え関数
+function changeLang(language) {
+    i18next.changeLanguage(language, (err, t) => {
+        if (err) return console.error('言語切り替えエラー', err);
+        updateContent();
+    });
+}
+
+document.getElementById('languageSelect').addEventListener('change', function () {
+    changeLang(this.value);
+});