侧边栏做一些调整

冯杨
Commit 5f3867862730f99763ac246def76479ab4b139f5 5f386786 1 parent e8e0e9ee
Showing 2 changed files with 164 additions and 37 deletions
llm.py
web/webrtcapi.html
--- a/llm.py
View file @5f38678
+++ b/llm.py
View file @5f38678
@@ -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,
--- a/web/webrtcapi.html
View file @5f38678
+++ b/web/webrtcapi.html
View file @5f38678
@@ -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; // 重置重连次数