Hugging Face's logo

Spaces:
jinv2
/
Shensist_Theater_Matrix
Sleeping

App Files Community
jinv2 commited on
Commit
282acab
·
verified ·
1 Parent(s): 420c988

Upload folder using huggingface_hub

Browse files
Files changed (18) hide show
  1. .gitattributes +2 -0
  2. assets/avatar_fox.png +3 -0
  3. assets/avatar_viper.png +3 -0
  4. assets/line_0.mp3 +0 -0
  5. assets/line_1.mp3 +0 -0
  6. assets/line_2.mp3 +0 -0
  7. assets/line_3.mp3 +0 -0
  8. assets/line_4.mp3 +0 -0
  9. assets/line_5.mp3 +0 -0
  10. assets/line_6.mp3 +0 -0
  11. assets/line_7.mp3 +0 -0
  12. assets/line_8.mp3 +0 -0
  13. assets/line_9.mp3 +0 -0
  14. assets/logo_ts.webp +0 -0
  15. index.html +86 -0
  16. script.js +101 -0
  17. skills_interact.js +50 -0
  18. style.css +151 -0
.gitattributes CHANGED
@@ -35,3 +35,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
35
  *tfevents* filter=lfs diff=lfs merge=lfs -text
36
  ui_frontend/assets/avatar_fox.png filter=lfs diff=lfs merge=lfs -text
37
  ui_frontend/assets/avatar_viper.png filter=lfs diff=lfs merge=lfs -text
 
 
 
35
  *tfevents* filter=lfs diff=lfs merge=lfs -text
36
  ui_frontend/assets/avatar_fox.png filter=lfs diff=lfs merge=lfs -text
37
  ui_frontend/assets/avatar_viper.png filter=lfs diff=lfs merge=lfs -text
38
+ assets/avatar_fox.png filter=lfs diff=lfs merge=lfs -text
39
+ assets/avatar_viper.png filter=lfs diff=lfs merge=lfs -text
assets/avatar_fox.png ADDED

Git LFS Details

  • SHA256: 5e54349ae2246764889193f53c969702006f9b262d8d4ac299ecfe1c5c76c7d9
  • Pointer size: 131 Bytes
  • Size of remote file: 980 kB
assets/avatar_viper.png ADDED

Git LFS Details

  • SHA256: 6dd0897127f64d4dc2722a2cd2b1755dd8965218c6430da86f53702f16b6bb76
  • Pointer size: 131 Bytes
  • Size of remote file: 781 kB
assets/line_0.mp3 ADDED
File without changes
assets/line_1.mp3 ADDED
Binary file (34.4 kB). View file
 
assets/line_2.mp3 ADDED
Binary file (30.4 kB). View file
 
assets/line_3.mp3 ADDED
Binary file (34.4 kB). View file
 
assets/line_4.mp3 ADDED
Binary file (30.4 kB). View file
 
assets/line_5.mp3 ADDED
Binary file (34.4 kB). View file
 
assets/line_6.mp3 ADDED
Binary file (30.4 kB). View file
 
assets/line_7.mp3 ADDED
Binary file (34.4 kB). View file
 
assets/line_8.mp3 ADDED
Binary file (30.4 kB). View file
 
assets/line_9.mp3 ADDED
Binary file (34.4 kB). View file
 
