top of page
Computer

Computer Prototype

This page outlines the computer prototype for the Antibio Advisor website and the platform on which it can be accessed, going into detail about the platform descisions made. Additionally, brief instructions are given on the usage of the website. A sections outlining shallow implementations and a downloadable file is also present.   

Platform

The Computer Prototype built upon the findings of the paper prototype is facilitated through a web app, with adequate functionality on both computer and mobile. This descision was taken to facilitate wide outreach and ensure that all eligable users will have easy access to the web app and its functionalitites when it is fully launched. The flask backend is currently being used to facilitate hosting and chat bot functionality. Additionally OpenAI and Google API services are being used to facilitate chat bot and map functionality respectively.   

Brief Instructions

The following explanation serves as a simple guide on how to navigate the file structure of this project, to help in future development.

base.png

Within the base directory as depicted in the figure above, the README file can be found for better clarity of the project's structure and purpose, also accompanied by the requirements.txt file, which contains the required packages to be installed for this project to run correctly as can be seen in the figure below. The Assets folder contains the images used in the README file.

Requirements.png

The FineTuning folder contains the required JSONL and Python files which are used to fine tune the chatbot as can be seen in the figure below. 

FineTuning.png

The Website folder contains the static and templates folder, which contain both the HTML, CSS and JavaScript of the website. The main python file which when run loads the website can also be found here.

Website.png

The website pages can be seen in the figure below, which depicts the contents of the templates folder.

templates.png

In the Static folder are the CSV and JSON files, accompanied by the assets folder containing the images utilised in the website and the css and js folders containing their respective files. This can be seen in the figure below.

static.png

Running the Website

  1. Go to the Github page folder link here.

  2. Download the project files.

  3. Unzip the downloaded folder.

  4. Run the main.py python file.

  5. Open "http://127.0.0.1:5000" in a Web Browser.

Developer Notes

ChatBot Implementation

To implement the chatbot, an OpenAI key was utilised for its setup. It was then fine-tuned to respond more accurately and appropriately with prompts related to Anti-Microbial Resistance. This was done through two Python files, the first one being fine_tuning_uploadFile.py, which is used to upload the JSONL file  to the OpenAi serevers to facilitate fine-tuning. Following this, the fine_tuning_createJob.py is used to train the model on the JSONL file. To assign the model to the chatbot, ​​​​the appropriate model name is assigned to the model variable as shown below. For more information, the OpenAI documentation can be found here.

openai.png

For the Speech To Text functionality, the startSpeechToText and stopSpeechToText functions are both used, which employs the webkitSpeechRecognition API . These functions activate accordingly when SpeechToText is activated by the user and when it is terminated respectively. These functions' code can be seen in below. 

speechtotext.png

For Text to Speech, the window.speechsynthesis​ API was used. The speak and readMessage functions were then implemented to make use of the API as can be seen in the figure below. The speak() function is used read the entire conversation from start till end to the user whereas the readMessage() function reads singular messages at a time.

texttospeech.png

Map Implementation

For the maps section, the code below is in charge of defining a search request for the GoogleAPI so as to retrieve the longitude and latitude of each relevant marker.  If further markers need to be placed the code should be copied as is changing the var name and the query to reflect the markers being retrieved.

image_edited.jpg

The code showcased below carries out the request as defined above and processes the data so as to place the markers on the map. In the case that additional markers are added this code should be copied and the appropriate naming convention used in place of pharmacyRequest, pharmacyResults and pharmacyStatus.

markers2.png

The code below handles the marker icon displayed based on the entity. In the case that additional markers need to be added the if statement should be expanded with the appropriate checks and image path.

markers3.png

FAQ Implementation

For the FAQ section the image below denotes the FAQ.csv file structure which can be altered and appended to update the contents of the FAQ page.  The additional FAQ entries need to maintain the same structure to ensure that they function correctly in the page. The age and symptoms fields need to be filled in to facilitate the sorting functionality. Once the FAQs is updated and saved, the website will dynamically update to display the new questions.

image.png

Prescription Information Implementation

For the Prescription Information page, the availble dropdown information are hardcoded as can be seen below. However additional information can easily be added by appending to the  relevant dictionaries shown below.

prescriptioninfo1.png

Furthermore the image path must be added the PrescriptionInfo.csv in the same format as can be seen below to facilitate the antibiotic image display functionality. The AntibioticName field must be filled in such a manner that it mathces the name added to the dropdown prior.

prescriptioninfo2.png

Finally, the code showcased below must be altered to reflect the additional dropdowns required with the value being set accordingly to match up with the dictionary entry outlined prior. 

prescriptioninfo3.png
prescriptioninfo4.png

Quiz Implementation

For the Quiz page the image below denotes the Quiz.json file structure which can be altered and appended to update the possible set of questions showcased in the quiz page.  The additional Quiz entries need to maintain the same structure to ensure that they function correctly in the page. 

image.png

Shallow Parts

Our website's Chatbot section employs AI in three pivotal ways. Fueled by OpenAI's ChatGPT 3.5, the chatbot is finely tuned for Anti-Microbial Resistance (AMR) topics, providing nuanced responses. The text-to-speech function enhances accessibility, allowing users to hear messages through the native browser API, ensuring compatibility across browsers. Simultaneously, the speech-to-text feature, utilizing the webkitSpeechRecognition API, enables users to interact with the chatbot by speaking, with their words being converted to text for seamless communication. Together, these elements create an optimized, engaging, and accessible user experience, ensuring tailored information delivery and interactive conversations.

​

Some shallow parts where AI could have been implemented include:

  • An automatic language translator for the entire website. This would help users more familiar with Maltese or other languages use this website more comfortably.

  • An object detection model which detects antibiotics and gives information about then. This would serve as an extension to our prescription information page. In addition to this, it would perform Object Character Recognition to read the expiry date and advise the user on proper steps moving forward.

  • The Quiz questions could be AI generated to further increase the random possible combinations of Questions and answers.

Download File

The created web app can be accessed through the following link: https://github.com/mbar0075/AntiBio-Advisor 

​

bottom of page