Web Artifacts를 사용하면 포스트 내에서 인터랙티브하고 동적인 컴포넌트(HTML/CSS/JavaScript)를 시ーム리스하게 생성하고 공유할 수 있습니다. 시각화, 퀴즈부터 경량 웹 앱까지 다양하게 활용할 수 있습니다.
위 아티팩트는 GPT-4o와 anime.js 라이브러리를 사용하여 생성되었습니다 Claude 3.5 Sonnet이 만든 CSS Grid 데모자세한 내용은 여기에서 확인하세요: Discourse AI - Web Artifacts
그 예시들은 iPad에서 아무것도 표시되지 않아요 
그리고 허브에서 전체 화면으로 열면 포럼을 떠나지 않고는 빠져나갈 수 없어요.
hub의 새 빌드가 @pmusaraj에 의해 배포되고 있습니다. 최신 버전으로 업데이트하셨나요?
맞아요! 태블릿에서 전체화면을 벗어나기 위해 Esc 키를 사용하는 것은 어렵고, 뒤로 버튼을 사용하면 해당 토픽으로 돌아가는 것이 아니라 한 단계 더 뒤로 이동합니다.
버튼을 클릭할 때 상태를 push하면 전체 화면 문제를 해결할 수 있을 것 같습니다.
아마도 터치 환경에서는 그 오버레이가 의미가 없을 수도 있겠네요. 어쨌든 상단의 컨트롤을 방해하니까요.
훌륭한 추가입니다!
이 기능을 사용하는 데 망설이는 분들을 위해 몇 가지 점을 덧붙이고 싶습니다. 지난 몇 주 동안 저는 주로 ChatGPT의 4o 모델을 사용해 JavaScript와 CSS로 순수(vanilla) HTML 페이지를 만들어 왔습니다. 놀라운 점은 생성된 코드에 거의 버그가 없다는 것입니다. 다만 원하는 결과를 얻으려면 프롬프트 엔지니어링이 필요합니다. 때로는 제가 생각하는 것과 모델이 제가 원하는 것으로 이해하는 것이 다를 수 있으므로, 프롬프트를 조금씩 조정해 주어야 합니다.
코딩 모드에서 캔버스나 비슷한 기능을 사용할 수 있다면, 입문하기에 아주 좋습니다. 또한 프로그래머가 아니거나 평소 이런 작업을 하지 않는다면, 버그를 수정할 때의 핵심 도구 중 하나는 인터넷 브라우저의 F12 키(참고)를 아는 것입니다.
이 주제에 대해 책을 쓸 수도 있겠지만, 여기까지 하겠습니다. 여러분은 샌드박스에 있으니 자유롭게 시도해 보세요!
시스템이 업데이트했다면, 네. 2주 전에 2.0.7로 업데이트했습니다.
네, 실제로 Hub 문제였습니다. Safari에서는 잘 표시됩니다.
코딩을 모르는 우리도 프롬프트를 사용하는 예시가 있을까요?
편집
첫 시도가 성공했습니다. 이런 개발 작업은 정말 훌륭합니다. 필요한 것만 말하면 되니까요. 그런데 몇 가지 질문이 있습니다:
AI 웹 아티팩트로 사용하도록 단순화된 프롬프트입니다. (AI 웹 아티팩트에 접근 권한이 없어 테스트는 못 해봤지만, 작동하거나 매우 근접한 결과가 나올 것입니다.)
슬롯 머신 게임을 만들어 줘. JavaScript와 CSS를 사용해 줘.
ChatGPT 4o에 실제로 사용된 프롬프트
슬롯 머신 게임을 위한 간단한 HTML 페이지를 만들어 줘. JavaScript와 CSS를 사용해 줘. 다운로드할 수 있는 단일 HTML 페이지로 만들어 줘.
다음은 원하는 결과를 얻기 위해 몇 번이나 조정된 더 고급 프롬프트입니다. AI 웹 아티팩트로 사용하려면 수정이 필요합니다.
블랙잭 게임을 위한 간단한 HTML 페이지를 만들어 줘. JavaScript와 CSS를 사용해 줘.
- 다운로드할 수 있는 단일 HTML 페이지로 만들어 줘.
- 딜러가 스탠드(더 이상 카드를 받지 않음)를 선언한 후 딜러의 카드를 보여 줘.
- 추가 봇 플레이어 옵션을 추가하고, 봇 플레이어의 카드를 보여 줘.
- 베팅 옵션을 추가하고, 금액을 추적해 줘.
- 플레이어 카드의 합계를 보여 줘.
- 승자를 보여주는 팝업이 표시되기 전에 딜러의 카드를 보여 줘.
조금 더 어려운 것을 원한다면, 봇 상대와 함께 하는 체커스 게임을 만들어 보세요.
해당 릴리스에는 아티팩트 수정 사항이 포함되어 있지 않았습니다. 방금 2.0.8 버전을 검토를 위해 제출했으며, 곧 사용할 수 있게 될 것입니다.
한 번에 성공!
https://meta.discourse.org/discourse-ai/ai-bot/shared-ai-conversations/SPeUA9OFqg5t9kQpiaO0Ag
xeyes – Wikipedia 에서 영감을 받았습니다 
솔직히 인서트가 게시물을 자연스럽게 보완하는 방식이 어떻게 구현되는지 상상하기가 조금 어렵습니다. 이미 자연스럽게 통합되는 실용적인 적용 사례가 있나요?
제 포럼에는 개 영양과 관련된 주제가 많이 있습니다. 이제 사용자의 개가 하루에 어떤 영양소가 필요한지 보여주는 간단한 플래너를 제공해 볼 수 있을 것 같습니다.
AI를 사용해보고 싶지만, 매번 실패할 뿐만 아니라 비용도 너무 비쌉니다. 물론 플러그인이나 컴포넌트 같은 도구가 같은 일을 더 잘 해낼 수 있을지도 모르지만, 어떻게 해야 할지 모르겠습니다.
만약 미리 작성된 프롬프트와 함께 아티팩트의 답변을 AI 페르소나에게 보낼 수 있다면 좋겠지만, 그것이 아예 불가능한지조차 모르겠습니다.
한 번 시도해 보겠습니다! 
https://meta.discourse.org/discourse-ai/ai-bot/shared-ai-conversations/xrWufuvPZJFxlUvYW2cHSQ
알게 됐어. 거의. 기본적으로 AI와의 또 다른 대화인데, 하나에서는 필요한 내용, 어떻게 보여야 하는지, 그리고 기타 엄격한 가이드라인과 규칙을 설명하는 거야.
기본적으로 Visual Basic이지만 더 쉬워 
Visual Basic for Dummies. 
해당 이미지들은 위키미디어에서 가져온 것입니다. 예술과 정보 공유를 위해 공개 데이터를 인터랙티브하게 활용하는 것을 기대하고 있습니다. 
오, 와, 이 발표를 놓치고 있었네요. 정말 놀랍습니다! 
팀을 축하합니다.
이미 많은 긍정적인 결과를 가져올 것 같네요. 사용자 참여도 증가시키고, 개념을 설명하거나 배우는 것이 더 쉬워지며, 인터랙티브 피드백을 제공할 수 있을 것 같아요. 게다가 재미있기도 하죠 
.
