[요약] ChatGPT API 사용해서 GPT로 코딩없이 AI앱 만들기 :: with AI

> English Summary

> English Full Text

 

[ 요약 ]

이번 영상에서는 Microsoft의 AI 코드헬퍼를 활용하여 간단한 웹 앱을 만드는 과정을 다룬다.
이 앱은 입력한 묘사에 해당하는 색깔을 추천해주는 기능을 가진 것이다.
사용된 도구는 AI 코드헬퍼(Visual Studio의 익스텐션)와 OpenAI의 GPT API이며, 이들을 활용하여 입력된 문장을 가지고 색깔 코드를 추천한다.
코드에 포함된 GPT 함수는 입력된 문장을 API의 인자로 넘겨주고 색깔 추천 결과를 받아오는 역할을 한다.
이 함수는 인프텍스트와 프롬프트 엔지니어링을 사용하여 요청하며, 퓨샷 러닝을 적용하여 대화 내용을 인식한다.
주요 기능은 입력 박스와 버튼을 사용하여 사용자가 원하는 문장을 입력하면 색깔 코드를 추천해주는 것이다.

 

반응형

 

 

 

Create AI apps without coding with GPT using the ChatGPT API

https://www.youtube.com/watch?v=Uc7md60uAKM 

 

 

 

[ 한글 전체 ]

