GPT-4 Turbo with Vision を使用して、WebページのスクリーンショットからNext.js × Tailwind CSSのコードを生成してみた

1pip install python-dotenv openai

1.env
2AZURE_OPENAI_ENDPOINT=
3AZURE_OPENAI_API_KEY=
4AZURE_OPENAI_API_VERSION=

1import os
2from dotenv import load_dotenv
3
4load_dotenv()
5from openai import AzureOpenAI
6import base64
7from mimetypes import guess_type
8
9api_base = os.getenv("AZURE_OPENAI_ENDPOINT")
10api_key = os.getenv("AZURE_OPENAI_API_KEY")
11deployment_name = "gpt-4-vision"
12api_version = os.getenv("AZURE_OPENAI_API_VERSION")
13
14client = AzureOpenAI(
15    api_key=api_key,
16    api_version=api_version,
17    base_url=f"{api_base}/openai/deployments/{deployment_name}",
18)
19
20def local_image_to_data_url(image_path):
21    mime_type, _ = guess_type(image_path)
22    if mime_type is None:
23        mime_type = "application/octet-stream"
24
25    with open(image_path, "rb") as image_file:
26        base64_encoded_data = base64.b64encode(image_file.read()).decode("utf-8")
27
28    return f"data:{mime_type};base64,{base64_encoded_data}"
29
30image_path = "./webpage.png"
31
32response = client.chat.completions.create(
33    model="gpt-4",
34    messages=[
35        {
36            "role": "system",
37            "content": "You are a professional ront-end engineer who is proficient in Next.js (TypeScript)/Tailwind CSS.",
38        },
39        {
40            "role": "user",
41            "content": [
42                {
43                    "type": "text",
44                    "text": """
45# Task
46                        You will receive a "screenshot of a reference web page" from a "user" and build a single page application using Next.js (TypeScript) and Tailwind CSS.
47
48# Constraints
49                            - Must have the same look and feel as the "screenshot of a reference web page"
50                            - Exactly reproduce the style of the background color, text color, font size, font family, padding, margin, border, etc.
51                            - Use the exact text from the screenshot
52                            - Accurately reproduce the alignment of elements and line breaks in the screenshot
53                            - Provide complete code, without omitting any code content
54                            - Provide only the content of the code, without including "```", "```tsx", or a description of the code at the beginning or end
55                        
56                        screenshot of a reference web page：
57                    """,
58                },
59                {
60                    "type": "image_url",
61                    "image_url": {"url": local_image_to_data_url(image_path)},
62                },
63            ],
64        },
65    ],
66    temperature=0,
67    max_tokens=2000,
68)
69
70print(response.choices[0].message.content)

1import type { NextPage } from 'next';
2import Head from 'next/head';
3
4const Home: NextPage = () => {
5  return (
6    
7      
8        Let's Build Together
9        
10      
11
12      
13        
14          Let's Build Together
15        
16        
17          Preline UI is an open-source set of prebuilt UI components, ready-to-use examples and
18          
19
20          Figma design system based on the utility-first Tailwind CSS framework.
21        
22        
23          
24            Get started
25          
26          
27            $ npm i preline
28          
29        
30        
31          Package Manager: npm /{' '}
32          
33            Installation Guide
34          
35        
36      
37    
38  );
39};
40
41export default Home;
42
43/* Tailwind CSS */
44@tailwind base;
45@tailwind components;
46@tailwind utilities;
47
48@layer components {
49  /* Custom styles can be added here */
50}