Upload 6 files

control.js

@@ -32,19 +32,6 @@ document.getElementById('sidebarToggle').addEventListener('click', function () {
     }
 });
 
-function resizeQueryTextarea() {
-    const queryTextarea = document.getElementById('query');
-    const cardBody = queryTextarea.closest('.card-body');
-    queryTextarea.style.minHeight = cardBody.offsetHeight + 'px';
-}
-
-document.addEventListener('DOMContentLoaded', function () {
-    resizeQueryTextarea();
-    initSidebarResize(); // 新しい関数を呼び出し
-});
-
-window.addEventListener('resize', resizeQueryTextarea); 
-
 // サイドバーのリサイズ機能を修正
 function initSidebarResize() {
     const sidebarContainer = document.getElementById('sidebar-container');
@@ -92,18 +79,38 @@ function initClearStorageButton() {
     });
 }
 
+function resizeMain() {
+    if (window.innerWidth >= 768) {
+        document.querySelector("main").style.height = `calc(100vh - ${document.querySelector("main").offsetTop}px)`
+    }
+}
+
 // DOMContentLoadedイベントリスナーを更新
 document.addEventListener('DOMContentLoaded', function () {
-    resizeQueryTextarea();
+    resizeMain();
     initSidebarResize();
     initClearStorageButton();
-    // addDynamicStyles(); // この行を削除
-    
-    // 初期状態でサイドバーを非表示にする処理も不要になるため、削除
-    // const sidebarContainer = document.getElementById('sidebar-container');
-    // const content = document.getElementById('content');
-    // sidebarContainer.classList.remove('active');
-    // content.classList.remove('sidebar-active');
+    updateModelList(); // 新しい関数を呼び出し
 });
 
-window.addEventListener('resize', resizeQueryTextarea); 
+window.addEventListener("resize", resizeMain);
+
+async function updateModelList() {
+    try {
+        const models = await getModelList();
+        const endpointSelect = document.getElementById('endpointSelect');
+        const currentOptions = Array.from(endpointSelect.options).map(option => option.value);
+
+        models.forEach(model => {
+            const modelPath = `models/${model.name.split('/').pop()}`;
+            if (!currentOptions.includes(modelPath)) {
+                const option = document.createElement('option');
+                option.value = modelPath;
+                option.textContent = model.name.split('/').pop();
+                endpointSelect.appendChild(option);
+            }
+        });
+    } catch (error) {
+        console.error('モデルリストの更新中にエラーが発生しました:', error);
+    }
+}

index.html

@@ -10,7 +10,7 @@
         crossorigin="anonymous">
     <style>
         textarea.form-control {
-            min-height: 15vh;
+            min-height: 25vh;
         }
 
         #sidebar-container {
@@ -131,10 +131,12 @@
                 <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>
+                        <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-exp-0827">gemini-1.5-pro-exp-0827</option>
+                        <option value="models/gemini-1.5-flash-exp-0827">gemini-1.5-flash-exp-0827</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>
 
@@ -184,9 +186,9 @@
             </div>
         </nav>
 
-        <div class="container mt-3">
-            <div class="row">
-                <div id="inputQuery" class="col-lg-4 col-md-12 mb-4">
+        <div class="container">
+            <main class="row">
+                <div id="inputQuery" class="col-lg-4 col-md-12 mb-4 h-100">
                     <div class="card h-100">
                         <div class="card-header bg-primary text-white">
                             <h5 class="mb-0" id="inputQueryTitle">入力クエリ</h5>
@@ -211,7 +213,7 @@
                         </div>
                     </div>
                 </div>
-                <div id="outputPrompt" class="col-lg-8 col-md-12 mb-4">
+                <div id="outputPrompt" class="col-lg-8 col-md-12 mb-4 h-100">
                     <div class="card h-100">
                         <div class="card-header bg-success text-white">
                             <h5 class="mb-0" id="outputPromptTitle">生成されたプロンプト</h5>
@@ -221,13 +223,13 @@
                                 <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">
-                                <label for="promptMyLanguage" class="form-label" id="promptMyLanguageLabel">Your
+                            <div class="form-group">
+                                <label for="promptMyLanguage" class="form-label mt-3" 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">
+                            <div class="form-group">
+                                <label for="danbooruTags" class="form-label mt-3" id="danbooruTagsLabel">
                                     danbooru tags
                                 </label>
                                 <input type="text" class="form-control" id="danbooruTags" placeholder="danbooru tags"
@@ -236,7 +238,7 @@
                         </div>
                     </div>
                 </div>
-            </div>
+            </main>
         </div>
     </div>
 

prompt.js

@@ -1,3 +1,15 @@
+async function getModelList() {
+    const url = 'https://generativelanguage.googleapis.com/v1beta/models?key=' + document.getElementById('apiKey').value;
+    const response = await fetch(url);
+    const data = await response.json();
+    return data.models
+    .filter(x => x.supportedGenerationMethods.includes("generateContent"))
+    .filter(x => {
+        const versionMatch = x.name.match(/gemini-(\d+\.\d+)/);
+        return versionMatch && parseFloat(versionMatch[1]) >= 1.5;
+    });
+}
+
 function generatePrompt() {
     if (!document.getElementById('apiKey').value) {
         alert("APIキーを入力してください");
@@ -23,7 +35,7 @@ function generatePrompt() {
     }
 
     const selectedEndpoint = document.getElementById('endpointSelect').value;
-    const url = `https://generativelanguage.googleapis.com/v1beta/models/${selectedEndpoint}:generateContent?key=` + document.getElementById('apiKey').value;
+    const url = `https://generativelanguage.googleapis.com/v1beta/${selectedEndpoint}:generateContent?key=` + document.getElementById('apiKey').value;
 
     const text = `「 ${query} 」をテーマに画像生成AIに送るプロンプトを考えてください。
 背景や小物のディテイール、構図、視覚効果など視覚的な情報のみに言及すること。