11-20 GPT-4V & tldraw

"Make It Real" 그림을 소프트웨어로 변환하는 AI 프로토타입이 개발자들을 놀라게 하다.

최초 업로드 2023-11-20 / 마지막 수정 2023-11-20

한 줄 요약

tldraw에서 공개한 Make It Real이라는 MVP가 GPT-4V의 새로운 기능을 이용하여 그림을 CSS, JS로 변환하고 단계적으로 수정 사이클을 가질 수 있는 소프트웨어로 만들었다.

주요 포인트

The feature uses OpenAI's GPT-4V API to visually interpret a vector drawing into functioning Tailwind CSS and JavaScript web code that can replicate user interfaces or even create simple implementations of games like Breakout.
- GPT-4V의 API를 이용해서 그림을 Tailwind CSS와 JS 코드로 변환하는 MVP를 만듬.
Soon, others followed with demonstrations of drawing a clone of Breakout, creating a working dial clock that ticks, drawing the snake game, making a Pong game, interpreting a visual state chart, and much more.
- X(전 트위터)에서 바이럴하게 유저들이 직접 다양한 게임들을 제작하며 얼마나 잘 작동하는지 직접 검증함.
ChatGPT update enables its AI to “see, hear, and speak,” according to OpenAI
- 이번 GPT-4V의 업데이트에서 듣고 보고 말하는 기능들을 추가하며 가능해졌음.
Users can experiment with a live demo of Make It Real online. However, running it requires providing an API key from OpenAI, which is a security risk. ...중략
- Make It Real의 데모 버전을 쓰려면 본인의 API키를 넣어서 쓸 수 있지만 Key를 퍼블릭하게 노출시키지 않도록 조심해야함.
...project received $2.7 million in seed funding and is supported by GitHub sponsors. ...integrated..."draw-a-ui" created by Sawyer Hood ...중략
- tldr은 2021년에 30억 이상의 시드 펀딩을 받은 기록이 있고 최근 Saywer Hood의 draw-a-ui의 repo를 tldraw와 합치며 이와 같은 성과를 거둘 수 있었다.
"...generating a base64 encoded PNG of the drawn components, then passing that to GPT-4 Vision" with a system prompt and instructions to turn the image into a file using Tailwind. ...full system prompt that tells GPT-4V how to handle the inputs and turn them into functioning code
- 사용자가 그린 그림을 base64로 변환 후, 프롬프트와 함께 넣어서 결과를 받는다고한다. 아래와 같은 형식의 프롬프트가 draw-a-ui와 Make it real에서 GPT API 호출에 사용되는 프롬프트라고 한다.

const systemPrompt = `You are an expert web developer who specializes in tailwind css.
A user will provide you with a low-fidelity wireframe of an application.
You will return a single html file that uses HTML, tailwind css, and JavaScript to create a high fidelity website.
Include any extra CSS and JavaScript in the html file.
If you have any images, load them from Unsplash or use solid colored rectangles.
The user will provide you with notes in blue or red text, arrows, or drawings.
The user may also include images of other websites as style references. Transfer the styles as best as you can, matching fonts / colors / layouts.
They may also provide you with the html of a previous design that they want you to iterate from.
Carry out any changes they request from you.
In the wireframe, the previous design's html will appear as a white rectangle.
Use creative license to make the application more fleshed out.
Use JavaScript modules and unpkg to import any necessary dependencies.`;

느낀점 / 궁금증

곧 GPT-4V를 사용한 실용적인 프로덕트들이 쏟아져 나올 것 같다.
- 현재 이미지 압축 머신러닝 알고리즘들을 서빙하는 웹사이트들이 늘어난 것처럼 이제는 더 다양한 툴들이 양산될 것 같다.
GPT-4V를 이용한 다른 예시들을 찾아보니, 바로 예시들을 찾을 수 있었다.
- 더빙 넣어주기, 비디오 편집 등 모든 것이 가능한 것으로 보여진다. 이 속도면 몇 년 뒤에는 단순 기술직 직업이 자동화될 것이다.
- 장기적으로 생존하려면 인간만이 할 수 있는 것을 찾아야할 것이다.

