jinabox.js is a lightweight, customizable omnibox. You can use it for searching text, images, videos, audios or all kinds of data with a Jina backend .
Quick Start
In HTML, include the minified script:
<script src="https://unpkg.com/jinabox"></script>
<script>
jb = window.JinaBox
jb.init('http://0.0.0.0:65481/api/search'); // http://0.0.0.0:65481/api/search is the endpoint of the REST gateway of a Jina backend.
</script>
Then, create a container where the searchbar/floater is to appear:
<jina-searchbar/> <!--or--> <jina-floater/>
Run one of those prebuilt backend:
- Pokedex (real image data):
docker run -p 65481:65481 -e "JINA_PORT=65481" jinaai/hub.app.bitsearch-pokedex search - Southpark (real text data):
docker run -p 45678:45678 jinaai/hub.app.distilbert-southpark - MP4 mock (placeholder video data):
docker run -p 65481:65481 -e "JINA_PORT=65481" jinaai/hub.app.iomock.mp4 search - Wav mock (placeholder audio data):
docker run -p 65481:65481 -e "JINA_PORT=65481" jinaai/hub.app.iomock.sound search
Now you can drag anything from anywhere (local/browser/webpage) to it and conduct the search.
Ready to learn Jina? Read our 101 tutorials .
Using with a module bundler
npm install jinabox # or yarn add jinabox
Features
- an easy-to-use web component for Jina search backend;
- allow user to drag-and-drop multi-modal data as queries to search;
- webcam and mic support (in progress, contribution welcome!
:heart: ); - visualize the search results in a dropdown list or a separate container;
- highly customizable.
Supported MIME types
| MIME type | Input (Query) | Output (Result) | Description |
|---|---|---|---|
text |
typing | list only | Text-only data including any human-readable content, source code, or textual data such as comma-separated value (CSV) formatted data. Examples include text/plain , text/csv , and text/html . |
image |
drag-and-drop | <img> containers in list/grid view |
Image or graphical data including both bitmap and vector still images as well as animated versions of still image formats such as animated GIF or APNG. Common examples are image/jpeg , image/png , and image/svg+xml . |
video |
drag-and-drop, webcam | <video> containers in list/grid view |
Video data or files, such as MP4 movies ( video/mp4 ). |
audio |
drag-and-drop, webcam, mic | <audio> containers in list view |
Audio or music data. Examples include audio/mpeg , audio/vorbis . |
Configuration
| Settings | Description |
|---|---|
theme |
Color theme: persian , pompelmo , honeybee , none |
typewriterEffect |
Enable typewriter effect on the placeholder |
typewriterDelayItem |
Time (ms) delays between every placeholder |
typewriterDelayCharacter |
Time (ms) delays between every character |
Browser support
jinabox.js runs on modern browsers supporting Web Audio, including Firefox, Chrome, Safari (desktop and mobile) and Opera.
Troubleshooting
SSL error on my localhost
Try http://localhost:65481/api/search , make sure to use http and localhost , instead of 0.0.0.0 .
License
Copyright (c) 2020 Jina AI Limited. All rights reserved.
Jina is licensed under the Apache License, Version 2.0. See LICENSE for the full license text.
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
