Upload 6 files

control.js

@@ -20,3 +20,15 @@ document.getElementById('sidebarToggle').addEventListener('click', function () {
     document.getElementById('sidebar').classList.toggle('active');
     document.getElementById('content').classList.toggle('active');
 });
+
+function resizeQueryTextarea() {
+    const queryTextarea = document.getElementById('query');
+    const cardBody = queryTextarea.closest('.card-body');
+    queryTextarea.style.minHeight = cardBody.offsetHeight + 'px';
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+    resizeQueryTextarea();
+});
+
+window.addEventListener('resize', resizeQueryTextarea); 

history.js

@@ -1,15 +1,22 @@
-function saveToHistory() {
+function saveToHistory(title) {
+    if(!title) {
+        title = document.getElementById('query').value.slice(0, 10);
+    }
     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()
+        timestamp: new Date().toISOString(),
+        title: title
     };
 
     let history = JSON.parse(localStorage.getItem('gemini_prompt_history') || '[]');
     history.unshift(historyItem);
-    history = history.slice(0, 10); // 最新の10件のみを保持
+    // 履歴の合計サイズが3MB以下になるまで古い項目を削除
+    while (JSON.stringify(history).length > 3 * 1024 * 1024) {
+        history.pop();
+    }
     localStorage.setItem('gemini_prompt_history', JSON.stringify(history));
 
     updateHistoryList();
@@ -34,21 +41,31 @@ function updateHistoryList() {
 
             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 titleDiv = document.createElement('div');
+            titleDiv.className = 'fw-bold text-truncate';
+            titleDiv.textContent = item.title || item.query.slice(0, 10);
 
             const dateDiv = document.createElement('div');
             dateDiv.className = 'small text-muted';
             dateDiv.textContent = new Date(item.timestamp).toLocaleString();
 
-            contentDiv.appendChild(queryDiv);
+            contentDiv.appendChild(titleDiv);
             contentDiv.appendChild(dateDiv);
 
+            const buttonsContainer = document.createElement('div');
+            buttonsContainer.className = 'd-flex';
+
+            const editButton = document.createElement('button');
+            editButton.className = 'btn btn-secondary btn-sm me-2';
+            editButton.innerHTML = '<i class="fas fa-pencil-alt"></i>';
+            editButton.onclick = (e) => {
+                e.stopPropagation();
+                editHistoryItemTitle(index, titleDiv);
+            };
+
             const deleteButton = document.createElement('button');
             deleteButton.className = 'btn btn-danger btn-sm';
             deleteButton.innerHTML = '<i class="fas fa-trash"></i>';
@@ -57,9 +74,14 @@ function updateHistoryList() {
                 deleteHistoryItem(index);
             };
 
+            buttonsContainer.appendChild(editButton);
+            buttonsContainer.appendChild(deleteButton);
+
             li.appendChild(contentDiv);
-            li.appendChild(deleteButton);
+            li.appendChild(buttonsContainer);
             historyList.appendChild(li);
+
+            contentDiv.style.width = `calc(100% - ${buttonsContainer.offsetWidth}px)`;
         });
     }
 }
@@ -93,10 +115,19 @@ function clearHistory() {
 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 titleSpan = document.createElement('span');
+    titleSpan.textContent = item.title || item.query.slice(0, 10);
+    titleSpan.className = 'me-2';
+    li.appendChild(titleSpan);
 
     const buttonsContainer = document.createElement('div');
 
+    const editButton = document.createElement('button');
+    editButton.className = 'btn btn-sm btn-secondary me-2';
+    editButton.innerHTML = '<i class="fas fa-pencil-alt"></i>';
+    editButton.onclick = () => editHistoryItemTitle(index, titleSpan);
+
     const useButton = document.createElement('button');
     useButton.className = 'btn btn-sm btn-primary me-2';
     useButton.innerHTML = '<i class="fas fa-redo"></i>';
@@ -106,15 +137,29 @@ function createHistoryItem(item, index) {
     deleteButton.className = 'btn btn-sm btn-danger';
     deleteButton.innerHTML = '<i class="fas fa-trash"></i>';
     deleteButton.onclick = () => {
-        // 個別の履歴項目削除時にも確認ポップアップを表示
         if (confirm('この履歴項目を削除してもよろしいですか？')) {
             deleteHistoryItem(index);
         }
     };
 
+    buttonsContainer.appendChild(editButton);
     buttonsContainer.appendChild(useButton);
     buttonsContainer.appendChild(deleteButton);
     li.appendChild(buttonsContainer);
 
     return li;
 }
+
+function editHistoryItemTitle(index, titleDiv) {
+    const history = JSON.parse(localStorage.getItem('gemini_prompt_history') || '[]');
+    const item = history[index];
+    const currentTitle = item.title || item.query.slice(0, 10);
+
+    const newTitle = prompt('新しいタイトルを入力してください:', currentTitle);
+    if (newTitle !== null && newTitle.trim() !== '') {
+        item.title = newTitle.trim();
+        history[index] = item;
+        localStorage.setItem('gemini_prompt_history', JSON.stringify(history));
+        titleDiv.textContent = newTitle.trim();
+    }
+}

index.html

@@ -9,20 +9,14 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
         crossorigin="anonymous">
     <style>
-        #query {
-            min-height: 40vh;
+        textarea.form-control {
+            min-height: 15vh;
         }
-
-        #promptEn,
-        #promptMyLanguage {
-            min-height: 20vh;
-        }
-
         #sidebar {
             position: fixed;
             top: 0;
