轻松打造一个可以切换AI平台的网站

news2024/11/24 19:34:58


在这里插入图片描述

亮色主题

在这里插入图片描述

暗色主题

在这里插入图片描述

停止按键

在这里插入图片描述

设置界面

在这里插入图片描述

浏览器缓存设置

在这里插入图片描述

Kimi

在这里插入图片描述

通义千问

在这里插入图片描述

ChatGPT

在这里插入图片描述

手机版

在这里插入图片描述
在这里插入图片描述

部分代码如下:

在这里插入图片描述

# -*- coding: utf-8 -*-
from flask import Flask, request, jsonify, render_template, Response
import requests
import json
import os
from gevent import pywsgi
app = Flask(__name__)

@app.route("/", methods=["GET"])
def index():
    return render_template("chat.html")

@app.route("/chat", methods=["POST"])
def chat():
    platform = request.form.get("platform", "kimi")
    messages = request.form.get("prompts", None)
    apiKey = request.form.get("apiKey", None)
    model = request.form.get("model", "moonshot-v1-8k")
    if messages is None:
        return jsonify({"error": {"message": "请输入prompts!", "type": "invalid_request_error", "code": ""}})

    if apiKey is None:
        apiKey = os.environ.get('OPENAI_API_KEY',app.config["OPENAI_API_KEY"])

    headers = {
        "Content-Type": "application/json",
        "Authorization": f"Bearer {apiKey}",
    }

    # json串转对象
    prompts = json.loads(messages)

    data={}
    url = ""
    if platform=="kimi":
        data = {
            "messages": prompts,
            "model": model,
            "temperature": 0.8,
            "top_p": 0.95,
            "n": 1,
            "stream": True,
        }
        url = app.config["URL"]
    elif platform=="qwen":
        if model in ["qwen-turbo","qwen-plus","qwen-max"]:
            data = {
                "messages": prompts,
                "model": model,
                "temperature": 0.8,
                "top_p": 0.95,
                "stream": True,
                "enable_search":True
            }
        else:            
            data = {
                "messages": prompts,
                "model": model,
                "temperature": 0.8,
                "top_p": 0.95,
                "stream": True
            }
        url = app.config["URL1"]
    elif platform=="doubao":
        data = {
            "messages": prompts,
            "model": model,
            "temperature": 0.8,
            "top_p": 0.95,
            "stream": True,
        }
        url = app.config["URL2"]
    elif platform=="chatgpt":
        data = {
            "messages": prompts,
            "model": model,
            "temperature": 0.8,
            "top_p": 0.95,
            "n": 1,
            "stream": True,
        }
        url = app.config["URL3"]
    try:
        resp = requests.post(
            url=url,
            headers=headers,
            json=data,
            stream=True,
            timeout=(10, 10)  # 连接超时时间为10秒,读取超时时间为10秒
        )
    except requests.exceptions.Timeout:
        return jsonify({"error": {"message": "请求超时,请稍后再试!", "type": "timeout_error", "code": ""}})
    
    # 迭代器实现流式响应
    def generate():
        errorStr = ""
        for chunk in resp.iter_lines():
            if chunk:
                streamStr = chunk.decode("utf-8").replace("data: ", "")
                try:
                    streamDict = json.loads(streamStr)  # 如果不是正常数据,则处理可能是错误信息
                except:
                    errorStr += streamStr.strip()  # 错误流式数据累加
                    continue
                # 获取 choices 列表中的第一个元素
                delData = streamDict.get("choices", [{}])[0]
                finish_reason = delData.get("finish_reason")
                if finish_reason is not None:
                    break
                else:
                    delta = delData.get("delta", {})
                    content = delta.get("content")
                    if content:
                        yield content

        # 如果出现错误,此时错误信息迭代器已处理完,app_context已经出栈,要返回错误信息,需要将app_context手动入栈
        if errorStr != "":
            with app.app_context():
                yield errorStr

    return Response(generate(), content_type='application/event-stream')

if __name__ == '__main__':
    server = pywsgi.WSGIServer(('localhost', 5200), app)
    server.serve_forever()