첫 데이트, 굉장히 화사한 색깔들이 추천됐네요.
굉장히 고무가 어울리는 색깔들이네요.
이렇게 GPT가 색깔 추천을 해줄 수 있도록 아주 간단한 앱을 만들어봤습니다.
안녕하세요, 얼마 전 마이크로소프트에서 엑셀이나 MS 워드, PPT에 코파일럿을 적용했습니다.
그때 내건 카피가 완전히 새로운 업무 방식입니다.
그냥 거창한 말이 아니라 이 말로도 부족할 정도로 굉장히 놀라운 모습을 봤죠.
PPT에서 설명 몇 번으로 굉장히 근사한 PPT가 만들어지는 데모 영상을 봤습니다.
그래서 이번 영상에서는 코딩에서도 그렇게 쉽게 무언가를 만들어 보는 경험을 한 번 이번 영상에서 해보고자 합니다.
이번 영상에서 사용할 도구는 제가 얼마 전에 올렸던 영상 중에 AI 코드헬퍼라고 하는 VS 코드 익스텐션에 대한 소개 영상이 있습니다.
많은 분들이 관심을 가져주셨던 영상이고 그 덕분에 비주얼 스튜디오 마켓플레이스의 한 주간 트렌드 차트에도 올라갔었습니다.
많이 이용해 주셔서 감사합니다.
이번에 이 AI 헬퍼를 활용해서 아주 간단하고 짧은 토이 프로젝트를 한 번 해보겠습니다.
이 프로젝트에서 핵심은 코딩을 날로 먹는다는 것과 오픈 AI에서 제공하는 GPT API를 아주 간단하게 이 토이 프로젝트에 접목시켜 보는 것입니다.
이번에 만들어 볼 건 입력 박스에 우리가 어떤 색깔에 대한 묘사를 말로 이렇게 쓰면 AI가 그 묘사에 대한 색깔들을 여섯 자리 16진수 색깔 코드로 추천을 해줄 수 있는 그런 간단한 웹 앱을 만들어 보도록 하겠습니다.
예를 들어서 한 여름 퇴근길에 올려다본 노을 지는 하늘이라고 쓰면, 불그스름한 그런 색깔을 추천해 줄 수 있는 웹 앱입니다.
말로는 굉장히 거창한데요, 이제 해나가는 모습을 보면 굉장히 간단하고 재미있는 과정이 진행될 테니까요.
재미있게 봐주시기 바랍니다.
일단 화면에 우리가 만들고자 하는 것의 모습을 한 번 여기다가 주석으로 묘사해 보겠습니다.
이렇게 사각형 모양으로 입력 박스를 만들었습니다.
아래에 버튼을 만들어, 그리고 이렇게 해둔 것을 전체 선택해서 Ctrl+Alt+Shift를 누르고 콤마를 누릅니다.
이렇게 하면 뭔가 입력하는 박스가 뜨는데요, 여기에 지금 선택한 것을 가지고 AI에게 요청할 말을 쓰면 됩니다.
여기에 이렇게 요청하는 말을 썼습니다.
이렇게 하고 엔터를 치면, 훌륭하게 만들어 줍니다.
원하는 모습대로 나왔습니다.
자, 그러면 입력하고 버튼을 누르면, 입력한 내용이 얼러창으로 뜨도록 그렇게 수정해 달라고 하겠습니다.
자, 그래서 코드를 선택한 후, Ctrl+Alt+Shift+콤마를 눌러서 자 이렇게 요청의 말을 쓴 다음에 엔터를 치도록 하겠습니다.
자, 이렇게 했더니 코드를 수정해 줬습니다.
잘 되는지 해보겠습니다.
잘 됩니다.
그러면 얼러창 대신에 div를 하나 만들어서, 여기 아래에다가 입력한 내용을 표시하도록 그렇게 한번 요청을 해보겠습니다.
선택해서 Ctrl+Alt+콤마를 누르고 이렇게 그냥 간단하게 적어 보겠습니다.
꽤 대충 적었는데, 잘 하는지 한번 보죠.
코드 수정해줬습니다.
아, 이렇게 나오게 해줬네요.
음, 여기에 계속 표시가 되도록 만들어졌습니다.
자, 그러면 이제 입력 박스에 입력한 내용을 GPT API에 보내는 prompt로서 해서, 버튼을 누르면 API의 요청을 해서 얻어온 결과를 여기 지금 아래 출력란에다가 나오도록 해보겠습니다.
지금 요청하는 코드는 제가 따로 준비해둔 코드가 있어요.
이거를 복사해 와서 일단 여기다 붙여 넣도록 하겠습니다.
자, 이렇게 생긴 코드를 복사해 넣습니다.
제가 사전에 만들어둔 코드인데, 이 코드의 내용은 그렇게 중요하지 않습니다.
그냥 어떻게 사용하면 되는지가 가장 중요합니다.
최대한 쉽게 쓸 수 있도록 만들어 뒀는데요.
사용 방법은 여기다 그냥 이렇게 작성하면 됩니다.
그리고 변수를 준비해서 이렇게 넣으면, 이 response 변수로 응답 내용이 들어가는 겁니다.
그리고 여기서 어웨이트의 빨간색 줄이 있는데, 이거는 이 코드를 담은 함수 앞에 레이싱크라고 붙이면 해결이 됩니다.
여기다가 이렇게 넣도록 하겠습니다.
자, 이렇게 해서 실행을 해보겠습니다.
했더니 잘 작동합니다.
여기 46번에 이 한 줄이면 GPT에 요청을 보내 변수에 결과값을 담을 수 있도록 사용하기 쉽도록 만들어 둔 함수가 있습니다.
이 함수를 설명에 써두겠습니다.
입력 박스에 색깔에 대한 묘사를 쓰고 버튼을 누르면 색깔 코드를 추천해 주도록 합니다.
인프텍스트를 GPT 함수의 인자로 넣어 요청하도록 합니다.
그리고 프롬프트 엔지니어링이 필요합니다.
인풋 텍스트가 색깔에 대한 묘사라면 이런 식으로 프롬프트를 만들어 요청을 해봅니다.
제이슨 형태로 응답을 주도록 프롬프트를 만들었습니다.
프롬프트를 수정하니 색깔을 추천해 주기는 하지만 제이슨 형태는 아니었습니다.
제이슨 형태로 주기 위해 프롬프트에 한 줄을 더 넣어줬습니다.
퓨샷 러닝을 적용해 보겠습니다.
이 함수의 요청에서 대화 내용을 넣어주면 GPT가 대화에 맞는 답을 할 수 있습니다.
실행하니 이런 식으로 답이 왔습니다.
자, 그러면 여기에 지금 제가 아까 예시로 들었던 '위에이 호랑이' 업은 강아지 '멍멍이' 대화에 넣어보도록 하겠습니다.
이렇게 했을 때 나오는 결과를 보죠.
'야옹이'가 나왔습니다.
기대했던 바였습니다.
여기에 이렇게도 가능합니다.
자, 이렇게 제이슨 형태로 수정해봤습니다.
이렇게 요청을 다시 해 볼게요.
'우리가 기대했던 대로 줍니다.' 만약에 여기에 영어 단어를 쓰고 그 의미를 주는 식으로 수정을 했다면, 그 다음에 'hello'라고 썼을 때는 '여기' 이렇게 제이슨 형태로 해서 '미닝'하고 의미의 '안녕'이 나와야 됩니다.
해 볼게요.
했더니 기대했던 바와 다르게 나옵니다.
다른 단어를 넣어 볼게요.
자, 이렇게 했을 때는 기대했던 모습대로 나옵니다.
이 'hello'에게는 조금 더 남다른 기운이 있는 거예요.
'hello'가 나왔으면 GPT는 너무너무 이 말을 하고 싶도록 학습이 되어 있는 겁니다.
그래서 '어, 그거 아니야?'라는 걸 더 알려주기 위해서 조금 더 예시를 보여주도록 합니다.
강아지를 하나 더 추가해 볼게요.
자, 강아지가 하나 더 추가되니까 이제는 우리가 원했던 바대로 나옵니다.
이것을 퓨샷 러닝이라고 하는 거고요.
아까 우리의 문제는 우리가 기대했던 제이슨 형태로 주지 않았던 문제였기 때문에 이제는 이 방법으로 우리가 원했던 모습을 얻어낼 수가 있습니다.
이렇게 해서 요청을 해보겠습니다.
자, 이번에는 원하는 대로 값이 들어온 거 같습니다.
사실 여기서는 5개의 HEX 코드라는 요청과 7자라는 것도 의미가 없을 것 같아요.
왜냐하면 여기에 다 들어가 있으니까.
모두 지우겠습니다.
그런데 이렇게까지 하면 사람도 이거 뭐 하자는 건지 알기 어려울 수도 있습니다.
그렇기 때문에 여기에 시스템이라고 적어주고, 이런 식으로 어시스턴트의 역할을 부여해주는 겁니다.
이렇게 해서 다시 요청을 해보도록 하겠습니다.
했더니 이제 색깔들이 좋습니다.
이 색깔이 정말 어울리는 색깔인지 이제 화면에 표시해서 확인을 해보도록 하죠.
자, 이렇게 요청 내용을 주석에 다 써놨습니다.
그래서 주석을 선택해서 컨트롤+알트+쉬프트+앱을 누르겠습니다.
잘 작동되는지 해보죠.
지금 바다의 색깔을 추천해 달라고 한 건데 바다의 느낌이 나네요.
이번엔 실제로 바다 대신에 인풋 텍스트를 넣어보도록 하죠.
한여름 퇴근길 올려다본 노을지는 하늘 색깔이 이제 나올 겁니다.
안 나오길래 보니까 응답을 좀 JSON 포맷을 맞지 않게 줬기 때문에 이 파트에서 에러가 났습니다.
JSON 모습으로 안 좋네요.
좀 학습 데이터를 수정해줬더니 이번에는 꽤 잘 되는 것 같습니다.
여기 고정시켜둔 텍스트를 지우고 인풋 텍스트가 들어가도록 이렇게 수정하면 완성입니다.
자, 근데 끝내기 전에 마지막으로 하다 보니까 문득 궁금해진 게, GPT가 어떤 마음으로 그 색깔들을 추천해 준 건지 궁금해졌습니다.
그래서 응답에 그 색깔들을 추천한 이유에 대해서도 한 번 같이 포함시켜 보겠습니다.
응답의 모습을 이런 배열뿐 아니라 설명도 넣어야 되기 때문에 이 배열은 객체 안에다가 컬러 리스트라고 넣어놓고, 여기다가 키를 만들어 놓고서 조금 더 정확하게 리턴해보겠습니다.
Reason 4 조금 길긴 한데 이렇게, 몸 서울 여의도 벚꽃 축제 이렇게 한 번 요청해 볼게요.
이렇게 추천해 줬습니다.
또 해보죠.
이번에는 또 다른 색깔을 줬네요.
지금 이렇게 요청할 때마다 색깔의 차이가 있는 건 여기 temperature 값이 0.8이겠죠?
이것 때문에 그렇습니다.
이 숫자는 0에서부터 1까지인데, 1에 가까울수록 다양성이 올라갑니다.
0에 가까울수록 요청할 때마다 같은 값을 줄 확률이 올라갑니다.
0으로 해서 해보겠습니다.
지금 두 번 요청을 했더니, 두 번 다 똑같은 값을 줬어요.
temperature 값이 0이어서 그렇습니다.
하는 말도 똑같죠.
자, 이번에는 temperature를 1로 해서 똑같은 요청을 해보죠.
자, 요청할 때마다 이렇게 말도 달라지고 색깔도 이렇게 달라집니다.
첫 데이트 굉장히 화사한 색깔들이 추천되었네요.
굉장히 봄과 어울리는 색깔들이네요.
민트 초코도 색깔 중에 모노카이라고 하는 테마가 있죠.
카라멜 마끼아또도요.
자, 여수 밤바다의 색깔을 추천해 달라고 해보겠습니다.
자, 이렇게 GPT가 색깔 추천을 해줄 수 있도록 아주 간단하게 앱을 만들어 봤습니다.

 

 

