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.py
from 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.py
import 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 |
DiagramGPT | Free & Paid | Edit through Code | DiagramGPT |
Diagrams | Free | Not able to Edit | Diagrams |
Graphviz | Free | Edit through Code | Graphviz |
Drawio | Free | Edit | Drawio |
Lucid | Free & Paid | Edit | Lucid |
PlantUML | Free | Edit through Code | PlantUML |
Mermaid | Free | Edit through Code | Mermaid |
Ilograph | Free | Edit through Code | Ilograph |
Terrastruct | Free & Paid | Edit through Code | Terrastruct |
Structurizr | Paid | Edit through Code | Structurizr |
DiagrammingAI | Free & Paid | Edit through Code & text | DiagrammingAI |
ChatUML | Free & Paid | Edit with code | ChatUML |
Creately | Paid | Edit | Creately |
Miro | Free & Paid | Edit | Miro |
The 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.
In that we will discuss a detailed exploration of their features and integration to help users select the most suitable option for their requirements.