AIアプリを手作業で構築：要件分析からデプロイ、本稼働までの全プロセスガイド

序文

この記事では、3つの大きなステップ＋9つの小さなステップで済む、最短経路と最軽量モードのアプリケーションを実装してみる。

要求事項の説明

プロダクトマネジャーの視点からの体系的な説明は、以下のテンプレートにある：

1. 要求事項の概要どのような問題が解決され、どのような機能が達成され、そして全体的なプレゼンテーションが行われるのか。
2. インタラクティブ・インターフェース入力ボックスと出力ボックスの機能と相互作用。
3. 機能的なツールの提供機能的に実現可能なAIモデルの探求。

関連モデル

以下のAIモデルは、記事のイラストを生成するために利用可能であり、特定のAPIの使用法を取得します：
モデルアドレス

完成したデモの例::クリックして見る

要件実現のステップ

1.ニーズの全体的な説明

Gradioをベースに以下の機能を実装したアプリケーションを開発する：

• ユーザーが公開投稿の内容を入力した後、ワンクリック生成ボタンをクリックします。
• タイトル、アブストラクトの自動生成
• 抄録をもとに英語プロンプトを自動生成し、記事のグラフィックを作成。

2.フロントエンドのコアモジュール

1. ユーザー入力ボックス: 公開投稿の内容を入力するようユーザーに促す。
2. ヘッダー出力ボックス::
   • 公開番号に適した5つのタイトル（64文字以内）を自動生成。
   • 左右レイアウト、ストリーミング出力、思考プロセスと最終アウトプットの分離提示。
3. サマリー出力ボックス::
   • 公開番号に適した要約（120字以内）を自動的に生成する。
   • 左右レイアウト、ストリーミング出力、思考プロセスと最終アウトプットの分離提示。
4. 画像付き記事 プロンプト出力ボックス::
   • プロンプトは、要約に基づいて英語で自動的に生成されます。
   • ストリーミング出力による左右レイアウト。
   • 編集可能で再生に対応。
5. 記事グラフィックの出力ボックス::
   • 生成された英語プロンプトに基づいて画像を生成します。
   • 1024x500の画像を2枚生成します。

ビジュアルスタイル：テクニカルなシアン＋パープル。

3.サーバーサイドAPI

タイトル、サマリー、プロンプト出力API

インポートリクエスト
インポート json
from PIL import Image
from io import BytesIO
url = 'https://api-inference.modelscope.cn/v1/images/generations'
payload = {
'model': 'djyzcp123/gjerc', # ModelScope Model-Id, required
'prompt': 'A golden cat' #必須
}
headers = {
'Authorisation': 'Bearer あなたのマジックヒッチトークンで置き換えてください。｝
'Content-Type': 'application/json' です。
}
response = requests.post(url, data=json.dumps(payload, ensure_ascii=False).encode('utf-8'), headers=headers)
response_data = response.json()
image = Image.open(BytesIO(requests.get(response_data['images'][0]['url']).content))
image.save('result_image.jpg')

AIでコードを生成し、クラウドノートブックでポリッシュをテストする

1.コード生成

• Cursor、DeepSeek-R1、QwenMax-QWQ、Claude 3.7などの大規模モデルを使用してコードを自動生成することができます。
• コードは .py ドキュメンテーション

2.ノートブックでコードを実行する

• ノートパソコンは、箱から出してすぐに環境がプリインストールされている。
• 手帳アドレス
• うごきだす .py ドキュメンテーション

!python /mnt/workspace/filename.py

3.テストと最適化

フロントエンドの受け入れ

4つのツールによって生成されるフロントエンド・インターフェースはそれぞれ異なるが、いずれも要件を満たしている。

カーソル	ディープシーク-R1
QwenMax-QWQ	クロード3.7

サーバー側の受け入れ

機能は正常に動作し、生成されたタイトル、アブストラクト、プロンプト、画像は期待通りです。

配備開始

1.CreateSpaceの基本設定

• 新しいクリエイティブ・スペース
• デフォルトで設定されている、プラットフォームの空きCPUリソースを使用する。

2.キーステップ：APIキーの保護

• APIキーを環境変数に格納するようにコードを修正する。

改造前：

修正した：

インポート os
MODEL_API_KEY = os.getenv('MODEL_API_KEY')

3.文書のアップロードとオンライン掲載

• ノートブックでデバッグに成功 .py ファイル名を app.py とアップロードした。

そうすると、シェアするためのリンクが表示されます：

概要

誰もがアプリ開発者です。AIで魔法をかけ、何千ものアプリを作りましょう！

アプリケーションは無限に拡張できる：

1. 記事の装飾やマイクロブログのコピーを追加する。
2. イラストスタイルは任意。

さらなる可能性があなたを待っている！ 🚀