DEV Community: Prateek Kr

How to analyse an image with GPT 5 — a practical, production-ready guide

Prateek Kr — Mon, 13 Oct 2025 11:57:21 +0000

This article shows a clean, copy-pasteable Python example for analyzing an architecture diagram image using a GPT multimodal model. You’ll get:

A minimal, production-oriented code snippet (cleaned of comments / clutter)
A line-by-line explanation of how the code works
Prompt-engineering tips for accurate, structured output
Important gotchas (image size, encoding, costs, privacy, and error handling)
Suggestions for parsing and validating responses

The snippet below assumes you have a configured client object that wraps your OpenAI-compatible API (Azure OpenAI or OpenAI). Replace the model string with the multimodal model name available to you (e.g., gpt-5, gpt-4o, or the provider-specific variant).

Clean, copy-pasteable Python code

from clients import client
import base64
from io import BytesIO
from PIL import Image

IMAGE_SRC = "./assets/banking.png"
MODEL = "gpt-4o"  # replace with your multimodal model name if different

def encode_image_pil(img: Image.Image) -> str:
    buffered = BytesIO()
    fmt = img.format or "PNG"
    img.save(buffered, format=fmt)
    return base64.b64encode(buffered.getvalue()).decode("utf-8")

def analyze_image_pil(img: Image.Image, model: str = MODEL, temperature: float = 0.0):
    encoded = encode_image_pil(img)
    prompt_text = (
        "Analyze the architecture diagram in the image in comprehensive detail. "
        "1) Identify every distinct block and name it as a service/module. For each, describe its role. "
        "2) For every connection, list the exact data types/names that flow (include direction). "
        "3) List any text visible in the image verbatim. "
        "4) Describe the full system behaviour and highlight bottlenecks or single points of failure. "
        "Return the analysis as JSON with keys: blocks[], connections[], visible_text[], summary, issues[]. "
    )
    response = client.chat.completions.create(
        model=model,
        messages=[
            {"role": "user", "content": [{"type": "text", "text": prompt_text},
                                        {"type": "image_url", "image_url": {"url": f"data:image/png;base64,{encoded}", "detail": "high"}}]}
        ],
        temperature=temperature,
    )
    return response.choices[0].message.content

if __name__ == "__main__":
    img = Image.open(IMAGE_SRC)
    result = analyze_image_pil(img)
    print(result)

What the code does — step-by-step
1. Imports and constants

from clients import client — client is your pre-configured OpenAI/Azure client. Keep credentials/config outside this file.
base64, BytesIO, and PIL.Image are used to convert an in-memory image into a base64 data URI suitable for embedding into the chat request.
IMAGE_SRC and MODEL are simple constants you can change to point to a different file or to select a different model.

2. encode_image_pil

Accepts a PIL.Image.Image instance.
Uses a BytesIO buffer and img.save(...) to serialize the image into its native or fallback format (PNG).
Base64-encodes the bytes and returns a UTF-8 string.
Why: A data: URL (data:image/png;base64,<...>) is a portable way to include an image inline in the request. Some providers accept binary uploads — check your client API if you prefer attachments instead of base64.

3. analyze_image_pil

Builds a clear, structured prompt asking for:

Identification of blocks (services/modules)
Exact data flows with data names and direction
Verbatim visible text from the image
System summary and issues/bottlenecks

The function sends a single chat request that contains both a text item and an image_url item where the image_url is a data: URI containing the base64 image.
temperature is set to 0.0 by default to maximize determinism for structural analysis. For more creative, higher-level interpretation you can raise it.
Return: response.choices[0].message.content (this returns the model output in a provider-specific structure).

4. main usage

Opens the image file with PIL and calls analyze_image_pil.
Prints the model response.

Prompt engineering & output structure (why we ask for JSON)

Asking the model to return JSON with explicit keys (blocks, connections, visible_text, summary, issues) helps you:

Parse programmatically and validate results.
Enforce consistent structure across different images.
Avoid missed details (the model can be instructed to error if it can't find a key).

Example JSON structure you should ask for:

{
  "blocks": [
    {
      "id": "AuthService",
      "label": "Auth Service",
      "role": "Issue JWT tokens",
      "data_in": ["credentials(username, password)"],
      "data_out": ["jwt_token"]
    }
  ],
  "connections": [
    {
      "from": "Frontend",
      "to": "AuthService",
      "data": ["login_request { username, password }"]
    }
  ],
  "visible_text": ["User Login", "DB: Postgres"],
  "summary": "...",
  "issues": ["AuthService is a single point of failure"]
}

If you need stricter parsing, request content-type: application/json or ask the model to always wrap JSON in triple backticks and nothing else. Then validate with json.loads().

Key gotchas & best practices
1) Image size and base64 length

