实现了如下功能（使用react实现，原创）
实现功能：
1、对接gpt35模型问答，并实现了流式传输（在java端）
2、在实际使用中，我们的问答历史会经常分享给他人，所以下图的 copy all 按钮，可以copy成一个json然后通过社交软件发送给别人，别人就可以轻松应用你的问答历史。
3、选择文件，在我们预想当中，我们可能会经常遇到向文档提问（当时还不知道embedding的知识哈哈哈），通过拆分文档，一段段跟gpt提问，当前段落是否和用户内容相关，相关就回答段落问题（段落拆分通过java实现）
4、我们需要经常保存我们的聊天记录，特别是在调试我们的prompt的时候，所以加了一个缓存功能，可以随时提取缓存记录来提问。
5、利用这个分享的时候，设计了很多便利我去学习英语的prompt,避免老是手打提示词
role.js
json
export default {
"专业的英语翻译家": (text = "示例") => {
return "现在你充当我专业的翻译家。当我输入中文，你就翻译成英文。当我输入英文，你就翻译成中文。请翻译：" + text
},
"文章截断翻译": (text = "示例") => {
return "因为我是中国的软件开发工程师，我要面试美国的软件开发岗位，所以我要学习英语，我要你充当我的翻译家，" +
"所以我给一些中文的软件知识给你帮我翻译，但是你不能直译，因为中文说出来的知识，英语的表达有不一样，所" +
"以请你理解我的中文知识，按照自己的理解用英语表达出来，所以我给你一段文字，首先你要将文章拆分成一句一句，理解每" +
"一句的意思，然后用英语将你理解的意思输出。输出格式为一句中文，输出一个回车符，下一行输出你的英文理解。并且每一句末尾都" +
"给生僻词单独翻译。文章内容为："" + text + """
},
"给出5个英语句子对应的词汇": (text = "示例") => {
return "我给你一个英文单词，请你用这个英文单词造出5个英文句子，句子要求是计算机互联网相关知识" +
"（包括但不限于前端专业细节知识，react专业细节知识，vue专业细节知识，js专业细节知识，管理系统的功能专业细节知识，" +
"http网络相关专业细节知识），并附带中文翻译。最后还要给出他的衍生词汇，" +
"给出他的发音以及词汇类型。单词为：" + text
},
"给你一个中文词汇，你给我说出英语一般用什么句式去表达": (text = "示例") => {
return "我给你一个中文词汇，你给我说出英语一般用什么句式去表达。" +
"例如：中文意思：确保一些东西是有效的，英语一般表达为：ensure that somethings is valid。" +
"这个（ensure that ... is valid）就是英语的常规表达句式。" +
"例如：允许轻松自定义表单验证，，英语一般表达为：ensure that somethings is valid。" +
"这个（allows for ... 。" +
"中文词汇为：" + text
},
"面试中怎么表达这个中文意思": (text = "示例") => {
return "在美国的it开发工程师英语面试当中，怎么表达：" + text + ", 请用三种或者三种以上不同的句式表达"
},
"在英语中有多少英文表达这个中文意思": (text = "示例") => {
return "在英语中有多少英文表达这个中文意思，请列举出来，中文为：" + text
},
"假设你是一个从小就在美国长大的人": (text = "示例") => {
return "假设你是一个从小就在美国长大的人，你已经30岁，在互联网公司工作8年，请你使用简洁的口语帮我将中文翻译成英文，重点是简洁，简洁，你自己听得懂就好。中文为：" + text
}
}index.js
javascript
import React, { useState, useCallback, useRef } from 'react';
import './index.css';
import { useEffect } from 'react';
import axios from 'axios';
import { PrismLight as SyntaxHighlighter } from "react-syntax-highlighter";
import { vscDarkPlus, coyWithoutShadows, darcula } from 'react-syntax-highlighter/dist/esm/styles/prism';
// 设置高亮的语言
import { jsx, javascript } from "react-syntax-highlighter/dist/esm/languages/prism";
import ReactMarkdown from 'react-markdown';
import ClipboardJS from 'clipboard';
import { Drawer, Input, message, Select } from 'antd';
import roles from "./roles";
const { Search } = Input;
const { TextArea } = Input;
const { Option } = Select;
function clearLocalStorage() {
localStorage.setItem("LOCALDATA", "[]");
}
// 封装localStorage的get方法
function getLocalStorage() {
let arrStr = localStorage.getItem("LOCALDATA");
if (arrStr) {
let arr = JSON.parse(arrStr);
return arr;
} else {
return [];
}
}
const them = {
dark: vscDarkPlus,
light: coyWithoutShadows
};
const ENDTEXT = "__END__";
let comments = [];
let streaming = false
export default function App1() {
const [question, setQuestion] = useState("");
const [roleType, setRoleType] = useState("");
const [frontPrompts, setFrontPrompts] = useState("");
const list_container_id = useRef(null);
const currentTexts = useRef("");
const [count, setCount] = useState(0);
const [messageApi, contextHolder] = message.useMessage();
const [open, setOpen] = useState(false);
const [openMoreFunction, setOpenMoreFunction] = useState(false);
const [jsonData, setJsonData] = useState("{}");
const key = 'copy';
const postStreamList = async (callback) => {
let requestList = [];
comments.map((item) => {
if (item.type === "chatgpt-url") {
if (item.contents[0]) {
requestList.push({ "role": "user", "content": item.contents[0].hiddenQuestion });
requestList.push({ "role": "assistant", "content": item.contents[0].hiddenContent });
}
} else {
requestList.push({ "role": "user", "content": item.name });
if (item.contents[0] && item.contents[0].text) {
requestList.push({ "role": "assistant", "content": item.contents[0].text });
}
}
})
const requestOptions = {
method: 'POST',
headers: {
'Content-Type': 'application/json',
"Authorization": "Bearer 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"
},
body: JSON.stringify({
"model": "gpt-3.5-turbo",
"messages": requestList
})
};
let count = 0;
const streamResponse = await fetch('/chat', requestOptions);
// const streamResponse = await fetch('/search/api/dev/stream', requestOptions);
const reader = streamResponse.body.getReader();
let errText = "";
const read = () => {
return reader.read().then(({ done, value }) => {
count++;
if (done) {
console.log("victor react reviced: end");
callback(ENDTEXT);
return;
}
const textDecoder = new TextDecoder();
// console.log("返回的数据：", textDecoder.decode(value));
let text = "";
const strArr = (errText + textDecoder.decode(value)).split("data: ");
console.log("解析字符", textDecoder.decode(value))
if (strArr) {
for (let i = 0; i < strArr.length; i++) {
let json = {};
if (strArr[i] && strArr[i] !== "[DONE]") {
try {
json = JSON.parse(strArr[i]);
if (json.choices.length && json.choices[0].delta.content) {
text = text + json.choices[0].delta.content;
}
errText = "";
} catch (e) {
console.log("出错", strArr[i])
errText = strArr[i];
}
}
}
callback(text);
}
return read();
});
}
read();
}
const postStreamListAudio = async (erjinzhi) => {
const requestOptions = {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
"model": "gpt-3.5-turbo",
"messages": [{ "role": "assistant", "content": erjinzhi }]
})
};
let count = 0;
const streamResponse = await fetch('/chat', requestOptions);
// const streamResponse = await fetch('/search/api/dev/stream', requestOptions);
const reader = streamResponse.body.getReader();
let errText = "";
const read = () => {
return reader.read().then(({ done, value }) => {
count++;
if (done) {
console.log("victor react reviced: end");
return;
}
const textDecoder = new TextDecoder();
// console.log("返回的数据：", textDecoder.decode(value));
let text = "";
const strArr = (errText + textDecoder.decode(value)).split("data: ");
console.log("解析字符", textDecoder.decode(value))
if (strArr) {
for (let i = 0; i < strArr.length; i++) {
let json = {};
if (strArr[i] && strArr[i] !== "[DONE]") {
try {
json = JSON.parse(strArr[i]);
if (json.choices.length && json.choices[0].delta.content) {
text = text + json.choices[0].delta.content;
}
errText = "";
} catch (e) {
console.log("出错", strArr[i])
errText = strArr[i];
}
}
}
console.log(text);
}
return read();
});
}
read();
}
const addLocalStorage = (dataArr) => {
var now = new Date();
var year = now.getFullYear(); //获取完整的年份(4位,1970-????)
var month = now.getMonth() + 1; //获取当前月份(0-11,0代表1月)
var date = now.getDate(); //获取当前日(1-31)
var hour = now.getHours(); //获取当前小时数(0-23)
var minute = now.getMinutes(); //获取当前分钟数(0-59)
var second = now.getSeconds(); //获取当前秒数(0-59)
var timestamp = year + "-" + (month < 10 ? "0" + month : month) + "-" + (date < 10 ? "0" + date : date) + " " + (hour < 10 ? "0" + hour : hour) + ":" + (minute < 10 ? "0" + minute : minute) + ":" + (second < 10 ? "0" + second : second);
try {
let arrStr = localStorage.getItem("LOCALDATA");
if (arrStr) {
let arr = JSON.parse(arrStr);
arr.push({
time: timestamp,
dataArr: dataArr
});
localStorage.setItem("LOCALDATA", JSON.stringify(arr));
} else {
let arr = [];
arr.push({
time: timestamp,
dataArr: dataArr
});
localStorage.setItem("LOCALDATA", JSON.stringify(arr));
}
messageApi.open({
key,
type: 'success',
content: '缓存成功',
duration: 1
});
} catch (err) {
console.error('localStorage set error: ', err);
}
}
const addComment = async (e) => {
if (question.trim() === '') {
alert('请输入问题');
return;
}
setQuestion('');
let index = comments.length;
comments.push({
id: Math.random(),
role: 'user',
type: "chatgpt",
name: question,
contents: []
});
setCount(count + 1);
setTimeout(async () => {
let responseList = await getList();
if (responseList[0].type === "chatgpt-url") {
comments[index].type = "chatgpt-url";
}
comments[index].contents = responseList;
setQuestion('');
setCount(0);
}, 0);
}
const getList = (question) => {
let requestList = [];
comments.map((item) => {
if (item.type === "chatgpt-url") {
if (item.contents[0]) {
requestList.push({ "role": "user", "content": item.contents[0].hiddenQuestion });
requestList.push({ "role": "assistant", "content": item.contents[0].hiddenContent });
}
} else {
requestList.push({ "role": "user", "content": item.name });
if (item.contents[0]) {
requestList.push({ "role": "assistant", "content": item.contents[0].text });
}
}
})
return new Promise((resolve) => {
axios.post('/search/send', {
frequency_penalty: 0,
max_tokens: 2048,
model: "text-davinci-003",
presence_penalty: 0,
message: requestList,
temperature: 0.5,
top_p: 1
}).then((response) => {
if (Array.isArray(response.data.choices)) {
// console.log('请求成功', response);
let arr = response.data.choices.map((item) => {
if (item.message.type === "chatgpt-url") {
return {
type: item.message.type,
index: item.index,
text: "我已经对这个链接学习完成，你可以向我提问关于这个链接的内容",
hiddenQuestion: item.message.question,
hiddenContent: item.message.content
}
} else {
return {
type: item.type,
index: item.index,
text: item.message.content
}
}
})
resolve(arr);
} else {
alert('程序错误');
}
// 请求成功
}).catch((error) => {
// 请求失败，
console.log(error);
});
})
}
const scrollBottom = () => {
if (!list_container_id.current) {
return;
}
setTimeout(() => {
list_container_id.current.scrollTop = list_container_id.current.scrollHeight
}, 0);
}
const updateScroll = useCallback(() => {
scrollBottom()
})
const addStreamComment = async ({
question1 = "",
isCreate = false,
isContinue = false
}) => {
if (question.trim() === '' && !question1 && isContinue === false) {
alert('请输入问题');
return;
}
streaming = true;
setQuestion('');
let index = 0;
// 修改不需要新数据, 创建就需要push新item
if (isCreate || comments.length === 0) {
console.log("走创建")
index = comments.length;
let questionText = question1 || question;
if (roles[roleType]) {
questionText = roles[roleType](question1 || question)
}
comments.push({
id: Math.random(),
role: 'user',
type: "chatgpt",
name: questionText,
edit: false,
contents: [{ index: Math.random(), text: "", edit: false }]
});
} else if (isContinue === true) {
console.log("走继续")
index = comments.length - 1;
comments[index] = {
...comments[index],
id: Math.random(),
role: 'user',
type: "chatgpt",
edit: false
};
} else {
console.log("走编辑")
index = comments.length - 1;
comments[index] = {
id: Math.random(),
role: 'user',
type: "chatgpt",
name: question1 || question,
edit: false,
contents: [{ index: Math.random(), text: "", edit: false }]
};
}
setCount(count + 1);
let str = comments[index].contents[0].text;
const callback = (text) => {
if (text === ENDTEXT) {
streaming = false;
setCount(1);
return;
}
str = str + text;
comments[index].contents[0].text = str;
setQuestion('');
setCount((count) => count + 1);
}
postStreamList(callback);
}
const copy = (index) => {
const clipboard = new ClipboardJS("#copyBtn" + index);
clipboard.on('success', () => {
messageApi.open({
key,
type: 'success',
content: '复制成功',
duration: 1
});
});
}
useEffect(() => {
const clipboard = new ClipboardJS("#copyBtnAll");
clipboard.on('success', () => {
messageApi.open({
key,
type: 'success',
content: '复制成功',
duration: 1
});
});
comments.map((item, index) => {
const clipboard = new ClipboardJS("#copyBtn" + index);
clipboard.on('success', () => {
messageApi.open({
key,
type: 'success',
content: '复制成功',
duration: 2
});
});
})
})
console.log("comments", comments)
const renderList = () => {
return comments.length === 0 ?
(<div style={{ flex: 1 }}>
<div className='no-comment'>暂无问题，快去提问吧~</div>
</div>)
: (
<div
ref={(el) => {
list_container_id.current = el;
}}
style={{ flex: 1 }}
className="list_container"
>
<ul style={{ color: 'white' }}>
{comments.map((item, index) => (
<li key={item.id} style={{ color: 'white' }}>
{
item.name ? (
<div className='quiz'>
<div className='response' style={{ marginLeft: 8 }}>
<div className='action_btn'>
<div>提问：</div>
<div className="copy_button" id={"copyBtn" + index} data-clipboard-text={item.name} onClick={(e) => copy(index)}>copy</div>
{comments.length === index + 1 ? (
<div
className="copy_button"
onClick={() => {
if (item.edit === false) {
item.edit = true;
setCount(count + 1);
} else {
addStreamComment({
question1: item.name,
isCreate: false,
isContinue: false
});
}
}}>{!item.edit ? "edit" : "submit"}</div>
) : null}
<div
className="copy_button"
onClick={() => {
comments.splice(index, 1);
setCount(count + 1);
}}>delete</div>
</div>
{
!item.edit ? <p>{item.name}</p> : (
<div className="">
<TextArea
rows={4}
defaultValue={item.name}
onChange={(e) => {
item.name = e.target.value;
}}
/>
</div>
)
}
</div>
</div>
) : null
}
{
item.contents.length ? (
<>
<div
className='answer'>
<div style={{ marginLeft: 8, marginBottom: 10 }} >
<div className='action_btn'>
<div>回答：</div>
<div className="copy_button" id={"copyBtn" + index} data-clipboard-text={item.contents[0].text} onClick={(e) => copy(index)}>copy</div>
</div>
<pre style={{ width: "100%" }}><OmsSyntaxHighlight textContent={item.contents[0].text} language={"javascript"} darkMode /></pre></div>
</div>
<div>{currentTexts.current}</div>
</>
) : <div>
<div style={{ display: 'flex', justifyContent: 'center', backgroundColor: 'black' }}><div className='heike' >chatgpt</div></div>
<div className='answer2'>思考中...</div>
</div>
}
</li>
))
}
</ul >
</div >
)
}
const handleForm = (e) => {
setQuestion(e.target.value)
}
const handleSelectChange = (value) => {
setFrontPrompts(value);
setRoleType(value);
};
useEffect(() => {
scrollBottom()
})
const overWriteData = (jsonData) => {
let jsonData1 = JSON.parse(jsonData);
// console.log("jsonData1", jsonData1)
comments = [];
jsonData1.map((item, index) => {
if (index % 2 === 0) {
comments.push({
id: Math.random(),
role: 'user',
type: "chatgpt",
name: item.content,
edit: false,
contents: [{
index: Math.random(),
edit: false,
text: jsonData1[index + 1].content
}]
})
// console.log(comments)
setCount(count + 1)
}
})
}
const handleLocalDataChange = (value) => {
overWriteData(value);
};
useEffect(() => {
const mp3File = document.getElementById('mp3-file');
mp3File.addEventListener('change', () => {
const file = mp3File.files[0];
const reader = new FileReader();
reader.addEventListener('loadend', () => {
const byteArray = new Uint8Array(reader.result);
// 将byteArray上传至服务器
console.log(byteArray)
postStreamListAudio(byteArray);
});
reader.readAsArrayBuffer(file);
});
}, [])
const renderHeader = () => {
return (
<div className='header_button'>
<div
className="copy_all_button"
style={{ color: "white" }}
onClick={() => {
let tmp = [];
comments.map((item) => {
tmp.push({
role: 'user',
content: item.name,
})
tmp.push({
role: 'assistant',
content: item.contents[0].text
})
})
setJsonData(JSON.stringify(tmp));
setOpen(true);
}}>
copy all
</div>
<input type="file" id="mp3-file"></input>
<div
className="copy_all_button"
onClick={() => {
setOpenMoreFunction(true);
}}
style={{ color: "white" }}
>
更多功能
</div>
</div>
)
}
const renderDrawerCopyBtnAll = () => {
return (
<Drawer
title={
<div style={{ display: 'flex' }}>
<div
className='copy_button'
id={"copyBtnAll"}
data-clipboard-text={jsonData}
onClick={(e) => {
const clipboard = new ClipboardJS("#copyBtnAll");
clipboard.on('success', () => {
messageApi.open({
key,
type: 'success',
content: '复制成功',
duration: 2
});
});
}}>copy</div>
<div className='copy_button' onClick={() => {
try {
overWriteData(jsonData);
setOpen(false);
} catch (e) {
messageApi.open({
key,
type: 'error',
content: 'json格式出错',
duration: 2
});
}
}}>
执行json
</div>
<div className='copy_button' onClick={() => {
try {
addLocalStorage(jsonData);
} catch (e) {
messageApi.open({
key,
type: 'error',
content: 'json格式出错',
duration: 2
});
}
}}>
缓存
</div>
</div>
}
placement={"bottom"}
open={open}
size='small'
onClose={() => {
setOpen(false)
}}
>
<TextArea
rows={4}
value={jsonData}
onChange={(e) => {
setJsonData(e.target.value);
}}
/>
</Drawer>
)
}
const renderDrawerMoreFunction = () => {
return (
<Drawer
title={"更多功能"}
placement={"bottom"}
open={openMoreFunction}
size='small'
onClose={() => {
setOpenMoreFunction(false)
}}
>
<div>
{
!streaming ? (
<button
className="copy_all_button"
onClick={() => {
comments = [];
setCount(0);
}}>clear</button>
) : null
}
{
<button
className="copy_all_button"
onClick={() => {
clearLocalStorage();
setCount(10);
}}>clearStorage</button>
}
<div>
<span>角色:</span>
<Select
style={{ width: '100%' }}
defaultValue="origin"
onChange={handleSelectChange}
options={[
{ value: 'origin', label: 'origin' },
...Object.keys(roles).map((role) => ({ value: role, label: role }))
]}
/>
</div>
<div>
<span>缓存:</span>
<Select
style={{ width: '100%' }}
onChange={handleLocalDataChange}
>
{
getLocalStorage().length ? getLocalStorage().map((item) => {
return <Option value={item.dataArr} key={Math.random()}>{item.time}</Option>
}) : <Option value={"0"} key="无">无</Option>
}
</Select>
</div>
</div>
</Drawer>
)
}
const renderFrontPrompts = () => {
if (frontPrompts && roles[frontPrompts]) {
return <div className='frontPrompts'>前置指令：{roles[frontPrompts]()}</div>;
} else {
return null;
}
}
const renderQuestion = () => {
return (
<div className='input_style'>
<TextArea
className='input_quertion'
type="text"
placeholder="请输入问题"
value={question}
name="question"
onChange={handleForm}
autoSize={{ minRows: 1, maxRows: 5 }}
/>
<div style={{ width: '1vw' }}></div>
<button onClick={() => {
addStreamComment({
isContinue: true,
isCreate: false,
question1: ""
});
}} className="confirm_button" >继续</button>
<div style={{ width: '1vw' }}></div>
<button onClick={() => {
const pattern = /(http|https):\/\/([\w.]+\/?)\S*/;
addStreamComment({ isCreate: true, isContinue: false, question1: "" });
}} className="confirm_button" >提问</button>
</div>
)
}
return (
<div className='app_container'>
{renderHeader()}
{renderFrontPrompts()}
{renderList()}
{contextHolder}
{renderQuestion()}
{renderDrawerCopyBtnAll()}
{renderDrawerMoreFunction()}
</div>
)
}
const OmsSyntaxHighlight = (props) => {
const { textContent, darkMode, language = 'txt' } = props;
const [value, setValue] = useState(textContent);
if (typeof darkMode === 'undefined') {
them.light = darcula;
}
if (typeof darkMode === 'boolean') {
them.light = coyWithoutShadows;
}
useEffect(() => {
SyntaxHighlighter.registerLanguage("jsx", jsx);
SyntaxHighlighter.registerLanguage("javascript", javascript);
SyntaxHighlighter.registerLanguage("js", javascript);
}, []);
return (
<ReactMarkdown source={value} escapeHtml={false} language={language}>{textContent}</ReactMarkdown>
);
};css文件
css
body,
html {
margin: 0;
}
ul,
li,
p {
padding: 0;
margin: 0;
list-style: none
}
h3 {
margin-bottom: 0;
}
.input_quertion {
width: 50vw;
height: 50px;
border-radius: 10px;
border: 1px solid black;
}
pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}
.copy_button {
line-height: 35px;
margin-right: 4px;
border: 1px solid royalblue;
}
.copy_all_button {
line-height: 44px;
margin-right: 4px;
border: 1px solid royalblue;
}
.content {
width: 280px;
margin: 5px;
border: 1px solid black;
}
.quickButton {
width: 70px;
border-radius: 10px;
background-color: #03b96b;
border: 0;
height: 30px;
color: white;
position: absolute;
right: 10px;
}
.no-comment {
text-align: center;
padding: 20px;
color: white;
background-color: rgb(53, 54, 65);
}
.frontPrompts {
text-align: left;
padding: 8px 46px;
color: white;
font-size: 12px;
background-color: rgb(53, 54, 65);
border-bottom: 1px solid black;
}
.app_container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
background-color: rgb(53, 54, 65);
}
.confirm_button {
width: 26vw;
border-radius: 10px;
background-color: #03b96b;
border: 0;
height: 50px;
color: white;
box-shadow: 7px 6px 28px 1px rgba(0, 0, 0, 0.24);
cursor: pointer;
outline: none;
transition: 0.2s all;
}
.list_container {
overflow: auto;
flex: 1;
}
.qiu {
width: 15%;
height: 15%;
}
.chatGPTImg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 300px;
height: 300px;
z-index: 999;
}
.response {
overflow-wrap: break-word;
word-break: normal;
white-space: normal;
flex: 1;
}
.header_button {
width: 100%;
height: 67px;
display: flex;
align-items: center;
bottom: 0;
padding: 10px 40px 10px;
border-bottom: 1px solid;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.3);
}
.input_style {
width: 100%;
display: flex;
bottom: 0;
padding: 1%;
align-items: end;
}
.action_btn {
display: flex;
align-items: flex-start;
color: white;
}
.quiz {
display: flex;
align-items: flex-start;
padding: 10px 40px 10px;
color: white;
line-height: 41px;
background-color: rgb(53, 54, 65);
}
.quiz_avatar {
width: 40px;
height: 40px;
}
.answer {
display: flex;
background-color: #3b3d53;
color: white;
height: auto;
line-height: 35px;
padding: 20px 40px;
overflow: auto;
white-space: normal;
word-break: break-all;
}
.answer2 {
text-align: center;
padding-top: 40px;
}
.confirm_button:active {
transform: scale(0.98);
background-color: blue;
box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
}