geist

What is geist?

The geist npm package is a React component library that provides a set of high-quality, customizable UI components. It is designed to help developers build modern, responsive web applications with ease.

What are geist's main functionalities?

Button

The Button component allows you to create various types of buttons with different styles and states. The example shows a success button.

<Button type='success'>Success</Button>

Modal

The Modal component is used to create dialog boxes or pop-ups. The example demonstrates a simple modal with a title and content.

<Modal visible={true}><Modal.Title>Title</Modal.Title><Modal.Content>Content</Modal.Content></Modal>

Input

The Input component provides a way to create text input fields. The example shows a basic input field with a placeholder.

<Input placeholder='Enter text' />

Card

The Card component is used to display content in a card layout. The example shows a simple card with content.

<Card><Card.Content>Card Content</Card.Content></Card>

Other packages similar to geist

material-ui

Material-UI is a popular React component library that implements Google's Material Design. It offers a wide range of components and customization options, making it a robust choice for building modern web applications. Compared to geist, Material-UI has a larger community and more extensive documentation.

chakra-ui

Chakra UI is a simple, modular, and accessible component library that gives you the building blocks to build React applications. It focuses on ease of use and accessibility, similar to geist, but offers a different set of design principles and components.

ant-design

Ant Design is a comprehensive UI framework for enterprise applications. It provides a wide range of high-quality components and design guidelines. Compared to geist, Ant Design is more feature-rich and is often used in larger, more complex applications.

README

Geist

Build virtual assistants for the web

Designed for use with Browserify

Installation

npm install geist --save

Usage

var geist = require('geist');

// Describe your assistant
var hal = new geist.Mind('HAL 9000', {
  // Language is taken from the document if not specified here
  language: 'en-US',
  // Keep listening all the time if you like
  continuous: true,
  // Define generic concepts for recognition and/or answer text generation
  // You can either use template strings or functions to determine a match
  concepts: {
    TOD: ["morning | afternoon | evening | night", function() {
      // Current time of day
      var hours = new Date().getHours();
      if(hours < 12)       return 'morning';
      else if(hours <= 16) return 'afternoon';
      else if(hours <= 22) return 'evening';
      else                 return 'night';
    }],
    JOKE: [undefined, function() {
      // Random joke
      return _.pick(jokes);
    }]
  },
  // Define your action handlers
  actions: {
    MESSAGE: function(person, text) {
      // Send message...
    }
  },
  // Build the actual conversation
  conversation: {
    // Use alternatives to make recognition flexible and output diverse
    "Thank('s | you)" : "You're welcome! | No problem!",
    // Reference general concepts in your conversation and influence TTS using emotions
    "Open #ARTICLE * [pod bay] door[s]" : "I'm sorry, #HUMAN. %SAD(I'm afraid I can't do that)",
    // Create your own concepts and reference them
    "(Tell [me] | [Do] you know) a joke" : "How about this one: #JOKE",
    // Allow greetings before other text and greet back before continuing
    "(Hi | Hello | Good #TOD) [#NAME] [...]" : "(Hello | Good #TOD), #HUMAN! ...",
    // Use $variables to extract information
    "[(Send | write | new) [a]] message to {$person: *}" : { "What message would you like to send to $person?" : {
      // Drill down into conversations to retrieve additional information
      "{$message: *}" : { "Shall is send \"$message \" to $person?" : {
        // Call action handler
        "#YES" : "!MESSAGE($person, $message) It's out!",
        // Ask for the message again
        "#NO" : "Sorry, <-",
        // Back to top level
        "#CANCEL" : "Ok, not sending it. <--"
      }}
    }},

    // Make sure at least one phrase catches everything
    "*" : "Excuse me!? | Can you please repeat that, #HUMAN?"
  }
});

// Start listening to the users voice
// The user will be asked for access to her microphone
hal.listen(function(interimText) {
  // Visualize speech recognition process..
}, function(text) {
  // Show final recognized text...
}, function(answer) {
  // (Answer is being spoken using TTS)
  // Display answer as well if you like...
});

// Stop speaking and listening immediately
hal.stop();

License

MIT