ChatGPT最近支持了上传图片功能。在gpt4的发布会上我们看到支持上传图片生成网页代码，非常惊艳。

发布会上的图片生成代码

现在图片上传功能基本上都支持了，让我们来试一下！

编写SwiftUI代码

因为我最近写的最多的还是swiftui来写app，那么直接让他来写一个app就好了。在支持图片上传以前，我们需要大量的文字描述才能说明这个界面具体是什么样子，并且大多数情况下很容易遗漏一些细节。现在不需要了。你可以直接绘制出UI图，让GPT4生成你这个UI图对应的前端代码。

UI图

这张图片来源：前往查看

发给GPT看看吧

生成代码

生成效果：

生成的代码

虽然样式没有正确的表达出来，但是框架还是有了的。代码质量还是很不错。可以在视图的基础上进行修改。

生成的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
import SwiftUI

struct BookingView: View {
    @State private var tripType: TripType = .roundTrip
    @State private var fromDestination: String = "Tbilisi"
    @State private var toDestination: String = "Amsterdam"
    @State private var departureDate: Date = Date()
    @State private var returnDate: Date = Date().addingTimeInterval(60 * 60 * 24 * 8)
    
    var body: some View {
        VStack(alignment: .leading) {
            Text("Book Your Flight")
                .font(.largeTitle)
                .bold()
                .padding()
            
            HStack {
                TripTypeButton(tripType: .oneWay, selectedTripType: $tripType)
                TripTypeButton(tripType: .roundTrip, selectedTripType: $tripType)
                TripTypeButton(tripType: .multiCity, selectedTripType: $tripType)
            }
            
            TextField("From", text: $fromDestination)
                .padding()
                .background(Color.gray.opacity(0.2))
                .cornerRadius(8)
                .padding(.horizontal)
            
            TextField("To", text: $toDestination)
                .padding()
                .background(Color.gray.opacity(0.2))
                .cornerRadius(8)
                .padding(.horizontal)
            
            DatePicker("Departure", selection: $departureDate, displayedComponents: .date)
                .padding(.horizontal)
            
            DatePicker("Return", selection: $returnDate, displayedComponents: .date)
                .padding(.horizontal)
            
            HStack {
                Text("1 Adult • Business")
                    .padding()
                    .background(Color.gray.opacity(0.2))
                    .cornerRadius(8)
                
                Spacer()
                
                Image(systemName: "person.fill")
                    .padding()
            }
            .padding(.horizontal)
            
            Spacer()
            
            Button(action: {}) {
                Text("Search Flights")
                    .font(.headline)
                    .foregroundColor(.white)
                    .padding()
                    .frame(maxWidth: .infinity)
                    .background(Color.green)
                    .cornerRadius(8)
            }
            .padding()
        }
    }
}

enum TripType: String {
    case oneWay = "One-way"
    case roundTrip = "Round trip"
    case multiCity = "Multi-city"
}

struct TripTypeButton: View {
    var tripType: TripType
    @Binding var selectedTripType: TripType
    
    var body: some View {
        Button(action: {
            selectedTripType = tripType
        }) {
            Text(tripType.rawValue)
                .padding()
                .background(selectedTripType == tripType ? Color.black : Color.gray.opacity(0.2))
                .foregroundColor(selectedTripType == tripType ? .white : .black)
                .cornerRadius(8)
        }
    }
}

struct BookingView_Previews: PreviewProvider {
    static var previews: some View {
        BookingView()
    }
}

写一个网页试试看

找了一张原型图（手绘版）。

原型图

图片来源：前往查看

生成结果

生成的样式

从结果看来确实不是很理想，似乎GPT对于样式和摆放位置的识别能力不是很好。看来gpt的图片直接生成网页只适合作为一个项目的开始，而并能美观的完成一个项目（符合设计稿）。

