1MEIC03T04: BANANAI - FEUP-MEIC-DS-2024-25/ai4sd GitHub Wiki

Product Goal

BananAI aims to automate the process of transforming requirement documents into wireframes by using AI. By analyzing textual descriptions, BananAI generates accurate visual wireframes, streamlining the design phase for software projects and improving alignment between requirements and UI/UX deliverables.

Vision

Our AI assistant, BananAI will let users parse requirement documents as input, and application will analyze these documents using the Gemini API to understand structure, relationships, and key components. Based on this analysis, the tool will autonomously generate SaltUML code that will get turned into wireframes that align with specified requirements. From that the user will be able to edit the wireframe in case of error by writing on the text input what to change.

This system empowers designers and developers by automating the translation of requirements into preliminary designs, reducing manual effort, ensuring consistency, and significantly saving time throughout the design process.

Research

Gemini API VS OpenAI API

We tried both recommended APIs (Gemini API and OpenAI API), and after thorough testing, we found that the Gemini API was the optimal choice. Its implementation process was more intuitive, making it easier to integrate into our system. Additionally, it provided a user-friendly interface for monitoring token usage, which allowed us to track expenses more effectively. We also tried to use GLM-4 but the implementation was being too difficult so it was discarded as an option.

Domain Analysis

Domain Diagram

image

User: The user of the application

Chat: The chat were the conversation between the user and the AI happens to create the wireframe

Prompt: The textfile of the document submitted by the user

Response: The response from the LLM countaining the code for the wireframe that will be turned into an image

Sequence Diagram

image

Architecture and Design

image

Database: Where the chats are stored.

Frontend: How the user interacts with the application (receives a requirement text and sends it to the backend / sends an image provided from the backend to the user).

Backend: Connects to the database to get saved chats from the user. Where the requirement text is parsed into text and sends it to the Gemini API. It receives the saltUML code and converts it into an image and sends it to the Frontend. Saves image in database.

Gemini API: The LLM necessary for the conversion of requirement text to saltUML code.

User (Actor): Interacts with the system providing the requirement text to the application and expecting a wireframe image.

Technology

Gemini API

Gemini API is an LLM from Google designed for lightweight, text-centric web interactions.

SaltUML

PlantUML is an open-source tool for generating diagrams from text, known for its simplicity and utility among developers and technical writers. SaltUML, part of the PlantUML ecosystem, specializes in creating UI wireframes using a declarative text-based syntax, offering a quick and efficient way to sketch user interfaces. For that Reasons it was chosen to convert the text provided by the LLM into a image with the correspondent wireframe

React

React is popular JavaScript library for building user interfaces. Since its very intuitive and all the members had experience in this library it was proven as a good option for building the frontend of the application.

Docker

Docker is a platform for containerization, enabling the packaging and deployment of applications. It is used in web development and website hosting because it simplifies the deployment, management, and scaling of applications.

Development guide

  1. Create your Gemini API key and add the key to the enviroment variables.
  2. Run the backend in the backend folder with the command "node app.js"
  3. Run the frontend in the frontend folder with the command "npm run dev"

Security concerns

Since we are using Gemini API we need to be carefull with they keys. If they get stored (hardcoded in source code, shared insecurely) are at risk of being leaked, which can compromise the system. To fix this we use our own key as an enviroment variable. In order to an user not get acess to another user conversation we will implement a login system.

Quality assurance

The process will test the tool's ability to identify patterns, parse requirements, and generate wireframes effectively. Automated and manual tests will validate its functionality and usability, ensuring a smooth experience for both technical and non-technical users. Rigorous QA practices will guarantee BananAI meets user expectations and performs reliably.

How to use

The user will send a pdf file of their requirement document. Then by clicking generate graph, the application will turn the requirement document into a wireframe image with the help of the Gemini API.

How to contribute

Just fork and follow the How to Develop tab. Then follow our scrum board in order to improve and expand our work.

Sprint 1 Restrospective

In this sprint, we successfully completed all the planned user stories except for one, "Dockerize the application," which will be carried over to the next sprint. The team demonstrated strong collaboration, even though we face challenges due to an 8-hour time difference. While communication is good, there’s still room for improvement.

One major challenge was organization at the start of the sprint, causing delays that could have been used for implementation. Addressing this will be a key focus in the next sprint to streamline our workflow and maximize productivity.

Sprint 2 Restrospective

Like the sprint before, we perfomed all planned user stories except for one, "Implement the application in the AI4SD". The user story went to review but because of some errors it needed more refinement so it was pushed back to the sprint backlog of sprint 3.

This sprint organization was similar in which we only started working on user-stories mid-sprint. Communication with the other groups also is minimal as since we are a online team connecting with the other members needs to be by discord. This next sprint we will try communicate with the other groups so we can get up to speed with them.

Contributions

  • Team 4
    • Afonso Abreu
    • André Leonor (SM)
    • Hugo Almeida (PO)