ASKai
ASKai is a fun side project I built out of my fascination with how ChatGPT works and how simple, but spectacular its UI is. The app leverages OpenAI models to provide intelligent, conversational responses and to generate images based on user prompts. It was a great opportunity to explore the capabilities of AI-driven text and image generation, while also focusing on creating a smooth and engaging user interface.
- A collapsible sidebar that slides in and out of view, providing easy access to features without cluttering the interface.
- An elastic input field that expands to accommodate longer user prompts, enhancing the user experience.
- Generated images can be downloaded directly from the app for easy access.
- Prompt history is saved in local storage and displayed in the sidebar, but it automatically deletes itself after an hour to free up storage space.
- A clear button that removes all prompts and responses from the UI and automatically refocuses the input field for seamless interaction.
- In case of an error fetching a response, the app displays an error message along with a button to regenerate the prompt, so users don’t have to retype it.
ASKai comes with several interesting features:
Why The Web Stack
- I chose Vue.js for this project primarily to solidify my knowledge of the framework. I wanted a more hands-on experience, and building ASKai provided the perfect opportunity to deepen my understanding of Vue.js through practical application. VueJs
- I opted for Tailwind CSS because its pre-built utility classes significantly speed up my development process. Tailwindcss
- I went with Vercel for hosting because of its reliability and speed of deployment. Vercel
Challenges & Solutions
The challenges I encountered in this project were mostly related to implementing certain UI features. The most notable was creating an elastic textarea input field that expands upward, rather than the default downward growth, to accommodate more text.
I overcame this by dynamically adjusting the height of the input field, ensuring it didn’t exceed the maximum allowed height. I also used CSS Grid to keep the input field fixed at the bottom of the page, ensuring it only takes up the necessary space without disrupting the layout.
Lessons Learned
This project taught me a great deal, from working with Vue.js to integrating OpenAI models into my app, which pushed me out of my comfort zone. I also tackled UI features that I had always viewed with awe, such as the elastic input field and the collapsible sidebar. The experience really shifted my mindset, changing how I approach and overcome challenges. It gave me a new level of confidence and a broader perspective on problem-solving.
Other Projects
Feel free to reach out to me if you are looking for a developer or maybe you just want to connect.
ken.bassey9@gmail.com