Base64 increases payload size by ~33%. Very large images can blow up request size or exceed API limits.
Best practice: resize or compress images (downscale while preserving readability) before encoding. Use PNG for diagrams, JPEG for photos where acceptable.

2) Format detection

The code uses img.format if available, otherwise falls back to PNG. Ensure PIL recognized the format; otherwise save as PNG.

3) Model selection

Use the multimodal model provided by your vendor. Replace MODEL value with the latest multimodal model name you have access to (e.g., gpt-5 or a vendor-specific alias).
Some models are better at text extraction (OCR), others at structural reasoning; test and tune.

4) Temperature & determinism

temperature=0.0 yields deterministic, conservative output (good for structured extraction).
Higher temperature gives more creative / speculative answers — useful for brainstorming but not for precise extraction.
5) Costs & rate limits
Multimodal models are often more expensive and may have different quotas. Batch requests and cache results where possible.
For bulk image processing, implement retry/backoff and monitor billing.

6) Privacy & security

Don’t send PII or sensitive diagrams to public APIs unless permitted by policy. If the image contains sensitive data, sanitize or host on a private, audited endpoint.
Consider on-premise or enterprise offerings if compliance is required.

7) OCR vs structural interpretation

If you only need text in the image, dedicated OCR tools may be cheaper and more deterministic.
For structural interpretation (blocks, flows, architectural reasoning) multimodal LLMs offer richer semantic outputs.

8) Data URI vs binary uploads

data: URIs are simple and portable but large. Check your client library for binary upload methods (multipart/form-data or separate image input fields) — those are more efficient.

9) Validation & fallback

Always validate JSON returned by the model. The model may return malformed JSON if the prompt isn’t strict.
Add retries or a secondary prompt to reformat output if parsing fails.

Advanced tips
1) Use schema enforcement

Ask the model to validate its own JSON before returning, or run a JSON schema validator locally after receiving the reply.

2) Two-step pipeline for extreme reliability

First, ask the model to extract visible text and primitive OCR (low temperature).
Second, feed the extracted text + simplified structural image to a second prompt for deeper reasoning (bottlenecks, verification).

3) Human-in-the-loop verification

For critical architecture diagrams, present the structured output to a human reviewer who can correct or confirm before taking automated actions.

Example: parse and validate JSON safely

import json

raw = analyze_image_pil(img)
# Model might return a markdown-wrapped JSON; strip code fences if needed
if isinstance(raw, str):
    raw = raw.strip()
    if raw.startswith("```

"):
        raw = raw.split("

```")[1] if "```

" in raw else raw

try:
    parsed = json.loads(raw)
except json.JSONDecodeError:
    raise ValueError("Model returned non-JSON output. Consider tightening your prompt.")

Final checklist before productionizing

Limit image resolution to what’s necessary for readability.
Use deterministic prompts + temperature=0.0 for extraction tasks.
Request JSON and validate locally.
Protect sensitive images (don’t leak PII).
Monitor API usage & costs.
Add retries, exponential backoff, and rate-limiting.

Conclusion

Multimodal GPT models make it straightforward to extract structured architecture insights from diagrams, but reliable production usage requires careful image handling, explicit prompt engineering, and robust validation. Use the cleaned code above as a starting point; iterate on prompts, model choice, and data handling to reach the reliability your product needs.

Understanding app.config.ts in Angular 19 Standalone Applications — A Complete Guide

Prateek Kr — Mon, 13 Oct 2025 11:37:18 +0000

In this article, we’ll deep-dive into every line of a real-world app.config.ts file that integrates:

Angular Standalone APIs
PrimeNG theming (Lara theme)
NgRx Store + Effects + DevTools
HTTP Client with Fetch
Markdown rendering (ngx-markdown + PrismJS highlighting)
Zone optimization for better performance

By the end, you’ll understand how to structure, configure, and optimize your Angular 19 standalone app configuration file like a pro.

The Complete app.config.ts Code
Here’s the full configuration we’ll be dissecting:

import { ApplicationConfig, provideZoneChangeDetection, SecurityContext, isDevMode } from '@angular/core';
import { provideRouter } from '@angular/router';

import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { providePrimeNG } from 'primeng/config';
import Lara from '@primeng/themes/lara';

import { routes } from './app.routes';
import { provideHttpClient, withFetch } from '@angular/common/http';
import { CLIPBOARD_OPTIONS, ClipboardButtonComponent, MARKED_OPTIONS, MERMAID_OPTIONS, provideMarkdown } from 'ngx-markdown';
import 'prismjs';
import 'prismjs/components/prism-typescript.min.js';
import 'prismjs/plugins/line-numbers/prism-line-numbers.js';
import 'prismjs/plugins/line-highlight/prism-line-highlight.js';
import { provideStore } from '@ngrx/store';
import { provideStoreDevtools } from '@ngrx/store-devtools';
import { provideEffects } from '@ngrx/effects';
import { getModalsReducer } from './store/reducers';
import { Effects } from './store/effects';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideAnimationsAsync(),
    providePrimeNG({
        theme: {
            preset: Lara,
            options: {
                // prefix: 'p',
                darkModeSelector: 'false',
                // colorScheme:  'light',
                cssLayer: false
            }
        }
    }),
    provideHttpClient(withFetch()),
    provideMarkdown({
        mermaidOptions: {
            provide: MERMAID_OPTIONS,
            useValue: {
                darkMode: true,
                look: 'handDrawn',
            },
        },
        clipboardOptions: {
            provide: CLIPBOARD_OPTIONS,
            useValue: {
                buttonComponent: ClipboardButtonComponent,
            },
        },
        sanitize: SecurityContext.NONE,
        markedOptions: {
            provide: MARKED_OPTIONS,
            useValue: {
                gfm: true,
                breaks: false,
                pedantic: false,
            }
        },
    }),
    provideStore({ modals: getModalsReducer }),
    provideStoreDevtools({ maxAge: 25, logOnly: !isDevMode() }),
    provideEffects([Effects])
  ]
};

