Hugging Face's logo

Spaces:
Jarvis-AI
/
SearchDev
Running

App Files Community
jiarongqiu commited on
Commit
4657c70
·
1 Parent(s): 071efec

first commit

Browse files
Files changed (3) hide show
  1. .DS_Store +0 -0
  2. index.html +147 -19
  3. style.css +94 -19
.DS_Store ADDED
Binary file (6.15 kB). View file
 
index.html CHANGED
@@ -1,19 +1,147 @@
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
+ <head>
2
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.0/dist/semantic.min.css">
3
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
4
+ <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.0/dist/semantic.min.js"></script>
5
+ <link rel="stylesheet" type="text/css" href="style.css">
6
+ </head>
7
+
8
+ <div class="ui container" style="width: 400px;">
9
+ <div class="ui grid centered">
10
+ <div class="row">
11
+ <div id="searchContainer" style="margin-top: 20px;">
12
+ <div class="ui icon input" id="searchBox">
13
+ <input type="text" id="searchInput" placeholder="Search...">
14
+ <button id="searchButton" class="ui icon button"><i id="searchIcon" class="search icon"></i></button>
15
+ </div>
16
+ </div>
17
+ </div>
18
+ <div class="row" style="padding-top: 0;">
19
+ <div id="resultsContainer" style="text-align: left;width: 350px;">
20
+ <div id="suggestionContainer" class="ui relaxed divided list bordered"></div>
21
+ <div id="answerContainer">
22
+ <div id="answerText"></div>
23
+ <div id="feedbackContainer">
24
+ <i class="thumbs up icon" id="likeButton"></i>
25
+ <i class="thumbs down icon" id="dislikeButton"></i>
26
+ <i class="clone outline icon" id="copyButton" style="float: right;"></i>
27
+ </div>
28
+ </div>
29
+ </div>
30
+ </div>
31
+ </div>
32
+ </div>
33
+
34
+
35
+ <script>
36
+ let backendUrl = 'https://jr818-jarvisfastapi.hf.space/api';
37
+ let timeout = null;
38
+
39
+ //自动补全
40
+ $('#searchInput').keyup(function() {
41
+ clearTimeout(timeout);
42
+ timeout = setTimeout(() => {
43
+ console.log('Autocomplete...');
44
+ const query = $(this).val();
45
+
46
+ $.ajax({
47
+ url: backendUrl + `/suggestion?inputs=${query}`,
48
+ type: 'GET',
49
+ success: function(data) {
50
+ $('#suggestionContainer').empty();
51
+
52
+ data.slice(0, 3).forEach(item => {
53
+ let listItem = $(`
54
+ <div class="item">
55
+ <i class="middle bookmark outline icon"></i>
56
+ <div class="content">
57
+ <a href="${item.url}" class="header" target="_blank">${item.name}</a>
58
+ </div>
59
+ </div>
60
+ `);
61
+ $('#suggestionContainer').append(listItem);
62
+ });
63
+ $('#suggestionContainer').show();
64
+ },
65
+ error: function(error) {
66
+ console.error('Error:', error);
67
+ }
68
+ });
69
+ }, 500);
70
+ });
71
+
72
+ function search() {
73
+ console.log('Searching...');
74
+ $('#answerContainer').hide();
75
+ clearTimeout(timeout);
76
+ $('#searchIcon').removeClass('search').addClass('spinner loading');
77
+ const query = $('#searchInput').val();
78
+ $('#answerText').empty();
79
+ // var count = 0;
80
+
81
+ // 使用fetch API请求后端
82
+ fetch(backendUrl + `/answer?inputs=${query}`)
83
+ .then(response => {
84
+ // 搜索完成后，恢复搜索图标
85
+ $('#searchIcon').removeClass('spinner loading').addClass('search');
86
+ const reader = response.body.getReader();
87
+
88
+ // 读取流数据
89
+ function read() {
90
+ reader.read().then(({ done, value }) => {
91
+ if (done) {
92
+ return;
93
+ }
94
+
95
+ // 将流中的数据转换为文本
96
+ const text = new TextDecoder().decode(value);
97
+ // count += text.length;
98
+ $('#answerText').append(text);
99
+ $('#answerContainer').show();
100
+ read();
101
+ });
102
+ }
103
+
104
+ read();
105
+ })
106
+ .catch(error => {
107
+ $('#searchIcon').removeClass('spinner loading').addClass('search');
108
+ console.error('Error:', error);
109
+ });
110
+ }
111
+
112
+ // 绑定搜索按钮点击事件
113
+ $('#searchButton').click(search);
114
+
115
+ // 绑定输入框回车事件
116
+ $('#searchInput').keypress(function(e) {
117
+ if (e.which == 13) { // 回车键的键码是13
118
+ search();
119
+ }
120
+ });
121
+ $('#searchInput').on('input', function() {
122
+ if ($(this).val().length > 0) {
123
+ $('#searchBox').css('width', '200px');
124
+ } else {
125
+ $('#searchBox').css('width', '150px');
126
+ $('#suggestionContainer').hide();
127
+ }
128
+ });
129
+
130
+ $(document).ready(function() {
131
+ $('#likeButton').click(function() {
132
+ console.log('like');
133
+ });
134
+
135
+ $('#dislikeButton').click(function() {
136
+ console.log('dislike');
137
+ });
138
+
139
+ $('#copyButton').click(function() {
140
+ navigator.clipboard.writeText($('#answerText').text()).then(() => {
141
+ }).catch(err => {
142
+ console.error('copy failed:', err);
143
+ });
144
+ });
145
+ });
146
+ </script>
147
+
style.css CHANGED
@@ -1,28 +1,103 @@
1
- body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
28
  }
 
