AI時代的網站與手機App建置與開發Part32 - 使用Azure OpenAI的文字生成功能

 

l  摘要

文字生成或聊天生成功能可以用來生成企畫書, 例如生成[關稅壓力下的汽車或二手車的行銷企畫], 生成[日本全區包含乘車資訊的30天旅遊計畫], 或是[冰島賞極光之旅携帶物品與藥品清單建議]等等, 都是文字生成的實用範例, 協助生成汽車或二手車銷隻員的行銷企畫, 協助旅遊企畫員生成實用旅遊企畫, 甚至生成指定專案類型的程式碼.

 

圖: 文字生成範例

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: 選擇部署文字生成模型的畫面, 請點選左方欲使用的文字生成模型(例如gpt-4.1), 再按下[確認]鍵, 螢幕上就會出現文字生成模型的相關使用資料, 如圖10所示:

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

按下圖10畫面中的[部署]鍵進行部署, 部署完成後就會出現體驗文字生成功能的體驗畫面, 如圖11所示:

圖11: 體驗文字生成功能的體驗畫面

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

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

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

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

</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" placeholder=""                 value="雪山劍俠傳楔子"/>

      <label class="form-label">文字生成提示</label>

    </div>

    <div class="mb-3">

      <button class="btn btn-success" onclick="suggest()">建議</button>

    </div>

    <div class="mb-3">

      <textarea id="result" rows="200" cols="50"                             class="form-control"></textarea>

    </div>

  </div>

  <script>

    async function suggest() {

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

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

//取得用來顯示文字生成結果的HTML元素

      const output = document.getElementById("result");        

      const endpoint = "Azure OpenAI資源端點";

      const deployment = "gpt-4.1";

      const apiVersion = "2025-01-01-preview";  

      const apiKey = "Azure OpenAI資源金鑰";    

 

      try {

        //依據使用者輸入的提示要求文字生成

        const response = await fetch(

          `${endpoint}/openai/deployments/${deployment}/chat/completions?api-version=${apiVersion}`,

          {

            method: "POST",

            headers: {

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

              "api-key": apiKey

            },

            body: JSON.stringify({

              messages: [{ role: "user", content: prompt }],

              max_tokens: 1000

            })

          }

        );

        if (response.ok){                         //如果文字生成成功

          const data = await response.json();     //取得文字生成內容

//顯示文字生成內容    

          output.textContent = data.choices[0].message.content;    

        }

      } catch (err) {                         //捕捉文字生成失敗的錯誤

        output.textContent = "Error: " + err.messae;  //顯示錯誤訊息

      }

    }

  </script>

</body>

</html>

程式碼範例下載網址: https://github.com/CraigIII/AzureOpenAITextGeneration.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 物件偵測演算法的適用場合 : ü   辨識小型物件準確度高的場合 , 例如文件分析或...
閱讀完整內容