-            left: -250px;
-            width: 250px;
+            left: -16em;
+            width: 16rem;
             height: 100%;
             background-color: #343a40;
             transition: 0.3s;
@@ -35,12 +29,18 @@
 
         #content {
             transition: margin-left 0.3s;
+            min-height: 100vh;
         }
 
         #content.active {
             margin-left: 250px;
         }
 
+        #historyContainer {
+            max-height: 300px;
+            overflow-y: auto;
+        }
+
         #historyContainer::-webkit-scrollbar {
             width: 5px;
         }
@@ -81,6 +81,10 @@
                 width: 100%;
                 height: auto;
             }
+            .form-group {
+                padding-left: 1rem;
+                padding-right: 1rem;
+            }
         }
 
         @keyframes comic-frame-switch {
@@ -104,7 +108,6 @@
             <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キーを入力してください">
@@ -134,13 +137,12 @@
                     <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">
+            <div id="historyContainer">
+                <ul id="historyList" class="list-group small">
                     <!-- 履歴項目がここに動的に追加されます -->
                 </ul>
                 <p id="noHistoryMessage" class="text-white mt-2 d-none">履歴がありません。</p>
@@ -149,7 +151,7 @@
             <!-- デバッグ用のモーダル表示ボタンを追加 -->
             <div class="mt-4">
                 <button id="showLoadingModalButton" class="btn btn-secondary w-100">
-                    ローディングモーダルを表示
+                    Show Modal
                 </button>
             </div>
         </div>
@@ -157,7 +159,7 @@
 
     <div id="content">
         <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
-            <div class="container-fluid">
+            <div class="container">
                 <button id="sidebarToggle" class="btn btn-outline-light me-2">
                     <i class="fas fa-bars"></i>
                 </button>
@@ -167,8 +169,8 @@
 
         <div class="container mt-3">
             <div class="row">
-                <div id="inputQuery" class="col-md-6 mb-4">
-                    <div class="card">
+                <div id="inputQuery" class="col-lg-4 col-md-12 mb-4">
+                    <div class="card h-100">
                         <div class="card-header bg-primary text-white">
                             <h5 class="mb-0" id="inputQueryTitle">入力クエリ</h5>
                         </div>
@@ -192,26 +194,25 @@
                         </div>
                     </div>
                 </div>
-                <div id="outputPrompt" class="col-md-6 mb-4">
-                    <div class="card">
+                <div id="outputPrompt" class="col-lg-8 col-md-12 mb-4">
+                    <div class="card h-100">
                         <div class="card-header bg-success text-white">
                             <h5 class="mb-0" id="outputPromptTitle">生成されたプロンプト</h5>
                         </div>
                         <div class="card-body">
                             <div class="form-group">
-                                <textarea class="form-control" id="promptEn"
-                                    placeholder="英語のプロンプトがここに表示されます"></textarea>
+                                <label for="promptEn" class="form-label" id="promptEnLabel">English Prompt</label>
+                                <textarea class="form-control" id="promptEn" placeholder="English Prompt"></textarea>
                             </div>
                             <div class="form-group mt-3">
-                                <textarea class="form-control" id="promptMyLanguage" disabled
-                                    placeholder="日本訳がここに表示されます"></textarea>
+                                <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>
@@ -251,7 +252,6 @@
 
     <script>
         document.getElementById('showLoadingModalButton').addEventListener('click', function () {
-
             var loadingModal = new bootstrap.Modal(document.getElementById('loadingModal'));
             loadingModal.show();
         });

prompt.js

@@ -17,7 +17,8 @@ function generatePrompt() {
         anotherLanguage = `,
 {
     "language": "${i18next.language}",
-    "text": ${textFormat}
+    "text": ${textFormat},
+    "title": str
 }`;
     }
 
@@ -34,6 +35,7 @@ function generatePrompt() {
 {
     "language": "en",
     "text": ${textFormat} # ${document.getElementById('characterCount').value}文字程度,
+    "title": str
 },
 {
     "language": "danbooru",
@@ -41,7 +43,8 @@ function generatePrompt() {
 },
 {
     "language": "ja",
-    "text": ${textFormat}
+    "text": ${textFormat},
+    "title": str
 }${anotherLanguage}
 ]
 }
@@ -123,14 +126,17 @@ function generatePrompt() {
                 document.getElementById('danbooruTags').value = danbooruTags.join(", ");
             }
 
+            const title = parsedData.results.find(x => x.language === i18next.language).title;
 
             // ローディングアイコンを非表示
             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');
+
+            document.getElementById('query').value = query;
             saveToUserStorage(true);
-            saveToHistory(); // 履歴に保存
+            saveToHistory(title); // 履歴に保存
         })
         .catch(error => {
             console.error(error);
@@ -139,6 +145,7 @@ function generatePrompt() {
             document.getElementById('generatePromptButton').classList.add('btn-danger');
         })
         .finally(() => {
+            document.getElementById('query').value = query;
             // ローディングアイコンを非表示
             document.getElementById('loading').classList.add('d-none');
             document.getElementById('generatePromptButton').disabled = false;

translation.js

@@ -11,7 +11,10 @@ const translations = {
         promptEnPlaceholder: "英語のプロンプトがここに表示されます",
         promptMyLanguagePlaceholder: "日本訳がここに表示されます",
         apiKeyPlaceholder: "APIキーを入力してください",
-        characterCountPlaceholder: "生成するプロンプトの文字数を入力してください"
+        characterCountPlaceholder: "生成するプロンプトの文字数を入力してください",
+        endpointSelectLabel: "エンドポイント",
+        historyTitle: "履歴",
+        noHistoryMessage: "履歴がありません。"
     },
     en: {
         inputQueryTitle: "Input Query",
@@ -25,7 +28,10 @@ const translations = {
         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"
+        characterCountPlaceholder: "Enter the number of characters for the generated prompt",
+        endpointSelectLabel: "Endpoint",
+        historyTitle: "History",
+        noHistoryMessage: "No history available."
     },
     zh: {
         inputQueryTitle: "输入查询",
@@ -39,7 +45,10 @@ const translations = {
         promptEnPlaceholder: "英文提示将显示在这里",
         promptMyLanguagePlaceholder: "翻译将显示在这里",
         apiKeyPlaceholder: "请输入您的API密钥",
-        characterCountPlaceholder: "请输入生成提示的字符数"
+        characterCountPlaceholder: "请输入生成提示的字符数",
+        endpointSelectLabel: "端点",
+        historyTitle: "历史记录",
+        noHistoryMessage: "没有可用的历史记录。"
     },
     ko: {
         inputQueryTitle: "입력 쿼리",
@@ -53,7 +62,10 @@ const translations = {
         promptEnPlaceholder: "영어 프롬프트가 여기에 표시됩니다",
         promptMyLanguagePlaceholder: "번역이 여기에 표시됩니다",
         apiKeyPlaceholder: "API 키를 입력하세요",
-        characterCountPlaceholder: "생성할 프롬프트의 문자 수를 입력하세요"
+        characterCountPlaceholder: "생성할 프롬프트의 문자 수를 입력하세요",
+        endpointSelectLabel: "엔드포인트",
+        historyTitle: "기록",
+        noHistoryMessage: "사용 가능한 기록이 없습니다."
     },
     fr: {
         inputQueryTitle: "Requête d'entrée",
@@ -67,7 +79,10 @@ const translations = {
         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é"
+        characterCountPlaceholder: "Entrez le nombre de caractères pour le prompt généré",
+        endpointSelectLabel: "Point de terminaison",
+        historyTitle: "Historique",
+        noHistoryMessage: "Aucun historique disponible."
     },
     es: {
         inputQueryTitle: "Consulta de entrada",
@@ -81,7 +96,10 @@ const translations = {
         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"
+        characterCountPlaceholder: "Ingrese el número de caracteres para el prompt generado",
+        endpointSelectLabel: "Punto final",
+        historyTitle: "Historial",
+        noHistoryMessage: "No hay historial disponible."
     },
     de: {
         inputQueryTitle: "Eingabeabfrage",
@@ -95,7 +113,10 @@ const translations = {
         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"
+        characterCountPlaceholder: "Geben Sie die Anzahl der Zeichen für den generierten Prompt ein",
+        endpointSelectLabel: "Endpunkt",
+        historyTitle: "Verlauf",
+        noHistoryMessage: "Kein Verlauf verfügbar."
     },
     it: {
         inputQueryTitle: "Query di input",
@@ -109,7 +130,10 @@ const translations = {
         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"
+        characterCountPlaceholder: "Inserisci il numero di caratteri per il prompt generato",
+        endpointSelectLabel: "Endpoint",
+        historyTitle: "Cronologia",
+        noHistoryMessage: "Nessuna cronologia disponibile."
     }
 }
 const resources = {
@@ -169,6 +193,11 @@ function updateContent() {
     document.getElementById('promptMyLanguage').placeholder = i18next.t('promptMyLanguagePlaceholder');
     document.getElementById('apiKey').placeholder = i18next.t('apiKeyPlaceholder');
     document.getElementById('characterCount').placeholder = i18next.t('characterCountPlaceholder');
+
+    // エンドポイントと履歴のテキストを更新
+    document.getElementById('endpointSelectLabel').textContent = i18next.t('endpointSelectLabel');
+    document.querySelector('#sidebar h3:nth-of-type(2)').textContent = i18next.t('historyTitle');
+    document.getElementById('noHistoryMessage').textContent = i18next.t('noHistoryMessage');
 }
 
 // 言語切り替え関数