Alibaba Cloud Model Studio：10分鐘在網站上增加一個AI助手

package com.aliyun.webdemo.controller;

import com.alibaba.dashscope.app.Application;
import com.alibaba.dashscope.app.ApplicationParam;
import com.alibaba.dashscope.app.ApplicationResult;
import com.alibaba.dashscope.exception.InputRequiredException;
import com.alibaba.dashscope.exception.NoApiKeyException;
import com.google.gson.Gson;
import com.google.gson.JsonObject;
import com.google.gson.JsonParser;
import io.reactivex.Flowable;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.mvc.method.annotation.ResponseBodyEmitter;

import java.util.concurrent.atomic.AtomicInteger;
import com.alibaba.dashscope.utils.Constants;

/**
 * pom 配置依賴項
 * <dependency>
 *   <groupId>com.alibaba</groupId>
 *   <artifactId>dashscope-sdk-java</artifactId>
 *   <!-- 請將 'the-latest-version' 替換為查詢到的最新版本號碼：https://mvnrepository.com/artifact/com.alibaba/dashscope-sdk-java -->
 *   <version>the-latest-version</version>
 * </dependency>
 *
 * 將API Key配置到環境變數 https://www.alibabacloud.com/help/zh/model-studio/developer-reference/configure-api-key-through-environment-variables
 */
@RestController
@RequestMapping("/chatbot")
public class ChatbotController {
  static {
        Constants.baseHttpApiUrl="https://dashscope-intl.aliyuncs.com/api/v1";
    }

    /**
     * 實現 chat 介面，支援流式返回資料
     *
     * @param query
     * @return
     */
    @RequestMapping(value = "/chat", method = RequestMethod.POST)
    public ResponseBodyEmitter streamData(@RequestBody String query) {
        ResponseBodyEmitter emitter = new ResponseBodyEmitter(180000L);
        JsonObject jsonObject = new JsonParser().parse(query).getAsJsonObject();
        try {
            streamCall(emitter, jsonObject.get("prompt").getAsString());
        } catch (NoApiKeyException | InputRequiredException e) {
            e.printStackTrace();
        }

        return emitter;
    }

    /**
     * 調用百鍊應用，封裝流式返回資料
     * 返回資料格式
     * id:1
     * event:result
     * :HTTP_STATUS/200
     * data:{"output":{"session_id":"xxx","finish_reason":"null","text":"相關的問題"}}
     *
     * @param emitter
     * @param query
     * @throws NoApiKeyException
     * @throws InputRequiredException
     */
    public void streamCall(ResponseBodyEmitter emitter, String query) throws NoApiKeyException, InputRequiredException {
        // appId 填入百鍊應用 ID
        ApplicationParam param = ApplicationParam.builder()
                .appId("xxx")
                .prompt(query)
                .incrementalOutput(true)
                .build();

        Application application = new Application();
        Flowable<ApplicationResult> result = application.streamCall(param);
        AtomicInteger counter = new AtomicInteger(0);
        result.blockingForEach(data -> {
            int newValue = counter.incrementAndGet();
            String resData = "id:" + newValue + "\nevent:result\n:HTTP_STATUS/200\ndata:" + new Gson().toJson(data) + "\n\n";
            emitter.send(resData.getBytes(java.nio.charset.StandardCharsets.UTF_8));

            if ("stop".equals(data.getOutput().getFinishReason())) {
                emitter.complete();
            }
        });

    }
}

from flask import Flask, request, render_template, Response
from http import HTTPStatus
from dashscope import Application
import json
import dashscope

dashscope.base_http_api_url = 'https://dashscope-intl.aliyuncs.com/api/v1'
app = Flask(__name__)

@app.route("/")
def home(path=""):
    """
    首頁
    """
    return render_template("index.html")


def call_with_stream(query):
    """
    流式調用百鍊 API
    需要將API Key配置到環境變數
    https://www.alibabacloud.com/help/zh/model-studio/developer-reference/configure-api-key-through-environment-variables
    返回資料格式
    id:1
    event:result
    :HTTP_STATUS/200
    data:{"output":{"session_id":"xxx","finish_reason":"null","text":"相關的問題"}}
    """
    # appId 填入百鍊應用 ID
    responses = Application.call(
        app_id="xxx",
        prompt=query,
        stream=True,
        incremental_output=True,
    )
    i = 0
    for response in responses:
        if response.status_code != HTTPStatus.OK:
            print(
                "request_id=%s\n output=%s\n usage=%s\n"
                % (response.request_id, response.output, response.usage)
            )
        else:
            data = (
                "id:"
                + str(i)
                + "\nevent:result\n:HTTP_STATUS/200\ndata:"
                + json.stringfy(response)
                + "\n\n"
            )
            yield data


