AI時代的網站與手機App建置與開發Part36 - 使用Azure OpenAI的影片生成功能
l 摘要
Azure OpenAI支援的影片生成功能可以用來生成商品介紹短片(例如房地產, 汽車, 機車, 等等), 內容介紹短片, 測試不同影片的巿場反應, 教學短片, 電影預告或動畫短片, 電腦遊戲開發, 旅遊導覽, 或是快速呈現概念與想法, 短短幾分鐘就可以生出需要的影片, 相較於廣告工作室的製作的影片, 成本更是低廉. 例如輸入以下的內容當做提示:[飛行中的LABUBU與台北101大樓], 或是[卡皮巴拉與動物園導覽]等等, 都是影片生成的典型範例.
圖: 使用Azure OpenAI影片生成功能生成的企鵝影片範例
l 使用Azure OpenAI服務
欲使用Azure OpenAI資源實踐文字生成, 首先要登入Microsoft Azure Portal(網址: https://portal.azure.com), 登入成功後您會看到如圖1的畫面:
圖1:
Microsoft Azure Portal建立資源的畫面
點選圖1中的[建立資源], 螢幕就會出現如圖2的畫面
點選圖2畫面左方的[AI應用程式與代理程式], 再點選右邊的[Azure OpenAI], 您將會看到如圖3的畫面:
請於圖3畫面建立新的或選擇資源群組或選擇現有的資源群組, 選擇建立群組的區域, 收費層級, 然後點選[下一頁]鍵, 您將會看到圖4的畫面:
圖4: 設定Azure OpenAI資源網路安全性的畫面
請於圖4畫面中選擇[所有網路], 點選[下一頁], 您就會看到設定分類標籤的畫面, 如圖5所示:
圖6: 建立Azure OpenAI資源的畫面
請點選[建立]鍵執行建立Azure OpenAI資源, 建立完成後請瀏覽至建立妥的Azure
OpenAI資源, 您將會看到如圖7的畫面
點選[探索Azure AI Foundry入口網站], 再點選左邊功能表的[影片]功能, 您將會看到如圖8的畫面:
圖8: 影片生成功能的體驗館
點選[立即部署]功能, 您會看到如圖9的畫面:
按下圖10畫面中的[部署到選取的資源]鍵進行部署, 部署完成後就會出現體驗影片生成功能的體驗畫面, 如圖11所示:
完成生成影片工作之後, 點選生成的影片上方的的[檢視程式碼]連結, 可以看到叫用影片生成功能的範例程式碼, 如圖12所示:
以下就是使用JavaScript叫用Azure OpenAI影片生成功能的網頁程式
<!DOCTYPE html>
<html>
<head>
<title>Azure OpenAI - Plain JS Example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/
bootstrap@5.3.3/dist/css/bootstrap.min.css">
<style>
html, body {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div class="container" style="width:40%;height:100%">
<h3 class="mb-3
text-center">影片生成</h3>
<div class="form-floating
mb-3">
<input id="prompt"
class="form-control" value="飛行的Labubu"
placeholder=""/>
<label class="form-label">影片生成提示</label>
</div>
<div class="mb-3">
<button class="btn
btn-success" onclick="generateVideo()">
影片生成</button>
</div>
</div>
<script>
const endpoint = "Azure OpenAI影片生成功能的端點";
const apiKey = "Azure OpenAI影片生成功能的金鑰";
const model = 'sora';
const apiVersion = "preview";
// 叫用createVideoGenerationJob函式生成影片,
// 再叫用pollJobStatus函式等待影片生成完成
async function generateVideo() {
// 取得使用者輸入的提示
const prompt = document.getElementById("prompt").value;
// 利用使用者輸入的提示生成影片
const jobId
= await createVideoGenerationJob(prompt);
if (!jobId)
// 生成影片失敗
return;
// 結束函式
await pollJobStatus(jobId); // 非同步等待影片生成完成
};
// 叫用Azure OpenAI影片生成功能的函式
async function createVideoGenerationJob(prompt) {
try {
// 叫用Azure OpenAI影片生成功能
const response = await fetch(`${endpoint}/openai/v1/video
/generations/jobs?api-version=${apiVersion}`,
{
method: 'POST',
headers:
{
'Content-Type': 'application/json',
'api-key': apiKey,
},
body: JSON.stringify({
"model": model,
"prompt": prompt,
"n_variants": "1",
"n_seconds": "5",
"height": "1080",
"width": "1920",
}),
});
if (!response.ok) {
// 叫用影片生成功能失敗
throw new
Error(
`HTTP
error! Status: ${response.status}`);
}
const data = await response.json();
// 取得影片生成結果
console.log('Video
generation job created:', data);
return data.id;
// 傳回執行影片生成功能的jobId
} catch (error) {
// 捕捉執行時期錯誤
console.log(`Error
creating video generation
job:${error.message}`);
// 顯示錯誤訊息
}
}
// 查詢影片生成工作進度
async function pollJobStatus(jobId) {
try {
// 查詢指定jobId的影片生成工作的進度
const response = await fetch(`${endpoint}/openai/v1/video/
generations/jobs/${jobId}?api-version=${apiVersion}`,
{
method: 'GET',
headers:
{
'api-key': apiKey,
},
});
if (!response.ok) {
// 查詢失敗
throw new
Error(
`HTTP
error! Status: ${response.status}`); // 抛出例外
}
const data = await response.json();
// 取得查詢結果
console.log('Job
status:', data.status);
if (data.status === 'succeeded')
{ // 如果狀態為succeeded
// 下載生成的影片
downloadGeneratedVideo(data.generations[0].id);
}
else if (data.status
=== 'failed') { // 如果狀態為failed
throw new
Error('Video generation failed'); // 抛出例外
}
}
catch (error) {
// 捕捉執行時期錯誤
console.error(
'Error
polling job status:', error); // 顯示錯誤訊息
}
}
// 負責下載生成的影片的函式
async function downloadGeneratedVideo(generationId){
// 取得生成的影片的下載網址
let url = `${endpoint}/openai/v1/video/generations/
${generationId}/content/video?api-version=${apiVersion}`;
try {
// 依據下載網址下載生成的影片
const response = await fetch(url,
{
method:"GET",
headers:{
"Authorization": apiKey,
"Content-Type": "application/json"
}});
if (!response.ok) {
// 如果下載失敗
throw new
Error(
`HTTP
error! Status: ${response.status}`); // 抛出例外
}
const blob = await response.blob();
// 取得生成的影片的內容
// 依據生成的影片內容建立影片網址
const videoUrl
= window.URL.createObjectURL(blob);
// 建立<a>超連結元素
const link
= document.createElement('a');
link.href = videoUrl;
// 設定<a>超連結元素的href屬性
// 設定下載影片的檔案名稱
link.download
= 'sora_generated_video.mp4';
// 將<a>超連結元素加入到顯示的網頁文件document.body.appendChild(link);
link.click();
// 點選<a>超連結元素
// 將<a>超連結元素從顯示的網頁文件移除document.body.removeChild(link);
// 釋放生成的影片內容的網址window.URL.revokeObjectURL(url);
}
catch (error) {
// 捕捉執行時期錯誤
console.error(
'Error
downloading video:', error.message);//顯示錯誤訊息
}
}
</script>
</body>
</html>
留言
張貼留言