1
+ #mainContainer {
2
+ display: flex;
3
+ justify-content: center; /* 水平居中 */
4
+ max-width:500px;
5
+ margin: 0 auto; /* 居中 */
6
+ padding: 20px;
7
  }
8
 
9
+ #searchBox {
10
+ width: 150px; /* 初始宽度 */
11
+ transition: width 0.3s; /* 宽度变化的过渡效果 */
12
  }
13
 
14
+ #searchBox input {
15
+ width: 100%; /* 使输入框填满整个容器 */
 
 
 
16
  }
17
 
18
+ #searchBox:focus-within {
19
+ width: 200px; /* 聚焦时的宽度 */
 
 
 
 
20
  }
21
 
22
+ #searchButton {
23
+ padding: 0; /* 移除内边距以减少按钮大小，使其与输入框对齐 */
24
+ margin-left: -25px; /* 使按钮紧贴输入框 */
25
+ background-color: transparent; /* 使按钮背景透明 */
26
+ border: none; /* 移除边框 */
27
+ }
28
+
29
+ #resultsContainer {
30
+ box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* 为搜索建议添加阴影 */
31
+ z-index: 1000; /* 确保搜索建议在其他元素上方显示 */
32
+ border-radius: 5px; /* 为容器添加圆角 */
33
+ overflow: hidden; /* 防止子元素溢出容器圆角 */
34
+ background-color: #fff; /* 为了更好的视觉效果，可能需要设置背景色 */
35
+ }
36
+
37
+ .ui.list.bordered {
38
+ border: 1px solid rgba(34,36,38,.15); /* 添加边框 */
39
+ box-shadow: 0 1px 2px 0 rgba(34,36,38,.15); /* 添加阴影 */
40
+ }
41
+
42
+ .ui.list{
43
+ margin: 0;;
44
+ }
45
+
46
+ #resultsContainer .item {
47
+ width: 100%;
48
+ box-sizing: border-box;
49
+ padding: 10px 15px;
50
+ margin-top: 5px;
51
+ margin-bottom: 5px; /* 在项之间添加一些间隔 */
52
+ border: none; /* 确保没有边框 */
53
+ transition: background-color 0.3s; /* 添加背景色变化的过渡效果 */
54
+ }
55
+
56
+ #resultsContainer .item:hover {
57
+ background-color: #e2e2e2; /* 鼠标悬浮时的背景色 */
58
+ }
59
+
60
+ #suggestionContainer {
61
+ display: none;
62
+ }
63
+
64
+ #resultsList {
65
+ padding: 10px;
66
+ background-color: #0f0f0f; /* 为结果列表添加背景色 */
67
+ border-bottom: 1pxrgb(42, 36, 36)#ddd; /* 在列表和答案之间添加一条边界线 */
68
+ }
69
+
70
+ #answerContainer {
71
+ padding: 10px;
72
+ background-color: #f7f7f7;
73
+ border-radius: 5px;
74
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
75
+ font-family: Arial, sans-serif;
76
+ color: #333;
77
+ font-size: 16px;
78
+ line-height: 1.6;
79
+ display: none;
80
+ }
81
+
82
+ #feedbackContainer {
83
+ margin-top: 10px;
84
+ align-items: center;
85
+ border-top: gray solid 1px;
86
+ padding: 5px;
87
+ min-height: 30px;
88
+ }
89
+
90
+ #likeButton, #dislikeButton {
91
+ cursor: pointer;
92
+ margin-right: 10px;
93
+ float: left;
94
+ }
95
+
96
+ #copyButton {
97
+ cursor: pointer;
98
+ float: right;
99
+ }
100
+
101
+ #likeButton:hover, #dislikeButton:hover, #copyButton:hover {
102
+ color: #007bff;
103
  }