Skip to content

design.md

Latest commit

 

History

History
307 lines (234 loc) · 8.97 KB

design.md

File metadata and controls

307 lines (234 loc) · 8.97 KB
Raw

Design Document

AI-Based Government Scheme Recommendation and Assistance System

Architecture Diagram Specifications

Visual Design Specifications

Color Palette

  • Primary Blue: #2563EB (for main components)
  • Secondary Orange: #F97316 (for AI/ML components)
  • Background: #FFFFFF (clean white)
  • Text: #1F2937 (dark gray)
  • Borders: #E5E7EB (light gray)
  • Arrows: #6B7280 (medium gray)

Typography

  • Component Labels: Sans-serif, 14-16px, bold
  • Descriptions: Sans-serif, 12px, regular
  • Titles: Sans-serif, 18-20px, bold

Component Styling

  • Box Style: Rounded corners (8px radius)
  • Shadow: Subtle drop shadow (0 2px 4px rgba(0,0,0,0.1))
  • Padding: 16px internal padding
  • Border: 2px solid border
  • Spacing: 60-80px between components

Architecture Diagram Layout

Horizontal Structure (Left to Right)

┌─────────────┐    ┌─────────────┐    ┌─────────────┐    ┌─────────────┐    ┌─────────────┐
│   User      │───▶│   Backend   │───▶│  AI Model   │    │  Database   │    │   Cloud     │
│ Interface   │◀───│   Server    │◀───│             │    │             │    │Infrastructure│
└─────────────┘    └─────────────┘    └─────────────┘    └─────────────┘    └─────────────┘
                           │                  ▲                  ▲
                           │                  │                  │
                           ▼                  │                  │
                    ┌─────────────┐          │                  │
                    │  OCR/Speech │          │                  │
                    │    APIs     │          │                  │
                    └─────────────┘          │                  │
                                              │                  │
                                    ┌─────────────────┐         │
                                    │ Eligibility     │         │
                                    │ Rules Engine    │         │
                                    └─────────────────┘         │
                                                                 │
                           ┌─────────────────────────────────────┘
                           │
                           ▼

Component Details

