Skip to content

VISUAL_GUIDE.md

Latest commit

 

History

History
587 lines (519 loc) · 19.2 KB

VISUAL_GUIDE.md

File metadata and controls

587 lines (519 loc) · 19.2 KB
Raw

🎨 VISUAL GUIDE & USER JOURNEY

AI-POWERED ECE PROJECT GENERATOR

Complete User Experience Walkthrough

📍 USER JOURNEY MAP

START
  ↓
[Read START_HERE.md] (2 min)
  ↓
[Get API Key] (3 min)
  ├─ Visit: openai.com/api/keys
  ├─ Sign up or login
  ├─ Create new key
  └─ Copy (format: sk-...)
  ↓
[Open Application] (1 min)
  ├─ Double-click index.html
  ├─ OR use http://localhost:8000
  └─ See beautiful form
  ↓
[Fill Form] (2 min)
  ├─ Semester: Choose (3-8)
  ├─ Skill Level: Choose
  ├─ Interest Area: Choose from 10
  ├─ Budget: Choose amount
  ├─ Project Type: Choose
  └─ API Key: Paste your key
  ↓
[Generate Project] (30-60 sec)
  ├─ Click "Generate Project" button
  ├─ See loading spinner
  ├─ Wait for AI processing
  └─ Report appears!
  ↓
[View Report] (5 min)
  ├─ Scroll through sections
  ├─ Read project details
  ├─ Review components & costs
  └─ Check future scope
  ↓
[Export Report] (1 min)
  ├─ 📋 Copy → Paste in Word
  ├─ ⬇️ Download → Save locally
  └─ 🖨️ Print → Submit to prof
  ↓
[Use Project] (Your time!)
  ├─ Understand thoroughly
  ├─ Implement if desired
  ├─ Present in class
  └─ Excel in viva!
  ↓
END ✅

🖥️ SCREEN LAYOUTS

Desktop Layout (1920px × 1080px)

┌─────────────────────────────────────────────────────────────────┐
│ 🎓 AI-Powered ECE Project Generator                    January 26│
├──────────────────────┬──────────────────────────────────────────┤
│                      │                                          │
│  FORM SECTION        │      OUTPUT SECTION                     │
│  (Sticky, Left)      │      (Scrollable, Right)               │
│                      │                                          │
│ [  Semester Dropdown]│  ┌────────────────────────────────────┐│
│ [SkillLevel Dropdown]│  │  Generated Project Report           ││
│ [InterestArea Drop] │  │  ─────────────────────────────────  ││
│ [ Budget Dropdown  ]│  │                                      ││
│ [ProjectType Drop] │  │  ## 1. PROJECT TITLE                 ││
│ [  API Key Field   ]│  │  Smart IoT Energy Monitor...         ││
│                      │  │                                      ││
│ [Generate Button]   │  │  ## 2. PROBLEM DEFINITION            ││
│                      │  │  Growing electricity consumption...  ││
│ ℹ️ API Key Info     │  │                                      ││
│ Getting API Key...  │  │  ## 3. WORKING LOGIC                ││
│                      │  │  1. Data Acquisition...             ││
│                      │  │  2. Analog to Digital...            ││
│                      │  │                                      ││
│                      │  │ [📋 Copy][⬇️ Download][🖨️ Print]    ││
│                      │  └────────────────────────────────────┘│
│                      │                                          │
└──────────────────────┴──────────────────────────────────────────┘

Tablet Layout (1024px × 768px)

┌────────────────────────────────────────────────────┐
│ 🎓 ECE Project Generator (Responsive)         Jan 26│
├────────────────────────────────────────────────────┤
│                                                    │
│  FORM SECTION                                     │
│  [  Semester Dropdown        ]                    │
│  [  SkillLevel Dropdown      ]                    │
│  [  Interest Area Dropdown   ]                    │
│  [  Budget Dropdown          ]                    │
│  [  Project Type Dropdown    ]                    │
│  [  API Key: ________________]                    │
│  [    Generate Project       ]                    │
│                                                    │
│  ℹ️ How to Get API Key                           │
│  Visit: platform.openai.com...                   │
│                                                    │
├────────────────────────────────────────────────────┤
│                                                    │
│  OUTPUT SECTION                                   │
│  ┌─────────────────────────────────────────────┐  │
│  │ Generated Project Report                    │  │
│  │                                             │  │
│  │ ## 1. PROJECT TITLE                         │  │
│  │ Smart IoT Energy Monitoring System          │  │
│  │                                             │  │
│  │ ## 2. PROBLEM DEFINITION                    │  │
│  │ Current electricity meters provide only...  │  │
│  │                                             │  │
│  │ [📋 Copy][⬇️ Download][🖨️ Print]             │  │
│  └─────────────────────────────────────────────┘  │
│                                                    │
└────────────────────────────────────────────────────┘

