Skip to content

Latest commit

 

History

History
293 lines (248 loc) · 11.8 KB

README.md

File metadata and controls

293 lines (248 loc) · 11.8 KB
Raw

JavaScript AI QuickStart

This project is a skeleton application used to create Essential JS 2 web application with AI features.

This application uses the latest version of the webpack-cli. It requires node v18.17.0.

Getting Started

To get started you need to clone the smart-ai-samples repository and navigate to smart-ai-samples/typescript location.

git clone https://github.com/syncfusion/smart-ai-samples.git

cd smart-ai-samples/typescript

Installing

We can get all the Essential JS 2 components in a single npm package ej2.

We already configure the required packages in the package.json file.

You can run the below command to install all dependent packages related to this seed project.

npm install

Sample Configuration

License Registration

Before using Syncfusion components, you need to register your license. Follow these steps:

  1. Create a text file named syncfusion-license.txt in the root folder of your project.

  2. Add your Syncfusion license key to this file.

  3. Run the following command to register your Syncfusion license:

npx syncfusion-license activate

Refer to the documentation for further information on license registration.

Local Embeddings

The following samples use a local embedding pre-trained model from Hugging Face and do not require Azure OpenAI. The transformers.js library from Hugging Face is utilized to run the model in a client-side application without the need for a server. To learn more about transformers, refer here.

  • DataGrid (Semantic Filtering)
  • ComboBox (Embeddings)

Configuring AI Service Credentials

This project utilizes AI services to enhance component functionality. The Azure OpenAI service has been configured for this demo, but the Gemini model with the Vercel SDK can also be used.

To set up the AI services, navigate to ./src/app/ai-models.ts and replace the placeholders with your actual credentials:

// for Azure Open AI service
const azure = createAzure({
    resourceName: 'YOUR_RESOURCE_NAME',
    apiKey: 'YOUR_API_KEY',
});
const aiModel = azure('YOUR_MODEL_NAME');
// for gemini model
const google = createGoogleGenerativeAI({
    baseURL: "https://generativelanguage.googleapis.com/v1beta",
    apiKey: "API_KEY"
});
const aiModel = google('YOUR_MODEL_NAME');

Your Azure endpoint should resemble: https://{resource_name}.openai.azure.com/

For more information on Azure OpenAI configuration, consult the Vercel AI SDK documentation.

OpenAI

If you are using OpenAI, create an API key and place it at apiKey, leave the endpoint as "". The value for deploymentName is the model you wish to use (e.g., gpt-3.5-turbo, gpt-4, etc.).

Configuring Image Editor AI

The Image Editor AI depends on a third-party AI service called Stability AI for AI Image processing. To use it, follow these steps:

  • You may obtain your API key from Stability AI.
  • Navigate to ./src/app/stability-ai-model.ts and replace the placeholder with actual API_KEY:
const apiKey= `Bearer YOUR_API_KEY`;

// Stability AI APIKEY
public string ApiKey = "your-api-key";

Development server

To run the application, you can use the following npm script:

npm run start

This will start the application and serve it in your default browser.

Resources

You can also refer the below resources to know more details about Essential JS 2 components.

Project Documentation

This table provides an overview of all the AI Samples in this project, along with links to their respective README files for detailed documentation.

Section Component / Feature Description Documentation Link
Smart Paste Button Smart Paste Functionality Automatically fills out forms using clipboard data, improving data entry efficiency. Read More
Smart TextArea Sentence-Level Autocompletion Provides real-time sentence suggestions based on user input, enhancing typing efficiency with AI. Read More
ComboBox Semantic Search Advanced search capabilities using context and meaning rather than exact keywords. Read More
Data Grid Semantic Filtering Filters data semantically. Read More
Predictive Data Entry Detects anomalies in datasets. Read More
Anomaly Detection Detects anomalies in datasets. Read More
Scheduler Smart Paste Integration Converts natural language text into scheduler events, adding them as structured appointments. Read More
Gantt Task Prioritize AI-based task prioritization tool. Read More
Progress Predictor Predicts project progress and completion. Read More
Resource Allocator Optimizes resource allocation. Read More
Risk Assessor Assesses project risks using AI. Read More
Predictive Scheduling AI-driven project scheduling. Read More
RichTextEditor AI Integration Enhances text editing with features like content generation, summarization, rephrasing, translation, and grammar correction. Read More
Kanban Board AI Task Recommendation Recommends tasks based on AI analysis. Read More
Sentiment Analysis Analyzes customer feedback sentiments. Read More
Image Editor AI Image Editing Advanced image editing features including Magic Eraser, Background Changer, and Background Remover for enhanced creativity and precision. Read More
Diagram TextToMindMap Creates dynamic mindmaps using AI-generated content. Read More
TextToFlowChart Creates flowcharts based on AI-generated workflows. Read More
PDF Viewer Document Summarization Summarizes documents using AI. Read More
Smart Redaction Redacts sensitive information intelligently. Read More
Smart Fill Automatically fills forms with AI. Read More
Document Editor Document Summarization AI-driven summarization and Q&A for document content. Read More
Smart Editor Enhances document editing with rewriting, grammar checking, and translation. Read More
Writing Assist Generates new content based on user input and assists in expanding ideas. Read More
Maps Weather Forecast Displays weather forecasts on a map. Read More
File Manager Smart File Manager AI-driven features like Smart Search, Content Summary, and Intelligent Organization. Read More
Pivot Table AI Data Analysis AI integration for smart data aggregation, predictive modeling, adaptive filtering, and real-time interaction, enhancing data analysis and visualization. Read More
Query Builder Natural Language Querying Allows users to build queries in plain language, with the system interpreting the intent and generating the appropriate query. Read More
TreeGrid Hierarchical Data Structuring Uses AI to correct and organize hierarchical data in a Tree Grid, fixing parent-child relationships to ensure accurate data nesting. Read More