Upload 6 files

control.js

@@ -15,10 +15,21 @@ document.addEventListener('keydown', function (event) {
     }
 });
 
-// サイドバーの切り替え機能を追加
+// サイドバーの切り替え機能を修正
 document.getElementById('sidebarToggle').addEventListener('click', function () {
-    document.getElementById('sidebar').classList.toggle('active');
-    document.getElementById('content').classList.toggle('active');
+    const sidebarContainer = document.getElementById('sidebar-container');
+    const content = document.getElementById('content');
+    const isActive = sidebarContainer.classList.toggle('active');
+    
+    if (isActive) {
+        // サイドバーを開く
+        sidebarContainer.style.width = '250px';
+        content.style.marginLeft = '250px';
+    } else {
+        // サイドバーを閉じる
+        sidebarContainer.style.width = '0';
+        content.style.marginLeft = '0';
+    }
 });
 
 function resizeQueryTextarea() {
@@ -29,6 +40,70 @@ function resizeQueryTextarea() {
 
 document.addEventListener('DOMContentLoaded', function () {
     resizeQueryTextarea();
+    initSidebarResize(); // 新しい関数を呼び出し
+});
+
+window.addEventListener('resize', resizeQueryTextarea); 
+
+// サイドバーのリサイズ機能を修正
+function initSidebarResize() {
+    const sidebarContainer = document.getElementById('sidebar-container');
+    const content = document.getElementById('content');
+    const resizer = document.getElementById('sidebar-resizer');
+    let isResizing = false;
+
+    resizer.addEventListener('mousedown', (e) => {
+        isResizing = true;
+        document.addEventListener('mousemove', resize);
+        document.addEventListener('mouseup', stopResize);
+    });
+
+    function resize(e) {
+        if (!isResizing) return;
+        const newWidth = e.clientX;
+        const minWidth = 250;
+        const maxWidth = 500;
+        const sidebarWidth = Math.min(Math.max(minWidth, newWidth), maxWidth);
+        
+        sidebarContainer.style.width = `${sidebarWidth}px`;
+        content.style.marginLeft = `${sidebarWidth}px`;
+        sidebarContainer.classList.add('active'); // サイドバーを開いた状態にする
+    }
+
+    function stopResize() {
+        isResizing = false;
+        document.removeEventListener('mousemove', resize);
+        document.removeEventListener('mouseup', stopResize);
+    }
+}
+
+// localStorageをクリアする機能を追加
+function initClearStorageButton() {
+    const clearStorageButton = document.getElementById('clearStorageButton');
+    clearStorageButton.addEventListener('click', () => {
+        const userInput = prompt('全てのデータを削除します。よろしければ「YES」と入力してください。');
+        if (userInput === 'YES') {
+            localStorage.clear();
+            alert('全てのデータが削除されました。ページを再読み込みします。');
+            location.reload();
+        } else {
+            alert('削除がキャンセルされました。');
+        }
+    });
+}
+
+// DOMContentLoadedイベントリスナーを更新
+document.addEventListener('DOMContentLoaded', function () {
+    resizeQueryTextarea();
+    initSidebarResize();
+    initClearStorageButton();
+    // addDynamicStyles(); // この行を削除
+    
+    // 初期状態でサイドバーを非表示にする処理も不要になるため、削除
+    // const sidebarContainer = document.getElementById('sidebar-container');
+    // const content = document.getElementById('content');
+    // sidebarContainer.classList.remove('active');
+    // content.classList.remove('sidebar-active');
 });
 
 window.addEventListener('resize', resizeQueryTextarea); 

index.html

@@ -12,49 +12,45 @@
         textarea.form-control {
             min-height: 15vh;
         }
-        #sidebar {
+
+        #sidebar-container {
             position: fixed;
             top: 0;
-            left: -16em;
-            width: 16rem;
+            left: 0;
+            width: 0; /* 初期幅を0に設定 */
             height: 100%;
-            background-color: #343a40;
-            transition: 0.3s;
+            display: flex;
             z-index: 1000;
+            transition: width 0.3s ease;
         }
 
-        #sidebar.active {
-            left: 0;
+        #sidebar {
+            flex-grow: 1;
+            overflow-y: auto;
+            background-color: #343a40;
         }
 
-        #content {
-            transition: margin-left 0.3s;
-            min-height: 100vh;
+        #sidebar-resizer {
+            width: 10px;
+            cursor: ew-resize;
+            background-color: #2c3136;
         }
 
