알림: AI 웹 아티팩트 출시

로컬에서 테스트해 보았으며, 겪은 문제들은 다음과 같습니다:

  • 전체 화면 모드에서 때때로 이스케이프 바가 콘텐츠와 겹쳐 상호작용이 불가능한 경우가 있습니다.
  • 때때로 "Run Artifacts"가 즉시 표시되지 않지만, 포스트 아이콘에 마우스를 올리는 등의 동작을 하면 나타나는 것 같습니다.
  • 결과가 표시되지 않는 경우는 한 번만 발생했습니다. 인디케이터는 보였지만, 그 이후로는 아무 반응이 없었습니다.

전반적으로 매우 잘 작동합니다. :+1:

다음은 데모 중 일부입니다.
데모를 제대로 만드는 것이 그렇게 쉽지는 않습니다. 늘 그렇듯, 프롬프트가 càng 상세할수록 좋습니다.
때로는 추가적인 정밀함이 필요합니다. 모든 리소스를 포함하지 않거나, 반응형이 아니거나, 페이지 로딩을 기다리는 코드가 필요한 경우가 있습니다. 또한 외부 라이브러리를 사용하면 실패 확률이 높아집니다.

이 기능을 너무 많이 즐겼습니다. :smile:

프롬프트 (투사체 운동 시뮬레이션)

투사체 운동을 시뮬레이션하는 페이지를 생성하세요. 페이지는 다음을 충족해야 합니다:

  1. 사용자가 투사체의 초기 속도, 각도, 높이를 입력할 수 있도록 합니다.
  2. 투사체의 궤적을 실시간으로 애니메이션으로 표시합니다.
  3. 비행 시간, 최대 높이, 사거리 등 계산된 값을 포함합니다.
  4. 입력 매개변수를 실시간으로 조정하기 위한 슬라이더를 사용합니다.
  5. 처음부터 다시 시작하기 위한 “Reset” 버튼을 포함합니다.
비디오


프롬프트 (이모지 비 게임)

사용자가 기분을 선택하면 화면에 이모지가 쏟아지는 페이지를 생성하세요. 페이지는 다음을 충족해야 합니다:

  1. “Happy”, “Grumpy”, "Pizza"와 같은 기분 옵션을 제공합니다.
  2. :smile:, :angry:, :pizza: 같은 이모지가 화면 상단에서 끝없이 떨어지도록 합니다.
  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를 사용합니다.
비디오

3개의 좋아요