Mobile Layout (375px × 667px)

┌─────────────────────────────────┐
│ 🎓 ECE Project Generator    Jan26│
├─────────────────────────────────┤
│ FORM                            │
│ ┌─────────────────────────────┐ │
│ │ Semester              ▼     │ │
│ └─────────────────────────────┘ │
│ ┌─────────────────────────────┐ │
│ │ Skill Level           ▼     │ │
│ └─────────────────────────────┘ │
│ ┌─────────────────────────────┐ │
│ │ Interest Area         ▼     │ │
│ └─────────────────────────────┘ │
│ ┌─────────────────────────────┐ │
│ │ Budget                ▼     │ │
│ └─────────────────────────────┘ │
│ ┌─────────────────────────────┐ │
│ │ Project Type          ▼     │ │
│ └─────────────────────────────┘ │
│ ┌─────────────────────────────┐ │
│ │ API Key: _______________    │ │
│ └─────────────────────────────┘ │
│                                 │
│  [  Generate Project   ]        │
│                                 │
│ ℹ️ Getting API Key...           │
├─────────────────────────────────┤
│ OUTPUT                          │
│ ┌─────────────────────────────┐ │
│ │ ## PROJECT TITLE            │ │
│ │ Smart IoT Energy...         │ │
│ │                             │ │
│ │ ## PROBLEM                  │ │
│ │ Growing electricity...      │ │
│ │                             │ │
│ │ [📋][⬇️][🖨️]                  │ │
│ └─────────────────────────────┘ │
└─────────────────────────────────┘

🎯 FORM FIELD GUIDE

Field 1: Semester

Label: Semester
Type: Dropdown Select
Options:
  ☐ 3rd Semester
  ☐ 4th Semester
  ☐ 5th Semester
  ☐ 6th Semester
  ☐ 7th Semester
  ☐ 8th Semester
Default: None (required)
Why: Determines project complexity & scope

Field 2: Skill Level

Label: Skill Level
Type: Dropdown Select
Options:
  ☐ Beginner (Simple projects)
  ☐ Intermediate (Moderate complexity)
  ☐ Advanced (Complex, cutting-edge)
Default: None (required)
Why: Affects component selection & methodology

Field 3: Interest Area

Label: Interest Area
Type: Dropdown Select (10 options)
Options:
  ☐ IoT and Smart Systems
  ☐ Robotics
  ☐ Signal Processing
  ☐ Power Electronics
  ☐ Communication Systems
  ☐ Embedded Systems
  ☐ VLSI and Microelectronics
  ☐ Machine Learning and AI
  ☐ Wireless Networks
  ☐ Control Systems
Default: None (required)
Why: Defines project domain & focus

Field 4: Budget

Label: Budget (INR)
Type: Dropdown Select
Options:
  ☐ ₹5,000 - Basic (Microcontroller)
  ☐ ₹10,000 - Standard (Arduino/RPi)
  ☐ ₹15,000 - Good (Advanced sensors)
  ☐ ₹25,000 - Professional (FPGA/DSP)
  ☐ ₹50,000+ - Advanced (Industrial)
Default: None (required)
Why: Determines component selection & scope

Field 5: Project Type

Label: Project Type
Type: Dropdown Select
Options:
  ☐ Mini Project (6 weeks)
  ☐ Major Project (12+ weeks)
  ☐ Hackathon Project
  ☐ Research Project
Default: None (required)
Why: Affects duration & depth of report

Field 6: API Key

Label: OpenAI API Key
Type: Password Text Field
Format: sk-... (format: "sk-" prefix)
Storage: LocalStorage (optional)
Placeholder: sk-...
Why: Required for AI generation
Help: "Your API key is stored locally..."

