Jinabox-test NPM

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.

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. 65481 or 45678 in above Docker images), set jinabox's server endpoint to:

http://localhost:<port_number>/api/search

Start Searching!

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

Features

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
`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 like 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) delay between every placeholder
`typewriterDelayCharacter`	Time (ms) delay between each character