TL;DR I am now developing a new version of my portfolio site for graduate program applications. Instead of doing it the traditional way, a static webpage that is, I am trying to make a ChatWeb that understands user intentions the way Chatbots do, so as to render more relevant contents with customized layouts.
Technology Stacks: Microsoft LUIS, Azure Functions, React JS, Fetch JS
Since last time…
I have had discussions with friends, a professor at City University of Hong Kong who I have been working with for years, and some startups also called me for short chats since I released the blog post “ChatWeb: Build Websites that understand users with full (free) Microsoft Stack”.
ChatWeb: Build Websites that understand users with full (free) Microsoft Stack_Chatbot has been a hot topic around for sure. I still remember how 4 teams out of the 12 teams in E.C. Jamming, a…_hackernoon.com
Now from the comments, those private chats and messages, I think the last blog post was too tunneled in the technology implementations — And that was because I was truly thrilled and excited to play with the synergies between Microsoft technologies and React to achieve my goal.
However, some of the people did not get that goal, what I was picturing in mind, and assumed that I am building a chatbot for webpages for customer supports or ticket bookings.
But it is not. Well, at least that is not what I am trying to build.
So give me one more chance to further break down the differences of a chatbot and a chatweb and, of course, the concept of ChatWeb in my mind.
ChatBot to ChatWeb
I guess to answer this question, the easier way would be to first explain how a chatbot works.
So from a user’s point of view, a user message first goes through a specific channel, which can be Facebook Messenger, Skype, Slack, etc. Then, the message will be consumed and handled by a series of data processing in which we will leverage Microsoft LUIS to extract the user’s intention (that is, what the user is asking for) and the entities (on which subject).
For example, from a message “How is the weather like in Seattle tody” (even with misspelling words), LUIS should return something like this to the server:
{"intent": "asking weather","entities": ["Seattle"]}
And once the server receives these formulated intentions and subjects, we will be able to feed the users with relevant responses — In the case of asking for weathers again, would most likely to be calling other external APIs to get weather status.
Until this point, ChatWeb works exactly like ChatBots.
The next step for a chatbot is to structure a new message to feed back to the users, which may be “We have a sunny day in Seattle today, yay!” in the example.
But the interaction I would like to have is to return, not just a textual message, links to merchandises or payment gateways, but a new layout of the entire webpages.
Let’s look at the screenshot of the current header of my portfolio page again.
Oh, and that is my father in the background
You see that chatroom area. That is where users input messages to interact with my portfolio page. On particularly a portfolio page, that is really hard to prepare a layout and order of contents that are general enough for all audiences but also specific enough for specific ones.
For instance, some might be interested in my experiences at Microsoft while some others might want to know my journeys in Toronto or Budapest.
The ChatWeb implementation could be a great approach to provide a better Human Computer Interaction in this case.
I can set the default layout to be displaying my internship experiences first and then show the skill-sets following by my projects and spent only a little bit touching on my volunteering job in Budapest. But once a user asks “Can you share more about what happened in Budapest?” My webpage will be able to switch to a new layout with more focuses on contents about the AIESEC exchange.
What do ChatWeb and ChatBot have in common
- Understands users, literally
- Being able to react to different user intentions
How is ChatWeb different from ChatBot
- Doesn’t return messages
- Returns and renders a new and customized layout and contents reacting to the user request
Potential Extensions
Personal digital portfolio suits this structure really well, and there are also a couple extensions on this concept that I can see feasible. For example, a more fuzzy and elastic front page for search engines.
It doesn’t have to be like a generic search engine like Google.
Just take Medium itself as an example, I understand that there are Collaborative Filtering and Machine Learning behind the scene to find relevant feeds to users (as I was working on CF as my Final Year Project), but we might even be able to change the layouts and story feeds real-time with a Chatable and Conversational interface.
Now, I haven’t done researches on such an approach.
Whether it is viable and accepted by users is unknown. But this is just something we haven’t thought about — Especially as computer assistant technologies like Cortana are getting more and more popular, maybe one day, we wouldn’t even be using text searches anymore. Instead, a ChatWeb that can processes these fuzzy and oral conversations into a meaningful and customized layouts to serve customers, might just be better.
Next Steps
I already have the architectural codes setup now. The chatroom you see on the screenshot is fully functional and the extraction of user intentions and entities are being controlled by React State.
The next thing I will be working on is the interaction and rendering decisions.
I also hope to modularize the architecture into a open source and stand-alone React component so that other developers can extend the code base and work on their ChatWeb ideas (just to save a bit of the time, this is really just a straight-forward implementation, again, can refer to my previous blog post on that).
ChatWeb: Build Websites that understand users with full (free) Microsoft Stack_Chatbot has been a hot topic around for sure. I still remember how 4 teams out of the 12 teams in E.C. Jamming, a…_hackernoon.com
If you are interested in such a concept and experienced in managing open-source React components with npm or yarn, feel free to DM me on Twitter. I personally were really not aiming to complete this part soon, as I do need to prepare for GRE and applications of master programs to obtain my OPT and start working with exciting projects in the US.