InnovateX AI VoiceChat Solution
- Introduction
- Problem and Solution
- Features
- Technologies Used
- Future Improvements
- Installation
- Usage
- Contributing
Welcome to Tesseract, your gateway to a new dimension of accessibility! Tesseract, named after the four-dimensional cube, embodies our vision to empower people of determination and senior citizens in navigating the UAE Ministry of Interior's website effortlessly. This project was conceived and developed by Salim Hamzaoui and Deffo Ngankam Steve at 42 Abu Dhabi, as part of the InnovateX hackathon organized by the UAE Ministry of Interior.
While the original website may offer some accessibility features, integrating an AI vocal personal assistant like Tesseract can significantly enhance the accessibility and usability of the website. Here's why:
-
Natural Language Interaction: Tesseract allows users to interact with the website using natural language commands, providing a more intuitive and user-friendly experience compared to traditional accessibility features.
-
Customized Assistance: The AI vocal personal assistant offers personalized assistance tailored to the specific needs and preferences of each user, adapting its responses to best support individual users.
-
Dynamic Navigation: Tesseract dynamically navigates through the website, responding to user queries and providing real-time guidance as users explore different sections or perform various tasks.
-
Enhanced Efficiency: Users can quickly and efficiently navigate the website using voice commands, reducing the time and effort required to access information or complete tasks compared to traditional accessibility features.
-
Continuous Improvement: The AI vocal personal assistant can evolve and improve continuously based on user feedback and emerging technologies, ensuring ongoing accessibility enhancements.
-
Comprehensive Support: Tesseract provides comprehensive support across a wide range of tasks and interactions, assisting users at every step of their journey on the website.
-
Cross-Platform Compatibility: Tesseract offers cross-platform compatibility, allowing users to access the website's features and services seamlessly across different devices.
-
User Empowerment: By providing users with an AI vocal personal assistant, we empower them to navigate the website independently and confidently, taking control of their browsing experience.
The existing user interface of the UAE Ministry of Interior's website poses significant accessibility challenges for people of determination and senior citizens. Traditional navigation methods may be cumbersome or impractical for users with disabilities or those less familiar with technology.
Tesseract addresses these challenges by introducing a voice-based interaction system, allowing users to navigate the website using natural language commands. Our AI-powered chatbot, customized with ChatGPT 3.5 Turbo, provides guided navigation, information gathering, and text-to-speech capabilities to enhance user experience and accessibility.
- Voice Interaction: Users can interact with the website using their voice, allowing for a more accessible experience.
- Guided Navigation: The AI guides users step by step through the website to complete various applications or services.
- Information Gathering: Utilizes GPTBot, OpenAI’s web crawler, to gather information from the Ministry of Interior's website and build a structured model for navigation.
- Custom-Tuned Chatbot: Employs ChatGPT 3.5 Turbo from OpenAI, customized to serve as a chatbot on the Ministry of Interior's website with enhanced security and stability.
- Text-to-Speech Voice: Utilizes ElevenLabs to generate high-fidelity, realistic voices in both Arabic and English for seamless communication.
- Nuxt.js: A progressive Vue.js framework for building server-side rendered (SSR) applications.
- Vue.js: A popular JavaScript framework for building user interfaces and single-page applications.
- Node.js: A JavaScript runtime built on Chrome's V8 JavaScript engine for server-side development.
- pnpm: A package manager for Node.js projects that efficiently installs dependencies.
- Typescript: A typed superset of JavaScript that compiles to plain JavaScript for improved developer productivity and code maintainability.
- Tailwind CSS: A utility-first CSS framework for rapidly building custom designs without writing CSS.
The existing user interface of the UAE Ministry of Interior's website poses significant accessibility challenges for people of determination and senior citizens. Traditional navigation methods may be cumbersome or impractical for users with disabilities or those less familiar with technology.
Tesseract addresses these challenges by introducing a voice-based interaction system, allowing users to navigate the website using natural language commands. Our AI-powered chatbot, customized with ChatGPT 3.5 Turbo, provides guided navigation, information gathering, and text-to-speech capabilities to enhance user experience and accessibility.
We chose Nuxt.js for its server-side rendering capabilities, which improve SEO and initial load times, crucial for accessibility. Vue.js provides a robust framework for building dynamic user interfaces, complementing Nuxt.js perfectly.
Node.js powers the backend, enabling server-side logic and API integrations. We opted for pnpm as our package manager for its efficiency in dependency management and faster installation times.
TypeScript enhances code quality and maintainability by introducing static typing, reducing bugs and improving developer productivity.
Tailwind CSS offers a utility-first approach to styling, allowing us to rapidly design custom interfaces without the overhead of writing traditional CSS.
- Complexity vs. Simplicity: While our solution introduces advanced voice-based interactions, we aimed to maintain simplicity in user experience, ensuring accessibility for all skill levels.
- Security and Stability: Custom-tuning ChatGPT 3.5 Turbo was crucial for ensuring security and stability, balancing the need for AI-driven interactions with user safety.
- Resource Constraints: Considering time constraints and resource availability, we focused on essential features and optimizations, prioritizing usability and reliability.
Given additional time and resources, here are areas we would focus on to further enhance Tesseract:
- Personalization: Implement user profiles and preferences to tailor the experience based on individual needs and preferences.
- Performance Optimization: Fine-tune server-side rendering and client-side interactions to optimize performance and responsiveness.
- Accessibility Audits: Conduct thorough accessibility audits and user testing to identify and address any remaining barriers or usability issues.
To install and run the InnovateX AI VoiceChat Solution, follow these steps:
Clone the repository: https://github.com/shamzaou/hackathon_moi_tesseract.git
Look at the Nuxt 3 documentation to learn more.
Make sure to install the dependencies:
# yarn
yarn install
# npm
npm install
# pnpm
pnpm installStart the development server on http://localhost:3000
npm run devBuild the application for production:
npm run buildLocally preview production build:
npm run previewOnce the development server is running, open your web browser and navigate to the specified localhost address. You can then interact with the AI voice chat solution by following the prompts provided by the chatbot. Use your voice to navigate through the website, complete applications, or access services offered by the Ministry of Interior.
Contributions to the InnovateX AI VoiceChat Solution are welcome! If you would like to contribute, please follow these steps:
- Fork the repository on GitHub.
- Create a new branch with a descriptive name:
git checkout -b feature/new-feature - Make your changes and commit them with clear messages:
git commit -m "Add new feature" - Push your changes to your fork:
git push origin feature/new-feature - Submit a pull request to the main repository.
Thank you for considering the InnovateX AI VoiceChat Solution! If you have any questions or feedback, please don't hesitate to reach out to us. We hope our solution contributes to enhancing the accessibility of the UAE Ministry of Interior's website for all users.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent