Hugging Face's logo

Spaces:
jinv2
/
Genesis-Agent
Sleeping

App Files Community
Genesis-Agent
File size: 8,194 Bytes
09a3648
 
 
 
 
 
 
 
 
 
 
 
 
af9965b
 
 
 
 
 
 
 
 
09a3648
af9965b
f3a98b1
 
09a3648
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f3a98b1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
09a3648
 
f3a98b1
09a3648
 
 
af9965b
09a3648
 
 
 
 
 
 
 
af9965b
 
09a3648
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>神思庭 · 全息世界多模态智能体</title>
    <link rel="stylesheet" href="style.css">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;700&family=Noto+Sans+SC:wght@300;400;700&display=swap" rel="stylesheet">
</head>
<body class="theater-mode">
    <!-- AIS Logo & Theater Controls -->
    <div id="ais-top-bar">
        <a href="https://shensist.top/" target="_blank" class="logo-link">
            <div class="logo-section">
                <div class="logo-circle">
                    <img src="assets/logo_ts.webp" alt="AIS Logo" class="logo-img">
                </div>
                <div class="title-group">
                    <div class="logo-title">神思庭 · 创世</div>
                    <div class="logo-subtitle">全息世界多模态智能体</div>
                </div>
            </div>
        </a>
        <div id="top-bar-controls">
            <button id="toggle-archives" class="control-btn" title="查看档案">
                <svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20">
                    <path d="M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 4h5v8l-2.5-1.5L6 12V4z"/>
                </svg>
            </button>
        </div>
    </div>

    <!-- Background Theater Layer -->
    <div id="theater-stage">
        <!-- Background Video (Representing the Genesis MV) -->
        <div class="video-overlay"></div>
        <video id="bg-video" autoplay muted loop playsinline>
            <source src="https://assets.mixkit.co/videos/preview/mixkit-digital-animation-of-abstract-shapes-4414-large.mp4" type="video/mp4">
        </video>
    </div>

    <!-- Interactive Layer -->
    <main id="aui-container">
        <!-- Sidebar Actor Gallery (Moved to Left) -->
        <aside id="actor-gallery" class="glass-panel">
            <h3>唤醒山海灵兽</h3>
            <div id="actor-list">
                <!-- Data-driven actors will be injected here -->
            </div>
        </aside>

        <!-- Floating Interaction Panel -->
        <section id="main-interface" class="glass-panel">
            <div id="actor-portrait-container">
                <img id="actor-portrait" src="assets/（九尾狐）@mmmmmmmm1.foxqueenah.webp" alt="Actor Portrait" class="actor-portrait">
            </div>
            <div class="header">
                <h1 id="agent-name">神思庭 · AI山海造物主</h1>
                <p id="agent-status-text">全息频率已就绪</p>
            </div>

            <div id="response-area">
                <p id="agent-text">欢迎来到全息世界。在这里，传说不再是故纸堆里的文字。</p>
            </div>

            <div class="interaction-footer">
                <div id="voice-trigger" class="pulse-container">
                    <div class="ring"></div>
                    <div class="ring"></div>
                    <div class="ring"></div>
                    <button id="listen-btn" title="点击开始对话">
                        <svg viewBox="0 0 24 24" fill="white" width="32" height="32">
                            <path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z"/>
                            <path d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"/>
                        </svg>
                    </button>
                </div>
            </div>
        </section>

        <!-- Lingjing Archives Panel (Hidden by default) -->
        <div id="archives-panel" class="glass-panel side-panel">
            <div class="panel-header">
                <h2>灵境档案</h2>
                <div class="header-actions">
                    <button id="toggle-fullscreen" class="panel-btn" title="全屏查看">
                        <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18">
                            <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>
                        </svg>
                    </button>
                    <button id="toggle-archives-btn" class="panel-btn archives-opener-icon" title="查看档案">
                         <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18">
                            <path d="M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 4h5v8l-2.5-1.5L6 12V4z"/>
                        </svg>
                    </button>
                    <button id="close-archives" class="panel-btn" title="关闭">✕</button>
                </div>
            </div>
            <div class="tabs">
                <button class="tab-btn active" data-tab="lyrics">歌词</button>
                <button class="tab-btn" data-tab="novel">小说</button>
                <button class="tab-btn" data-tab="music">音乐</button>
                <button class="tab-btn" data-tab="video">视频</button>
            </div>
            <div class="tab-content">
                <div id="content-lyrics" class="content-view active">正在加载档案频率...</div>
                <div id="content-novel" class="content-view">正在读取山海经脉...</div>
                <div id="content-music" class="content-view">
                    <div class="music-module-container">
                        <div id="music-list" class="music-list">
                            <!-- Tracks will be injected here -->
                        </div>
                        <div class="music-player-widget">
                            <div class="progress-bar-container">
                                <span id="current-time" class="time-label">00:00</span>
                                <input type="range" id="music-progress" value="0" step="0.1" class="progress-slider">
                                <span id="total-time" class="time-label">00:00</span>
                            </div>
                            <div class="player-controls-compact">
                                <button id="music-stop" class="player-btn" title="停止">
                                    <svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><rect x="6" y="6" width="12" height="12"/></svg>
                                </button>
                                <button id="music-play" class="player-btn large" title="播放">
                                    <svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24"><path d="M8 5v14l11-7z"/></svg>
                                </button>
                                <button id="music-pause" class="player-btn large" title="暂停" style="display:none;">
                                    <svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
                                </button>
                                <button id="music-next" class="player-btn" title="下一曲">
                                    <svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/></svg>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="content-video" class="content-view">正在同步灵境剧院...</div>
            </div>
        </div>
    </main>

    <!-- Global Music Player (The Official Soundtrack) -->
    <audio id="mv-audio">
        <source src="assets/shensist_genesis_mv.mp3" type="audio/mp3">
    </audio>

    <!-- Copyright Footer -->
    <footer>
        <p>© 2026 神思庭艺术智能工作室 (AIS) | 著作权人：金威 | 版权所有，未经授权禁止商业使用 | <a href="https://shensist.top/" target="_blank">shensist.top</a></p>
    </footer>

    <!-- Scripts -->
    <script src="assets/database.js"></script>
    <script src="script.js"></script>
</body>
</html>