TLBrowse는 사용자 상호 작용에 따라 웹 페이지가 동적으로 생성되는 just-in-time 소프트웨어의 잠재력을 보여주는 흥미로운 프로젝트입니다. 이 접근 방식은 대규모 언어 모델에 의해 가능해졌으며, 소프트웨어 배포에 대한 우리의 사고방식에 큰 변화를 가져왔습니다.

TLBrowse의 핵심 기능은 사용자가 탐색하고 상호 작용할 수 있는 "무한 웹 캔버스"입니다. 사용자가 URL을 입력하면 애플리케이션이 동적으로 웹 페이지를 생성하여 사용자가 콘텐츠를 탐색하고 상호 작용할 수 있습니다. 이러한 동적 생성은 사용자가 페이지의 특정 섹션을 클릭하면 새로운 페이지가 생성되는 더 깊은 수준까지 확장됩니다.

이 기술의 의미는 심대합니다. 코드베이스를 유지하고 업데이트를 배포하는 대신, 소프트웨어는 사용자의 특정 요구 사항과 상황에 맞춰 즉시 생성될 수 있습니다. 이 "just-in-time" 접근 방식은 소프트웨어 개발을 혁신할 수 있으며, 전통적인 소프트웨어 배포의 오버헤드를 줄이고 더 개인화되고 적응적인 경험을 가능하게 할 수 있습니다.

TL;DR: TL Browse는 AI 생성 콘텐츠를 사용하여 웹 페이지를 동적으로 생성할 수 있는 새로운 프로젝트입니다. 대규모 언어 모델을 활용하여 사용자 입력에 따라 웹 페이지의 콘텐츠와 레이아웃을 실시간으로 생성합니다. 이 프로젝트는 애플리케이션이 사전 렌더링되는 것이 아니라 필요에 따라 즉시 구축되고 전달되는 "just-in-time 소프트웨어"의 가능성을 보여줍니다.

TL Browse의 주요 기능은 다음과 같습니다:

• AI 생성 웹 페이지를 탐색할 수 있는 무한 웹 캔버스
• URL을 입력하기만 하면 웹 페이지를 생성할 수 있는 기능(예: "bestbuy.com")
• 생성된 페이지를 편집하고 사용자 정의할 수 있는 기능
• OpenAI, Anthropic 등 다양한 AI 모델 지원
• 로컬에서 AI 모델을 직접 실행할 수 있는 옵션

TL Browse 시작하려면 Anthropic 계정과 Clerk 계정을 설정해야 합니다. 설치 과정은 다소 복잡하지만 프로젝트의 GitHub 리포지토리에 자세한 지침이 제공됩니다. 설정이 완료되면 무한 웹 캔버스를 탐색하고 동적 웹 페이지를 생성할 수 있습니다.

이 프로젝트는 AI 기반 "just-in-time" 애플리케이션이 디지털 경험을 창조하고 상호 작용하는 방식을 혁신할 수 있는 미래를 보여줍니다.

TL Browse 프로젝트를 통해 사용자는 웹 페이지를 실시간으로 생성할 뿐만 아니라 생성된 콘텐츠를 사용자 정의하고 다운로드할 수 있습니다. 다음은 AI 생성 웹 페이지를 활용하는 방법입니다:

1. 사용자 정의: 웹 페이지가 생성되면 다양한 요소를 클릭하여 콘텐츠를 쉽게 편집할 수 있습니다. 프로젝트에는 텍스트, 이미지 및 기타 구성 요소를 수정할 수 있는 편집 도구 세트가 제공됩니다.

2. 코드 다운로드: 생성된 페이지에 만족하면 "다운로드" 버튼을 클릭하여 코드를 다운로드할 수 있습니다. 이를 통해 HTML, CSS 및 JavaScript 파일을 얻을 수 있으며, 이를 추가로 사용자 정의하거나 필요에 따라 배포할 수 있습니다.