部分代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="icon" href="https://down.zhaomi.cn/web/assistant/56.png">
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <link rel="stylesheet" href="../static/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../static/css/github-dark-dimmed.min.css">
    <link rel="stylesheet" href="../static/css/style.css">
    <title>AI助手</title>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="box col-xs-12">
        <div class="title">
            <h2 class="text-center" id="platform_title"></h2>
        </div>
        <div class="answer">
          <div id="chatWindow"></div>
          <div class="function">
            <div class="others">
              <div class="left">
                <div class="settings common dropup">
                  <a class="dropdown-toggle icon-style" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="设置">
                    <i class="fa fa-cogs fa-lg" aria-hidden="true"></i>
                  </a>
                  <div class="dropdown-menu" style="padding:0;" onclick="event.stopPropagation()">
                    <div class="settings-common">
                      <span><i class="fa fa-linode fa-lg" aria-hidden="true"></i>&nbsp; 主题</span>
                      <div class="chck-btn">
                        <input id="chck-3" type="checkbox">
                        <label for="chck-3" class="check-trail">
                        <div class="check-handler"></div>
                        </label>
                      </div>
                    </div>
                    <div class="settings-common">
                      <span><i class="fa fa fa-dashboard fa-lg" aria-hidden="true"></i>&nbsp; 平台</span>
                      <select class="form-control ipt-common platform" id="platform">
                        <option value="kimi">Kimi</option>
                        <option value="qwen">通义千问</option>
                        <option value="doubao">豆包</option>
                        <option value="chatgpt">ChatGPT</option>
                      </select>
                    </div>
                    <div class="settings-common">
                      <span><i class="fa fa-reddit-alien fa-lg" aria-hidden="true"></i>&nbsp;模型</span>
                      <select class="form-control ipt-common model" id="model">
                      </select>
                    </div>

                    <div class="settings-common">
                      <span><i class="fa fa-key fa-lg" aria-hidden="true"></i>&nbsp;Key</span>
                      <input type="password" class="form-control ipt-common api-key" placeholder="输入api key"  id="api-key-input">  
                      <i class="fa fa-eye toggle-password" style="cursor: pointer;" aria-hidden="true"></i>
                    </div>

                    <div class="settings-common">
                      <span><i class="fa fa-floppy-o fa-lg" aria-hidden="true"></i>&nbsp; 保存对话内容</span>
                      <div class="chck-btn">
                        <input id="chck-1" type="checkbox">
                        <label for="chck-1" class="check-trail">
                        <div class="check-handler"></div>
                        </label>
                      </div>
                    </div>
                    <div class="settings-common">
                      <span><i class="fa fa-retweet fa-lg" aria-hidden="true"></i>&nbsp; 开启连续对话</span>
                      <div class="chck-btn">
                        <input id="chck-2" type="checkbox">
                        <label for="chck-2" class="check-trail">
                        <div class="check-handler"></div>
                        </label>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="center">
                <div class="stop common">
                  <a class="icon-style stop-icon" title="停止响应" style="text-decoration: none;"><i class="fa fa-stop-circle-o fa-lg" aria-hidden="true"></i> 停止</a>
                </div>
              </div>
              <div class="right">
                <div class="screenshot common">
                  <a class="icon-style" title="截图保存对话"><i class="fa fa-file-image-o fa-lg" aria-hidden="true"></i></a>
                </div>
                <div class="delete common">
                  <a class="icon-style" title="删除历史记录"><i class="fa fa-trash-o fa-lg" aria-hidden="true"></i></a>
                </div>
              </div>
            </div>
            <div class="ipt">
              <div class="col-xs-12">
                <textarea id="chatInput" class="form-control" rows="1" placeholder="输入问题" ></textarea>
              </div>
              <button id="chatBtn" class="btn btn-primary" type="button">发送</button>
            </div>
          </div>
        </div>
        <footer class="foot" style="margin-top: 20px;">
          <p class="lead text-center"> 内容由 AI 大模型生成,请仔细甄别</p>
        </footer>
      </div>
    </div>
  </div>
</body>
<script src="../static/js/jquery-2.1.1.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/js/highlight.min.js"></script>
<script src="../static/js/marked.min.js"></script>
<script src="../static/js/html2canvas.min.js"></script>
<script src="../static/js/custom.js"></script>