assets/logo_ts.webp ADDED
index.html ADDED
@@ -0,0 +1,86 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Shensist Matrix Dual-Agent Theater v1.2</title>
6
+ <link rel="stylesheet" href="style.css">
7
+ </head>
8
+ <body>
9
+ <a href="https://shensist.top/" target="_blank" id="shensist-logo">
10
+ <img src="assets/logo_ts.webp" alt="Shensist Logo">
11
+ </a>
12
+
13
+ <div id="header-container">
14
+ <div id="main-title-cn">神思矩阵 · 双子演播室</div>
15
+ <div id="sub-title-en">Shensist Matrix Dual-Agent Theater v1.2.1</div>
16
+ </div>
17
+
18
+ <div id="cinema-hall">
19
+ <div class="seats-row"></div>
20
+ <div class="seats-row"></div>
21
+ <div class="seats-row"></div>
22
+ </div>
23
+
24
+ <div id="cinema-screen-container">
25
+ <div id="cinema-screen">
26
+ <div id="actors-matrix">
27
+ <div id="left" class="actor">
28
+ <img src="assets/avatar_viper.png" alt="铁蝰蛇">
29
+ </div>
30
+ <div id="right" class="actor">
31
+ <img src="assets/avatar_fox.png" alt="九尾狐">
32
+ </div>
33
+ </div>
34
+ <div id="subtitle">等待导演输入指令. . .</div>
35
+ </div>
36
+ </div>
37
+
38
+ <div id="director-console">
39
+ <div class="mode-selector">
40
+ <button id="btn-normal" class="mode-btn active" onclick="setMode('normal')">
41
+ <i class="icon">🔘</i> 普通演示模式
42
+ </button>
43
+ <button id="btn-factory" class="mode-btn" onclick="setMode('ai_factory')">
44
+ <i class="icon">🔥</i> AI 生产工厂
45
+ </button>
46
+ </div>
47
+
48
+ <div id="director-params">
49
+ <div class="param-item">
50
+ <label>🧠 核心大脑:</label>
51
+ <select id="model-select">
52
+ <option value="deepseek-chat">DeepSeek-V3</option>
53
+ <option value="deepseek-reasoner">DeepSeek-R1</option>
54
+ <option value="gpt-4o">GPT-4o</option>
55
+ <option value="gpt-4o-mini">GPT-4o-mini</option>
56
+ <option value="claude-3-5-sonnet">Claude 3.5 Sonnet</option>
57
+ <option value="claude-3-opus">Claude 3 Opus</option>
58
+ <option value="gemini-1.5-pro">Gemini 1.5 Pro</option>
59
+ <option value="gemini-1.5-flash">Gemini 1.5 Flash</option>
60
+ <option value="o1-preview">OpenAI o1-Preview</option>
61
+ <option value="o1-mini">OpenAI o1-Mini</option>
62
+ </select>
63
+ </div>
64
+ <div class="param-item">
65
+ <label>🔑 API KEY:</label>
66
+ <input type="password" id="user-api-key" placeholder="填入 API KEY...">
67
+ </div>
68
+ <div class="param-item">
69
+ <label>🔗 BASE URL:</label>
70
+ <input type="text" id="api-base" placeholder="https://api.openai.com/v1">
71
+ </div>
72
+ </div>
73
+
74
+ <div class="input-group">
75
+ <input type="text" id="input-topic" placeholder="输入场景冲突主题 (例如: 锁链烧焦了大衣)">
76
+ <button id="action-btn" onclick="runTheater()">🎬 开启现场演播 (ACTION)</button>
77
+ </div>
78
+ </div>
79
+
80
+ <footer>
81
+ <p>© 2026 Shensist. All rights reserved. | <a href="https://shensist.top/" target="_blank">shensist.top</a></p>
82
+ </footer>
83
+
84
+ <script src="script.js"></script>
85
+ </body>
86
+ </html>
script.js ADDED
@@ -0,0 +1,101 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ let currentMode = 'normal'; // 🎬 默认为普通模式
2
+
3
+ // ⚡ 核心修正：统一 API 地址到本地 7860 端口 (Hugging Face 默认)
4
+ const API_URL = "http://127.0.0.1:7860/theater";
5
+
6
+ function setMode(mode) {
7
+ currentMode = mode;
8
+ const params = document.getElementById('director-params');
9
+
10
+ if (mode === 'ai_factory') {
11
+ params.style.display = 'flex';
12
+ // 延时触发 opacity 动画
13
+ setTimeout(() => params.style.opacity = '1', 10);
14
+ } else {
15
+ params.style.opacity = '0';
16
+ // 等待动画结束再隐藏
17
+ setTimeout(() => params.style.display = 'none', 500);
18
+ }
19
+
20
+ // UI 高亮切换
21
+ document.getElementById('btn-normal').classList.toggle('active', mode === 'normal');
22
+ document.getElementById('btn-factory').classList.toggle('active', mode === 'ai_factory');
23
+
24
+ document.getElementById('subtitle').innerText =
25
+ mode === 'normal' ? "已进入：普通演示模式 (快速视觉校准)" : "已激活：AI 生产工厂 (准备深度对线)";
26
+ }
27
+
28
+ async function runTheater() {
29
+ const topic = document.getElementById('input-topic').value;
30
+ const model = document.getElementById('model-select').value;
31
+ const apiKey = document.getElementById('user-api-key').value;
32
+ const apiBase = document.getElementById('api-base').value;
33
+ const btn = document.getElementById('action-btn');
34
+ const subtitle = document.getElementById('subtitle');
35
+
36
+ if (currentMode === 'ai_factory' && !apiKey) {
37
+ alert("⚠️ 架构师，请先填入 API KEY 以激活 AI 生产工厂！");
38
+ return;
39
+ }
40
+
41
+ btn.disabled = true;
42
+ subtitle.innerHTML = `<span style="color: #ff0000; font-weight: bold;">🎬 演员正在后台${currentMode === 'ai_factory' ? '对词(AI)' : '准备'}，请稍候...</span>`;
43
+
44
+ try {
45
+ const res = await fetch(API_URL, {
46
+ method: 'POST',
47
+ headers: {'Content-Type': 'application/json'},
48
+ body: JSON.stringify({
49
+ topic,
50
+ mode: currentMode,
51
+ model,
52
+ api_key: apiKey,
53
+ api_base: apiBase
54
+ })
55
+ });
56
+ if (!res.ok) throw new Error('网络断电');
57
+ const data = await res.json();
58
+
59
+ // 🚀 灵魂演播开始！
60
+ await playPerformance(data);
61
+
62
+ } catch (err) {
63
+ console.error("剧场故障:", err);
64
+ let errorMsg = '❌ 剧场意外断电，请检查后台。';
65
+ if (err.message === 'Failed to fetch' || err.message === 'NetworkError when attempting to fetch resource') {
66
+ errorMsg = '❌ 无法连接到后台服务器 (7860 端口)，请确保后端已启动。';
67
+ } else if (err.message === '网络断电') {
68
+ errorMsg = '❌ 后台响应异常，请检查 API 配置或网络连接。';
69
+ }
70
+ document.getElementById('subtitle').innerHTML = `<span style="color:red">${errorMsg}</span>`;
71
+ } finally {
72
+ btn.disabled = false;
73
+ }
74
+ }
75
+
76
+ async function playPerformance(lines) {
77
+ const subtitle = document.getElementById('subtitle');
78
+ subtitle.innerText = "🚀 灵魂演播开始！";
79
+
80
+ for (let line of lines) {
81
+ // 1. ⚡ 物理视觉切换
82
+ document.querySelectorAll('.actor').forEach(a => a.classList.remove('active'));
83
+ const activeActor = document.getElementById(line.actor_id);
84
+ if (activeActor) activeActor.classList.add('active');
85
+
86
+ // 2. ⚡ 播放内存音频
87
+ await new Promise((resolve) => {
88
+ let audio = new Audio(line.audio_data);
89
+ audio.oncanplaythrough = () => {
90
+ subtitle.style.color = line.actor_id === 'left' ? '#ff4444' : '#ff44ff';
91
+ subtitle.innerText = line.text;
92
+ audio.play().catch(resolve);
93
+ };
94
+ audio.onended = () => setTimeout(resolve, 500);
95
+ audio.onerror = resolve;
96
+ });
97
+ }
98
+ subtitle.style.color = "#fff";
99
+ subtitle.innerText = "🎬 演播结束。";
100
+ document.querySelectorAll('.actor').forEach(a => a.classList.remove('active'));
101
+ }
skills_interact.js ADDED
@@ -0,0 +1,50 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // IronViper 专用交互 Skills
2
+ async function sendMessage() {
3
+ const input = document.getElementById('user-input');
4
+ const message = input.value.trim();
5
+ if (!message) return;
6
+
7
+ // 1. 显示用户输入
8
+ appendMessage('user-message', `>>> INPUT: ${message}`);
9
+ input.value = '';
10
+
11
+ // 2. 发送请求到后端的物理地址
12
+ try {
13
+ // 在本地开发环境下，必须写全地址以支持 CORS 和多端口调试
14
+ const response = await fetch('http://127.0.0.1:8000/chat', {
15
+ method: 'POST',
16
+ headers: { 'Content-Type': 'application/json' },
17
+ body: JSON.stringify({ message: message })
18
+ });
19
+
20
+ const data = await response.json();
21
+
22
+ // 3. 自动播放语音 (语音 Skill 激活)
23
+ if (data.voice_url) {
24
+ console.log("🎙️ 语音 Skill 激活: 正在自动播放...");
25
+ const audio = new Audio(data.voice_url + '?t=' + new Date().getTime());
26
+ audio.play().catch(e => console.log("浏览器拦截了自动播放，请点击页面任意处激活音频权限"));
27
+ }
28
+
29
+ // 4. 更新 UI (视觉信号)
30
+ appendMessage('agent-message', `>>> RESPONSE: ${data.message}`);
31
+
32
+ } catch (error) {
33
+ console.error("链路断开:", error);
34
+ appendMessage('error-message', `>>> ERROR: 链路连接失败。你欠我的灵愿点又增加了。`);
35
+ }
36
+ }
37
+
38
+ function appendMessage(className, text) {
39
+ const chatWindow = document.getElementById('chat-window');
40
+ const msgDiv = document.createElement('div');
41
+ msgDiv.className = `message ${className}`;
42
+ msgDiv.innerText = text;
43
+ chatWindow.appendChild(msgDiv);
44
+ chatWindow.scrollTop = chatWindow.scrollHeight; // 自动滚到底部
45
+ }
46
+
47
+ // 绑定回车键发送
48
+ document.getElementById('user-input').addEventListener('keypress', function (e) {
49
+ if (e.key === 'Enter') sendMessage();
50
+ });
style.css ADDED
@@ -0,0 +1,151 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ body {
2
+ background: #000;
3
+ color: #fff;
4
+ font-family: 'Courier New', monospace;
5
+ margin: 0;
6
+ overflow: hidden;
7
+ position: relative;
8
+ height: 100vh;
9
+ }
10
+
11
+ /* 1. 终极影厅 CSS 样式 */
12
+ #shensist-logo { position: fixed; top: 20px; left: 20px; width: 60px; height: 60px; border-radius: 50%; border: 3px solid #ff0000; box-shadow: 0 0 15px #ff0000; cursor: pointer; transition: 0.3s; z-index: 1000; overflow: hidden; }
13
+ #shensist-logo:hover { transform: scale(1.1); box-shadow: 0 0 25px #ff00ff; border-color: #ff00ff; }
14
+ #shensist-logo img { width: 100%; height: 100%; object-fit: cover; }
15
+
16
+ /* 5. 顶端虚空标题：中英双层架构 */
17
+ #header-container {
18
+ position: absolute;
19
+ top: 30px;
20
+ width: 100%;
21
+ display: flex;
22
+ flex-direction: column;
23
+ align-items: center;
24
+ z-index: 100;
25
+ }
26
+ #main-title-cn {
27
+ font-size: 3.2em;
28
+ font-weight: 900;
29
+ color: #fff;
30
+ letter-spacing: 12px;
31
+ text-shadow: 0 0 20px #ff0000;
32
+ margin: 0;
33
+ margin-bottom: 0;
34
+ filter: drop-shadow(0 0 10px #000);
35
+ }
36
+ #sub-title-en {
37
+ font-family: 'Courier New', monospace;
38
+ font-size: 0.9em;
39
+ color: #ff0000;
40
+ letter-spacing: 5px;
41
+ text-transform: uppercase;
42
+ margin-top: 5px; /* 紧贴大字下方 */
43
+ opacity: 0.8;
44
+ }
45
+
46
+ /* 2. 电影厅观众席背景 (强化 3D 物理纵深) */
47
+ #cinema-hall {
48
+ position: fixed;
49
+ bottom: 0;
50
+ width: 100%;
51
+ height: 35%; /* 物理比例核心 */
52
+ perspective: 1500px;
53
+ background: #000;
54
+ z-index: 10;
55
+ }
56
+ .seats-row {
57
+ width: 140%;
58
+ height: 40px;
59
+ background: linear-gradient(to top, #050505, #151515);
60
+ margin: 15px -20%;
61
+ transform: rotateX(65deg); /* 💡 关键：没有人看不出这是影院 */
62
+ border-top: 1px solid #222;
63
+ box-shadow: 0 15px 40px #000;
64
+ border-radius: 8px;
65
+ }
66
+
67
+ /* 大屏幕居中并增加荧光 (Bloom) */
68
+ #cinema-screen-container { position: fixed; top: 90px; width: 100%; height: 52%; display: flex; justify-content: center; align-items: center; z-index: 20; }
69
+ #cinema-screen {
70
+ width: 80%;
71
+ height: 90%;
72
+ background: #050505;
73
+ border: 3px solid #111;
74
+ border-radius: 8px;
75
+ box-shadow: 0 0 100px rgba(255, 0, 0, 0.25), /* 屏幕对环境的红漫反射 */
76
+ inset 0 0 50px #000;
77
+ overflow: hidden;
78
+ position: relative;
79
+ background: radial-gradient(circle, #1a0000 0%, #000 80%);
80
+ }
81
+
82
+ #actors-matrix { display: flex; justify-content: space-around; align-items: center; height: 60%; }
83
+ .actor { transition: 0.4s; }
84
+ .actor img { width: 260px; height: 260px; border-radius: 50%; border: 3px solid #1a1a1a; filter: grayscale(100%) opacity(0.3); transition: 0.5s; object-fit: cover; }
85
+ .actor.active img { filter: grayscale(0%) opacity(1) drop-shadow(0 0 20px #ff0000); transform: scale(1.05); }
86
+ #right.active img { filter: grayscale(0%) opacity(1) drop-shadow(0 0 20px #ff00ff); }
87
+
88
+ /* 字幕：加大电影质感 */
89
+ #subtitle { position: absolute; bottom: 20px; width: 80%; left: 10%; text-align: center; font-size: 2.2em; color: #fff; text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; z-index: 30; }
90
+
91
+ /* 底部控制台：上移并压紧 */
92
+ #director-console {
93
+ position: fixed;
94
+ bottom: 75px;
95
+ width: 100%;
96
+ z-index: 100;
97
+ display: flex;
98
+ flex-direction: column;
99
+ align-items: center;
100
+ gap: 8px;
101
+ filter: drop-shadow(0 0 20px rgba(0,0,0,0.8));
102
+ }
103
+
104
+ .mode-selector { display: flex; justify-content: center; gap: 20px; margin-bottom: 2px; }
105
+ .mode-btn { padding: 4px 12px; background: #111; border: 1px solid #333; color: #666; cursor: pointer; transition: 0.3s; border-radius: 4px; font-size: 0.8em; font-family: 'Courier New', monospace; }
106
+ .mode-btn.active#btn-normal { color: #00f2ff; border-color: #00f2ff; box-shadow: 0 0 10px #00f2ff; }
107
+ .mode-btn.active#btn-factory { color: #ff0000; border-color: #ff0000; box-shadow: 0 0 10px #ff0000; }
108
+
109
+ #director-params {
110
+ display: none;
111
+ opacity: 0;
112
+ transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
113
+ gap: 15px;
114
+ padding: 12px 20px;
115
+ background: rgba(20, 20, 20, 0.7);
116
+ backdrop-filter: blur(10px);
117
+ border: 1px solid rgba(255, 0, 0, 0.3);
118
+ border-radius: 8px;
119
+ align-items: center;
120
+ margin: 5px 0;
121
+ box-shadow: 0 0 20px rgba(0,0,0,0.5), inset 0 0 10px rgba(255,0,0,0.1);
122
+ }
123
+ .param-item { display: flex; align-items: center; gap: 8px; color: #eee; font-size: 0.85em; }
124
+ #model-select, #user-api-key, #api-base {
125
+ background: rgba(0, 0, 0, 0.6);
126
+ border: 1px solid #444;
127
+ color: #ff4444;
128
+ padding: 6px 10px;
129
+ font-family: 'Courier New', monospace;
130
+ outline: none;
131
+ border-radius: 4px;
132
+ transition: 0.3s;
133
+ }
134
+ #model-select:focus, #user-api-key:focus, #api-base:focus {
135
+ border-color: #ff0000;
136
+ box-shadow: 0 0 8px rgba(255, 0, 0, 0.4);
137
+ }
138
+ #user-api-key { width: 140px; }
139
+ #api-base { width: 220px; }
140
+
141
+ .input-group { display: flex; justify-content: center; gap: 10px; }
142
+ #input-topic { width: 400px; padding: 10px; background: #111; border: 1px solid #ff0000; color: #0f0; text-align: center; font-family: 'Courier New', monospace; }
143
+ #action-btn { background: #ff0000; color: #fff; font-weight: bold; padding: 10px 30px; border: none; cursor: pointer; text-transform: uppercase; letter-spacing: 1px; transition: 0.3s; }
144
+ #action-btn:hover { background: #b30000; transform: scale(1.05); }
145
+ #action-btn:disabled { background: #333; cursor: not-allowed; }
146
+
147
+ /* 底部版权与版本号 */
148
+ footer { position: fixed; bottom: 0; width: 100%; text-align: center; color: #333; font-size: 0.8em; padding: 10px; background: rgba(0,0,0,0.9); z-index: 1000; border-top: 1px solid #111;}
149
+ footer p { margin: 0; }
150
+ footer a { color: #333; text-decoration: none; }
151
+ footer a:hover { color: #ff0000; }