-        #content.active {
-            margin-left: 250px;
+        #content {
+            margin-left: 0; /* 初期マージンを0に設定 */
+            transition: margin-left 0.3s ease;
         }
 
         #historyContainer {
-            max-height: 300px;
-            overflow-y: auto;
+            max-height: none;
+            /* 最大高さの制限を解除 */
+            overflow-y: visible;
+            /* スクロールバーを削除 */
         }
 
         #historyContainer::-webkit-scrollbar {
-            width: 5px;
-        }
-
-        #historyContainer::-webkit-scrollbar-track {
-            background: #f1f1f1;
-        }
-
-        #historyContainer::-webkit-scrollbar-thumb {
-            background: #888;
-        }
-
-        #historyContainer::-webkit-scrollbar-thumb:hover {
-            background: #555;
+            width: 0;
+            /* スクロールバーを非表示に */
         }
 
         .comic-animation {
@@ -81,6 +77,7 @@
                 width: 100%;
                 height: auto;
             }
+
             .form-group {
                 padding-left: 1rem;
                 padding-right: 1rem;
@@ -103,58 +100,78 @@
 </head>
 
 <body data-bs-theme="dark">
-    <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>
+    <div id="sidebar-container">
+        <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">
-                <ul id="historyList" class="list-group small">
-                    <!-- 履歴項目がここに動的に追加されます -->
-                </ul>
-                <p id="noHistoryMessage" class="text-white mt-2 d-none">履歴がありません。</p>
-            </div>
+                <h3 id="replacementTitle" class="text-white mt-4">置換設定</h3>
+                <div id="replacementContainer">
+                    <div id="replacementList">
+                        <!-- 置換セットがここに動的に追加されます -->
+                    </div>
+                    <button id="addReplacementButton" class="btn btn-secondary mt-2">
+                        <i class="fas fa-plus"></i> <span id="addReplacementButtonText">置換セット追加</span>
+                    </button>
+                </div>
 
-            <!-- デバッグ用のモーダル表示ボタンを追加 -->
-            <div class="mt-4">
-                <button id="showLoadingModalButton" class="btn btn-secondary w-100">
-                    Show Modal
-                </button>
+                <h3 id="historyTitle" class="text-white mt-4">履歴</h3>
+                <div id="historyContainer">
+                    <ul id="historyList" class="list-group small">
+                        <!-- 履歴項目がここに動的に追加されます -->
+                    </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">
+                        Show Modal
+                    </button>
+                </div>
+
+                <!-- 新しいボタンを追加 -->
+                <div class="mt-4">
+                    <button id="clearStorageButton" class="btn btn-danger w-100">
+                        全データを削除
+                    </button>
+                </div>
             </div>
         </div>
+        <div id="sidebar-resizer"></div>
     </div>
 
     <div id="content">
@@ -205,14 +222,16 @@
                                 <textarea class="form-control" id="promptEn" placeholder="English Prompt"></textarea>
                             </div>
                             <div class="form-group mt-3">
-                                <label for="promptMyLanguage" class="form-label" id="promptMyLanguageLabel">Your Language Translation</label>
+                                <label for="promptMyLanguage" class="form-label" id="promptMyLanguageLabel">Your
+                                    Language Translation</label>
                                 <textarea class="form-control" id="promptMyLanguage" disabled></textarea>
                             </div>
                             <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>
+                                <input type="text" class="form-control" id="danbooruTags" placeholder="danbooru tags"
+                                    readonly>
                             </div>
                         </div>
                     </div>
@@ -234,7 +253,7 @@
     <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"
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/i18next/23.15.1/i18next.min.js"
         integrity="sha512-8ANNUVMWPf6aWGXZqDhS4OXJWBCRxfjlW7lKfupuiG1FZah0ST6LiI2qnEb1L5mp05v/+0hn3s2FO4EwIbIgfA=="
         crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script

prompt.js

@@ -112,17 +112,22 @@ function generatePrompt() {
             [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');
+            
+            promptMyLanguage = promptMyLanguage.replace(/\。 ?/g, '。\n\n');
+            document.getElementById('promptMyLanguage').value = promptMyLanguage;
+
+            promptEn = promptEn.replace(/\. ?/g, '.\n\n');
+            promptEn = promptEn.replace(/^ */g, '');
+            promptEn = applyReplacements(promptEn);
+            document.getElementById('promptEn').value = promptEn;
 
             let danbooruTags = parsedData.results.find(x => x.language === 'danbooru');
             if (danbooruTags.tags) {
-                danbooruTags = danbooruTags.tags.map(x => x.replace("_", " "));
+                danbooruTags = danbooruTags.tags.map(x => applyReplacements(x.replace("_", " ")));
                 document.getElementById('danbooruTags').value = danbooruTags.join(", ");
             }
             if (danbooruTags.text) {
-                danbooruTags = danbooruTags.text.map(x => x.replace("_", " "));
+                danbooruTags = danbooruTags.text.map(x => applyReplacements(x.replace("_", " ")));
                 document.getElementById('danbooruTags').value = danbooruTags.join(", ");
             }
 
@@ -161,3 +166,61 @@ function generatePrompt() {
         });
 };
 
+function applyReplacements(text) {
+    const replacements = getReplacements();
+    for (const [search, replace] of replacements) {
+        text = text.replace(new RegExp(search, 'g'), replace);
+    }
+    return text;
+}
+
+function getReplacements() {
+    const replacementList = document.getElementById('replacementList');
+    const replacements = [];
+    for (const set of replacementList.children) {
+        const search = set.querySelector('.replacement-search').value;
+        const replace = set.querySelector('.replacement-replace').value;
+        if (search && replace) {
+            replacements.push([search, replace]);
+        }
+    }
+    return replacements;
+}
+
+// 置換セットの追加と削除の処理
+document.getElementById('addReplacementButton').addEventListener('click', addReplacementSet);
+
+function addReplacementSet() {
+    const replacementList = document.getElementById('replacementList');
+    const newSet = document.createElement('div');
+    newSet.className = 'replacement-set mb-2';
+    newSet.innerHTML = `
+        <input type="text" class="form-control form-control-sm replacement-search mb-1" placeholder="検索語">
+        <input type="text" class="form-control form-control-sm replacement-replace mb-1" placeholder="置換語">
+        <button class="btn btn-danger btn-sm remove-replacement">
+            <i class="fas fa-times"></i>
+        </button>
+    `;
+    replacementList.appendChild(newSet);
+
+    newSet.querySelector('.remove-replacement').addEventListener('click', function() {
+        replacementList.removeChild(newSet);
+    });
+}
+
+// ページ読み込み時に保存された置換セットを復元
+window.addEventListener('load', function() {
+    const savedReplacements = JSON.parse(localStorage.getItem('replacements') || '[]');
+    for (const [search, replace] of savedReplacements) {
+        addReplacementSet();
+        const lastSet = document.getElementById('replacementList').lastElementChild;
+        lastSet.querySelector('.replacement-search').value = search;
+        lastSet.querySelector('.replacement-replace').value = replace;
+    }
+});
+
+// ページを離れる前に置換セットを保存
+window.addEventListener('beforeunload', function() {
+    localStorage.setItem('replacements', JSON.stringify(getReplacements()));
+});
+

translation.js

@@ -14,7 +14,11 @@ const translations = {
         characterCountPlaceholder: "生成するプロンプトの文字数を入力してください",
         endpointSelectLabel: "エンドポイント",
         historyTitle: "履歴",
-        noHistoryMessage: "履歴がありません。"
+        noHistoryMessage: "履歴がありません。",
+        replacementTitle: "置換設定",
+        addReplacementButtonText: "置換セット追加",
+        replacementSearchPlaceholder: "検索語",
+        replacementReplacePlaceholder: "置換語"
     },
     en: {
         inputQueryTitle: "Input Query",
@@ -31,7 +35,11 @@ const translations = {
         characterCountPlaceholder: "Enter the number of characters for the generated prompt",
         endpointSelectLabel: "Endpoint",
         historyTitle: "History",
-        noHistoryMessage: "No history available."
+        noHistoryMessage: "No history available.",
+        replacementTitle: "Replacement Settings",
+        addReplacementButtonText: "Add Replacement Set",
+        replacementSearchPlaceholder: "Search term",
+        replacementReplacePlaceholder: "Replace term"
     },
     zh: {
         inputQueryTitle: "输入查询",
@@ -48,7 +56,11 @@ const translations = {
         characterCountPlaceholder: "请输入生成提示的字符数",
         endpointSelectLabel: "端点",
         historyTitle: "历史记录",
-        noHistoryMessage: "没有可用的历史记录。"
+        noHistoryMessage: "没有可用的历史记录。",
+        replacementTitle: "替换设置",
+        addReplacementButtonText: "添加替换集",
+        replacementSearchPlaceholder: "搜索词",
+        replacementReplacePlaceholder: "替换词"
     },
     ko: {
         inputQueryTitle: "입력 쿼리",
@@ -65,7 +77,11 @@ const translations = {
         characterCountPlaceholder: "생성할 프롬프트의 문자 수를 입력하세요",
         endpointSelectLabel: "엔드포인트",
         historyTitle: "기록",
-        noHistoryMessage: "사용 가능한 기록이 없습니다."
+        noHistoryMessage: "사용 가능한 기록이 없습니다.",
+        replacementTitle: "대체 설정",
+        addReplacementButtonText: "대체 세트 추가",
+        replacementSearchPlaceholder: "검색어",
+        replacementReplacePlaceholder: "대체어"
     },
     fr: {
         inputQueryTitle: "Requête d'entrée",
@@ -82,7 +98,11 @@ const translations = {
         characterCountPlaceholder: "Entrez le nombre de caractères pour le prompt généré",
         endpointSelectLabel: "Point de terminaison",
         historyTitle: "Historique",
-        noHistoryMessage: "Aucun historique disponible."
+        noHistoryMessage: "Aucun historique disponible.",
+        replacementTitle: "Paramètres de remplacement",
+        addReplacementButtonText: "Ajouter un ensemble de remplacement",
+        replacementSearchPlaceholder: "Terme de recherche",
+        replacementReplacePlaceholder: "Terme de remplacement"
     },
     es: {
         inputQueryTitle: "Consulta de entrada",
@@ -99,7 +119,11 @@ const translations = {
         characterCountPlaceholder: "Ingrese el número de caracteres para el prompt generado",
         endpointSelectLabel: "Punto final",
         historyTitle: "Historial",
-        noHistoryMessage: "No hay historial disponible."
+        noHistoryMessage: "No hay historial disponible.",
+        replacementTitle: "Configuración de reemplazo",
+        addReplacementButtonText: "Agregar conjunto de reemplazo",
+        replacementSearchPlaceholder: "Término de búsqueda",
+        replacementReplacePlaceholder: "Término de reemplazo"
     },
     de: {
         inputQueryTitle: "Eingabeabfrage",
@@ -116,7 +140,11 @@ const translations = {
         characterCountPlaceholder: "Geben Sie die Anzahl der Zeichen für den generierten Prompt ein",
         endpointSelectLabel: "Endpunkt",
         historyTitle: "Verlauf",
-        noHistoryMessage: "Kein Verlauf verfügbar."
+        noHistoryMessage: "Kein Verlauf verfügbar.",
+        replacementTitle: "Ersetzungseinstellungen",
+        addReplacementButtonText: "Ersetzungsset hinzufügen",
+        replacementSearchPlaceholder: "Suchbegriff",
+        replacementReplacePlaceholder: "Ersetzungsbegriff"
     },
     it: {
         inputQueryTitle: "Query di input",
@@ -133,7 +161,11 @@ const translations = {
         characterCountPlaceholder: "Inserisci il numero di caratteri per il prompt generato",
         endpointSelectLabel: "Endpoint",
         historyTitle: "Cronologia",
-        noHistoryMessage: "Nessuna cronologia disponibile."
+        noHistoryMessage: "Nessuna cronologia disponibile.",
+        replacementTitle: "Impostazioni di sostituzione",
+        addReplacementButtonText: "Aggiungi set di sostituzione",
+        replacementSearchPlaceholder: "Termine di ricerca",
+        replacementReplacePlaceholder: "Termine di sostituzione"
     }
 }
 const resources = {
@@ -196,8 +228,20 @@ function updateContent() {
 
     // エンドポイントと履歴のテキストを更新
     document.getElementById('endpointSelectLabel').textContent = i18next.t('endpointSelectLabel');
-    document.querySelector('#sidebar h3:nth-of-type(2)').textContent = i18next.t('historyTitle');
+    document.getElementById('historyTitle').textContent = i18next.t('historyTitle');
     document.getElementById('noHistoryMessage').textContent = i18next.t('noHistoryMessage');
+
+    // 置換設定の翻訳を更新
+    document.getElementById('replacementTitle').textContent = i18next.t('replacementTitle');
+    document.getElementById('addReplacementButtonText').textContent = i18next.t('addReplacementButtonText');
+    
+    // 既存の置換セットのプレースホルダーを更新
+    document.querySelectorAll('.replacement-search').forEach(el => {
+        el.placeholder = i18next.t('replacementSearchPlaceholder');
+    });
+    document.querySelectorAll('.replacement-replace').forEach(el => {
+        el.placeholder = i18next.t('replacementReplacePlaceholder');
+    });
 }
 
 // 言語切り替え関数