devbox
花生_TL007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

简单的chatGPT 网页界面

作者：花生_TL007 | 2024-05-19 20:11:01

赞

踩

简单的chatGPT 网页界面

 

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

界面

安装

安装如下两个主要模块

  1. pip install fastapi 
  2. pip install uvicorn

文件目录结构

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

static 文件夹

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

主程序（main.py)

  1. import asyncio
  2. import nest_asyncio
  3. from langchain_core.prompts import PromptTemplate
  4. from langchain.chains import LLMChain
  5. from langchain.chat_models import ErnieBotChat
  6. from pydantic import BaseModel
  7. nest_asyncio.apply()
  8. llm= ErnieBotChat(model_name='ERNIE-Bot', #ERNIE-Bot
  9.                     ernie_client_id='xxxxxxxx',
  10.                     ernie_client_secret='xxxxxxxxxxx',
  11.                     temperature=0.75,
  12.                     )
  13. template = """You are a nice chatbot having a conversation with a human.
  14. New human question: {question}
  15. Response:"""
  16. prompt = PromptTemplate.from_template(template)
  17. # Notice that we need to align the `memory_key`
  18. conversation = LLMChain(
  19.     llm=llm,
  20.     prompt=prompt,
  21.     verbose=True,
  22. )
  23. class Prompt(BaseModel):
  24.     Method: str
  25.     Message:str  
  26.     
  27.     
  28. app = FastAPI()
  29. app.mount("/static", StaticFiles(directory="static"), name="static")
  30. templates = Jinja2Templates(directory="templates")
  31. @app.get("/")
  32. async def root(request: Request):
  33.    # return {"message": "Hello, World!"}
  34.  
  35.    return templates.TemplateResponse("index.html",{
  36.             "request": request
  37.         })
  38. @app.post("/generate/")
  39. def generate(prompt:Prompt):
  40.     print(prompt)
  41.     AIresponse=conversation.predict(question=prompt.Message)
  42.     response=prompt
  43.     response.Message=AIresponse
  44.     print(response)
  45.     return {"response": response}
  46. async def run_server():
  47.     uvicorn.run(app, host="localhost", port=8000)
  48.  
  49. if __name__ == "__main__":
  50.     loop = asyncio.get_event_loop()
  51.     loop.run_until_complete(run_server())

注意：search_kwargs 很重要

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

