로컬에서 테스트해 보았으며, 겪은 문제들은 다음과 같습니다:
전체 화면 모드에서 때때로 이스케이프 바가 콘텐츠와 겹쳐 상호작용이 불가능한 경우가 있습니다.
때때로 "Run Artifacts"가 즉시 표시되지 않지만, 포스트 아이콘에 마우스를 올리는 등의 동작을 하면 나타나는 것 같습니다.
결과가 표시되지 않는 경우는 한 번만 발생했습니다. 인디케이터는 보였지만, 그 이후로는 아무 반응이 없었습니다.
전반적으로 매우 잘 작동합니다.
다음은 데모 중 일부입니다.
이 기능을 너무 많이 즐겼습니다.
프롬프트 (투사체 운동 시뮬레이션)
투사체 운동을 시뮬레이션하는 페이지를 생성하세요. 페이지는 다음을 충족해야 합니다:
사용자가 투사체의 초기 속도, 각도, 높이를 입력할 수 있도록 합니다.
투사체의 궤적을 실시간으로 애니메이션으로 표시합니다.
비행 시간, 최대 높이, 사거리 등 계산된 값을 포함합니다.
입력 매개변수를 실시간으로 조정하기 위한 슬라이더를 사용합니다.
처음부터 다시 시작하기 위한 “Reset” 버튼을 포함합니다.
비디오
프롬프트 (이모지 비 게임)
사용자가 기분을 선택하면 화면에 이모지가 쏟아지는 페이지를 생성하세요. 페이지는 다음을 충족해야 합니다:
“Happy”, “Grumpy”, "Pizza"와 같은 기분 옵션을 제공합니다.
사용자가 이모지를 클릭하여 재미있는 효과음과 함께 "수집"할 수 있도록 합니다.
"수집한 피자 조각: 27"과 같은 재미있는 카운터를 포함합니다.
애니메이션된 재미를 위해 HTML, CSS, JavaScript를 사용합니다.
비디오
프롬프트 (단순한 태양계 시각화)
태양계를 시각화하는 페이지를 생성하세요. 페이지는 다음을 충족해야 합니다:
행성의 궤도를 보여주는 축소된, 애니메이션된, 상세한 태양계를 표시합니다.
사용자가 행성을 클릭하여 크기, 태양과의 거리, 공전 주기 등의 정보를 볼 수 있도록 합니다.
사용자가 확대/축소할 수 있도록 합니다.
공전 운동을 빠르게 하거나 늦추기 위한 슬라이더를 포함합니다.
상호작용과 애니메이션을 위해 HTML, CSS, JavaScript를 사용합니다.
컨테이너가 100% 너비와 높이를 사용하도록 합니다.
비디오
프롬프트 (CSS 애니메이션 플레이그라운드)
사용자가 CSS 애니메이션과 전환을 실험할 수 있는 페이지를 생성하세요. 페이지는 다음을 충족해야 합니다:
사용자가 CSS로 애니메이션을 적용할 수 있는 다양한 요소(예: 버튼, div)를 표시합니다.
사용자가 애니메이션 속성 목록(예: transform, opacity, translate, rotate)에서 선택할 수 있도록 합니다.
애니메이션의 지속 시간, 타이밍 함수, 지연 시간을 조정하기 위한 슬라이더를 제공합니다.
사용자가 애니메이션을 실시간으로 미리 보고 변경 사항이 애니메이션에 어떻게 영향을 미치는지 확인할 수 있도록 합니다.
JavaScript를 사용하여 CSS 속성을 동적으로 업데이트하고 HTML/CSS를 스타일링에 사용합니다.
비디오
프롬프트 (인터랙티브 데이터 대시보드)
인터랙티브 차트를 가진 데이터 대시보드를 시각화하는 페이지를 생성하세요. 페이지는 다음을 충족해야 합니다:
막대 차트, 라인 그래프, 파이 차트 등 여러 차트를 표시하며, 각 차트는 다른 데이터셋(예: 매출, 인구, 날씨 데이터)을 나타냅니다.
드롭다운 메뉴나 슬라이더를 사용하여 사용자가 시간 범위, 카테고리, 위치별로 데이터를 필터링할 수 있도록 합니다.
사용자가 필터와 상호작용할 때 차트가 실시간으로 업데이트되도록 합니다.
선택된 데이터의 기술 통계(예: 평균, 중앙값, 최빈값)를 표시합니다.
차트 렌더링에는 Chart.js 또는 D3.js를 사용하고, 데이터 필터링 및 통계 계산에는 JavaScript를 사용합니다.
비디오
3개의 좋아요
sam
12월 5, 2024, 7:05오전
22
네, 동의합니다. 정말 짜증나네요. 이 문제를 여기서 추적하고 있습니다: Exiting expanded artifacts is tricky on tablets
저도 한두 번 재현해 보며 원인을 파악해 보고 있습니다. @david 이건 ember decorator와 관련이 있을 것 같습니다.
흥미롭네요… 이 문제를 일관되게 재현할 수 있다면 알려주세요.
3개의 좋아요
loginerror
12월 5, 2024, 8:02오전
23
API를 통해 접근되는 전역 공유(신뢰 수준 0) 데이터 탐색기 쿼리와 함께 작동할까요? 가능하다면 포럼 활동에 대한 재미있고 동적인 시각 자료를 생성하는 데 잠재력이 있을 것 같습니다.
직접 테스트할 시간이 없었지만, 이 용도로 시도해 볼 사람이 있을까요?
3개의 좋아요
sam
12월 5, 2024, 8:42오전
24
커스텀 도구로 연결할 수는 있지만, 꽤 많은 조율이 필요할 것 같아. 아마도 나는 그 용도로 커스텀 도구가 차트를 어떻게 렌더링할지 직접 만들어볼 것 같아. 그 사용 사례에 대해 이 아이디어를 조금 더 시도해볼 수 있어.
그런데 시각화 자료는 확실히 공유할 수 있어. 보여줄게.
4개의 좋아요
EricGT
12월 5, 2024, 10:23오전
26
네, 이는 AI 웹 아티팩트뿐만 아니라 LLM을 사용하여 HTML, JavaScript, CSS를 생성할 때도 마찬가지입니다.
개발을 순수한(vanilla) HTML, JavaScript, CSS로만 유지할 수 있다면, 즉 외부 라이브러리를 전혀 포함하지 않는다면 작동하고 버그가 없는 코드를 얻을 확률이 극적으로 높아집니다. 또한 라이브러리가 càng 비주류일수록 모델에 제공된 학습 데이터가 적어지므로, 모델이 응답을 완료하기 위해 환각(hallucinate)을 일으킬 가능성이 높아지고, 결과적으로 버그가 더 많이 발생하게 됩니다.
2개의 좋아요
엔드포인트 타임아웃이 발생할 때 일어나는 것 같습니다.
하지만 오늘은 이상합니다. 다시 테스트해 봤는데 모든 요청이 실패했습니다.OpenAI 상태 는 녹색(정상)입니다. 제가 자는 동안 아무것도 변하지 않았기 때문에 무슨 일이 일어나고 있는지 잘 모르겠습니다.
“테스트 실행” 버튼도 500 오류를 반환하고, 로그에는 타임아웃이 표시되고 있습니다.
참고로, 사용자 관점에서 보았을 때 빈 화면 대신 오류 메시지(그리고 재시도 방법)가 제공되면 환영받을 것 같다는 생각이 듭니다.
1개의 좋아요
EricGT
12월 5, 2024, 1:35오후
28
OpenAI 12 days of shipmas 와 관련이 있을 수도 있습니다.
저는 OpenAI 포럼의 단골 회원으로서 모델들의 기복을 자주 목격합니다. 지난 2주 동안 문제 발생에 대한 보고가 증가했지만, 이러한 문제들은 과거에도 주요 릴리스나 새로운 모델이 나올 전에 자주 보던 유형입니다.
3개의 좋아요
loginerror
12월 6, 2024, 9:31오전
29
이 페이지의 아티팩트 중 일부 코드가 사이트 전체에 영향을 미치는 것 같습니다:
5개의 좋아요
Jagster
12월 7, 2024, 8:34오전
31
아주 기초적인 질문이지만… 포럼에서 아티팩트를 공유하는 방법이 뭔가요? <div class="ai-artifact" data-ai-artifact-id="XX"></div> 같은 것을 그냥 복사해서 붙여넣으면 되나요? 그렇게 하면 저만 보고 사용할 수 있습니다.
Jagster
12월 7, 2024, 8:57오전
33
아니요. 그리고 그 게시물을 완전히 놓치고 있었어요. 감사합니다!
4개의 좋아요
joo
12월 12, 2024, 10:39오전
34
제 프로그램에서는 “/n” 문자열만 표시됩니다. 스크린샷을 첨부했습니다. 왜 이런 일이 발생하는 건가요?
1개의 좋아요
joo
12월 12, 2024, 11:14오전
36
저는 Gemini 1.5 Pro를 사용하고 있습니다.
sam
12월 12, 2024, 7:57오후
37
오, 그거 본 적 있어요. 버그가 있는 것 같은데, 2.0 플래시를 시도해 보고 XML 도구로 전환해 보세요.
3개의 좋아요
제 제한된 경험상, Claude 3.5 Sonnet을 사용하면서 Web Creator와 오가는 반복 작업을 통해 일부 진전을 보기도 하지만, 결국 이전 내용을 잊어버려서 새 세션에서 처음부터 다시 시작해야 하는 경우가 있습니다. 프롬프트를 낭비하고 잊어버릴 위험을 감수하기보다는 코드를 수동으로 다듬는 것이 더 쉬울 것 같다는 느낌을 받습니다.
생성된 코드를 직접 편집할 수 있나요?
기존의 산출물(아티팩트)을 가지고 새로운 컨텍스트를 시작할 수 있나요? (Web Creator에 물어봤더니 불가능하다고 답했습니다.)
3개의 좋아요
sam
1월 30, 2025, 12:54오전
39
그래, 마크, 이건 좀 어려운 문제야. 아티팩트 내부 구조를 다시 작업하고 있어:
main ← artifact-update
merged 05:27AM - 04 Feb 25 UTC
### 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을 호출해서 업데이트를 수행하므로 훨씬 더 안정적으로 동작하고 드리프트 문제도 사라졌어. 다만 새로운 시스템은 피할 수 없는 중복이 있기 때문에 토큰 사용량이 더 늘어날 수 있다는 단점이 있어.
아티팩트가 공개적으로 공유된 경우, 기존 아티팩트로 시작할 수 있도록(복제하는 방식) 허용할지도 고민 중이야. 보안에 특히 신경 써야 하니까 어떻게 처리할지 더 생각해봐야겠어.
3개의 좋아요
현재로서는 아티팩트를 캡처하고 점진적이거나 수동으로 변경하기 위해 다음과 같은 워크플로우를 사용하고 있습니다:
Web Creator와 반복 작업을 수행하여 아티팩트가 좋은 상태가 될 때까지 조정합니다.
Web Creator에게 주석 없이 코드(html, css, js)를 작성하도록 프롬프트를 입력합니다.
코드를 복사하여 오프라인에 붙여넣습니다.
필요에 따라 코드를 편집합니다.
그 후 크리에이터가 내용을 잊어버리거나 다른 이유로 상태가 안 좋아지면, 다음과 같이 새 채팅을 시작할 수 있습니다:
안녕하세요, 이 아티팩트 코드가 있습니다. 작동하는 코드이므로 그대로 사용하십시오. 그리고 다음 변경 사항을 적용해 주세요… [코드 붙여넣기]
보통 Web Creator로 반복 작업을 할 때, "새로운 기능으로 아티팩트를 업데이트하겠습니다"라는 식의 메시지를 표시한 뒤 HTML, CSS, JavaScript 블록을 작성하고, 업데이트된 아티팩트를 보여줘서 'Run Artifact’를 실행할 수 있었습니다.
오늘은 일관되게 "아티팩트를 업데이트하겠습니다"라고 표시하고 코드 블록을 작성하지만, 그 후 코드와 아티팩트(생성된 경우)를 삭제합니다. 그래서 결국 "아티팩트를 업데이트하겠습니다"라는 문구만 남게 됩니다. 크리에이터의 게시글을 수정해 봐도 내용은 그대로입니다.
저는 아무것도 업데이트하거나 변경하지 않았습니다. 콘솔에도 오류가 없습니다. Claude 3.5 Sonnet을 사용 중입니다.
sam
2월 4, 2025, 7:48오후
42
최신 버전으로 업데이트하셨나요? 방금 시스템의 대규모 리팩터링을 마쳤고, 새로운 옵션들이 많이 추가되었으며 아티팩트 읽기 도구도 생겼습니다.
3개의 좋아요
, 
같은 이모지가 화면 상단에서 끝없이 떨어지도록 합니다.
