AI時代的網站與手機App建置與開發Part35 - 使用Azure OpenAI的圖片生成功能

 l  摘要

Azure OpenAI支援的圖片生成功能可以用來生成企畫需要使用的海報, LOGO, 文宣或報告用的圖片, 網站使用的圖案, 或是日常生活需要用到的節日祝賀卡片, 既精巧又迅速確實, 短短幾分鐘就可以生出需要的圖片, 相較於人工繪製, 成本更是低廉. 例如輸入以下的內容當做提示:[LABUBU與台北101大樓], 或是[請生成包括企鵝, 駝鹿, 與聖誕老人的聖誕卡片]等等, 都是圖片生成的典型範例.

 

圖: 使用Azure OpenAI圖片生成功能生成的聖誕卡範例

l  使用Azure OpenAI服務

欲使用Azure OpenAI資源實踐文字生成, 首先要登入Microsoft Azure Portal(網址: https://portal.azure.com), 登入成功後您會看到如圖1的畫面:

圖1: Microsoft Azure Portal建立資源的畫面

點選圖1中的[建立資源], 螢幕就會出現如圖2的畫面

圖2: 建立Azure OpenAI資源的畫面

點選圖2畫面左方的[AI應用程式與代理程式], 再點選右邊的[Azure OpenAI], 您將會看到如圖3的畫面:

圖3: 輸入Azure OpenAI資源的基本資訊

請於圖3畫面建立新的或選擇資源群組或選擇現有的資源群組, 選擇建立群組的區域, 收費層級, 然後點選[下一頁]鍵, 您將會看到圖4的畫面:

圖4: 設定Azure OpenAI資源網路安全性的畫面

請於圖4畫面中選擇[所有網路], 點選[下一頁], 您就會看到設定分類標籤的畫面, 如圖5所示:

圖5: 設定分類標籤的畫面, 請點選[下一頁]繼續, 您將會看到如圖6的畫面:

圖6: 建立Azure OpenAI資源的畫面

請點選[建立]鍵執行建立Azure OpenAI資源, 建立完成後請瀏覽至建立妥的Azure

OpenAI資源, 您將會看到如圖7的畫面

圖7: Azure OpenAI資源管理畫面

點選[探索Azure AI Foundry入口網站], 再點選左邊功能表的[影像]功能, 您將會看到如圖8的畫面:

圖8: 影像生成功能的體驗館

點選[建立部署]功能, 您會看到如圖9的畫面:

圖9: 選擇部署影像生成模型的畫面, 請點選左方欲使用的影像生成模型(例如dalle-e-3), 再按下[確認]鍵, 螢幕上就會出現影像生成模型的相關使用資料, 如圖10所示:

圖10: 檢視欲部署的影像生成模型的詳細資料

按下圖10畫面中的[部署到選取的資源]鍵進行部署, 部署完成後就會出現體驗影像生成功能的體驗畫面, 如圖11所示:

圖11: 體驗影像生成功能的體驗畫面

點選圖11畫面中的[檢視程式碼], 可以看到叫用影像生成功能的範例程式碼, 如圖12所示:

圖12: 檢視叫用影像生成功能的範例程式碼的畫面. 請點選畫面中的[金鑰認証]頁籤, 在畫面的下方就可以看到叫用影像生成功能的諯點與金鑰, 我們需要這兩個資訊以製作叫用影像生成功的程式:

以下就是使用JavaScript叫用Azure OpenAI影像生成功能的網頁程式

<!DOCTYPE html>

<html>

<head>

  <title>Azure OpenAI Image Example</title>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/

npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" >

</head>

<body>

    <div class="container" style="width:40%">

      <h3 class="mb-3 text-center">圖片生成</h3>  

      <div class="form-floating mb-3">

        <input id="prompt" class="form-control"

value="LABUBU與台北101大樓" placeholder=""/>

        <label class="form-label">圖片生成提示</label>

      </div>

      <div class="mb-3">

        <button id="generate" class="btn btn-success"

onclick="generateImage()">圖片生成</button>

      </div>

      <div class="mb-3">

        <img id="result" width="512" />      

      </div>

    </div>

  <script>

    const endpoint = "Azure OpenAI的圖片生成功能的端點";

    const deployment = "dall-e-3"; 

    const apiVersion = "2024-04-01-preview";  

    const apiKey = "Azure OpenAI的圖片生成功能金鑰";    

 

    // 叫用Azure OpenAI的圖片生成功能的函式

    async function generateImage() {

      // 取得使用者輸入的提示

const prompt = document.getElementById("prompt").value;  

      // 叫用Azure OpenAI的圖片生成功能

      try {

          const response = await fetch(

          `${endpoint}/openai/deployments/${deployment}/

images/generations?api-version=${apiVersion}`,

          {

            method: "POST",

            headers: {

              "Content-Type": "application/json",

              "api-key": apiKey

            },

            body: JSON.stringify({

              prompt: prompt,

              model:deployment,

              n:1,

              style:"vivid",

              quality:"standard",

            })

          }

        );

        if (response.ok){                           // 如果呼叫成功

          const result = await response.json();     // 取得呼叫結果

          // 顯示Azure OpenAI生成的圖片

document.getElementById("result").src=result.data[0].url;  

        }    

      }

      catch(err) {                // 捕捉呼叫 Azure OpenAI功能的錯誤

        alert(err.message);       // 顯示呼叫 Azure OpenAI功能的錯誤

      }        

    }

  </script>

</body>

</html>

程式碼範例下載網址: https://github.com/CraigIII/AzureOpenAIImageGeneration.git

留言

張貼留言

這個網誌中的熱門文章

AI時代的網站與手機App建置與開發Part27 - ML.NET與物件偵測

圖片
  ·        摘要 在自動駕駛的無人車和無人機風風火火出現在日常生活的應用的現今 , 物件偵測技術的應用也日益普及 , 例如自駕車必須要能夠偵測並判斷車輛前方的物體 , 當然最近眾人關注的人形機器人 , 也必須重度依賴物件偵測技術 . 圖 : 物件偵測示意圖 在本篇文章中 , 我們將使用 Visual Studio 2022, 搭配 Microsoft ML.NET 執行物件偵測 . ·        準備訓練資料 首先請參考 [ 使用 VoTT 為物件偵測標記影像 ] 這篇文件的說明 , 為欲偵測的圖片內容進行標示的動作 . 您可以標示多張內含欲辨識的內容 ( 例如 : 汽車 , 機車 , 狗 , 貓 , 紅綠燈 , 交通號誌等等 ) 的圖片 . 例如我們想辨識以下圖片中的停止號誌 : 圖: 內含停止號誌的圖片 就可以使用 Microsoft Visual Object Tagging Tool 標示出圖中 Stop 號誌的位置 , 得到內容位置資訊的 JSON 文件 , 如下所示 : {     "asset": {         "format": "jpg",         "id": "3a74b9294f2f787bf2abe678f6a43231",         "name": "untitled-photo-3d6zCZ4lpBE-unsplash.jpg",         "path": "file:E:/temp/Stop-Signs/untitled-photo-3d6zCZ4lpBE-unsplash.jpg",         "size": {  ...
閱讀完整內容

AI時代的網站與手機App建置與開發Part24 - ML.NET與圖片異常偵測

圖片
  ·        摘要 將異常偵測應用在圖片資料能夠替代人工進行產品的瑕疵檢視 , 例如檢視食物是否腐敗 , 外型破裂 , 研判 X 光片的內容是否異常 , 或是判斷商品的包裝是否破損等等 , 對於 24 小時不間斷的生產線能夠提供重要的品管支援 . 圖 : 圖片異常偵測示意圖 在本篇文章中 , 我們將使用 Microsoft ML.NET 支援的 ResNet50 預訓練模型 (Pre-Trained Model) 執行圖片的異常偵測 , 期能利用 AI 模型支援 24 小時不間斷的自動化作業 . ·        準備訓練資料 首先請啟動瀏覽器 , 瀏覽至 Cloud and Non-Cloud Images(Anomaly Detection, 下載訓練圖片資料集 ( 下載網址 : https://www.kaggle.com/datasets/ashoksrinivas/cloud-anomaly-detection-images?resource=download ). 圖 1 所示即為下載得到的圖片資料集的部分內容 : 圖 1: 訓練圖片資料集的部分內容 請將訓練圖片加入到 Visual Studio 專案中名稱為 images 資料夾中 , 並到 [ 屬性 ] 視窗將所有的訓練圖片的 [ 複製到輸出目錄 ] 屬性的內容值設定為 : 有更新時才複製 . ·        準備預訓練模型 請啟動瀏覽器 , 瀏覽至 ONNX Model Zoo, 下載支援圖片辨識的預訓練模型 ( 下載網址 : GitHub - onnx/models: A collection of pre-trained, state-of-the-art models in the ONNX format ), 請下載名稱為 resnet50-v2-7.onnx 的預訓練模型 . 請將下載妥的預訓練模型加入到 Visual Studio 專案中名稱為 PreTrainedModel 資料夾中 , 並到 [ 屬性 ] 視窗將預訓練模型檔案的 [ 複製到輸出目錄...
閱讀完整內容

AI時代的網站與手機App建置與開發Part28 - 使用YOLO模型進行物件偵測

圖片
  l   摘要 應用程式要提供物件偵測功能 , 除了能夠使用 Microsoft ML.NET 本身的物件偵測模型 ( 請參考 : AI 時代的網站與手機 App 建置與開發 Part27 - ML.NET 與物件偵測 的說明 ) 以外 , 也可以利用 SSD(Single Shot MultiBox Detector) 或 YOLO(You Only Look Once) 等演算法提供即時的物件偵測功能 . 圖 : YOLO 梗圖 ·        認識 SSD 與 YOLO 演算法 SSD 和 YOLO 演算法都是用來執行物件偵測常用的做法 , 其主要特性比較如表 1 的說明 : Feature SSD YOLO 辨識效率 快 ( 較 R-NN 快 , 較 YOLO 慢 ) 非常快 , 適合即時 (real-time) 作業 準確度 辨識小型物件準確度佳 辨識大型物件準確度佳 複雜度 中等 相對簡單 辨識圖片大小 支援 版本越高支援越好 表 1: SSD 和 YOLO 演算法主要特性比較 SSD 與 YOLO 物件偵測演算法的適用場合 ·         YOLO 物件偵測演算法的適用場合 : ü   即時運算 (Real-time) 程式 , 例如監視器 , 自動駕駛交通工具 , 機器人 ü   辨識速度很關鍵的場合 ·         SSD 物件偵測演算法的適用場合 : ü   辨識小型物件準確度高的場合 , 例如文件分析或...
閱讀完整內容