Hugging Face's logo

Spaces:
Jarvis-AI
/
SearchDev
Running

App Files Community
SearchDev
File size: 4,842 Bytes
4657c70
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.0/dist/semantic.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.0/dist/semantic.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<div class="ui container" style="width: 400px;">
    <div class="ui grid centered">
    <div class="row">
        <div id="searchContainer" style="margin-top: 20px;">
            <div class="ui icon input" id="searchBox">
                <input type="text" id="searchInput" placeholder="Search...">
                <button id="searchButton" class="ui icon button"><i id="searchIcon" class="search icon"></i></button>
            </div>
        </div>
    </div>
    <div class="row" style="padding-top: 0;">
    <div id="resultsContainer" style="text-align: left;width: 350px;">
        <div id="suggestionContainer" class="ui relaxed divided list bordered"></div>
        <div id="answerContainer">
            <div id="answerText"></div>
            <div id="feedbackContainer">
                <i class="thumbs up icon" id="likeButton"></i>
                <i class="thumbs down icon" id="dislikeButton"></i>
                <i class="clone outline icon" id="copyButton" style="float: right;"></i>
            </div>
        </div>
    </div>
    </div>
</div>
</div>
  

<script>
let backendUrl = 'https://jr818-jarvisfastapi.hf.space/api';
let timeout = null;

//自动补全
$('#searchInput').keyup(function() {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
        console.log('Autocomplete...');
        const query = $(this).val();

        $.ajax({
            url: backendUrl + `/suggestion?inputs=${query}`,
            type: 'GET',
            success: function(data) {
                $('#suggestionContainer').empty();

                data.slice(0, 3).forEach(item => {
                    let listItem = $(`
                        <div class="item">
                            <i class="middle bookmark outline icon"></i>
                            <div class="content">
                                <a href="${item.url}" class="header" target="_blank">${item.name}</a>
                            </div>
                        </div>
                    `);
                    $('#suggestionContainer').append(listItem);
                });
                $('#suggestionContainer').show();
            },
            error: function(error) {
                console.error('Error:', error);
            }
        });
    }, 500);
});

function search() {
    console.log('Searching...');
    $('#answerContainer').hide();
    clearTimeout(timeout);
    $('#searchIcon').removeClass('search').addClass('spinner loading');
    const query = $('#searchInput').val();
    $('#answerText').empty();
    // var count = 0;

    // 使用fetch API请求后端
    fetch(backendUrl + `/answer?inputs=${query}`)
        .then(response => {
            // 搜索完成后，恢复搜索图标
            $('#searchIcon').removeClass('spinner loading').addClass('search');
            const reader = response.body.getReader();

            // 读取流数据
            function read() {
                reader.read().then(({ done, value }) => {
                    if (done) {
                        return;
                    }

                    // 将流中的数据转换为文本
                    const text = new TextDecoder().decode(value);
                    // count += text.length;
                    $('#answerText').append(text);
                    $('#answerContainer').show();  
                    read();
                });
            }

            read();
        })
        .catch(error => {
            $('#searchIcon').removeClass('spinner loading').addClass('search');
            console.error('Error:', error);
        });
}

// 绑定搜索按钮点击事件
$('#searchButton').click(search);

// 绑定输入框回车事件
$('#searchInput').keypress(function(e) {
    if (e.which == 13) { // 回车键的键码是13
        search();
    }
});
$('#searchInput').on('input', function() {
    if ($(this).val().length > 0) {
        $('#searchBox').css('width', '200px');
    } else {
        $('#searchBox').css('width', '150px');
        $('#suggestionContainer').hide();
    }
});

$(document).ready(function() {
    $('#likeButton').click(function() {
        console.log('like');
    });

    $('#dislikeButton').click(function() {
        console.log('dislike');
    });

    $('#copyButton').click(function() {
        navigator.clipboard.writeText($('#answerText').text()).then(() => {
        }).catch(err => {
            console.error('copy failed:', err);
        });
    });
});
</script>