热门标签
热门文章
- 1使用TP框架 出现mkdir() Permission denied 问题原因及解决方法_mkdir(): permission denied
- 2微信小程序自定义弹窗功能实现_微信小程序 自定义弹窗
- 3物联网鸿蒙智慧网关arduinoesp32s3_鸿蒙系统 arduino
- 4机器学习面试题60~100_在hmm中,如果已知观察序列和产生观察序列的状态序列,那么可用以下哪种方法直接进
- 5Docker镜像分层的理解（六）_镜像层
- 6Pytorch深度学习—— 自己设计模型训练MNIST（B站刘二大人P10作业）_自定义线性层 mnist
- 7计算机网络 第三章 数据链路层 笔记_osi数据链路层提供哪三种服务
- 8微信小程序（基本操作）
- 9【从Python基础到深度学习】1. Python PyCharm安装及激活
- 10SpringBoot 实现热插拔AOP，非常实用！
当前位置: article > 正文
采用流式输出搭建chatgpt网站，无需搭建js服务，逐字输出，加快响应速度_flask流式输出
作者：知新_RL | 2024-02-15 19:03:26
赞
踩
flask流式输出
无需搭建js服务，方便把已有的非流式代码改为流式代码，提高响应速度
反向代理访问接口，据说这样被openai屏蔽的可能性更小
浏览器指纹统计用户
页面可以自定义设置tokens长度，gpt创造力指数
具有代码高亮显示
Python flask提供接口
Python 文件app.py代码如下：
from flask import Flask,request, abort,Response import os import openai import json app = Flask(__name__) # 设置JSONIFY_TIMEOUT为5秒 app.config['JSONIFY_TIMEOUT'] = 60000 @app.route('/chat', methods=['POST']) def chat(): openai.api_key = "你的api key" json_data = request.get_json() conversation = [] # 创建空列表 conversation.append({"role": "system", "content": "You are a helpful assistant."}) questions = json_data['myArray'] answers = json_data['assistant'] temperatures = 0.7 if 'temperatures' in json_data: if json_data['temperatures']=='适中': temperatures = 0.7 if json_data['temperatures']=='更有创造力': temperatures = 1.4 if json_data['temperatures']=='更精准': temperatures = 0.2 tokens = 1000 if 'tokens' in json_data: tokens = int(json_data['tokens']) if tokens>4000: tokens =4000 if len(questions) > 2: questions = questions[-2:] answers = answers[-2:] if len(questions): # 遍历数组并添加到对话列表中 for i in range(len(questions)): conversation.append({"role": "user", "content": questions[i]}) conversation.append({"role": "assistant", "content": answers[i]}) conversation.append({"role": "user", "content": json_data['text']}) else: conversation.append({"role": "user", "content": json_data['text']}) inp_text = json_data['text'] try: response = openai.ChatCompletion.create( model="gpt-3.5-turbo", messages = conversation, temperature=temperatures, max_tokens=tokens, stream=True,#指明为流式输出 # frequency_penalty=0.5, # presence_penalty=0.5, # top_p=0.9 ) except Exception as e: response = False if 's maximum context length is' in str(e): pattern = r'\d+' matches = re.findall(pattern, str(e)) if len(matches) >= 2: number = int(matches[1]) -4000 return ["maximum",number] return ["maximum"] if 'a deactivated account' in str(e): return {'error': '当前api key已经用完额度或者失效，可以通知管理员更新'}, 401 return {'error': '出错了稍后重试'}, 401 if response: //采用流式输出 return Response(generate(response), mimetype='json') def generate(response): for text in response: yield json.dumps(text['choices'][0])+'\n##' if __name__ == "__main__": app.run(port=端口, host="ip", debug=True)
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
写好这个代码后可以在linux系统中app.py文件所在目录下，命令行输入 python app.py运行这个文件，成功运行就可以接着部署下面方前端代码了。如果是正式的环境推荐用Gunicorn服务器来管理，用supervisor来自动重启。
接下来是前端代码：
@extends('layouts.capp') @section('title') 首页 @endsection @section('sidebar') @parent @endsection @section('content') <body class="antialiased1"> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fingerprintjs2/2.1.0/fingerprint2.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/2.1.3/marked.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script> <script>hljs.initHighlightingOnLoad();</script> <div id="existing-element"></div> <div id="app"> <div class="b-i-c1"> <div class="b-i-c"> <textarea type="text" v-model="message1" class="input-box" id="input-box" oninput="autoResize()" rows="1" placeholder="输入信息"> </textarea> <!-- `greet` 是在下面定义的方法名 --> <button class="button-c" v-on:click="greet" id="button-c"> <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 mr-1" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"> <line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon> </svg> <div class="h-4 w-4 mr-1 fa">发送</div> <div class="text-2xl" id="text-box"> <span class="dot">.</span> <span class="dot">.</span> <span class="dot">.</span> </div> </button> </div> </div> <ul ref="myList" id="myList"></ul> <h1 class="text-4xl font-semibold text-center mt-6 sm:mt-[20vh] ml-auto mr-auto mb-10 sm:mb-16 flex gap-2 items-center justify-center"> 欢迎使用智能助手 </h1> <div class="dio-m">选择对话模式</div> <div class="container2"> <div class="item" onclick="toggleActive(this)">更有创造力</div> <div class="item active" onclick="toggleActive(this)">适中</div> <div class="item" onclick="toggleActive(this)">更精准</div> </div> <div class="container3"> <label for="rangeInput">单次聊天回复的最大 Token 数，如果预计输出的内容比较多，把它调大一些。如果你输入内容过多，可能会超过Token数限制则要调小一点。</label> <div class="v_my input-range_input-range__QBkD1 "> <span id="rangeValueFormatted">1000</span> <!--<input type="range" min="1" max="4000" step="1" value="600" id="rangeInput">--> <input type="range" min="1" max="3500" step="1" v-model="rangeValue" id="rangeInput"> <span class="t-t">tokens</span> </div> </div> <div class="text-gray-800 w-full md:max-w-2xl lg:max-w-3xl md:h-full md:flex md:flex-col px-6 dark:text-gray-100" id="text-gray-800"> <br> <div class="md:flex items-start text-center gap-3.5"> <div class="flex flex-col mb-8 md:mb-auto gap-3.5 flex-1"> <h2 class="flex gap-3 items-center m-auto text-lg font-normal md:flex-col md:gap-2" > <svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-6 w-6" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" > <circle cx="12" cy="12" r="5"></circle> <line x1="12" y1="1" x2="12" y2="3"></line> <line x1="12" y1="21" x2="12" y2="23"></line> <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line> <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line> <line x1="1" y1="12" x2="3" y2="12"></line> <line x1="21" y1="12" x2="23" y2="12"></line> <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line> <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line> </svg> 例子 </h2> <ul class="flex flex-col gap-3.5 w-full sm:max-w-md m-auto" id="container" v-on:click="getText($event)"> <button class="w-full bg-gray-50 dark:bg-white/5 p-3 rounded-md hover:bg-gray-200 dark:hover:bg-gray-900"> <font style="vertical-align: inherit"> <font style="vertical-align: inherit"></font></font> <font style="vertical-align: inherit"> <font style="vertical-align: inherit"> 我今天见了3个客户帮我写一个工作日报，需要包含今日工作内容，明日工作计划，心得。 </font></font><font style="vertical-align: inherit"> <font style="vertical-align: inherit"></font></font> </button> <button class="w-full bg-gray-50 dark:bg-white/5 p-3 rounded-md hover:bg-gray-200 dark:hover:bg-gray-900"> <font style="vertical-align: inherit"> <font style="vertical-align: inherit">“</font></font> <font style="vertical-align: inherit"> <font style="vertical-align: inherit"> js 实现点击并列元素中的一个获取里面的text赋值到input中 </font></font><font style="vertical-align: inherit"> <font style="vertical-align: inherit">”</font></font> </button> <button class="w-full bg-gray-50 dark:bg-white/5 p-3 rounded-md hover:bg-gray-200 dark:hover:bg-gray-900"> <font style="vertical-align: inherit"> <font style="vertical-align: inherit">“</font></font> <font style="vertical-align: inherit"> <font style="vertical-align: inherit"> 我要你扮演诗人。你将创作出能唤起情感并具有触动人心的力量的诗歌。确保文字优美而有意义。我的第一个请求是：我需要一首关于爱情的诗。 </font></font><font style="vertical-align: inherit"> <font style="vertical-align: inherit">”</font></font> </button> <button class="w-full bg-gray-50 dark:bg-white/5 p-3 rounded-md hover:bg-gray-200 dark:hover:bg-gray-900"> <font style="vertical-align: inherit"> <font style="vertical-align: inherit">“</font></font> <font style="vertical-align: inherit"> <font style="vertical-align: inherit">如何在 Javascript 中发出 HTTP 请求？</font ></font ><font style="vertical-align: inherit" ><font style="vertical-align: inherit">”</font></font > </button> </ul> </div> <div class="flex flex-col mb-8 md:mb-auto gap-3.5 flex-1"> <h2 class="flex gap-3 items-center m-auto text-lg font-normal md:flex-col md:gap-2" > <svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-6 w-6" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" > <circle cx="12" cy="12" r="5"></circle> <line x1="12" y1="1" x2="12" y2="3"></line> <line x1="12" y1="21" x2="12" y2="23"></line> <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line> <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line> <line x1="1" y1="12" x2="3" y2="12"></line> <line x1="21" y1="12" x2="23" y2="12"></line> <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line> <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line> </svg> 例子 </h2> <ul class="flex flex-col gap-3.5 w-full sm:max-w-md m-auto" id="container" v-on:click="getText($event)"> <button class="w-full bg-gray-50 dark:bg-white/5 p-3 rounded-md hover:bg-gray-200 dark:hover:bg-gray-900"> <font style="vertical-align: inherit"> <font style="vertical-align: inherit">“</font></font> <font style="vertical-align: inherit"> <font style="vertical-align: inherit"> 帮我写一个云南7日游计划 </font></font><font style="vertical-align: inherit"> <font style="vertical-align: inherit">”</font></font> </button> <button class="w-full bg-gray-50 dark:bg-white/5 p-3 rounded-md hover:bg-gray-200 dark:hover:bg-gray-900"> <font style="vertical-align: inherit"> <font style="vertical-align: inherit">“</font></font> <font style="vertical-align: inherit"> <font style="vertical-align: inherit"> 用简单的术语解释量子计算 </font></font><font style="vertical-align: inherit"> <font style="vertical-align: inherit">”</font></font> </button> <button class="w-full bg-gray-50 dark:bg-white/5 p-3 rounded-md hover:bg-gray-200 dark:hover:bg-gray-900"> <font style="vertical-align: inherit"> <font style="vertical-align: inherit">“</font></font> <font style="vertical-align: inherit"> <font style="vertical-align: inherit"> 我想让你担任职业顾问。您的任务是帮助根据技能、兴趣和经验确定最适合的职业。您还应该对可用的各种选项进行研究，解释不同行业的就业市场趋势，并就哪些资格证书对特定领域有益提出建议。我的第一个请求是“给一份在软件工程领域的职业建议。” </font></font><font style="vertical-align: inherit"> <font style="vertical-align: inherit">”</font></font> </button> <button class="w-full bg-gray-50 dark:bg-white/5 p-3 rounded-md hover:bg-gray-200 dark:hover:bg-gray-900"> <font style="vertical-align: inherit"> <font style="vertical-align: inherit">“</font></font> <font style="vertical-align: inherit"> <font style="vertical-align: inherit">Laravel如何引入Illuminate\Http\Request</font></font> <font style="vertical-align: inherit"><font style="vertical-align: inherit">”</font></font> </button> </ul> </div> <div class="flex flex-col mb-8 md:mb-auto gap-3.5 flex-1"> <h2 class="flex gap-3 items-center m-auto text-lg font-normal md:flex-col md:gap-2" > <svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-6 w-6" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" > <circle cx="12" cy="12" r="5"></circle> <line x1="12" y1="1" x2="12" y2="3"></line> <line x1="12" y1="21" x2="12" y2="23"></line> <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line> <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line> <line x1="1" y1="12" x2="3" y2="12"></line> <line x1="21" y1="12" x2="23" y2="12"></line> <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line> <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line> </svg> 限制 </h2> <ul class="flex flex-col gap-3.5 w-full sm:max-w-md m-auto" id="container" > <button class="w-full bg-gray-50 dark:bg-white/5 p-3 rounded-md hover:bg-gray-200 dark:hover:bg-gray-900"> <font style="vertical-align: inherit"> <font style="vertical-align: inherit">“</font></font> <font style="vertical-align: inherit"> <font style="vertical-align: inherit"> 可能偶尔会产生不正确的信息。 </font></font><font style="vertical-align: inherit"> <font style="vertical-align: inherit">”</font></font> </button> <button class="w-full bg-gray-50 dark:bg-white/5 p-3 rounded-md hover:bg-gray-200 dark:hover:bg-gray-900"> <font style="vertical-align: inherit"> <font style="vertical-align: inherit">“</font></font> <font style="vertical-align: inherit"> <font style="vertical-align: inherit"> 可能偶尔会产生有害的指令或有偏见的内容。 </font></font><font style="vertical-align: inherit"> <font style="vertical-align: inherit">”</font></font> </button> <button class="w-full bg-gray-50 dark:bg-white/5 p-3 rounded-md hover:bg-gray-200 dark:hover:bg-gray-900"> <font style="vertical-align: inherit"> <font style="vertical-align: inherit">“</font></font> <font style="vertical-align: inherit"> <font style="vertical-align: inherit">对 2021 年后的世界和事件的了解有限。</font></font> <font style="vertical-align: inherit"><font style="vertical-align: inherit">”</font></font> </button> </ul> </div> </div> </div> <div id="randomNum" style="display:none;"></div> <button class="button-cancel" v-on:click="cancel" id="button-cancel">取消</button> </div> <style> .dot { animation: dot-animation 1s infinite; opacity: 0; animation-delay: 0s, 0.2s, 0.4s; animation-fill-mode: both; display: inline-block; } .dot:nth-child(1) { animation-delay: 0s; } .dot:nth-child(2) { animation-delay: 0.2s; } .dot:nth-child(3) { animation-delay: 0.4s; } @keyframes dot-animation { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } .text-2xl{ display:none; } .text-2xl.processing{ display:block; margin-bottom: 9px; } .input-box{ width: 99%; height: 42px; font-size: 18px; padding: 11px; overflow: hidden; border-radius: 0.375rem; border: 1px solid; box-shadow: var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),0 0 10px rgba(0,0,0,.1); } /*.input-box:focus{ width: 99%; height: 45px; font-size: 18px; padding: 10px; }*/ .button-c{ height: 40px; border: none; position: absolute; right: 30px; bottom: 0px; } .b-i-c{ display: flex; } .b-i-c1{ position: relative; /*bottom: 0;*/ width: 100%; max-width: 50rem; padding-left: 1.5rem; padding-right: 1.5rem; background-color: #fff; top: 0px; padding-top: 14px; } #app{ max-width: 50rem; margin: 0 auto; } body{ position: relative; } .buttonc svg{ display:none; } .textgray h1{ /*display:none !important;*/ font-size: 25px; } .container-j { /* display: flex;*/ padding: 10px 15px; } .container-j img { margin-right: 10px; } .container-j p{ margin-left: 10px; } .container-jc{ background-color: #f1f3f4; } /*@media screen and (min-width: 789px) and (max-width: 1200px) {*/ .container-jc{ /*white-space: pre!important;*/ overflow: auto; } .container-jc .rounded-sm{ float: left; width: 34px; margin-top: 10px; border-radius: 0.125rem; } .container-jc .texts{ float: right; width: calc(100% - 50px); } .highlight pre,.aq-text pre{ white-space: pre-wrap; word-wrap: break-word; } .container-jc svg{ --tw-text-opacity: 1; color: rgba(255,255,255,var(--tw-text-opacity)); } </style> <style> :after,:before{--tw-content:"";} h1,h2{font-size:inherit;font-weight:inherit;} button{color:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;margin:0;padding:0;} button{text-transform:none;} button{-webkit-appearance:button;background-color:transparent;background-image:none;} h1,h2{margin:0;} ul{list-style:none;margin:0;padding:0;margin-bottom: 65px; padding-left: 0.1rem;} button{cursor:pointer;} :disabled{cursor:default;} svg{display:block;vertical-align:middle;} h1{font-size:1.875rem;line-height:2.25rem;} h1,h2{font-weight:600;} h2{font-size:1.5rem;line-height:2rem;} *,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 transparent;--tw-ring-shadow:0 0 transparent;--tw-shadow:0 0 transparent;--tw-shadow-colored:0 0 transparent;} ::-webkit-scrollbar{height:1rem;width:.5rem;} ::-webkit-scrollbar-track{background-color:transparent;border-radius:9999px;} ::-webkit-scrollbar-thumb{--tw-border-opacity:1;background-color:rgba(217,217,227,.8);border-color:rgba(255,255,255,var(--tw-border-opacity));border-radius:9999px;border-width:1px;} ::-webkit-scrollbar-thumb:hover{--tw-bg-opacity:1;background-color:rgba(236,236,241,var(--tw-bg-opacity));} .m-auto{margin:auto;} .ml-auto{margin-left:auto;} .mr-auto{margin-right:auto;} .mb-10{margin-bottom:2.5rem;} .mt-6{margin-top:1.5rem;} .mb-8{margin-bottom:2rem;} .flex{display:flex;} .h-6{height:1.5rem;} .w-full{width:100%;} .w-6{ width: 30px; margin-top: 5px; margin-bottom: 5px; } .flex-1{flex:1 1 0%;} .flex-col{flex-direction:column;} .items-start{align-items:flex-start;} .items-center{align-items:center;} .justify-center{justify-content:center;} .gap-3{gap:.75rem;} .gap-2{gap:.5rem;} .gap-3\.5{gap:.875rem;} .rounded-md{border-radius:.375rem;} .bg-gray-50{--tw-bg-opacity:1;background-color:rgba(247,247,248,var(--tw-bg-opacity));} .p-3{padding:.75rem;} .px-6{padding-left:1.5rem;padding-right:1.5rem;} .text-center{text-align:center;} .text-lg{font-size:1.125rem;} .text-lg{line-height:1.75rem;} .text-4xl{font-size:2.25rem;line-height:2.5rem;} .font-semibold{font-weight:600;} .font-normal{font-weight:400;} .text-gray-800{--tw-text-opacity:1;color:rgba(52,53,65,var(--tw-text-opacity));} .hover\:bg-gray-200:hover{--tw-bg-opacity:1;background-color:rgba(217,217,227,var(--tw-bg-opacity));} @media (min-width:640px){ .sm\:mb-16{margin-bottom:2rem;} .sm\:mt-\[20vh\]{margin-top:10vh;} .sm\:max-w-md{max-width:28rem;} } @media (min-width:768px){ .md\:mb-auto{margin-bottom:auto;} .md\:flex{display:flex;} /*.md\:h-full{height:100%;}*/ .md\:max-w-2xl{max-width:42rem;} .md\:flex-col{flex-direction:column;} .md\:gap-2{gap:.5rem;} } @media (min-width:1024px){ .lg\:max-w-3xl{max-width:48rem;} } @media (max-width: 767px){ .custom .des { font-size: 16px; } .container-j { padding: 10px 8px; } .container-jc .texts { float: right; width: calc(100% - 45px) !important; padding: 4px 0px; } .input-text { width: calc(100% - 45px) !important; } .input-text p{ /*margin-top: 5px;*/ } .container-j p { margin-left: 4px; } .container-jc .rounded-sm { width: 33px; } .aq-text,.input-text{ font-size: 16px; line-height: 22px; } .b-i-c1 { position: relative; /*bottom: 0;*/ background-color: #fff; top: 0px; padding-top: 14px; width: 100%; max-width: 50rem; padding-left: 5px; padding-right: 5px; } .w-full { width: unset !important; } .px-6 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; } ul { list-style: none; margin: 0; padding: 0; margin-bottom: 65px; padding-left: 0rem; } .input-box { width: 96%; } .button-c { right: calc(33px + 0%); } .w-6 { width: 3.5rem; margin-top: 3px; } .button-c { right: calc(19px + 0%); bottom: 3px; } .input-box { padding-right: 22px; } .button-c svg{ display: none; } .button-c { right: calc(9px + 0%); bottom: 3px; } } @media (min-width: 767px){ .button-c .fa{ display: none; } } @media screen and (min-width: 750px) and (max-width: 1199px){ /* 添加样式 */ /* 例如： */ .b-i-c1{ width: 95%; padding-left: 0.5rem; padding-right: 0.5rem; } .px-6 { padding-left: 0.3rem; padding-right: 1.5rem; } .button-c { right: 30px; } .px-6 { padding-left: 0rem; padding-right: 0rem; } ul { padding-left: 0.5rem; } } @media screen and (min-width: 624px) and (max-width: 770px){ .input-box { width: 98%; } } .container-jy .icon { display: block; vertical-align: middle; color: #fff !important; border-color: #fff; width: 30px !important; height: 30px !important; padding: 2.5px; } .b-i-c1.fixed { position: fixed; top: 0; z-index: 1000; } .button-c .fa{ background-color: #198de3; padding: 3px; border-radius: 5px; color: #fff; font-size: 14px; } .buttonc .fa{ display:none; } #copyid{ margin-bottom: 10px; margin-top: 20px; } .icopy{ border: 0.5px solid #a69d9d; width: 30px; padding: 1px; border-radius: 5px; color: #8c8585; font-size: 13px; background-color: #f7f7f8; box-shadow: 1px 1px 1px 1px #a3a3af; } </style> <style> :root { --white: #fff; --black: #303030; --gray: #fafafa; --primary: #1d93ab; --second: #e7f8ff; --hover-color: #f3f3f3; --bar-color: rgba(0,0,0,.1); --theme-color: var(--gray); --shadow: 50px 50px 100px 10px rgba(0,0,0,.1); --card-shadow: 0px 2px 4px 0px rgba(0,0,0,.05); --border-in-light: 1px solid #dedede; --window-width: 90vw; --window-height: 90vh; --sidebar-width: 300px; --window-content-width: calc(100% - var(--sidebar-width)); --message-max-width: 80%; --full-height: 100%; } input[type="range" i] { color: red; } input[type="range" i] { background-color: red; } .input-range_input-range__QBkD1 { border: 1px solid #dedede; border-radius: 10px; padding: 5px 15px 5px 10px; font-size: 12px; display: flex; width: max-content; margin: 0 auto; margin-top: 6px; } .container3{ text-align: center; margin: 0 auto; margin-top: 1px; /* margin-bottom: 6px; */ max-width: 460px; padding: 10px; } input[type="range" i] { appearance: auto; cursor: default; color: -internal-light-dark(rgb(16, 16, 16), rgb(255, 255, 255)); padding: initial; border: initial; margin: 2px; } #rangeValueFormatted{ width: 30px; } input[type=range] { -webkit-appearance: none; -moz-appearance: none; appearance: auto; background-color: #fff; color: #303030; } /* 自定义进度条样式 */ .v_my input[type=range] { -webkit-appearance: none;/*清除系统默认样式*/ background: -webkit-linear-gradient(#ddd, #dfe2e3) no-repeat, #ddd;/*设置左边颜色为#61bd12，右边颜色为#ddd*/ margin-top: 5px; height: 5px;/*横条的高度*/ outline: none; } /*拖动块的样式*/ .v_my input[type=range]::-webkit-slider-thumb { -webkit-appearance: none;/*清除系统默认样式*/ height: 15px;/*拖动块高度*/ width: 10px;/*拖动块宽度*/ background: #80b3d8;/*拖动块背景*/ border-radius: 5px; /*外观设置为圆形*/ } .container2 .item:hover { background-color: #609cc8 !important; } .button-c .fa:hover { background-color: #0d6aad; } .t-t{ margin-left: 5px; line-height: 14px; } .code-example,.aq-text pre{ background-color: #282a36; color: #eaeaea; padding: 10px; border-radius: 5px; padding-bottom: 20px; padding-top: 20px; font-size: 14px; } </style> <style> .VIPTISI span { /* // 内联元素（inline）动画不起作用， 因此要设置为‘inline-block’ */ display: inline-block; animation: jump 500ms ease-in-out; animation-delay: var(--delay); } @keyframes jump { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } </style> <style> .dio-m{ width: max-content; margin: 0 auto; margin-bottom: 10px; } .container2 { display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 45%; height: 50px; background-color: #fff; padding: 4px; border: 1px solid; border-radius: 5px; margin: 0 auto; } .container2 .item { flex: 1; height: 100%; display: flex; justify-content: center; align-items: center; background-color: #fff; /* border: 1px solid #ccc; */ cursor: pointer; border-radius: 5px; } .container2 .item.active { background-color: #80b3d8; } @media (max-width: 767px){ .container2 { width: 85%; max-width: 300px; } } .aq-text{ padding-top: 6px; } </style> <script> function toggleActive(item) { var lis = document.querySelectorAll(".container2 .item"); // 遍历所有 li 元素 for (var i = 0; i < lis.length; i++) { if(lis[i].classList.contains("active")){ lis[i].classList.remove('active'); } } item.classList.add('active'); // activeItem = item; } </script> <script> const userAgent = navigator.userAgent; const plugins = navigator.plugins; const screenWidth = window.screen.width; const screenHeight = window.screen.height; const language = navigator.language; const platform = navigator.platform; const languages = navigator.languages; let pluginString = ""; for (let i = 0; i < navigator.plugins.length; i++) { pluginString += navigator.plugins[i].name + ", "; } pluginString = pluginString.slice(0, -2); // 移除最后一个逗号和空格 const fingerprint = `${userAgent}${pluginString}${screenWidth}${screenHeight}${language}${platform}${languages}`; //console.log(pluginString); // 获取容器元素和输入元素 const container = document.getElementById("container"); const input = document.getElementById("input-box"); input.value = '' // 为容器元素中的所有项添加一个点击事件监听器 var timestamp = new Date().getTime(); var randomNum = Math.floor(Math.random() * timestamp); document.getElementById("randomNum").innerText = randomNum var app = new Vue({ el: '#app', data: { name: 'Vue.js', message1: '', myArray: [], assistant: [], cancelToken: null, rangeValue: 1000 }, // 在 `methods` 对象中定义方法 methods: { greet: function (event) { const self = this; // 将Vue实例保存到变量self中 // 获取输入框元素 const inputBox = document.getElementById("text-box"); inputBox.classList.add("processing"); const buttonc = document.getElementById("button-c"); if (buttonc.classList.contains("buttonc")) { // 如果包含 console.log("该元素包含'buttonc'类名"); return; } const buttoncancel = document.getElementById("button-cancel"); buttoncancel.classList.add("sh"); buttonc.classList.add("buttonc"); //获取提交内容 const input = document.getElementById("input-box"); if(input.value.trim().length <1){ alert('请输入内容'); inputBox.classList.remove("processing"); buttonc.classList.remove("buttonc"); buttoncancel.classList.remove("sh"); return; } data1 = {'text':input.value} // 创建 cancelToken this.cancelToken = axios.CancelToken.source(); async function fetchData() { //用浏览器指纹验证用户点击次数 const fp = await Fingerprint2.getPromise(); const values = fp.map(item => item.value); const result = values.join(''); // console.log(fp); const hash = CryptoJS.MD5(result).toString(); data1.hash =hash; //用浏览器指纹验证用户点击次数 //const response = await axios.post('/mingang', data1); //const data = response.data; //return data; return data ={HitFlag:0}; } fetchData().then((data) => { if(data.HitFlag==1){ inputBox.classList.remove("processing"); buttonc.classList.remove("buttonc"); const buttoncancel = document.getElementById("button-cancel"); buttoncancel.classList.remove("sh"); return; }else{ const temperatures = document.querySelector(".container2 .item.active"); const tokens = document.querySelector(".container3 #rangeInput"); axios.defaults.timeout = 6000; let randomNum1 = document.getElementById("randomNum").innerText data = {'randomNum':randomNum1,'text':input.value,'myArray':this.myArray,'assistant':this.assistant,'temperatures':temperatures.innerText,'tokens':tokens.value} //建议用反向代理将这个请求url指向最终请求 //比如nginx中在配置文件中加入如下设置 //location /chat { // proxy_pass 上面Python代码访问的ip:端口/chat; // proxy_set_header Host $host; // proxy_set_header X-Real-IP $proxy_add_x_forwarded_for; // proxy_connect_timeout 600s; // proxy_send_timeout 600s; // proxy_read_timeout 600s; // proxy_buffering off; // proxy_cache off; // } fetch('/chat', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) }).then(response => { //采用流式输出 可以用gpt解释代码意思 const reader = response.body.getReader(); return new ReadableStream({ start(controller) { function push() { reader.read().then(({ done, value }) => { if (done) { controller.close(); return; } controller.enqueue(value); push(); }); } push(); } }); }).then(stream => new Response(stream)) .then(response => { const reader = response.body.getReader(); const decoder = new TextDecoder('utf-8'); let buffer = ''; let text = ''; function push() { reader.read().then(({ done, value }) => { if (done) { let list = document.getElementById('myList'); let lastItems = list.lastChild; let textDivs = lastItems.querySelector('.aq-text'); Vue.set(self.myArray, self.myArray.length, input.value); Vue.set(self.assistant, self.assistant.length, textDivs.innerText); input.value = ''; autoResize(); inputBox.classList.remove("processing"); buttonc.classList.remove("buttonc"); const buttoncancel = document.getElementById("button-cancel"); buttoncancel.classList.remove("sh"); const li_index = Array.from(list.children).indexOf(lastItems); // var li1 = lastItems; var liHtml = lastItems.innerHTML; var randomNum = document.getElementById("randomNum").innerText; var title = lastItems.getElementsByClassName("input-text")[0].innerText; //savehtml(liHtml,title,li_index,randomNum); return; } buffer += decoder.decode(value, { stream: true }); const parts = buffer.split('\n##'); parts.forEach(part => { if (part) { const data = JSON.parse(part); if(data.error){ alert(data.error); inputBox.classList.remove("processing"); buttonc.classList.remove("buttonc"); const buttoncancel = document.getElementById("button-cancel"); buttoncancel.classList.remove("sh"); return; } if(data[0]=='maximum'){ let lun_num = self.myArray.length; // Vue.set(this.assistant, this.assistant.length, data['choices'][0]['assistant']); if(lun_num){ if(lun_num>1){ const lastElement = self.myArray[self.myArray.length - 1]; const lastElementa = self.assistant[self.assistant.length - 1]; // 清空数组并添加最后一个元素 self.myArray.splice(0, self.myArray.length, lastElement); self.assistant.splice(0, self.assistant.length, lastElementa); alert('对话内容过多，偶尔会有这种情况，这一次回答只考虑上一次会话内') // return; }else{ alert('对话内容超过长度限制，这一次回答不再考虑之前的内容'); Vue.set(self, 'myArray', []); Vue.set(self, 'assistant', []); // return; } }else{ alert('输入内容过多，删除部分再试'); Vue.set(self, 'myArray', []); Vue.set(self, 'assistant', []); // return; } inputBox.classList.remove("processing"); buttonc.classList.remove("buttonc"); const buttoncancel = document.getElementById("button-cancel"); buttoncancel.classList.remove("sh"); return; } if(data['delta']['role']){ const newItem = document.createElement('li'); const list = self.$refs.myList; // let list = document.getElementById('myList'); newItem.textContent = 'Item ' + (list.children.length + 1); newItem.innerHTML = '<div class="container-jh">'+ '<div class="container-j container-jy">'+ '<div class="relative h-[30px] w-[30px] p-1 rounded-sm text-white flex items-center justify-center" style="background-color: rgb(16, 163, 127);float: left;width: 34px;margin-top: 6px;margin-bottom: 10px;border-radius: 0.125rem;margin-right: 10px;">'+ '<svg class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1272"><path d="M529.6 241.9c-100.2 1-151.9 48.6-171.4 145.1l1.4 0.4c-1.8 2.9-2.8 6.4-2.8 10 0 10.8 8.7 19.5 19.4 19.5s19.4-8.7 19.4-19.5v-0.1C410.4 326 448.3 279.7 531.5 281c52.3 1.9 96.7 42.7 97.1 97.1 1 42.5-22.9 83.7-63.1 111-37.5 25.4-73.4 55.1-72.8 102.5 0 10.7 8.7 19.4 19.4 19.4s19.4-8.7 19.4-19.4c-3-25.4 19.9-48.2 50-67.7 58.6-40.4 87.8-96.8 86.3-146.2 0.2-81.4-57-134.8-138.2-135.8z m370.6 215.2c0-215.2-173.8-389.6-388.1-389.6S124 242 124 457.1c0 184.8 128.2 339.4 300.3 379.4h-0.3s23.4 5.9 32.5 23.4c4.4 8.5 28.1 58.7 42.8 89.3 2 4.1 5.2 11 12.8 11 7.6 0 10.8-6.9 12.8-11 14.7-30.6 38.4-80.8 42.8-89.3 9.1-17.5 32.5-23.4 32.5-23.4h-0.2c172-40 300.2-194.6 300.2-379.4z m-306 340.1h-0.4s-30.4 7.4-40.2 22.7c-25.7 40-41.5 82.1-41.5 82.1s-20.3-50.6-47-89.4c-8.6-12.5-32.3-20.9-32.3-20.9h0.2c-171.2-35.6-270.2-173.5-270.2-338.2 0-191.8 156.4-347.2 349.3-347.2s349.3 155.5 349.3 347.2c0 164.8-107.5 307.5-267.2 343.7z m-73.8-147.5h-16.6c-6.1 0-11.1 5.8-11.1 13v13c0 7.2 5 13 11.1 13h16.6c6.1 0 11.1-5.8 11.1-13v-13c-0.1-7.2-5-13-11.1-13z" p-id="1273"></path></svg>'+ '</div>'+ '<div class="input-text">'+escapeHtml(input.value)+'</div>'+ '</div>'+ '<div class="container-j container-jc">'+ '<div class="relative h-[30px] w-[30px] p-1 rounded-sm text-white flex items-center justify-center" style="background-color: rgb(16, 163, 127);">'+ '<svg width="41" height="41" viewBox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" class="h-6 w-6"><path d="M37.5324 16.8707C37.9808 15.5241 38.1363 14.0974 37.9886 12.6859C37.8409 11.2744 37.3934 9.91076 36.676 8.68622C35.6126 6.83404 33.9882 5.3676 32.0373 4.4985C30.0864 3.62941 27.9098 3.40259 25.8215 3.85078C24.8796 2.7893 23.7219 1.94125 22.4257 1.36341C21.1295 0.785575 19.7249 0.491269 18.3058 0.500197C16.1708 0.495044 14.0893 1.16803 12.3614 2.42214C10.6335 3.67624 9.34853 5.44666 8.6917 7.47815C7.30085 7.76286 5.98686 8.3414 4.8377 9.17505C3.68854 10.0087 2.73073 11.0782 2.02839 12.312C0.956464 14.1591 0.498905 16.2988 0.721698 18.4228C0.944492 20.5467 1.83612 22.5449 3.268 24.1293C2.81966 25.4759 2.66413 26.9026 2.81182 28.3141C2.95951 29.7256 3.40701 31.0892 4.12437 32.3138C5.18791 34.1659 6.8123 35.6322 8.76321 36.5013C10.7141 37.3704 12.8907 37.5973 14.9789 37.1492C15.9208 38.2107 17.0786 39.0587 18.3747 39.6366C19.6709 40.2144 21.0755 40.5087 22.4946 40.4998C24.6307 40.5054 26.7133 39.8321 28.4418 38.5772C30.1704 37.3223 31.4556 35.5506 32.1119 33.5179C33.5027 33.2332 34.8167 32.6547 35.9659 31.821C37.115 30.9874 38.0728 29.9178 38.7752 28.684C39.8458 26.8371 40.3023 24.6979 40.0789 22.5748C39.8556 20.4517 38.9639 18.4544 37.5324 16.8707ZM22.4978 37.8849C20.7443 37.8874 19.0459 37.2733 17.6994 36.1501C17.7601 36.117 17.8666 36.0586 17.936 36.0161L25.9004 31.4156C26.1003 31.3019 26.2663 31.137 26.3813 30.9378C26.4964 30.7386 26.5563 30.5124 26.5549 30.2825V19.0542L29.9213 20.998C29.9389 21.0068 29.9541 21.0198 29.9656 21.0359C29.977 21.052 29.9842 21.0707 29.9867 21.0902V30.3889C29.9842 32.375 29.1946 34.2791 27.7909 35.6841C26.3872 37.0892 24.4838 37.8806 22.4978 37.8849ZM6.39227 31.0064C5.51397 29.4888 5.19742 27.7107 5.49804 25.9832C5.55718 26.0187 5.66048 26.0818 5.73461 26.1244L13.699 30.7248C13.8975 30.8408 14.1233 30.902 14.3532 30.902C14.583 30.902 14.8088 30.8408 15.0073 30.7248L24.731 25.1103V28.9979C24.7321 29.0177 24.7283 29.0376 24.7199 29.0556C24.7115 29.0736 24.6988 29.0893 24.6829 29.1012L16.6317 33.7497C14.9096 34.7416 12.8643 35.0097 10.9447 34.4954C9.02506 33.9811 7.38785 32.7263 6.39227 31.0064ZM4.29707 13.6194C5.17156 12.0998 6.55279 10.9364 8.19885 10.3327C8.19885 10.4013 8.19491 10.5228 8.19491 10.6071V19.808C8.19351 20.0378 8.25334 20.2638 8.36823 20.4629C8.48312 20.6619 8.64893 20.8267 8.84863 20.9404L18.5723 26.5542L15.206 28.4979C15.1894 28.5089 15.1703 28.5155 15.1505 28.5173C15.1307 28.5191 15.1107 28.516 15.0924 28.5082L7.04046 23.8557C5.32135 22.8601 4.06716 21.2235 3.55289 19.3046C3.03862 17.3858 3.30624 15.3413 4.29707 13.6194ZM31.955 20.0556L22.2312 14.4411L25.5976 12.4981C25.6142 12.4872 25.6333 12.4805 25.6531 12.4787C25.6729 12.4769 25.6928 12.4801 25.7111 12.4879L33.7631 17.1364C34.9967 17.849 36.0017 18.8982 36.6606 20.1613C37.3194 21.4244 37.6047 22.849 37.4832 24.2684C37.3617 25.6878 36.8382 27.0432 35.9743 28.1759C35.1103 29.3086 33.9415 30.1717 32.6047 30.6641C32.6047 30.5947 32.6047 30.4733 32.6047 30.3889V21.188C32.6066 20.9586 32.5474 20.7328 32.4332 20.5338C32.319 20.3348 32.154 20.1698 31.955 20.0556ZM35.3055 15.0128C35.2464 14.9765 35.1431 14.9142 35.069 14.8717L27.1045 10.2712C26.906 10.1554 26.6803 10.0943 26.4504 10.0943C26.2206 10.0943 25.9948 10.1554 25.7963 10.2712L16.0726 15.8858V11.9982C16.0715 11.9783 16.0753 11.9585 16.0837 11.9405C16.0921 11.9225 16.1048 11.9068 16.1207 11.8949L24.1719 7.25025C25.4053 6.53903 26.8158 6.19376 28.2383 6.25482C29.6608 6.31589 31.0364 6.78077 32.2044 7.59508C33.3723 8.40939 34.2842 9.53945 34.8334 10.8531C35.3826 12.1667 35.5464 13.6095 35.3055 15.0128ZM14.2424 21.9419L10.8752 19.9981C10.8576 19.9893 10.8423 19.9763 10.8309 19.9602C10.8195 19.9441 10.8122 19.9254 10.8098 19.9058V10.6071C10.8107 9.18295 11.2173 7.78848 11.9819 6.58696C12.7466 5.38544 13.8377 4.42659 15.1275 3.82264C16.4173 3.21869 17.8524 2.99464 19.2649 3.1767C20.6775 3.35876 22.0089 3.93941 23.1034 4.85067C23.0427 4.88379 22.937 4.94215 22.8668 4.98473L14.9024 9.58517C14.7025 9.69878 14.5366 9.86356 14.4215 10.0626C14.3065 10.2616 14.2466 10.4877 14.2479 10.7175L14.2424 21.9419ZM16.071 17.9991L20.4018 15.4978L24.7325 17.9975V22.9985L20.4018 25.4983L16.071 22.9985V17.9991Z" fill="currentColor"></path></svg>'+ '</div>'+ '<div class="texts"><div class="aq-text">'+ '</div>'+ '<div class="copyid" id="copyid">'+ '<div class="icopy">复制</div>' + '</div>'+ '</div>'; '</div>'; if(input.value.length>100){ input.value =''; autoResize(); } // 添加点击事件到动态元素上 newItem.addEventListener('click', function(event) { console.log(event.target) if (event.target.className.toLowerCase() === 'icopy') { console.log('按钮被点击了！'); // 在这里编写按钮被点击时的逻辑 const parentText = event.target.parentNode.previousSibling.innerText; console.log(event.target.parentNode.parentNode.innerText) const tempTextarea = document.createElement("textarea"); tempTextarea.value = parentText; document.body.appendChild(tempTextarea); tempTextarea.select(); document.execCommand("copy"); document.body.removeChild(tempTextarea); } }); list.appendChild(newItem); }else { let list = document.getElementById('myList'); const lastItem = list.lastChild; const textDiv = lastItem.querySelector('.aq-text'); if(textDiv.innerText=='复制'){ // textDiv.innerText=''; } if(data['delta']['content']){ const oldText = textDiv.getAttribute('data-text') || ''; const newText = oldText + data['delta']['content']; textDiv.innerText = newText; var nextSibling = textDiv.nextElementSibling; if (nextSibling) { var elementRect = nextSibling.getBoundingClientRect(); var windowHeight = window.innerHeight; var elementTop = elementRect.top; var elementBottom = elementRect.bottom; // Check if the element is within the visible window height var isVisible = (elementTop < windowHeight-20) && (elementBottom >= 0); // 如果不在视窗内，则滑动到视窗内 var newPosition = nextSibling.getBoundingClientRect().top + window.scrollY - 150; if (!isVisible&&oldText=='') { // 将页面滑动到新元素处 window.scrollTo({ top: newPosition, behavior: 'smooth' }); } } textDiv.setAttribute('data-text', newText); } if(data['finish_reason']=="stop"||data['finish_reason']=="length"){ const oldText = textDiv.getAttribute('data-text') || ''; var finish_reason = textDiv.getAttribute('data-finish') || ''; if (oldText.includes('```')&&finish_reason!='length') { const html = marked(oldText); textDiv.innerText = ''; textDiv.innerHTML = html; } } //中断的处理不好html代码用text显示 if(data['finish_reason']=="stop"){ textDiv.setAttribute('data-finish', "stop"); } if(data['finish_reason']=="length"){ textDiv.setAttribute('data-finish', "length"); } } } }); buffer = parts[parts.length - 1]; push(); }); } push(); }); // `event` 是原生 DOM 事件 if (event) { //alert(event.target.tagName) } } }).catch((error) => { console.log(error); inputBox.classList.remove("processing"); buttonc.classList.remove("buttonc"); const buttoncancel = document.getElementById("button-cancel"); buttoncancel.classList.remove("sh"); alert(error.message+'，稍后重试') }); }, // 添加一个 `cancel` 方法 cancel: function() { if (this.cancelToken) { const inputBox = document.getElementById("text-box"); const buttonc = document.getElementById("button-c"); const buttoncancel = document.getElementById("button-cancel"); inputBox.classList.remove("processing"); buttonc.classList.remove("buttonc"); buttoncancel.classList.remove("sh"); this.cancelToken.cancel('请求已取消'); } }, getText(event) { this.text = event.target.textContent //alert(this.text); const input = document.getElementById("input-box"); text =this.text.trim() //text =text.trim('→') text = text.replace(/”/g, ""); text = text.replace(/“/g, ""); text = text.replace(/→/g, ""); text = text.trim() input.value = text; $("#input-box").focus(); autoResize(); } }, computed: { formattedRangeValue() { return this.rangeValue.toString(); } }, watch: { rangeValue() { document.getElementById("rangeValueFormatted").innerText = this.formattedRangeValue; } } }) // 也可以用 JavaScript 直接调用方法 //app.greet() // -> 'Hello Vue.js!' function escapeHtml(html) { return html.replace(/</g, '<').replace(/>/g, '>'); } function autoResize() { const textarea = document.getElementById("input-box"); textarea.style.height = "auto"; textarea.style.height = (textarea.scrollHeight) + "px"; function isElementBelowViewport(el) { var rect = el.getBoundingClientRect(); return rect.bottom > window.innerHeight; } if (isElementBelowViewport(textarea)) { document.querySelector('.b-i-c1').style.position = "fixed"; document.querySelector('.b-i-c1').style.bottom = "0"; document.querySelector('.b-i-c1').style.top = "unset"; console.log('Element is below the viewport!'); } } </script> <script> var fixedDiv = document.querySelector('.b-i-c1'); // 获取该div距离文档顶部的距离 var offsetTop = fixedDiv.offsetTop; // 监听窗口的滚动事件 window.addEventListener('scroll', function() { // 获取当前滚动的位置 var scrollTop = window.pageYOffset || document.documentElement.scrollTop; // 判断是否需要固定 if (scrollTop >= offsetTop) { fixedDiv.classList.add('fixed'); } else { fixedDiv.classList.remove('fixed'); } }); </script> <style> .b-i-c1{ position: fixed; bottom: 1px; width: 100%; max-width: 50rem; padding-left: 1.5rem; padding-right: 1.5rem; background-color: #fff; top: unset !important; padding-top: 14px; } @media (max-width: 767px) { .b-i-c1 { position: fixed; bottom: 1px; background-color: #fff; /*top: 0px;*/ padding-top: 14px; width: 100%; max-width: 50rem; padding-left: 5px; padding-right: 5px; } } .b-i-c1.fixed { position: fixed; bottom: 1px; top: unset; z-index: 1000; } .nav.fixed{ width: 100%; top: 0; } #footer{ margin-bottom: 50px; } .b-i-c1 { background-color: unset; z-index: 10; } </style> <style> #button-cancel{ background-color: #198de3; color: #fff; padding: 2px 2px; border-radius: 5px; margin: 0 auto; position: fixed; bottom: 55px; display: none; width: max-content; /* margin-left: calc(50% - 108px); */ left: 0; right: 0; } #button-cancel.sh{ display: block; } #button-c svg { display: none; } .button-c .fa { display: block; } .button-c.buttonc .fa { display: none; } #app textarea { padding-right: 32px; } </style> </body> @endsection
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
- 240
- 241
- 242
- 243
- 244
- 245
- 246
- 247
- 248
- 249
- 250
- 251
- 252
- 253
- 254
- 255
- 256
- 257
- 258
- 259
- 260
- 261
- 262
- 263
- 264
- 265
- 266
- 267
- 268
- 269
- 270
- 271
- 272
- 273
- 274
- 275
- 276
- 277
- 278
- 279
- 280
- 281
- 282
- 283
- 284
- 285
- 286
- 287
- 288
- 289
- 290
- 291
- 292
- 293
- 294
- 295
- 296
- 297
- 298
- 299
- 300
- 301
- 302
- 303
- 304
- 305
- 306
- 307
- 308
- 309
- 310
- 311
- 312
- 313
- 314
- 315
- 316
- 317
- 318
- 319
- 320
- 321
- 322
- 323
- 324
- 325
- 326
- 327
- 328
- 329
- 330
- 331
- 332
- 333
- 334
- 335
- 336
- 337
- 338
- 339
- 340
- 341
- 342
- 343
- 344
- 345
- 346
- 347
- 348
- 349
- 350
- 351
- 352
- 353
- 354
- 355
- 356
- 357
- 358
- 359
- 360
- 361
- 362
- 363
- 364
- 365
- 366
- 367
- 368
- 369
- 370
- 371
- 372
- 373
- 374
- 375
- 376
- 377
- 378
- 379
- 380
- 381
- 382
- 383
- 384
- 385
- 386
- 387
- 388
- 389
- 390
- 391
- 392
- 393
- 394
- 395
- 396
- 397
- 398
- 399
- 400
- 401
- 402
- 403
- 404
- 405
- 406
- 407
- 408
- 409
- 410
- 411
- 412
- 413
- 414
- 415
- 416
- 417
- 418
- 419
- 420
- 421
- 422
- 423
- 424
- 425
- 426
- 427
- 428
- 429
- 430
- 431
- 432
- 433
- 434
- 435
- 436
- 437
- 438
- 439
- 440
- 441
- 442
- 443
- 444
- 445
- 446
- 447
- 448
- 449
- 450
- 451
- 452
- 453
- 454
- 455
- 456
- 457
- 458
- 459
- 460
- 461
- 462
- 463
- 464
- 465
- 466
- 467
- 468
- 469
- 470
- 471
- 472
- 473
- 474
- 475
- 476
- 477
- 478
- 479
- 480
- 481
- 482
- 483
- 484
- 485
- 486
- 487
- 488
- 489
- 490
- 491
- 492
- 493
- 494
- 495
- 496
- 497
- 498
- 499
- 500
- 501
- 502
- 503
- 504
- 505
- 506
- 507
- 508
- 509
- 510
- 511
- 512
- 513
- 514
- 515
- 516
- 517
- 518
- 519
- 520
- 521
- 522
- 523
- 524
- 525
- 526
- 527
- 528
- 529
- 530
- 531
- 532
- 533
- 534
- 535
- 536
- 537
- 538
- 539
- 540
- 541
- 542
- 543
- 544
- 545
- 546
- 547
- 548
- 549
- 550
- 551
- 552
- 553
- 554
- 555
- 556
- 557
- 558
- 559
- 560
- 561
- 562
- 563
- 564
- 565
- 566
- 567
- 568
- 569
- 570
- 571
- 572
- 573
- 574
- 575
- 576
- 577
- 578
- 579
- 580
- 581
- 582
- 583
- 584
- 585
- 586
- 587
- 588
- 589
- 590
- 591
- 592
- 593
- 594
- 595
- 596
- 597
- 598
- 599
- 600
- 601
- 602
- 603
- 604
- 605
- 606
- 607
- 608
- 609
- 610
- 611
- 612
- 613
- 614
- 615
- 616
- 617
- 618
- 619
- 620
- 621
- 622
- 623
- 624
- 625
- 626
- 627
- 628
- 629
- 630
- 631
- 632
- 633
- 634
- 635
- 636
- 637
- 638
- 639
- 640
- 641
- 642
- 643
- 644
- 645
- 646
- 647
- 648
- 649
- 650
- 651
- 652
- 653
- 654
- 655
- 656
- 657
- 658
- 659
- 660
- 661
- 662
- 663
- 664
- 665
- 666
- 667
- 668
- 669
- 670
- 671
- 672
- 673
- 674
- 675
- 676
- 677
- 678
- 679
- 680
- 681
- 682
- 683
- 684
- 685
- 686
- 687
- 688
- 689
- 690
- 691
- 692
- 693
- 694
- 695
- 696
- 697
- 698
- 699
- 700
- 701
- 702
- 703
- 704
- 705
- 706
- 707
- 708
- 709
- 710
- 711
- 712
- 713
- 714
- 715
- 716
- 717
- 718
- 719
- 720
- 721
- 722
- 723
- 724
- 725
- 726
- 727
- 728
- 729
- 730
- 731
- 732
- 733
- 734
- 735
- 736
- 737
- 738
- 739
- 740
- 741
- 742
- 743
- 744
- 745
- 746
- 747
- 748
- 749
- 750
- 751
- 752
- 753
- 754
- 755
- 756
- 757
- 758
- 759
- 760
- 761
- 762
- 763
- 764
- 765
- 766
- 767
- 768
- 769
- 770
- 771
- 772
- 773
- 774
- 775
- 776
- 777
- 778
- 779
- 780
- 781
- 782
- 783
- 784
- 785
- 786
- 787
- 788
- 789
- 790
- 791
- 792
- 793
- 794
- 795
- 796
- 797
- 798
- 799
- 800
- 801
- 802
- 803
- 804
- 805
- 806
- 807
- 808
- 809
- 810
- 811
- 812
- 813
- 814
- 815
- 816
- 817
- 818
- 819
- 820
- 821
- 822
- 823
- 824
- 825
- 826
- 827
- 828
- 829
- 830
- 831
- 832
- 833
- 834
- 835
- 836
- 837
- 838
- 839
- 840
- 841
- 842
- 843
- 844
- 845
- 846
- 847
- 848
- 849
- 850
- 851
- 852
- 853
- 854
- 855
- 856
- 857
- 858
- 859
- 860
- 861
- 862
- 863
- 864
- 865
- 866
- 867
- 868
- 869
- 870
- 871
- 872
- 873
- 874
- 875
- 876
- 877
- 878
- 879
- 880
- 881
- 882
- 883
- 884
- 885
- 886
- 887
- 888
- 889
- 890
- 891
- 892
- 893
- 894
- 895
- 896
- 897
- 898
- 899
- 900
- 901
- 902
- 903
- 904
- 905
- 906
- 907
- 908
- 909
- 910
- 911
- 912
- 913
- 914
- 915
- 916
- 917
- 918
- 919
- 920
- 921
- 922
- 923
- 924
- 925
- 926
- 927
- 928
- 929
- 930
- 931
- 932
- 933
- 934
- 935
- 936
- 937
- 938
- 939
- 940
- 941
- 942
- 943
- 944
- 945
- 946
- 947
- 948
- 949
- 950
- 951
- 952
- 953
- 954
- 955
- 956
- 957
- 958
- 959
- 960
- 961
- 962
- 963
- 964
- 965
- 966
- 967
- 968
- 969
- 970
- 971
- 972
- 973
- 974
- 975
- 976
- 977
- 978
- 979
- 980
- 981
- 982
- 983
- 984
- 985
- 986
- 987
- 988
- 989
- 990
- 991
- 992
- 993
- 994
- 995
- 996
- 997
- 998
- 999
- 1000
- 1001
- 1002
- 1003
- 1004
- 1005
- 1006
- 1007
- 1008
- 1009
- 1010
- 1011
- 1012
- 1013
- 1014
- 1015
- 1016
- 1017
- 1018
- 1019
- 1020
- 1021
- 1022
- 1023
- 1024
- 1025
- 1026
- 1027
- 1028
- 1029
- 1030
- 1031
- 1032
- 1033
- 1034
- 1035
- 1036
- 1037
- 1038
- 1039
- 1040
- 1041
- 1042
- 1043
- 1044
- 1045
- 1046
- 1047
- 1048
- 1049
- 1050
- 1051
- 1052
- 1053
- 1054
- 1055
- 1056
- 1057
- 1058
- 1059
- 1060
- 1061
- 1062
- 1063
- 1064
- 1065
- 1066
- 1067
- 1068
- 1069
- 1070
- 1071
- 1072
- 1073
- 1074
- 1075
- 1076
- 1077
- 1078
- 1079
- 1080
- 1081
- 1082
- 1083
- 1084
- 1085
- 1086
- 1087
- 1088
- 1089
- 1090
- 1091
- 1092
- 1093
- 1094
- 1095
- 1096
- 1097
- 1098
- 1099
- 1100
- 1101
- 1102
- 1103
- 1104
- 1105
- 1106
- 1107
- 1108
- 1109
- 1110
- 1111
- 1112
- 1113
- 1114
- 1115
- 1116
- 1117
- 1118
- 1119
- 1120
- 1121
- 1122
- 1123
- 1124
- 1125
- 1126
- 1127
- 1128
- 1129
- 1130
- 1131
- 1132
- 1133
- 1134
- 1135
- 1136
- 1137
- 1138
- 1139
- 1140
- 1141
- 1142
- 1143
- 1144
- 1145
- 1146
- 1147
- 1148
- 1149
- 1150
- 1151
- 1152
- 1153
- 1154
- 1155
- 1156
- 1157
- 1158
- 1159
- 1160
- 1161
- 1162
- 1163
- 1164
- 1165
- 1166
- 1167
- 1168
- 1169
- 1170
- 1171
- 1172
- 1173
- 1174
- 1175
- 1176
- 1177
- 1178
- 1179
- 1180
- 1181
- 1182
- 1183
- 1184
- 1185
- 1186
- 1187
- 1188
- 1189
- 1190
- 1191
- 1192
- 1193
- 1194
- 1195
- 1196
- 1197
- 1198
- 1199
- 1200
- 1201
- 1202
- 1203
- 1204
- 1205
- 1206
- 1207
- 1208
- 1209
- 1210
- 1211
- 1212
- 1213
- 1214
- 1215
- 1216
- 1217
- 1218
- 1219
- 1220
- 1221
- 1222
- 1223
- 1224
- 1225
- 1226
- 1227
- 1228
- 1229
- 1230
- 1231
- 1232
- 1233
- 1234
- 1235
- 1236
- 1237
- 1238
- 1239
- 1240
- 1241
- 1242
- 1243
- 1244
- 1245
- 1246
- 1247
- 1248
- 1249
- 1250
- 1251
- 1252
- 1253
- 1254
- 1255
- 1256
- 1257
- 1258
- 1259
- 1260
- 1261
- 1262
- 1263
- 1264
- 1265
- 1266
- 1267
- 1268
- 1269
- 1270
- 1271
- 1272
- 1273
- 1274
- 1275
- 1276
- 1277
- 1278
- 1279
- 1280
- 1281
- 1282
- 1283
- 1284
- 1285
- 1286
- 1287
- 1288
- 1289
- 1290
- 1291
- 1292
- 1293
- 1294
- 1295
- 1296
- 1297
- 1298
- 1299
- 1300
- 1301
- 1302
- 1303
- 1304
- 1305
- 1306
- 1307
- 1308
- 1309
- 1310
- 1311
- 1312
- 1313
- 1314
- 1315
- 1316
- 1317
- 1318
- 1319
- 1320
- 1321
- 1322
- 1323
- 1324
- 1325
- 1326
- 1327
- 1328
- 1329
- 1330
- 1331
- 1332
- 1333
- 1334
- 1335
- 1336
- 1337
- 1338
- 1339
- 1340
- 1341
- 1342
- 1343
- 1344
- 1345
- 1346
- 1347
- 1348
- 1349
- 1350
- 1351
- 1352
- 1353
- 1354
- 1355
- 1356
- 1357
- 1358
- 1359
- 1360
- 1361
- 1362
- 1363
- 1364
- 1365
- 1366
- 1367
- 1368
- 1369
- 1370
- 1371
- 1372
- 1373
- 1374
- 1375
- 1376
- 1377
- 1378
- 1379
- 1380
- 1381
- 1382
- 1383
- 1384
- 1385
- 1386
- 1387
- 1388
- 1389
- 1390
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/86064
推荐阅读
相关标签
