Deepseek 아티팩트: 공개 프론트엔드 코드의 개방형 데이터 세트를 구축하는 것을 목표로 최고의 오픈 소스 모델을 사용하여 React 코드 생성

일반 소개

Deepseek Artifacts는 세계 최고의 오픈 소스 모델을 사용하여 React 애플리케이션을 제작할 수 있는 웹사이트입니다. 사용자는 자신이 꿈꾸는 React 애플리케이션을 설명할 수 있으며, 이 사이트는 Deepseek V3(원래 모델: Meta-Llama) 모델을 사용하여 적절한 코드를 생성합니다. 생성된 응답은 다른 사용자가 참조하고 사용할 수 있도록 공개 데이터 세트에 저장됩니다. 이 사이트는 또한 사용자가 생성된 코드를 테스트하고 조정할 수 있는 개방형 샌드박스 환경을 제공합니다.

생성한 코드는 향후 공개 데이터세트에서 공유되므로 민감한 정보를 입력하지 않도록 주의하세요.

기능 목록

• React 앱 만들기: 사용자가 원하는 React 앱을 설명하면 사이트에서 적절한 코드를 생성합니다.
• 오픈 샌드박스: 생성된 코드를 테스트하고 튜닝할 수 있는 환경을 제공합니다.
• 코드 저장: 생성된 코드는 다른 사용자가 참조할 수 있도록 공개 데이터 세트에 저장됩니다.
• 스트라이프 테마의 영웅 부분, 다크 모드 + 도시락 그리드 등 여러 테마가 지원됩니다.

도움말 사용

딥시크 아티팩트 사용 방법

1. 딥시크 아티팩트 웹사이트를 방문하세요.
2. 설명 상자에 꿈의 React 앱에 대한 설명을 입력합니다. 예를 들어 "스트라이프 테마의 영웅 부분"이라고 입력합니다.
3. "생성" 버튼을 클릭하면 사이트가 Deepseek V3 모델을 사용하여 적절한 코드를 생성합니다.
4. 생성된 코드는 코드를 테스트하고 조정할 수 있는 오픈 샌드박스 환경에 표시됩니다.
5. 생성된 코드가 만족스럽다면 다른 사용자를 위해 공개 데이터 세트에 저장할 수 있습니다.

세부 기능 작동 흐름

1. React 앱 만들기::
   • 설명 상자에 원하는 React 애플리케이션에 대한 자세한 설명을 입력합니다.
   • '생성' 버튼을 클릭하고 모델이 코드를 생성할 때까지 기다립니다.
   • 생성된 코드는 샌드박스 환경에 표시되어 테스트하고 조정할 수 있습니다.
2. 오픈 샌드박스::
   • 생성된 코드는 샌드박스 환경에 자동으로 로드됩니다.
   • 샌드박스에서 코드를 테스트하고 조정할 수 있습니다.
   • 문제가 발생하면 샌드박스에서 오류 메시지를 확인하고 그에 따라 수정하세요.
3. 코드 저장::
   • 생성된 코드는 공개 데이터 세트에 자동으로 저장됩니다.
   • 참조 및 학습을 위해 데이터 세트에서 다른 사용자 생성 코드를 볼 수 있습니다.

딥서치 아티팩트 프로젝트에 대한 세부 정보

공개 프런트엔드 코드 데이터세트를 구축하기 위한 새로운 무료 AI 인코더(Bolt, V0 클래스)

딥서치 V3는 최근 AI 커뮤니티에서 화제를 불러일으키고 있으며, LMS 차트 상위권에 올랐습니다. 이는 개방형 가중치 모델치고는 상당히 놀라운 성과입니다. 더욱 주목할 만한 점은 사용 비용이 매우 저렴하다는 점입니다. 오늘은 이를 기반으로 하는 도구인 DeepSeek 아티팩트에 대해 소개해드리겠습니다.

딥시크 아티팩트는 로그인이나 등록 없이 바로 사용할 수 있는 허깅페이스의 완전 무료 도구입니다. 리액트 및 테일윈드용 코드를 생성할 수 있으며 꽤 잘 작동합니다.

