Architecture

Architecture Diagram Description

Components

1. Frontend (React Application)

   • Components: Answer, QuestionInput, Chat, ChatHistoryList, etc.
   • API Integration: Interacts with the backend via API calls.

2. Backend (Azure Functions)

   • Functions: add_url_embeddings, batch_push_results, batch_start_processing, get_conversation_response.
   • Helpers: env_helper, config_helper, llm_helper, etc.

3. Data Processing

   • Document Chunking: chunking_strategy, document_chunking_base, layout, page, paragraph, fixed_size_overlap.
   • Embedding Generation: embedder_base, embedder_factory, integrated_vectorization_embedder, push_embedder.
   • Search Handlers: azure_search_handler, integrated_vectorization_search_handler, search_handler_base, search.

4. Orchestration

   • Strategies: orchestration_strategy, orchestrator_base, open_ai_functions, lang_chain_agent, semantic_kernel, prompt_flow.
   • Tools: question_answer_tool, text_processing_tool, post_prompt_tool, chat_plugin, post_answering_plugin.

5. Azure Services

   • Azure Functions: Hosts the backend functions.
   • Azure Search: Provides search capabilities.
   • Azure Blob Storage: Stores documents and other data.
   • Azure OpenAI: Provides natural language processing capabilities.
   • Azure Monitor and Application Insights: Monitors application performance and health.

6. Teams Extension

   • Bot: Handles interactions within Microsoft Teams.
   • Configuration: config.ts, index.ts, model.ts.

Data Flow

1. User Interaction

   • Users interact with the frontend application (React) via a web browser or Microsoft Teams.
   • Users send queries and receive responses through the UI components.

2. API Calls

   • The frontend makes API calls to the backend (Azure Functions) to process user queries and retrieve responses.

3. Data Processing

   • The backend functions handle data ingestion, document chunking, and embedding generation.
   • Processed data is stored in Azure Blob Storage and indexed in Azure Search.

4. Search and Retrieval

   • The backend performs search operations using Azure Search and retrieves relevant documents.
   • Vector-based search improves the accuracy and relevance of search results.

5. Orchestration

   • The backend uses various orchestration strategies to handle user queries and generate responses.
   • Azure OpenAI is used for natural language processing to generate accurate responses.

6. Teams Integration

   • The Teams bot handles interactions within Microsoft Teams.
   • The bot communicates with the backend to process queries and retrieve responses.

Diagram Elements

1. Frontend

   • Box labeled "Frontend (React Application)"
   • Inside the box, list components: Answer, QuestionInput, Chat, ChatHistoryList, etc.
   • Arrow from "Frontend" to "Backend" labeled "API Calls"

2. Backend

   • Box labeled "Backend (Azure Functions)"
   • Inside the box, list functions: add_url_embeddings, batch_push_results, batch_start_processing, get_conversation_response.
   • Arrow from "Backend" to "Data Processing" labeled "Data Processing"
   • Arrow from "Backend" to "Search and Retrieval" labeled "Search Operations"
   • Arrow from "Backend" to "Orchestration" labeled "Orchestration"

3. Data Processing

   • Box labeled "Data Processing"
   • Inside the box, list components: Document Chunking, Embedding Generation, Search Handlers
   • Arrow from "Data Processing" to "Azure Blob Storage" labeled "Store Data"
   • Arrow from "Data Processing" to "Azure Search" labeled "Index Data"

4. Search and Retrieval

   • Box labeled "Search and Retrieval"
   • Inside the box, list components: Azure Search, Vector-Based Search
   • Arrow from "Search and Retrieval" to "Backend" labeled "Retrieve Data"

5. Orchestration

   • Box labeled "Orchestration"
   • Inside the box, list strategies: open_ai_functions, lang_chain_agent, semantic_kernel, prompt_flow
   • Arrow from "Orchestration" to "Azure OpenAI" labeled "NLP"

6. Azure Services

   • Box labeled "Azure Services"
   • Inside the box, list services: Azure Functions, Azure Search, Azure Blob Storage, Azure OpenAI, Azure Monitor, Application Insights

7. Teams Extension

   • Box labeled "Teams Extension"
   • Inside the box, list components: Bot, Configuration
   • Arrow from "Teams Extension" to "Backend" labeled "API Calls"

Example Diagram

+-------------------+       +-------------------+       +-------------------+
|   Frontend        |       |   Backend         |       |   Data Processing |
|   (React App)     |       |   (Azure Functions)|      |                   |
|                   |       |                   |       |                   |
| +---------------+ |       | +---------------+ |       | +---------------+ |
| | Answer        | |       | | add_url_embed | |       | | Doc Chunking  | |
| | QuestionInput | |       | | batch_push    | |       | | Embed Gen     | |
| | Chat          | |       | | batch_start   | |       | | Search Handlers| |
| | ChatHistory   | |       | | get_conv_resp | |       | +---------------+ |
| +---------------+ |       | +---------------+ |       |                   |
+-------------------+       +-------------------+       +-------------------+
        |                           |                           |
        | API Calls                 | Data Processing           | Store Data
        v                           v                           v
+-------------------+       +-------------------+       +-------------------+
|   Search and      |       |   Orchestration   |       |   Azure Blob      |
|   Retrieval       |       |                   |       |   Storage         |
|                   |       | +---------------+ |       +-------------------+
| +---------------+ |       | | open_ai_func  | |
| | Azure Search  | |       | | lang_chain    | |
| | Vector Search | |       | | semantic_ker  | |
| +---------------+ |       | | prompt_flow   | |
+-------------------+       | +---------------+ |
                            +-------------------+
                                    |
                                    | NLP
                                    v
                            +-------------------+
                            |   Azure OpenAI    |
                            +-------------------+

+-------------------+
|   Teams Extension |
|                   |
| +---------------+ |
| | Bot           | |
| | Configuration | |
| +---------------+ |
+-------------------+
        |
        | API Calls
        v
+-------------------+
|   Backend         |
|   (Azure Functions)|
+-------------------+

Conclusion

This architecture diagram provides a high-level overview of the components and data flow within the "Percy AI" solution. It illustrates how the frontend, backend, data processing, search and retrieval, orchestration, Azure services, and Teams extension interact with each other to provide a seamless user experience.