Generative AI on Architecture Diagram Creation

In the contemporary digital landscape, this process involves creating a comprehensive solution that processes images from a specified webpage, converts the visual content into interpretable text or code using advanced large language models, and then transforms the generated text or code into an editable diagram by leveraging a diagram creation platform. The process involves web scraping, image processing, AI-powered text conversion, and diagram generation to provide a seamless workflow from raw web content to structured, editable diagrams.

Downloading all the Diagrams from a Google website link through Python code:

Web Scraping and Image Processing

The first stage involves scraping web pages to collect images. Here's an example of how to set up a web scraping service using Python:app.pyfrom fastapi import FastAPI

import uvicorn

from base import extract_image_urls_from_webpage, download_imagesapp = FastAPI()

@app.get("/download_images")

def download_images_api(webpage_url: str):

try:

if not webpage_url:

return {"error": "Please provide a webpage URL"}

image_urls = extract_image_urls_from_webpage(webpage_url)

download_images(image_urls)

return {"message": "Images downloaded successfully"}

except Exception as e:

return {"error": str(e)}

if __name__ == "__main__":

uvicorn.run(app, host="0.0.0.0", port=5999)



base.pyimport os

import requests

from bs4 import BeautifulSoup

from urllib.parse import urlparse, urljoin

def extract_image_urls_from_webpage(url):

try:

response = requests.get(url)

soup = BeautifulSoup(response.content,"html.parser")

base_url = response.url

image_urls = [urljoin(base_url, img.get("src")) for img in soup.find_all("img")]

print(image_urls)

return image_urls

except Exception as e:

return {"error": f"extract_image_urls_from_webpage API failed due to {repr(e)}"}

def download_images(image_urls, download_dir = os.path.join(os.path.join(os.environ['USERPROFILE']), 'Downloads', 'Images')):

if not os.path.exists(download_dir):

os.makedirs(download_dir)

for url in image_urls:

try:

response = requests.get(url)

filename = os.path.basename(urlparse(url).path)

file_path = os.path.join(download_dir, filename)

with open(file_path, "wb") as file:

file.write(response.content)

except Exception as e:

return {"error": f"download_images API failed due to {repr(e)}"}

Converting Diagram as a Text or Code based on instruction using LLM GPT-4 model:

1. Configuring Azure OpenAI API Client with Endpoint and Deployment Details

from openai import AzureOpenAI



api_base = '<your_azure_openai_endpoint>' # your endpoint should look like the following https://YOUR_RESOURCE_NAME.openai.azure.com/



api_key="<your_azure_openai_key>"

deployment_name = '<your_deployment_name>'

api_version = '2023-12-01-preview' # this might change in the future

client = AzureOpenAI(

api_key=api_key,

api_version=api_version,

base_url=f"{api_base}openai/deployments/{deployment_name}/extensions",

)

Provide the Instruction:

instruction = """Provide the instruction"""

Diagram to Text or Code conversion based on the instruction using GPT model

response = client.chat.completions.create(

model=deployment_name,

messages=[

{ "role": "system", "content": "You are a helpful assistant." },

{ "role": "user", "content": [

{

"type": "text",

"text": instruction

},

{

"type": "image_url",

"image_url": {

"url": "https://diagrams.mingrammer.com/img/web_service_diagram.png"

}

}

]

}

],

max_tokens=2000,

temperature=0,

top_p=1,

n=1)print(response.choices[0].message.content, "\n")

Tools for Converting Text or Code into Diagrams

Introduce the primary tools that facilitate the conversion of text or code into diagrams:Tool Free/Paid Editing Method Link DiagramGPTFree & PaidEdit through CodeDiagramGPTDiagramsFreeNot able to EditDiagramsGraphvizFreeEdit through CodeGraphvizDrawioFreeEditDrawioLucidFree & PaidEditLucidPlantUMLFreeEdit through CodePlantUMLMermaidFreeEdit through CodeMermaidIlographFreeEdit through CodeIlographTerrastructFree & PaidEdit through CodeTerrastructStructurizrPaidEdit through CodeStructurizrDiagrammingAIFree & PaidEdit through Code & textDiagrammingAIChatUMLFree & PaidEdit with codeChatUMLCreatelyPaidEditCreatelyMiroFree & PaidEditMiroThe described workflow integrates advanced technologies to transform web-scraped images into editable diagrams. It employs Python for web scraping, GPT-4 for text and code conversion, and various tools like DiagramGPT, Graphviz, and Miro for diagram creation. These tools vary in cost and editing capabilities, catering to diverse needs.Click the button below to continue to Part 2 and discover the secrets that top coders use for diagram creation.Continue to Part 2 →In that we will discuss a detailed exploration of their features and integration to help users select the most suitable option for their requirements.