想建立更好的chatgpt版本吗？这是如何使用OpenAi的Chat completions API将机器人参与者添加到您的Vaadin聊天应用程序中。
创建一个新的聊天应用程序项目
使用start.vaadin.com上的服务，创建一个新的Vaadin应用程序。实际上，有一个完整的聊天示例模板，但是“ Hello World”示例足够了。
创建一个简单的聊天UI
使用vaadin的MessageList和MessageInput，创建一个简单的聊天UI：
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致电
下一步是有趣的一步。 OpenAi有一个Java API，但是Chatgpt可以创建一个简单的REST API来自称Java？要正确的步骤，但是是的，它可以。这是我问的，所以你明白了...
编写一个名为“ OpenAi”的简单Java类，以调用完成使用“发送”方法聊天API，该方法将最新的用户输入作为参数并返回更新的聊天消息。提供内部类“ ChatRequest”和“ ChatResponse”，并使用Jackson ObjectMapper进行通信。
[...]
该代码使用基本完成API，而不是api.openai.com/v1/chat/completions上的聊天完成API端点。您可以调整代码吗？
[...]
将“发送的返回值”更改为内部类“ 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()));
}
结合了从消息到MessageListItem的直接转换：
private MessageListItem convertMessage(OpenAI.Message msg) {
return new MessageListItem(msg.getContent(),
msg.getTime(),
formatName(msg.getRole()));
}
异步聊天
要使聊天更加实时，需要几个步骤
通过添加@Push in Application class并
启用Websocket
使用openai.sendasync代替返回CompletableFuture
注意：在异步回调中更新UI，将其包装到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()));
});
});
java
结论
很好。 vaadin组件提供了一种很好的外观和感觉，您可以轻松地根据自己的需求自定义它们。完整的源代码可以在GitHub上为您的（和AI）灵感提供：github.com/samie/vaadin-openai-chat
只需在application.properties中更新openai.apikey，就可以自己尝试。
继续从这里继续，如果您已经看到了我的voice activation tips for Vaadin，您可以猜测这是在哪里。