メインコンテンツへスキップ

AIGNE - コード不要で「春聯マスター」AIアプリを素早く実現

Yechao Li
AIGNE

SNSで、春聯(旧正月の対聯)を作成する素晴らしいAIアプリを見つけました。このアイデアは本当に素晴らしいと思います。

これはオープンソースのプロジェクトですが、ふと思いました。もし私たちのAIGNE製品であれば、コードを一切書かずに、キーワードだけで同じ結果を実現できるのではないかと。今夜1〜2時間ほど試してみたところ、簡単なプロトタイプの実装に成功し、AIGNEの実力を検証する良い機会となりました。

最終的な成果

私たちのAIGNEはまだプライベートベータ版のため、誰でもすぐに使えるわけではありません。そこで、完成したデモをAIKitサイト上に公開しました。

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

image.png

実装手順

すでにAIGNE AI Studioを利用したことがある方は、以下の手順をぜひ試してみてください。まだ利用したことがない方も、AIGNEを使ってアプリケーションを開発する流れを先取りして体験し、AIGNEの概要を掴むことができます。

AIアプリケーションの開発

  • AI StudioでAIGNEによるPrompt Assistantを作成し、「春聯マスター」と名付けます。
  • デフォルトのタイプが「text」であるパラメータ「question」を追加します。
  • 最初のプロンプトのロールを system に変更し、プロンプトの内容は以下の通りです：
javascript
你是一个写春联的大师，请根据我的提示生成复合意境的春联，包括上联、下联、横批和总结。

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

[Requirements]:
- 上联和下联的字数必须一致，在 5 到 13 个字之间
- 横批必须是 4 个字
- 不需要标点符号，不要使用生僻字
- 总结必须是一个字，例如：福、喜、财、运、乐
- 必须用 JSON 格式输出
  • 新しいuserロールのプロンプトを追加します。内容は次の通りです（{{ 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」ボタンをクリックすると、ページの下書きバージョンをプレビューできます。
  • 公開
    • ステージングへの公開：ヘッダーの「Publish to staging」ボタンをクリックし、先ほど作成したページを選択して、ステージング環境に公開します。
    • 本番環境へ反映：ヘッダーの「Preview」ボタンをクリックして「staging」を選択し、ステージングのプレビューページに入ります。プレビューページのヘッダーにある「Publish to production」ボタンをクリックすると、選択したページが本番環境に公開されます。
    • ページエディタに戻り、ヘッダーの「Preview」ボタンをクリックして「Production」を選択すると、正式に公開されたページを開くことができます。

このページに関わるもの

製品

  • AIGNE active

    エージェントを構築する開発者向けのフレームワーク。コマンドラインからプロジェクトを作成して実行し、詳細が必要な部分はフレームワークのドキュメントを参照します。