딥챗: 빠른 웹사이트 통합을 위한 AI 채팅 컴포넌트

최신 AI 리소스4 개월 전에 게시 됨 AI 공유 서클
1.6K 00

일반 소개

딥챗은 웹 개발자를 위해 설계된 오픈 소스 AI 채팅 컴포넌트입니다. Ovidijus Parsiunas가 개발하여 GitHub에서 호스팅하고 있으며 현재 2,000개 이상의 별을 보유하고 있습니다. 사용자는 간단한 구성을 통해 웹사이트에 통합할 수 있으며, OpenAI, HuggingFace 또는 사용자 지정 서비스와 같은 주류 AI 인터페이스와의 연동을 지원합니다. 인터페이스 스타일과 기능을 유연하게 조정할 수 있어 사용자 정의가 가능하다는 점이 가장 큰 장점이며, 딥챗은 음성 입력, 텍스트 음성 변환 및 파일 업로드도 지원하며 서버 지원 없이 브라우저에서 직접 소규모 AI 모델을 실행할 수도 있습니다. 공식 문서가 철저하고 예제가 풍부하여 쉽게 시작할 수 있습니다.

Deep Chat:快速集成到网站的AI聊天组件

 

기능 목록

  • OpenAI, HuggingFace, Cohere, Azure 및 기타 AI 인터페이스와의 연동을 지원합니다.
  • API 구성을 통해 사용할 수 있는 사용자 지정 서비스 연결 기능을 제공합니다.
  • 음성 입력 및 텍스트 음성 변환을 지원하여 사용자가 자신의 목소리로 상호작용할 수 있습니다.
  • 카메라로 사진을 찍고 마이크로 녹음하여 멀티미디어 파일을 업로드할 수 있습니다.
  • 코드와 구조화된 텍스트를 쉽게 표시할 수 있도록 마크다운 서식을 지원합니다.
  • 아바타 및 이름 설정과 메시지 그룹화 기능을 제공합니다.
  • 사용자가 기능을 이해하는 데 도움이 되는 소개 패널과 동적 팝업이 포함되어 있습니다.
  • 백엔드 지원 없이 브라우저에서 소규모 AI 모델을 실행할 수 있도록 지원합니다.
  • React, Vue, Angular 등과 같은 주요 UI 프레임워크와 호환됩니다.
  • 메시지 상자 및 버튼 모양을 포함한 인터페이스 스타일을 사용자 지정할 수 있습니다.

 

도움말 사용

딥챗의 설치 및 사용 단계는 명확하고 간단합니다. 아래는 설치부터 운영까지 전체 상황을 파악하는 데 도움이 되는 자세한 가이드입니다.

설치 프로세스

  1. 프로젝트 코드 다운로드
    터미널에서 다음 명령을 실행하여 딥챗 소스 코드를 가져옵니다:
git clone https://github.com/OvidijusParsiunas/deep-chat.git
  1. 디렉토리로 이동하여 종속성을 설치합니다.
    프로젝트 폴더로 이동합니다:
cd deep-chat

필요한 종속성을 설치합니다:

npm install
  1. 구성 요소 구축
    빌드 명령을 실행하여 사용 가능한 파일을 생성합니다:
npm run build

코드의 효과를 실시간으로 미리 확인해야 하는 경우 사용할 수 있습니다:

npm run build:watch
  1. 로컬 테스트
    로컬 서버를 시작합니다:
npm run start

브라우저를 열고 다음 사이트를 방문하세요. http://localhost채팅 화면을 볼 수 있습니다.

  1. React 사용자(선택 사항)
    React를 사용하는 경우 특별 버전을 설치하세요:
npm install deep-chat-react

코드에 도입되었습니다:

import 'deep-chat-react';
  1. 단일 파일 패키지 생성(선택 사항)
    독립형 JS 파일이 필요한 경우 실행하세요:

    npm run build:bundle
    

    출력 파일은 dist/deepChat.bundle.js.

AI 서비스 연결

딥 채팅은 다양한 연결 방법을 지원하며 구성이 쉽습니다.

  • 연결 OpenAI
    HTML에 다음 코드를 추가합니다:

    <deep-chat directConnection='{"openAI": {"key": "你的API密钥"}}' />
    

    참고: 이 방법은 개발용으로 사용할 수 있으며, 온라인에서는 프록시 서비스를 사용하여 키를 숨기는 것이 좋습니다.

  • Azure OpenAI에 연결
    Azure 서비스를 구성합니다:

    <deep-chat directConnection='{"azure": {"openAI": {"key": "你的密钥", "endpoint": "你的端点"}}}' />
    
  • 맞춤형 서비스
    설정 request 속성을 사용하여 자체 API에 인터페이스할 수 있습니다:

    <deep-chat request='{"url": "https://你的服务地址/chat"}' />
    

    서비스는 다음에 설명된 대로 딥챗의 요청 및 응답 형식을 지원해야 합니다. deepchat.dev/docs/connect.

  • 인터셉터를 사용하여 데이터 조정
    서비스 형식이 일치하지 않는 경우 인터셉터를 사용하여 조정하세요:

    <deep-chat request='{"url": "https://你的服务地址/chat"}' interceptor='{"onSend": "调整请求数据函数"}' />
    

