Vue.js and Django: Modern Multi-Page Website

A while ago I started building a website using Django as its backend and Vue.js as its frontend. Unlike other apps, however, there is a twist: it is multi-page. The website should resemble a normal website built natively on Django, with multiple urls and the ability to jump into any page (without faking it with vue-router) as well as Vue’s reactiveness. So, after digging around various tutorials and guides, none of which fully answered the question, I would like to share my piece in solving the equation.

Introduction and TLDR

This post will start with the basics of using Vue.js and Django. Then, it will move on to use more advanced tools such as webpack to serve the Vue.js frontend on Django. Finally, we will be modifying it a bit to serve multi-page Vue.js.

I have also created a Github repo that includes the finished project of this tutorial. You can check it out at (gundamMC/vue-django-multipage-example).

Continue reading →

Live2D in Electron – live2d-widget.js

As part of a larger project (upcoming), I am currently working on an electron application, which has Live2D as a key feature. After digging around Github, I found xiazeyu/live2d-widget.js, a JavaScript implementation of Live2D.

This tutorial was originally intended for Electron. However, I soon found that it applies to all platforms, not just Electron. Thus, feel free to continue even if you’re using something else. Everything should apply as long as it is HTML-JS based.

Using Live2d in live2d-widget.js

Importing Live2d-Widget.js is easy. Simply download the JavaScript files and then place them in your electron project folder. Then, import Live2d-Widget in your html file.

<script src="L2Dwidget.min.js"></script>

Next, create a canvas for your Live2D figure.

Continue reading →

RNN Repeating Tokens (Tensorflow)

Over the past few months, I’ve been working on a RNN chatbot. However, I soon ran into a weird issue. In short, the network repeatedly outputted the same tokens (often <EOS> or <GO>).  The longer version is on Stack Overflow.

After months of digging around, I’ve finally found the issue. When training a RNN (with TrainingHelper and BasicDecoder), Tensorflow expects the ground-truth inputs with <GO> tokens but then outputs without <GO>. Basically,

Encoder input: <GO> foo foo foo <EOS>
Decoder input/ground truth: <GO> bar bar bar <EOS>
Decoder output: bar bar bar <EOS> <EOS/PAD>

Since I used <GO> in both the inputs and outputs, the model repeated itself. (<GO> -> <GO>, bar -> bar).

After fixing this and a few other small issues, the chatbot started to produce acceptable results. I will be posting an update on the chatbot soon, as this is only a reminder to myself and a tip for the ones having the same issue.

Waifu GUI

Waifu GUI – A WPF GUI for Project Waifu

Waifu GUI

Project Waifu’s speaker verification was great, but it was difficult to use (You even had to manually add the paths inside the scripts). So, I wrote Waifu GUI — A C# WPF powered user interface that writes all of Project Waifu’s complex arguments for you.

As for now, Waifu GUI can pretty much handle everything Project Waifu has at the moment, ranging from getting MFCC data to tuning hyperparameters. It will continue to grow as Project Waifu expands.

Continue reading →

Project Waifu: Speaker Verification

Project Waifu

Project Waifu is a long-term machine learning/deep learning project I will be working on. I will not reveal too much about it, but here’s the first part of the pipeline: speaker verification.

Text-Independent Speaker Verification

Speaker verification is the process of recognizing the identity of the speaker which in this case, is either 1 (is who we want to identify) or 0 (not the person). A lot of algorithms online uses GMMs and/or creates profiles for speakers. For this project, a MLP (multi-layer perception – regular feed-forward neural network) is used and because of the way it is structured, the algorithm performs pretty well.

Continue reading →