在介紹本文內容之前，我先盤點了本站寫過，關於 AI 幫忙產生提示詞的文章，有以下幾篇(追到去年9月):
如何無腦的畫出抽象的概念...(發佈於 2024/09/03)
讓AI辨識人物服裝，再生出類似服裝的圖片如何?(發佈於 2025/02/07)讓 AI 幫忙想表情、姿勢、鏡頭角度...(發佈於 2025/03/03)
好的，如果對以上技巧有興趣，請再回去瞭解一下，以下本文開始。
由於，我最常用的生圖軟體是 TensorArt，他還沒支援中文提示詞生圖，英文苦手的我，非常依賴 AI 來產生生圖提示詞，要下指令(從我自己的記事本中翻一下我自己常用的一些人、事、物...，再複製過來)，等 AI 生出生圖指令後，要選取提示詞(滑鼠右鍵複製 或 Ctrl+C)，再貼到 TensorArt(這部分免不了~疑? 或許可以，下次研究)，上面這個部分 "要下指令(從我自己的記事本中翻一下我自己常用的一些人、事、物...，再複製過來)，等 AI 生出生圖指令後，要選取提示詞(滑鼠右鍵複製 或 Ctrl+C)" 有點繁瑣，能否再簡化一下呀?
乾脆請 AI 幫我寫個程式，來完成我覺得繁瑣的這一部分...做出來的檔案於此 MakePrompt.zip
若擔心直接下載檔案不安全，本文最後有附上完整的 Html code，您可以仔細研究後，再自行複製，儲存為 Html 檔案使用。
好的，我們就來看一下這個生圖提示詞工具怎麼用吧!(把它點兩下或拖曳到瀏覽器執行後...)
整個執行畫面如上圖:
1.Gemini API 金鑰: 我們需要輸入一份 Gemini API 金鑰(API Key)，選用 Gemini 是因為他現在(寫文章的當下 2025/05/10)，它是完全免費的，感恩 Google，讚嘆 Google! 我們稍後再來說明 Gemini API 那要如何取得。額外一提，本 Html 網頁也是請 Gemini 生成的。感恩 Google，讚嘆 Google!
這裡取得 API Key 之後，直接貼上去就可以了! (如果不想要每次第一次執行都要貼? 可以，稍後解說。)
2.設計概念: 就是您想要請 AI 生圖的內容囉，直接打進去，或者使用下面的常用詞句。
3.常用詞句: 這些在這裡的詞句，點一下，它就會把那個詞句送上去 設計概念 那個輸入框中，您可以看出...我最喜歡用的是...哈哈!
這些 常用詞句 可以修改嗎? 當然可以! 稍後解說。
4.送出請求: 當然就是請程式送出以上內容給 Gemini ，請他產生繪圖提示詞了!
我們來看一個使用範例~ 我在 2.設計概念中 輸入 "一個可愛的機器人在幫忙想事情，卡通畫風"
他的回應如下:
這部分就很好理解了! 它會產生出三個英文的提示詞，並附上中文翻譯，您看要使用哪個提示詞，只要按那個提示詞的藍色按紐，他就會把那個提示詞複製到系統的剪貼簿中，您再到 TensorArt 去貼上，畫圖就行了! 方便吧! 來賓請掌聲鼓勵! 對我來說，省了不少事。
畫出來的結果如下:提示詞3 -> 2 -> 1
堆積木的蠻可愛的!
好的，接下來，來說說您要如何來 自行客製 此檔案，讓她更方便使用!
(要修改此檔案內容，您只要使用最簡單的 純文字編輯軟體 就可以了，比如 Windows 的 記事本。)
1.不需要每次輸入 API Key:
程式碼中找到 "請在此輸入您的 Gemini API 金鑰" 這字眼(如下圖)
在此可以看到有個 value=""，直接把您的金鑰貼進去，如改成:
value="1234金鑰貼在這裡5678"
儲存檔案後，以後執行此 html 檔，Gemini API Key 就會直接帶進來了，就省了自己還要貼一次的動作。
但請千萬注意，如果您這麼做了，有貼 Gemini API Key 的檔案千萬不要外流，否則人家就知道您的金鑰了，現在沒有收費或許沒啥關係(金鑰以後也能刪除)，但哪天如果開始收費，那麼問題就大了! 總之，自己用就好。
對了，Gemini API Key 金鑰 要如何取得?
A.請先登入 google aistudio (https://aistudio.google.com/)，有登入過直接看下面的 B 點，有建立過 API Key 的朋友請看 C 點。
登入設定請自己來喔，反正就是登入 Google 帳號就行了!
您登入後可能會看到的是這個畫面: 先選 "Try Gemini" 就好。
再同意一下條款!
B.取得Gemini API Key 金鑰(如果之前已經登入過，由此主畫面開始)
主畫面右上方 "Get API Key" 按下去!
如果您從沒建立過，再按右上角的 "Create API key" (有建立過可以複製舊的使用)，再一次吧! 按 "Create API key in new projects"
終於呀!
按下 Copy 就會取得一段文字，那段文字就是您的 API Key 囉!
C.如果之前建立過 APK Key (不打算建立新的)，接點選舊 API Key 進行複製就好。
2.修改或新增常用詞句:
目前這些常用詞句是我亂舉例的，如果要貼合您的習慣，請找到 HTML 碼~搜尋 "常用詞句"...
那些文句都可以修改、新增(複製一行加進去)。
3.真正提供給 AI 的提示詞是什麼?
請搜尋 "const fullPrompt" 您就可以看到我真正給 AI 的指令，如果您想加油添醋，可以改改看。
修改此處務必小心，改了不該改的地方，程式可能會出問題...我之後會出影片，影片會再講清楚一點(順便講講我用什麼提示詞產生此程式的吧!)。
好的，這篇文章，早上五點多起床，寫了三小時...我已經 "精盡人亡"了! 就寫到這裡吧!
以下為完整 HTML 內的程式碼，把它複製下來，完整貼到純文字檔案中，存檔後，把副檔名改成 .html 即可。
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gemini 提示詞產生器</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 20px;
background-color: #f4f4f4;
color: #333;
line-height: 1.6;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
max-width: 800px;
margin: auto;
}
label {
display: block;
margin-bottom: 8px;
font-weight: bold;
}
#docText {
width: 95%;
min-height: 100px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
margin-bottom: 10px;
font-size: 1rem;
}
.common-phrases button {
background-color: #e7e7e7;
border: 1px solid #ccc;
color: #333;
padding: 8px 12px;
margin: 5px 5px 10px 0;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.common-phrases button:hover {
background-color: #d4d4d4;
}
#submitBtn, .copy-btn {
background-color: #007bff;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
transition: background-color 0.3s ease;
}
#submitBtn:hover, .copy-btn:hover {
background-color: #0056b3;
}
#submitBtn:disabled {
background-color: #ccc;
cursor: not-allowed;
}
.result-item {
background-color: #f9f9f9;
border: 1px solid #eee;
padding: 15px;
margin-top: 15px;
border-radius: 4px;
}
.result-item p {
margin: 8px 0;
}
.en-prompt-text {
font-family: 'Courier New', Courier, monospace;
background-color: #eee;
padding: 5px;
display: block;
border-radius: 3px;
margin-top: 5px;
white-space: pre-wrap; /* Preserve line breaks */
word-break: break-all; /* Break long words */
}
#apiKeyInput {
width: 95%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ddd;
border-radius: 4px;
}
.loading-indicator {
display: none; /* Hidden by default */
margin-top: 15px;
font-style: italic;
color: #555;
}
</style>
</head>
<body>
<div class="container">
<h1>Gemini 視覺設計提示詞產生器</h1>
<label for="apiKeyInput">Gemini API 金鑰:</label>
<input type="password" id="apiKeyInput" placeholder="請在此輸入您的 Gemini API 金鑰" value="">
<label for="docText">輸入您的設計概念 (docText):</label>
<textarea id="docText" name="docText" rows="5" placeholder="例如：一位年輕的藝術家在充滿陽光的畫室裡創作..."></textarea>
<div class="common-phrases">
常用詞句:
<button type="button">二十歲亞洲女生</button>
<button type="button">時裝模特兒</button>
<button type="button">傍晚</button>
<button type="button">海邊</button>
<button type="button">漁夫帽</button>
<button type="button">水彩畫畫風</button>
<button type="button">科幻</button>
<button type="button">賽博龐克</button>
<button type="button">電影感光線</button>
<button type="button">廣角鏡頭</button>
<button type="button">細節豐富</button>
<button type="button">高品質</button>
<!-- 您可以在此處添加更多常用詞句按鈕 -->
</div>
<button id="submitBtn" type="button">送出請求</button>
<div id="loadingIndicator" class="loading-indicator">正在處理請求，請稍候...</div>
<div id="resultsArea">
<!-- Gemini API 的回應將顯示在此 -->
</div>
</div>
<script>
const docTextElement = document.getElementById('docText');
const commonPhrasesContainer = document.querySelector('.common-phrases');
const submitBtn = document.getElementById('submitBtn');
const resultsArea = document.getElementById('resultsArea');
const apiKeyInput = document.getElementById('apiKeyInput');
const loadingIndicator = document.getElementById('loadingIndicator');
// 常用詞句點擊事件
commonPhrasesContainer.addEventListener('click', function(event) {
if (event.target.tagName === 'BUTTON') {
const phrase = event.target.textContent;
if (docTextElement.value.trim() === '') {
docTextElement.value += phrase;
} else {
docTextElement.value += `, ${phrase}`;
}
docTextElement.focus(); // 讓游標回到輸入框
}
});
// 送出按鈕點擊事件
submitBtn.addEventListener('click', async function() {
const apiKey = apiKeyInput.value.trim();
if (!apiKey) {
alert('請先輸入您的 Gemini API 金鑰！');
apiKeyInput.focus();
return;
}
const userContent = docTextElement.value.trim();
if (!userContent) {
alert('請輸入您的設計概念！');
docTextElement.focus();
return;
}
const fullPrompt = `您是一位專業且富有創意的視覺設計大師。請理解我所提供的內容:
'${userContent}'
根據您的理解，提供三個生成圖像的英文提示，為每個英文提示提供繁體中文解釋，
提示產生時：
* 確保每個英文提示準確反映使用者文字的內容。
* 製作詳細、令人回味且適合產生影像的提示。
* 力求三個提示的風格和重點多樣化。
2. 翻譯：
* 為每個英文提示提供清晰、準確的繁體中文翻譯。
* 確保翻譯準確傳達英語提示的細微差別。
依照下列格式化輸出。
{
"En1":"第一則生圖用的英文提示詞內容。",
"Tw1":"第一則生圖用英文提示詞內容的中文翻譯。",
"En2":"第二則生圖用的英文提示詞內容。",
"Tw2":"第二則生圖用英文提示詞內容的中文翻譯。",
"En3":"第三則生圖用的英文提示詞內容。",
"Tw3":"第三則生圖用英文提示詞內容的中文翻譯。"
}`;
resultsArea.innerHTML = ''; // 清空先前結果
loadingIndicator.style.display = 'block'; // 顯示載入指示
submitBtn.disabled = true; // 禁用按鈕
try {
// Gemini API 的模型名稱和版本，此處使用 gemini-1.5-flash-latest
const model = 'gemini-2.0-flash';
const API_URL = `https://generativelanguage.googleapis.com/v1beta/models/${model}:generateContent?key=${apiKey}`;
const requestBody = {
contents: [{
parts: [{
text: fullPrompt
}]
}],
// 選用：可以加入 generationConfig 控制生成行為
// generationConfig: {
// temperature: 0.7,
// topK: 1,
// topP: 1,
// maxOutputTokens: 2048,
// }
};
const response = await fetch(API_URL, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(requestBody)
});
if (!response.ok) {
const errorData = await response.json();
console.error('API Error:', errorData);
throw new Error(`API 請求失敗: ${response.status} ${response.statusText}. ${errorData.error?.message || ''}`);
}
const data = await response.json();
if (data.candidates && data.candidates.length > 0 && data.candidates[0].content && data.candidates[0].content.parts && data.candidates[0].content.parts.length > 0) {
let geminiResponseText = data.candidates[0].content.parts[0].text;
// 嘗試移除可能的 Markdown JSON 區塊標記
geminiResponseText = geminiResponseText.replace(/^```json\s*/, '').replace(/\s*```$/, '');
try {
const parsedJson = JSON.parse(geminiResponseText);
displayResults(parsedJson);
} catch (e) {
console.error("解析 JSON 失敗:", e);
console.error("原始回應文字:", geminiResponseText);
resultsArea.innerHTML = `<p style="color: red;">解析 Gemini 回應的 JSON 內容時發生錯誤。請檢查控制台以獲取詳細資訊。原始回應內容：<pre>${escapeHtml(geminiResponseText)}</pre></p>`;
}
} else {
console.error('無效的 API 回應結構:', data);
resultsArea.innerHTML = '<p style="color: red;">從 Gemini API 收到的回應格式不正確。</p>';
}
} catch (error) {
console.error('請求 Gemini API 時發生錯誤:', error);
resultsArea.innerHTML = `<p style="color: red;">請求 Gemini API 時發生錯誤: ${error.message}</p>`;
} finally {
loadingIndicator.style.display = 'none'; // 隱藏載入指示
submitBtn.disabled = false; // 重新啟用按鈕
}
});
function displayResults(jsonData) {
resultsArea.innerHTML = ''; // 清空
for (let i = 1; i <= 3; i++) {
const enKey = `En${i}`;
const twKey = `Tw${i}`;
if (jsonData[enKey] && jsonData[twKey]) {
const resultItem = document.createElement('div');
resultItem.classList.add('result-item');
const enText = jsonData[enKey];
const twText = jsonData[twKey];
const copyButton = document.createElement('button');
copyButton.classList.add('copy-btn');
copyButton.textContent = `複製英文提示詞 ${i}`;
copyButton.addEventListener('click', () => copyToClipboard(enText, copyButton));
const enPromptDisplay = document.createElement('span');
enPromptDisplay.classList.add('en-prompt-text');
enPromptDisplay.textContent = enText;
const twTranslation = document.createElement('p');
twTranslation.innerHTML = `<strong>繁體中文翻譯 ${i}:</strong> ${escapeHtml(twText)}`;
resultItem.appendChild(copyButton);
resultItem.appendChild(enPromptDisplay);
resultItem.appendChild(twTranslation);
resultsArea.appendChild(resultItem);
}
}
}
function copyToClipboard(text, buttonElement) {
navigator.clipboard.writeText(text).then(() => {
const originalText = buttonElement.textContent;
buttonElement.textContent = '已複製!';
buttonElement.disabled = true;
setTimeout(() => {
buttonElement.textContent = originalText;
buttonElement.disabled = false;
}, 2000);
}).catch(err => {
console.error('無法複製文字: ', err);
alert('複製失敗，您的瀏覽器可能不支援或未授予權限。');
});
}
// Helper function to escape HTML special characters
function escapeHtml(unsafe) {
return unsafe
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}
</script>
</body>
</html>
完
