AI-Powered Chatbot 구축

Sep 12, 2025
어떻게
An illustration showing an android with an electronic brain in front of a globe marked with symbols indicated technological advancement, such as binary code, molecules and communications relays.

인공 지능 (AI)을 사용하면 환경 전략을 재검토하는 것에서 우리가 배우는 방법에 이르기까지 기존 문제를 보는 새로운 방식을 만들 수 있습니다. 프로젝트 - 앱, 웹 사이트 또는 게임이 AI를 활용할 수 있는지 여부에 관계없이 더 많은 결합, 사용하기 쉽고 가치있는 결과가 있습니다. 그러한 방법 중 하나는 사용자가 사이트와 상호 작용하는 데 도움이되는 자연스러운 채팅봇을 만드는 것입니다.

첫 번째 chatbot을 만들려면 Google의 새로운 대화 상자 툴 세트를 사용할 것입니다. 그것은 강력한 기계 학습뿐만 아니라 음성 - 텍스트를 이용합니다. 그것은 당신의 웹 사이트에 위젯으로 권리가 있거나 필요에 맞게 사용자 정의 할 수 있습니다.

새로운 사이트를 계획하는 과정에있는 경우 이상에서 모든 것에 대한 조언이 필요합니다. 웹 사이트 빌더 어느 것 웹 호스팅 서비스를 선택할 수 있으므로 가이드를 확인하십시오. 새 디자인 시스템 만들기? 안전하게 저장하십시오 클라우드 스토리지 그래서 그것은 당신의 전체 팀에 액세스 할 수 있습니다. 이제 chatbot을 만드는 방법에 ...

01. 계정을 만듭니다

이동 dialkflow.com 계정을 만드십시오. 로그인하여 대화 상자가 계정에 액세스 할 수 있도록 권한에 동의하십시오.

02. 에이전트를 만듭니다

DialogFlow는 '상담원'이라는 용어를 사용하여 AI의 인스턴스를 나타냅니다. 에이전트를 가상 인텔리전스로 생각하십시오. 당신은 자체 성격과 목적으로 각각 당신을 위해 일하는 많은 요원을 가질 수 있습니다.

'에이전트 생성'버튼을 클릭하고 에이전트의 이름을 입력하십시오. 'HAL 9000'.

03. 의도를 만듭니다

첫째, 의도를 만들어야합니다. 우리는 사용자의 입력의 '의도'를 정의하고 있습니다. '의도 생성'을 클릭하고 '문 열림'을 입력하십시오. '저장'을 누릅니다.

04.이 의도를 위해 AI를 훈련시킵니다

An image showing the Google Dialogflow interface – in the box that's marked 'USER SAYS', it reads 'open the door hal' and in the box marked 'DEFAULT RESPONSE', it reads 'Sorry Dave. I can't do that now'.

사용자가 사용할 구절을 제공하여 AI를 훈련시킵니다.

사용자가 사용할 수있는 문구를 제공 하여이 의도에 대한 AI를 훈련시킵니다. NLP AI는 이들 및 파생 된 변형을 사용하여 에이전트를 훈련시킵니다. '교육 문구'창에 다음 훈련구를 추가하고 원하는만큼 많은만큼을 추가하십시오.

  • '포드 베이 문을 엽니 다.'
  • '문을 열어 라.'
  • '나를 놔둬 라!'

05. 응답 추가

그런 다음 에이전트가 응답 할 답변을 추가해야합니다. '응답'창에이를 입력하십시오. 이렇게 시도해보십시오.

  • '나는 그럴 수 없다는 것을 두려워한다, 데이브.'
  • '나는 지금 그럴 수 없다.'

그런 다음 '응답 추가'와 '저장'을 다시 눌러서 다시 눌러 둡니다. 에이전트가 훈련중인 알림이 표시되고 준비가되었습니다.

06. chatbot을 테스트하십시오

화면의 오른쪽에는 테스트 도구가 있습니다. ChatBot은 Google의 음성 대접 서비스를 사용하여 음성을 텍스트로 변환 할 것입니다. 귀하의 요청 결과와 AI 에이전트가 선택한 응답을 확인해야합니다. 매우 멋지다!

