Azureで翻訳と音声のサービスを使ってみる ～TextTranslationとSpeechServices～
こんばんは！
Azureを勉強中でして、翻訳と音声のサービスについて学んだのでアウトプットのため記事を書いていきます。
本記事では、AzureのTextTranslationとSpeechServicesで、日本語の自己紹介を英語に翻訳して、その英文をWAV形式の音声ファイルで出力するまでをまとめていきます。
Azureでサービス登録
Azureで、翻訳サービス（TextTranslation）と音声サービス（SpeechServices）を作成します。
サブスクリプション情報とインスタンス情報を入力することで簡単に作成できます。作成出来たら、APIとリージョン情報を控えておきます、使うので。（翻訳サービスはエンドポイントも使用します）
Pythonに組み込む
では、プログラムで先ほどのサービスを組み込んでいきます！
日本語の自己紹介は下記文とします。
こんにちは、私はケイタです。趣味は、プログラミングと映画を観ること、美術館に行くことです。他にも色々興味あるので教えてください！普段は、プログラミングとセキュリティを勉強してます。それ以外の分野も色々勉強をしています。勉強方法はブログを書いています！どうぞよろしくお願いします。
まずは翻訳サービスを試してみます。
下記のようにコードを書きました！
import requests, uuid, json
def translate_text(text, target_language):# Azureのサブスクリプションキーとエンドポイントを設定します。subscription_key = "翻訳のAPIキー"endpoint = "翻訳のエンドポイント"
# 翻訳するテキストとターゲット言語を設定します。body = [{'text': text}]
params = {'to': target_language}
# ヘッダーを設定します。headers = {'Ocp-Apim-Subscription-Key': subscription_key,'Ocp-Apim-Subscription-Region': '翻訳のリージョン情報','X-ClientTraceId': str(uuid.uuid4())}
# POSTリクエストを送信します。response = requests.post(endpoint + '/translate',params=params,headers=headers,)
# 翻訳結果を取得します。result = response.json()translated_text = result[0]['translations'][0]['text']
return translated_text
text ="""こんにちは、私はケイタです。趣味は、プログラミングと映画を観ること、美術館に行くことです。他にも色々興味あるので教えてください！普段は、プログラミングとセキュリティを勉強してます。それ以外の分野も色々勉強をしています。勉強方法はブログを書いています！どうぞよろしくお願いします。"""
print(translate_text(text, "en"))
出力は下記のようになります。
翻訳はできました！
次にこれを基にWAV形式の音声データを作成していきます。
先ほどの翻訳のコードに追記します！コードは下記です。
import azure.cognitiveservices.speech as speechsdkimport requests, uuid, json
#翻訳関数def translate_text(text, target_language):# Azureのサブスクリプションキーとエンドポイントを設定します。subscription_key = "翻訳のAPIキー"endpoint = "翻訳のエンドポイント"
# 翻訳するテキストとターゲット言語を設定します。body = [{'text': text}]
params = {'to': target_language}
# ヘッダーを設定します。headers = {'Ocp-Apim-Subscription-Key': subscription_key,'Ocp-Apim-Subscription-Region': '翻訳のリージョン情報','X-ClientTraceId': str(uuid.uuid4())}
# POSTリクエストを送信します。response = requests.post(endpoint + '/translate',params=params,headers=headers,)
# 翻訳結果を取得します。result = response.json()translated_text = result[0]['translations'][0]['text']
return translated_text
#音声def text_to_speech(text, output_filename):# Azureのサブスクリプションキーとリージョンを設定します。speech_key = "音声のAPIキー"service_region = "音声のリージョン"
# SpeechConfigオブジェクトを作成します。speech_config = speechsdk.SpeechConfig(subscription=speech_key,region=service_region)
# SpeechSynthesizerオブジェクトを作成します。speech_synthesizer = speechsdk.SpeechSynthesizer(speech_config=speech_config)
# テキストを音声に変換します。result = speech_synthesizer.speak_text_async(text).get()
# 結果をWAVファイルとして保存します。if result.reason == speechsdk.ResultReason.SynthesizingAudioCompleted:stream = speechsdk.AudioDataStream(result)stream.save_to_wav_file(output_filename)else:print(f"Speech synthesis failed: {result.error_details}\n")
text ="""こんにちは、私はケイタです。趣味は、プログラミングと映画を観ること、美術館に行くことです。他にも色々興味あるので教えてください！普段は、プログラミングとセキュリティを勉強してます。それ以外の分野も色々勉強をしています。勉強方法はブログを書いています！どうぞよろしくお願いします。"""
print(translate_text(text, "en"))text_to_speech(translate_text(text,"en"), "output.wav")
以下が出力の結果です。
まずはコンソールです
次に音声です。
音声をブログでは載せられないので下記で許してください！
これでシナリオ完了となりました。
紹介した機能は一例で、他にも面白い機能がたくさんあります！
まとめ
本記事では、Azureで翻訳と音声のサービスを使ってみました！
これらのサービスは結構ブラウザ上のサービスとしては存在してますが、APIとして使えると柔軟に動かすことができて楽しいですね！
ここまで読んでいただきありがとうございました。
Azureでテキスト分析をしてみる ～TextAnalytics～
こんにちは！
Azureを勉強中でして、テキスト分析について学んだのでアウトプットしようと記事を書いていきます。
本記事では、AzureのTextAnalyticsでテキストが肯定的か否定的か判断するまでをまとめていきます。
Azureで言語サービスを登録
AzureのAzure AI servicesの言語サービスで作成を行います。
サブスクリプションの情報とインスタンスの情報を作成し、エンドポイントとキーを取得しておきます！
とりあえず、これでサービスの環境はできます！
Pythonに組み込んで使ってみる
サービスの環境はできたので、Pythonに組み込んでみます！
の前に必要なパッケージをインストールします
pip install azure-ai-textanalytics
pip install azure-core
そして、下記のようにコードを書きました！
ChatGPTにポジティブな文章とネガティブな文章を作成してもらいました。これらが期待通りに判定されるか見てみます。
from azure.ai.textanalytics import TextAnalyticsClientfrom azure.core.credentials import AzureKeyCredential
def authenticate_client():ta_credential = AzureKeyCredential("APIKEY")text_analytics_client = TextAnalyticsClient(endpoint="END POINT",credential=ta_credential)return text_analytics_client
def sentiment_analysis_example(client, documents):response = client.analyze_sentiment(documents=documents)[0]print("Document Sentiment:" f"{response.sentiment}")print("Overall scores: positive={0:.2f};\neutral={1:.2f}; \negative={2:.2f} ".format(response.confidence_scores.positive,response.confidence_scores.neutral,response.confidence_scores.negative,))
client = authenticate_client()
p_documents = ["君と出会えたこと、それは僕の人生で最高の贈り物だ。\君の笑顔は、僕の一日を明るく照らす太陽のようだ。\君と一緒にいる時間は、僕にとって最も価値のある時間だ。"]n_documents = ["君との時間は、僕の心を混乱させる。\君の言葉は、僕の心を傷つける。\君との関係は、僕を疲れさせる。"]sentiment_analysis_example(client, p_documents)
結果は以下のようになりました
しっかりポジティブ判定されてますね！
もう一つも確認してみます。
しっかり、ネガティブ判定されてます！
sentiment_analysis_example(client, n_documents)
最後に歌の歌手を分析してみようと思います。
自分が好きなオフィシャル髭男dismのsubtitleの歌詞を分析かけてみます！
lyrics = ["凍りついた心には太陽を そして僕が君にとってそのポジションを\そんなだいぶ傲慢な思い込みを拗らせてたんだよ ごめんね 笑ってやって\火傷しそうなほどのポジティブの 冷たさと残酷さに気付いたんだよ\きっと君に渡したいものはもっとひんやり熱いもの\綺麗事じゃないけど 綺麗で揺るぎないもの\うわべよりも胸の奥の奥を温めるもの\理想だけはあるけど 心のどこ探しても まるで見つからないんだよ\伝えたい伝わらない その不条理が今 キツく縛りつけるんだよ\臆病な僕の この一挙手一投足を\言葉はまるで雪の結晶 君にプレゼントしたくても\夢中になればなるほどに 形は崩れ落ちて溶けていって 消えてしまうけど\でも僕が選ぶ言葉が そこに託された想いが\君の胸を震わすのを 諦められない 愛してるよりも愛が届くまで\もう少しだけ待ってて\薄着でただそばに立ってても 不必要に汗をかいてしまう僕なんかもう\どうしたって生温くて君を痛めつけてしまうのだろう\手のひらが熱いほど心は冷たいんでしょう？\冗談でもそんな残酷なこと言わないでよ\別に言えばいいけど 全人生を賭けても ちゃんと覆さしてよ\救いたい＝救われたい このイコールが今 優しく剥がしていくんだよ\堅い理論武装 プライドの過剰包装を\正しさよりも優しさが欲しい そしてそれを受け取れるのは\イルミネーションみたいな 不特定多数じゃなくてただ1人 君であってほしい\かけた言葉で 割れたヒビを直そうとして\足しすぎた熱量で 引かれてしまったカーテン\そんな失敗作を 重ねて 重ねて 重ねて\見つけたいんだいつか 最高の一言一句を\言葉はまるで雪の結晶 君にプレゼントしたとして\時間が経ってしまえば大抵 記憶から溢れ落ちて溶けていって 消えてしまう でも\絶えず僕らのストーリーに 添えられた字幕のように\思い返した時 不意に目をやる時に\君の胸を震わすもの 探し続けたい 愛してるよりも愛が届くまで\もう少しだけ待ってて\言葉など何も欲しくないほど 悲しみに凍てつく夜でも\勝手に君のそばで あれこれと考えてる 雪が溶けても残ってる"]
sentiment_analysis_example(client, lyrics)
ネガティブという結果がでましたね！
確かにネガティブなワードとか感情が多いかなと感じますね。。
こんな風に試すと結構楽しいです♪
まとめ
こんな感じでテキスト分析を試してみました！
いいように使えば、SNSの誹謗中傷とかの制限に役立つサービスなのかなと感じました。設定とか構築とかも簡単で、使いやすくていいなと思いました。
ここまで読んでいただきありがとうございました。
Azureでストレージを使ってみる ～Blobストレージ～
こんにちは！
Azureを勉強中でして、ストレージについて学んだのでアウトプットしようと記事を書いていきます。
本記事では、AzureのBlobストレージに保存した画像をNext.jsで表示する方法をまとめていきます。
Azureでストレージを作成
まずはAzureでストレージを作成していきます。
ストレージアカウントのサービスを開いて作成ボタンをクリックします。
基本的な情報を入力していき作っていきます！
作成後は、コンテナを作成します。
任意の値を設定し、作成を行いますが、今回はアクセスレベルをプライベート以外に設定しておきます。
その後、画像をUPloadしましょう。
先ほど作成したtestをクリックすると、コンテナ画面に遷移するのでそこから画像をアップロードします。
4枚の画像をUPloadしました。
これで画像ストレージ環境の構築は完了です！
Next.jsで画像を表示
以前、AzureのPostgreSQLを使ってみるという記事で、ブログの情報を渡すRESTをFlaskで作成しました。その情報を表示するコードを作成していきます。
※FlaskのCORSを設定しておきます
まず、前回の情報をそのまま返すコードを！
import { useEffect, useState } from 'react';
const BlogList = () => {const [blogs, setBlogs] = useState();
useEffect( () => {async function getBlogs() {setBlogs(data.blogs);}getBlogs();}, );
return (<div><h2>My Blogs</h2><div>{blogs.map( (blog) => (<div key={blog.id}><h2>{blog.name}</h2><img src={blog.image_name} alt={blog.name} /><p>{blog.description}</p><a href={blog.url}>Read more</a></div>))}</div></div>);};
export default BlogList;
実行すると下記のような画面になります！
やはり画像は表示されませんね。。
これをBlobストレージの画像を反映させます。
import axios from 'axios';import { useEffect, useState } from 'react';import Image from 'next/image';
const BlogList = () => {const [blogs, setBlogs] = useState();const [base64Images, setBase64Images] = useState({});
const fetchData = async () => {setBlogs(result.data.blogs);};
const fetchImage = async (imageName) => {const imageUrl = `YOUR URL/CONTENER NAME/${imageName}`;
axios.get(imageUrl, { responseType: 'arraybuffer' }).then(response => {Buffer.from(response.data, 'binary')
setBase64Images(prevState =>}).catch(error => {console.error('Error fetching image:', error);});};
useEffect( () => {fetchData();}, );
useEffect( () => {blogs.forEach(blog => {if (!base64Images[blog.image_name]) {fetchImage(blog.image_name);}});}, [blogs]);
return (<div><h2>My Blogs</h2><div>{blogs.map( (blog) => (<div key={blog.id}><h2>{blog.name}</h2>{base64Images[blog.image_name]${base64Images[blog.image_name]}`}alt={blog.name} width={500} height={300} />}
<p>{blog.description}</p><a href={blog.url}>Read more</a></div>))}</div></div>);};
export default BlogList;
ストレージアカウントから取得するコードはバイナリ形式なのでBase64形式にしてから、Base64Imagesという画像名をキー、値をBase64形式にするステートメントに保存してから出力するという処理を行っています！
意味不ですねｗ
多少画像が崩れていますが、表示させることに成功しました！
これで、サイトの画像をAzureのストレージサービスから呼び出すことができました〇
正直めちゃくちゃつまずきました。。
ただ、その分できたときうれしいですね。
まとめ
こんな感じでストレージアカウントを使っていきました。
なんかデータだったり、画像だったり色々な場所で共有できるのって、ドラえもんの４次元ポケットみたいですね♪ お金はかかりますが。。
ここまで読んでいただきありがとうございました。
AzureでDB操作 ～PostgreSQL～
こんにちは！
Azureを勉強中でして、DBの操作について学んだのでアウトプットしようと記事を書いていきます。
本記事では、AzureのPostgreSQLDBをFlaskで操作する方法をまとめていきます。
AzureでPostgreSQLサービスをスタート
Azureのサイトから「Azure Database for PostgreSQL」から作成を行います。
サブスクリプションやサーバ情報、管理者のパスワード等の必須項目の情報を入力してデプロイします。
デプロイ完了後、データベースを作成します。
「設定」→「データベース」から任意の名前で保存を行います！
次に、接続の情報を取得します。下記の画像の赤くマスキングしているところに情報が載っています！
ローカルからデータベースの接続
他に方法があるのかもしれませんが、ローカルにPostgreSQLをインストールして接続し、テーブル作成の操作を行うという方法を私は採用しています。
PostgreSQLをダウンロードします。
本記事では紹介しませんが、色々なサイトで紹介されているので各々やっていただけると助かります。。
問題なくインストールできますと、「Program Files」配下にPostgreSQLのフォルダーがあるはずです。(widowsの場合) そこから、「PostgreSQL\{バージョン}\pgAdmin 4\runtime\pgAdmin4.exe」を起動します。
pgAdmin4内で「サーバ」を右クリック>「Register」>「server」で「コネクション」にAzureで構築したDBの情報を入力します。
これで接続できるはずです。
今回操作するテーブルは、ブログを管理するものとします
db名から右クリックで「Create Script」で下記コードを実行します。
CREATE TABLE blogs (
id SERIAL PRIMARY KEY,
name VARCHAR(255),
url VARCHAR(255),
image_name VARCHAR(255),
description TEXT
);
これで環境準備完了です。
Flaskでコーディング
このFlaskもRESTとして動かしていきます。
コードは下記のように書きました。
from flask import Flask, request, jsonifyfrom flask_sqlalchemy import SQLAlchemy
app = Flask(__name__)
#下記はAzureのDB情報を入力してくださいuser = "your_username"password = "your_password"dbname = "your_database_name"
db = SQLAlchemy(app)
class Blog(db.Model):__tablename__ = 'blogs'id = db.Column(db.Integer,primary_key=True)name = db.Column(db.String(255),nullable=False)url = db.Column(db.String(255),nullable=False)image_name = db.Column(db.String(255),nullable=False)description = db.Column(db.Text,nullable=False)
@app.route('/blogs', methods=['POST'])def create_blog():data = request.get_json()new_blog = Blog(name=data['name'],url=data['url'],image_name=data['image_name'],description=data['description'])
db.session.add(new_blog)db.session.commit()return jsonify({'message': 'New blog created!'}), 201
@app.route('/blogs', methods=['GET'])def get_blogs():blogs = Blog.query.all()output = []for blog in blogs:blog_data = {'name': blog.name,'url': blog.url,'image_name': blog.image_name,'description': blog.description}output.append(blog_data)return jsonify({'blogs': output})
if __name__ == '__main__':app.run(debug=True)
上記を実行し、下記JsonをPOSTで渡します！
[
{
"name": "Azureの生成AIを試してみた！ ~Azure OpenAI ChatGPT~",
"url": "https://begginerkun.hatenablog.com/entry/2023/12/15/232219",
"image_name": "1.png",
"description": "Azureの生成AIのOpenAIのChatGPTを試用し、Flask言語に連携をして日記の生成を試みた議事録です"
},
{
"name": "Azureの生成AIを試してみた！ ~Azure OpenAI DALL-E-3~",
"url": "https://begginerkun.hatenablog.com/entry/2023/12/16/222604",
"image_name": "2.png",
"description": "Azureの生成AI、DALL-E-3を試用し、Flask言語に連携をして日記の文字から画像生成を試みた議事録です"
},
{
"name": "Azureでサイト公開 ～バックエンド(Flask)～",
"url": "https://begginerkun.hatenablog.com/entry/2024/01/07/172430",
"image_name": "3.png",
"description": "AzureのAzure Web App Serviceを使用して、FlaskをRESTAPIとしての公開を試みた議事録"
},
{
"name": "Azureでサイト公開 ～フロント(Next.js)～",
"url": "https://begginerkun.hatenablog.com/entry/2024/01/10/140951",
"image_name": "4.png",
"description": "AzureのAzure Static Web Appsを使用して、Next.jsをフロントサイドとしての公開を試みた議事録"
}
]
POSTMANを使用してAPIテストをします。
下記のように一つ一つ入力していきます。
データベースにも値が入っているか確認もしておきます！
しっかり登録できてましたね！
次に、GETでデータを取得できるかのAPIテストです。
受け取れてますね！
これでAzureのPostgreSQLを使用して、FlaskのDB操作を行うことができました！
今回はコスト面を考えてPostgreSQLを選択しましたが、コスト面とか色々な側面で色々なDBの選択をするべきですね。。あまりそこらへん考えずに選択してしまったのが今回少し反省です。。
まとめ
本記事でAzureサービスのDB操作を体験することができました。
使ってて、ネットワークからの設定にもよりますがどこからでもアクセスできる点がとても強いなと感じました。クラウド強しですね！
ここまで読んでいただきありがとうございました！
Azureでサイト公開 ～フロント(Next.js)～
こんにちは！
Azureを勉強中でして、サイト公開について学んだのでアウトプットしようと記事を書いていきます。
今回は、前回の続きでバックエンドとして公開したFlaskのAPIと連携したフロントエンドの役割を持ったNext.jsを公開します。
下記サイトを参考にしています。
チュートリアル: Azure Static Web Apps に Next.js ハイブリッド サイトをデプロイする | Microsoft Learn
next.jsを用意する
まずは、next.jsを用意する必要があります。
Node.jsとNext.jsをインストールされている環境で実施する必要があるので、ご注意くださいまし。
#アプリの初期化
npm init next-app@next-12-3-2 --typescript
#フォルダー移動
cd nextjs-app
#実行
npm run dev
※バージョン関連でつまずきやすい箇所です。適宜バージョンを上げる等の対策が必要かもしれません。
下記の画面が表示されたらOKです！
公開準備
ここまで出来たら、公開の準備に入ります。
まず、「next.config.js」のmodule.exportsに下記を追加します。
output: "standalone",
次に、自分がつまずいたところなのですが、Azure上のNode.jsとのバージョン違いでデプロイ時にエラー地獄となりました。「package.json」に下記を追加することで、AzureのNode.jsのバージョンを指定できエラーを解消できました！
"engines": {"node": "18.17.1"}
ここまで出来たら、Githubにリポジトリを作成してpushをします。
ここは省略させてもらいます！
サイト公開作業
AzureのStatic Web Appsを使用してサイトを公開していきます。
プロジェクト名や料金プラン等の必須項目は各々設定してもろて、Githubのリンクは先ほどpushしたリポジトリを選択します。
下記サイトを参考にしてみてください
チュートリアル: Azure Static Web Apps に Next.js ハイブリッド サイトをデプロイする | Microsoft Learn
作成を押すと、デプロイが開始されます。その後、GitActionの実行で状況を確認します。
下記のようになったらデプロイは成功してます。
逆に、下記のようになってたら、デプロイは失敗しているのでエラーログを確認し、修正してみましょう。
話が逸れますが、ここで使用されているのはCI/CDです。
これは、サイト公開前の「解析」「ビルド」「テスト」を実行してくれるものです。
成功したら、サイトを確認してみましょう！
これでサイト公開は成功しましたね♪
Next.jsをフロント動かす
次から前回からの続きとなります！
Next.jsをバックエンドのFlaskと連携してみましょう。
前回のFlaskでのAPIを一度確認してみます。
3人分の年齢、ID、名前を返すJsonでしたね。
これをNext.jsで表示します。
「pages」フォルダーに「test.js」を作成し、下記のように入力します。
import React, { useEffect, useState } from "react";
function UserList() {const [users, setUsers] = useState();useEffect(() => {// FlaskのAPIエンドポイントを指定しますconst apiEndpoint = 'ここにバックエンドのAPIURLを入力';fetch(apiEndpoint).then(data => setUsers(data)).catch(error => console.error('Error:', error));}, );
return (<div>{users.map( (user) => (<div key={user.id}><h2>{user.name}</h2><p>年齢: {user.age}</p><p>ID: {user.id}</p></div>) ) }</div>);}
export default UserList;
できたら、Githubにpushします。そうすることで自動的にAzureへデプロイされます。
ただ、GitActionでエラーが出たら、デプロイ失敗しているので、確認は必須です！
ではサイトを確認します。
しっかりできました。
ただ、これは最低限の要件なので、DBの接続やら他サービスの連携(API)とかになるとさらに複雑になります。ほんと、果てがない。。
まとめ
サイト公開を学ぶことができました。
ここら辺は独学なため、もしかしたら私のやっていることは効率が悪いとか間違っているとかあるかもしれません。ただ、形にはしたのでいい経験にはなっていると思います。というか信じたいです。。
ここまで読んでいただきありがとうございました！
Azureでサイト公開 ～バックエンド(Flask)～
こんにちは！
今、Azureを勉強中の身でして、サイトの公開方法を学んだので、ここでまとめておきます。
本記事では、バックエンドの役割としてFlaskを使い、公開するところまでをまとめます。
Flaskを用意
基本的には、下記公式に手順は詳しく載ってますので、それぞれのアプローチに合わせて参照してみてください。
クイックスタート: Python (Django または Flask) Web アプリを Azure にデプロイする - Azure App Service | Microsoft Learn
因みに、私はVScodeでの方法を採用しています。
この方が楽そうだなっという簡単な理由です。
下記コードをコマンドプロンプト等で入力して、Flaskプロジェクトを作成します。
#gitコードを取得
git clone https://github.com/Azure-Samples/msdocs-python-flask-webapp-quickstart
#プロジェクトディレクトリに移動
cd msdocs-python-flask-webapp-quickstart
#仮想環境を作成
py -m venv .venv
#依存関係をインストール
pip install -r requirements.txt
ここまで出来たら、一度ローカルで確認します！
下記で実行し、127.0.0.1:5000をブラウザでアクセスします。
python ./app.py
ここまででFlaskを構築するところまでは完了です。
次にAzureを使うのですが、VScodeで行ってしまいます。
サイト公開作業
ここでは、VScodeをインストール済みの想定で進めます。
下記サイトでAzureの拡張機能をダウンロードします。
Azure Tools - Visual Studio Marketplace
その後は、公式を参考に進めます。
クイックスタート: Python (Django または Flask) Web アプリを Azure にデプロイする - Azure App Service | Microsoft Learn
個人情報の関係で、作業を載せるのはやめておきます。。
うまくいくとサイトが公開できます。
FlaskをAPIをして使う
Flaskをバックエンドとして使用するので、APIをフロントとつなげるように設計する必要があります。
プロジェクト内の「requirements.txt」に下記を追記します。
flask_restful
flask-cors
さらに下記コードの要素を「app.py」に追記します。
from flask_restful import Resource, Apiimport osfrom flask import (Flask, redirect, render_template, request,send_from_directory, url_for, jsonify)from flask_cors import CORS
このようにコードを書いたら、下記の手順で変更内容をデプロイします！
VScode > Azure拡張機能 > App Services > 自分のプロジェクトを右クリック > Deploy Web App ... > ダイアログのdeployをクリック
しばらくすると下記のような通知が出ます、そうしたら完了です。
APIテスト
それでは、APIのテストを行うため「POSTMAN」というアプリを使用します。
「ドメイン/test」にGETリクエストを送るとjsonを返してくれる動きとなるはずです。
では試してみます。
しっかり返してくれますね！成功です♪
ただ、セキュリティ的には結構弱いので色々直さなければならない点はあります。。
次回はフロントエンドを構築して、組み合わせていきたいと思います。
まとめ
プログラムを作成する際に、サイトを公開する想定で行うと色々と懸念しなきゃエラー地獄にはまります。。そういった点では、このようなサイトを公開する経験はとても大事だし、いい勉強になったかなと思います。
近い内に、フロント部分の公開もまとめていきます！
言語はnext.jsを使用していく予定です。
ここまで読んでいただきありがとうございました！
Azureの生成AIを試してみた！ ~Azure OpenAI DALL-E-3~
こんばんわ！
この前、CHATGPTを試して、文章を生成するところまでは試してみましたね！！
今回は生成した文字を元に画像を生成するということを試していこうと思います。
前回の続きとなるので、下記を参照にしてみてください！
Azureの生成AIを試してみた！ ~Azure OpenAI ChatGPT~ - ketyiaの作ってみた (hatenablog.com)
AzureでDell-3の登録
前回と同じ要領で、AzureOpenAI Studioで「dall-e-3」をデプロイして、APIやエンドポイント情報を取得しておきます！
詳しくは、下記を参照してみてください
クイックスタート: Azure OpenAI Service を使用して画像を生成する - Azure OpenAI | Microsoft Learn
Flaskに組み込んでみる
それでは、Pythonを書いていきます。
前回からの続きと想定をして、index.pyを編集していきます。
もちろん大課金祭りを起こさないためAPI情報は消しますねｗ
このコードを実行すると、GPTの文字生成を実行されるのと同時にその文字を元に画像を生成し、imagesフォルダ内のimage.pngに保存されるはずです。
結果は以下のようになりました！
画像生成できました！
内容にあっている画像を出力してくれました！！
まとめ
今回は前回に引き続き、画像の生成ＡＩを試しました！
使っていて、本当にすごいなと感じました！
色々活用できると面白いなと思います。これからのアプリの成長に期待ですｗ
これからも色々とAzureで遊んでいきたいなと思ってます！
ここまで読んでいただきありがとうございました。
