Svelte 및 ElizaBot을 사용하여 간단한 Chatbot 구축

Svelte 및 ElizaBot을 사용하여 간단한 Chatbot 구축

간단한 챗봇을 만들고 싶었던 적이 있나요? 이 기사에서는 Svelte와 클래식 ElizaBot을 사용하여 가벼운 챗봇 애플리케이션을 구축해 보겠습니다. 사용자 상호 작용을 처리하고, 반응 상태를 관리하고, 현실적인 경험을 위해 타이핑 지연을 시뮬레이션하는 방법도 배우게 됩니다.

들어가자!

---

전제 조건

따라가려면 다음이 필요합니다.

• Svelte에 대한 기본 지식
• Svelte 앱을 구축하기 위한 작업 환경. 없는 경우 Svelte 시작하기 가이드를 확인하세요.

---

프로젝트 설정

간단한 챗봇 라이브러리인 ElizaBot을 설치하는 것부터 시작하세요.

npm install elizabot

원하는 방법을 사용하여 새 Svelte 앱을 만든 후 Svelte 구성 요소 파일(예: Chatbot.svelte)에 다음 코드를 포함합니다.

---

코드

다음은 챗봇의 전체 코드입니다.

스크립트

<script>
    import Eliza from 'elizabot';
    import { afterUpdate, beforeUpdate } from 'svelte';

    let div;
    let autoscroll;
    const eliza = new Eliza();
    let comments = [{ author: 'eliza', text: eliza.getInitial() }];

    function handleKeydown(event) {
        if (event.key === 'Enter') {
            const text = event.target.value.trim();
            if (!text) return;

            comments = comments.concat({ author: 'user', text });
            event.target.value = '';

            const reply = eliza.transform(text);
            setTimeout(() => {
                comments = comments.concat({ author: 'eliza', text: '...', placeholder: true });
                setTimeout(() => {
                    comments = comments.filter((comment) => !comment.placeholder).concat({
                        author: 'eliza',
                        text: reply
                    });
                }, Math.random() * 500);
            }, Math.random() * 200);
        }
    }

    beforeUpdate(() => {
        autoscroll = div && (div.offsetHeight + div.scrollTop) > (div.scrollHeight - 20);
    });

    afterUpdate(() => {
        if (autoscroll) div.scrollTo(0, div.scrollHeight);
    });
</script>

스타일링

<style>
    .chat {
        display: flex;
        flex-direction: column;
        height: 100%;
        max-width: 320px;
    }

    .scrollable {
        flex: 1 1 auto;
        border-top: 1px solid #eee;
        margin: 0 0 0.5em 0;
        overflow-y: auto;
    }

    article {
        margin: 0.5em 0;
    }

    .user {
        text-align: right;
    }

    span {
        padding: 0.5em 1em;
        display: inline-block;
    }

    .eliza span {
        background-color: #eee;
        border-radius: 1em 1em 1em 0;
    }

    .user span {
        background-color: #ea0a0a;
        color: white;
        border-radius: 1em 1em 0 1em;
        word-break: break-all;
    }
</style>

HTML 마크업

<div>




<hr>

<h2>
  
  
  작동 방식
</h2>

<ol>
<li>
<p><strong>사용자 입력 처리</strong>:</p>

<ul>
<li>사용자가 메시지를 입력하고 "Enter"를 누르면 작성자가 사용자로 설정된 댓글 배열에 메시지가 추가됩니다.</li>
</ul>
</li>
<li>
<p><strong>ElizaBot 답변</strong>:</p>

<ul>
<li>eliza.transform(text)을 사용하여 응답을 위해 메시지가 ElizaBot으로 전달됩니다.</li>
<li>시뮬레이션된 입력 지연 중에는 자리 표시자 메시지(...)가 표시됩니다. 그런 다음 입력을 시뮬레이션하기 위해 짧은 무작위 지연 후에 최종 응답이 표시됩니다.</li>
</ul>
</li>
<li>
<p><strong>자동 스크롤</strong>:</p>

<ul>
<li>beforeUpdate 및 afterUpdate 수명 주기 후크는 사용자가 수동으로 위로 스크롤하지 않는 한 채팅이 자동으로 최신 메시지로 스크롤되도록 합니다.</li>
</ul>
</li>
<li>
<p><strong>스타일링</strong>:</p>

<ul>
<li>봇과 사용자의 메시지는 동적 CSS 클래스(eliza 및 사용자)를 사용하여 다르게 스타일 지정됩니다. 이는 봇의 응답과 사용자의 입력을 시각적으로 구별하는 데 도움이 됩니다.</li>
</ul>
</li>
</ol>


<hr>

<h2>
  
  
  앱 실행
</h2>

<p>Svelte 앱을 시작하면 ElizaBot과의 채팅 인터페이스가 표시됩니다. 메시지를 입력하고 봇이 응답하는 것을 지켜보세요. 지연은 상호 작용에 자연스러운 느낌을 줍니다.</p>


<hr>

<h2>
  
  
  향상된 기능
</h2>

<p>더 자세히 설명하고 싶으신가요? 몇 가지 아이디어는 다음과 같습니다.</p>

• 보내기 버튼 추가: "Enter" 키를 누르는 것 외에 메시지를 보내는 버튼을 포함합니다. 이를 통해 접근성과 사용자 경험이 향상될 수 있습니다.
• 키워드별 응답: 특정 키워드나 구문에 대한 맞춤 로직을 추가하여 ElizaBot의 응답을 향상하세요.
• 메시지 타임스탬프: 각 메시지의 타임스탬프를 표시하여 채팅에 더욱 현실적인 느낌을 줍니다.
• 채팅 기록 유지: 사용자가 이전 대화를 다시 방문할 수 있도록 로컬 저장소나 데이터베이스에 채팅 기록을 저장합니다.
• 타이핑 애니메이션: ElizaBot용 애니메이션이나 스피너를 추가하여 타이핑 지연을 시각적으로 더욱 매력적으로 만듭니다.
• 모바일 반응성: 모바일 장치에서 원활한 경험을 위해 채팅 인터페이스가 다양한 화면 크기에 잘 적응하는지 확인하세요.

---

결론

이 튜토리얼에서는 Svelte와 ElizaBot을 사용하여 간단한 챗봇을 구축했습니다. 이 예에서는 Svelte의 반응성 및 수명 주기 후크가 실제로 작동하는 모습을 보여 주는 동시에 챗봇을 실험할 수 있는 재미있고 대화형 방법을 제공합니다.

위 내용은 Svelte 및 ElizaBot을 사용하여 간단한 Chatbot 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!