网页：

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

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <title>FastAPI Example</title>
  6.     <link rel="stylesheet" href="static/css/bootstrap.min.css">
  7.     <link rel="stylesheet" href="static/css/chat.css">
  8.     <link rel="stylesheet" href="static/css/font-awesome.min.css">
  9.     <link rel="stylesheet" href="static/font/bootstrap-icons.css">
  10.     <script src="static/js/jquery-3.6.0.min.js"></script>
  11.     <script src="static/js/bootstrap.min.js"></script>
  12.     <script src="static/js/moment.js"></script>
  13.     <style>
  14.         .form-outline i {
  15.             position: absolute;
  16.             top: 50%;
  17.             transform: translateY(-50%);
  18.             pointer-events: none;
  19.         }
  20.  
  21.         .chat {
  22.             height: 480px;
  23.             overflow-y: scroll;
  24.         }
  25.     </style>
  26.     <script>
  27.         function InsertPrompt(message) {
  28.             var message_li = document.createElement("li");
  29.             message_li.setAttribute("class", "clearfix");
  30.             var message_data = document.createElement("div")
  31.             message_data.setAttribute("class", "message-data");
  32.             var message_data_time = document.createElement("span")
  33.             message_data_time.setAttribute("class", "message-data-time")
  34.             const timeElapsed = Date.now();
  35.             const today = new Date(timeElapsed);
  36.             message_data_time.innerText = moment(today).format('LLL')
  37.             message_data.appendChild(message_data_time);
  38.             var message_content = document.createElement("div")
  39.             message_content.setAttribute("class", "message my-message")
  40.             message_content.innerText = message;
  41.             message_li.appendChild(message_data)
  42.             message_li.appendChild(message_content)
  43.             $("#chat").append(message_li)
  44.         }
  45.  
  46.         function InsertAIResponse(message) {
  47.             var message_li = document.createElement("li");
  48.             message_li.setAttribute("class", "clearfix");
  49.             var message_data = document.createElement("div")
  50.             message_data.setAttribute("class", "message-data text-right");
  51.             var message_data_time = document.createElement("span")
  52.             message_data_time.setAttribute("class", "message-data-time")
  53.             const timeElapsed = Date.now();
  54.             const today = new Date(timeElapsed);
  55.             message_data_time.innerText = moment(today).format('LLL')
  56.             message_data.appendChild(message_data_time);
  57.             var message_image = document.createElement("img")
  58.             message_image.setAttribute("src", "static/images/chatGPT.jpg")
  59.             message_image.setAttribute("alt", "avatar")
  60.             message_data.appendChild(message_image);
  61.             var message_block = document.createElement("div")
  62.             message_block.setAttribute("class","d-flex justify-content-end")
  63.             var message_content = document.createElement("div")
  64.             message_content.setAttribute("class", "message other-message align-items-start ")
  65.             message_content.innerText = message;
  66.             message_block.append(message_content)
  67.             message_li.appendChild(message_data)
  68.             message_li.appendChild(message_block)
  69.             $("#chat").append(message_li)
  70.         }
  71.  
  72.         function Send() {
  73.             console.log("Send");
  74.             messageContent = $("#Message").val();
  75.             InsertPrompt(messageContent)
  76.             console.log(messageContent)
  77.             var parameter = {
  78.                 Method: "SendMessage",
  79.                 Message: messageContent
  80.             }
  81.             $.ajax({
  82.                 url: '/generate',
  83.                 type: 'post',
  84.                 contentType: "application/json",
  85.                 dataType: "json",
  86.                 data: JSON.stringify(parameter),
  87.                 success: function (res) {
  88.                     response = res.response
  89.                     console.log(response.Message);
  90.                     InsertAIResponse(response.Message)
  91.                     $('#scroll-to-bottom').scrollTop($('#scroll-to-bottom')[0].scrollHeight);
  92.                 }
  93.             });
  94.  
  95.         }
  96.     </script>
  97. </head>
  98.  
  99. <body>
  100.  
  101.     <div class="container">
  102.         <div class="row clearfix">
  103.             <div class="col-lg-8">
  104.                 <h2 class="text-info">LLM</h2>
  105.                 <div class="card ">
  106.  
  107.                     <div class="chat" id="scroll-to-bottom">
  108.                         <div class="chat-history">
  109.                             <ul class="m-b-0" id="chat">
  110.                                 <li class="clearfix">
  111.                                     <div class="message-data text-right">
  112.                                         <span class="message-data-time">10:10 AM, Today</span>
  113.                                         <img src="static/images/chatGPT.jpg" alt="avatar">
  114.                                     </div>
  115.                                     <div class="text-right">
  116.                                     <div class="message other-message "> 你好！，我有什么能帮到你？ </div>
  117.                                   </div>
  118.                                 </li>
  119.  
  120.                             </ul>
  121.  
  122.                         </div>
  123.  
  124.                     </div>
  125.  
  126.                 </div>
  127.  
  128.             </div>
  129.             <div class="col-lg-4">
  130.                 <h2 class="text-info">Message</h2>
  131.                 <textarea class="form-control" id="Message" rows="10" placeholder="Message *"
  132.                     style="line-height:initial"></textarea>
  133.                 <div class="text-right">
  134.                     <button class="btn btn-info right-aligent" style="margin: 10px;" onclick="Send()">Send</button>
  135.                 </div>
  136.             </div>
  137.         </div>
  138.     </div>
  139. </body>
  140.  
  141. </html>

