jinabox.js is a lightweight, customizable omnibox. You can use it for searching text, images, videos, audio or any kind of data with a Jina backend.
- Learn Jina: the fastest way to build cloud-native neural search
- Jinabox in Action
- Jinabox in Your Project
- Supported MIME types
jinabox.js in Action
Spin up a Jina Docker Image
jinabox.js is a frontend for Jina. You will need to spin up a Jina backend to get search results. Based on what you want to search, run one of our example Jina backends:
- 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
Open jinabox.js in your Browser
Just go to https://jina.ai/jinabox.js/ in your browser to open up the search interface.
Set Server Endpoint
Based on the Docker port you are exposing (i.e.
45678 in above Docker images), set jinabox's server endpoint to:
Drag and drop images, video, or audio, or type in text to search.
jinabox.js in Your Project
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/>
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
yarn add jinabox
- Easy-to-use web component for Jina search backend
- Users can drag and drop multi-modal data as search queries
- Webcam and microphone support (in progress, contributions welcome!
- Visualize search results in a dropdown list or separate container
- Highly customizable
Supported MIME types
|MIME type||Input (Query)||Output (Result)||Description|
||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
||Image or graphical data including both bitmap and vector still images as well as animated versions of still image formats like animated GIF or APNG. Common examples are
||Video data or files, such as MP4 movies (
||Drag-and-drop, webcam, mic||
||Audio or music data. Examples include
||Enable typewriter effect on the placeholder|
||Time (ms) delay between every placeholder|
||Time (ms) delay between each character|
jinabox.js runs on modern browsers supporting Web Audio, including Firefox, Chrome, Safari (desktop and mobile) and Opera.
SSL Error on Localhost
http://localhost:65481/api/search, make sure to use
localhost, instead of
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.