admin 管理员组

文章数量: 887021

 

        大语言模型的应用大多数采用python 语言实现，为了与其它应用结合，最简单的方法就是采样网页 RESTful API 服务。目前流行的Python 的Web 服务是FastAPI。本文记录了一个简单LLM 对话FastAPI 的网站服务的实验过程。

界面

安装

安装如下两个主要模块

pip install fastapi 
pip install uvicorn

文件目录结构

FastAPI 具有固定的目录结构，Templates 中包含了index.hml

static 文件夹

,static 中包含了js,css,images等文件夹。

主程序（main.py)

import asyncio
import nest_asyncio
from langchain_core.prompts import PromptTemplate
from langchain.chains import LLMChain
from langchain.chat_models import ErnieBotChat
from pydantic import BaseModel
nest_asyncio.apply()
llm= ErnieBotChat(model_name='ERNIE-Bot', #ERNIE-Bot
                    ernie_client_id='xxxxxxxx',
                    ernie_client_secret='xxxxxxxxxxx',
                    temperature=0.75,
                    )
template = """You are a nice chatbot having a conversation with a human.
New human question: {question}
Response:"""
prompt = PromptTemplate.from_template(template)
# Notice that we need to align the `memory_key`
conversation = LLMChain(
    llm=llm,
    prompt=prompt,
    verbose=True,
)
class Prompt(BaseModel):
    Method: str
    Message:str  
    
    
app = FastAPI()
app.mount("/static", StaticFiles(directory="static"), name="static")
templates = Jinja2Templates(directory="templates")
@app.get("/")
async def root(request: Request):
   # return {"message": "Hello, World!"}
 
   return templates.TemplateResponse("index.html",{
            "request": request
        })
@app.post("/generate/")
def generate(prompt:Prompt):
    print(prompt)
    AIresponse=conversation.predict(question=prompt.Message)
    response=prompt
    response.Message=AIresponse
    print(response)
    return {"response": response}
async def run_server():
    uvicorn.run(app, host="localhost", port=8000)

if __name__ == "__main__":
    loop = asyncio.get_event_loop()
    loop.run_until_complete(run_server())

注意：search_kwargs 很重要

search_kwargs 是搜索文档的数量， 当您将“k”设置为 2 时，检索器将仅返回前 2 个最相关的文档。如果将“k”设置为 3，它将返回前 3 个最相关的文档。在memory中，每一条对话是一个文档。所有要K要设置大一点，可以引用多条对话，获取历史信息。

网页：

前端使用bootstrap 架构，设计了chat.css.

<!DOCTYPE html>
<html>

<head>
    <title>FastAPI Example</title>
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
    <link rel="stylesheet" href="static/css/chat.css">
    <link rel="stylesheet" href="static/css/font-awesome.min.css">
    <link rel="stylesheet" href="static/font/bootstrap-icons.css">
    <script src="static/js/jquery-3.6.0.min.js"></script>
    <script src="static/js/bootstrap.min.js"></script>
    <script src="static/js/moment.js"></script>
    <style>
        .form-outline i {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
        }

        .chat {
            height: 480px;
            overflow-y: scroll;
        }
    </style>
    <script>
        function InsertPrompt(message) {
            var message_li = document.createElement("li");
            message_li.setAttribute("class", "clearfix");
            var message_data = document.createElement("div")
            message_data.setAttribute("class", "message-data");
            var message_data_time = document.createElement("span")
            message_data_time.setAttribute("class", "message-data-time")
            const timeElapsed = Date.now();
            const today = new Date(timeElapsed);
            message_data_time.innerText = moment(today).format('LLL')
            message_data.appendChild(message_data_time);
            var message_content = document.createElement("div")
            message_content.setAttribute("class", "message my-message")
            message_content.innerText = message;
            message_li.appendChild(message_data)
            message_li.appendChild(message_content)
            $("#chat").append(message_li)
        }

        function InsertAIResponse(message) {
            var message_li = document.createElement("li");
            message_li.setAttribute("class", "clearfix");
            var message_data = document.createElement("div")
            message_data.setAttribute("class", "message-data text-right");
            var message_data_time = document.createElement("span")
            message_data_time.setAttribute("class", "message-data-time")
            const timeElapsed = Date.now();
            const today = new Date(timeElapsed);
            message_data_time.innerText = moment(today).format('LLL')
            message_data.appendChild(message_data_time);
            var message_image = document.createElement("img")
            message_image.setAttribute("src", "static/images/chatGPT.jpg")
            message_image.setAttribute("alt", "avatar")
            message_data.appendChild(message_image);
            var message_block = document.createElement("div")
            message_block.setAttribute("class","d-flex justify-content-end")
            var message_content = document.createElement("div")
            message_content.setAttribute("class", "message other-message align-items-start ")
            message_content.innerText = message;
            message_block.append(message_content)
            message_li.appendChild(message_data)
            message_li.appendChild(message_block)
            $("#chat").append(message_li)
        }

        function Send() {
            console.log("Send");
            messageContent = $("#Message").val();
            InsertPrompt(messageContent)
            console.log(messageContent)
            var parameter = {
                Method: "SendMessage",
                Message: messageContent
            }
            $.ajax({
                url: '/generate',
                type: 'post',
                contentType: "application/json",
                dataType: "json",
                data: JSON.stringify(parameter),
                success: function (res) {
                    response = res.response
                    console.log(response.Message);
                    InsertAIResponse(response.Message)
                    $('#scroll-to-bottom').scrollTop($('#scroll-to-bottom')[0].scrollHeight);
                }
            });

        }
    </script>