SMALL

[ English Summary ]

In this video, you'll create a simple web app using Microsoft's AI Code Helper.
The app has the ability to recommend colors that correspond to a given description.
The tools used are the AI Code Helper (a Visual Studio extension) and OpenAI's GPT API, and they are used to recommend color codes based on a given sentence.
The GPT function in the code is responsible for passing the input sentence as an argument to the API and receiving the color recommendation result.
The function uses infotext and prompt engineering to make requests, and applies pushshot learning to recognize the content of the conversation.
Its main function is to use input boxes and buttons to suggest color codes as the user types in the desired sentence.

 

 

 

[ English Full Text ]

First date, very bright colors.
These are very rubbery colors.
So I made a very simple app to help GPT make color recommendations.
Hi, a while back Microsoft rolled out co-pilot to Excel, MS Word, and PPT.
What they came up with was a whole new way of doing copy.
And I'm not just saying that because it's a big word, but I've seen some really amazing things.
I've seen demos in PPT where a few words of description can create a really nice PPT.
So in this video, I'm going to give you a taste of what it's like to create something that easy in coding.
The tool that I'm going to use in this video is a VS code extension that I posted a while ago called AI Code Helper.
A lot of people were interested in that video, and it even made the Visual Studio Marketplace trending charts for the week.
So thank you very much.
Today we're going to do a very simple and short toy project utilizing this AI helper.
The whole point of this project is to eat code alive, and to incorporate the GPT API provided by Open AI into this toy project in a very simple way.
What we're going to do is create a simple web app where we can write a description of a color in an input box, like this, and the AI will give us suggestions of colors for that description in a six-digit hexadecimal color code.
So, for example, if I write, "This is the sunset sky I looked up at on my way home from work in the middle of the summer," it could suggest a color that's like, "Ruddy.
That's a lot of words, but it's going to be a really simple and fun process as you watch it unfold.
I hope you enjoy watching it.
So let's take a look at what we're trying to create on the screen, and I'm going to annotate it.
So I've created an input box with a square shape like this.
I'm going to create a button underneath it, and then I'm going to select the whole thing and press Ctrl+Alt+Shift and press comma.
This will bring up a box to type something in, and this is where you can write what you want to ask the AI to do with what you've selected.
So here's what I wrote to ask for.
If I do that and hit enter, it does a great job.
It came out just the way I wanted it.
Okay, so I'm going to ask you to modify that so that when I type and press the button, what I type pops up in an alert window.
Okay, so I'm going to select the code, and then I'm going to press Ctrl+Alt+Shift+Comma, and I'm going to write the words of the request like this, and then I'm going to hit Enter.
Okay, so I did that, and it modified the code.
Let's see if that works.
It works.
So let's go ahead and create a div instead of an alerter, and let's go ahead and make a request down here to show what we've typed.
I'll select it, press Ctrl+Alt+Comma, and I'll just write something like this.
It's pretty rough, but let's see if it works.
It fixed my code.
Oh, it made it come out like this.
Well, it's made it so that it's still visible here.
Okay, so what we're going to do now is we're going to use what we've typed in the input box as a prompt to the GPT API, so when we press the button, it's going to make a request to the API, and we're going to get the results back here in the output box below.
The code that we're requesting, I've got a little bit of code that I've prepared.
I'm going to go ahead and copy it and paste it in here.
Okay, copy and paste the code that looks like this.
This is the code that I've created in advance, and it doesn't really matter what it says.
It's all about how you use it.
I've made it as easy as possible for you to use.
I've made it as easy as possible for you to use.
And then I'm going to prepare a variable, and I'm going to put it in like this, and this response variable is going to contain the response.
And then we've got this red line of weights, which we can solve by putting a lace in front of the function that contains this code.
So let's put it in here like this.
Okay, so let's go ahead and run this.
And it works fine.
Here at line 46, we have a function that we've created to make it easy to use, which is just this one line, to send a request to the GPT and hold the result in a variable.
I'll write this function in the description.
We'll write a description of a color in the input box and have it suggest a color code when we press the button.
We'll put the infotext as an argument to the GPT function to request it.
And we need to engineer the prompt.
If the input text is a description of a color, we'll create a prompt like this to make the request.
I built the prompt to give a response in the form of Jason.
When I modified the prompt, it suggested a color, but not in Jason form.
I added an extra line to the prompt to make it Jason-like.
Let's apply pushshot learning.
In the request of this function, we can put in a conversation and GPT will give us an answer that fits the conversation.
When I ran it, it answered me like this.
Okay, so let's go ahead and put the "up here is a tiger" up here is a dog "puppy" conversation that I just gave you as an example.
Let's see what we get when we do that.
I got a 'meow'.
That's what we were expecting.
We can do this here too.
Okay, I've modified it to Jason's form like this.
Let's rephrase the request like this.
"Give us what we expect." If I wrote an English word here and modified it by giving it its meaning, then when I wrote "hello," I should get "meowing" and the meaning "hello" in Jason form, "here," like this.
I'll try that.
I do, and it's not what I expected.
I'll try a different word.
Now, when I do that, it looks like what I expected.
There's a little bit more energy to this 'hello'.
If it's "hello," then GPT has been trained to want to say it so badly.
So we're going to give it a little bit more of an example to say, "Uh, is that it?
Let's add another puppy.
Okay, we add one more puppy, and now it's coming out the way we wanted it to.
This is what we call a pupshot run.
Our problem earlier was that it wasn't giving us the Jason we were expecting, so now we can do this to get the look we want.
So let's make a request like this.
Now, this time, it looks like we got the value we wanted.
In fact, I don't think it's even relevant here that we're requesting five HEX codes and seven characters.
Because it's all in here.
Let's clear them all.
But if I do that, it might be hard for someone to figure out what I'm doing.
That's why I'm going to write system here, and I'm going to give it the role of assistant.
So let's go ahead and make another request.
Okay, so now I've got some good colors.
Let's go ahead and put them on the screen so we can see if they're really the right colors.
Okay, so I've got all of my requests in a comment.
So I'll select the annotation and press Control+Alt+Shift+App.
Let's see if that works.
Now, I'm asking for a color suggestion for the ocean, and I'm getting an ocean.
Let's actually put some input text instead of the ocean this time.
It should now be the color of the sky as I look up at the sunset on my way home from work in the middle of summer.
It doesn't, so I look at it, and I'm getting an error in this part because I'm giving a response that's not formatted correctly in JSON.
It doesn't look good in JSON.
So I'm going to tweak the training data a little bit, and it seems to be working pretty well this time.
I'm going to delete the text that I have pinned here and modify it like this to get the input text in, and we're done.
Okay, but one last thing before I finish, I was wondering, what was GPT thinking when they recommended those colors?
So I'm going to include in the response why they recommended those colors.
I want the response to look like an array like this, but I also want to include a description, so I'm going to put this array inside an object and call it a list of colors, and then I'm going to create a key on it and return it a little bit more precisely.
Reason 4 It's a little bit long, but I'm going to make a request like this, body Seoul Yeouido Cherry Blossom Festival.
This is what they recommended.
Let's do it again.
This time, you give me another color.
Now, the reason why there's a difference in color every time I request like this is because the temperature value here is 0.8, right?
That's because of this.
This number goes from 0 to 1, and the closer it is to 1, the higher the diversity.
The closer we get to 0, the more likely we are to get the same value every time we request it.
Let's try it with 0.
I've made two requests now, and both times it's given me the same value.
That's because the temperature value is 0.
It says the same thing.
Now, let's make the same request, this time with a temperature of 1.
Now, every time I make the request, it says something different, and the colors change like this.
First date, these are some really bright colors.
These are very spring-like colors.
There's a theme of mint chocolate, which is called monochrome.
And caramel macchiato.
Now, let's ask it to recommend the color of the night sea in Yeosu.
So, this is how I built a very simple app for GPT to make color recommendations.