From 86613d5e6afd6532153386ad5e44a2a2773e185a Mon Sep 17 00:00:00 2001
From: HuangHai <10402852@qq.com>
Date: Fri, 22 Aug 2025 08:18:29 +0800
Subject: [PATCH] 'commit'

---
 dsLightRag/Doc/L2Dwidget看板娘/Sample.html | 186 +++++++++++++++++++++
 dsLightRag/static/Sample.html              | 186 +++++++++++++++++++++
 dsLightRag/static/XiaoZhi.html             |  44 +++--
 3 files changed, 401 insertions(+), 15 deletions(-)
 create mode 100644 dsLightRag/Doc/L2Dwidget看板娘/Sample.html
 create mode 100644 dsLightRag/static/Sample.html
diff --git a/dsLightRag/Doc/L2Dwidget看板娘/Sample.html b/dsLightRag/Doc/L2Dwidget看板娘/Sample.html
new file mode 100644
index 00000000..57b58259
--- /dev/null
+++ b/dsLightRag/Doc/L2Dwidget看板娘/Sample.html
@@ -0,0 +1,186 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>学伴切换示例</title>
+    <style>
+        .model-selector {
+            position: fixed; top: 20px; left: 20px; z-index: 1000;
+            padding: 10px; background-color: rgba(255, 255, 255, 0.8);
+            border-radius: 5px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+        select { padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px; background-color: white; font-size: 14px; }
+        .recording-controls {
+            position: fixed; bottom: 20px; right: 20px; z-index: 1000;
+            display: flex; flex-direction: column; gap: 10px;
+        }
+        .record-button {
+            width: 70px; height: 70px; border-radius: 50%;
+            background-color: #dc3545; border: none; color: white;
+            font-size: 16px; cursor: pointer; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+            display: flex; align-items: center; justify-content: center;
+        }
+        .record-button:hover { background-color: #c82333; }
+        .stop-button {
+            width: 70px; height: 70px; border-radius: 50%;
+            background-color: #6c757d; border: none; color: white;
+            font-size: 16px; cursor: pointer; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+            display: flex; align-items: center; justify-content: center;
+            display: none;
+        }
+        .stop-button:hover { background-color: #5a6268; }
+        .recording-indicator {
+            position: fixed; bottom: 20px; left: 20px; z-index: 1000;
+            padding: 10px 15px; background-color: rgba(220, 53, 69, 0.9);
+            color: white; border-radius: 20px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+            display: none; align-items: center;
+        }
+        .recording-dot {
+            width: 10px; height: 10px; background-color: white;
+            border-radius: 50%; margin-right: 8px; animation: pulse 1.5s infinite;
+        }
+        @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }
+    </style>
+</head>
+<body>
+    <div class="model-selector">
+        <label for="model-select">选择学伴:</label>
+        <select id="model-select">
+            <option value="shizuku">小智</option>
+            <option value="koharu">小荷</option>
+            <option value="wanko">汪喵</option>
+        </select>
+    </div>
+
+    <div class="recording-indicator" id="recordingIndicator">
+        <div class="recording-dot"></div>
+        <span>正在录音...</span>
+    </div>
+
+    <div class="recording-controls">
+        <button class="record-button" id="startRecordBtn">开始录音</button>
+        <button class="stop-button" id="stopRecordBtn">停止录音</button>
+    </div>
+
+    <script src="https://l2dwidget.js.org/lib/L2Dwidget.min.js"></script>
+    <script>
+        // 模型配置
+        const models = {
+            shizuku: { jsonPath: "https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json", name: "志津子" },
+            koharu: { jsonPath: "https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json", name: "小春日和" },
+            wanko: { jsonPath: "https://unpkg.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json", name: "汪喵" }
+        };
+
+        // 录音相关变量
+        let mediaRecorder; let audioChunks = []; let isRecording = false;
+
+        // 获取URL参数
+        function getUrlParam(name) {
+            const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
+            const r = window.location.search.substr(1).match(reg);
+            return r ? unescape(r[2]) : null;
+        }
+
+        // 开始录音
+        function startRecording() {
+            if (isRecording) return;
+
+            console.log("尝试开始录音");
+            navigator.mediaDevices.getUserMedia({ audio: true })
+                .then(stream => {
+                    mediaRecorder = new MediaRecorder(stream);
+                    audioChunks = [];
+
+                    mediaRecorder.ondataavailable = event => {
+                        if (event.data.size > 0) audioChunks.push(event.data);
+                    };
+
+                    mediaRecorder.onstop = () => {
+                        const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
+                        console.log("录音完成，音频数据大小:", audioBlob.size);
+                        const audioUrl = URL.createObjectURL(audioBlob);
+                        console.log("录音URL:", audioUrl);
+                        // 这里可以调用ASR服务
+                    };
+
+                    mediaRecorder.start();
+                    isRecording = true;
+                    document.getElementById('recordingIndicator').style.display = 'flex';
+                    document.getElementById('startRecordBtn').style.display = 'none';
+                    document.getElementById('stopRecordBtn').style.display = 'flex';
+                    console.log("开始录音成功");
+
+                    // 设置最长录音时间为60秒
+                    setTimeout(stopRecording, 60000);
+                })
+                .catch(error => {
+                    console.error("获取麦克风权限失败:", error);
+                    alert("请授权麦克风权限以使用录音功能");
+                });
+        }
+
+        // 停止录音
+        function stopRecording() {
+            if (!isRecording || !mediaRecorder) return;
+
+            mediaRecorder.stop();
+            isRecording = false;
+            document.getElementById('recordingIndicator').style.display = 'none';
+            document.getElementById('startRecordBtn').style.display = 'flex';
+            document.getElementById('stopRecordBtn').style.display = 'none';
+            console.log("停止录音");
+
+            if (mediaRecorder.stream) {
+                mediaRecorder.stream.getTracks().forEach(track => track.stop());
+            }
+        }
+
+        // 初始化看板娘
+        function initL2Dwidget() {
+            const modelId = getUrlParam('id') || 'shizuku';
+            const model = models[modelId] || models.shizuku;
+
+            document.getElementById('model-select').value = modelId;
+            console.log('加载模型:', model.name, model.jsonPath);
+
+            // 初始化模型
+            L2Dwidget.init({
+                "model": { "jsonPath": model.jsonPath, "scale": 1 },
+                "display": { "position": "right", "width": 150, "height": 300, "hOffset": 0, "vOffset": -20 },
+                "mobile": { "show": true, "scale": 0.5 },
+                "react": { "opacityDefault": 0.8, "opacityOnHover": 1 },
+                "dialog": { "enable": true, "script": {
+                    'tap body': `你好啊，我是${model.name}。`,
+                    'tap face': '有什么问题或者烦心事都可以和我聊聊~'
+                }}
+            });
+        }
+
+        // 监听下拉框变化
+        document.getElementById('model-select').addEventListener('change', function() {
+            window.location.search = '?id=' + this.value;
+        });
+
+        // 绑定录音按钮事件
+        document.getElementById('startRecordBtn').addEventListener('click', startRecording);
+        document.getElementById('stopRecordBtn').addEventListener('click', stopRecording);
+
+        // 页面加载完成后初始化
+        window.onload = function() {
+            initL2Dwidget();
+            // 页面加载时请求麦克风权限
+            navigator.mediaDevices.getUserMedia({ audio: true })
+                .then(stream => {
+                    console.log("麦克风权限已授予");
+                    // 立即停止流，只获取权限
+                    stream.getTracks().forEach(track => track.stop());
+                })
+                .catch(error => {
+                    console.error("获取麦克风权限失败:", error);
+                    alert("请授权麦克风权限以使用录音功能");
+                });
+        };
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/dsLightRag/static/Sample.html b/dsLightRag/static/Sample.html
new file mode 100644
index 00000000..57b58259
--- /dev/null
+++ b/dsLightRag/static/Sample.html
@@ -0,0 +1,186 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>学伴切换示例</title>
+    <style>
+        .model-selector {
+            position: fixed; top: 20px; left: 20px; z-index: 1000;
+            padding: 10px; background-color: rgba(255, 255, 255, 0.8);
+            border-radius: 5px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+        select { padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px; background-color: white; font-size: 14px; }
+        .recording-controls {
+            position: fixed; bottom: 20px; right: 20px; z-index: 1000;
+            display: flex; flex-direction: column; gap: 10px;
+        }
+        .record-button {
+            width: 70px; height: 70px; border-radius: 50%;
+            background-color: #dc3545; border: none; color: white;
+            font-size: 16px; cursor: pointer; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+            display: flex; align-items: center; justify-content: center;
+        }
+        .record-button:hover { background-color: #c82333; }
+        .stop-button {
+            width: 70px; height: 70px; border-radius: 50%;
+            background-color: #6c757d; border: none; color: white;
+            font-size: 16px; cursor: pointer; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+            display: flex; align-items: center; justify-content: center;
+            display: none;
+        }
+        .stop-button:hover { background-color: #5a6268; }
+        .recording-indicator {
+            position: fixed; bottom: 20px; left: 20px; z-index: 1000;
+            padding: 10px 15px; background-color: rgba(220, 53, 69, 0.9);
+            color: white; border-radius: 20px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+            display: none; align-items: center;
+        }
+        .recording-dot {
+            width: 10px; height: 10px; background-color: white;
+            border-radius: 50%; margin-right: 8px; animation: pulse 1.5s infinite;
+        }
+        @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }
+    </style>
+</head>
+<body>
+    <div class="model-selector">
+        <label for="model-select">选择学伴:</label>
+        <select id="model-select">
+            <option value="shizuku">小智</option>
+            <option value="koharu">小荷</option>
+            <option value="wanko">汪喵</option>
+        </select>
+    </div>
+
+    <div class="recording-indicator" id="recordingIndicator">
+        <div class="recording-dot"></div>
+        <span>正在录音...</span>
+    </div>
+
+    <div class="recording-controls">
+        <button class="record-button" id="startRecordBtn">开始录音</button>
+        <button class="stop-button" id="stopRecordBtn">停止录音</button>
+    </div>
+
+    <script src="https://l2dwidget.js.org/lib/L2Dwidget.min.js"></script>
+    <script>
+        // 模型配置
+        const models = {
+            shizuku: { jsonPath: "https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json", name: "志津子" },
+            koharu: { jsonPath: "https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json", name: "小春日和" },
+            wanko: { jsonPath: "https://unpkg.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json", name: "汪喵" }
+        };
+
+        // 录音相关变量
+        let mediaRecorder; let audioChunks = []; let isRecording = false;
+
+        // 获取URL参数
+        function getUrlParam(name) {
+            const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
+            const r = window.location.search.substr(1).match(reg);
+            return r ? unescape(r[2]) : null;
+        }
+
+        // 开始录音
+        function startRecording() {
+            if (isRecording) return;
+
+            console.log("尝试开始录音");
+            navigator.mediaDevices.getUserMedia({ audio: true })
+                .then(stream => {
+                    mediaRecorder = new MediaRecorder(stream);
+                    audioChunks = [];
+
+                    mediaRecorder.ondataavailable = event => {
+                        if (event.data.size > 0) audioChunks.push(event.data);
+                    };
+
+                    mediaRecorder.onstop = () => {
+                        const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
+                        console.log("录音完成，音频数据大小:", audioBlob.size);
+                        const audioUrl = URL.createObjectURL(audioBlob);
+                        console.log("录音URL:", audioUrl);
+                        // 这里可以调用ASR服务
+                    };
+
+                    mediaRecorder.start();
+                    isRecording = true;
+                    document.getElementById('recordingIndicator').style.display = 'flex';
+                    document.getElementById('startRecordBtn').style.display = 'none';
+                    document.getElementById('stopRecordBtn').style.display = 'flex';
+                    console.log("开始录音成功");
+
+                    // 设置最长录音时间为60秒
+                    setTimeout(stopRecording, 60000);
+                })
+                .catch(error => {
+                    console.error("获取麦克风权限失败:", error);
+                    alert("请授权麦克风权限以使用录音功能");
+                });
+        }
+
+        // 停止录音
+        function stopRecording() {
+            if (!isRecording || !mediaRecorder) return;
+
+            mediaRecorder.stop();
+            isRecording = false;
+            document.getElementById('recordingIndicator').style.display = 'none';
+            document.getElementById('startRecordBtn').style.display = 'flex';
+            document.getElementById('stopRecordBtn').style.display = 'none';
+            console.log("停止录音");
+
+            if (mediaRecorder.stream) {
+                mediaRecorder.stream.getTracks().forEach(track => track.stop());
+            }
+        }
+
+        // 初始化看板娘
+        function initL2Dwidget() {
+            const modelId = getUrlParam('id') || 'shizuku';
+            const model = models[modelId] || models.shizuku;
+
+            document.getElementById('model-select').value = modelId;
+            console.log('加载模型:', model.name, model.jsonPath);
+
+            // 初始化模型
+            L2Dwidget.init({
+                "model": { "jsonPath": model.jsonPath, "scale": 1 },
+                "display": { "position": "right", "width": 150, "height": 300, "hOffset": 0, "vOffset": -20 },
+                "mobile": { "show": true, "scale": 0.5 },
+                "react": { "opacityDefault": 0.8, "opacityOnHover": 1 },
+                "dialog": { "enable": true, "script": {
+                    'tap body': `你好啊，我是${model.name}。`,
+                    'tap face': '有什么问题或者烦心事都可以和我聊聊~'
+                }}
+            });
+        }
+
+        // 监听下拉框变化
+        document.getElementById('model-select').addEventListener('change', function() {
+            window.location.search = '?id=' + this.value;
+        });
+
+        // 绑定录音按钮事件
+        document.getElementById('startRecordBtn').addEventListener('click', startRecording);
+        document.getElementById('stopRecordBtn').addEventListener('click', stopRecording);
+
+        // 页面加载完成后初始化
+        window.onload = function() {
+            initL2Dwidget();
+            // 页面加载时请求麦克风权限
+            navigator.mediaDevices.getUserMedia({ audio: true })
+                .then(stream => {
+                    console.log("麦克风权限已授予");
+                    // 立即停止流，只获取权限
+                    stream.getTracks().forEach(track => track.stop());
+                })
+                .catch(error => {
+                    console.error("获取麦克风权限失败:", error);
+                    alert("请授权麦克风权限以使用录音功能");
+                });
+        };
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/dsLightRag/static/XiaoZhi.html b/dsLightRag/static/XiaoZhi.html
index 57b58259..a5d1fe3c 100644
--- a/dsLightRag/static/XiaoZhi.html
+++ b/dsLightRag/static/XiaoZhi.html
@@ -20,6 +20,9 @@
             background-color: #dc3545; border: none; color: white;
             font-size: 16px; cursor: pointer; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
             display: flex; align-items: center; justify-content: center;
+            /* 确保按钮始终可见 */
+            opacity: 1 !important;
+            visibility: visible !important;
         }
         .record-button:hover { background-color: #c82333; }
         .stop-button {
@@ -28,6 +31,9 @@
             font-size: 16px; cursor: pointer; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
             display: flex; align-items: center; justify-content: center;
             display: none;
+            /* 确保按钮始终可见 */
+            opacity: 1 !important;
+            visibility: visible !important;
         }
         .stop-button:hover { background-color: #5a6268; }
         .recording-indicator {
@@ -65,10 +71,10 @@
 
     <script src="https://l2dwidget.js.org/lib/L2Dwidget.min.js"></script>
     <script>
-        // 模型配置
+        // 模型配置 - 使用与Sample.html相同的CDN链接
         const models = {
-            shizuku: { jsonPath: "https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json", name: "志津子" },
-            koharu: { jsonPath: "https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json", name: "小春日和" },
+            shizuku: { jsonPath: "https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json", name: "小智" },
+            koharu: { jsonPath: "https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json", name: "小荷" },
             wanko: { jsonPath: "https://unpkg.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json", name: "汪喵" }
         };
 
@@ -136,7 +142,7 @@
             }
         }
 
-        // 初始化看板娘
+        // 初始化看板娘 - 简化为Sample.html的工作版本
         function initL2Dwidget() {
             const modelId = getUrlParam('id') || 'shizuku';
             const model = models[modelId] || models.shizuku;
@@ -144,10 +150,16 @@
             document.getElementById('model-select').value = modelId;
             console.log('加载模型:', model.name, model.jsonPath);
 
-            // 初始化模型
+            // 初始化模型 - 与Sample.html相同的配置
             L2Dwidget.init({
                 "model": { "jsonPath": model.jsonPath, "scale": 1 },
-                "display": { "position": "right", "width": 150, "height": 300, "hOffset": 0, "vOffset": -20 },
+                "display": { 
+                    "position": "right", 
+                    "width": 150, 
+                    "height": 300, 
+                    "hOffset": 0, 
+                    "vOffset": -20
+                },
                 "mobile": { "show": true, "scale": 0.5 },
                 "react": { "opacityDefault": 0.8, "opacityOnHover": 1 },
                 "dialog": { "enable": true, "script": {
@@ -157,18 +169,20 @@
             });
         }
 
-        // 监听下拉框变化
-        document.getElementById('model-select').addEventListener('change', function() {
-            window.location.search = '?id=' + this.value;
-        });
-
-        // 绑定录音按钮事件
-        document.getElementById('startRecordBtn').addEventListener('click', startRecording);
-        document.getElementById('stopRecordBtn').addEventListener('click', stopRecording);
-
         // 页面加载完成后初始化
         window.onload = function() {
+            // 直接初始化看板娘，不添加额外延迟
             initL2Dwidget();
+
+            // 监听下拉框变化
+            document.getElementById('model-select').addEventListener('change', function() {
+                window.location.search = '?id=' + this.value;
+            });
+
+            // 绑定录音按钮事件
+            document.getElementById('startRecordBtn').addEventListener('click', startRecording);
+            document.getElementById('stopRecordBtn').addEventListener('click', stopRecording);
+
             // 页面加载时请求麦克风权限
             navigator.mediaDevices.getUserMedia({ audio: true })
                 .then(stream => {