</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2072257.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Go反射四讲---第二讲:反射与结构体,使用反射如何操纵结构体?

反射-结构体 这是我们反射四讲的第二讲&#xff0c;本次给大家讲解如何使用反射处理结构体。 使用反射如何输出结构体的字段名字和值,使用反射如何给结构体字段设置值。 为了确保反射输出所有的字段名字和值&#xff0c;关键在于一点只有 Kind Struct 的才有。 注意&#…

Neo4J下载安装

Windows 版本 1、 下载链接安装JDK 下载链接 https://download.oracle.com/java/22/latest/jdk-22_windows-x64_bin.msi 下载完毕后默认安装即可 2、 下载Neo4J 进入Neo4j Deployment Center - Graph Database & Analytics下载页面&#xff0c;选择社区版&#xff0c;…

CentOS全面停服,国产化提速,央国企信创即时通讯/协同门户如何选型?

01. CentOS停服带来安全新风险&#xff0c; 国产操作系统迎来新的发展机遇 2024年6月30日&#xff0c;CentOS 7版本全面停服&#xff0c;于2014年发布的开源类服务器操作系统——CentOS全系列版本生命周期画上了句号。国内大量基于CentOS开发和适配的服务器及平台&#xff0c…

笔记小结:《利用python进行数据分析》之使用pandas和seaborn绘图

matplotlib实际上是一种比较低级的工具。要绘制一张图表&#xff0c;你组装一些基本组件就行&#xff1a;数据展示&#xff08;即图表类型&#xff1a;线型图、柱状图、盒形图、散布图、等值线图等&#xff09;、图例、标题、刻度标签以及其他注解型信息。 在pandas中&#xf…

pyyaml:Python 中的 YAML 处理大师

文章目录 pyyaml&#xff1a;Python 中的 YAML 处理大师背景&#xff1a;为何选择 pyyaml&#xff1f;pyyaml 是什么&#xff1f;如何安装 pyyaml&#xff1f;五个简单的 pyyaml 库函数使用方法1. 加载 YAML 数据2. 转储 YAML 数据3. 从文件加载 YAML4. 将数据写入 YAML 文件5.…

Cockos Reaper:开启专业数字音频制作之旅

Cockos Reaper 是一款备受赞誉的专业数字音频制作软件&#xff0c;适用于 Mac 和 Windows 系统。它以其强大的功能和高度的灵活性&#xff0c;成为众多音乐人和音频制作人的首选工具。 在音乐创作方面&#xff0c;Reaper 提供了丰富的虚拟乐器和音频效果插件&#xff0c;让你能…

如何使用ssm实现ssm框架的购物网站+vue

TOC ssm113ssm框架的购物网站vue 绪论 1.1 研究背景 当前社会各行业领域竞争压力非常大&#xff0c;随着当前时代的信息化&#xff0c;科学化发展&#xff0c;让社会各行业领域都争相使用新的信息技术&#xff0c;对行业内的各种相关数据进行科学化&#xff0c;规范化管理。…

AI 绘画神器 Midjourney 基础使用手册

一、前提条件 需要魔法&#xff1a; 新用户可免费创作 25 张图片&#xff0c;超过需要办会员版权问题&#xff1a;会员生成的图片版权归创作者所有 二、注册/链接 服务器 温馨提示&#xff1a;下方多图预警 1. 注册、创建服务器 ① 打开Midjourney官网&#xff0c;右下角…

机器学习入门指南:如何构建智能预测模型

【机器学习】&#xff1a;入门从零开始的指南 随着人工智能的快速发展&#xff0c;机器学习&#xff08;Machine Learning&#xff09;已经成为技术领域的热点话题。无论是推荐系统、语音识别、自动驾驶汽车&#xff0c;还是自然语言处理&#xff0c;机器学习的应用随处可见。…

minio文件存储

文章目录 参考安装与部署springboot整合miniopom.xmlapplication.ymlMinioPropertiesMinioConfigMinioApp测试基本功能bucket是否存在创建bucket修改bucket的访问权限查询所有的bucket删除指定的bucket上传文件到minio查看对象的描述信息获取文件的预签名访问地址后台获取minio…

