冯杨 / liveTalking

Go to a project
Toggle navigation Toggle navigation pinning
冯杨
5f386786 1 parent e8e0e9ee

侧边栏做一些调整

Inline Side-by-side
Showing 2 changed files with 164 additions and 37 deletions
... ... @@ -8,17 +8,17 @@ def llm_response(message,nerfreal:BaseReal):
from openai import OpenAI
client = OpenAI(
# 如果您没有配置环境变量，请在此处用您的API Key进行替换
# api_key=os.getenv("DASHSCOPE_API_KEY"),
api_key = "localkey",
base_url="http://127.0.0.1:5000/v1"
api_key=os.getenv("DASHSCOPE_API_KEY"),
#api_key = "localkey",
#base_url="http://127.0.0.1:5000/v1"
# 填写DashScope SDK的base_url
# base_url="https://dashscope.aliyuncs.com/compatible-mode/v1",
base_url="https://dashscope.aliyuncs.com/compatible-mode/v1",
)
end = time.perf_counter()
logger.info(f"llm Time init: {end-start}s")
completion = client.chat.completions.create(
model="fay-streaming",
# model="qwen-plus",
# model="fay-streaming",
model="qwen-plus",
messages=[{'role': 'system', 'content': '你是小艺，是由艺云展陈开发的AI语音聊天机器人,回答风格精简。'},
{'role': 'user', 'content': message}],
stream=True,
... ...
... ... @@ -13,7 +13,6 @@
font-family: Arial, sans-serif;
display: flex;
height: 100vh;
overflow: hidden;
}
/* 侧边栏样式 */
... ... @@ -49,32 +48,24 @@
#sidebar-toggle {
position: fixed;
top: 50%;
left: -24px;
transform: translateY(-50%);
/* left is managed by JavaScript */
width: 48px;
height: 48px;
background-color: #4285f4;
background-color: #4285f4; /* Original color */
color: white;
border: none;
border: none; /* Original border */
border-radius: 50%;
display: flex;
display: flex !important; /* Ensure it's displayed as flex */
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 100;
z-index: 1002 !important; /* Higher than media's 1000, and ensure it applies */
font-size: 20px;
box-shadow: 0 3px 8px rgba(0,0,0,0.2);
transition: all 0.3s ease;
}
#sidebar-toggle {
left: 0;
}
/* 收缩状态下的切换按钮位置调整 */
#sidebar.collapsed #sidebar-toggle {
left: 0;
background-color: #4285f4;
transition: left 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
opacity: 1 !important; /* Ensure opacity */
visibility: visible !important; /* Ensure visibility */
}
/* 主内容区域样式 */
... ... @@ -177,7 +168,6 @@
visibility: visible !important;
opacity: 1 !important;
}
/* NEW: Fullscreen media when sidebar is collapsed */
#sidebar.collapsed ~ #main-content #media {
position: fixed;
... ... @@ -235,9 +225,11 @@
</head>
<body>
<!-- 侧边栏切换按钮 (Moved to be a direct child of body) -->
<button id="sidebar-toggle">≪</button>
<!-- 侧边栏 -->
<div id="sidebar">
<button id="sidebar-toggle">≪</button>
<div>
<div class="section-title">连接控制</div>
<div class="option">
... ... @@ -265,6 +257,20 @@
<button type="submit" class="btn btn-default">发送</button>
</form>
</div>
<div>
<div class="section-title">服务器配置</div>
<div class="form-group">
<label for="ws-host">WebSocket 主机</label>
<input type="text" class="form-control" id="ws-host" placeholder="默认使用当前主机名">
</div>
<div class="form-group">
<label for="ws-port">WebSocket 端口</label>
<input type="text" class="form-control" id="ws-port" placeholder="默认: 10002">
</div>
<button id="save-ws-config" class="btn btn-default">保存配置</button>
<button id="reset-ws-config" class="btn btn-default">重置配置</button>
</div>
</div>
<!-- 主内容区域 -->
... ... @@ -283,23 +289,138 @@
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
var expandedSidebarLeft = '300px'; // Corresponds to #sidebar CSS width
var collapsedSidebarLeft = '10px'; // Test: offset from edge
// Function to update toggle button based on sidebar state
function updateToggleButtonState() {
var sidebarIsCollapsed = $('#sidebar').hasClass('collapsed');
console.log('[Sidebar Toggle] Sidebar collapsed state:', sidebarIsCollapsed);
var toggleButton = $('#sidebar-toggle');
if (sidebarIsCollapsed) {
// Restore intended behavior: set left, icon, and original background color
// Relies on base CSS for top: 50% and transform: translateY(-50%)
toggleButton.html('≫').css({
'left': collapsedSidebarLeft, // This is '10px'
'background-color': '#4285f4', // Original color
'top': '50%', // Ensure it matches base CSS
'transform': 'translateY(-50%)' // Ensure it matches base CSS
});
console.log('[Sidebar Toggle] Action: Set to collapsed state. Left:', collapsedSidebarLeft, 'HTML:', toggleButton.html());
} else {
// Restore intended behavior: set left, icon, and original background color
toggleButton.html('≪').css({
'left': expandedSidebarLeft,
'background-color': '#4285f4', // Original color
'top': '50%', // Ensure it matches base CSS
'transform': 'translateY(-50%)' // Ensure it matches base CSS
});
console.log('[Sidebar Toggle] Action: Set to expanded state. Left:', expandedSidebarLeft, 'HTML:', toggleButton.html());
}
// Log applied styles to be sure
console.log('[Sidebar Toggle] Applied style attribute:', toggleButton.attr('style'));
console.log('[Sidebar Toggle] Computed z-index:', toggleButton.css('z-index'));
console.log('[Sidebar Toggle] Computed opacity:', toggleButton.css('opacity'));
console.log('[Sidebar Toggle] Computed visibility:', toggleButton.css('visibility'));
console.log('[Sidebar Toggle] Computed display:', toggleButton.css('display'));
console.log('[Sidebar Toggle] Offset:', toggleButton.offset());
console.log('[Sidebar Toggle] Position:', toggleButton.position());
}
// Initial state setup for the toggle button
updateToggleButtonState();
// Load saved WebSocket configuration or set defaults
function loadWsConfig() {
var savedWsHost = localStorage.getItem('wsHost');
var savedWsPort = localStorage.getItem('wsPort');
if (savedWsHost) {
$('#ws-host').val(savedWsHost);
} else {
$('#ws-host').val('127.0.0.1'); // Default host
}
if (savedWsPort) {
$('#ws-port').val(savedWsPort);
} else {
$('#ws-port').val('10002'); // Default port
}
}
loadWsConfig(); // Load config on document ready
// 侧边栏切换功能
$('#sidebar-toggle').click(function() {
$('#sidebar').toggleClass('collapsed');
// 切换按钮图标
if ($('#sidebar').hasClass('collapsed')) {
$(this).html('≫');
} else {
$(this).html('≪');
}
updateToggleButtonState();
});
// 展开侧边栏按钮功能
$('#expand-sidebar').click(function() {
$('#sidebar').removeClass('collapsed');
$('#sidebar-toggle').html('≪');
// Note: The original '#expand-sidebar'.click handler was part of the replaced block.
// If an element with id #expand-sidebar exists and needs to control the sidebar,
// its click handler should be re-implemented similar to this:
// $('#expand-sidebar').click(function() {
// if ($('#sidebar').hasClass('collapsed')) {
// $('#sidebar').removeClass('collapsed');
// updateToggleButtonState();
// }
// });
// Server configuration save and reset
$('#save-ws-config').click(function() {
var wsHost = $('#ws-host').val().trim();
var wsPort = $('#ws-port').val().trim();
if (!wsHost) {
alert('WebSocket 主机不能为空。');
$('#ws-host').focus();
return;
}
if (!wsPort) {
alert('WebSocket 端口不能为空。');
$('#ws-port').focus();
return;
}
localStorage.setItem('wsHost', wsHost);
localStorage.setItem('wsPort', wsPort);
var originalText = $(this).text();
$(this).text('已保存!').prop('disabled', true);
setTimeout(function() {
$('#save-ws-config').text(originalText).prop('disabled', false);
}, 1500);
console.log('WebSocket configuration saved: Host - ' + wsHost + ', Port - ' + wsPort);
// alert('配置已保存！更改将在下次连接时生效或您可以手动重新连接。');
});
$('#reset-ws-config').click(function() {
$('#ws-host').val('127.0.0.1');
$('#ws-port').val('10002');
// No need to explicitly remove, connectWebSocket will use defaults if inputs are changed to defaults
// localStorage.removeItem('wsHost');
// localStorage.removeItem('wsPort');
var originalText = $(this).text();
$(this).text('已重置!').prop('disabled', true);
// Also update save button to reflect that new defaults need saving
var saveButton = $('#save-ws-config');
var saveButtonOriginalText = saveButton.text();
if (saveButton.text() !== '已保存!') { // Only change if not in 'saved' state
saveButton.text('保存默认值');
}
setTimeout(function() {
$('#reset-ws-config').text(originalText).prop('disabled', false);
if (saveButton.text() === '保存默认值') {
saveButton.text(saveButtonOriginalText);
}
}, 1500);
console.log('WebSocket configuration reset to default values in fields.');
// alert('配置已重置为默认值，请点击“保存配置”以应用。');
});
// Old WebSocket code commented out
// var host = window.location.hostname
// var ws = new WebSocket("ws://"+host+":8000/humanecho");
... ... @@ -412,7 +533,13 @@
setUsername();
function connectWebSocket() {
var host = window.location.hostname;
ws = new WebSocket("ws://127.0.0.1:10002");
// 获取WebSocket服务器地址，优先使用配置值，否则使用当前主机名
var wsHost = localStorage.getItem('wsHost') || host;
var wsPort = localStorage.getItem('wsPort') || '10002';
var wsProtocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
var wsUrl = wsProtocol + wsHost + ':' + wsPort;
console.log('Connecting to WebSocket server:', wsUrl);
ws = new WebSocket(wsUrl);
ws.onopen = function() {
console.log('Connected to WebSocket on port 10002');
reconnectAttempts = 0; // 重置重连次数
... ...