Hugging Face's logo

Spaces:
benzzi1111
/
undefined
Running

App Files Community
benzzi1111 commited on
Commit
a1b1d26
·
verified ·
1 Parent(s): 4018323

生成一个AI智能标书生成模块，能生成大纲和图文并茂的正文，整体界面用橙色，中文编写

Browse files
Files changed (3) hide show
  1. README.md +9 -5
  2. generator.html +374 -0
  3. index.html +311 -18
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Undefined
3
- emoji: 📉
4
- colorFrom: indigo
5
- colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
 
1
  ---
2
+ title: undefined
3
+ colorFrom: red
4
+ colorTo: gray
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
generator.html ADDED
@@ -0,0 +1,374 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ primary: {
16
+ 100: '#FFEDD5',
17
+ 200: '#FED7AA',
18
+ 300: '#FDBA74',
19
+ 400: '#FB923C',
20
+ 500: '#F97316',
21
+ 600: '#EA580C',
22
+ 700: '#C2410C',
23
+ 800: '#9A3412',
24
+ 900: '#7C2D12',
25
+ }
26
+ }
27
+ }
28
+ }
29
+ }
30
+ </script>
31
+ <style>
32
+ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
33
+ body {
34
+ font-family: 'Noto Sans SC', sans-serif;
35
+ }
36
+ .generator-card {
37
+ transition: all 0.3s;
38
+ border-left: 4px solid #F97316;
39
+ }
40
+ .generator-card:hover {
41
+ transform: translateY(-3px);
42
+ box-shadow: 0 10px 15px -3px rgba(249, 115, 22, 0.2);
43
+ }
44
+ .progress-bar {
45
+ height: 6px;
46
+ background-color: #FED7AA;
47
+ }
48
+ .progress-value {
49
+ height: 100%;
50
+ background-color: #F97316;
51
+ transition: width 0.5s;
52
+ }
53
+ </style>
54
+ </head>
55
+ <body class="bg-orange-50 min-h-screen">
56
+ <!-- 导航栏 -->
57
+ <nav class="bg-primary-500 shadow-lg">
58
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
59
+ <div class="flex justify-between h-16">
60
+ <div class="flex items-center">
61
+ <div class="flex-shrink-0 flex items-center">
62
+ <i data-feather="file-text" class="text-white h-8 w-8"></i>
63
+ <span class="ml-2 text-white text-xl font-bold">橙智标书魔法师</span>
64
+ </div>
65
+ </div>
66
+ <div class="hidden md:ml-6 md:flex md:items-center space-x-4">
67
+ <a href="index.html" class="text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-primary-600">首页</a>
68
+ <a href="#" class="text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-primary-600">历史记录</a>
69
+ <a href="generator.html" class="bg-white text-primary-600 px-3 py-2 rounded-md text-sm font-medium">标书生成</a>
70
+ <a href="#" class="text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-primary-600">API文档</a>
71
+ <button class="bg-white text-primary-600 px-4 py-2 rounded-md text-sm font-medium hover:bg-gray-100">
72
+ 登录/注册
73
+ </button>
74
+ </div>
75
+ <div class="-mr-2 flex md:hidden">
76
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-white hover:text-white hover:bg-primary-600 focus:outline-none">
77
+ <i data-feather="menu"></i>
78
+ </button>
79
+ </div>
80
+ </div>
81
+ </div>
82
+ </nav>
83
+
84
+ <!-- 主内容区域 -->
85
+ <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
86
+ <!-- 标题和简介 -->
87
+ <div class="text-center mb-12">
88
+ <h1 class="text-4xl font-bold text-gray-900 mb-4">AI智能标书生成</h1>
89
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">
90
+ 只需输入项目基本信息，AI将为您自动生成专业标书大纲和图文并茂的正文内容
91
+ </p>
92
+ </div>
93
+
94
+ <!-- 生成步骤 -->
95
+ <div class="bg-white rounded-xl shadow-lg p-8 mb-12">
96
+ <h2 class="text-2xl font-bold text-gray-900 mb-6">标书生成流程</h2>
97
+
98
+ <div class="progress-bar rounded-full mb-8">
99
+ <div class="progress-value rounded-full w-1/3"></div>
100
+ </div>
101
+
102
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
103
+ <!-- 步骤1 -->
104
+ <div class="generator-card bg-white rounded-lg p-6 shadow-md">
105
+ <div class="flex items-center mb-4">
106
+ <div class="bg-primary-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3">1</div>
107
+ <h3 class="text-lg font-medium text-gray-900">基本信息填写</h3>
108
+ </div>
109
+ <form class="space-y-4">
110
+ <div>
111
+ <label class="block text-sm font-medium text-gray-700 mb-1">项目名称</label>
112
+ <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500">
113
+ </div>
114
+ <div>
115
+ <label class="block text-sm font-medium text-gray-700 mb-1">项目类型</label>
116
+ <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500">
117
+ <option>建筑工程</option>
118
+ <option>IT服务</option>
119
+ <option>政府采购</option>
120
+ <option>咨询服务</option>
121
+ </select>
122
+ </div>
123
+ <div>
124
+ <label class="block text-sm font-medium text-gray-700 mb-1">项目预算</label>
125
+ <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500">
126
+ </div>
127
+ <div>
128
+ <label class="block text-sm font-medium text-gray-700 mb-1">特殊要求</label>
129
+ <textarea rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500"></textarea>
130
+ </div>
131
+ </form>
132
+ </div>
133
+
134
+ <!-- 步骤2 -->
135
+ <div class="generator-card bg-white rounded-lg p-6 shadow-md opacity-50">
136
+ <div class="flex items-center mb-4">
137
+ <div class="bg-primary-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3">2</div>
138
+ <h3 class="text-lg font-medium text-gray-900">大纲生成与调整</h3>
139
+ </div>
140
+ <div class="flex items-center justify-center h-64 bg-gray-100 rounded-md">
141
+ <p class="text-gray-500">完成第一步后生成标书大纲</p>
142
+ </div>
143
+ </div>
144
+
145
+ <!-- 步骤3 -->
146
+ <div class="generator-card bg-white rounded-lg p-6 shadow-md opacity-50">
147
+ <div class="flex items-center mb-4">
148
+ <div class="bg-primary-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3">3</div>
149
+ <h3 class="text-lg font-medium text-gray-900">正文生成与下载</h3>
150
+ </div>
151
+ <div class="flex items-center justify-center h-64 bg-gray-100 rounded-md">
152
+ <p class="text-gray-500">完成第二步后生成完整标书</p>
153
+ </div>
154
+ </div>
155
+ </div>
156
+
157
+ <div class="mt-8 flex justify-end">
158
+ <button class="bg-primary-600 hover:bg-primary-700 text-white px-6 py-3 rounded-md font-medium text-lg flex items-center">
159
+ 下一步：生成大纲
160
+ <i data-feather="arrow-right" class="ml-2"></i>
161
+ </button>
162
+ </div>
163
+ </div>
164
+
165
+ <!-- 示例标书 -->
166
+ <div class="bg-white rounded-xl shadow-lg p-8">
167
+ <h2 class="text-2xl font-bold text-gray-900 mb-6">示例标书展示</h2>
168
+
169
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
170
+ <div class="border border-gray-200 rounded-lg overflow-hidden">
171
+ <div class="bg-primary-500 text-white p-4">
172
+ <h3 class="font-medium">智慧园区建设项目标书</h3>
173
+ </div>
174
+ <div class="p-4">
175
+ <img src="http://static.photos/technology/640x360/1" alt="示例标书封面" class="w-full h-auto mb-4 rounded">
176
+ <div class="space-y-2">
177
+ <div class="flex items-center">
178
+ <i data-feather="file-text" class="text-primary-500 mr-2"></i>
179
+ <span>150页完整标书文档</span>
180
+ </div>
181
+ <div class="flex items-center">
182
+ <i data-feather="image" class="text-primary-500 mr-2"></i>
183
+ <span>35张专业图表</span>
184
+ </div>
185
+ <div class="flex items-center">
186
+ <i data-feather="check-circle" class="text-primary-500 mr-2"></i>
187
+ <span>合规性检查通过</span>
188
+ </div>
189
+ </div>
190
+ </div>
191
+ </div>
192
+
193
+ <div class="border border-gray-200 rounded-lg overflow-hidden">
194
+ <div class="bg-primary-500 text-white p-4">
195
+ <h3 class="font-medium">政务云平台建设标书</h3>
196
+ </div>
197
+ <div class="p-4">
198
+ <img src="http://static.photos/technology/640x360/2" alt="示例标书内页" class="w-full h-auto mb-4 rounded">
199
+ <div class="space-y-2">
200
+ <div class="flex items-center">
201
+ <i data-feather="file-text" class="text-primary-500 mr-2"></i>
202
+ <span>210页完整标书文档</span>
203
+ </div>
204
+ <div class="flex items-center">
205
+ <i data-feather="image" class="text-primary-500 mr-2"></i>
206
+ <span>48张专业图表</span>
207
+ </div>
208
+ <div class="flex items-center">
209
+ <i data-feather="check-circle" class="text-primary-500 mr-2"></i>
210
+ <span>评分点自动标记</span>
211
+ </div>
212
+ </div>
213
+ </div>
214
+ </div>
215
+ </div>
216
+ </div>
217
+ </main>
218
+
219
+ <!-- 页脚 -->
220
+ <footer class="bg-primary-800 text-white py-12">
221
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
222
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
223
+ <div>
224
+ <h3 class="text-lg font-medium mb-4">橙智标书魔法师</h3>
225
+ <p class="text-primary-200">
226
+ AI驱动的标书生成与解析专家
227
+ </p>
228
+ </div>
229
+ <div>
230
+ <h3 class="text-lg font-medium mb-4">产品</h3>
231
+ <ul class="space-y-2">
232
+ <li><a href="#" class="text-primary-200 hover:text-white">功能特点</a></li>
233
+ <li><a href="generator.html" class="text-primary-200 hover:text-white">标书生成</a></li>
234
+ <li><a href="#" class="text-primary-200 hover:text-white">定价</a></li>
235
+ </ul>
236
+ </div>
237
+ <div>
238
+ <h3 class="text-lg font-medium mb-4">资源</h3>
239
+ <ul class="space-y-2">
240
+ <li><a href="#" class="text-primary-200 hover:text-white">文档</a></li>
241
+ <li><a href="#" class="text-primary-200 hover:text-white">博客</a></li>
242
+ <li><a href="#" class="text-primary-200 hover:text-white">帮助中心</a></li>
243
+ </ul>
244
+ </div>
245
+ <div>
246
+ <h3 class="text-lg font-medium mb-4">联系我们</h3>
247
+ <ul class="space-y-2">
248
+ <li class="flex items-center">
249
+ <i data-feather="mail" class="h-4 w-4 mr-2"></i>
250
+ <span class="text-primary-200">contact@aibid.com</span>
251
+ </li>
252
+ <li class="flex items-center">
253
+ <i data-feather="phone" class="h-4 w-4 mr-2"></i>
254
+ <span class="text-primary-200">400-888-9999</span>
255
+ </li>
256
+ </ul>
257
+ </div>
258
+ </div>
259
+ <div class="border-t border-primary-700 mt-8 pt-8 text-center text-primary-300">
260
+ <p>© 2023 橙智标书魔法师 版权所有</p>
261
+ </div>
262
+ </div>
263
+ </footer>
264
+
265
+ <script>
266
+ feather.replace();
267
+
268
+ // 模拟进度条动画
269
+ document.querySelector('form').addEventListener('submit', function(e) {
270
+ e.preventDefault();
271
+ const progressBar = document.querySelector('.progress-value');
272
+ const step2 = document.querySelectorAll('.generator-card')[1];
273
+ const step3 = document.querySelectorAll('.generator-card')[2];
274
+
275
+ // 动画进度条到66%
276
+ progressBar.style.width = '66%';
277
+
278
+ // 显示第二步内容
279
+ setTimeout(() => {
280
+ step2.classList.remove('opacity-50');
281
+ step2.innerHTML = `
282
+ <div class="flex items-center mb-4">
283
+ <div class="bg-primary-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3">2</div>
284
+ <h3 class="text-lg font-medium text-gray-900">大纲生成与调整</h3>
285
+ </div>
286
+ <div class="space-y-4">
287
+ <div class="bg-primary-50 p-4 rounded-md">
288
+ <div class="flex items-start">
289
+ <i data-feather="check" class="text-primary-500 mt-1 mr-2"></i>
290
+ <div>
291
+ <h4 class="font-medium">1. 项目概述</h4>
292
+ <p class="text-sm text-gray-600">包括项目背景、目标、范围等</p>
293
+ </div>
294
+ </div>
295
+ </div>
296
+ <div class="bg-primary-50 p-4 rounded-md">
297
+ <div class="flex items-start">
298
+ <i data-feather="check" class="text-primary-500 mt-1 mr-2"></i>
299
+ <div>
300
+ <h4 class="font-medium">2. 技术方案</h4>
301
+ <p class="text-sm text-gray-600">详细技术实施方案和架构</p>
302
+ </div>
303
+ </div>
304
+ </div>
305
+ <div class="bg-primary-50 p-4 rounded-md">
306
+ <div class="flex items-start">
307
+ <i data-feather="check" class="text-primary-500 mt-1 mr-2"></i>
308
+ <div>
309
+ <h4 class="font-medium">3. 项目管理</h4>
310
+ <p class="text-sm text-gray-600">项目进度计划和质量管理</p>
311
+ </div>
312
+ </div>
313
+ </div>
314
+ <div class="p-4 rounded-md border border-dashed border-gray-300">
315
+ <div class="flex items-start">
316
+ <i data-feather="plus" class="text-primary-500 mt-1 mr-2"></i>
317
+ <div>
318
+ <h4 class="font-medium">添加自定义章节</h4>
319
+ </div>
320
+ </div>
321
+ </div>
322
+ </div>
323
+ `;
324
+ feather.replace();
325
+
326
+ // 更新按钮文本
327
+ document.querySelector('button').innerHTML = `
328
+ 下一步：生成完整标书
329
+ <i data-feather="arrow-right" class="ml-2"></i>
330
+ `;
331
+
332
+ // 为第二步添加提交事件
333
+ document.querySelector('button').addEventListener('click', function() {
334
+ progressBar.style.width = '100%';
335
+
336
+ // 显示第三步内容
337
+ setTimeout(() => {
338
+ step3.classList.remove('opacity-50');
339
+ step3.innerHTML = `
340
+ <div class="flex items-center mb-4">
341
+ <div class="bg-primary-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3">3</div>
342
+ <h3 class="text-lg font-medium text-gray-900">正文生成与下载</h3>
343
+ </div>
344
+ <div class="text-center p-6">
345
+ <i data-feather="check-circle" class="text-green-500 w-12 h-12 mx-auto mb-4"></i>
346
+ <h4 class="text-xl font-medium text-gray-900 mb-2">标书生成完成！</h4>
347
+ <p class="text-gray-600 mb-6">已为您生成150页专业标书文档，包含35张图表</p>
348
+ <div class="grid grid-cols-2 gap-4">
349
+ <button class="bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded-md font-medium flex items-center justify-center">
350
+ <i data-feather="download" class="mr-2"></i>
351
+ PDF下载
352
+ </button>
353
+ <button class="bg-white hover:bg-gray-100 text-primary-600 border border-primary-600 px-4 py-2 rounded-md font-medium flex items-center justify-center">
354
+ <i data-feather="edit" class="mr-2"></i>
355
+ 在线编辑
356
+ </button>
357
+ </div>
358
+ </div>
359
+ `;
360
+ feather.replace();
361
+
362
+ // 更新按钮为重新生成
363
+ document.querySelector('button').innerHTML = `
364
+ <i data-feather="refresh-cw" class="mr-2"></i>
365
+ 重新生成标书
366
+ `;
367
+ feather.replace();
368
+ }, 500);
369
+ });
370
+ }, 800);
371
+ });
372
+ </script>
373
+ </body>
374
+ </html>
index.html CHANGED
@@ -1,19 +1,312 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
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
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: {
17
+ 100: '#FFEDD5',
18
+ 200: '#FED7AA',
19
+ 300: '#FDBA74',
20
+ 400: '#FB923C',
21
+ 500: '#F97316',
22
+ 600: '#EA580C',
23
+ 700: '#C2410C',
24
+ 800: '#9A3412',
25
+ 900: '#7C2D12',
26
+ }
27
+ }
28
+ }
29
+ }
30
+ }
31
+ </script>
32
+ <style>
33
+ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
34
+ body {
35
+ font-family: 'Noto Sans SC', sans-serif;
36
+ }
37
+ .vanta-bg {
38
+ position: absolute;
39
+ top: 0;
40
+ left: 0;
41
+ width: 100%;
42
+ height: 100%;
43
+ z-index: -1;
44
+ opacity: 0.3;
45
+ }
46
+ .file-drop-area {
47
+ border: 2px dashed #F97316;
48
+ transition: all 0.3s;
49
+ }
50
+ .file-drop-area:hover {
51
+ background-color: #FFEDD5;
52
+ }
53
+ .analysis-card:hover {
54
+ transform: translateY(-5px);
55
+ box-shadow: 0 10px 25px -5px rgba(249, 115, 22, 0.4);
56
+ }
57
+ </style>
58
+ </head>
59
+ <body class="bg-orange-50 min-h-screen">
60
+ <div class="vanta-bg" id="vanta-bg"></div>
61
+
62
+ <!-- 导航栏 -->
63
+ <nav class="bg-primary-500 shadow-lg">
64
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
65
+ <div class="flex justify-between h-16">
66
+ <div class="flex items-center">
67
+ <div class="flex-shrink-0 flex items-center">
68
+ <i data-feather="file-text" class="text-white h-8 w-8"></i>
69
+ <span class="ml-2 text-white text-xl font-bold">橙智标书解析AI</span>
70
+ </div>
71
+ </div>
72
+ <div class="hidden md:ml-6 md:flex md:items-center space-x-4">
73
+ <a href="#" class="text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-primary-600">首页</a>
74
+ <a href="#" class="text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-primary-600">历史记录</a>
75
+ <a href="#" class="text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-primary-600">标书生成</a>
76
+ <a href="#" class="text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-primary-600">API文档</a>
77
+ <button class="bg-white text-primary-600 px-4 py-2 rounded-md text-sm font-medium hover:bg-gray-100">
78
+ 登录/注册
79
+ </button>
80
+ </div>
81
+ <div class="-mr-2 flex md:hidden">
82
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-white hover:text-white hover:bg-primary-600 focus:outline-none">
83
+ <i data-feather="menu"></i>
84
+ </button>
85
+ </div>
86
+ </div>
87
+ </div>
88
+ </nav>
89
+
90
+ <!-- 主内容区域 -->
91
+ <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
92
+ <!-- 标题和简介 -->
93
+ <div class="text-center mb-16">
94
+ <h1 class="text-4xl font-bold text-gray-900 mb-4">智能标书解析解决方案</h1>
95
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">
96
+ 基于AI的智能标书解析系统，自动提取关键信息，生成分析报告，
97
+ 帮助您快速理解投标要求，提高标书制作效率！
98
+ </p>
99
+ </div>
100
+
101
+ <!-- 文件上传区域 -->
102
+ <div class="bg-white rounded-xl shadow-lg p-8 mb-16">
103
+ <div class="file-drop-area rounded-lg p-12 text-center cursor-pointer">
104
+ <div class="flex flex-col items-center justify-center">
105
+ <i data-feather="upload-cloud" class="text-primary-500 h-12 w-12 mb-4"></i>
106
+ <h3 class="text-lg font-medium text-gray-900 mb-2">拖放标书文件到此处</h3>
107
+ <p class="text-gray-500 mb-4">支持PDF, Word, Excel格式</p>
108
+ <button class="bg-primary-500 hover:bg-primary-600 text-white px-6 py-2 rounded-md font-medium">
109
+ 选择文件
110
+ </button>
111
+ </div>
112
+ <input type="file" class="hidden" accept=".pdf,.doc,.docx,.xls,.xlsx">
113
+ </div>
114
+ </div>
115
+
116
+ <!-- 功能特点展示 -->
117
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
118
+ <div class="analysis-card bg-white rounded-xl shadow-md p-6 transition-all duration-300">
119
+ <div class="bg-primary-100 p-3 rounded-full w-12 h-12 flex items-center justify-center mb-4">
120
+ <i data-feather="search" class="text-primary-600"></i>
121
+ </div>
122
+ <h3 class="text-lg font-medium text-gray-900 mb-2">关键信息提取</h3>
123
+ <p class="text-gray-600">
124
+ 自动识别并提取标书中的关键条款、技术参数、商务要求等重要信息。
125
+ </p>
126
+ </div>
127
+ <div class="analysis-card bg-white rounded-xl shadow-md p-6 transition-all duration-300">
128
+ <div class="bg-primary-100 p-3 rounded-full w-12 h-12 flex items-center justify-center mb-4">
129
+ <i data-feather="check-circle" class="text-primary-600"></i>
130
+ </div>
131
+ <h3 class="text-lg font-medium text-gray-900 mb-2">合规性检查</h3>
132
+ <p class="text-gray-600">
133
+ 智能检查标书是否符合招标要求，识别潜在风险点并提供改进建议。
134
+ </p>
135
+ </div>
136
+ <div class="analysis-card bg-white rounded-xl shadow-md p-6 transition-all duration-300">
137
+ <div class="bg-primary-100 p-3 rounded-full w-12 h-12 flex items-center justify-center mb-4">
138
+ <i data-feather="bar-chart-2" class="text-primary-600"></i>
139
+ </div>
140
+ <h3 class="text-lg font-medium text-gray-900 mb-2">智能分析报告</h3>
141
+ <p class="text-gray-600">
142
+ 生成详细的标书分析报告，包含评分点、竞争对手分析和投标策略建议。
143
+ </p>
144
+ </div>
145
+ </div>
146
+
147
+ <!-- 示例分析结果 -->
148
+ <div class="bg-white rounded-xl shadow-lg p-8">
149
+ <h2 class="text-2xl font-bold text-gray-900 mb-6">示例分析结果</h2>
150
+ <div class="overflow-x-auto">
151
+ <table class="min-w-full divide-y divide-gray-200">
152
+ <thead class="bg-primary-50">
153
+ <tr>
154
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-primary-600 uppercase tracking-wider">关键项</th>
155
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-primary-600 uppercase tracking-wider">提取值</th>
156
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-primary-600 uppercase tracking-wider">重要度</th>
157
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-primary-600 uppercase tracking-wider">建议</th>
158
+ </tr>
159
+ </thead>
160
+ <tbody class="bg-white divide-y divide-gray-200">
161
+ <tr>
162
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">投标截止日期</td>
163
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-12-31</td>
164
+ <td class="px-6 py-4 whitespace-nowrap">
165
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
166
+ 高
167
+ </span>
168
+ </td>
169
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">建议提前7天完成标书制作</td>
170
+ </tr>
171
+ <tr>
172
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">项目预算</td>
173
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">¥5,000,000</td>
174
+ <td class="px-6 py-4 whitespace-nowrap">
175
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
176
+ 中
177
+ </span>
178
+ </td>
179
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">建��报价在预算的85%-95%之间</td>
180
+ </tr>
181
+ <tr>
182
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">技术得分占比</td>
183
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">60%</td>
184
+ <td class="px-6 py-4 whitespace-nowrap">
185
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
186
+ 低
187
+ </span>
188
+ </td>
189
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">应着重准备技术方案部分</td>
190
+ </tr>
191
+ </tbody>
192
+ </table>
193
+ </div>
194
+ </div>
195
+ </main>
196
+
197
+ <!-- 页脚 -->
198
+ <footer class="bg-primary-800 text-white py-12">
199
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
200
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
201
+ <div>
202
+ <h3 class="text-lg font-medium mb-4">橙智标书解析AI</h3>
203
+ <p class="text-primary-200">
204
+ 领先的AI标书解析解决方案，助力企业高效投标。
205
+ </p>
206
+ </div>
207
+ <div>
208
+ <h3 class="text-lg font-medium mb-4">产品</h3>
209
+ <ul class="space-y-2">
210
+ <li><a href="#" class="text-primary-200 hover:text-white">功能特点</a></li>
211
+ <li><a href="#" class="text-primary-200 hover:text-white">标书生成</a></li>
212
+ <li><a href="#" class="text-primary-200 hover:text-white">定价</a></li>
213
+ <li><a href="#" class="text-primary-200 hover:text-white">API集成</a></li>
214
+ </ul>
215
+ </div>
216
+ <div>
217
+ <h3 class="text-lg font-medium mb-4">资源</h3>
218
+ <ul class="space-y-2">
219
+ <li><a href="#" class="text-primary-200 hover:text-white">文档</a></li>
220
+ <li><a href="#" class="text-primary-200 hover:text-white">博客</a></li>
221
+ <li><a href="#" class="text-primary-200 hover:text-white">帮助中心</a></li>
222
+ </ul>
223
+ </div>
224
+ <div>
225
+ <h3 class="text-lg font-medium mb-4">联系我们</h3>
226
+ <ul class="space-y-2">
227
+ <li class="flex items-center">
228
+ <i data-feather="mail" class="h-4 w-4 mr-2"></i>
229
+ <span class="text-primary-200">contact@aibid.com</span>
230
+ </li>
231
+ <li class="flex items-center">
232
+ <i data-feather="phone" class="h-4 w-4 mr-2"></i>
233
+ <span class="text-primary-200">400-888-8888</span>
234
+ </li>
235
+ </ul>
236
+ </div>
237
+ </div>
238
+ <div class="border-t border-primary-700 mt-8 pt-8 text-center text-primary-300">
239
+ <p>© 2023 橙智标书解析AI 版权所有</p>
240
+ </div>
241
+ </div>
242
+ </footer>
243
+
244
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
245
+ <script>
246
+ VANTA.GLOBE({
247
+ el: "#vanta-bg",
248
+ mouseControls: true,
249
+ touchControls: true,
250
+ gyroControls: false,
251
+ minHeight: 200.00,
252
+ minWidth: 200.00,
253
+ scale: 1.00,
254
+ scaleMobile: 1.00,
255
+ color: 0xF97316,
256
+ backgroundColor: 0xFFF7ED,
257
+ size: 0.8
258
+ });
259
+
260
+ feather.replace();
261
+
262
+ // 文件上传交互
263
+ const fileDropArea = document.querySelector('.file-drop-area');
264
+ const fileInput = document.querySelector('input[type="file"]');
265
+
266
+ fileDropArea.addEventListener('click', () => fileInput.click());
267
+
268
+ ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
269
+ fileDropArea.addEventListener(eventName, preventDefaults, false);
270
+ });
271
+
272
+ function preventDefaults(e) {
273
+ e.preventDefault();
274
+ e.stopPropagation();
275
+ }
276
+
277
+ ['dragenter', 'dragover'].forEach(eventName => {
278
+ fileDropArea.addEventListener(eventName, highlight, false);
279
+ });
280
+
281
+ ['dragleave', 'drop'].forEach(eventName => {
282
+ fileDropArea.addEventListener(eventName, unhighlight, false);
283
+ });
284
+
285
+ function highlight() {
286
+ fileDropArea.classList.add('bg-primary-100');
287
+ }
288
+
289
+ function unhighlight() {
290
+ fileDropArea.classList.remove('bg-primary-100');
291
+ }
292
+
293
+ fileDropArea.addEventListener('drop', handleDrop, false);
294
+
295
+ function handleDrop(e) {
296
+ const dt = e.dataTransfer;
297
+ const files = dt.files;
298
+ handleFiles(files);
299
+ }
300
+
301
+ fileInput.addEventListener('change', function() {
302
+ handleFiles(this.files);
303
+ });
304
+
305
+ function handleFiles(files) {
306
+ // 这里可以处理上传的文件
307
+ console.log(files);
308
+ alert(`已选择文件: ${files[0].name}`);
309
+ }
310
+ </script>
311
+ </body>
312
  </html>