简单的chatGPT 网页界面

姚家湾

已于 2024-05-19 09:45:33 修改

阅读量902

点赞数 7

文章标签： fastapi chatgpt

于 2024-05-17 07:52:19 首次发布

本文链接：https://blog.csdn.net/yaojiawan/article/details/137906788

版权

大语言模型的应用大多数采用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
    }
}

与大语言模型的连接

（待续）

姚家湾

关注

7
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
简单的chatGPT 网页界面

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

扫一扫