| <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(); |
| |
| |
| |
| 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); |
| |
| $('#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) { |
| 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> |
| |
