mirror of
https://github.com/zhayujie/bot-on-anything.git
synced 2026-01-19 09:41:07 +08:00
159 lines
5.7 KiB
HTML
159 lines
5.7 KiB
HTML
<!doctype html>
|
||
<html lang="en" dir="ltr">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- Title -->
|
||
<title>ChatGPT</title><!-- Bootstrap Css -->
|
||
<link href="./static/1.css" rel="stylesheet" />
|
||
<style>
|
||
button {
|
||
font-family: 'Microsoft YaHei';
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body class="">
|
||
<div class="no-border">
|
||
<div id="chat" class="conv-form-wrapper">
|
||
</div>
|
||
</div>
|
||
<div class="drawer-icon-container">
|
||
<div class="drawer-icon">
|
||
<div class="wrenchFilled icon"></div>
|
||
</div>
|
||
<div class="drawer">
|
||
<div class="drawer-header">
|
||
<h2>设置</h2>
|
||
<button id="close-drawer">X</button>
|
||
</div>
|
||
<div class="drawer-content">
|
||
<div hidden="true">
|
||
<input type="checkbox" id="bold" name="bold">
|
||
<label for="bold">Bold</label>
|
||
<input type="checkbox" id="italic" name="italic">
|
||
<label for="italic">Italic</label>
|
||
</div>
|
||
<div>
|
||
<label for="backgroundColor">背景颜色:</label>
|
||
<input type="color" id="backgroundColor" name="backgroundColor" value="#ffffff">
|
||
</div>
|
||
<div>
|
||
<p>AI回复方式：</p>
|
||
<input type="radio" id="option1" name="conversationType" class="option-input radio" value=1 checked>
|
||
<label for="option1">一次性发送</label>
|
||
<input type="radio" id="option2" name="conversationType" class="option-input radio" value=2>
|
||
<label for="option2">逐段发送</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="drawer-overlay"></div>
|
||
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
|
||
<script src="https://cdn.bootcdn.net/ajax/libs/marked/4.2.12/marked.min.js"></script>
|
||
<script src="https://cdn.bootcdn.net/ajax/libs/autosize.js/6.0.1/autosize.min.js"></script>
|
||
<script src="https://cdn.bootcdn.net/ajax/libs/socket.io/4.6.1/socket.io.js"></script>
|
||
<script src="./static/1.js"></script>
|
||
<script>
|
||
var rollbackTo = false;
|
||
var originalState = false;
|
||
|
||
function storeState(a) {
|
||
rollbackTo = a.current
|
||
}
|
||
|
||
function rollback(a) {
|
||
if (rollbackTo != false) {
|
||
if (originalState == false) {
|
||
originalState = a.current.next
|
||
}
|
||
a.current.next = rollbackTo
|
||
}
|
||
}
|
||
|
||
function restore(a) {
|
||
if (originalState != false) {
|
||
a.current.next = originalState
|
||
}
|
||
}
|
||
|
||
var ConvStateMap = {
|
||
bold: false,
|
||
italic: false,
|
||
backgroundColor: '#ffffff',
|
||
conversationType: conversationType.DISPOSABLE
|
||
};
|
||
|
||
// Create a Proxy object to watch all properties of the "ConvStateMap" object
|
||
var localConfig = new Proxy(ConvStateMap, {
|
||
set: function (target, prop, val) {
|
||
target[prop] = val;
|
||
// Call your function here
|
||
localStorage.setItem('botOnAnyThingConfig', JSON.stringify(localConfig))
|
||
switch (prop) {
|
||
case 'backgroundColor':
|
||
$('body').css('background-color', val);
|
||
$(`#backgroundColor`)?.val(val);
|
||
break;
|
||
case 'conversationType':
|
||
if (val)
|
||
$(`#option${val}`)?.prop("checked", true);
|
||
}
|
||
}
|
||
});
|
||
$(document).ready(function () {
|
||
let config = localStorage.getItem('botOnAnyThingConfig')
|
||
if (config) {
|
||
config = JSON.parse(config)
|
||
Object.keys(config).forEach(item => localConfig[item] = config[item])
|
||
}
|
||
// Open drawer
|
||
$('.drawer-icon').click(function () {
|
||
if (!$('.drawer').hasClass('open')) {
|
||
$('.drawer').toggleClass('open');
|
||
$('.drawer-overlay').fadeIn();
|
||
$('.drawer-icon-container').toggleClass('open').css('right', '270px');
|
||
} else
|
||
closeDrawer()
|
||
});
|
||
|
||
// Close drawer
|
||
$('#close-drawer, .drawer-overlay').click(closeDrawer);
|
||
|
||
function closeDrawer() {
|
||
$('.drawer').removeClass('open');
|
||
$('.drawer-overlay').fadeOut();
|
||
$('.drawer-icon-container').removeClass('open').css('right', '-30px');
|
||
}
|
||
});
|
||
// Bind checkbox values to ConvStateMap object
|
||
$('input[type="checkbox"]').change(function () {
|
||
var key = $(this).attr('name');
|
||
if (key)
|
||
localConfig[key] = $(this).is(':checked');
|
||
});
|
||
|
||
// Bind radio button values to ConvStateMap object
|
||
$('input[type="radio"]').change(function () {
|
||
var key = $(this).attr('name');
|
||
if (key)
|
||
localConfig[key] = $(this).val();
|
||
});
|
||
|
||
// Bind color input value to ConvStateMap object
|
||
$('#backgroundColor').on("input", function (e) {
|
||
localConfig.backgroundColor = $(this).val();
|
||
});
|
||
|
||
$(window).on('unload', function () {
|
||
socket.disconnect();
|
||
});
|
||
|
||
jQuery(function (a) {
|
||
var b = a("#chat").convform()
|
||
});
|
||
</script>
|
||
</body>
|
||
|
||
</html> |