zir_semantic_search 0.0.3

Zir AI semantic search.

Flutter Semantic Search Plugin

If you develop natively compiled apps for mobile and web with Flutter, then this guide will demonstrate how to integrate ZIR Semantic Search into your application.

For full 📄 documentation, visit the online documentation.

The perfect starting point to integrate Zir-Ai Semantic search within your Flutter project

The search widget connects to a corpus or corpora through API keys. It presents the user with a polished, customizable text box for entering queries and handles the search results and errors using callback methods.

Usage

If you haven't yet installed ZIR AI in your project, check the installation tab. Now that we're ready to start implementing our ZIR AI solution, let's begin by creating our application

void main() => runApp(InitialApp());

class InitialApp extends StatefulWidget {
  @override
  _InitialApp createState() => _InitialApp();
}

Now we can start embedding and designing our ZIR AI Search Box widget

              ...
              ...
class _InitialApp extends State<InitialApp> {
  var results = new Map();
  GlobalKey<SearchBox> _myKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "My App",
      home: Scaffold(
        body: Center(
          child: Column(
            children: [
              Padding(
                padding: EdgeInsets.only(top: 30),
                child: ZirSearchBox(
                  key: _myKey,
                  apiKey: 'zqt_cKg6-jmMWbiFViZw_6fEPl2JITLhXVk0jg3TQg',
                  corpusId: [234],
                  customerId: 1890073338,
                  image: "assets/images/logo.png",
                  results: 20,
                  offset: 0,
                  callback: (value) {
                    // print received respose
                    print(res);
                    setState(() {
                      results = value;
                    });
                  },
                ),
              )
              ...
              ...

We've successfully embedded the ZIR AI Search Box widget into our application. Let's take a closer look at the parameters we're passing through to the ZIR AI Search Box.

1. key: initialize a GlobalKey instance and pass the value to ZirSearchBox
2. apiKey: the API key linked to one or more corpora that you wish to query.
3. customerID: your account ID.
4. corpusID: an array of IDs of the corpora you wish to query. Generally, This can range from a single corpus to an account-specific limit, which is generally 5.
5. image: the path of the logo you wish to display in the Search Box widget. By default this will show the ZIR AI logo
6. results: the desired number of search results. 10 results are returned by default. To alter this, you can pass in any positive integer value up to the maximum number allowed by your account.
7. offset: this allows you to omit a specified number of records before the beginning of the result set. For example, if a value of 3 is passed, the first three results of the result set will not be included.
8. callback: a callback function to handle the response. Here you can render the search results in your application as you see fit

If we want to run queries from outside the search box, we have access to the runSearch method to do so. This is where the GlobalKey we initialized earlier comes in handy.

_myKey.currentState!.runSearch("our query")

Let's take a look at how we would implement this in our example. We'll add a few queries into ActionChips and attach onPressed event handlers, so that the clicked query is run against our corpora.

            ...
            ...
Container(
                width: 400,
                child: Row(
                  children: [
                    ActionChip(
                        label: Text("Thinking of watching a movie?"),
                        onPressed: () async {
                          final res = await _myKey.currentState!.runSearch("What movies are playing today?");
                          // print received respose
                          print(res);
                          setState(() {
                            results = res;
                          });
                        }),
                    ActionChip(
                        label: Text("How about some coffee?"),
                        onPressed: () async {
                          final res = await _myKey.currentState!.runSearch("What is the highest rated coffee shop near me?");
                          // print received respose
                          print(res);
                          setState(() {
                            results = res;
                          });
                        }),
                  ],
                ),
              ),
            ...
            ...

Pagination

We have already setup the required imports to setup pagination in our project. We again make use of our GlobalKey by passing it into the ZirPagination component as shown below

...
ZirPagination(searchKey: _myKey1)
...

The Complete Example

The complete implementation can be seen below

import "dart:convert";
import "package:flutter/material.dart";
import "package:zir_semantic_search/zir_semantic_search.dart";
import "./search_box.dart";

void main() => runApp(InitialApp());

class InitialApp extends StatefulWidget {
  @override
  _InitialApp createState() => _InitialApp();
}

class _InitialApp extends State<InitialApp> {
  var results = new Map();
  GlobalKey<SearchBox> _myKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "My App",
      home: Scaffold(
        body: Center(
          child: Column(
            children: [
              Padding(
                padding: EdgeInsets.only(top: 30),
                child: ZirSearchBox(
                  key: _myKey,
                  apiKey: 'zqt_cKg6-jmMWbiFViZw_6fEPl2JITLhXVk0jg3TQg',
                  corpusId: [234],
                  customerId: 1890073338,
                  image: "assets/images/logo.png",
                  results: 20,
                  offset: 0,
                  callback: (value) {
                    // printing received respose
                    print(res);
                    setState(() {
                      results = value;
                    });
                  },
                ),
              ),
              Container(
                width: 400,
                child: Row(
                  children: [
                    ActionChip(
                       label: Text("Thinking of watching a movie?"),
                        onPressed: () async {
                          final res = await _myKey.currentState!.runSearch("What movies are playing today?");
                          // print received respose
                          print(res);
                          setState(() {
                            results = res;
                          });
                        }),
                    ActionChip(
                        label: Text("How about some coffee?"),
                        onPressed: () async {
                          final res = await _myKey.currentState!.runSearch("What is the highest rated coffee shop near me?");
                          // print received respose
                          print(res);
                          setState(() {
                            results = res;
                          });
                        }),
                  ],
                ),
              ),
              SearchApp() // another widget using ZirSearchBox
            ],
          ),
        ),
      ),
    );
  }
}