Skip to content

Latest commit

 

History

History
279 lines (242 loc) · 11.5 KB

README.md

File metadata and controls

279 lines (242 loc) · 11.5 KB
Raw

Syncfusion React AI Samples

This repository contains AI-powered samples for the Syncfusion React components. These samples demonstrate how Syncfusion components can be enhanced with AI capabilities to provide intelligent solutions for various scenarios.

This application utilizes the latest packages and requires Node.js version v18.20.x or higher.

Getting Started

To get started, clone the smart-ai-samples repository and navigate to the smart-ai-samples/react directory:

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

Installation

All required packages are pre-configured in the package.json file. Install the dependencies by running:

npm install

License Registration

Before using Syncfusion components, register your license key in the main.tsx file of the React project:

import { registerLicense } from '@syncfusion/ej2-base';

// Registering Syncfusion license key
registerLicense('Replace your generated license key here');

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <RouterProvider router={routerEle} />
  </StrictMode>
);

For more details on license registration, refer to the official documentation.

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 Services

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/ai-models.ts and replace the placeholders with your actual credentials:

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.

Image Editor AI Configuration

The Image Editor AI feature uses Stability AI for AI image processing. To set it up:

  1. Obtain an API key from Stability AI.
  2. In ./src/ai-components/image-editor/stability-ai-model.ts, replace the placeholder with your actual API key:
const apiKey = `Bearer YOUR_API_KEY`;

Development Server

To run the application, use the following npm script:

npm run dev

This command will start the application and open it in your default web browser.

Additional Resources

For more information about Essential JS 2 React components, refer to these resources:

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