Svelte AI chatbot

Korzystając z jednego z modeli sztucznej inteligencji, stworzymy interfejs użytkownika (UI) z frameworkiem Svelte.

Krok po kroku

Repozytorium GitHub

Stwórz nowe repozytorium na GitHubie

Na pasku po lewej

lub w prawym górnym rogu

Edytor GitHub Codespaces

Otwórz projekt w GitHub Codespaces, czyli przeglądarkowym edytorze kodu VSCode.

Po chwili pojawi się edytor z naszym repozytorium. Na razie nie znajdziesz tu żadnego kodu.

Nowy projekt - narzędzie Vite

Aby stworzyć nowy projekt użyjemy polecenia ‘npm create vite’. Dzięki temu stworzenie nowego projektu z ulubionym frameworkiem będzie zdecydowanie prostsze.

npm create vite

Jako nazwę projektu wybieramy ’.’ - projekt przyjmie wtedy nazwę katalogu, w którym się znajduje. Następnie wybierz opcję y, aby usunąć zbędne pliki i utworzyć projekt.

Wybieramy framework Svelte.

Następnie wybieramy język jakiego będziemy używać. W tym projekcie skorzystamy z języka TypeScript, który w zasadzie jest językiem JavaScript z pewnymi ulepszeniami.

Dzięki skorzystaniu z narzędzia Vite, stworzyliśmy nowy projekt w kilka chwil!

Po wygenerowaniu plików projektu, musimy jeszcze pobrać jego zależności, czyli kod, który tworzy framework Svelte i umożliwia nam łatwiejszą pracę nad kodem.

Zanim to zrobimy, dopiszemy jeszcze do zależności jedną bibliotekę, z której skorzystamy do obsługi modeli AI.

Dodatkowe zależności - biblioteka HuggingFace

Hugging Face Inference API NPM

npm install @huggingface/inference

Dopisanie bibliotek do zależności nie instaluje ich, dlatego po każdorazowej zmianie wymagane jest ponowne uruchomienie polecenia ‘npm install’

Aby pobrać zależności wykonaj w terminalu polecenie:

npm install

Pobierze to wszystkie zależności zapisane w pliku ‘package.json’.

{
"name": "svelte-chatbot", // nazwa projektu
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": { // definicje poleceń do wykonania przez npm run dev/build/preview/check
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"check": "svelte-check --tsconfig ./tsconfig.json"
},
"devDependencies": { // zależności deweloperskie - narzędzia, które pomagają nam pisać kod
"@sveltejs/vite-plugin-svelte": "^2.4.2",
"@tsconfig/svelte": "^5.0.0",
"svelte": "^4.0.5",
"svelte-check": "^3.4.6",
"tslib": "^2.6.0",
"typescript": "^5.0.2",
"vite": "^4.4.5"
},
"dependencies": { // zależności aplikacji - znajdą się w finalnej wersji aplikacji
"@huggingface/inference": "^2.6.4"
}
}

Podgląd strony

Aby włączyć aplikację, wykonaj polecenie:

npm run dev

Następnie przytrzymaj klawisz Ctrl i kliknij w link zaczynający się od słowa “localhost” lub po prostu kliknij zielony przycisk w prawym dolnym rogu. W nowym oknie powinna pojawić się szablonowa strona Vite + Svelte.

Uff, ustawiliśmy już projekt i możemy ruszać do kodu, ale…

Klucz API HuggingFace

Zanim przejdziemy do kodu potrzebujemy klucza API, aby skorzystać z wytrenowanego modelu danych. Załóż konto w serwisie HuggingFace i aktywuj je na skrzynce mailowej. Po udanej aktywacji utwórz swój prywatny klucz dostępu do API

Skopiuj klucz i utwórz nową zmienną środowiskową w pliku ‘.env’ w następujący sposób:

VITE_HUGGING_FACE_ACCESS_TOKEN="twój klucz dostępu"

Zmienne środowiskowe służą do przechowywania prywatnych danych, czy konfiguracji niektórych parametrów aplikacji. W przypadku Vite, aby utworzyć zmienną, która będzie widoczna w aplikacji, należy poprzedzić nazwę naszej zmiennej (dodać prefix) ‘VITE_‘.

<script lang="ts">
import { HfInference } from "@huggingface/inference" // importujemy potrzebne narzędzie z biblioteki HuggingFace

let userInput: string;
let promise: Promise<string>;
const hf = new HfInference(import.meta.env.VITE_HUGGING_FACE_ACCESS_TOKEN) // konfigurujemy narzędzie z naszym kluczem dostępu

async function ask() {
    const blob = await hf.textToImage({ // interesujący nas sposób interakcji z danym modelem - w tym wypadku text zamieniany na obraz
    model: "stabilityai/stable-diffusion-xl-base-1.0", // konkretny model ze strony HuggingFace
    inputs: userInput // dane wejściowe użytkownika
    })
    return URL.createObjectURL(blob)
}

function handleKeyPress(e: KeyboardEvent) {
    if (e.key == "Enter") {
         generatePromise()
    }
}

function generatePromise() {
    promise = ask()
}
</script>

<main>
{#await promise}
    Loading
{:then image}
    {#if image}
         <img src={image} alt="Generated art">
    {:else}
        Text to image
    {/if}
{/await}

    <input type="text" bind:value={userInput} on:keypress={handleKeyPress}>
    <button on:click={generatePromise}>Send</button>
</main>