Hugging Face's logo

Spaces:
toughhou
/
bob
Running

App Files Community
bob
File size: 8,702 Bytes 
ad450f7
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bob AI 助手</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap');
        
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background-color: #F7F8FC;
            color: #1A1A1A;
        }
        
        .robot-avatar {
            width: 48px;
            height: 48px;
            background: linear-gradient(135deg, #EDF5FF 0%, #E0ECFF 100%);
            border-radius: 50%;
            position: relative;
        }
        
        .robot-eye {
            position: absolute;
            width: 16px;
            height: 8px;
            background-color: #2476FF;
            border-radius: 8px 8px 0 0;
            top: 16px;
            left: 16px;
        }
        
        .robot-smile {
            position: absolute;
            width: 24px;
            height: 8px;
            border-bottom: 2px solid #2476FF;
            border-radius: 0 0 8px 8px;
            bottom: 12px;
            left: 12px;
        }
        
        .highlight-blue {
            color: #2476FF;
        }
        
        .tool-card {
            width: 72px;
            height: 72px;
            border-radius: 16px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        
        .question-item::before {
            content: "";
            position: absolute;
            width: 8px;
            height: 8px;
            background-color: #2476FF;
            border-radius: 50%;
            left: 16px;
            top: 18px;
        }
        
        .input-bar {
            height: 44px;
            border-radius: 22px;
            box-shadow: 0 2px 12px rgba(240, 241, 245, 0.8);
        }
        
        .send-button {
            width: 32px;
            height: 32px;
            background-color: #2476FF;
        }
    </style>
</head>
<body class="min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <div class="h-14 flex items-center justify-between px-4 bg-[#F7F8FC]">
        <i class="fas fa-arrow-left text-gray-800 text-xl"></i>
        <i class="fas fa-cog text-gray-800 text-xl"></i>
    </div>
    
    <!-- 欢迎区域 -->
    <div class="flex items-start px-6 py-4 h-18">
        <div class="robot-avatar mr-4">
            <div class="robot-eye"></div>
            <div class="robot-smile"></div>
        </div>
        <div>
            <h1 class="text-lg font-bold">HI!Bob是您的AI全能助理</h1>
            <p class="text-sm text-gray-600">
                可以帮你<span class="highlight-blue">想策略</span>、<span class="highlight-blue">作分析</span>、<span class="highlight-blue">答问题</span>！快来试试吧！
            </p>
        </div>
    </div>
    
    <!-- AI工具区 -->
    <div class="flex justify-between px-6 my-4">
        <div class="tool-card flex flex-col items-center justify-center bg-white">
            <i class="fas fa-pencil-alt text-green-500 text-xl mb-1"></i>
            <span class="text-xs">AI创作</span>
        </div>
        <div class="tool-card flex flex-col items-center justify-center bg-white">
            <i class="fas fa-robot text-blue-500 text-xl mb-1"></i>
            <span class="text-xs">AI定制方案</span>
        </div>
        <div class="tool-card flex flex-col items-center justify-center bg-white">
            <i class="fas fa-user-tie text-blue-400 text-xl mb-1"></i>
            <span class="text-xs">AI预核保</span>
        </div>
        <div class="tool-card flex flex-col items-center justify-center bg-white">
            <i class="fas fa-shield-alt text-orange-400 text-xl mb-1"></i>
            <span class="text-xs">AI保障检视</span>
        </div>
    </div>
    
    <!-- 热点问题区 -->
    <div class="flex-1 px-6 mt-4">
        <div class="flex justify-between items-center mb-3">
            <h2 class="text-base font-bold">热点问题</h2>
            <span class="text-xs text-blue-500">更多></span>
        </div>
        
        <div class="bg-white rounded-lg">
            <div class="question-item relative py-3 pl-8 pr-4 flex justify-between items-center">
                <span class="text-sm truncate">如何选择适合自己的保险产品？</span>
                <i class="fas fa-chevron-right text-gray-400"></i>
            </div>
            <div class="question-item relative py-3 pl-8 pr-4 flex justify-between items-center">
                <span class="text-sm truncate">重疾险和医疗险有什么区别？</span>
                <i class="fas fa-chevron-right text-gray-400"></i>
            </div>
            <div class="question-item relative py-3 pl-8 pr-4 flex justify-between items-center">
                <span class="text-sm truncate">投保后多久可以享受保障？</span>
                <i class="fas fa-chevron-right text-gray-400"></i>
            </div>
            <div class="question-item relative py-3 pl-8 pr-4 flex justify-between items-center">
                <span class="text-sm truncate">如何查询保单的现金价值？</span>
                <i class="fas fa-chevron-right text-gray-400"></i>
            </div>
            <div class="question-item relative py-3 pl-8 pr-4 flex justify-between items-center">
                <span class="text-sm truncate">保险理赔需要准备哪些材料？</span>
                <i class="fas fa-chevron-right text-gray-400"></i>
            </div>
            <div class="question-item relative py-3 pl-8 pr-4 flex justify-between items-center">
                <span class="text-sm truncate">保费可以分期支付吗？</span>
                <i class="fas fa-chevron-right text-gray-400"></i>
            </div>
        </div>
        
        <div class="text-center py-2">
            <span class="text-xs text-gray-400">换一批</span>
        </div>
    </div>
    
    <!-- 底部输入栏 -->
    <div class="px-6 py-4 bg-[#F7F8FC]">
        <div class="input-bar flex items-center bg-white px-4">
            <i class="fas fa-microphone text-gray-400 mr-2"></i>
            <input type="text" placeholder="有问题，找Bob" class="flex-1 text-sm text-gray-400 focus:outline-none">
            <button class="send-button rounded-full flex items-center justify-center">
                <i class="fas fa-paper-plane text-white text-sm"></i>
            </button>
        </div>
    </div>

    <script>
        // 可以在这里添加交互逻辑
        document.addEventListener('DOMContentLoaded', function() {
            // 点击"换一批"按钮
            const refreshBtn = document.querySelector('.text-center span');
            refreshBtn.addEventListener('click', function() {
                alert('正在加载新一批热点问题...');
                // 实际应用中这里可以调用API获取新问题
            });
            
            // 点击发送按钮
            const sendBtn = document.querySelector('.send-button');
            sendBtn.addEventListener('click', function() {
                const input = document.querySelector('input');
                if (input.value.trim() !== '') {
                    alert('发送问题: ' + input.value);
                    input.value = '';
                }
            });
            
            // 点击问题项
            const questions = document.querySelectorAll('.question-item');
            questions.forEach(question => {
                question.addEventListener('click', function() {
                    const text = this.querySelector('span').textContent;
                    alert('正在查询: ' + text);
                });
            });
        });
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=toughhou/bob" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>