What is app.config.ts in Angular 19?

In Angular 19 standalone apps, you don’t use AppModule anymore. Instead, you configure all global providers in one place — app.config.ts.

This configuration object (ApplicationConfig) is passed to your app’s entry point:

bootstrapApplication(AppComponent, appConfig);

It defines everything your app needs globally: routing, HTTP, theming, markdown, animations, NgRx, and more.

Line-by-Line Explanation
Let’s break it down step by step:

Core Angular Imports

import { ApplicationConfig, provideZoneChangeDetection, SecurityContext, isDevMode } from '@angular/core';

ApplicationConfig — Type that defines app-wide providers for standalone apps.
provideZoneChangeDetection — Configures Angular’s zone-based change detection.
SecurityContext — Controls how Angular sanitizes content (used in Markdown rendering).
isDevMode() — Detects if the app is running in development mode — handy for enabling debug tools conditionally.

Angular Router

import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

provideRouter(routes) installs Angular Router without needing RouterModule.forRoot().
Your route definitions live in app.routes.ts, typically as a Routes array.

Animations Setup

import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';

Enables Angular’s animation engine asynchronously.
The async variant helps tree-shake animation code and reduce bundle size when animations aren’t immediately needed.

PrimeNG Theme Configuration

import { providePrimeNG } from 'primeng/config';
import Lara from '@primeng/themes/lara';

Then configured like this:

providePrimeNG({
  theme: {
    preset: Lara,
    options: {
      darkModeSelector: 'false',
      cssLayer: false
    }
  }
})

providePrimeNG() globally sets up PrimeNG.
preset: Lara applies the beautiful Lara theme.
darkModeSelector — defines a CSS selector for dark mode (here it’s disabled).
cssLayer — controls CSS layering behavior. Setting it false prevents layering issues if you manage your own global styles.

You can customize prefix, color scheme, or even dynamically switch themes later.

HTTP Client with Fetch API

import { provideHttpClient, withFetch } from '@angular/common/http';

provideHttpClient() — Bootstraps the modern Angular HTTP Client for standalone apps.
withFetch() — Uses the native Fetch API under the hood (instead of XMLHttpRequest).

Benefits:

Smaller bundle size
Modern streaming support
Better Service Worker integration

If your app relies on progress events, verify behavior as Fetch doesn’t provide them the same way as XHR.

Markdown Rendering with ngx-markdown

import { CLIPBOARD_OPTIONS, ClipboardButtonComponent, MARKED_OPTIONS, MERMAID_OPTIONS, provideMarkdown } from 'ngx-markdown';

Then configured as:

provideMarkdown({
  mermaidOptions: {
    provide: MERMAID_OPTIONS,
    useValue: {
      darkMode: true,
      look: 'handDrawn',
    },
  },
  clipboardOptions: {
    provide: CLIPBOARD_OPTIONS,
    useValue: {
      buttonComponent: ClipboardButtonComponent,
    },
  },
  sanitize: SecurityContext.NONE,
  markedOptions: {
    provide: MARKED_OPTIONS,
    useValue: {
      gfm: true,
      breaks: false,
      pedantic: false,
    }
  },
})

This setup enables:

Markdown rendering via the marked library.
Mermaid diagrams (MERMAID_OPTIONS) with dark mode and hand-drawn style.
Clipboard copy button (ClipboardButtonComponent) for code snippets.
sanitize: SecurityContext.NONE — disables sanitization, allowing raw HTML in Markdown.

Security Tip:
Only set SecurityContext.NONE if the Markdown content is 100% trusted. Otherwise, use SecurityContext.HTML to avoid XSS risks.

Syntax Highlighting with PrismJS

