AWSの機械学習サービスを使ってアプリ開発！ChatGPTのオススメプロジェクトに挑戦④

M10i
2025-01-07
2025-01-07

はい、M10iです。
では、ChatGPTに言われるがままにアプリを作るシリーズ3回目もとい最終回！
今回はちょっと凝ったものが出来たらいいなぁ、頑張れChatGPT君！！


前回はこちら

おさらい
ルール：
AWSの機械学習サービスをふたつランダムに組み合わせてアプリを作る。
どんなアプリかはchatGPTにオススメを聞いてその中から選ぶ。
サービスは以下の6つ。(取り消し線は前回、前々回で使用済)
1.Comprehend NLP。環状分析、言語検出
2.Rekognition 画像・動画解析、物体検出
3.Lex 会話型インターフェース。botなど
4.Polly テキスト読み上げ
5.Translate 自動翻訳
6.Transcribe 音声からのテキスト起こし


今回はサイコロを振らずとも未使用の2つを使用したいと思います。
てことで2.Rekognition × 4.Polly で作っていきたいと思います！

reko_polly1

全部楽しそうだなぁ・・・
カメラは楽しそうだけど不審者とか店舗の棚とかデータの準備がアレなので
「2.写真読み上げアシスタント」に決定！

では早速コードを書いていきたいと思います。
Rekognition もPollyもsdkで呼び出すだけなので、今回もPython+djangoです。

views.py

from django.shortcuts import render
from .forms import PhotoForm
import boto3

①メイン処理(post)
def upload_photo(request):
    if request.method == 'POST':
        form = PhotoForm(request.POST, request.FILES)
        if form.is_valid():
            image = form.cleaned_data['image']
            # 読み込んだ画像を表示用に保存
            with open('static/output.jpg', 'wb') as file:
                for chunk in image.chunks():  
                    file.write(chunk)
            image.seek(0)
            #②画像解析
            labels = analyze_image(image)
            description = 'This image contains ' + ', '.join(labels)
　　　#③テキスト読み上げ
            text_to_speech(description)
            # 解析結果表示へ移動
            return render(request, 'photo_result.html', {'description': description})
   
    return render(request, 'upload_photo.html', {'form': form})

# ②Rekognitionで画像解析
def analyze_image(image):
    rekognition = boto3.client('rekognition')
    response = rekognition.detect_labels(Image={'Bytes': image.read()})
    labels = [label['Name'] for label in response['Labels']]
    return labels

# ③Pollyで音声生成
def text_to_speech(text):
    polly_client = boto3.client('polly')
    response = polly_client.synthesize_speech(Text=text, OutputFormat='mp3', VoiceId='Joanna')
    with open('static/output.mp3', 'wb') as file:
        file.write(response['AudioStream'].read())

①メイン処理(post)
画面から画像ファイルを受け取って処理して結果ページに遷移します。
画像ファイルと音声ファイルは固定値でサーバに保存して、結果画面で表示できるようにします。

②Rekognitionで画像解析
rekognitionのdetect_labelsで解析し、写真に写っている物体の名前を返します。

③Pollyで音声生成
pollyにテキストを読み上げてもらい、音声結果をmp3で保存します。

upload_photo.html


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Photo Analysis Result</title>
    <link rel="stylesheet" href="" />
</head>
<body>
    <div class="container">
    <h1>Upload a Photo</h1>
    <form method="post" enctype="multipart/form-data">
       
       
        <button type="submit">Upload</button>
    </form>
    </div>
</body>
</html>

photo_result.html


<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Photo Analysis Result</title>
       
        <link rel="stylesheet" href="">
    </head>
    <body>
        <div class="container">
            <div class="text-container">
                <h1>Photo Analysis Result</h1>
                <p></p>
                <div class="audio-container">
                    <audio controls>
                        <source src="" type="audio/mpeg">
                        Your browser does not support the audio element.
                    </audio>
                </div>
            </div>
            <div class="image-container">
                <img src="" alt="Analyzed Image">
            </div>
        </div>
    </body>
</html>

style.css

/* ベーススタイル */
body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    background-color: #f5f5f5;
    color: #333;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.container {
    max-width: 500px;
    width: 100%;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

h1 {
    font-size: 22px;
    color: #333;
    margin-bottom: 15px;
    font-weight: 600;
}

p {
    font-size: 16px;
    color: #666;
    margin-bottom: 20px;
    line-height: 1.5;
}
 
.audio-container {
    margin-bottom: 20px;
}

audio {
    width: 300px;  
    height: 30px;
    border-radius: 5px;
    outline: none;
}

/* 画像スタイル */
.image-container {
    margin-top: 20px;
}

img {
    max-width: 100%;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

/* ボタンやリンクのスタイル */
button, a {
    font-size: 14px;
    padding: 10px 15px;
    background-color: #007BFF;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover, a:hover {
    background-color: #0056b3;
}

ではでは早速。
サイトにアクセスしてみます。

reko_polly2
※以下、解析に使用する写真はこちらのサイト様よりお借りしました。
フリー素材屋Hoshino

まずは「お花とカタツムリ」の写真。

reko_polly_flower
結果は・・・・・
ちゃんと解析されました！

reko_polly3
Flower, Petal, Plant, Animal, Insect, Invertebrate, Bud, Sprout, Gladiolus,
Geranium, Anther, Pollen, Rose
↓翻訳↓
花, 花びら, 工場, 動物, 昆虫, 無脊椎動物, 芽, スプラウト, グラジオラス,
ゼラニウム, 葯, 花粉, ローズ

アレ・・・かたつむり(snail)が出てない。無脊椎動物扱いなのかな？
そして、オーディオの再生ボタンで音声もしっかり再生されます。
こちらは日本語も対応との事なので、Translateかけてから読み上げしてもらうのも良いかもしれませんね。

が。ここまできて当ブログ機能に「mp3のアップロード機能が無い」のでご視聴頂けません。。。
記事書き出してから気づきました・・申し訳ないです。

では気を取り直してもうひとつ画像を試してみましょう。
「伸びる猫」さん。かわいい。
reko_polly_cat
結果は・・・
reko_polly4
Text, Animal, Cat, Mammal, Pet, Furniture, Table, Document, Book, Publication, Kitten,
Desk, Person, Sleeping, Abyssinian
↓翻訳↓
テキスト、動物、猫、哺乳動物、ペット、家具、テーブル、ドキュメント、本、出版物、子猫、
机、人、眠っている、アビシニアン

この猫さんはアビシニアンではないと思いますが、猫種まで特定しようとしてくれるんですね。
(あとよく見たら参考書っぽいのがPerlって書いてますね。エンジニアの方でしょうか)

音声は残念でしたが、こんな感じで視覚補助が必要な方などに
「写真を送ったら音声で説明するアプリ」が簡単にご提供できますね。

全部作るとなると膨大な時間がかかってしまうはずが、わずか数時間で実装できてしまうのが嬉しいですね。(※今回も必要最低限のソースですので、実際に使用する場合はご注意ください)

これにて「AWSの機械学習サービスを使ってアプリ開発！ChatGPTのオススメプロジェクトに挑戦」
シリーズ最終回でした。まだまだ紹介してないサービスたくさんあるのでもっと連載できそうですが笑
ではではM10iでした！

参考サイト
フリー素材屋Hoshino(旧サイト）
© Future Spirits Co.Ltd.