Bahar – JAIS-Powered Chatbot Web Application

Note: This project was developed in collaboration with the CIAI Engineering Team at MBZUAI during my participation in the Emirati AI Boot Camp 2024. For more information, you can refer to this article: Young Emiratis highlight AI's importance as MBZUAI training

---

Table of Contents

1. Introduction
2. UI/UX Design
3. Frontend Development
4. Algorithm (JAIS Integration)
5. Backend Development
6. Demo

---

1. Introduction

This project was developed as part of the Emirati AI Boot Camp 2024 at Mohamed Bin Zayed University of Artificial Intelligence (MBZUAI). The program, which commenced on January 15, 2024, focused on training a select group of students to convert Large Language Models (LLMs) into real-world applications.

Meet JAIS - The Arabic-Centric LLM

JAIS is a state-of-the-art Large Language Model designed to redefine language processing capabilities. It is an Arabic-centric LLM with an open-source nature, promoting transparency and community involvement. JAIS is a 13-billion parameter bilingual LLM developed by MBZUAI and Inception AI.

• For more information about JAIS, please refer to the MBZUAI news article: Meet JAIS, the world's most advanced Arabic large language model open-sourced by G42’s Inception

Our Goal

The primary goal of this project was to develop a fully functional chatbot web application powered by JAIS, an LLM created by MBZUAI.

---

2. UI/UX Design

Tools Used

• Figma
• Adobe Photoshop & Illustrator

Logo Design

• Concept: Blending the fluidity of natural language with the precision of AI.
• Symbolism: Inspired by ocean waves to evoke fluid, intelligent conversations.
• Name: Bahar (بحر) - The Arabic word for "sea," symbolizing the vastness and depth of language.

Prototype UI Components

• Home Page UI Components:
  

  

• Chat with Mode UI Components:
  

  

• Chat with Rating Feature:
  

  

• Figma Prototype: Link to Figma Prototype

---

3. Frontend Development

Tools Used

• HTML, CSS, JavaScript
• Integrated Development Environment (IDE): VS Code
• Web development frameworks: React and Next.js

Key Development Steps

1. Setup
2. HTML/CSS Structure
3. JavaScript Interactivity
4. Testing and Optimization (API Integration (Request/Response), Local Storage Implementation (Chat History, etc))
5. Deployment

---

4. Algorithm (JAIS Integration)

Model Selection

The instruction-tuned JAIS model (jais-13b-chat) was selected for this project.

Model Testing

The JAIS model was tested to generate text in both Arabic and English.

Arabic-English Prompts

Tools Used

• Hugging Face: Platform for accessing pre-trained NLP models.
• JAIS: Core model for the chatbot’s conversational AI.
• VS Code: A Development environment for coding and debugging.
• Python: A programming language for AI development.
• Conda: Package management and environment management tool.
• Jupyter Notebook: Interactive platform for code testing and prototyping.

---

5. Backend Development

• Key Technologies:
  • Flask (API)
  • FastChat, Pytorch, CUDA (AI Core)
  • GPUs (for processing)
• API Communication: REST APIs are used for communication between the frontend and backend.
• Data Exchange: JSON is used for data representation in API requests and responses.

The backend development connects the frontend with the algorithm.

Flow Diagram

Tools Used

• CUDA: A toolkit enabling developers to use NVIDIA GPUs.
• FastChat: An open platform for training, serving, and evaluating chatbots based on LLMs.
• Docker: A platform for automating the deployment of applications inside lightweight containers.

APIs

Sending an HTTP Request (Client Side) & HTTP Response (Server Side)

The client sends an HTTP request including chat history, the latest question, and the language used, represented in JSON format. Then, the server sends a status code to update the client and sends the answer to the question asked by the client in JSON format.

---

6. Demo

View Demo Here