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

11.5K 00

일반 소개

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

기능 목록

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

도움말 사용

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

설치 프로세스

프로젝트 코드 다운로드
터미널에서 다음 명령을 실행하여 딥챗 소스 코드를 가져옵니다:

git clone https://github.com/OvidijusParsiunas/deep-chat.git

디렉토리로 이동하여 종속성을 설치합니다.
프로젝트 폴더로 이동합니다:

cd deep-chat

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

npm install

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

npm run build

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

npm run build:watch

로컬 테스트
로컬 서버를 시작합니다:

npm run start

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

React 사용자(선택 사항)
React를 사용하는 경우 특별 버전을 설치하세요:

npm install deep-chat-react

코드에 도입되었습니다:

import 'deep-chat-react';

단일 파일 패키지 생성(선택 사항)
독립형 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"}' />
```
레드파자마, 타이니라마 등의 모델이 지원됩니다.

작업 흐름의 예

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

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

애플리케이션 시나리오

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

QA

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