請 AI 幫忙想繪圖用提示詞-自建網頁產生篇之補充影片

上圖為影片中提示詞的生圖結果~ 影片西哩呼嚕錄完了，完全忘了有作生圖示範這件事，哈哈!

如果想知道這影片在幹麻，請先看: 請 AI 幫忙想繪圖用提示詞-自建網頁產生篇，對該文有興趣再來看。

我想要請您設計一個簡單的html網頁，
網頁中需要一個可以輸入多行文字的輸入框(請命名為 docText)，在輸入框下方會顯示一些常用詞句，如:二十歲亞洲女生, 時裝模特兒, 傍晚, 海邊, 漁夫帽, 水彩畫畫風...等。
當使用者點選某一常用詞句時，該詞句會被送入輸入框中，與原本輸入框中現有的文字進行合併，該詞句會出現在出入框的尾端，並在該詞句前加上 "," 逗號，以便和原本輸入框的內容分開。
需要一個送出按鈕，當按下送出按鈕後，將執行以下動作:

1.請將多行文字的輸入框 docText 的內容，加入以下內容中，下指令給 Gemini API(模型使用文字的 2.0 Flash ) 產生文字結果。

「您是一位專業且富有創意的視覺設計大師。請理解我所提供的內容:
'插入輸入框 docText 的內容'
根據您的理解，提供三個生成圖像的英文提示，為每個英文提示提供繁體中文解釋，

提示產生時：
* 確保每個英文提示準確反映使用者文字的內容。 
* 製作詳細、令人回味且適合產生影像的提示。 
* 力求三個提示的風格和重點多樣化。 

2. 翻譯：
* 為每個英文提示提供清晰、準確的繁體中文翻譯。
* 確保翻譯準確傳達英語提示的細微差別。

依照下列格式化輸出。
{
    "En1":"第一則生圖用的英文提示詞內容。",
    "Tw1":"第一則生圖用英文提示詞內容的中文翻譯。",
    "En2":"第二則生圖用的英文提示詞內容。",
    "Tw2":"第二則生圖用英文提示詞內容的中文翻譯。",
    "En3":"第三則生圖用的英文提示詞內容。",
    "Tw3":"第三則生圖用英文提示詞內容的中文翻譯。"
}」

2.等待 Gemini Api 回應
3.解析 Gemini Api 回應的 Json 格式內容，依序顯示如下:

一個按鈕，標題為 "英文提示詞1"(按下此按鈕會將所回應的 En1 內容複製到系統剪貼簿中) : 列示出所回應的 En1 內容。
繁體中文文翻譯1: 列示出所回應的 Tw1 內容。

一個按鈕，標題為 "英文提示詞2"(按下此按鈕會將所回應的 En2 內容複製到系統剪貼簿中) : 列示出所回應的 En2 內容。
繁體中文文翻譯2: 列示出所回應的 Tw2 內容。

一個按鈕，標題為 "英文提示詞3"(按下此按鈕會將所回應的 En3 內容複製到系統剪貼簿中) : 列示出所回應的 En3 內容。
繁體中文文翻譯3: 列示出所回應的 Tw3 內容。

有興趣的話，複製去使用吧!

完