導入
現代のウェブアプリケーションは、人工知能を統合することで、次のレベルへと進化させることができます。このコースでは、自然言語処理、画像生成、音声認識を活用した多面的なボットの高度な開発に焦点を当てます。これらのボットは、独自のユーザーエクスペリエンスを提供し、多様なインタラクションモードを通じてユーザーを魅了します。.
このチュートリアルでは、Django Big Language ModelとOpenAI（会話型AI）、Whisper（正確な音声文字変換）、DALL-E（画像生成）を用いて、多面的なボットを開発します。画像付きのストーリーを生成するWebアプリケーションの構築方法を説明します。ユーザーは音声またはテキストでストーリーのトピックを指定すると、アプリケーションはビジュアルで装飾されたストーリーを生成して応答します。.
このチュートリアルを完了すると、テキスト、音声、画像など、様々な形式のユーザー入力を理解し、応答できるアプリケーションを作成できるようになります。これにより、アプリケーションに対するユーザーインタラクションが大幅に向上し、より直感的でアクセスしやすいものになります。.
前提条件
- PythonとDjangoの基本的な理解
- OpenAI API キー: このチュートリアルでは、OpenAI の GPT-4 および DALL-E モデルを操作する必要があります。そのためには、OpenAI の API キーが必要です。.
- ささやき
- OpenAI Pythonパッケージ
環境がアクティブになったら、次のコマンドを実行して OpenAI Python パッケージをインストールします。
(env)sammy@ubuntu:$ pip install openaiステップ1 – 音声認識のためにOpenAI Whisperを統合する
このステップでは、DjangoアプリケーションにOpenAI Whisperを設定し、音声をテキストに変換できるようにします。Whisperは、正確な文字起こしを可能にする堅牢な音声認識モデルであり、多面的なボットにとって重要な機能です。Whisperを統合することで、アプリケーションは音声によるユーザー入力を理解できるようになります。.
まず、Djangoプロジェクトディレクトリで作業していることを確認してください。前提条件となるチュートリアルの後、この統合用のDjangoプロジェクトを準備する必要があります。ターミナルを開き、Djangoプロジェクトディレクトリに移動し、仮想環境がアクティブになっていることを確認してください。
sammy@ubuntu:$ cd path_to_your_django_project
sammy@ubuntu:$ source env/bin/activateDjangoアプリケーションでWhisperを設定する
次に必要なのは、Whisper を使って音声ファイルをテキストに変換する関数を作成することです。whisper_transcribe.py という新しい Python ファイルを作成してください。.
(env)sammy@ubuntu:$ touch whisper_transcribe.pyテキストエディタでwhisper_transcribe.pyを開き、「Whisper」と入力します。次に、音声ファイルへのパスを入力として受け取り、Whisperを使ってファイルを処理し、書き起こし結果を返す関数を定義します。
import whisper
model = whisper.load_model("base")
def transcribe_audio(audio_path):
result = model.transcribe(audio_path)
return result["text"]このコードスニペットでは、文字起こしに「ベース」モデルを使用しています。Whisperは、さまざまな精度とパフォーマンスのニーズに合わせて、複数のモデルを提供しています。ニーズに合わせて、他のモデルを簡単に試すことができます。.
転写テスト
文字起こしをテストするには、Djangoプロジェクトのディレクトリに音声ファイルを保存します。ファイルがWhisperがサポートする形式（MP3、WAVなど）であることを確認してください。次に、whisper_transcribe.pyの末尾に以下の行を追加して修正します。
# For testing purposes
if __name__ == "__main__":
print(transcribe_audio("path_to_your_audio_file"))Python で whisper_transcribe.py を実行して、ターミナルでオーディオ ファイルの文字起こしを確認します。
(env)sammy@ubuntu:$ python whisper_transcribe.pyすべてが正しく設定されていれば、ターミナルに書き起こされたテキスト出力が表示されます。この機能は、ボットにおける音声ベースのインタラクションの基盤となります。.
ステップ2 – GPT-4でテキストレスポンスを作成する
このステップでは、GPT-4 LLMを使用して、ユーザー入力または前のステップで取得した音声文字変換に基づいてテキスト応答を生成します。GPT-4は大規模な言語モデルを備えており、一貫性があり文脈に即した応答を生成できるため、マルチモーダルボットアプリケーションに最適です。.
先に進む前に、前提条件に記載されているように、仮想環境にOpenAI Pythonパッケージがインストールされていることを確認してください。GPT-4モデルにアクセスするにはAPIキーが必要なので、準備しておいてください。OpenAI APIキーは、Pythonファイルに直接追加する代わりに、環境変数に追加することもできます。
(env)sammy@ubuntu:$ export OPENAI_KEY="your-api-key"チャット完了の設定
Djangoアプリケーションディレクトリに移動し、chat_completion.pyという新しいPythonファイルを作成します。このスクリプトはGPT-4モデルと通信し、入力テキストに基づいて応答を生成します。.
import os
from openai import OpenAI
client = OpenAI(api_key=os.environ["OPENAI_KEY"])
def generate_story(input_text):
# Call the OpenAI API to generate the story
response = get_story(input_text)
# Format and return the response
return format_response(response)このコードスニペットは、まずOpenAIサービスへの認証に必要なAPIキーを設定します。次に、別の関数 get_story を呼び出してOpenAIのストーリー用APIを呼び出し、さらに別の関数 format_response を呼び出してAPIレスポンスをフォーマットします。.
それでは、get_story関数に注目してみましょう。chat_completion.pyファイルの末尾に以下のコードを追加してください。
def get_story(input_text):
# Construct the system prompt. Feel free to experiment with different prompts.
system_prompt = f"""You are a story generator.
You will be provided with a description of the story the user wants.
Write a story using the description provided."""
# Make the API call
response = client.chat.completions.create(
model="gpt-4",
messages=[
{"role": "system", "content": system_prompt},
{"role": "user", "content": input_text},
],
temperature=0.8
)
# Return the API response
return responseこの関数では、まずシステム コマンドを設定して、モデルに実行する必要があるタスクを通知し、次に ChatCompletion API にユーザーの入力テキストを使用してストーリーを生成するように要求します。.
最後に、format_response関数を実装します。chat_completion.pyファイルの末尾に以下のコードを追加してください。
def format_response(response):
# Extract the generated story from the response
story = response.choices[0].message.content
# Remove any unwanted text or formatting
story = story.strip()
# Return the formatted story
return story生成された応答をテストする
テキスト生成をテストするには、chat_completion.py の下部に数行追加して変更します。
# For testing purposes
if __name__ == "__main__":
user_input = "Tell me a story about a dragon"
print(generate_story(user_input))生成された応答をターミナルで確認するには、Python で chat_completion.py を実行します。
(env)sammy@ubuntu:$ python chat_completion.pyプロンプトに基づいて、GPT-4からの創造的な応答が表示されるはずです。さまざまな入力を試して、異なる応答を確認してください。.
次のステップでは、生成されたストーリーに画像を追加します。.
ステップ3 – DALL-Eで画像を生成する
DALL-E はテキスト メッセージから正確な画像を作成するように設計されており、多面的なロボットが視覚的な創造性でストーリーを強化できるようにします。.
Djangoアプリケーションにimage_generation.pyという新しいPythonファイルを作成します。このスクリプトはDALL-Eモデルを使用して画像を生成します。
(env)sammy@ubuntu:$ touch image_generation.pyDALL-E に通知を送信し、生成された画像を取得する関数を image_generation.py に作成しましょう。
import os
from openai import OpenAI
client = OpenAI(api_key=os.environ["OPENAI_KEY"])
def generate_image(text_prompt):
response = client.images.generate(
model="dall-e-3",
prompt=text_prompt,
size="1024x1024",
quality="standard",
n=1,
)
image_url = response.data[0].url
return image_urlこの関数は、テキストコマンド、生成する画像の数（n=1）、および画像のサイズを指定してDALL-Eモデルにリクエストを送信します。その後、生成された画像のURLを抽出して返します。.
スクリプトテスト
Django プロジェクトでこの関数の使用方法を示すには、image_generation.py ファイルの下部に次の例を追加します。
# For testing purposes
if __name__ == "__main__":
prompt = "Generate an image of a pet and a child playing in a yard."
print(generate_image(prompt))指定されたコマンドに基づいてイメージを作成するには、Python で image_generation.py を実行します。
(env)sammy@ubuntu:$ python image_generation.pyスクリプトが正常に実行されると、生成された画像のURLがターミナルに表示されます。その後、WebブラウザでこのURLにアクセスして画像を表示できます。.
次のステップでは、音声認識とテキストおよび画像生成を組み合わせて、シームレスなユーザー エクスペリエンスを実現します。.
ステップ4 – シームレスな体験のために方法を組み合わせる
このフェーズでは、前のフェーズで開発された機能を統合して、シームレスなユーザー エクスペリエンスを提供します。.
Web アプリケーションでは、ユーザーからのテキストと音声入力を処理し、ストーリーを生成し、関連する画像で補完できるようになります。.
統一されたビューを作成する
まず、Djangoプロジェクトが整理されていること、そしてDjangoアプリディレクトリにwhisper_transcribe.py、chat_completion.py、image_generation.pyがあることを確認してください。次に、これらのコンポーネントを組み合わせたビューを作成します。.
views.pyファイルを開き、必要なモジュールと関数をインポートします。次に、get_story_from_descriptionという新しいビューを作成します。
import uuid
from django.core.files.storage import FileSystemStorage
from django.shortcuts import render
from .whisper_transcribe import transcribe_audio
from .chat_completion import generate_story
from .image_generation import generate_image
# other views
def get_story_from_description(request):
context = {}
user_input = ""
if request.method == "GET":
return render(request, "story_template.html")
else:
if "text_input" in request.POST:
user_input += request.POST.get("text_input") + "\n"
if "voice_input" in request.FILES:
audio_file = request.FILES["voice_input"]
file_name = str(uuid.uuid4()) + (audio_file.name or "")
FileSystemStorage(location="/tmp").save(file_name, audio_file)
user_input += transcribe_audio(f"/tmp/{file_name}")
generated_story = generate_story(user_input)
image_prompt = (
f"Generate an image that visually illustrates the essence of the following story: {generated_story}"
)
image_url = generate_image(image_prompt)
context = {
"user_input": user_input,
"generated_story": generated_story.replace("\n", "<br/>"),
"image_url": image_url,
}
return render(request, "story_template.html", context)このビューは、ユーザーからのテキストまたは音声入力を取得します。音声ファイルが存在する場合は、uuidライブラリを使用して一意の名前を付けて保存し、transcribe_audio関数を使用して音声をテキストに変換します。次に、gene_story関数を使用してテキスト応答を生成し、gene_image関数を使用して関連画像を生成します。これらの出力はテキスト辞書に送信され、story_template.htmlでレンダリングされます。.
テンプレートを作成する
次に、story_template.html というファイルを作成し、次の内容を追加します。
<div style="padding:3em; font-size:14pt;">
<form method="post" enctype="multipart/form-data">
{% csrf_token %}
<textarea name="text_input" placeholder=" Describe the story you would like" style="width:30em;"></textarea>
<br/><br/>
<input type="file" name="voice_input" accept="audio/*" style="width:30em;">
<br/><br/>
<input type="submit" value="Submit" style="width:8em; height:3em;">
</form>
<p>
<strong>{{ user_input }}</strong>
</p>
{% if image_url %}
<p>
<img src="{{ image_url }}" alt="Generated Image" style="max-width:80vw; width:30em; height:30em;">
</p>
{% endif %}
{% if generated_story %}
<p>{{ generated_story | safe }}</p>
{% endif %}
</div>このシンプルなフォームでは、ユーザーはテキストまたは音声ファイルをアップロードしてリクエストを送信できます。リクエストを送信すると、アプリによって生成されたテキストと画像が表示されます。.
ビューのURLを作成
get_story_from_description ビューの準備ができたので、URL 構成を作成してそれを利用できるようにする必要があります。.
Django アプリケーションで urls.py ファイルを開き、get_story_from_description ビューのテンプレートを追加します。
from django.urls import path
from . import views
urlpatterns = [
# other patterns
path('generate-story/', views.get_story_from_description, name='get_story_from_description'),
]統合エクスペリエンステスト
ウェブブラウザで http://your_domain/generate-story/ にアクセスしてください。story_template.html で定義されたフォームが表示されるはずです。テキスト入力フィールドからテキストリクエストを送信するか、ファイル入力フィールドから音声ファイルをアップロードしてみてください。リクエストが送信されると、入力内容が処理され、ストーリーとそれに付随する画像が生成され、ページに表示されます。.
たとえば、サンプルのストーリー プロンプトは次のとおりです。「庭で遊んでいるペットと子供についての話をしてください。」“
この手順を完了すると、さまざまなフォームでのユーザー入力を処理して応答するアプリケーションが作成されます。.
結果
このチュートリアルでは、Django を用いて多面的なボットを開発しました。音声認識にはWhisper、テキスト生成にはGPT-4、画像生成にはDALL-Eといった機能を統合し、様々な形式のユーザー入力を理解して反応できるようになりました。.
さらに開発を進めるには、Whisper、GPT、DALL-E モデルの代替バージョンを検討したり、アプリの UI/UX デザインを改善したり、ボットの機能を拡張して追加のインタラクティブ機能を含めたりすることをお勧めします。.
