Bina Chatbot Mudah dengan Svelte dan ElizaBot

Bina Chatbot Mudah dengan Svelte dan ElizaBot

Pernahkah anda mahu mencipta bot sembang mudah? Dalam artikel ini, kami akan menggunakan Svelte dan ElizaBot klasik untuk membina aplikasi chatbot yang ringan. Anda akan belajar cara mengendalikan interaksi pengguna, mengurus keadaan reaktif dan juga mensimulasikan kelewatan menaip untuk pengalaman yang realistik.

Jom selami!

---

Prasyarat

Untuk mengikuti, anda memerlukan:

• Pengetahuan asas Svelte.
• Persekitaran kerja untuk membina apl Svelte. Jika anda tidak mempunyainya, lihat panduan Bermula Svelte.

---

Menyediakan Projek

Mulakan dengan memasang ElizaBot, perpustakaan chatbot mudah:

npm install elizabot

Buat apl Svelte baharu menggunakan kaedah pilihan anda, kemudian masukkan kod berikut dalam fail komponen Svelte (cth., Chatbot.svelte).

---

Kod

Berikut ialah kod lengkap untuk chatbot:

Skrip

<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>

Penggayaan

<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>

Penanda HTML

<div>




<hr>

<h2>
  
  
  Bagaimana Ia Berfungsi
</h2>

<ol>
<li>
<p><strong>Pengendalian Input Pengguna</strong>:</p>

<ul>
<li>Apabila pengguna menaip mesej dan menekan "Enter," ia ditambahkan pada tatasusunan ulasan dengan pengarang ditetapkan sebagai pengguna.</li>
</ul>
</li>
<li>
<p><strong>Balasan ElizaBot</strong>:</p>

<ul>
<li>Mesej dihantar kepada ElizaBot untuk mendapatkan respons menggunakan eliza.transform(teks).</li>
<li>Mesej pemegang tempat (...) ditunjukkan semasa kelewatan menaip simulasi. Respons akhir kemudiannya dipaparkan selepas kelewatan rawak yang singkat untuk mensimulasikan penaipan.</li>
</ul>
</li>
<li>
<p><strong>Tatal Auto</strong>:</p>

<ul>
<li>Kait kitaran hayat beforeUpdate dan afterUpdate memastikan sembang secara automatik menatal ke mesej terkini melainkan pengguna menatal ke atas secara manual.</li>
</ul>
</li>
<li>
<p><strong>Penggayaan</strong>:</p>

<ul>
<li>Mesej daripada bot dan pengguna digayakan secara berbeza menggunakan kelas CSS dinamik (eliza dan pengguna). Ini membantu membezakan secara visual antara respons bot dan input pengguna.</li>
</ul>
</li>
</ol>


<hr>

<h2>
  
  
  Menjalankan Apl
</h2>

<p>Mulakan apl Svelte anda, dan anda akan melihat antara muka sembang dengan ElizaBot. Cuba taip mesej dan lihat bot bertindak balas. Kelewatan memberikan rasa semula jadi kepada interaksi.</p>


<hr>

<h2>
  
  
  Penambahbaikan
</h2>

<p>Ingin mengambil perkara ini lebih jauh? Berikut ialah beberapa idea:</p>

• Tambah Butang Hantar: Sertakan butang untuk menghantar mesej selain daripada menekan "Enter." Ini boleh meningkatkan kebolehaksesan dan pengalaman pengguna.
• Respons Khusus Kata Kunci: Tingkatkan respons ElizaBot dengan menambahkan logik tersuai untuk kata kunci atau frasa tertentu.
• Cap Masa Mesej: Paparkan cap masa untuk setiap mesej untuk memberikan sembang rasa yang lebih realistik.
• Persist Chat History: Simpan sejarah sembang dalam storan setempat atau pangkalan data supaya pengguna boleh melawat semula perbualan mereka sebelum ini.
• Animasi Menaip: Tambahkan animasi atau pemutar untuk ElizaBot untuk menjadikan kelewatan menaip lebih menarik secara visual.
• Responsif Mudah Alih: Pastikan antara muka sembang menyesuaikan diri dengan baik pada saiz skrin yang berbeza untuk pengalaman yang lancar pada peranti mudah alih.

---

Kesimpulan

Dalam tutorial ini, kami membina chatbot mudah menggunakan Svelte dan ElizaBot. Contoh ini menunjukkan kereaktifan dan cangkuk kitaran hayat Svelte dalam tindakan, sambil turut menyediakan cara yang menyeronokkan dan interaktif untuk bereksperimen dengan chatbots.

Atas ialah kandungan terperinci Bina Chatbot Mudah dengan Svelte dan ElizaBot. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!