jinabox.js is a lightweight, customizable set of components for querying and displaying results from Jina flows. 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
• Features
• Jinabox in Action
• Adding Jinabox to Your Project
• Supported MIME types
• Configuration

Features

• <jina-searchbar></jina-searchbar>
  • perform queries and view results in a single component
• <jina-results></jina-results>
  • place results from searchbar in a separate area
• <jina-floater></jina-floater>
  • standalone floating icon to enable searches from anywhere in the application
• <jina-floater-chat></jina-floater-chat>
  • jina floater in the style of a chat application
• Easy-to-use web components 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

jinabox.js in Action

Spin up a Jina Docker Image

jinabox.js is a frontend for querying Jina flows. 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

Important: If you are using a remote endpoint (non-localhost), make sure it is using HTTPS, not HTTP. Otherwise, JinaBox will not be able to make requests to your flow.

Start Searching!

Drag and drop images, video, or audio, or type in text to search.

Adding jinabox.js to Your Project

In your HTML source, include the minified script and initialize it with your endpoint:

<script src="https://unpkg.com/jinabox"></script>
<script>
    jb = window.JinaBox
    jb.init('http://localhost:65481/api/search');  // http://localhost:65481/api/search is the endpoint of the REST gateway of a Jina flow with REST enabled.
</script>

Then add the jinabox web components into your application:

<jina-searchbar></jina-searchbar>

<!--or-->

<jina-floater></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.

Installation via package manager

npm install jinabox

or

yarn add jinabox

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

Play with and preview jinabox configurations here: https://jina.ai/jinabox.js/

| Setting | Default | Type | Description | |----------------------------|---------------------|---------|-------------------------------------------------------------------------------------------------------------------------------------------------------------| | theme | default | string | Color theme: default, persian, pompelmo, honeybee | | searchIcon | color | string | Searchbar icon: color, mono, inverse, or a URL | | showDropzone | true | boolean | Show expanding drop zone when dragging files | | resultsLocation | dropdown | string | Where to display results: dropdown or external. When selecting external, results will be rendered in the element corresponding to the results-area-id | | resultsAreaId | jina-results-area | string | ID of where results will be rendered if resultsLocation is set to external | | typewriterEffect | false | boolean | Enable typewriter effect on the placeholder | | typewriterDelayItem | 1000 | number | Time (ms) delay between every placeholder switch when typewriterEffect is enabled | | typewriterDelayCharacter | 50 | number | Time (ms) delay between each character when typwriterEffect is enabled | | userMediaHeight | 500 | number | Webcam feed and capture height | | userMediaWidth | 300 | number | Webcam feed and capture width | | acceptAudio | true | boolean | Allow search with audio queries | | acceptVideo | true | boolean | Allow search with video queries | | acceptText | true | boolean | Allow search with text queries | | acceptImage | true | boolean | Allow search with image queries |

Expected Response Structure

jinabox.js expects query responses to contain either of the following structures

{
  "search": {
    "docs": [
      {
        "topkResults": [
          {
            "matchDoc": {
              "docId": 14704,
              "weight": 1,
              "uri": "data:image/png;charset=utf,...",
              "mimeType":"image/png"
            }
          }
        ],
        "uri":"data:image/jpeg;...",
        "mimeType":"image/jpeg"
      }
    ]
  }
}

or

{
  "search": {
    "docs": [
      {
        "matches": [
          {
            "docId": 14704,
            "weight": 1,
            "uri": "data:image/png;charset=utf,...",
            "mimeType":"image/png"
          }
        ],
        "uri":"data:image/jpeg;...",
        "mimeType":"image/jpeg"
      }
    ]
  }
}

Browser Support

jinabox.js runs on modern browsers including Chrome, Firefox, Safari (desktop and mobile) and Opera. Certain features (like recording audio/video) are not available on all browsers and jinabox will make these features available accordingly.

Troubleshooting

SSL Error on Localhost

Try http://localhost:65481/api/search, make sure to use http and localhost, instead of 0.0.0.0.

Requests hanging or failing

Query your api with curl to ensure it is properly receiving, processing, and responding to requests. Ensure responses meet jinabox expected response structure.

Contributing

We welcome all kinds of contributions from the open-source community, individuals and partners. We owe our success to your active involvement.

• Contributing guidelines
• Release cycles and development stages

Community

• Code of conduct - play nicely with the Jina community
• Slack workspace - join #general on our Slack to meet the team and ask questions
• YouTube channel - subscribe to the latest video tutorials, release demos, webinars and presentations.
• LinkedIn - get to know Jina AI as a company and find job opportunities
• - follow and interact with us using hashtag #JinaSearch
• Company - know more about our company and how we are fully committed to open-source.

Open Governance

As part of our open governance model, we host Jina's Engineering All Hands in public. This Zoom meeting recurs monthly on the second Tuesday of each month, at 14:00-15:30 (CET). Everyone can join in via the following calendar invite.

• Add to Google Calendar
• Download .ics

The meeting will also be live-streamed and later published to our YouTube channel.

Join Us

Jina is an open-source project. We are hiring full-stack developers, evangelists, and PMs to build the next neural search ecosystem in open source.

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.