I'm going to teach you how to implement image playground with apple intelligence into our app and the example we'll use is if our app has a profile picture and we want to give the user the option to add an AI version of it but that's just a specific example after this video you'll know how to use image playground so you can get AI image generation for whatever you need into your app today's video is sponsored by Squarespace I want to keep this video focused on image playground so I do have a small starter project which will be linked in the description if you want to follow along and it's actually a continuation of my photos picker video as you can see here in the code we're using a photos picker right when I tap on the profile image we get our photos picker so if you want the explanation the Deep dive into that definitely watch that video I'll link to that in the description but for this video I'll just give a quick overview of what's going on so as you just saw when I tap on the profile image it pulls up the photos picker right photos picker has a selection which is a state property up here on our content view so whenever we pick the photo that we pick right we'll click on these bushes the photos picker item gets set there but we're also monitoring on change of when that photos picker item changes down here because we don't just get an image ready to use we actually get data right from the photos picker item load transferable data so we have to take that data we create a UI image from it and then from that UI image we create a swift UI image and that's what we have up here with our Avatar image and that is a state property on the content view so whenever that changes it will update our Avatar image right here which you just saw is now the flowers and the way photos Pickers works you see here's photos picker and then it has the closure here this is whatever you want to trigger the photos picker sheet and for us we just have our Avatar image or if Avatar image is nil what you saw before we just have the SF symbol person. circle. fill so again we select the photo convert the data to a swift UI image update the Avatar image that in turn updates the UI so now what we're going to add once they have an avatar image is the ability to create a fun AI version of that image where the user can type in a prompt and the AI will generate that and we'll use it in our app all right now that that's out of the way let's talk about image Playground now there are some caveats here because Apple intelligence image playground brand new actually introduced in iOS 18.2 I don't know the API is required the sheet that we're going to use requires iOS 18.1 but I don't think it actually came out until 18.2 so in your project if you're not using my starter project make sure your minimum deployment Target is at least 18.1 that is unless you want to make your app backwards compatible if that is the case use the available keyword I did a video all about that I'll put the link to that in the description as well we're not going to mess with that for this video and also for this to work it has to be on a device that supports Apple intelligence you can see the list here pretty modern recent devices so now of course here we are early 2025 iOS 18 is still relatively new this is pretty restrictive at the moment but who knows you might be watching this a year from now two years from now you know as people upgrade their devices as iOS you know 19 iOS 20 comes out this won't be as restrictive cuz remember Apple intelligence image playground all brand new all right let's get to some code I've rambled long enough so back to the content View the first thing we want to do is import image Playground now there's a caveat we have to cover we have to check if our device supports Apple intelligence because you can have a device that's on iOS 18.3 but it might not be one of these newer devices that actually supports Apple intelligence well luckily they gave us an environment property for that at environment and then open close parentheses sl. supports image playground we'll name that supports image playground so this is a Boolean that we can check if our device exports image playground let's go ahead and do some stuff so what we're going to do is we're going to have a text field where the user can type in their prompt and then we're going to have a button that says generate the image but that's only going to show up if the device supports image playground if not they're just going to get the behavior that we have here where we can pull up our photo library and select a profile image right that's what all the older devices will see if you have a newer device that supports Apple intelligence you'll get our fun little AI button so let's Implement that UI here right you can see I have an overall v stack and then I have an H stack that is the photos picker right my name iOS Developer for like ulating a profile page right so we don't want to put this in the H stack we want to put this in the overall v stack which would be down here so I can say if supports image playground right so for on a device that has this then I can show our text field and we don't want that autocomplete we just want title and text so the title which will also be the placeholder we'll say enter Avatar description and this can be you know whatever you want it to say now the text has to bind to a string uh we're going to call this here in the State Properties at State private VAR image generation concept now to put this in AI terms you might understand sorry that's just going to equal an empty string right now this is basically the prompt in the image playground sheet parameters which you'll see in a second they call it a concept so I'm keeping the name consistent but we'll come back to this so in this text field the user can type in whatever they want and is going to go up to the image generation concept string and that's what we're going to use to pass up to our image playground sheet you know as our prompt the user enters and then now let's add some uh just some basic styling here we'll say font. tile 3. bold and we'll give it some padding to make it look nice you'll see the look that I'm going for and then we'll do a background. quary and then in we wct with a corner radius we'll say 16 style. continuous and you'll see the look I'm going for once you see the UI in a second so that is our text field that our user is going to enter the prompt for example I can have my avatar image up there the prompt could be sunglasses on a beach right and it'll put my face with sunglasses on a beach you'll see that in action in a second so now that we have the text field we want to have our button for the uh generate AI so it'll be a button with a title key and system image so the title key will be generate image and then the system image will be Sparkles this is the SF symbol that is pretty standard with AI features and then now what this button is going to do it's going to trigger the image playground sheet now the image playground sheet just like any other sheet or full screen cover right you'll do is showing image playground equals true and it will toggle that sheet so we need a state variable for that state private bar is showing image playground okay that is false so now that we have that we'll say is showing image playground equals true and let's add some basic styling to our button just to get it looking good say padding say. foreground styles. mint say. font weight is bold and again background except this time we're going to have a couple modifiers on it so we'll open up the uh parenthesis and do a rounded rectangle Corner radius 16 we'll match what we have there style do continuous again just to be consistent with our text field and this will have a stroke because we are doing an outline button here and of mint line width of two do a quick control I to line those up all right we should be good to go so that is our basic UI and again our text field and our button is only showing up if our device supports image playground and again just to remind you we did set our project minimum to iOS 18.2 so back to our content view we don't have to mess with like if hashtag available iOS 18.1 and above but if you do want backwards compatibility this is where you would do that kind of stuff okay so that was the UI build in order to trigger our image playground sheet so now we need to trigger that sheet and again if you're familiar with swift UI full screen cover sheets it is another one of those so below our onchange modifier here I'm going to do do image playground sheet and again if you don't see this in the autocomplete it's because you haven't imported image playground just a heads up on that I I might have done that so image playground you see the parameters we get here there's a couple different options so is presented again we're just going to flip is showing playground to true we got that there's concept and Concepts so again think of this as prompt I don't know why Apple calls it concept but this is where you're going to pass in sunglasses on the beach and you can pass in more than one for our app we're just going to pass in one but you can pass up an array if you like Source image you can see it's in metallic so it is optional so we're going to pass up our source image as our Avatar which is going to be my face or whatever face the user has on there if you pass up a source image of nil for example when you type sunglasses on the beach if you pass up a source image it'll put sunglasses on a beach on that Source image if you don't pass up a source image you'll just see glasses like on a beach like if there was no Source image and then on completion is what happens you see we get back on completion here we get a URL so this is going to be the URL that are images at so we are going to have to reach into that URL take that data convert that data into an image and then set our Avatar image to that so there's a little bit of work there because we just get a URL not an image and then on cancellation this will let you know when the user cancels it so you can clear out anything you need to do on cancellation in our example we're going to take this image generation concept whatever they typed into the text field we're going to clear that out make that nothing so let us actually implement this so I do want one concept A source image on completion on cancellation so if you hold option you get all the parameters here so is presented again we said we're going to do is showing image playground we just set that up I'm going to put these on separate lines here I always forget the key keyboard shortcut I think it's like contrl M or something like that someone's going to yell at me in the comments that's cool though all right here we turn there so concept again this is the string that we typed in think prompt so we're going to say this is the image generation concept and again that is whatever the user typed in we're going to pass that up now these are optional so if you don't pass up a source image it's n again you're just not going to apply anything to a source image if you don't pass up the image generation concept you'll see the user has the ability to type and add more Concepts in the playground sheet you'll see that in a second so Source image we're going to say Avatar image so it's either going to be nil if we haven't set one yet or it will be you know whatever image we set as our profile so you see on completion we do get the URL so we are going to need to reach into that URL get that data take the data and convert it to a UI image because we can't go data to Swift UI image I might be wrong about that I don't think you can but then we'll go from UI image to Swift UI image and then set the Avatar URL to that and then on cancellation like I said we're just going to do image generation concept equals empty string just reset that text field basically so on completion when we have successful we get the URL back let's do that code real quick if let data equals try and I'm going to put a question mark this is an optional and the autocomplete actually worked data contents of URL right so we have the URL that's set the data cool we have the data and I think we're going to get a great auto complete here right if let image equals UI image you know what I'm thinking because I've done this rehearsal before and practice this I wonder if xcode knows that and why it gave me the exact auto complete I wanted because I've done it before on xcode interesting but anyway this is the exact code I want so I'm going to tab over and get that right so we're going to create a UI image from this data that we got but again this can return nil so I need to unwrap that so I'm put this on a different line it might be confusing I like to put stuff on one line some people might not like that but anyway so if I have a good image from the UI image that I created from the data go ahead and set Avatar image which is what we have up here the state property which is the optional Swift UI image uh equal to an image and we're going to initialize that from a UI image right there and again when the Avatar image is updated because it's here in Swift UI the way Swift UI works it's reactive our Avatar image will update so the code is in place I'm going to actually run it on my device actually let me run on the simulator just to show you we'll go to iPhone 16 Pro here iOS 18.2 Run It spoilers you're not going to see it and the reason being is because the xcode simulator at least as of now in January 2025 xcode 16.2 the simulator does not support apple intelligence or image playground so you're going to see what happens when this Boolean right here this if supports image playground when that fires off or when it's false and as you can see here it is false so I don't get my text field or my button right so this is what would happen on an older device that doesn't support the image playground there's the profile picture I was like messing with you'll see that in a second so cancel okay so simulator doesn't cut it so what I have to do is actually run it on my iPhone 15 Pro all right so here it is running on my device I put the QuickTime screen recording right up on my screen so you can see it in real time so right now Avatar image is nil you see the background that means we don't have a source image before I put a source image in there I'm going to show you what happens if you don't have a source image so enter the Avatar description again just you can do whatever sunglasses on the beach hit create image or generate image here comes the image playground there it is you might be familiar with this you might have seen this uh using apple as well but now you can see I'm getting sunglasses on the beach like I said there's no Source image so that's all we're getting sunglasses on the beach now you see here in the lower left describe an image This Is Us adding another concept or a prompt right we only passed up one remember how I said you can pass up an array so you can pass up multiples and then of course you can manipulate it here just with typical image playground stuff if you like and then you can swipe to get other ones so when I hit done this is what's going to show up as my profile picture sunglasses on the beach there you go you see it as my profile picture Sean Allen sunglasses on the beach pretty cool cool right so that is without a source image so now I'm going to tap my avatar image it's going to pull up my photos picker I'm going to blur out my camera roll all right so now I got my avatar image on there I still have my sunglasses on the beach maybe when you hit done on success you could reset that too but hey it'll save me some typing in this video but now I do have a source image right now so now when I do sunglasses on the beach and hit generate image you're going to see me who knows what AI is going to generate but you're going to see me on the beach with some sunglasses and you can see the source image right oh boy you can see the source image right there and our concept that we pass up right so if you passed up an array of Concepts you would see multiples on there so let's swipe through and see what we got here all right that one's not too bad I like that one that one looks good there we go I don't know that one's kind of creepy but you can see it's still generating images as we keep going all right we're going to go back to this one this is what I want uh for my profile so now when I hit done boom now I got an AI version of my profile right in my app I think that's pretty cool that you can pretty easily add this AI image generation right into your app and like I said in the beginning Apple intelligence image generation this is all brand new I expect Apple to constantly improve and iterate on this so if you are watching this you know one year 2 years 3 years from now you know maybe this is like a lot better but even right now I think that's that's pretty cool and if you're here learning about the latest and greatest with apple intelligence in implementing AI image generation into your apps I know you're building awesome apps and I always recommend having a portfolio website to show your work so people can find you learn about you see what you can do and that brings me to today's sponsor Squarespace Squarespace is an all- inone platform to help you get that iOS Developer portfolio up and running very quickly now I know we're developers we can build the website oursel but we're also iOS developers and I would argue There's an opportunity cost of your time now do you want to spend your time learning about web development responsive design all the different browsers or do you want to spend your time building apps so that's why I always recommend letting Squarespace take that off your plate to build your iOS Developer portfolio they have all kinds of beautiful themes and templates to get you started and you can use their next Generation website editor with the fluid engine to just really unlock all the creativity in the world you can even use Squarespace blueprint and Squarespace AI to help you figure out what to write on your website cuz it's always the hardest part like I don't even know what to say here throw it into squarespace's Ai and they'll help you out they handle all the SEO and analytics for you again Squarespace handling your website just takes so much off your plate so when you're ready to get started go to squarespace.com and when you're ready to launch go to squarespace.com Shan Allen to get 10% off your first purchase of a website or domain