음성 및 멀티미디어 기능 사용

딥챗의 음성 및 멀티미디어 기능은 사용하기 쉽습니다.

  • 음성 입력 및 출력 활성화
    속성 추가:

    <deep-chat speechToText="true" textToSpeech="true" />
    

    마이크 아이콘을 탭하여 음성으로 입력하면 답장이 자동으로 소리내어 읽혀집니다.

  • 사진 촬영 및 녹화
    카메라와 마이크를 활성화합니다:

    <deep-chat camera="true" microphone="true" />
    

    카메라를 클릭하여 사진을 찍거나 마이크를 클릭하여 녹음하면 파일이 채팅창에 바로 업로드됩니다.

사용자 지정 스타일 및 기능

인터페이스와 기능은 필요에 따라 조정할 수 있습니다.

  • 메시지 스타일 조정하기
    사용자 메시지 말풍선 색상을 수정합니다:

    <deep-chat messageStyles='{"user": {"bubble": {"backgroundColor": "blue"}}}' />
    
  • 패킷 메시징
    메시지 그룹화를 사용 설정합니다:

    <deep-chat groupedMessages="true" />
    
  • 마크다운 지원
    마크다운 렌더링을 활성화합니다:

    <deep-chat markdown="true" />
    

    가져오기 # 标题 가 헤더 형식으로 표시됩니다.

브라우저에서 AI 모델 실행

서버 없이 AI를 사용하세요.

  • 웹 모델 모듈 설치
    실행 명령을 실행합니다:

    npm install deep-chat-web-llm
    
  • 로컬 모델 활성화
    구성 속성:

    <deep-chat webModel='{"model": "RedPajama"}' />
    

    레드파자마, 타이니라마 등의 모델이 지원됩니다.

작업 흐름의 예

  1. 추가 <deep-chat> 레이블.
  2. OpenAI 또는 사용자 지정 서비스와 같은 AI 인터페이스를 구성합니다.
  3. 텍스트를 입력하거나 마이크 음성으로 질문합니다.
  4. 텍스트 음성 변환 기능으로 AI 응답을 보고 들을 수 있습니다.
  5. 사진이나 녹음을 업로드하고 인터페이스 스타일을 조정합니다.

자세한 내용은 다음을 참조하세요. deepchat.dev공식 문서와 예제를 모두 확인할 수 있습니다.

 

애플리케이션 시나리오

  1. 개인 웹사이트 인텔리전트 어시스턴트
    블로그나 포트폴리오 사이트에 딥챗을 통합하면 사용자가 음성이나 텍스트를 사용하여 콘텐츠에 대해 질문할 수 있어 상호작용을 강화할 수 있습니다.
  2. 이커머스 플랫폼 고객 서비스 지원
    딥챗을 사용하여 주문 상태 및 반품 처리와 같은 일반적인 질문에 답변함으로써 인건비를 절감할 수 있습니다.
  3. 온라인 교육을 위한 대화형 도구
    학생들이 딥챗을 통해 강의 중 어려운 부분에 대해 질문하면 AI가 실시간으로 답변해 주기 때문에 원격 학습에 적합합니다.

 

QA

  1. 딥챗은 어떤 AI 서비스를 지원하나요?
    사용자 지정 서비스와의 인터페이스는 물론 OpenAI, HuggingFace, Cohere, Stability AI, Azure 및 AssemblyAI를 지원합니다.
  2. 어떤 프레임워크에서 사용할 수 있나요?
    React, Vue, Angular, Svelte, Next.js 및 기타 주요 프레임워크 지원, 구체적인 예시는 다음을 참조하세요. deepchat.dev/examples/frameworks.
  3. 기록 메시지를 로드하려면 어떻게 하나요?
    활용 loadHistory 인터셉터 비동기 기록 로드, 페이징 지원, 자세한 내용은 다음을 참조하세요. deepchat.dev/docs/interceptors.
© 저작권 정책

관련 문서

댓글 없음

댓글에 참여하려면 로그인해야 합니다!
지금 로그인
없음
댓글 없음...