이 도구의 중요한 목표는 향후 모든 사람에게 공개될 새로운 공개 프런트엔드 코드 데이터셋을 구축하는 것입니다. 사용자가 생성한 콘텐츠가 이 데이터 세트에 포함되며, 오픈 소스 모델이기 때문에 누구나 자신의 모델을 훈련하는 데 사용할 수 있습니다.

데이터 세트 주소: https://huggingface.co/datasets/cfahlgren1/react-code-instructions

이 도구의 인터페이스는 복잡한 기능 없이 매우 심플한 디자인으로 되어 있습니다. 인터페이스에서 데이터 세트 링크를 볼 수 있으며, 생성된 콘텐츠는 이 데이터 세트에서 끝납니다.

테스트 삼아 앞서 작성한 글 "코드 한 줄 쓰지 않고 인공지능으로 0에서 1까지 인공지능 서비스 웹사이트 만들기"를 활용해 처음부터 이 세 가지 프롬프트 단어를 던져 Saas 웹사이트 프로토타입을 만들었습니다. 프롬프트 단어는 다소 긴 편이며 위의 해당 글을 통해 얻을 수 있습니다.

프롬프트 단어를 입력하면 인터페이스가 생성됩니다:

그런 다음 '샌드박스 열기'를 클릭하면 도구가 샌드박스 환경에서 프로젝트를 생성합니다.

이것과 사랑스러운 어쩌면 Bolt.new 다음과 같이 매우 유사합니다. Claude 아티팩트와 비슷하지만, 완전히 무료이며 거의 매번 사용할 때마다 작동한다는 점이 다릅니다.

샌드박스에서 직접 코드를 편집할 수 있으며, 예를 들어 Vercel의 도구를 사용하여 휴대폰에서 바로 앱이나 SaaS 도구를 만들 수 있습니다. 프로젝트를 다운로드하려면 로컬에 저장하거나 GitHub 리포지토리를 만들 수 있어 매우 편리합니다. 생성된 코드에 직접 명령을 내려 콘텐츠를 수정할 수 없다는 점은 사소한 단점입니다. 하지만 코드를 수정하려면 샌드박스에서 수동으로 편집할 수 있습니다. 또는 내장 편집기에서 직접 코드를 편집할 수 있어 매우 편리합니다. AI 자체를 사용하여 콘텐츠를 수정하려면 코드를 복사하고 원하는 수정에 대한 요청을 작성하여 요청에 코드를 붙여넣은 다음 요청을 보내면 됩니다. 문맥에 따라 새로운 콘텐츠를 생성합니다. 이 도구는 또한 로컬에서 프로젝트를 실행하려는 사람들을 위한 훌륭한 지원도 제공합니다. 코드 샌드박스를 열고 다운로드 버튼을 클릭하면 package.json 파일이 포함된 전체 프로젝트 압축 파일을 받을 수 있습니다.

프로젝트의 압축을 풀고 npm 실행 명령을 실행하여 프로젝트를 시작합니다. 이 기능은 컴포넌트나 간단한 애플리케이션 시나리오를 생성해야 하는 경우에 특히 적합하며, 생성된 콘텐츠는 단독으로 사용할 수도 있지만 다른 프로젝트에 통합할 수도 있습니다. 이 도구의 또 다른 장점은 생성 속도입니다. 예를 들어 SEO 최적화 도구가 포함된 페이지를 만드는 데 이 도구를 사용하면 첫 단락 뒤에 콘텐츠가 삽입되고, FAQ가 생성되며, 팝업 광고가 추가되고, 규정을 완벽하게 준수하게 됩니다. 프로젝트 파일은 Netlify와 같은 플랫폼에 쉽게 배포할 수 있습니다. 키워드 조사 도구를 만들 때 뛰어난 사용자 정의 기능을 보여줍니다. 프롬프트 단어를 입력하면 관련 코드를 생성하고, API 키 입력 및 도메인 세분화를 지원하며, 다른 도구에서는 찾아보기 힘든 키워드를 자동으로 생성하고 그룹화할 수 있습니다.

전반적으로 이 도구는 완전 무료이며 사용이 매우 간단하기 때문에 많은 잠재력을 가지고 있습니다. 생성한 콘텐츠가 작업 중인 데이터 세트에 포함될 수 있지만, 모든 사람이 이를 신경 쓰는 것은 아닙니다.