07. 엔티티를 만들고 사용하십시오

엔티티는 에이전트의 응답에서 변수로 정의되고 재사용 될 수있는 개념입니다. 사용자가 감정을 표현하는 경우에 AI를 훈련시켜 사용자에게 응답 할 때 사용하도록하십시오.

왼쪽 메뉴에서 '엔티티'를 클릭하십시오. 새 엔티티의 이름에 대한 '감정'을 입력하십시오. '동의어를 정의하십시오'확인하십시오. 아래 표를 클릭하고 첫 번째 감정으로 '화난'을 입력하십시오. 그런 다음 해당 오른쪽을 클릭하고 '미친', '화가'등과 같은 동의어를 추가하십시오. 그런 다음 '무서워'에 대한 다른 항목을 추가하고 동의어를 사용하여 동의어를 사용하십시오. '겁에 질 렸습니다'. 완료되면 '저장'을 누릅니다.

이것은 이제이 요원에게 '화난'및 '무서워'가 사용자가 의사 소통 할 수있는 감정입니다. 이러한 모든 동의어는 발생할 수있는 변형입니다. AI가 일부를 생성 할 것입니다.

08. 새로운 의도를 만듭니다

이제 우리는 우리가 만든 '감정'엔터티를 사용하는 새로운 의도를 창출 할 것입니다. 이 의도의 '감정'을 호출하고 '저장'을 클릭하십시오.

다음으로 '당신은 나를 겁나는', '나를 화나게하고 두려워하는 키워드의 변형을 사용하여'나를 화나게하고 있습니다. '와 같은 새로운 훈련구를 추가하십시오. 이것은 사용자 가이 감정적 인 성명서를 구절할 수있는 다양한 방법을 이해하기 위해이 요원을 훈련시킵니다.

시스템이 무서워하고 화가 난 단어를 강조하는 것을 알 수 있습니다. 그것은 이미 이것을 엔티티로 플래그로하고 있습니다. 또한 '동작 및 매개 변수'창에 항목을 추가했습니다. 이를 통해 이러한 엔티티를 응답으로 사용할 수 있습니다.

09. 새로운 '감정'엔터티를 사용하여 응답 추가

응답 창 에서이 새 엔티티를 사용하는 새로운 응답을 추가하십시오. '$ Emotion'엔티티를 나타내는 '$'를 기록하십시오. 이러한 응답을 추가 해보십시오.

  • '나는 당신이 $ 감정, 데이브를 느끼는 것을 유감스럽게 생각합니다.'
  • '$ 감정을 느끼는 것은 인간의 반응, 데이브입니다.'

'응답 추가'를 클릭하고 화면 상단의 '저장'버튼을 눌러 전체 의도를 저장하십시오.

10. Chatbot을 다시 테스트하십시오

테스트 도구에서 다음 문구를 말하거나 입력하십시오.

  • '너는 나를 매우 화가났다.'
  • '너는 나를 괴롭 히고있어.'

두 번째 두 번째로 '무서워'를 사용하여 어떻게 반응하는지 확인하십시오. 우리가 무서워했음을 알기 위해 동의어를 사용했습니다. 매우 멋지다.

원하는 더 많은 의도와 응답을 추가하고 웹 페이지에 추가 할 수있는 더 많은 의도와 응답을 추가 할 수 있습니다.

11. 웹 통합을 활성화하십시오

An image showing Google Dialogflow's pop-up featuring a direct link and embeddable HTML snippet for a created chatbot.

웹 데모를 클릭하면 코드 스 니펫이 표시되어 위젯을 자신의 웹 사이트에 삭제할 수 있습니다.

웹 페이지에 추가하려면 왼쪽 메뉴에서 '통합'을 클릭하십시오. 그런 다음 '웹 데모'상자를 클릭하여 해당 옵션을 켭니다.

즉시 통합을 테스트하는 데 사용할 수 있도록 직접 링크를 보여주는 팝업이 나타납니다. 또한 위젯을 자신의 웹 사이트에 삭제하는 데 사용할 수있는 코드 스 니펫을 표시합니다. 이 스 니펫을 클립 보드로 복사하여 사이트에 붙여 넣을 수 있습니다.