"Make It Real" 그림을 소프트웨어로 변환하는 AI 프로토타입이 개발자들을 놀라게 하다.

최초 업로드 2023-11-20 / 마지막 수정 2023-11-20

기사 원본 링크

한 줄 요약

tldraw에서 공개한 Make It Real이라는 MVP가 GPT-4V의 새로운 기능을 이용하여 그림을 CSS, JS로 변환하고 단계적으로 수정 사이클을 가질 수 있는 소프트웨어로 만들었다.

주요 포인트

The feature uses OpenAI's GPT-4V API to visually interpret a vector drawing into functioning Tailwind CSS and JavaScript web code that can replicate user interfaces or even create simple implementations of games like Breakout.
- GPT-4V의 API를 이용해서 그림을 Tailwind CSS와 JS 코드로 변환하는 MVP를 만듬.
Soon, others followed with demonstrations of drawing a clone of Breakout, creating a working dial clock that ticks, drawing the snake game, making a Pong game, interpreting a visual state chart, and much more.
- X(전 트위터)에서 바이럴하게 유저들이 직접 다양한 게임들을 제작하며 얼마나 잘 작동하는지 직접 검증함.
ChatGPT update enables its AI to “see, hear, and speak,” according to OpenAI
- 이번 GPT-4V의 업데이트에서 듣고 보고 말하는 기능들을 추가하며 가능해졌음.
Users can experiment with a live demo of Make It Real online. However, running it requires providing an API key from OpenAI, which is a security risk. ...중략
- Make It Real의 데모 버전을 쓰려면 본인의 API키를 넣어서 쓸 수 있지만 Key를 퍼블릭하게 노출시키지 않도록 조심해야함.
...project received $2.7 million in seed funding and is supported by GitHub sponsors. ...integrated..."draw-a-ui" created by Sawyer Hood ...중략
- tldr은 2021년에 30억 이상의 시드 펀딩을 받은 기록이 있고 최근 Saywer Hood의 draw-a-ui의 repo를 tldraw와 합치며 이와 같은 성과를 거둘 수 있었다.
"...generating a base64 encoded PNG of the drawn components, then passing that to GPT-4 Vision" with a system prompt and instructions to turn the image into a file using Tailwind. ...full system prompt that tells GPT-4V how to handle the inputs and turn them into functioning code
- 사용자가 그린 그림을 base64로 변환 후, 프롬프트와 함께 넣어서 결과를 받는다고한다. 아래와 같은 형식의 프롬프트가 draw-a-ui와 Make it real에서 GPT API 호출에 사용되는 프롬프트라고 한다.

const systemPrompt = `You are an expert web developer who specializes in tailwind css.
A user will provide you with a low-fidelity wireframe of an application.
You will return a single html file that uses HTML, tailwind css, and JavaScript to create a high fidelity website.
Include any extra CSS and JavaScript in the html file.
If you have any images, load them from Unsplash or use solid colored rectangles.
The user will provide you with notes in blue or red text, arrows, or drawings.
The user may also include images of other websites as style references. Transfer the styles as best as you can, matching fonts / colors / layouts.
They may also provide you with the html of a previous design that they want you to iterate from.
Carry out any changes they request from you.
In the wireframe, the previous design's html will appear as a white rectangle.
Use creative license to make the application more fleshed out.
Use JavaScript modules and unpkg to import any necessary dependencies.`;

느낀점 / 궁금증

곧 GPT-4V를 사용한 실용적인 프로덕트들이 쏟아져 나올 것 같다.
- 현재 이미지 압축 머신러닝 알고리즘들을 서빙하는 웹사이트들이 늘어난 것처럼 이제는 더 다양한 툴들이 양산될 것 같다.
GPT-4V를 이용한 다른 예시들을 찾아보니, 바로 예시들을 찾을 수 있었다.
- 더빙 넣어주기, 비디오 편집 등 모든 것이 가능한 것으로 보여진다. 이 속도면 몇 년 뒤에는 단순 기술직 직업이 자동화될 것이다.
- 장기적으로 생존하려면 인간만이 할 수 있는 것을 찾아야할 것이다.