Chat AI Assistant Project

Overview

This project aims to create a chat AI assistant using the Gemini API. It leverages ChatGPT for natural language processing and interaction.

Project Structure

Files and Folders

• index.html: Login page and main entry point.
• sample.html: Main page of the chat assistant.
• logout.html: Logout functionality.
• test/: Folder containing HTML files for testing Gemini API functionality.
• public/: Folder for SVG and image files used in the project.

CSS Files

• global.css: Global styles for the entire project.
• index.css: Styles specific to the index.html (login) page.

Development Process

1. Design Phase:

   • Designed the user interface in Figma.
   • Converted Figma design to HTML and CSS.

2. Implementation:

   • Implemented login functionality (index.html) with date saved in local storage.
   • Developed main chat interface (sample.html) using Gemini API and ChatGPT.
   • Added logout functionality (logout.html).

3. Testing:

   • Created test cases in the test/ folder to validate Gemini API integration.
   • Ensured functionality and responsiveness across browsers and devices.

4. Deployment:

   • Deployed the application for testing and feedback.

Technologies Used

• Frontend:

  • HTML, CSS, JavaScript
  • Gemini API integration for chat functionality
  • SVG and image assets in public/ folder

• Design Tools:

  • Figma for initial UI/UX design

Challenges and Solutions

• Integration of ChatGPT:

  • Customizing responses and handling user prompts effectively.

• Gemini API Integration:

  • Ensuring smooth communication between frontend and API endpoints.

• Non-Responsive Design:

  • Acknowledgment that the design is not responsive, may contain errors, particularly in login pages.

• Local Storage Usage:

  • Login date saved in local storage for inspection.

Project Outcome

The outcome of this project was to become familiar with front-end designing techniques and API handling, particularly integrating the Gemini API with ChatGPT for interactive chat functionality.

Conclusion

This project demonstrates the integration of ChatGPT and the Gemini API to build a responsive and interactive chat AI assistant. Despite potential errors and non-responsive design, it showcases functionalities implemented using modern web technologies.