مسیر مبارک: ساخت یک چت بات در Vaadin با OpenAI

آیا می خواهید نسخه بهتری از ChatGPT بسازید؟ در اینجا نحوه استفاده از OpenAI’s Chat Completions API برای افزودن یک شرکت کننده ربات به برنامه چت Vaadin خود آورده شده است.

یک پروژه برنامه چت جدید ایجاد کنید

با استفاده از سرویس start.vaadin.com، یک برنامه Vaadin جدید ایجاد کنید. در واقع یک نمونه الگوی کامل چت وجود دارد، اما نمونه “سلام جهان” برای این کار کافی است.

یک رابط کاربری چت ساده ایجاد کنید

با استفاده از MessageList و MessageInput از Vaadin، یک رابط کاربری چت ساده ایجاد کنید:

public class ChatView extends VerticalLayout {
    private MessageList chat;
    private MessageInput input;

    public ChatView() {
        chat = new MessageList();
        input = new MessageInput();
        add(chat, input);
    input.addSubmitListener(this::onSubmit);
    }
}

و برای اینکه همه چیز به خوبی هماهنگ شود:

this.setHorizontalComponentAlignment(Alignment.CENTER, 
        chat, input);
this.setPadding(true); // Leave some white space
this.setHeightFull(); // We maximize to window
chat.setSizeFull(); // Chat takes most of the space
input.setWidthFull(); // Full width only
chat.setMaxWidth("800px"); // Limit the width
input.setMaxWidth("800px"); 

OpenAI Java API برای تماس ایجاد کنید

مرحله بعدی مرحله جالب است. یک Java API برای OpenAI وجود دارد، اما آیا ChatGPT می‌تواند یک REST API ساده برای فراخوانی خود از جاوا ایجاد کند؟ چند قدم طول کشید تا درست شد، اما بله، می تواند. این چیزی است که من پرسیدم تا شما ایده بگیرید …

یک کلاس جاوا ساده به نام «OpenAI» بنویسید تا تکمیل‌ها را برای چت API با یک روش «ارسال» فراخوانی کنید که آخرین ورودی کاربر را به عنوان پارامتر می‌گیرد و پیام‌های چت به‌روز شده را برمی‌گرداند. کلاس های داخلی “ChatRequest” و “ChatResponse” را ارائه دهید و از Jackson ObjectMapper برای ارتباط استفاده کنید.

آن کد از API تکمیل اولیه استفاده می کند، نه نقطه پایانی API تکمیل چت در api.openai.com/v1/chat/completions. میشه کد رو تنظیم کنی

مقدار بازگشتی send را به جای آرایه‌ای از رشته‌ها، به فهرستی از نمونه‌های کلاس داخلی «ChatMessage» تغییر دهید.

کلاس ChatResponse را برای مطابقت با JSON زیر تغییر دهید:

یک متد sendAsync بنویسید که متد OpenAI.send را به صورت ناهمزمان فراخوانی کند.

و غیره. در نهایت، با برخی اصلاحات دستی، ما اینجا هستیم. همونجوری که من میخواستم کامپوننت فنری، کد بسیار خوانا.

برنامه Vaadin را با شما چت کنید

برای فراخوانی همزمان نقطه پایانی گپ OpenAI ساده است، یک شنونده ارسال را به MessageInput اضافه کنید:

input.addSubmitListener(this::onSubmit);

و روش را اجرا کنید:

private void onSubmit(MessageInput.SubmitEvent submitEvent) {
    List<OpenAI.Message> messages =
            openAI.send(submitEvent.getValue());     
    chat.setItems(messages.stream()
            .map(this::convertMessage)
            .collect(Collectors.toList()));
}

که همراه با تبدیل مستقیم از Message به MessageListItem:

private MessageListItem convertMessage(OpenAI.Message msg) {
    return new MessageListItem(msg.getContent(),
                            msg.getTime(),
                            formatName(msg.getRole()));
}

چت ناهمزمان

برای اینکه چت در زمان واقعی تر رفتار کند، چند مرحله لازم است
با افزودن @Push در کلاس Application و به سوکت‌های وب را فعال کنید
به جای آن از OpenAI.sendAsync برای برگرداندن CompletableFuture استفاده کنید

توجه داشته باشید: برای به روز رسانی رابط کاربری در پاسخ به تماس ناهمزمان، آن را در یک تماس UI.access قرار دهید.

@Push
public class Application implements AppShellConfigurator {
    // ...
}

private void onSubmit(MessageInput.SubmitEvent submitEvent) {
openAI.sendAsync(submitEvent.getValue())
    .whenComplete((messages, t) -> {
        // Lock the Vaadin UI for updates
        getUI().get().access(() -> {
            chat.setItems(messages.stream()
                        .map(this::convertMessage)
                        .collect(Collectors.toList()));
        });
    });

جاوا

نتیجه

خوب بود اجزای Vaadin ظاهر و احساس خوبی را ارائه می دهند و شما به راحتی می توانید آنها را مطابق با نیازهای خود سفارشی کنید. کد منبع کامل دوباره برای الهام گرفتن شما (و هوش مصنوعی) در GitHub در دسترس است: github.com/samie/vaadin-openai-chat

فقط openai.apikey را در قسمت آپدیت کنید application.properties و شما خوب هستید که خودتان آن را امتحان کنید.

در ادامه از اینجا، اگر قبلاً نکات فعال‌سازی صوتی من برای Vaadin را دیده‌اید، می‌توانید حدس بزنید که به کجا می‌رود.