Hugging Face's logo

Spaces:
mikuyyds
/
cchat
Running

App Files Community
mikuyyds commited on
Commit
73a7ca2
·
verified ·
1 Parent(s): 4df152b

Upload index.html

Browse files
Files changed (1) hide show
  1. index.html +158 -0
index.html ADDED
@@ -0,0 +1,158 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="zh-CN">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AI大模型聊天界面</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ /* 自定义滚动条样式 */
11
+ .custom-scrollbar::-webkit-scrollbar {
12
+ width: 6px;
13
+ }
14
+ .custom-scrollbar::-webkit-scrollbar-thumb {
15
+ background-color: #9ca3af;
16
+ border-radius: 3px;
17
+ }
18
+ /* 打字动画效果 */
19
+ @keyframes typing {
20
+ from { width: 0 }
21
+ to { width: 100% }
22
+ }
23
+ .typing-animation {
24
+ overflow: hidden;
25
+ white-space: nowrap;
26
+ animation: typing 1.5s steps(40, end);
27
+ }
28
+ </style>
29
+ </head>
30
+ <body class="bg-gray-100 h-screen flex flex-col">
31
+ <!-- 顶部导航栏 -->
32
+ <header class="bg-white shadow-sm py-4 px-6">
33
+ <div class="flex items-center justify-between">
34
+ <div class="flex items-center space-x-2">
35
+ <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center">
36
+ <i class="fas fa-robot text-white"></i>
37
+ </div>
38
+ <h1 class="text-xl font-semibold text-gray-800">AI助手</h1>
39
+ </div>
40
+ <div class="flex space-x-4">
41
+ <button class="text-gray-500 hover:text-gray-700">
42
+ <i class="fas fa-cog"></i>
43
+ </button>
44
+ <button class="text-gray-500 hover:text-gray-700">
45
+ <i class="fas fa-history"></i>
46
+ </button>
47
+ </div>
48
+ </div>
49
+ </header>
50
+
51
+ <!-- 聊天内容区域 -->
52
+ <main class="flex-1 overflow-y-auto custom-scrollbar p-4 space-y-4">
53
+ <!-- AI回复消息示例 -->
54
+ <div class="flex space-x-3 max-w-3xl mx-auto">
55
+ <div class="flex-shrink-0 w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center">
56
+ <i class="fas fa-robot text-white"></i>
57
+ </div>
58
+ <div class="flex-1">
59
+ <div class="bg-white p-4 rounded-lg shadow-sm">
60
+ <p class="text-gray-800">您好！我是AI助手，有什么可以帮您的吗？</p>
61
+ <div class="mt-2 flex space-x-2 text-xs text-gray-500">
62
+ <span>AI助手</span>
63
+ <span>•</span>
64
+ <span>刚刚</span>
65
+ </div>
66
+ </div>
67
+ </div>
68
+ </div>
69
+
70
+ <!-- 用户消息示例 -->
71
+ <div class="flex space-x-3 max-w-3xl mx-auto flex-row-reverse">
72
+ <div class="flex-shrink-0 w-8 h-8 rounded-full bg-green-500 flex items-center justify-center">
73
+ <i class="fas fa-user text-white"></i>
74
+ </div>
75
+ <div class="flex-1">
76
+ <div class="bg-green-100 p-4 rounded-lg shadow-sm">
77
+ <p class="text-gray-800">请帮我写一篇关于人工智能的文章</p>
78
+ <div class="mt-2 flex space-x-2 text-xs text-gray-500 justify-end">
79
+ <span>您</span>
80
+ <span>•</span>
81
+ <span>刚刚</span>
82
+ </div>
83
+ </div>
84
+ </div>
85
+ </div>
86
+
87
+ <!-- AI正在输入状态 -->
88
+ <div class="flex space-x-3 max-w-3xl mx-auto">
89
+ <div class="flex-shrink-0 w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center">
90
+ <i class="fas fa-robot text-white"></i>
91
+ </div>
92
+ <div class="flex-1">
93
+ <div class="bg-white p-4 rounded-lg shadow-sm">
94
+ <div class="flex space-x-2">
95
+ <div class="w-2 h-2 rounded-full bg-gray-400 animate-pulse"></div>
96
+ <div class="w-2 h-2 rounded-full bg-gray-400 animate-pulse delay-75"></div>
97
+ <div class="w-2 h-2 rounded-full bg-gray-400 animate-pulse delay-150"></div>
98
+ </div>
99
+ </div>
100
+ </div>
101
+ </div>
102
+ </main>
103
+
104
+ <!-- 输入区域 -->
105
+ <footer class="bg-white border-t border-gray-200 p-4">
106
+ <div class="max-w-3xl mx-auto">
107
+ <form class="flex space-x-2">
108
+ <div class="flex-1 relative">
109
+ <textarea
110
+ id="messageInput"
111
+ rows="1"
112
+ placeholder="输入消息..."
113
+ class="w-full border border-gray-300 rounded-lg py-2 px-4 pr-10 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
114
+ style="min-height: 44px; max-height: 120px;"></textarea>
115
+ <div class="absolute right-2 bottom-2 flex space-x-1">
116
+ <button type="button" class="text-gray-400 hover:text-gray-600">
117
+ <i class="fas fa-paperclip"></i>
118
+ </button>
119
+ <button type="button" class="text-gray-400 hover:text-gray-600">
120
+ <i class="fas fa-microphone"></i>
121
+ </button>
122
+ </div>
123
+ </div>
124
+ <button
125
+ type="submit"
126
+ class="bg-blue-500 hover:bg-blue-600 text-white rounded-lg px-4 py-2 transition-colors duration-200">
127
+ <i class="fas fa-paper-plane"></i>
128
+ </button>
129
+ </form>
130
+ <p class="text-xs text-gray-500 mt-2 text-center">
131
+ AI助手可能会产生不准确的信息，请谨慎参考
132
+ </p>
133
+ </div>
134
+ </footer>
135
+
136
+ <script>
137
+ // 自动调整输入框高度
138
+ const messageInput = document.getElementById('messageInput');
139
+ messageInput.addEventListener('input', function() {
140
+ this.style.height = 'auto';
141
+ this.style.height = (this.scrollHeight) + 'px';
142
+ });
143
+
144
+ // 模拟发送消息
145
+ const form = document.querySelector('form');
146
+ form.addEventListener('submit', function(e) {
147
+ e.preventDefault();
148
+ const message = messageInput.value.trim();
149
+ if (message) {
150
+ // 这里可以添加发送消息的逻辑
151
+ console.log('发送消息:', message);
152
+ messageInput.value = '';
153
+ messageInput.style.height = 'auto';
154
+ }
155
+ });
156
+ </script>
157
+ </body>
158
+ </html>