A lightweight, customizable omnibox in JavaScript
source link: https://github.com/jina-ai/jinabox.js/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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) Descriptiontext
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 Descriptiontheme
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.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK