Categories
AI SwiftUI

ChatGPT SwiftUI Christmas Tree 2023

Revisiting last year’s challenge, let’s see how this year goes with GPT-4.

I used the same prompt from 2022:

Draw a Christmas tree using SwiftUI

Interestingly this time it included the Triangle type and it was almost line-for-line the exact one I substituted in last year.

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack {
            // Background
            Color.white.edgesIgnoringSafeArea(.all)

            // Christmas Tree
            VStack {
                ForEach((1...5).reversed(), id: \.self) { i in
                    TreeLayer(width: CGFloat(i) * 60)
                }
                Rectangle()
                    .frame(width: 40, height: 50)
                    .foregroundColor(.brown)
            }
        }
    }
}

struct TreeLayer: View {
    var width: CGFloat

    var body: some View {
        ZStack {
            Triangle()
                .fill(Color.green)
                .frame(width: width, height: width * 0.75)
            // Add decorations here
        }
    }
}

struct Triangle: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()
        path.move(to: CGPoint(x: rect.midX, y: rect.minY))
        path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY))
        path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
        path.closeSubpath()
        return path
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

And here’s the output for 2022 and 2023! 🎄😀

Categories
AI Fun Projects

Do you hear what I hear?

Thanks to Whisper and this awesome port, the tree is responding to spoken words. 🗣🎄

Since the tree itself only has a low-powered MCU, we need another machine to act as a listener.

The architecture is:

  1. A machine in my office runs the Whisper model and listens for words.
  2. If certain keywords are found it finds a corresponding command to run (e.g. do a theater chase sequence in a green color).
  3. It sends that command to the tree over the network.

For now I’m running it from iOS and macOS, so I wrote the current implementation in Swift. The code is currently still in “hack” status, but working well!

Now it’s time to test it when talking to coworkers at Automattic.

Categories
AI SwiftUI

Can ChatGPT draw a Christmas tree in SwiftUI?

Here’s the prompt I gave ChatGPT:

Draw a Christmas tree using SwiftUI

Here’s the code I got:

struct ChristmasTree: View {
    var body: some View {
        ZStack {
            // draw the tree trunk
            Rectangle()
                .fill(Color.brown)
                .frame(width: 20, height: 100)

            // draw the tree branches
            ForEach(0..<5) { i in
                HStack(spacing: 5) {
                    ForEach(0..<5-i) { j in
                        Triangle()
                            .fill(Color.green)
                            .frame(width: 10, height: 10)
                    }
                }
                .offset(x: 0, y: -10 * CGFloat(i))
            }

            // draw the star on top of the tree
            Circle()
                .fill(Color.yellow)
                .frame(width: 10, height: 10)
                .offset(x: 0, y: -50)
        }
    }
}

The only major issue syntax-wise is that Triangle() isn’t defined – where did it get that?

A quick visit to Hacking with Swift had this nice snippet, which I dropped in.

struct Triangle: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()

        path.move(to: CGPoint(x: rect.midX, y: rect.minY))
        path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY))
        path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
        path.addLine(to: CGPoint(x: rect.midX, y: rect.minY))

        return path
    }
}

Now we can compile and…. tada!

A Christmas tree in SwiftUI drawn by ChatGPT

Not great, but darn impressive! 🎄🤯