第二课《动态规划》

1.1.1 线性dp 2.1.1 区间dp 3.1.1 背包dp 动态规划理论 动态规划算法通常用于求解具有某种最优性质的问题。在这类问题中&#xff0c; 可能会有很多可行解。没一个解都对应于一个值&#xff0c;我们希望找到具有最优值的解。胎动规划算法与分治法类似&#xff0c;其基本思想…

数据丢失不再怕!2024年高效硬盘恢复软件精选

硬盘数据丢失或文件损坏等问题&#xff0c;这不仅会影响我们的日常工作与生活&#xff0c;还可能造成无法挽回的损失。随着技术的发展&#xff0c;市场上涌现出了众多硬盘数据恢复软件。本文将为您介绍几款主流且高效的硬盘文件修复工具&#xff0c;希望能为您在数据遭遇不测时…

《深入浅出WPF》读书笔记.6binding系统(下)

《深入浅出WPF》读书笔记.6binding系统(下) 背景 主要讲数据校验和数据转换以及multibinding 代码 binding的数据校验 <Window x:Class"BindingSysDemo.ValidationRulesDemo"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmln…

innodb_buffer_pool_size在线缩小操作

一、背景 测试数据库内存32G&#xff0c;只有MySQL数据库&#xff0c;但是innodb_buffer_pool_size设置了24G&#xff0c;导致经常出现lack of memory问题、lack of swap问题。 因为使用了MySQL5.7.36版本&#xff0c;利用innodb_buffer_pool_size参数值可在线调整的新特性&…

这个TOP 100 AI应用榜单,包含了所有你需要的使用场景(一)

大家好&#xff0c;我是木易&#xff0c;一个持续关注AI领域的互联网技术产品经理&#xff0c;国内Top2本科&#xff0c;美国Top10 CS研究生&#xff0c;MBA。我坚信AI是普通人变强的“外挂”&#xff0c;专注于分享AI全维度知识&#xff0c;包括但不限于AI科普&#xff0c;AI工…

【源码+文档+调试讲解】劳务外包管理系统的设计与实现

摘 要 互联网发展至今&#xff0c;无论是其理论还是技术都已经成熟&#xff0c;而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播&#xff0c;搭配信息管理工具可以很好地为人们提供服务。针对劳务外包信息管理混乱&#xff0c;出错率高&#xff0c;信息安全性差…

微分方程(Blanchard Differential Equations 4th)中文版Section3.7

迹-行列式平面上平面系统分析 在前面的章节中,我们遇到了许多不同类型的线性微分方程系统。到目前为止,可能会觉得这些系统有很多不同的可能性,每种都有其独特的特征。为了将这些例子放在整体视角下进行回顾,创建一个表格是一个有用的方法。 总结我们到目前为止所做的工作…

基于SHAP进行特征选择和贡献度计算——可解释性机器学习

方法介绍 SHAP&#xff08;SHapley Additive exPlanations&#xff09;是一个 Python 包&#xff0c;旨在解释任何机器学习模型的输出。SHAP 的名称源自合作博弈论中的 Shapley 值&#xff0c;它构建了一个加性的解释模型&#xff0c;将所有特征视为“贡献者”。对于每个预测样…

深入探讨量子计算领域的最新进展及其对社会经济的影响

一、引言 在21世纪的科技浪潮中&#xff0c;量子计算作为一项颠覆性技术&#xff0c;正逐步从理论走向实践&#xff0c;成为各国竞相争夺的科技制高点。量子计算利用量子力学原理&#xff0c;实现了对传统计算模式的根本性变革&#xff0c;其强大的并行处理能力和指数级增长的…

如何正确使用 Parallels Desktop 的快照功能

在 Parallels Desktop for Mac 中&#xff0c;快照&#xff08;Snapshot&#xff09;功能非常实用&#xff0c;特别是当你需要在不同的状态之间自由切换&#xff0c;或是想要在实验或测试前备份虚拟机状态时。以下是使用快照功能的详细步骤和注意事项&#xff1a; 注意 在 Ap…