Project Overview
Error Explainer is a modern web application designed to bridge the gap between technical error messages and non-technical users. It leverages advanced AI to analyze screenshots of errors and translate them into plain-English explanations with actionable steps.
The goal is to reduce frustration and support tickets by empowering users to understand and resolve common technical issues on their own.
Technology Stack
System Architecture
The application follows the MVC (Model-View-Controller) pattern provided by Laravel.
graph TD
User[User Browser] -- Upload Screenshot --> Route[Laravel Route]
Route --> Controller[ScreenshotAnalyzerController]
subgraph Backend_Processing [Backend Processing]
Controller -- Validate --> Validation[Validation Logic]
Validation -- Store Image --> Storage[Local Storage]
Controller -- Base64 Encode --> ImageProc[Image Processor]
ImageProc -- API Request --> Groq[Groq API Llama 3]
Groq -- JSON Response --> Controller
end
subgraph Data_Persistence [Data Persistence]
Controller -- Save Record --> Model[ScreenshotAnalysis Model]
Model -- Insert --> DB[(SQLite Database)]
end
Controller -- JSON Response --> User
Database Schema
We use a lightweight SQLite database to store analysis history and metadata.
erDiagram
ScreenshotAnalysis {
int id PK
string image_path
text analysis_result
int api_key_index
float processing_time
timestamp created_at
timestamp updated_at
}
Migration File
Schema::create('screenshot_analyses', function (Blueprint $table) {
$table->id();
$table->string('image_path');
$table->text('analysis_result');
$table->integer('api_key_index')->nullable();
$table->float('processing_time')->nullable();
$table->timestamps();
});
Application Flow
The sequence of events from user upload to final result.
sequenceDiagram
actor User
participant View as Frontend (Blade/JS)
participant Server as Laravel Controller
participant API as Groq API
participant DB as SQLite Database
User->>View: Uploads Screenshot
View->>View: Validates File (Type/Size)
View->>View: Generates Math Captcha
User->>View: Solves Captcha
View->>Server: POST /analyze (FormData)
activate Server
Server->>Server: Validate Request
Server->>Server: Store Image Locally
Server->>API: Send Image + Prompt
activate API
API-->>Server: Return Analysis (Markdown)
deactivate API
Server->>DB: Save Analysis Record
Server-->>View: Return JSON (Success + Data)
deactivate Server
View->>View: Save to LocalStorage (History)
View->>User: Display Formatted Results
Key Features Implementation
1. AI Integration (Groq)
We switched from Gemini to Groq for ultra-fast inference speeds. The controller sends the image as a Base64 data URL to the Llama 3 Vision model.
$payload = [
'model' => 'meta-llama/llama-4-scout-17b-16e-instruct',
'messages' => [
[
'role' => 'user',
'content' => [
['type' => 'text', 'text' => $prompt],
['type' => 'image_url', 'image_url' => ['url' => $imageDataUrl]]
]
]
]
];
2. Security & Spam Protection
- Math Captcha: A custom JavaScript-based captcha prevents automated bot submissions.
- Validation: Server-side validation ensures only valid images (PNG/JPG) under 10MB are processed.
- CSRF Protection: Laravel's built-in CSRF tokens secure all AJAX requests.
3. User Experience (UX)
- Local History: Uses browser
localStorageto persist the last 20 analyses without requiring user login. - Markdown Rendering: Custom JavaScript parser converts AI markdown output into clean, semantic HTML.
- Responsive Design: Fully responsive layout using CSS Grid and Flexbox.