An AI Chatbot Working On Wickeditor!

Show Your Work
#1

Hey everyone, it’s been a while since I posted anything. I found a way to “create” chatbots by using a server with the gradio-chatbot npm package. This package allows me to use chatbot spaces from huggingface.co, and I can communicate with the chatbots using the WebSocket API.
There are probably other better methods to make chatbots “work” in wickeditor but i’m just sharing here on how i did it :)

I hosted the server on repl.it and here’s the code: https://replit.com/@CosmicKn1ght/DutifulFuzzySign
here’s the wick file and the html file if you’re interested:
ai chatbot.wick (3.4 KB) My Project7-23-2023_13-55-36.html (2.1 MB)

If you’re interested in repoducing it here’s instructions on how you can make your own chatbot:

First, fork this replit or copy this code and host it on a server:

const WebSocket = require(`ws`);
const ws = new WebSocket.Server({
    port: 3000
});

const {
    GradioChatBot
} = require('gradio-chatbot');
const bot = new GradioChatBot({
    url: 'https://huggingface.co/spaces/mosaicml/mpt-30b-chat', // you can replace the url with any huggingface space you want.. you can find them here: https://huggingface.co/spaces
    historySize: 5, // the amount of responses the bot will remember
});

ws.on("connection", (ws) => {
    console.log("Connection Established!")
    ws.send('Connected!')
    ws.on("message", function(msg) {
        async function start() {
            ws.send(await bot.chat(msg.toString()));
        }
        start();
    });
});

Then on the right panel you’ll see something like this:

image

Then copy the link. On your end the link should look something different.

After that create a new project on wick editor and copy and paste this code on the default script of the frame of the first layer:

network.socket = new WebSocket("wss://REPLACE ME WITH THE LINK YOU COPIED");
network.socket.onmessage = function(msg) {
    window.response=msg.dat
    console.log(window.response); // recieve response from the server
};

network.sendToSocket = function(data) {
    if (network.socket.readyState === WebSocket.OPEN && data.length) { // check if the client is already connected to the server and if 'data' has a value
        console.log("Thinking...")
        network.socket.send(data); // send response to the server
    } else if (!data.length) {
        console.log("Input can't be empty!");
    } else {
        console.log("Still connecting...");
    }
};

network.sendToSocket('hello chatbot!');

the function network.sendToSocket() sends a message to the chatbot and the variable window.response contains the response of the chatbot.

And there you have it! Now you can make your own chatbot on wick editor :)
And what’s even more cool about this project is that you can use other npm packages on node to help make your projects even better so yeah.

Most of the code for the server belongs to @pumpkinhead because I basically just took a look at his code at his multiplayer test here so huge credits to pumkinhead :)
Also more info about the npm package here
And of course the huggingface space here

And one more thing, I was experimenting on making a better text input or something, since I don’t like the built-in one. If you guys could, can you give me suggestions on mine? (It’s in the wickfile) Thanks :)
(I might have added some misinformation here so please feel free to correct me if you can!)

Hope you guys found this useful! If you have any questions, please feel free to ask! :)

3 Likes