60.004 - Service Design Studio 2024

A joint collaboration between SUTD, DBS and Google

⭐WebApp. ⭐Google Site. Hi-Fi Figma Prototype. Miro for all Design Iterations.

VOCUS, is An AI-Powered Single Page Web-App for Customer Feedback Analysis, made by JBAAAM!

Our ultimate goal is to increase efficiency and accuracy in feedback analysis by reducing manual work empowers and enhances the customer experience team in a way that seamlessly integrates into their pre-existing workflow. We aim to improve decision-making and provide a centralized platform that consolidates and analyzes feedback from diverse sources.

⭐Comprehensive features

🤖 Three-Layer AI Automated Feedback Categorization: Using fine-tuned and distilled Gemini language models for the deepest level of categorization.
🗣️ Automated Sentiment Analysis: To gauge customer emotions and sentiments accurately.
📊 In-Depth and Tailored Visualization: Offering insights into categorization to reveal trends and customer reception at a glance.
💡 AI-Driven Recommendations: Generating data-driven, actionable recommendations based on aggregated feedback from diverse sources.

Acknowledgments

Adelaine Suhendro
Avitra Phon
Andrew Yu Ming Xin
Bryan Tan Wei An
Gay Kai Feng Matthew
Joel Lim

Problem Statement

How might we automate the interpretation and classification of all feedbacks and translate it into effective actionable insights that empower the CX team to enhance the customer experience?”

Architecture

Our architecture might seem typical for web applications, but we use a variety of technologies, all learned from scratch.

Programming Languages and Frameworks:

Frontend: TypeScript with React. Deployed as a microservice on Google Cloud Storage
Backend API: Ruby with Rails. Deployed as a microservice on Google Cloud Run
CICD: Developed as GitHub action, and trigger on Pull Request merge.

Overview:

Frontend: Built with TypeScript and React.
Backend API: Uses Ruby on Rails, employing RESTful APIs.
Data processing: Python-based, deployed as serverless functions. Gemini Flask 1.5

This diverse setup has been quite a journey for us!

Front End

Our frontend layer is developed in TypeScript using React. WWe opted for TypeScript because its strong typing enhances robustness against typing errors, though it added some complexity to the development process. Our frontend is hosted on Google Cloud Storage, which is unconventional since it's typically used for file storage, but it works well for our web application. The frontend communicates with the backend via API calls.

Backend API

We designed the backend API to be a pure API layer without business logic, using RESTful APIs as supported by Rails. We developed around 20 APIs, mainly focused on actionable and analytic data models. The upload API is the most complex, as it handles multipart data and integrates with Google Cloud Storage. This API is independently deployable and functions as a microservice, deployed serverlessly via Docker on Google Cloud Run. The build process, including Docker image creation, takes about 10 minutes.

2 microservices

The first microservice is an event-driven service triggered by file uploads to a bucket. It performs data cleanup and validation, enriches the data by calling the Gemini API, and finally stores the clean and curated information in an Analytics table.

The second microservice is an HTTP service called by the backend API. It takes input parameters, reads a subset of analytic records based on those parameters, processes them with an ML model, integrates results from the Gemini API, and stores the final information in an Actionable table.

DB layer

Last but not least, our application uses a database to store the final curated data, while raw data is kept in Google Storage. This setup ensures that all API calls read data from the database. In our demo, you'll see sleek data statistical presentations. Despite the complex statistics, we maintain a simple and clean data model. Basic computations like sums and aggregations are handled in the API layer. For more detailed computations, we use the frontend, displaying results with our React-based graph library, Nivo built on top of D3.js.

Getting Started

1. Install Ruby

Open up a command line prompt. On macOS open Terminal.app; on Windows choose "Run" from your Start menu and type cmd.exe. Any commands prefaced with a dollar sign $ should be run in the command line. Verify that you have a current version of Ruby installed:

$ ruby --version

Rails requires Ruby version 3.1.0 or later. It is preferred to use the latest Ruby version. If the version number returned is less than that number (such as 2.3.7, or 1.8.7), you'll need to install a fresh copy of Ruby.

To install Rails on Windows, you'll first need to install Ruby Installer.

For more installation methods for most Operating Systems take a look at ruby-lang.org.

2. Install SQLite 3

You will also need an installation of the SQLite3 database. Many popular UNIX-like OSes ship with an acceptable version of SQLite3. Others can find installation instructions at the SQLite3 website

Verify that it is correctly installed and in your load PATH:

$ sqlite3 --version

3. Install Rails

To install Rails, use the gem install command provided by RubyGems:

$ gem install rails

Rails will not run as expected if you are unable to install any of above required dependencies. Once you have finished installing all required above, to verify that you succesfully acquired tools and softwares without any error or system conflict, use the following command

$ rails --version

If command line prompt returns result of "Rails 7.x.x" for the above command, congratulations, you have set up all required dependencies successfully and are ready to embark on Ruby on Rails journey.

Otherwise, if command line prompts fail to return output as expected, then the best workaround is properly starting from the first step again. And this time, make sure you follow every steps diligently.

Run Development

Yes to Tests

Troubleshooting

Using Active Record

rails console

Common ActiveRecord commands

### BASIC OPERATIONS

# Create a new record in User model
user = User.create(name: "David", occupation: "Code Artist")

# return a collection with all users
users = User.all

# return the first user
user = User.first

# return the first user named David
david = User.find_by(name: 'David')

# update an entity in table
# approach 1:
user = User.find_by(name: 'David')
user.name = 'Dave'
user.save

# approach 2:
user = User.find_by(name: 'David')
user.update(name: 'Dave')

### ACITVE RECORD COMMON METHODS
# where method
users = User.where(name: 'John', age: 25)
users = User.where('age > ? AND name LIKE ?', 18, '%John%')

# Order method
Users=User.where(name: ‘DAVID’, occupation: ‘Code’).order(created_at: :desc)

# Find_by method
User=User.find_by(name: 'John', age: 25)

# Like method
Customer.where("email IS NOT NULL and email NOT LIKE '%@%’ ")

# Update all method
User. where(age: 25).update_all(name: 'John', gender: 'Male')

# Limit method
User.order(created_at: :desc).limit(20)

# Working Date and Time
User.where(“created_at > ?”,Date.new(2023,1,1))
User.where(“EXTRACT(MONTH FROM created_at)=?”,7)

Avitra2002/SDS_VOCUS