ChatGPT脱颖而出!写出比你更好的SwiftUI代码
📝目录
- 介绍
- AI的局限性
- 人类的优势
- 开始挑战:iOS时钟图标
- 机器生成的代码
- 人类优化的代码
- 添加功能:秒针和中心圆环
- 优化代码:修复SwiftUI的bug
- 性能优化:调整绘制频率
- 添加细节:绘制小时数字
- 结论
📝介绍
你好,我是Paul,今天的视频主题是《人 vs 机:GPT是否能比你写出更好的Swift UI代码》。现如今,使用人工智能来解决问题已经非常常见。然而,过去人工智能的一些问题曾经引起广泛争议。例如,IBM的Watson AI在给癌症患者提供医疗建议时误导了患者,亚马逊的招聘AI歧视女性,微软的AI甚至变成了纳粹分子。然而,最近由伊隆·马斯克资助的开放AI采取了一种新的方法,并取得了巨大的成功。他们的Chat GPT可用于自动生成代码并回答用户的问题。
在这个视频中,我们将尝试使用Chat GPT生成一个iOS时钟图标的代码,并比较这个代码与由人类编写的优化代码之间的差异。我们将看到Chat GPT自动生成的代码有哪些优点和局限性,并探讨人类的优势如何应用于代码优化。让我们开始挑战吧!
📝AI的局限性
人工智能无疑在许多领域取得了巨大的成功,但它也有一些局限性。尽管Chat GPT可以生成大量的代码,并表现出与人类相似的思维方式,但它仍然存在一些问题。
首先,Chat GPT无法理解上下文和问题的背景。它只能根据先前的回答生成新的回答,而在某些情况下,这可能会导致它给出与问题无关或错误的答案。
其次,Chat GPT生成的代码在语法和逻辑方面可能存在问题。尽管它可以生成可编译的代码,但由于缺乏人类创造力和问题解决能力,它的代码可能不够优雅和高效。
最后,Chat GPT可能无法处理复杂的任务和具有深层次逻辑的代码。它更适合用于生成简单和基础的代码,而对于涉及复杂算法和逻辑的任务,人类编写的优化代码通常更可靠。
因此,在使用机器生成的代码时,我们必须保持谨慎,并进行适当的优化和测试,以确保代码的质量和性能。
📝人类的优势
虽然人工智能在许多方面表现出色,但人类仍然具有一些优势。人类可以运用创造力和直觉来优化代码,并将问题与解决方案的上下文联系起来。人类还可以深入理解代码的内部逻辑和性能优化,并在开发过程中进行测试和调试。
另外,人类还能够适应变化和外部需求,比如用户界面的设计和用户体验。这种灵活性使得人类能够通过不断优化代码,使其更加适应实际需求,并提供更好的用户体验。
最重要的是,人类可以对代码进行批判性思考,并提出改进的建议。他们可以考虑代码的可维护性、可扩展性和安全性,并确保代码符合最佳实践和标准。
因此,在开发过程中,我们不能完全依赖于机器生成的代码,而是需要结合人类的优势进行代码优化和改进。
📝开始挑战:iOS时钟图标
我们的挑战是生成一个iOS时钟图标的代码。首先,让Chat GPT尝试生成代码,并将其与人类编写的优化代码进行比较。让我们看看Chat GPT生成的代码是什么样的。
// Chat GPT生成的代码
struct AnalogClockView: View {
@State private var time = Time()
var body: some View {
VStack {
ZStack {
Circle()
.strokeBorder(Color.primary, lineWidth: 10)
ForEach(0..<12) { hour in
VStack {
Text("\(hour)")
.rotationEffect(.degrees(Double(hour) * 30))
.offset(y: -150)
}
.rotationEffect(.degrees(-Double(time.hour) * 30))
.rotation3DEffect(.degrees(Double(time.minute) * 6), axis: (x: 0, y: 0, z: 1))
}
Rectangle()
.frame(width: 5, height: 150)
.offset(y: -70)
.rotationEffect(.degrees(Double(time.second) * 6))
}
}
.onAppear {
Timer.scheduledTimer(withTimeInterval: 1, repeats: true) { _ in
time = Time()
}
}
}
}
Chat GPT生成的代码大致上实现了我们的需求,但在可读性、代码风格和优化方面还有改进的空间。
📝机器生成的代码
我们得出结论,Chat GPT生成的代码基本上是可以工作的,但还需要进行进一步的优化和修改。我们将对代码进行改进,以提高代码的质量、可维护性和性能。
首先,让我们改进一下代码的可读性。代码中的变量和函数名称应该更具描述性,以便其他人能够轻松理解代码的功能。另外,我们还可以使用注释和空行来提高代码的可读性。
其次,我们可以通过函数和参数来将代码分割成更小的模块。这样做可以提高代码的复用性和可测试性,并使代码更易于理解和维护。
另外,我们还可以使用更好的代码风格和最佳实践来改进代码。这包括正确的缩进、注释的使用、清晰的命名约定等。
最后,我们应该进行性能优化,以确保代码运行快速且效率高。这可能包括减少不必要的计算、避免重复的操作和使用合适的数据结构等。
通过对代码进行这些改进,我们可以使其更加易于理解、优化和维护,从而提高代码的质量和可持续性。
📝人类优化的代码
经过对Chat GPT生成的代码的分析和改进,我们得到了以下优化的代码:
// 人类优化的代码
struct AnalogClockView: View {
@State private var currentTime = Time()
var body: some View {
VStack {
ZStack {
Circle()
.strokeBorder(Color.primary, lineWidth: 10)
drawHourNumbers()
drawHourHand()
drawMinuteHand()
drawSecondHand()
}
}
.onAppear {
Timer.scheduledTimer(withTimeInterval: 1, repeats: true) { _ in
currentTime = Time()
}
}
}
private func drawHourNumbers() -> some View {
let radius = min(geometry.size.width, geometry.size.height) / 2
let textOffset = radius * 0.75
let textSize = radius * 0.25
return GeometryReader { geometry in
ForEach(1...12, id: \.self) { hour in
let angle = Double(hour) * (2 * .pi) / 12 - (2 * .pi) / 4
let x = textOffset * cos(angle)
let y = textOffset * sin(angle)
Text("\(hour)")
.font(.system(size: textSize))
.position(x: radius + x, y: radius + y)
}
}
}
private func drawHourHand() -> some View {
let radius = min(geometry.size.width, geometry.size.height) / 2
let hourHandLength = radius * 0.5
let angle = Double(currentTime.hour) * (2 * .pi) / 12
return Path { path in
path.move(to: CGPoint(x: radius, y: radius))
path.addLine(to: CGPoint(
x: radius + hourHandLength * sin(angle),
y: radius - hourHandLength * cos(angle)
))
}
.stroke(Color.primary, style: StrokeStyle(lineWidth: 8, lineCap: .round))
}
private func drawMinuteHand() -> some View {
let radius = min(geometry.size.width, geometry.size.height) / 2
let minuteHandLength = radius * 0.6
let angle = Double(currentTime.minute) * (2 * .pi) / 60
return Path { path in
path.move(to: CGPoint(x: radius, y: radius))
path.addLine(to: CGPoint(
x: radius + minuteHandLength * sin(angle),
y: radius - minuteHandLength * cos(angle)
))
}
.stroke(Color.primary, style: StrokeStyle(lineWidth: 4, lineCap: .round))
}
private func drawSecondHand() -> some View {
let radius = min(geometry.size.width, geometry.size.height) / 2
let secondHandLength = radius * 0.7
let angle = Double(currentTime.second) * (2 * .pi) / 60
return Path { path in
path.move(to: CGPoint(x: radius, y: radius))
path.addLine(to: CGPoint(
x: radius + secondHandLength * sin(angle),
y: radius - secondHandLength * cos(angle)
))
}
.stroke(Color.red, style: StrokeStyle(lineWidth: 2, lineCap: .round))
}
}
在优化的代码中,我们引入了更具描述性的变量名和函数名,并使用了合适的注释和空行来增强代码的可读性和可维护性。我们还采用了更好的代码风格和最佳实践,使代码更加规范和易于理解。
此外,我们将绘制小时数字、小时指针、分钟指针和秒针的代码封装到了单独的私有函数中,以提高代码的模块化和复用性。这使得代码更易于理解,并使其可以逐步改进和优化。
最后,我们对绘制代码进行了性能优化,减少了不必要的计算和重复操作,并使用合适的数据结构来提高代码的性能。这确保了时钟图标在各种设备上运行流畅和高效。
通过这些优化,我们的代码变得更加清晰、优雅和高效,同时保持了与原始需求的一致性。
📝添加功能:秒针和中心圆环
在进行进一步的优化之前,让我们为时钟图标添加一些额外的功能。我们将添加秒针和一个中心圆环,以使时钟图标更加完整和精细。
首先,我们需要在绘制代码中添加绘制秒针的函数。该函数的实现与绘制小时指针和分钟指针的代码非常相似,只是需要根据当前的秒数计算出正确的角度。
其次,我们添加一个中心圆环,这个圆环将把时钟图标的所有元素放在一起,并提供统一的视觉风格。我们可以使用Circle
视图并将其放置在时钟图标的中心位置。
经过这些改进,我们的时钟图标变得更加完整和精细,具有秒针和中心圆环,同时保持了代码的清晰和可读性。
📝优化代码:修复SwiftUI的bug
在对Chat GPT生成的代码进行优化时,我们发现SwiftUI存在一个bug,会导致在某些情况下绘制有误。这个bug在iOS 16.2及以前的版本中存在,但在iOS 16.3以后的版本中已修复。
具体而言,当我们在代码中使用精确的π值(3.14159...)时,会触发SwiftUI的bug,导致绘制出错。为了解决这个问题,我们可以稍微偏离π值,使用一个非常接近π的值作为角度计算。
通过这样的优化,我们修复了SwiftUI中的bug,并确保时钟图标在所有版本的iOS上绘制正确。
📝性能优化:调整绘制频率
在优化时钟图标的性能时,我们可以考虑减少绘制的频率,以降低CPU和GPU的负载。这对于节约设备的电池寿命和提高应用的响应速度非常重要。
默认情况下,我们使用Timer
来每秒更新一次时钟图标的时间。然而,这可能会导致绘制120次的秒针移动,这对于简单的时钟图标来说是不必要的。
为了优化性能,我们可以使用更低的更新频率,并将其调整为设备的刷新频率。例如,对于支持120FPS的设备,我们可以将更新频率调整为每1/120秒,这样可以减轻CPU和GPU的负担,并节省电池寿命。
通过调整绘制频率,我们使时钟图标更加高效和流畅,并提供更好的用户体验。
📝添加细节:绘制小时数字
对于时钟图标来说,绘制小时数字是一个重要的细节。虽然Chat GPT生成的代码已经绘制了小时数字,但是我们可以进一步优化它的位置和样式,使其看起来更加美观和准确。
在绘制小时数字的代码中,我们首先确定文本的大小和位置。然后,我们使用几何读取器来根据当前的小时数计算出正确的位置,并在指定位置绘制文本。
通过这样的优化,我们的时钟图标具有更好的小时数字绘制,使其更加美观和准确。
📝结论
总之,尽管Chat GPT可以帮助我们生成代码并回答问题,但人类仍然具有优势,并可以通过优化和改进代码提高其质量和性能。
在本视频中,我们挑战了Chat GPT生成了一个iOS时钟图标的代码,并使用人类编写的优化代码进行了比较。我们看到了Chat GPT生成的代码的优点和局限性,并探讨了人类的优势如何应用于代码优化中。
通过改进可读性、优化性能、修复bug以及添加细节,我们获得了一个更好的、可持续的时钟图标的代码。
无论使用Chat GPT还是人类编写的代码,我们都应该保持谨慎,并进行适当的测试和优化,以确保代码的质量和性能。
谢谢观看本视频!如果您有任何问题或想法,请在下方留言。