1. User Interface (Blue #2563EB)

Position: Far Left Icon: 👤 User icon with mobile and laptop Components:

  • Mobile App (iOS/Android icon)
  • Web App (Browser icon)

Label: "User Interface" Sub-labels:

  • "Mobile App"
  • "Web App"

2. Backend Server (Blue #2563EB)

Position: Center-Left Icon: 🖥️ Server icon Label: "Backend Server" Sub-label: "Flask / Django"

Connections:

  • Bidirectional arrow to User Interface
  • Arrow to AI Model
  • Bidirectional arrow to Database
  • Bidirectional arrow to OCR & Speech APIs
  • Arrow from AI Model back to Backend

3. AI Model (Orange #F97316)

Position: Center Icon: 🧠 Brain/AI icon Label: "Machine Learning Model" Sub-label: "Scikit-learn"

Connections:

  • Arrow from Backend Server
  • Arrow to Backend Server
  • Connection to Eligibility Rules Engine

4. Eligibility Rules Engine (Orange #F97316)

Position: Between Backend and AI Model (slightly below) Icon: ⚙️ Gear/Rules icon Label: "Scheme Eligibility Rules"

Connections:

  • Connected to Backend Server
  • Connected to AI Model

5. Database (Blue #2563EB)

Position: Center-Right Icon: 🗄️ Database cylinder icon Label: "Database" Sub-label: "MySQL / Firebase"

Connections:

  • Bidirectional arrow to Backend Server

6. OCR & Speech APIs (Blue #2563EB)

Position: Below Backend Server Icon: 🎤📄 Microphone and document icons Label: "OCR & Speech APIs" Sub-labels:

  • "Document Processing"
  • "Voice Recognition"

Connections:

  • Bidirectional arrow to Backend Server

7. Cloud Infrastructure (Blue #2563EB)

Position: Far Right (or spanning top) Icon: ☁️ Cloud icon Label: "Cloud Infrastructure" Sub-label: "AWS Deployment"

Components shown:

  • EC2/Lambda
  • S3 Storage
  • RDS Database

Connections:

  • Encompasses or connects to all components

Data Flow Arrows

Arrow Specifications

  • Width: 3px
  • Color: #6B7280
  • Style: Solid lines with arrowheads
  • Bidirectional: Double-headed arrows where applicable

Flow Descriptions

  1. User → Backend

    • Label: "Requests"
    • Color: Blue

  2. Backend → User

    • Label: "Responses"
    • Color: Blue

  3. Backend → AI Model

    • Label: "User Profile Data"
    • Color: Orange

  4. AI Model → Backend

    • Label: "Recommendations"
    • Color: Orange

  5. Backend ↔ Database

    • Label: "CRUD Operations"
    • Color: Blue

  6. Backend ↔ OCR/Speech APIs

    • Label: "Document/Voice Processing"
    • Color: Blue

  7. Eligibility Rules ↔ AI Model

    • Label: "Validation Rules"
    • Color: Orange

Implementation Tools

Recommended Diagram Tools

  1. Draw.io / diagrams.net (Free, web-based)
  2. Lucidchart (Professional)
  3. Microsoft PowerPoint (Built-in SmartArt)
  4. Figma (Design-focused)
  5. Canva (Template-based)

PowerPoint Implementation Steps

  1. Setup Slide

    • Blank slide with white background
    • 16:9 aspect ratio

  2. Create Component Boxes

    • Insert → Shapes → Rounded Rectangle
    • Apply blue (#2563EB) fill for infrastructure components
    • Apply orange (#F97316) fill for AI/ML components
    • Add white text with component names

  3. Add Icons

    • Use built-in PowerPoint icons (Insert → Icons)
    • Or download from: Flaticon, Icons8, Font Awesome

  4. Draw Arrows

    • Insert → Shapes → Arrow
    • Format with specified colors and widths
    • Add text labels near arrows

  5. Arrange Layout

    • Use alignment tools (Align → Distribute Horizontally)
    • Maintain consistent spacing
    • Group related components

  6. Final Touches

    • Add subtle shadows (Shape Format → Shadow)
    • Ensure text is readable
    • Test visibility on projector

Alternative: Code-Based Diagram

Using Python (Diagrams Library)

from diagrams import Diagram, Cluster, Edge
from diagrams.onprem.client import Users
from diagrams.onprem.compute import Server
from diagrams.programming.framework import Flask
from diagrams.onprem.database import MySQL
from diagrams.aws.compute import EC2
from diagrams.aws.storage import S3
from diagrams.custom import Custom

with Diagram("AI Government Scheme System", show=False, direction="LR"):
    user = Users("User Interface\n(Mobile/Web)")
    
    with Cluster("Backend"):
        backend = Flask("Backend Server\n(Flask/Django)")
    
    with Cluster("AI/ML"):
        ml_model = Server("ML Model\n(Scikit-learn)")
        rules = Server("Eligibility Rules")
    
    database = MySQL("Database\n(MySQL/Firebase)")
    
    with Cluster("External APIs"):
        ocr = Server("OCR & Speech APIs")
    
    with Cluster("AWS Cloud"):
        cloud = EC2("Cloud Infrastructure")
    
    # Data flows
    user >> Edge(label="requests") >> backend
    backend >> Edge(label="responses") >> user
    backend >> Edge(label="profile data") >> ml_model
    ml_model >> Edge(label="recommendations") >> backend
    backend >> Edge(label="CRUD") >> database
    backend >> Edge(label="process") >> ocr
    rules >> ml_model

Presentation Tips

  1. Slide Title: "System Architecture"
  2. Introduce Components: Walk through left to right
  3. Explain Data Flow: Follow arrows with pointer
  4. Highlight AI/ML: Emphasize orange components
  5. Discuss Scalability: Point to cloud infrastructure
  6. Keep It Simple: Don't overcrowd with details

Accessibility Considerations

  • High contrast colors (blue/orange on white)
  • Large, readable fonts (minimum 14px)
  • Clear visual hierarchy
  • Color-blind friendly palette
  • Alternative text descriptions for screen readers

Export Specifications

  • Format: PNG or SVG (for scalability)
  • Resolution: 1920x1080 (Full HD)
  • DPI: 300 for print, 72 for screen
  • File Size: < 2MB for easy sharing