</head>

<body>

    <div class="container">
        <div class="row clearfix">
            <div class="col-lg-8">
                <h2 class="text-info">LLM</h2>
                <div class="card ">

                    <div class="chat" id="scroll-to-bottom">
                        <div class="chat-history">
                            <ul class="m-b-0" id="chat">
                                <li class="clearfix">
                                    <div class="message-data text-right">
                                        <span class="message-data-time">10:10 AM, Today</span>
                                        <img src="static/images/chatGPT.jpg" alt="avatar">
                                    </div>
                                    <div class="text-right">
                                    <div class="message other-message "> 你好！，我有什么能帮到你？ </div>
                                  </div>
                                </li>

                            </ul>

                        </div>

                    </div>

                </div>

            </div>
            <div class="col-lg-4">
                <h2 class="text-info">Message</h2>
                <textarea class="form-control" id="Message" rows="10" placeholder="Message *"
                    style="line-height:initial"></textarea>
                <div class="text-right">
                    <button class="btn btn-info right-aligent" style="margin: 10px;" onclick="Send()">Send</button>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

css(chat.css)

body{
    background-color: #f4f7f6;
    margin-top:20px;
}
.card {
    background: #fff;
    transition: .5s;
    border: 0;
    margin-bottom: 30px;
    border-radius: .55rem;
    position: relative;
    width: 100%;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
}
.chat-app .people-list {
    width: 280px;
    position: absolute;
    left: 0;
    top: 0;
    padding: 20px;
    z-index: 7
}

.chat-app .chat {
    margin-left: 280px;
    border-left: 1px solid #eaeaea
}

.people-list {
    -moz-transition: .5s;
    -o-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s
}

.people-list .chat-list li {
    padding: 10px 15px;
    list-style: none;
    border-radius: 3px
}

.people-list .chat-list li:hover {
    background: #efefef;
    cursor: pointer
}

.people-list .chat-list li.active {
    background: #efefef
}

.people-list .chat-list li .name {
    font-size: 15px
}

.people-list .chat-list img {
    width: 45px;
    border-radius: 50%
}

.people-list img {
    float: left;
    border-radius: 50%
}

.people-list .about {
    float: left;
    padding-left: 8px
}

.people-list .status {
    color: #999;
    font-size: 13px
}

.chat .chat-header {
    padding: 15px 20px;
    border-bottom: 2px solid #f4f7f6
}

.chat .chat-header img {
    float: left;
    border-radius: 40px;
    width: 40px
}

.chat .chat-header .chat-about {
    float: left;
    padding-left: 10px
}

.chat .chat-history {
    padding: 20px;
    border-bottom: 2px solid #fff
}

.chat .chat-history ul {
    padding: 0
}

.chat .chat-history ul li {
    list-style: none;
    margin-bottom: 30px
}

.chat .chat-history ul li:last-child {
    margin-bottom: 0px
}

.chat .chat-history .message-data {
    margin-bottom: 15px
}

.chat .chat-history .message-data img {
    border-radius: 40px;
    width: 40px
}

.chat .chat-history .message-data-time {
    color: #434651;
    padding-left: 6px
}

.chat .chat-history .message {
    color: #444;
    padding: 18px 20px;
    line-height: 26px;
    font-size: 16px;
    border-radius: 7px;
    display: inline-block;
    position: relative
}

.chat .chat-history .message:after {
    bottom: 100%;
    left: 7%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-bottom-color: #fff;
    border-width: 10px;
    margin-left: -10px
}

.chat .chat-history .my-message {
    background: #efefef
}

.chat .chat-history .my-message:after {
    bottom: 100%;
    left: 30px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-bottom-color: #efefef;
    border-width: 10px;
    margin-left: -10px
}

.chat .chat-history .other-message {
    background: #e8f1f3;
    text-align: right
}

.chat .chat-history .other-message:after {
    border-bottom-color: #e8f1f3;
    left: 93%
}

.chat .chat-message {
    padding: 20px
}

.online,
.offline,
.me {
    margin-right: 2px;
    font-size: 8px;
    vertical-align: middle
}

.online {
    color: #86c541
}

.offline {
    color: #e47297
}

.me {
    color: #1d8ecd
}

.float-right {
    float: right
}

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0
}

@media only screen and (max-width: 767px) {
    .chat-app .people-list {
        height: 465px;
        width: 100%;
        overflow-x: auto;
        background: #fff;
        left: -400px;
        display: none
    }
    .chat-app .people-list.open {
        left: 0
    }
    .chat-app .chat {
        margin: 0
    }
    .chat-app .chat .chat-header {
        border-radius: 0.55rem 0.55rem 0 0
    }
    .chat-app .chat-history {
        height: 300px;
        overflow-x: auto
    }
}

@media only screen and (min-width: 768px) and (max-width: 992px) {
    .chat-app .chat-list {
        height: 650px;
        overflow-x: auto
    }
    .chat-app .chat-history {
        height: 600px;
        overflow-x: auto
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
    .chat-app .chat-list {
        height: 480px;
        overflow-x: auto
    }
    .chat-app .chat-history {
        height: calc(100vh - 350px);
        overflow-x: auto
    }
}

与大语言模型的连接

（待续）

本文标签： 界面 简单 网页 ChatGpt

版权声明：本文标题：简单的chatGPT 网页界面 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1719238401h714412.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。