import 'prismjs';
import 'prismjs/components/prism-typescript.min.js';
import 'prismjs/plugins/line-numbers/prism-line-numbers.js';
import 'prismjs/plugins/line-highlight/prism-line-highlight.js';

These are side-effect imports.
They load PrismJS with TypeScript syntax highlighting and plugins for line numbers and line highlighting.
Perfect for rendering code blocks in documentation or Markdown.

You can add more languages by importing other Prism components.

State Management with NgRx

import { provideStore } from '@ngrx/store';
import { provideStoreDevtools } from '@ngrx/store-devtools';
import { provideEffects } from '@ngrx/effects';
import { getModalsReducer } from './store/reducers';
import { Effects } from './store/effects';

Configured as:

provideStore({ modals: getModalsReducer }),
provideStoreDevtools({ maxAge: 25, logOnly: !isDevMode() }),
provideEffects([Effects])

Explanation:

provideStore() — Registers your global store with a reducer map.
modals: getModalsReducer — Example slice managing modal dialogs.
provideStoreDevtools() — Enables Redux DevTools integration (logs up to 25 states).
logOnly: !isDevMode() — Prevents dispatching actions from DevTools in production.
provideEffects() — Registers side effects for async logic (API calls, etc.).

Bonus: Zone Optimization

provideZoneChangeDetection({ eventCoalescing: true })

eventCoalescing: true batches multiple synchronous DOM events to reduce unnecessary change detection cycles.
Results in better performance for interactive UIs (forms, scroll events, etc.).

Putting It All Together

This single file replaces what used to be spread across multiple NgModules, AppModules, and providers.

Here’s how it connects to your main.ts:

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { appConfig } from './app.config';

bootstrapApplication(AppComponent, appConfig)
  .catch(err => console.error(err));

And just like that — your Angular 19 standalone app is ready with routing, theming, Markdown rendering, Prism highlighting, and NgRx state management — all bootstrapped from a single file.

Best Practices & Recommendations

Avoid SecurityContext.NONE unless Markdown is from a trusted source.
Conditionally enable Store DevTools only in dev mode for smaller bundles.
Lazy-load PrismJS if bundle size matters.
Verify darkModeSelector — ensure it’s boolean or valid CSS selector per PrimeNG docs.
Split providers logically (UI, State, Markdown) for easier maintenance.

Summary

The app.config.ts in Angular 19 is the heart of your standalone app.
It centralizes:

Routing (provideRouter)
Animations (provideAnimationsAsync)
PrimeNG theming (providePrimeNG)
HTTP Client (provideHttpClient(withFetch))
Markdown rendering (provideMarkdown)
Syntax highlighting (PrismJS)
State management (NgRx)

This approach is cleaner, faster, and easier to maintain — fully embracing the new Angular standalone paradigm.

Final Thoughts

With this setup, you’re not just configuring an app — you’re modernizing your Angular architecture for the standalone era.

If you found this breakdown helpful, consider ❤️ reacting and bookmarking it on Dev.to — it helps others discover this guide too!

How to download a file in Angular using document API

Prateek Kr — Sun, 13 Oct 2024 15:08:39 +0000

Introduction

Downloading files is a common functionality in web applications, essential for exporting data, sharing documents, and more. In this guide, I’ll cover different techniques to download files in Angular, ensuring you have the flexibility to choose the best method for your specific needs.

Prerequisites

Before we dive in, ensure you have the following:

Angular CLI installed

A basic Angular project setup

A server endpoint that provides the file

Step 1: Import HTTPClientModule

First, ensure the HttpClientModule is imported in your AppModule:

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    HttpClientModule,
    // other imports
  ],
})
export class AppModule {}

Step 2: Create a Service for File Download

Create a service to handle the file download:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class FileService {
  constructor(private http: HttpClient) {}

  downloadFile(url: string): Observable<Blob> {
    return this.http.get(url, { responseType: 'blob' });
  }
}

Step 3: Use the Service in a Component

Use the service in your component to download the file:

import { Component } from '@angular/core';
import { FileService } from './file.service';

@Component({
  selector: 'app-file-download',
  template: `<button (click)="download()">Download File</button>`,
})
export class FileDownloadComponent {
  constructor(private fileService: FileService) {}

  download() {
    const url = 'https://example.com/file.pdf';
    this.fileService.downloadFile(url).subscribe((blob) => {
      const a = document.createElement('a');
      const objectUrl = URL.createObjectURL(blob);
      a.href = objectUrl;
      a.download = 'file.pdf';
      a.click();
      URL.revokeObjectURL(objectUrl);
    });
  }
}

Conclusion

Downloading files in Angular can be accomplished using various methods, each with its own benefits. Whether you prefer using Angular’s built-in HttpClient or leveraging external libraries, understanding the techniques will empower you to handle file downloads effectively.