🎬 INTERACTION FLOW

Form Submission

User Action              System Response
─────────────────────────────────────────────────

Click "Generate"         Form Validation Check
                         ↓ (All fields filled?)
                         Yes → Continue
                         No → Show error

API Key Valid?           Validate format (sk-...)
                         ↓
                         Yes → Continue
                         No → Show error

All Valid!               Show loading spinner
                         Disable button
                         Build master prompt
                         Replace placeholders

Send to OpenAI           Show "Generating..."
                         Wait 30-60 seconds
                         AI processes prompt
                         Generate response

Response Received        Hide loading indicator
                         Parse response
                         Convert markdown → HTML
                         Display in output panel
                         Re-enable button

Success!                 User sees complete report
                         Can copy, download, print

📊 REPORT OUTPUT STRUCTURE

Generated Report Display
├─ Header
│  ├─ "Generated Project Report"
│  └─ [📋 Copy] [⬇️ Download] [🖨️ Print]
│
├─ Content Sections
│  ├─ 1. PROJECT TITLE (Large blue heading)
│  ├─ 2. PROBLEM DEFINITION (Purple subheading)
│  ├─ 3. WORKING LOGIC
│  │  ├─ 1. First step
│  │  ├─ 2. Second step
│  │  └─ ... (8-10 steps total)
│  ├─ 4. COMPONENTS REQUIRED
│  │  ├─ A. HARDWARE COMPONENTS
│  │  │  ├─ Component 1 | Purpose | Specs
│  │  │  ├─ Component 2 | Purpose | Specs
│  │  │  └─ ...
│  │  └─ B. SOFTWARE / TOOLS USED
│  │     ├─ Tool 1
│  │     ├─ Tool 2
│  │     └─ ...
│  ├─ 5. ESTIMATED COST
│  │  ├─ Component 1: ₹XXX
│  │  ├─ Component 2: ₹XXX
│  │  └─ Total: ₹XXXXX
│  ├─ 6. FUTURE SCOPE
│  │  ├─ 1. Enhancement idea 1 (detailed)
│  │  ├─ 2. Enhancement idea 2 (detailed)
│  │  └─ ... (5+ enhancements)
│  └─ 7. COMPLETE PROJECT REPORT
│     ├─ 7.1 ABSTRACT (150-200 words)
│     ├─ 7.2 INTRODUCTION (250-300 words)
│     ├─ 7.3 PROBLEM STATEMENT
│     ├─ 7.4 PROPOSED SYSTEM
│     ├─ 7.5 WORKING METHODOLOGY
│     ├─ 7.6 HARDWARE DESCRIPTION
│     ├─ 7.7 SOFTWARE DESCRIPTION
│     ├─ 7.8 BLOCK DIAGRAM EXPLANATION
│     ├─ 7.9 EXPECTED OUTPUT
│     ├─ 7.10 ADVANTAGES (5-7 points)
│     ├─ 7.11 APPLICATIONS (5-8 uses)
│     ├─ 7.12 LIMITATIONS (4-5 constraints)
│     ├─ 7.13 FUTURE ENHANCEMENTS (5+ ideas)
│     └─ 7.14 CONCLUSION (150-200 words)
│
└─ Styling Applied
   ├─ H1: Large blue text, underline
   ├─ H2: Purple text, left border
   ├─ H3: Blue subheadings
   ├─ P: Justified, line-height 1.8
   ├─ Lists: Bullet/numbered with spacing
   └─ Strong/Bold: Emphasized text

🎯 EXPORT OPTIONS DEMO

1. Copy to Clipboard

User Clicks "Copy All" Button
↓
System extracts all text from report
↓
Copies to browser clipboard
↓
User sees "✓ Copied!" feedback (2 sec)
↓
User can paste into:
  - Microsoft Word
  - Google Docs
  - Any text editor
  - Email
  - Any application

2. Download as Text File

User Clicks "Download" Button
↓
System creates text file:
  "ECE_Project_Report.txt"
↓
Browser downloads file
↓
User can:
  - Save to computer
  - Edit in text editor
  - Upload to college portal
  - Share with friends
  - Archive for later

3. Print / Save as PDF

User Clicks "Print" Button
↓
System opens print dialog
↓
User options:
  ✓ Print to physical printer
  ✓ Save as PDF
  ✓ Save to Google Drive
  ✓ Send to email