12. 기본 웹 페이지를 만들고 스 니펫을 추가하십시오.

기본 HMTL 페이지를 만들고 해당 코드 스 니펫을 포함하십시오. 다음 코드를 사용해 보시고 서버에 업로드하거나 로컬 서버에서 실행하십시오. 아래의 스 니펫을 대화 상자에서 복사 한 것과 함께 바꿉니다.

& lt; doctype html & gt; & lt; html & gt; & lt; head & gt; & lt; Title & gt; net - ai chatbot & lt; / title & gt; & lt; / head & gt; & lt; body & gt; & lt; iframe. 허용 = "마이크" 너비 = "350"높이 = "430"src = "https://console.dialogflow.com/api-client/demo/embedded/bbd27d04-5546-4b62-85a5-c373575a333aa"& gt; & lt; / iframe & gt; & lt; / body & gt; & lt; / html & gt;

이 기사는 원래 웹 디자이너 및 개발자를위한 세계에서 가장 잘 판매하는 잡지 인 NET 312에 발표되었습니다. 구매 312. 또는 Net에 가입하십시오 ...에

Keen 당신이 당신의 사이트와 앱으로 아이를 어떻게 가져올 수 있는지에 대해 자세히 알아보십시오.

An image promoting generate New York 2019 from April 24th -25th and speaker Josh Clark's keynote 'AI is your new design material'.

웹 디자이너를위한 수상 경력이있는 컨퍼런스, 4 월 24 일부터 25 일까지 NYC로 돌아갑니다! 티켓을 예약하려면 www.generateconf.com을 방문하십시오

AI를 디자인으로 가져올 수있는 방법에 대해 더 자세히 알아 보려면? 큰 매체 설립자 인 Josh Clark는 4 월 25 일에 뉴욕을 생성하는 AI가 새로운 디자인 자료입니다. 당신의 일상적인 일.

4 월 24 일부터 25 일까지 뉴욕을 창출합니다. 지금 티켓을 받으십시오 ...에!

관련 기사:

  • Google의 클라우드 비전 가이드
  • 2019 년 7 명의 거대한 기술 동향이 디자이너가 알아야 할 필요성
  • 디자이너가 로봇으로 대체됩니까?

어떻게 - 가장 인기있는 기사

Instagram에서 재 게시하는 방법

어떻게 Sep 12, 2025

(이미지 크레디트 : 재 게시 : Instagram) Instagram에서 다시 게시하려는 경우 다른 소셜 네트�..


그리드와 FlexBox가있는 블로그 만들기

어떻게 Sep 12, 2025

지난 2 ~ 3 년 동안 도약과 경계에서 레이아웃이 앞으로 나아가는 것을 보았습니다. 이제 이러한 �..


vue.js로 앱을 만드는 방법

어떻게 Sep 12, 2025

JavaScript 생태계는 10 년 이상 변화하고 있으며, 프런트 엔드 개발자는 새로운 기술을 추적해야합�..


아트웍을 장착하는 방법

어떻게 Sep 12, 2025

잘 실행 된 마운트는 단순한 것 이상입니다. 아트 기술 공구 벨트에 추가하려면. 작업�..


정통 만화 만화 스트립을 만드는 방법

어떻게 Sep 12, 2025

[삼] 페이지 1 / 2 : 페이지 1 페이지 1 2 쪽 스타일과 끝내는 동안 만..


3ds Max와 V-Ray에서 현실적인 3D 모피와 모피를 만드십시오

어떻게 Sep 12, 2025

놓치지 마라 정점 2018. , CG 커뮤니티에 대한 데뷔 이벤트. 게임, vfx �..


파스텔이있는 풍경을 그리는 방법

어떻게 Sep 12, 2025

이 게시물은 파스텔이있는 풍경을 그리는 법을 가르쳐 줄 것입니다. 부드러운 파스텔을 사용할 �..


만화 커버를 만드는 전통 및 디지털 기술을 결합하십시오

어떻게 Sep 12, 2025

몇 년 동안 나는 디지털로 일함으로써 협박당했습니다. 플라스틱 표면에 플라스틱 펜촉에 관한 �..


카테고리