# AI 웹 아티팩트 출시 안내
**URL:** https://meta.discourse.org/t/announcing-ai-web-artifacts/339979
**Category:** Announcements
**Tags:** ai
**Created:** [12월 3, 2024, 2:53오전 UTC](https://meta.discourse.org/t/announcing-ai-web-artifacts/339979 "2024-12-03T02:53:23Z")
**Posts on this page:** 20
**Page:** 2
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [12월 5, 2024, 5:23오전 UTC](https://meta.discourse.org/t/announcing-ai-web-artifacts/339979/21 "2024-12-05T05:23:44Z")
로컬에서 테스트해 보았으며, 겪은 문제들은 다음과 같습니다:
- 전체 화면 모드에서 때때로 이스케이프 바가 콘텐츠와 겹쳐 상호작용이 불가능한 경우가 있습니다.
- 때때로 "Run Artifacts"가 즉시 표시되지 않지만, 포스트 아이콘에 마우스를 올리는 등의 동작을 하면 나타나는 것 같습니다.
- 결과가 표시되지 않는 경우는 한 번만 발생했습니다. 인디케이터는 보였지만, 그 이후로는 아무 반응이 없었습니다.
전반적으로 매우 잘 작동합니다. 👍
다음은 데모 중 일부입니다.
데모를 제대로 만드는 것이 그렇게 쉽지는 않습니다. 늘 그렇듯, 프롬프트가 càng 상세할수록 좋습니다.
때로는 추가적인 정밀함이 필요합니다. 모든 리소스를 포함하지 않거나, 반응형이 아니거나, 페이지 로딩을 기다리는 코드가 필요한 경우가 있습니다. 또한 외부 라이브러리를 사용하면 실패 확률이 높아집니다.
이 기능을 너무 많이 즐겼습니다. 😄
> **프롬프트 (투사체 운동 시뮬레이션)**
>
> 투사체 운동을 시뮬레이션하는 페이지를 생성하세요. 페이지는 다음을 충족해야 합니다:
>
> 1. 사용자가 투사체의 초기 속도, 각도, 높이를 입력할 수 있도록 합니다.
> 2. 투사체의 궤적을 실시간으로 애니메이션으로 표시합니다.
> 3. 비행 시간, 최대 높이, 사거리 등 계산된 값을 포함합니다.
> 4. 입력 매개변수를 실시간으로 조정하기 위한 슬라이더를 사용합니다.
> 5. 처음부터 다시 시작하기 위한 “Reset” 버튼을 포함합니다.
> **비디오**
>
* * *
> **프롬프트 (이모지 비 게임)**
>
> 사용자가 기분을 선택하면 화면에 이모지가 쏟아지는 페이지를 생성하세요. 페이지는 다음을 충족해야 합니다:
>
> 1. “Happy”, “Grumpy”, "Pizza"와 같은 기분 옵션을 제공합니다.
> 2. 😄, 😠, 🍕 같은 이모지가 화면 상단에서 끝없이 떨어지도록 합니다.
> 3. 사용자가 이모지를 클릭하여 재미있는 효과음과 함께 "수집"할 수 있도록 합니다.
> 4. "수집한 피자 조각: 27"과 같은 재미있는 카운터를 포함합니다.
> 5. 애니메이션된 재미를 위해 HTML, CSS, JavaScript를 사용합니다.
> **비디오**
>
* * *
> **프롬프트 (단순한 태양계 시각화)**
>
> 태양계를 시각화하는 페이지를 생성하세요. 페이지는 다음을 충족해야 합니다:
>
> 1. 행성의 궤도를 보여주는 축소된, 애니메이션된, 상세한 태양계를 표시합니다.
> 2. 사용자가 행성을 클릭하여 크기, 태양과의 거리, 공전 주기 등의 정보를 볼 수 있도록 합니다.
> 3. 사용자가 확대/축소할 수 있도록 합니다.
> 4. 공전 운동을 빠르게 하거나 늦추기 위한 슬라이더를 포함합니다.
> 5. 상호작용과 애니메이션을 위해 HTML, CSS, JavaScript를 사용합니다.
> 6. 컨테이너가 100% 너비와 높이를 사용하도록 합니다.
> **비디오**
>
* * *
> **프롬프트 (CSS 애니메이션 플레이그라운드)**
>
> 사용자가 CSS 애니메이션과 전환을 실험할 수 있는 페이지를 생성하세요. 페이지는 다음을 충족해야 합니다:
>
> 1. 사용자가 CSS로 애니메이션을 적용할 수 있는 다양한 요소(예: 버튼, div)를 표시합니다.
> 2. 사용자가 애니메이션 속성 목록(예: transform, opacity, translate, rotate)에서 선택할 수 있도록 합니다.
> 3. 애니메이션의 지속 시간, 타이밍 함수, 지연 시간을 조정하기 위한 슬라이더를 제공합니다.
> 4. 사용자가 애니메이션을 실시간으로 미리 보고 변경 사항이 애니메이션에 어떻게 영향을 미치는지 확인할 수 있도록 합니다.
> 5. JavaScript를 사용하여 CSS 속성을 동적으로 업데이트하고 HTML/CSS를 스타일링에 사용합니다.
> **비디오**
>
* * *
> **프롬프트 (인터랙티브 데이터 대시보드)**
>
> 인터랙티브 차트를 가진 데이터 대시보드를 시각화하는 페이지를 생성하세요. 페이지는 다음을 충족해야 합니다:
>
> 1. 막대 차트, 라인 그래프, 파이 차트 등 여러 차트를 표시하며, 각 차트는 다른 데이터셋(예: 매출, 인구, 날씨 데이터)을 나타냅니다.
> 2. 드롭다운 메뉴나 슬라이더를 사용하여 사용자가 시간 범위, 카테고리, 위치별로 데이터를 필터링할 수 있도록 합니다.
> 3. 사용자가 필터와 상호작용할 때 차트가 실시간으로 업데이트되도록 합니다.
> 4. 선택된 데이터의 기술 통계(예: 평균, 중앙값, 최빈값)를 표시합니다.
> 5. 차트 렌더링에는 Chart.js 또는 D3.js를 사용하고, 데이터 필터링 및 통계 계산에는 JavaScript를 사용합니다.
> **비디오**
>
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [12월 5, 2024, 7:05오전 UTC](https://meta.discourse.org/t/announcing-ai-web-artifacts/339979/22 "2024-12-05T07:05:50Z")
> [@Arkshine](#):
>
> 전체 화면 모드에서 가끔 이스케이프 바가 콘텐츠와 겹쳐서 상호작용이 불가능한 경우가 있습니다.
네, 동의합니다. 정말 짜증나네요. 이 문제를 여기서 추적하고 있습니다: [Exiting expanded artifacts is tricky on tablets](https://meta.discourse.org/t/exiting-expanded-artifacts-is-tricky-on-tablets/340252)
> [@Arkshine](#):
>
> 가끔 “Run Artifacts”가 바로 표시되지 않지만, 예를 들어 게시글 아이콘에 마우스를 올리면 표시됩니다(그렇게 보입니다).
저도 한두 번 재현해 보며 원인을 파악해 보고 있습니다. @david 이건 ember decorator와 관련이 있을 것 같습니다.
> [@Arkshine](#):
>
> 결과가 표시되지 않은 경우는 단 한 번뿐이었습니다. 인디케이터는 보였지만, 그 후 아무 일도 일어나지 않았습니다.
흥미롭네요… 이 문제를 일관되게 재현할 수 있다면 알려주세요.
---
### Author:  [@loginerror](https://meta.discourse.org/u/loginerror)
#### Post date: [12월 5, 2024, 8:02오전 UTC](https://meta.discourse.org/t/announcing-ai-web-artifacts/339979/23 "2024-12-05T08:02:33Z")
API를 통해 접근되는 전역 공유(신뢰 수준 0) 데이터 탐색기 쿼리와 함께 작동할까요? 가능하다면 포럼 활동에 대한 재미있고 동적인 시각 자료를 생성하는 데 잠재력이 있을 것 같습니다.
직접 테스트할 시간이 없었지만, 이 용도로 시도해 볼 사람이 있을까요? 🙂
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [12월 5, 2024, 8:42오전 UTC](https://meta.discourse.org/t/announcing-ai-web-artifacts/339979/24 "2024-12-05T08:42:09Z")
커스텀 도구로 연결할 수는 있지만, 꽤 많은 조율이 필요할 것 같아. 아마도 나는 그 용도로 커스텀 도구가 차트를 어떻게 렌더링할지 직접 만들어볼 것 같아. 그 사용 사례에 대해 이 아이디어를 조금 더 시도해볼 수 있어.
그런데 시각화 자료는 확실히 공유할 수 있어. 보여줄게.
---
### Author:  [@EricGT](https://meta.discourse.org/u/EricGT)
#### Post date: [12월 5, 2024, 10:23오전 UTC](https://meta.discourse.org/t/announcing-ai-web-artifacts/339979/26 "2024-12-05T10:23:35Z")
> [@Arkshine](#):
>
> 외부 라이브러리를 사용하면 실패 확률이 높아집니다.
네, 이는 AI 웹 아티팩트뿐만 아니라 LLM을 사용하여 HTML, JavaScript, CSS를 생성할 때도 마찬가지입니다.
개발을 순수한(vanilla) HTML, JavaScript, CSS로만 유지할 수 있다면, 즉 외부 라이브러리를 전혀 포함하지 않는다면 작동하고 버그가 없는 코드를 얻을 확률이 극적으로 높아집니다. 또한 라이브러리가 càng 비주류일수록 모델에 제공된 학습 데이터가 적어지므로, 모델이 응답을 완료하기 위해 환각(hallucinate)을 일으킬 가능성이 높아지고, 결과적으로 버그가 더 많이 발생하게 됩니다.
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [12월 5, 2024, 1:12오후 UTC](https://meta.discourse.org/t/announcing-ai-web-artifacts/339979/27 "2024-12-05T13:12:45Z")
> [@sam](#):
>
> 재미있네요… 일관된 재현(repro)이 가능하면 알려주세요.
엔드포인트 타임아웃이 발생할 때 일어나는 것 같습니다.
로그에 있는 유일한 오류:
하지만 오늘은 이상합니다. 다시 테스트해 봤는데 모든 요청이 실패했습니다.
[OpenAI 상태](https://status.openai.com/)는 녹색(정상)입니다. 제가 자는 동안 아무것도 변하지 않았기 때문에 무슨 일이 일어나고 있는지 잘 모르겠습니다.
“테스트 실행” 버튼도 500 오류를 반환하고, 로그에는 타임아웃이 표시되고 있습니다.
참고로, 사용자 관점에서 보았을 때 빈 화면 대신 오류 메시지(그리고 재시도 방법)가 제공되면 환영받을 것 같다는 생각이 듭니다.
---
### Author:  [@EricGT](https://meta.discourse.org/u/EricGT)
#### Post date: [12월 5, 2024, 1:35오후 UTC](https://meta.discourse.org/t/announcing-ai-web-artifacts/339979/28 "2024-12-05T13:35:33Z")
> [@Arkshine](#):
>
> 무슨 일이 일어나고 있는지 정확히 알 수 없습니다.
[OpenAI 12 days of shipmas](https://www.theverge.com/2024/12/4/24312352/openai-sora-o1-reasoning-12-days-shipmas)와 관련이 있을 수도 있습니다.
저는 OpenAI 포럼의 단골 회원으로서 모델들의 기복을 자주 목격합니다. 지난 2주 동안 문제 발생에 대한 보고가 증가했지만, 이러한 문제들은 과거에도 주요 릴리스나 새로운 모델이 나올 전에 자주 보던 유형입니다.
---
### Author:  [@loginerror](https://meta.discourse.org/u/loginerror)
#### Post date: [12월 6, 2024, 9:31오전 UTC](https://meta.discourse.org/t/announcing-ai-web-artifacts/339979/29 "2024-12-06T09:31:26Z")
이 페이지의 아티팩트 중 일부 코드가 사이트 전체에 영향을 미치는 것 같습니다:
---
### Author:  [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [12월 7, 2024, 8:34오전 UTC](https://meta.discourse.org/t/announcing-ai-web-artifacts/339979/31 "2024-12-07T08:34:05Z")
아주 기초적인 질문이지만… 포럼에서 아티팩트를 공유하는 방법이 뭔가요? `` 같은 것을 그냥 복사해서 붙여넣으면 되나요? 그렇게 하면 저만 보고 사용할 수 있습니다.
---
### Author:  [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [12월 7, 2024, 8:46오전 UTC](https://meta.discourse.org/t/announcing-ai-web-artifacts/339979/32 "2024-12-07T08:46:00Z")
대화를 공유하셨나요?
> [@sam](#):
>
> 생성된 후에는 사용자와 아티팩트 크리에이터(AI) 페르소나에게만 비공개로 유지됩니다. AI 대화 공유 권한이 있는 사용자(`ai bot public sharing allowed groups`에 속한 사용자)는 대화를 공유하여 아티팩트를 공개로 전환할 수도 있습니다.
>
> 공유된 후에는 다음 HTML 마크업을 사용하여 게시글에 렌더링할 수 있습니다:
>
> `
### Author:  [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [12월 7, 2024, 8:57오전 UTC](https://meta.discourse.org/t/announcing-ai-web-artifacts/339979/33 "2024-12-07T08:57:15Z")
아니요. 그리고 그 게시물을 완전히 놓치고 있었어요. 감사합니다!
---
### Author:  [@joo](https://meta.discourse.org/u/joo)
#### Post date: [12월 12, 2024, 10:39오전 UTC](https://meta.discourse.org/t/announcing-ai-web-artifacts/339979/34 "2024-12-12T10:39:43Z")
제 프로그램에서는 “/n” 문자열만 표시됩니다. 스크린샷을 첨부했습니다. 왜 이런 일이 발생하는 건가요?
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [12월 12, 2024, 10:54오전 UTC](https://meta.discourse.org/t/announcing-ai-web-artifacts/339979/35 "2024-12-12T10:54:14Z")
그것은 어떤 ilm(이름)인가요?
---
### Author:  [@joo](https://meta.discourse.org/u/joo)
#### Post date: [12월 12, 2024, 11:14오전 UTC](https://meta.discourse.org/t/announcing-ai-web-artifacts/339979/36 "2024-12-12T11:14:49Z")
저는 Gemini 1.5 Pro를 사용하고 있습니다.
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [12월 12, 2024, 7:57오후 UTC](https://meta.discourse.org/t/announcing-ai-web-artifacts/339979/37 "2024-12-12T19:57:47Z")
오, 그거 본 적 있어요. 버그가 있는 것 같은데, 2.0 플래시를 시도해 보고 XML 도구로 전환해 보세요.
---
### Author:  [@markschmucker](https://meta.discourse.org/u/markschmucker)
#### Post date: [1월 29, 2025, 3:08오후 UTC](https://meta.discourse.org/t/announcing-ai-web-artifacts/339979/38 "2025-01-29T15:08:30Z")
제 제한된 경험상, Claude 3.5 Sonnet을 사용하면서 Web Creator와 오가는 반복 작업을 통해 일부 진전을 보기도 하지만, 결국 이전 내용을 잊어버려서 새 세션에서 처음부터 다시 시작해야 하는 경우가 있습니다. 프롬프트를 낭비하고 잊어버릴 위험을 감수하기보다는 코드를 수동으로 다듬는 것이 더 쉬울 것 같다는 느낌을 받습니다.
생성된 코드를 직접 편집할 수 있나요?
기존의 산출물(아티팩트)을 가지고 새로운 컨텍스트를 시작할 수 있나요? (Web Creator에 물어봤더니 불가능하다고 답했습니다.)
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [1월 30, 2025, 12:54오전 UTC](https://meta.discourse.org/t/announcing-ai-web-artifacts/339979/39 "2025-01-30T00:54:15Z")
그래, 마크, 이건 좀 어려운 문제야. 아티팩트 내부 구조를 다시 작업하고 있어:
>
>
> \### Why
>
> This pull request fundamentally restructures how AI bots create and u…pdate web artifacts to address critical limitations in the previous approach:
>
> 1. \*\*Improved Artifact Context for LLMs\*\*: Previously, artifact creation and update tools included the \*entire\* artifact source code directly in the tool arguments. This overloaded the Language Model (LLM) with raw code, making it difficult for the LLM to maintain a clear understanding of the artifact's current state when applying changes. The LLM would struggle to differentiate between the base artifact and the requested modifications, leading to confusion and less effective updates.
> 2. \*\*Reduced Token Usage and History Bloat\*\*: Including the full artifact source code in every tool interaction was extremely token-inefficient. As conversations progressed, this redundant code in the history consumed a significant number of tokens unnecessarily. This not only increased costs but also diluted the context for the LLM with less relevant historical information.
> 3. \*\*Enabling Updates for Large Artifacts\*\*: The lack of a practical diff or targeted update mechanism made it nearly impossible to efficiently update larger web artifacts. Sending the entire source code for every minor change was both computationally expensive and prone to errors, effectively blocking the use of AI bots for meaningful modifications of complex artifacts.
>
> \*\*This pull request addresses these core issues by\*\*:
>
> \* Introducing methods for the AI bot to explicitly \*read\* and understand the current state of an artifact.
> \* Implementing efficient update strategies that send \*targeted\* changes rather than the entire artifact source code.
> \* Providing options to control the level of artifact context included in LLM prompts, optimizing token usage.
>
> \### What
>
> The main changes implemented in this PR to resolve the above issues are:
>
> 1. \*\*\`Read Artifact\` Tool for Contextual Awareness\*\*:
> - A new \`read\_artifact\` tool is introduced, enabling AI bots to fetch and process the current content of a web artifact from a given URL (local or external).
> - This provides the LLM with a clear and up-to-date representation of the artifact's HTML, CSS, and JavaScript, improving its understanding of the base to be modified.
> - By cloning local artifacts, it allows the bot to work with a fresh copy, further enhancing context and control.
>
> 2. \*\*Refactored \`Update Artifact\` Tool with Efficient Strategies\*\*:
> - The \`update\_artifact\` tool is redesigned to employ more efficient update strategies, minimizing token usage and improving update precision:
> - \*\*\`diff\` strategy\*\*: Utilizes a search-and-replace diff algorithm to apply only the necessary, targeted changes to the artifact's code. This significantly reduces the amount of code sent to the LLM and focuses its attention on the specific modifications.
> - \*\*\`full\` strategy\*\*: Provides the option to replace the entire content sections (HTML, CSS, JavaScript) when a complete rewrite is required.
> - Tool options enhance the control over the update process:
> - \`editor\_llm\`: Allows selection of a specific LLM for artifact updates, potentially optimizing for code editing tasks.
> - \`update\_algorithm\`: Enables choosing between \`diff\` and \`full\` update strategies based on the nature of the required changes.
> - \`do\_not\_echo\_artifact\`: Defaults to true, and by \*not\* echoing the artifact in prompts, it further reduces token consumption in scenarios where the LLM might not need the full artifact context for every update step (though effectiveness might be slightly reduced in certain update scenarios).
>
> 3. \*\*System and General Persona Tool Option Visibility and Customization\*\*:
> - Tool options, including those for system personas, are made visible and editable in the admin UI. This allows administrators to fine-tune the behavior of all personas and their tools, including setting specific LLMs or update algorithms. This was previously limited or hidden for system personas.
>
> 4. \*\*Centralized and Improved Content Security Policy (CSP) Management\*\*:
> - The CSP for AI artifacts is consolidated and made more maintainable through the \`ALLOWED\_CDN\_SOURCES\` constant. This improves code organization and future updates to the allowed CDN list, while maintaining the existing security posture.
>
> 5. \*\*Codebase Improvements\*\*:
> - Refactoring of diff utilities, introduction of strategy classes, enhanced error handling, new locales, and comprehensive testing all contribute to a more robust, efficient, and maintainable artifact management system.
>
> By addressing the issues of LLM context confusion, token inefficiency, and the limitations of updating large artifacts, this pull request significantly improves the practicality and effectiveness of AI bots in managing web artifacts within Discourse.
불안정한 편집도 정말 골치 아팠어. 얼마나 많은 옵션을 제공할지 아직 고민 중이야.
시스템을 aider의 아키텍트 방식처럼 전환했는데, 이제 도구가 LLM을 호출해서 업데이트를 수행하므로 훨씬 더 안정적으로 동작하고 드리프트 문제도 사라졌어. 다만 새로운 시스템은 피할 수 없는 중복이 있기 때문에 토큰 사용량이 더 늘어날 수 있다는 단점이 있어.
아티팩트가 공개적으로 공유된 경우, 기존 아티팩트로 시작할 수 있도록(복제하는 방식) 허용할지도 고민 중이야. 보안에 특히 신경 써야 하니까 어떻게 처리할지 더 생각해봐야겠어.
---
### Author:  [@markschmucker](https://meta.discourse.org/u/markschmucker)
#### Post date: [2월 4, 2025, 6:56오후 UTC](https://meta.discourse.org/t/announcing-ai-web-artifacts/339979/40 "2025-02-04T18:56:00Z")
> [@markschmucker](#):
>
> 생성된 코드를 편집할 수 있나요?
>
> 기존 아티팩트를 가지고 새로운 컨텍스트를 시작할 수 있나요?
현재로서는 아티팩트를 캡처하고 점진적이거나 수동으로 변경하기 위해 다음과 같은 워크플로우를 사용하고 있습니다:
- Web Creator와 반복 작업을 수행하여 아티팩트가 좋은 상태가 될 때까지 조정합니다.
- Web Creator에게 주석 없이 코드(html, css, js)를 작성하도록 프롬프트를 입력합니다.
- 코드를 복사하여 오프라인에 붙여넣습니다.
- 필요에 따라 코드를 편집합니다.
그 후 크리에이터가 내용을 잊어버리거나 다른 이유로 상태가 안 좋아지면, 다음과 같이 새 채팅을 시작할 수 있습니다:
> 안녕하세요, 이 아티팩트 코드가 있습니다. 작동하는 코드이므로 그대로 사용하십시오. 그리고 다음 변경 사항을 적용해 주세요… [코드 붙여넣기]
---
### Author:  [@markschmucker](https://meta.discourse.org/u/markschmucker)
#### Post date: [2월 4, 2025, 7:04오후 UTC](https://meta.discourse.org/t/announcing-ai-web-artifacts/339979/41 "2025-02-04T19:04:01Z")
보통 Web Creator로 반복 작업을 할 때, "새로운 기능으로 아티팩트를 업데이트하겠습니다"라는 식의 메시지를 표시한 뒤 HTML, CSS, JavaScript 블록을 작성하고, 업데이트된 아티팩트를 보여줘서 'Run Artifact’를 실행할 수 있었습니다.
오늘은 일관되게 "아티팩트를 업데이트하겠습니다"라고 표시하고 코드 블록을 작성하지만, 그 후 코드와 아티팩트(생성된 경우)를 삭제합니다. 그래서 결국 "아티팩트를 업데이트하겠습니다"라는 문구만 남게 됩니다. 크리에이터의 게시글을 수정해 봐도 내용은 그대로입니다.
저는 아무것도 업데이트하거나 변경하지 않았습니다. 콘솔에도 오류가 없습니다. Claude 3.5 Sonnet을 사용 중입니다.
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2월 4, 2025, 7:48오후 UTC](https://meta.discourse.org/t/announcing-ai-web-artifacts/339979/42 "2025-02-04T19:48:35Z")
최신 버전으로 업데이트하셨나요? 방금 시스템의 대규모 리팩터링을 마쳤고, 새로운 옵션들이 많이 추가되었으며 아티팩트 읽기 도구도 생겼습니다.
[이전 페이지](https://meta.discourse.org/t/announcing-ai-web-artifacts/339979.md?page=1)
[다음 페이지](https://meta.discourse.org/t/announcing-ai-web-artifacts/339979.md?page=3)