跳到主要內容

AIGNE - 免寫程式碼，快速打造「春聯大師」AI 應用

Yechao Li
AIGNE

我們在社群媒體上發現了一款很棒的 AI 春聯（春節對聯）生成應用。我們認為這個點子真的很不錯：

雖然這是一個開源專案，但我在想：如果換成是我們的 AIGNE 產品，是不是也能不寫任何程式碼，只靠關鍵字就達成同樣的效果？今晚花了一兩個小時實作，我成功做出了一個簡易原型，這也算是對我們 AIGNE 能力的一次驗證。

最終成果

由於我們的 AIGNE 目前仍處於私測階段，並非所有人都能立即使用。在此，我們已將完成的成品部署到 AIKit 網站上作為展示。

https://www.aikit.rocks/en/sfc

image.png

實作步驟

已經體驗過 AIGNE AI Studio 的朋友，可以嘗試以下步驟。如果你還沒用過，也可以先睹為快，了解一下用 AIGNE 開發完整應用的流程，對 AIGNE 有個大致的認識。

開發 AI 應用

  • 在 AI Studio 中透過 AIGNE 建立一個 Prompt Assistant，命名為「春聯大師」。
  • 新增一個型別預設為「text」的參數「question」。
  • 將第一個 prompt 的角色改為 system，內容如下：
javascript
你是一个写春联的大师，请根据我的提示生成复合意境的春联，包括上联、下联、横批和总结。

[Response JSON Format]:
{
  "上联": "",
  "下联": "",
  "横批": "",
  "总结": ""
}

[Requirements]:
- 上联和下联的字数必须一致，在 5 到 13 个字之间
- 横批必须是 4 个字
- 不需要标点符号，不要使用生僻字
- 总结必须是一个字，例如：福、喜、财、运、乐
- 必须用 JSON 格式输出
  • 新增一個新的 user 角色 prompt，內容如下（其中 {{ question }} 會被輸入參數 question 取代）：
javascript
春联提示：
{{ question }}
  • 選擇運算模型：經過測試發現，Google 的 Gemini Pro 模型在生成對聯這件事上，表現優於 OpenAI 的 GPT-3.5 和 GPT-4。這是個有趣的發現，不過目前大型語言模型的發展，往往需要透過實際操作與測試來驗證。在 AI Studio 中切換不同的大型語言模型只是個簡單的選項而已（如下圖所示）。

image.png

  • 除錯：在 question 變數中輸入一些春聯提示，點擊「送出」，如下圖所示：

Image

  • 到這裡，AI 的部分就完成了。

建立前端頁面

我們的目標是盡量不寫程式碼（或只用低程式碼）就完成大部分介面。當然，若要實現特殊介面，也可以搭配少量程式碼。

  • 建立一個名為「Spring Couplets Master」的自訂元件，Renderer 選擇 React Component（我們用 React 元件來實作「春聯大師」的 UI），程式碼可以參考：

春联大师 pages component

  • 建立一個新的 Pages 頁面，把剛剛建立的「Spring Couplet Master」元件拖曳到該頁面的 Outline 中。

Image

  • 頁面設定：點擊上圖中黃色箭頭指向的區域，在右側的「Properties」面板中，可以設定頁面的路徑、標題、描述等資訊。
  • 預覽：點擊頁首的「Preview」按鈕，即可預覽該頁面的草稿版本。
  • 發布
    • 發布到 staging：點擊頁首的「Publish to staging」按鈕，選擇剛剛建立的頁面，將其發布到 staging 環境。
    • 上線到正式環境：點擊頁首的「Preview」按鈕，選擇 staging，進入 staging 預覽頁面。在該預覽頁面的頁首點擊「Publish to production」按鈕，即可將所選頁面發布到正式環境。
    • 回到頁面編輯器，點擊頁首的「Preview」按鈕，並選擇「Production」，即可開啟正式發布的頁面。

本頁涉及

產品

  • AIGNE active

    面向開發者的 agent 開發框架。從命令列建立並執行一個專案，需要細節時再查框架文件。