↓
Formatted for printing:
  - Proper margins
  - Styled headings
  - Page breaks
  - Professional look

🎨 COLOR SCHEME

Primary Gradient:
┌──────────────────────────────────┐
│ #667eea → #764ba2               │
│ (Indigo) → (Purple)             │
└──────────────────────────────────┘

Text Colors:
- Primary Heading: #667eea (Indigo)
- Secondary Heading: #764ba2 (Purple)
- Body Text: #555555 (Dark Gray)
- Links: #667eea (Indigo)
- Disabled: #999999 (Light Gray)

Background Colors:
- Form Panel: White (#FFFFFF)
- Output Panel: White (#FFFFFF)
- Button Hover: #667eea with opacity
- Input Focus: Light indigo (#F0F0FF)
- Error: Light red (#FEE)

Borders & Accents:
- Primary Border: #667eea
- Secondary Border: #764ba2
- Light Border: #E0E0E0
- Input Border: #E0E0E0 (default), #667eea (focus)

📱 RESPONSIVE BREAKPOINTS

Desktop (>1024px)
├─ Layout: 2-column (form + output)
├─ Form Width: 35% (sticky)
├─ Output Width: 65% (flexible)
├─ Font Size: 16px (body)
└─ All features visible

Tablet (768px - 1024px)
├─ Layout: 1-column (stacked)
├─ Form Width: 100%
├─ Output Width: 100%
├─ Font Size: 15px
└─ All features visible

Mobile (<768px)
├─ Layout: 1-column (stacked)
├─ Form Width: 100%
├─ Padding: 10px
├─ Font Size: 14px
├─ Buttons: Full width
└─ Touch-optimized

⚡ LOADING STATES

Idle (Default)

[         ]
[ FORM    ]  [  OUTPUT PANEL    ]
[         ]  [  - Initial State ]
[         ]  [  📝 Fill form    ]
[ Generate]  [  and generate    ]
[  Button ]  [                  ]
[         ]  [                  ]

Loading (After Generate Click)

[         ]
[ FORM    ]  [        📝           ]
[         ]  [       Loading...     ]
[DISABLED ]  [      [Loading]       ]
[Generate]  [   Generating your    ]
[  Button ]  [ complete ECE project ]
[ (Grayed)]  [     report...       ]
[         ]  [                      ]
[         ]  [ (30-60 seconds)      ]

Success (Report Received)

[         ]
[ FORM    ]  [ Generated Report    ]
[         ]  [ ─────────────────   ]
[ ENABLED ]  [                     ]
[Generate]  [ ## PROJECT TITLE     ]
[  Button ]  [ Smart IoT Energy...  ]
[         ]  [                     ]
[         ]  [ ## PROBLEM          ]
[         ]  [ Growing electricity ]
[         ]  [                     ]
[         ]  [📋][⬇️][🖨️] (Buttons) ]

🎯 ERROR STATES

Form Validation Error

┌─────────────────────────────────┐
│ ⚠️ Error Message                │
│ Please fill all required fields │
└─────────────────────────────────┘

❌ Blank fields highlighted in red
❌ Form submission blocked
✅ Error message shown clearly
✅ Button remains enabled for retry

API Key Error

┌──────────────────────────────────┐
│ ⚠️ Error                         │
│ Invalid API Key format.          │
│ It should start with "sk-"       │
└──────────────────────────────────┘

❌ API Key field highlighted
❌ Generation blocked
✅ Clear error message
✅ Helper text visible

API Error (Rate Limit)

┌───────────────────────────────────┐
│ ⚠️ Error                          │
│ Rate limit exceeded.              │
│ Please wait before trying again.  │
└───────────────────────────────────┘

❌ Button disabled for 60 seconds
❌ Timer countdown shown
✅ Clear explanation
✅ Auto-retry available

📚 VISUAL GUIDE SUMMARY

This complete visual guide shows: ✅ User journey from start to finish ✅ Desktop, tablet, mobile layouts ✅ Form field descriptions ✅ Interaction flows ✅ Report structure ✅ Export options ✅ Color scheme ✅ Responsive design ✅ Loading states ✅ Error handling

Total: 15+ diagrams & explanations

This visual guide helps you understand how users will interact with the system.