3. 페이지 새로 고침: 웹 페이지의 새 버전을 생성하려면 "새로 고침" 버튼을 클릭하면 됩니다. 이렇게 하면 현재 URL 또는 입력을 기반으로 새 페이지 인스턴스가 생성됩니다.

4. 저장 및 공유: 이 프로젝트를 통해 캔버스의 현재 상태, 즉 생성된 모든 페이지를 저장할 수 있습니다. 그런 다음 고유한 URL을 다른 사람과 공유할 수 있으며, 다른 사람들도 동일한 AI 생성 웹 페이지를 탐색하고 상호 작용할 수 있습니다.

대규모 언어 모델의 힘을 활용하여 TL Browse 프로젝트는 사용자 입력과 상황에 따라 실시간으로 웹 페이지를 생성하는 "just-in-time" 소프트웨어 생성의 가능성을 보여줍니다. 이 접근 방식은 신속한 프로토타이핑, 콘텐츠 생성 및 개인화된 웹 경험을 위한 새로운 가능성을 열어줍니다.

TLBrowse 시작하려면 Anthropic 및 Clerk 계정을 설정해야 합니다. 다음과 같이 진행하세요:

1. Anthropic 계정 생성:

   • console.anthropic.com에서 Anthropic 웹사이트 콘솔에 접속합니다.
   • "Create key"를 클릭하여 Anthropic API 키를 생성합니다.
   • 생성된 API 키를 복사합니다.

2. Clerk 계정 생성:

   • clerk.com에서 Clerk 계정에 가입합니다.
   • Clerk에서 새 앱을 생성합니다.
   • Clerk 공개 키와 비밀 키를 복사합니다.

3. 환경 변수 구성:

   • Visual Studio Code에서 TLBrowse 프로젝트 폴더로 이동합니다.
   • 프로젝트 루트에 .env.local 파일을 생성합니다.
   • .env.local 파일에 다음 줄을 추가합니다:

     ANTHROPIC_API_KEY="your_anthropic_api_key"
     CLERK_PUBLISHABLE_KEY="your_clerk_publishable_key"
     CLERK_SECRET_KEY="your_clerk_secret_key"
     

   • your_anthropic_api_key, your_clerk_publishable_key 및 your_clerk_secret_key를 이전에 복사한 해당 값으로 바꿉니다.
   • .env.local 파일을 저장합니다.

4. Layout.tsx 파일 업데이트:

   • TLBrowse 프로젝트에서 layout.tsx 파일을 엽니다.
   • ClerkProvider 구성 요소를 찾아 publishableKey 속성을 추가하고 Clerk 공개 키를 전달합니다:

     <ClerkProvider publishableKey="your_clerk_publishable_key">
       {/* 나머지 코드 */}
     </ClerkProvider>
     

   • layout.tsx 파일을 저장합니다.

Anthropic 및 Clerk 계정 설정이 완료되면 TLBrowse 프로젝트를 로컬에서 실행할 수 있습니다.

TLBrowse에서 로컬 또는 사용자 정의 AI 모델을 사용하려면 다음 단계를 따르세요:

1. route.ts 파일에서 cloudModel 값을 사용하려는 모델(예: 'gpt-4')로 바꿉니다.

2. 동일한 route.ts 파일에서 process.env.CLOUD_KEY 값을 OpenAI API 키로 바꿉니다.

3. m.ts 파일에서 process.env.OPENAI_API_KEY 값에 OpenAI API 키를 추가합니다.

4. client.ts 파일에서 OPENAI_URL 값을 로컬 모델의 URL로 바꿉니다.

이러한 변경 사항을 적용하면 TLBrowse 애플리케이션이 기본 Anthropic 모델 대신 로컬 또는 사용자 정의 AI 모델을 사용하게 됩니다. 선택한 모델의 특정 요구 사항에 따라 추가 코드 조정이 필요할 수 있습니다.