@app.route("/chat", methods=["POST"])
def create():
    raw_data = request.data
    data = json.loads(raw_data.decode("utf-8"))

    return Response(
        call_with_stream(data["prompt"]), mimetype="application/octet-stream"
    )


if __name__ == "__main__":
    app.run(debug=True, port=8080)

<?php  
// 開始新會話或恢複現有會話
session_start();

// 非請求 退出
if(!isset($_SERVER['REQUEST_METHOD'])){
    exit;
}

// 初始化首頁
if ($_SERVER['REQUEST_METHOD'] === 'GET') {  
    home();
}  

// AI助手post請求
if ($_SERVER['REQUEST_METHOD'] === 'POST') {  
    chat();
}  

/**
 * 展示首頁
 * 首頁內容請參考上述前端代碼
 * 註：測試的時候請將修改前端代碼中endpoint為"/"
 */
function home() {
    // HTML檔案路徑
    $file = 'home.html';

    if (file_exists($file)) {  
        // 檔案存在，則顯示內容
        header('Content-Type: text/html');
        readfile($file);
    } else {  
        // 提示檔案不存在
        echo "404 Not Found. The file does not exist.";  
    }  
}

/**
 * AI助手post請求
 */
function chat() {  
    /**
     * 佈建要求的URL和百鍊API-KEY，將<APP_ID>替換為百鍊應用ID
     */
    $url = 'https://dashscope-intl.aliyuncs.com/api/v1/apps/<APP_ID>/completion'; // 請求的URL
    $apiKey = 'sk-xxx';

    /**
     * 佈建要求頭資訊
     */
    $headers = [ // 要求標頭數組
        'Authorization: Bearer ' . $apiKey, // 認證頭部
        'Content-Type: application/json', // 內容類型
        'X-DashScope-SSE: enable' // SSE啟用標誌
    ];

    // 初始化提示詞為空白字串
    $prompt = ''; 

    // 擷取輸入資料流的內容
    $json = file_get_contents('php://input'); 
    // 嘗試將JSON轉換為關聯陣列
    $data = json_decode($json, true);
     // 檢查JSON解析是否成功
     if (json_last_error() === JSON_ERROR_NONE) {
         $prompt = $data['prompt'] ?? null; // 提取prompt欄位值
     }
   
    /**
     * 構建請求體
     */
    $requestBody = [ // 請求體數組
        'input' => ['prompt' => $prompt], // 輸入項
        'parameters' => ['incremental_output' => true], // 參數設定
        'debug' => new stdClass(), // 調試選項（Null 物件）
    ];

    // 流式調用百鍊 API
    call_with_stream($url, $headers, $requestBody);
} 

// 流式調用百鍊 API
function call_with_stream($url, $headers, $requestBody){
    /**
     * 初始化cURL會話並設定相關屬性
     */
    $ch = curl_init();

    curl_setopt_array($ch, [ // 設定cURL選項
        CURLOPT_URL => $url, // 目標URL
        CURLOPT_POST => true, // 使用POST方法
        CURLOPT_POSTFIELDS => json_encode($requestBody), // POST資料
        CURLOPT_HTTPHEADER => $headers, // 要求標頭
        CURLOPT_WRITEFUNCTION => function ($curl, $data) { // 自訂寫回調
            echo $data; // 輸出資料
            ob_flush(); // 重新整理輸出緩衝
            flush(); // 重新整理所有輸出緩衝
            return strlen($data); // 返回資料長度
        },
        CURLOPT_BUFFERSIZE => 128, // 緩衝區大小
        CURLOPT_TIMEOUT => 300, // 逾時時間
        CURLOPT_RETURNTRANSFER => true, // 是否返回傳輸資料
        CURLOPT_HEADER => false // 不包含HTTP頭部
    ]);

    /**
     * 執行cURL會話並擷取響應
     */
    $response = curl_exec($ch);

    /**
     * 錯誤處理及響應輸出
     */
    if (curl_errno($ch)) { // 檢查是否存在cURL錯誤
        http_response_code(500); // 設定HTTP響應狀態代碼為500
        echo 'Curl error: ' . curl_error($ch); // 輸出錯誤資訊
    } else {
        echo $response; // 輸出響應結果
    }

    curl_close($ch); // 關閉cURL會話
}
?>