基于flask框架实现类似chatbox本地大模型对话聊天web界面

福小白

已于 2024-11-22 10:34:35 修改

阅读量1.2k

点赞数 8

文章标签： flask 前端 python

于 2024-11-22 10:33:32 首次发布

本文链接：https://blog.csdn.net/qq_38773993/article/details/143963215

版权

基于Python+Flask框架实现类似Chatbox的本地大模型对话界面

1.先看看想要实现的效果

chatbox设置界面：
设置连接本地ollama接口
chatbox对话界面：
在这里插入图片描述

2.本文代码实现的实际效果

ollama本地连接设置界面：
在这里插入图片描述
web端对话界面：

2.直接上代码

本项目开发环境是Pycharm专业版，程序只有两部分，一个是启动程序app.py，一个是前端页面login.html，用于实现web对话：
在这里插入图片描述
启动程序app.py

from flask import Flask, render_template, request
app = Flask(__name__)
@app.route('/')
def index():
    return render_template('login.html')
if __name__ == "__main__":
    app.run(host='0.0.0.0', port=8080)

前端页面login.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>大模型对话</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
    body, html {
     
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
        font-family: Arial, sans-serif;
        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .container {
     
        width: 100%;
        height: 100%;
        border: 1px solid #ddd;
        border-radius: 10px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
        background: #fff;
        display: flex;
        flex-direction: column;
    }
    .header {
     
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
        background: #007BFF;
        color: #fff;
        border-bottom: 1px solid #ddd;
    }
    .header h1 {
     
        margin: 0;
        font-size: 1.5em;
    }
    .header .settings-btn, .header .clear-btn {
     
        background: none;
        border: none;
        color: #fff;
        font-size: 1.5em;
        cursor: pointer;
    }
    .chat-window {
     
        flex: 1;
        padding: 10px;
        box-sizing: border-box;
        overflow-y: auto;
        background: #f9f9f9;
    }
    .message {
     
        margin: 10px 0;
        padding: 10px;
        border-radius: 5px;
        background-color: #e1ffc1;
        display: flex;
        align-items: flex-start;
    }
    .message.

最低0.47元/天解锁文章