要是能从切图到项目一条龙就好了😄。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Foundation Times</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        header {
            border: 1px solid black;
            padding: 10px;
            text-align: center;
        }
        .main-content {
            display: flex;
            margin-top: 20px;
        }
        .main-content > div {
            flex: 1;
            border: 1px solid black;
            padding: 10px;
            margin: 5px;
        }
        .read-more {
            color: blue;
            cursor: pointer;
        }
        footer {
            margin-top: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <header>
        <h1>The Foundation Times</h1>
        <p>December 1, 2011</p>
    </header>

    <div class="main-content">
        <div>
            <img src="#" alt="Placeholder" style="width: 100%;">
            <p class="read-more">Read More</p>
        </div>
        <div>
            <img src="#" alt="Placeholder" style="width: 100%;">
            <p>Some content here...</p>
        </div>
        <div>
            <img src="#" alt="Placeholder" style="width: 100%;">
            <p>Some content here...</p>
        </div>
        <div>
            <img src="#" alt="Placeholder" style="width: 100%;">
            <p>Some content here...</p>
        </div>
        <div>
            <img src="#" alt="Placeholder" style="width: 100%;">
            <p>Some content here...</p>
        </div>
    </div>

    <footer>
        <p>&copy; 2011 The Foundation Times</p>
    </footer>
</body>
</html>

知乎网站生成

我担心是我给的原型图太抽象了，所以截了一张知乎的图试一下。

图片：

知乎

生成效果：

生成代码

基本上生成的完全不可用了，看来想要实现图转代码还有很长一段路要走。

生成代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>论坛页面</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <!-- Top navigation elements -->
    </header>
    
    <main>
        <section class="post">
            <!-- First post content -->
            <img src="path_to_image1.jpg" alt="图片描述1">
            <p>文章内容1...</p>
        </section>
        
        <section class="post">
            <!-- Second post content -->
            <p>文章内容2...</p>
        </section>
        
        <section class="post">
            <!-- Third post content -->
            <img src="path_to_face_image.jpg" alt="人物图片">
            <p>文章内容3...</p>
        </section>
        
        <section class="post">
            <!-- Fourth post content -->
            <p>文章内容4...</p>
        </section>
    </main>
    
    <aside>
        <!-- Sidebar content -->
    </aside>
</body>
</html>

GPT的代码编写

我们在询问gpt的时候文件可能比较多，而输入框只适合传输一个文件之类的，比较麻烦。GPT4还支持代码上传功能，可以将项目打包成一个zip文件，然后根据项目进行提问。（这个功能很早就上了，这里只是单独提一下）

这里我上传了一个demo（由@listener在群里询问的问题并提供demo）

解压文件

我们可以看到gpt进行文件的解压，然后分析。并且可以进行交流。

代码

这个对于多文件项目的适配还是很不错的。

开发总结

在编写代码方面，GPT对于图片识别成代码的能力非常有限，对于样式只能简单识别一些基础颜色和位置。样式稍微复杂一些就无从下手了。

对于图片的理解：数牙签

除了代码方面的问题，我们还可以问一些生活方向的问题。

例如我们买的牙签，奸商一般都会少给一些，我们用GPT看看能不能数数。

牙签盒

牙签数量

给出的数字我估算了一下也非常准确。因为确实存在角度问题，所以这个准确度已经非常不错了。

验证码

那我们看看现在的验证码能不能突破GPT4呢？简单的文字验证码非常的容易。

简单的验证码被轻易获取

这种图片的似乎就不行了。

验证码

可能有一些图片包含了一些对抗AI的信息，让AI出现混淆。

让我们试一下常见的腾讯云验证码：

验证码

GPT4准确的反馈了应该点击哪张照片。非常不错。

结果

总结

目前AI对于图片的理解大致在一个初级阶段，类似于“siri”相对于GPT而言的程度，目前还不属于特别智能的程度。看来还有一段路要走，不过相信很快就能够提升起来能力。

GPT4账号合租可以到银河录像局，使用优惠码Heo即可获得5%的购买折扣。