css(chat.css)

  1. body{
  2.     background-color: #f4f7f6;
  3.     margin-top:20px;
  4. }
  5. .card {
  6.     background: #fff;
  7.     transition: .5s;
  8.     border: 0;
  9.     margin-bottom: 30px;
  10.     border-radius: .55rem;
  11.     position: relative;
  12.     width: 100%;
  13.     box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
  14. }
  15. .chat-app .people-list {
  16.     width: 280px;
  17.     position: absolute;
  18.     left: 0;
  19.     top: 0;
  20.     padding: 20px;
  21.     z-index: 7
  22. }
  23.  
  24. .chat-app .chat {
  25.     margin-left: 280px;
  26.     border-left: 1px solid #eaeaea
  27. }
  28.  
  29. .people-list {
  30.     -moz-transition: .5s;
  31.     -o-transition: .5s;
  32.     -webkit-transition: .5s;
  33.     transition: .5s
  34. }
  35.  
  36. .people-list .chat-list li {
  37.     padding: 10px 15px;
  38.     list-style: none;
  39.     border-radius: 3px
  40. }
  41.  
  42. .people-list .chat-list li:hover {
  43.     background: #efefef;
  44.     cursor: pointer
  45. }
  46.  
  47. .people-list .chat-list li.active {
  48.     background: #efefef
  49. }
  50.  
  51. .people-list .chat-list li .name {
  52.     font-size: 15px
  53. }
  54.  
  55. .people-list .chat-list img {
  56.     width: 45px;
  57.     border-radius: 50%
  58. }
  59.  
  60. .people-list img {
  61.     float: left;
  62.     border-radius: 50%
  63. }
  64.  
  65. .people-list .about {
  66.     float: left;
  67.     padding-left: 8px
  68. }
  69.  
  70. .people-list .status {
  71.     color: #999;
  72.     font-size: 13px
  73. }
  74.  
  75. .chat .chat-header {
  76.     padding: 15px 20px;
  77.     border-bottom: 2px solid #f4f7f6
  78. }
  79.  
  80. .chat .chat-header img {
  81.     float: left;
  82.     border-radius: 40px;
  83.     width: 40px
  84. }
  85.  
  86. .chat .chat-header .chat-about {
  87.     float: left;
  88.     padding-left: 10px
  89. }
  90.  
  91. .chat .chat-history {
  92.     padding: 20px;
  93.     border-bottom: 2px solid #fff
  94. }
  95.  
  96. .chat .chat-history ul {
  97.     padding: 0
  98. }
  99.  
  100. .chat .chat-history ul li {
  101.     list-style: none;
  102.     margin-bottom: 30px
  103. }
  104.  
  105. .chat .chat-history ul li:last-child {
  106.     margin-bottom: 0px
  107. }
  108.  
  109. .chat .chat-history .message-data {
  110.     margin-bottom: 15px
  111. }
  112.  
  113. .chat .chat-history .message-data img {
  114.     border-radius: 40px;
  115.     width: 40px
  116. }
  117.  
  118. .chat .chat-history .message-data-time {
  119.     color: #434651;
  120.     padding-left: 6px
  121. }
  122.  
  123. .chat .chat-history .message {
  124.     color: #444;
  125.     padding: 18px 20px;
  126.     line-height: 26px;
  127.     font-size: 16px;
  128.     border-radius: 7px;
  129.     display: inline-block;
  130.     position: relative
  131. }
  132.  
  133. .chat .chat-history .message:after {
  134.     bottom: 100%;
  135.     left: 7%;
  136.     border: solid transparent;
  137.     content: " ";
  138.     height: 0;
  139.     width: 0;
  140.     position: absolute;
  141.     pointer-events: none;
  142.     border-bottom-color: #fff;
  143.     border-width: 10px;
  144.     margin-left: -10px
  145. }
  146.  
  147. .chat .chat-history .my-message {
  148.     background: #efefef
  149. }
  150.  
  151. .chat .chat-history .my-message:after {
  152.     bottom: 100%;
  153.     left: 30px;
  154.     border: solid transparent;
  155.     content: " ";
  156.     height: 0;
  157.     width: 0;
  158.     position: absolute;
  159.     pointer-events: none;
  160.     border-bottom-color: #efefef;
  161.     border-width: 10px;
  162.     margin-left: -10px
  163. }
  164.  
  165. .chat .chat-history .other-message {
  166.     background: #e8f1f3;
  167.     text-align: right
  168. }
  169.  
  170. .chat .chat-history .other-message:after {
  171.     border-bottom-color: #e8f1f3;
  172.     left: 93%
  173. }
  174.  
  175. .chat .chat-message {
  176.     padding: 20px
  177. }
  178.  
  179. .online,
  180. .offline,
  181. .me {
  182.     margin-right: 2px;
  183.     font-size: 8px;
  184.     vertical-align: middle
  185. }
  186.  
  187. .online {
  188.     color: #86c541
  189. }
  190.  
  191. .offline {
  192.     color: #e47297
  193. }
  194.  
  195. .me {
  196.     color: #1d8ecd
  197. }
  198.  
  199. .float-right {
  200.     float: right
  201. }
  202.  
  203. .clearfix:after {
  204.     visibility: hidden;
  205.     display: block;
  206.     font-size: 0;
  207.     content: " ";
  208.     clear: both;
  209.     height: 0
  210. }
  211.  
  212. @media only screen and (max-width: 767px) {
  213.     .chat-app .people-list {
  214.         height: 465px;
  215.         width: 100%;
  216.         overflow-x: auto;
  217.         background: #fff;
  218.         left: -400px;
  219.         display: none
  220.     }
  221.     .chat-app .people-list.open {
  222.         left: 0
  223.     }
  224.     .chat-app .chat {
  225.         margin: 0
  226.     }
  227.     .chat-app .chat .chat-header {
  228.         border-radius: 0.55rem 0.55rem 0 0
  229.     }
  230.     .chat-app .chat-history {
  231.         height: 300px;
  232.         overflow-x: auto
  233.     }
  234. }
  235.  
  236. @media only screen and (min-width: 768px) and (max-width: 992px) {
  237.     .chat-app .chat-list {
  238.         height: 650px;
  239.         overflow-x: auto
  240.     }
  241.     .chat-app .chat-history {
  242.         height: 600px;
  243.         overflow-x: auto
  244.     }
  245. }
  246.  
  247. @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
  248.     .chat-app .chat-list {
  249.         height: 480px;
  250.         overflow-x: auto
  251.     }
  252.     .chat-app .chat-history {
  253.         height: calc(100vh - 350px);
  254.         overflow-x: auto
  255.     }
  256. }

与大语言模型的连接

（待续）

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/594444
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号