大模型API與前端的結合使用

海上华帆發表於2024-09-12
大模型API前端

大模型API與Flask專案示例

一、輸入問題交給後臺處理

獲取表單GET，透過模版表單將問題提交給後臺POST
模版檔案apis.html如下：

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='initinal-scale=1.0'>
    <title> API➕Flask</title>
  </head>
  <body>
    <h1>API➕Flask專案示例</h1>
    <form action='/apis' method='POST'>
      <label for='question'>請輸入問題：</label>
      <input type='text' name='question' id='question' required>
      <button type='submit'>提交</button>
    </form> 
    
    {% if response %}
      <h1>Assistant's answer:</h1>
      {{ response }}
    {% endif %}
  </body>
</html>

二、後臺接入API獲得回答

從前端表單的提交request獲取問題question
帶問題接入大模型API獲得回答
LLMapi.py程式碼如下：

from zhipuai import ZhipuAI

def get_response_from_model(question):
  client = ZhipuAI(api_key='xx')
  response = client.chat.completions.create(
            model = 'glm-4-plus',
            messages = [{'role': 'user', 'content': question}],
            )
  return response.choices[0].message.content

三、將回答渲染後返回頁面

flask專案檔案apis.py如下：

from flask import Flask, request
from LLMapi import get_response_from_model

app=Flask(__name__)

@app.route('/apis', methods=['GET', 'POST'])
def apis():
  response = None
  if request.method == 'POST':
    question = request.form['question']
    response = get_response_from_model(question)
    return render_template('apis.html', response=response)
  return render_template('apis.html', response=response)
  
if __name__ == '__main__':
  app.run(debug=False)

備註：flask專案檔案結構，apis.py和LLMapi.py同屬專案檔案根目錄下，apis.html在專案檔案的子資料夾templates中。

相關文章