799 lines
44 KiB
HTML
799 lines
44 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="icon" href="/poweron-favicon.png" type="image/png">
|
|
<title>PowerOn Platform - Big Picture | PowerON</title>
|
|
<meta name="description" content="PowerON Platform Architecture - Big Picture for External Developers">
|
|
<meta name="author" content="PowerON">
|
|
|
|
<!-- Fonts -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">
|
|
|
|
<!-- Styles -->
|
|
<link rel="stylesheet" href="doc_platform_big_picture.css">
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<div class="navbar">
|
|
<a href="/" class="logo">
|
|
<img src="logo2.png" alt="PowerON" class="logo-img" onerror="this.style.display='none'; this.nextElementSibling.style.display='inline';">
|
|
</a>
|
|
<nav>
|
|
<span class="nav-title">Platform Architecture</span>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="hero">
|
|
<h1>PowerOn Platform - Big Picture</h1>
|
|
<p class="subtitle">Enterprise AI Workflow Platform with Integrated Data Privacy Neutralizer</p>
|
|
<p class="intro">This document provides an overview of the PowerOn platform architecture, building blocks, and capabilities for external software developers who want to contribute to or integrate with the platform.</p>
|
|
</div>
|
|
|
|
<!-- Tabs Navigation -->
|
|
<div class="tabs">
|
|
<button class="tab-button active" onclick="openTab(event, 'overview')">Overview</button>
|
|
<button class="tab-button" onclick="openTab(event, 'customer-story')">Customer Story</button>
|
|
<button class="tab-button" onclick="openTab(event, 'workflows')">Workflows</button>
|
|
<button class="tab-button" onclick="openTab(event, 'services')">Microservices</button>
|
|
<button class="tab-button" onclick="openTab(event, 'rbac')">RBAC System</button>
|
|
<button class="tab-button" onclick="openTab(event, 'ui')">UI Architecture</button>
|
|
<button class="tab-button" onclick="openTab(event, 'big-picture')">Big Picture</button>
|
|
<button class="tab-button" onclick="openTab(event, 'integration')">Integration</button>
|
|
</div>
|
|
|
|
<!-- Tab Content -->
|
|
<div id="overview" class="tab-content active">
|
|
<h2>Platform Overview</h2>
|
|
|
|
<div class="section">
|
|
<h3>Core Concept</h3>
|
|
<p>PowerOn is a <strong>Multi-Agent AI Platform for Enterprise Workflows</strong> with an integrated data privacy neutralizer. The platform enables companies to accelerate their AI transformation without data privacy risks.</p>
|
|
|
|
<div class="highlight-box">
|
|
<h4>Key Value Propositions</h4>
|
|
<ul>
|
|
<li><strong>Data Privacy First:</strong> Integrated privacy neutralizer enables safe use of ChatGPT/Copilot without privacy risks</li>
|
|
<li><strong>Unlimited Processing:</strong> No token limits - process documents of any size through intelligent chunking</li>
|
|
<li><strong>Universal Integration:</strong> Seamless integration of all enterprise data sources</li>
|
|
<li><strong>Workflow Automation:</strong> Configure workflows per customer journey with standard automation elements and AI components</li>
|
|
<li><strong>Future-Proof Architecture:</strong> Automatically improves with better AI models and larger token limits</li>
|
|
<li><strong>Plug & Play Architecture:</strong> Renderers and dynamic AI selection per intention (analyze, generate, web, plan, etc.)</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>Architecture Layers</h3>
|
|
<div class="architecture-diagram">
|
|
<div class="layer">
|
|
<h4>UI Layer (Playground)</h4>
|
|
<p>React-based playground UI as entry point. Additional UIs (chatbots, customer UIs) can be easily integrated via REST API in React, JavaScript, or other languages.</p>
|
|
</div>
|
|
<div class="layer">
|
|
<h4>API Layer</h4>
|
|
<p>RESTful API providing full access to platform capabilities. Open API design allows external UIs and integrations.</p>
|
|
</div>
|
|
<div class="layer">
|
|
<h4>Workflow Engine</h4>
|
|
<p>Core orchestration engine managing tasks, actions, and state. Supports multiple execution modes (Learning, Actionplan, Automation).</p>
|
|
</div>
|
|
<div class="layer">
|
|
<h4>Microservices Layer</h4>
|
|
<p>Modular service architecture with specialized services for AI, data processing, security, and integrations.</p>
|
|
</div>
|
|
<div class="layer">
|
|
<h4>Data Layer</h4>
|
|
<p>Multi-tenant database with RBAC-based access control. Mandate isolation ensures secure data separation.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>Customer Journey → Workflow</h3>
|
|
<p>For each customer journey, a workflow can be configured in the workflow editor where:</p>
|
|
<ul>
|
|
<li>Customers integrate their data sources</li>
|
|
<li>Standard automation elements are available</li>
|
|
<li>AI components can be used</li>
|
|
<li>Workflows can be executed manually or automated (hourly/daily/weekly)</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>Plug & Play Architecture</h3>
|
|
<div class="feature-grid">
|
|
<div class="feature-card">
|
|
<h4>Dynamic Renderers</h4>
|
|
<p>Plug & play architecture for document renderers. Support for multiple formats (PDF, DOCX, XLSX, PPTX, HTML, Markdown, JSON, CSV, etc.) with easy extension capabilities.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<h4>Dynamic AI Selection</h4>
|
|
<p>Intelligent AI model selection per intention type. The system automatically selects the best AI model based on the task: analysis, generation, web research, planning, etc.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>System Architecture Diagram</h3>
|
|
<div class="diagram-image-container">
|
|
<img src="doc_platform_01_platform_overview.jpg" alt="PowerON Platform Architecture Diagram" class="diagram-image">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="customer-story" class="tab-content">
|
|
<h2>Customer Story</h2>
|
|
|
|
<div class="section">
|
|
<h3>The Journey from Application-Centric to Data-Centric Work</h3>
|
|
<p class="lead">PowerOn enables customers to transition from <strong>application-centric</strong> to <strong>data-centric</strong> work. This is a <strong>key differentiator</strong> that transforms how businesses operate.</p>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>Step 1: Customer Journey Identification</h3>
|
|
<div class="step-card">
|
|
<div class="step-number">1</div>
|
|
<div class="step-content">
|
|
<h4>Identify Business Processes</h4>
|
|
<p>Work with customers to identify their key customer journeys and business processes that can benefit from automation and AI.</p>
|
|
<ul>
|
|
<li>Document analysis workflows</li>
|
|
<li>Email processing and routing</li>
|
|
<li>Data extraction and transformation</li>
|
|
<li>Report generation</li>
|
|
<li>Customer communication workflows</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>Step 2: MVP Integration with Focus on Data Privacy & Compliance</h3>
|
|
<div class="step-card">
|
|
<div class="step-number">2</div>
|
|
<div class="step-content">
|
|
<h4>Simple MVP Integration</h4>
|
|
<p>Start with a simple MVP that integrates customer data sources with <strong>strong focus on data privacy and compliance</strong>:</p>
|
|
<ul>
|
|
<li><strong>Data Privacy Neutralizer:</strong> Automatic anonymization of sensitive data before AI processing</li>
|
|
<li><strong>Compliance First:</strong> DSGVO/GDPR compliant processing from day one</li>
|
|
<li><strong>Secure Connections:</strong> Encrypted connections to customer data sources (SharePoint, Google Drive, Outlook, etc.)</li>
|
|
<li><strong>Mandate Isolation:</strong> Complete data separation between tenants</li>
|
|
<li><strong>Audit Logging:</strong> Full traceability of all data access and processing</li>
|
|
</ul>
|
|
<p class="highlight-text">This step builds trust and demonstrates the platform's commitment to data security.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>Step 3: Pre-Processing Engine Deployment</h3>
|
|
<div class="step-card">
|
|
<div class="step-number">3</div>
|
|
<div class="step-content">
|
|
<h4>Standard API Pre-Processing</h4>
|
|
<p>Deploy a pre-processing engine at the customer's location using a <strong>standard API</strong>:</p>
|
|
<ul>
|
|
<li><strong>On-Premise/Edge Processing:</strong> Data processing happens at the customer's location</li>
|
|
<li><strong>Standard API:</strong> Consistent interface for all customers</li>
|
|
<li><strong>Data Minimization:</strong> Only necessary data is sent to the platform</li>
|
|
<li><strong>Local Neutralization:</strong> Privacy neutralization can happen before data leaves customer premises</li>
|
|
<li><strong>Reduced Latency:</strong> Faster processing for large documents</li>
|
|
</ul>
|
|
<p class="highlight-text">This step further enhances data privacy and gives customers full control over their data processing.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>Step 4: Gradual Component Integration - The Transformation</h3>
|
|
<div class="step-card">
|
|
<div class="step-number">4</div>
|
|
<div class="step-content">
|
|
<h4>From Application-Centric to Data-Centric</h4>
|
|
<p>Gradually integrate additional components until the customer works <strong>data-centrically</strong> instead of <strong>application-centrically</strong>:</p>
|
|
|
|
<div class="transformation-comparison">
|
|
<div class="comparison-box old">
|
|
<h5>❌ Application-Centric (Old Way)</h5>
|
|
<ul>
|
|
<li>Work within individual applications (Word, Excel, SharePoint, Outlook)</li>
|
|
<li>Manual data transfer between applications</li>
|
|
<li>Data silos in different systems</li>
|
|
<li>Workflows are application-bound</li>
|
|
<li>Difficult to automate across applications</li>
|
|
</ul>
|
|
</div>
|
|
<div class="comparison-box new">
|
|
<h5>✅ Data-Centric (PowerOn Way)</h5>
|
|
<ul>
|
|
<li>Work with data directly, regardless of source application</li>
|
|
<li>Automatic data integration across all sources</li>
|
|
<li>Unified data view across all systems</li>
|
|
<li>Workflows span multiple applications seamlessly</li>
|
|
<li>Easy automation across entire data ecosystem</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="highlight-text"><strong>This transformation is a KEY DIFFERENTIATOR!</strong> Customers no longer think in terms of applications, but in terms of their data and business processes.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>Customer Journey Diagram</h3>
|
|
<div class="diagram-image-container">
|
|
<img src="doc_platform_02_customer_story.jpg" alt="Customer Story - Journey from Application-Centric to Data-Centric" class="diagram-image">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="workflows" class="tab-content">
|
|
<h2>Workflow System</h2>
|
|
|
|
<div class="section">
|
|
<h3>Core Concept: Tasks with Actions</h3>
|
|
<p class="lead">The core building block is <strong>workflow elements: tasks with actions</strong>. Each workflow consists of tasks, and each task contains one or more actions that execute specific operations.</p>
|
|
|
|
<div class="workflow-structure">
|
|
<div class="workflow-item">
|
|
<h4>Workflow</h4>
|
|
<p><strong>Definition:</strong> Top-level container representing a complete customer journey or business process.</p>
|
|
<p><strong>Purpose:</strong> Orchestrates multiple tasks to achieve a business goal.</p>
|
|
</div>
|
|
<div class="workflow-item">
|
|
<h4>Task</h4>
|
|
<p><strong>Definition:</strong> A logical step in the workflow.</p>
|
|
<p><strong>Purpose:</strong> Groups related actions that work together to complete a sub-goal.</p>
|
|
</div>
|
|
<div class="workflow-item">
|
|
<h4>Action</h4>
|
|
<p><strong>Definition:</strong> Executable unit that performs a specific operation.</p>
|
|
<p><strong>Purpose:</strong> Actions belong to methods (microservices) and are the atomic units of work.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>Execution Modes</h3>
|
|
<p class="lead">PowerOn supports three execution modes, each optimized for different use cases:</p>
|
|
<div class="mode-grid">
|
|
<div class="mode-card">
|
|
<h4>Learning Mode</h4>
|
|
<p><strong>Best for:</strong> Exploratory tasks with up to 5 steps</p>
|
|
<p><strong>Approach:</strong> Iterative Plan-Act-Observe-Refine loop</p>
|
|
<p><strong>Use Case:</strong> When the solution path is not fully known in advance</p>
|
|
</div>
|
|
<div class="mode-card">
|
|
<h4>Actionplan Mode</h4>
|
|
<p><strong>Best for:</strong> Structured, sequential processes</p>
|
|
<p><strong>Approach:</strong> Batch planning with sequential execution</p>
|
|
<p><strong>Use Case:</strong> When the workflow steps are well-defined</p>
|
|
</div>
|
|
<div class="mode-card">
|
|
<h4>Automation Mode</h4>
|
|
<p><strong>Best for:</strong> Repetitive, predefined workflows</p>
|
|
<p><strong>Approach:</strong> Automated execution (scheduled or event-triggered)</p>
|
|
<p><strong>Use Case:</strong> Production workflows that run automatically</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>Available Workflow Methods</h3>
|
|
<p class="lead">Workflow methods provide actions that can be executed within workflows. Each method exposes multiple actions accessible via <code>self.services.<method>.<action></code>:</p>
|
|
<ul>
|
|
<li><strong>ai.*</strong> - AI operations (process, analyze, generate)</li>
|
|
<li><strong>sharepoint.*</strong> - SharePoint integration (search, read, upload)</li>
|
|
<li><strong>outlook.*</strong> - Outlook integration (read emails, send emails)</li>
|
|
<li><strong>context.*</strong> - Context management (get context, set context)</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>Workflow System Diagram</h3>
|
|
<div class="diagram-image-container">
|
|
<img src="doc_platform_03_workflow_system.jpg" alt="Workflow System - Structure, Execution Modes, and Available Methods" class="diagram-image">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="services" class="tab-content">
|
|
<h2>Microservices Architecture</h2>
|
|
|
|
<div class="section">
|
|
<h3>Service Access Pattern</h3>
|
|
<p class="lead">All microservices are accessible via <code>self.services.<serviceName></code>. Services follow a consistent access pattern and are organized into logical categories.</p>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>Services Structure Tree</h3>
|
|
<p>Complete overview of all available microservices:</p>
|
|
|
|
<div class="services-tree">
|
|
<div class="service-category">
|
|
<h4>Core Services</h4>
|
|
<ul>
|
|
<li><code>self.services.chat</code> - Chat and conversation management
|
|
<ul>
|
|
<li>Progress logging</li>
|
|
<li>Document management</li>
|
|
<li>Connection handling</li>
|
|
</ul>
|
|
</li>
|
|
<li><code>self.services.workflow</code> - Workflow state and management</li>
|
|
<li><code>self.services.utils</code> - Utility functions (timestamps, formatting, etc.)</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="service-category">
|
|
<h4>AI & Processing Services</h4>
|
|
<ul>
|
|
<li><code>self.services.ai</code> - AI model management and operations
|
|
<ul>
|
|
<li>Model selection</li>
|
|
<li>Prompt processing</li>
|
|
<li>Response handling</li>
|
|
</ul>
|
|
</li>
|
|
<li><code>self.services.generation</code> - Document generation
|
|
<ul>
|
|
<li>Multiple formats (PDF, DOCX, XLSX, PPTX, HTML, Markdown, etc.)</li>
|
|
<li>Template-based rendering</li>
|
|
<li>JSON schema support</li>
|
|
</ul>
|
|
</li>
|
|
<li><code>self.services.extraction</code> - Document extraction and processing
|
|
<ul>
|
|
<li>Multiple extractors (PDF, DOCX, XLSX, PPTX, CSV, HTML, XML, JSON, Images, etc.)</li>
|
|
<li>Intelligent chunking</li>
|
|
<li>Merging strategies</li>
|
|
</ul>
|
|
</li>
|
|
<li><code>self.services.neutralization</code> - Data privacy neutralization
|
|
<ul>
|
|
<li>PII detection and anonymization</li>
|
|
<li>Pattern-based neutralization</li>
|
|
<li>Binary and text processing</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="service-category">
|
|
<h4>Integration Services</h4>
|
|
<ul>
|
|
<li><code>self.services.sharepoint</code> - SharePoint integration
|
|
<ul>
|
|
<li>Site discovery</li>
|
|
<li>File operations (read, upload, search)</li>
|
|
<li>Path resolution</li>
|
|
</ul>
|
|
</li>
|
|
<li><code>self.services.web</code> - Web operations
|
|
<ul>
|
|
<li>HTTP requests</li>
|
|
<li>Web scraping</li>
|
|
<li>API integration</li>
|
|
</ul>
|
|
</li>
|
|
<li><code>self.services.ticket</code> - Ticket system integration
|
|
<ul>
|
|
<li>Jira integration</li>
|
|
<li>ClickUp integration</li>
|
|
<li>Generic ticket operations</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="service-category">
|
|
<h4>Security & Infrastructure</h4>
|
|
<ul>
|
|
<li><code>self.services.security</code> - Security operations
|
|
<ul>
|
|
<li>Authentication</li>
|
|
<li>Authorization</li>
|
|
<li>Token management</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>Code Examples</h3>
|
|
<p>Examples of how to use services in workflow actions or methods:</p>
|
|
<pre><code># In workflow actions or methods
|
|
result = await self.services.<service>.<method>(parameters)
|
|
|
|
# Example: Using AI service
|
|
response = await self.services.ai.process(prompt="Analyze this document", documents=[...])
|
|
|
|
# Example: Using SharePoint service
|
|
files = await self.services.sharepoint.searchFiles(pathQuery="sites/my-site/documents")
|
|
|
|
# Example: Using generation service
|
|
document = self.services.generation.createDocument(format="pdf", content={...})</code></pre>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>Microservices Architecture Diagram</h3>
|
|
<div class="diagram-image-container">
|
|
<img src="doc_platform_04_microservice_architecture.jpg" alt="Microservices Architecture - Core Services, AI & Processing, Integration Services, and Security" class="diagram-image">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="rbac" class="tab-content">
|
|
<h2>RBAC System</h2>
|
|
|
|
<div class="section">
|
|
<h3>Overview</h3>
|
|
<p class="lead">The Role-Based Access Control (RBAC) system provides <strong>complete UI configuration per tenant and user</strong>. It enables fine-grained control over data access, UI visibility, and resource availability.</p>
|
|
|
|
<div class="feature-grid">
|
|
<div class="feature-card">
|
|
<h4>Data Access</h4>
|
|
<p>Table and field-level permissions for database operations. Control who can read, create, update, or delete specific data.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<h4>UI Access</h4>
|
|
<p>Component and feature visibility management. Configure exactly which UI elements each user or role can see.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<h4>Resource Access</h4>
|
|
<p>System resource availability control. Manage access to AI models, actions, and other platform resources.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>Access Levels: Opening Logic</h3>
|
|
<p class="lead">For DATA context, the system uses <strong>opening rights</strong> with four access levels. These levels determine what data a user can access:</p>
|
|
<div class="access-levels">
|
|
<div class="access-level">
|
|
<h4>none (n)</h4>
|
|
<p>No access - item is completely hidden/disabled</p>
|
|
</div>
|
|
<div class="access-level">
|
|
<h4>my (m)</h4>
|
|
<p>My records - only records created by the current user</p>
|
|
</div>
|
|
<div class="access-level">
|
|
<h4>group (g)</h4>
|
|
<p>Group records - records within the same mandate (group context)</p>
|
|
</div>
|
|
<div class="access-level">
|
|
<h4>all (a)</h4>
|
|
<p>All records - full access to all records in the mandate</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>View Logic: Open + Close</h3>
|
|
<p class="lead">The <code>view</code> attribute controls visibility and enablement. This is the fundamental on/off switch for all RBAC contexts:</p>
|
|
<ul>
|
|
<li><strong>view: true</strong> - Item is visible/enabled</li>
|
|
<li><strong>view: false</strong> - Item is hidden/disabled (regardless of other permissions)</li>
|
|
</ul>
|
|
<p><strong>Key Rule:</strong> Only objects with <code>view: true</code> are shown. This applies to:</p>
|
|
<ul>
|
|
<li><strong>DATA Context:</strong> Controls whether tables/fields are accessible</li>
|
|
<li><strong>UI Context:</strong> Controls whether UI elements are visible</li>
|
|
<li><strong>RESOURCE Context:</strong> Controls whether resources are available</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>Rule Specificity & Hierarchy</h3>
|
|
<p class="lead">The RBAC system uses a cascading hierarchy where more specific rules override generic ones:</p>
|
|
<ol>
|
|
<li><strong>Generic Rules</strong> (<code>item = null</code>) - Apply to all items in context</li>
|
|
<li><strong>Specific Rules</strong> (<code>item = "table.field"</code> or <code>item = "ui.component.feature"</code>) - Override generic rules</li>
|
|
</ol>
|
|
<p><strong>Resolution Logic:</strong> Within a single role, the most specific rule wins. Across multiple roles, opening (union) logic applies - if ANY role enables something, it is enabled.</p>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>Opening Rights Principle</h3>
|
|
<p class="lead">For DATA context, read permission (R) is a prerequisite for create/update/delete operations (CUD). This ensures data integrity and proper access control:</p>
|
|
<ul>
|
|
<li>If Read = "n": No CUD operations allowed</li>
|
|
<li>If Read = "m": CUD operations limited to "m" or "n"</li>
|
|
<li>If Read = "g": CUD operations limited to "g", "m", or "n"</li>
|
|
<li>If Read = "a": CUD operations can be "a", "g", "m", or "n"</li>
|
|
</ul>
|
|
<p><strong>Key Rule:</strong> You can ONLY create/update/delete if you have read right.</p>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>Context Types</h3>
|
|
<p class="lead">RBAC rules apply to three different context types, each serving a specific purpose:</p>
|
|
<div class="context-grid">
|
|
<div class="context-card">
|
|
<h4>DATA</h4>
|
|
<p>Database tables and fields. Controls read/create/update/delete permissions.</p>
|
|
<p><strong>Example:</strong> <code>item: "UserInDB.email"</code></p>
|
|
</div>
|
|
<div class="context-card">
|
|
<h4>UI</h4>
|
|
<p>UI elements and features. Controls component visibility.</p>
|
|
<p><strong>Example:</strong> <code>item: "playground.voice.settings"</code></p>
|
|
</div>
|
|
<div class="context-card">
|
|
<h4>RESOURCE</h4>
|
|
<p>System resources (AI models, actions, etc.). Controls resource availability.</p>
|
|
<p><strong>Example:</strong> <code>item: "ai.model.anthropic"</code></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>RBAC System Diagram</h3>
|
|
<div class="diagram-image-container">
|
|
<img src="doc_platform_05_rbac_system.jpg" alt="RBAC System - Contexts, Access Levels, View Logic, and Rule Hierarchy" class="diagram-image">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="ui" class="tab-content">
|
|
<h2>UI Architecture</h2>
|
|
|
|
<div class="section">
|
|
<h3>Playground UI</h3>
|
|
<p class="lead">The <strong>Playground</strong> serves as the main entry point and demonstration UI. It's built with React and provides a comprehensive interface for workflow interaction:</p>
|
|
<ul>
|
|
<li>Chat interface for workflow interaction</li>
|
|
<li>Workflow editor for configuration</li>
|
|
<li>Document management</li>
|
|
<li>Connection management</li>
|
|
<li>Voice input/output capabilities</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>RBAC-Driven UI Configuration</h3>
|
|
<p class="lead">The UI is <strong>completely configurable via RBAC rules</strong>. This allows customers to configure exactly the UI they need for their use case:</p>
|
|
<ul>
|
|
<li>Per tenant configuration</li>
|
|
<li>Per user configuration</li>
|
|
<li>Component-level visibility control</li>
|
|
<li>Feature-level access control</li>
|
|
</ul>
|
|
<p>This allows customers to configure exactly the UI they need for their use case.</p>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>External UI Integration</h3>
|
|
<p class="lead">Additional UIs can be easily integrated via the REST API. All UI components communicate with the platform through the standardized REST API, ensuring consistent behavior and security:</p>
|
|
<ul>
|
|
<li><strong>Chatbots:</strong> Build custom chatbots using the workflow API</li>
|
|
<li><strong>Customer UIs:</strong> Create customer-specific interfaces in React, JavaScript, or other languages</li>
|
|
<li><strong>Mobile Apps:</strong> Integrate via REST API from mobile applications</li>
|
|
<li><strong>Third-Party Tools:</strong> Connect existing tools via webhooks and API</li>
|
|
</ul>
|
|
<p>All UI components communicate with the platform through the standardized REST API, ensuring consistent behavior and security.</p>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>Available UI Components</h3>
|
|
<p class="lead">The platform provides reusable UI components that can be configured via RBAC:</p>
|
|
<ul>
|
|
<li>Chat interface</li>
|
|
<li>Document viewer/editor</li>
|
|
<li>Workflow editor</li>
|
|
<li>Connection manager</li>
|
|
<li>Settings panels</li>
|
|
<li>Dashboard widgets</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>UI Architecture Diagram</h3>
|
|
<div class="diagram-image-container">
|
|
<img src="doc_platform_06_ui_architecture.jpg" alt="UI Architecture - RBAC-Driven Configuration, UI Components, UI Layer, and REST API" class="diagram-image">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="big-picture" class="tab-content">
|
|
<h2>Big Picture & Future Vision</h2>
|
|
|
|
<div class="section">
|
|
<h3>Vendor-Independent Platform</h3>
|
|
<div class="vision-card">
|
|
<h4>AI Model Independence</h4>
|
|
<p>PowerOn is designed as a <strong>vendor-independent platform</strong> regarding AI models:</p>
|
|
<ul>
|
|
<li>Support for multiple AI providers (OpenAI, Anthropic, Google, Azure, etc.)</li>
|
|
<li>Dynamic model selection based on task requirements</li>
|
|
<li>Easy addition of new AI providers</li>
|
|
<li>No vendor lock-in - customers can switch providers seamlessly</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="vision-card">
|
|
<h4>Connector Independence</h4>
|
|
<p>Universal connector architecture supporting all major platforms:</p>
|
|
<ul>
|
|
<li><strong>Microsoft:</strong> SharePoint, Outlook, Teams, OneDrive, Azure</li>
|
|
<li><strong>Google:</strong> Drive, Gmail, Workspace, Cloud</li>
|
|
<li><strong>Amazon:</strong> AWS services, S3, etc.</li>
|
|
<li><strong>Other:</strong> Jira, Slack, Salesforce, and many more</li>
|
|
</ul>
|
|
<p>Customers are not locked into a single vendor ecosystem.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>Graphical Workflow Modeling</h3>
|
|
<div class="vision-card">
|
|
<h4>Visual Customer Journey Design</h4>
|
|
<p>Future capability to <strong>graphically model workflows</strong> for customer journeys:</p>
|
|
<ul>
|
|
<li>Drag-and-drop workflow editor</li>
|
|
<li>Visual representation of customer journeys</li>
|
|
<li>Easy workflow modification without coding</li>
|
|
<li>Template library for common workflows</li>
|
|
<li>Workflow versioning and testing</li>
|
|
</ul>
|
|
<p>This makes workflow creation accessible to business users, not just developers.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>MCP Integration in Customer Copilot</h3>
|
|
<div class="vision-card">
|
|
<h4>Microsoft Copilot Plugin Architecture</h4>
|
|
<p>Integration of PowerOn actions as <strong>MCP (Model Context Protocol) plugins</strong> in the customer's Copilot:</p>
|
|
<ul>
|
|
<li><strong>Native Copilot Integration:</strong> PowerOn workflows accessible directly from Microsoft Copilot</li>
|
|
<li><strong>Action Library:</strong> All PowerOn actions available as Copilot plugins</li>
|
|
<li><strong>Seamless Experience:</strong> Customers use PowerOn capabilities without leaving Copilot</li>
|
|
<li><strong>Enterprise Workflows:</strong> Complex workflows triggered from simple Copilot conversations</li>
|
|
<li><strong>Data Privacy:</strong> All PowerOn privacy features work seamlessly in Copilot context</li>
|
|
</ul>
|
|
<p class="highlight-text">This enables customers to leverage PowerOn's powerful workflow capabilities directly from their familiar Copilot interface.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>Platform Evolution</h3>
|
|
<div class="vision-grid">
|
|
<div class="vision-item">
|
|
<h4>Today</h4>
|
|
<ul>
|
|
<li>REST API-based workflows</li>
|
|
<li>Playground UI</li>
|
|
<li>Multiple AI providers</li>
|
|
<li>Standard connectors</li>
|
|
</ul>
|
|
</div>
|
|
<div class="vision-item">
|
|
<h4>Near Future</h4>
|
|
<ul>
|
|
<li>Graphical workflow editor</li>
|
|
<li>MCP Copilot integration</li>
|
|
<li>Enhanced pre-processing</li>
|
|
<li>Advanced AI selection</li>
|
|
</ul>
|
|
</div>
|
|
<div class="vision-item">
|
|
<h4>Future</h4>
|
|
<ul>
|
|
<li>AI-powered workflow generation</li>
|
|
<li>Multi-platform Copilot support</li>
|
|
<li>Edge computing expansion</li>
|
|
<li>Federated learning</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>Big Picture & Future Vision Diagram</h3>
|
|
<div class="diagram-image-container">
|
|
<img src="doc_platform_07_big_picture_and_future_vision.jpg" alt="Big Picture & Future Vision - Platform Evolution from Today to Future" class="diagram-image">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="integration" class="tab-content">
|
|
<h2>Integration Guide</h2>
|
|
|
|
<div class="section">
|
|
<h3>REST API</h3>
|
|
<p class="lead">The platform exposes a comprehensive REST API for all operations. This API serves as the primary integration point for external developers:</p>
|
|
<ul>
|
|
<li><strong>Workflow API:</strong> Create, execute, and manage workflows</li>
|
|
<li><strong>Document API:</strong> Upload, download, and process documents</li>
|
|
<li><strong>Connection API:</strong> Manage external connections (SharePoint, Outlook, etc.)</li>
|
|
<li><strong>RBAC API:</strong> Manage roles and permissions</li>
|
|
<li><strong>Options API:</strong> Dynamic options for UI components</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>Building Blocks for Developers</h3>
|
|
<p class="lead">Developers can extend the platform by creating custom components in these areas:</p>
|
|
<div class="building-blocks">
|
|
<div class="block">
|
|
<h4>Workflow Methods</h4>
|
|
<p>Create custom workflow methods by extending <code>MethodBase</code> and registering actions.</p>
|
|
</div>
|
|
<div class="block">
|
|
<h4>Services</h4>
|
|
<p>Extend the services layer by creating new service modules following the existing pattern.</p>
|
|
</div>
|
|
<div class="block">
|
|
<h4>Connectors</h4>
|
|
<p>Build connectors for external systems (databases, APIs, services) using the connector interface.</p>
|
|
</div>
|
|
<div class="block">
|
|
<h4>UI Components</h4>
|
|
<p>Create React components that integrate with the REST API and respect RBAC rules.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>Development Workflow</h3>
|
|
<p class="lead">Follow these steps to get started with platform development:</p>
|
|
<ol>
|
|
<li><strong>Understand the Architecture:</strong> Review this document and codebase structure</li>
|
|
<li><strong>Set Up Development Environment:</strong> Clone repository and configure local environment</li>
|
|
<li><strong>Choose Integration Point:</strong> Decide whether to extend workflows, services, or UI</li>
|
|
<li><strong>Follow Patterns:</strong> Use existing code as reference for consistent implementation</li>
|
|
<li><strong>Test with RBAC:</strong> Ensure your changes respect RBAC rules</li>
|
|
<li><strong>Document:</strong> Update documentation for your changes</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>Key Integration Points</h3>
|
|
<p class="lead">Main directories where developers can add new functionality:</p>
|
|
<ul>
|
|
<li><code>gateway/modules/workflows/methods/</code> - Add new workflow methods</li>
|
|
<li><code>gateway/modules/services/</code> - Add new microservices</li>
|
|
<li><code>gateway/modules/connectors/</code> - Add new connectors</li>
|
|
<li><code>gateway/modules/routes/</code> - Add new API endpoints</li>
|
|
<li><code>gateway/modules/features/</code> - Add new features</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
<div class="container">
|
|
<p>© 2025 PowerON. All rights reserved.</p>
|
|
<p>Platform Architecture Documentation v1.0</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function openTab(evt, tabName) {
|
|
var i, tabcontent, tablinks;
|
|
tabcontent = document.getElementsByClassName("tab-content");
|
|
for (i = 0; i < tabcontent.length; i++) {
|
|
tabcontent[i].classList.remove("active");
|
|
}
|
|
tablinks = document.getElementsByClassName("tab-button");
|
|
for (i = 0; i < tablinks.length; i++) {
|
|
tablinks[i].classList.remove("active");
|
|
}
|
|
document.getElementById(tabName).classList.add("active");
|
|
evt.currentTarget.classList.add("active");
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|