Texture synthesis web interface

The purpose of this interface is to make this tool easier to use by anybody who does not necessarily knows how to use a command line interface. It consists in a simple websocket interface and web app.

screenshot of the current look of the web app

How to use it

Build the release binary (debug is way too slow)

cargo build --release

Run the binary with

./target/release/texture-synthesis-webui

It should display

listening on port 3012

Then open app/front.html in your browser.

Basic functioning

Rust defines several messages that can be send and encodes it in CBOR format before sending it in the websocket channel.

#[derive(Debug, Serialize, Deserialize)]
enum Response {
    Message(String),
    Image(Vec<u8>),
    ProgressStatus(ProgressStatus),
}

JavaScript decodes the CBOR encoded messages and displays the content to the user.

this.socket = new WebSocket("ws://127.0.0.1:3012/");
this.socket.binaryType = "arraybuffer";

this.socket.onmessage = function (event) {
    var message = CBOR.decode(event.data);
    var message_type = Object.keys(message)[0]; // there must be only one key (enum)
    switch (message_type) {
        case "Message":
            // ...
            break;

        case "Image":
            // ...
            break;

        case "ProgressStatus":
            // ...
            break;

        default:
            console.log("invalide message");
            break;
    }

TODO

This is only a very basic (but working) prototype. A lot of things remain to be done

• give access to parameters (image size, subcommands...)
• write basic css for the layout
• look at the TODOs in the code