I am building Sylqora AI a study tool to help struggling students. It is intended to have characteristics of a virtual tutor that keeps track of what topics have been covered, doubts and queries a user has can be answered by it along with ability to read images.
Made the heading for Quiz mode It only asks 5 questions. The heading appears up showing topic of quiz when it is in quizmode and keeps locked in place until 5 questions are asked and then displays score and heading is gone too. Going to the New Chat disbles the quiz mode. Try it yourself at https://sylqora-o6vwi4ha6-aliraza-glitch.vercel.app/
I added a feature for sidebar to change height incase of large messages by user to improve readability. I also made the Quiz mode. Once the quiz mode is pressed, It asks on the placeholder what topic should the quiz be on. So user just names the topic and sends and the rest of the prompt is generated automatically and sent. I also modified the Quiz mode. It can now ask you 5 questions in a quiz and tells you the score for the quiz. Check it out at https://sylqora-f0r4pa9ur-aliraza-glitch.vercel.app/
Finished Sylqora version 1. Had to give final touches to the bot such as the Sylqora is thinking was light mode whereas rest of the site is dark mode so I just changed the message’s theme. Also changed number of max tokens again. Gave the feature of highlight current chat in the sidebar so user isn’t confused. Also handled the chats overflow and title overflow in the sidebar. Try Sylqora at https://sylqora-fd08yehag-aliraza-glitch.vercel.app/
Done styling the chat box. I realized it was way too plain and boring. But now everything is alive. I changed the send button to an arrow. Added heading and subtitle in the sidebar. Improved the New Chat button. I also created a welcome screen that comes with options. If you click on Explain me a topic it automatically types “Explain “ and you have to complete it with what ever you want same goes with with Quiz me one. I also changed the input to a proper professional Chatgpt style input area. I also changed the dimensions of messages so that it looks like a dialogue box rather than a rectangle. I thought that was all true but then script.js threw a barrage of errors. One time it would load previous chat’s response in New chat. Then it just stopped working. Then I realized I was running activechatid before autosave which ruined the whole program and caused the message to not render on the screen. Test Sylqora yourself at https://sylqora-l9bzpy2gn-aliraza-glitch.vercel.app/
I added a sidebar and made it so that it can start a new chat and switch between chats. Not as complex and hellish but wasn’t easy either. The clickable chats and resolving errors was a major change. I also learned a lot in this such as duplication of an array, dealing with localStorage, pushing the right objects and elements into the functions. Overall a great session I’d say. Try it yourself at https://sylqora-qle4c0c7x-aliraza-glitch.vercel.app/
I have done giving Sylqora memory. Now it doesn’t just forget what you just told it and keep greeting you like a very smart person. Something funny also happened. I kept debugging and writing code so confused what was wrong. The landing page opened but when I clicked on Get Started it just didn’t have memory when tested. So then I realised that Get Started was pointing to older version of Sylqora and URL wasn’t refreshed to newer version so I then linked it to app.html and boooom it worked!
Ok i finished the landing page, improved nav bar, made it so that the links in navbar lead to the sections. I also added the feature that animation of the features and about section is triggered only when user scrolls down to them. I also added animations for hero section and navbar and now it looks so cool
I just made the landing page for Sylqora so that user first lands on the page and then when Get Started is clicked, it leads to the main app. I made use of all the CSS knowledge I possessed and managed to make it and it was the easiest thing I ever did for Sylqora. You can look at the website at https://aliraza-glitch.github.io/Sylqora.AI/
So I cleaned up all the coded mess. Sylqora is now intelligent and has a personality. The textContent was changed to innerHTML and the model was also changed. I also changed the UI and added a Sylqora is thinking box. I removed the Check Server button Since it was annoying and unnecessary. The inner HTML part was difficult. The HTML escaping and Markdown parsing were easy to understand but difficult to write. Also I had to deal with Sylqora just dumping infomation and unnecessary gibberish by limiting max tokens to 400 and also begged it in the role to not give unnecessary details. Do try Sylqora and tell how good it is in the comments. Sylqora is live at https://sylqora-b5h77ipua-aliraza-glitch.vercel.app/
Finally! It can recieve and reply. A major milestone. I used Groq API key and vercel. The coding wasn’t much but dealing with errors again and again was very discouraging but in the end I updated the script.js and got it right. But still needs work with formatting the messages, UI and giving it a personality. Test Sylqora yourself at https://sylqora-5w8pp1mrn-aliraza-glitch.vercel.app/
Pure sweat and blood for deployment of Sylqora AI like using vercel for this was so confusing. Although the code is a mess and way too unorgainzed but it did work. I changed the structure and stuff so vercel can run it and now the backend is live. Though the logic and responses are almost the same but we are getting close to adding API key. Anyways Sylqora is live at https://sylqora-ai-git-master-aliraza-glitch.vercel.app/ only ask questions containg acceleration, momenum and hello and what in lower case only
Today was HELL! It was so confusing and frustrating the front and backend were so humiliating. I was literally in tears referring again and again to tutorials. Anyways, I made a front end that only sends message to backend, a backend at a local host. Today theory and understanding took most of the time making me dizzy. I learned a lot of new things such as JSON, headers, stringify, await, async, fetch, req and res along with HTTP server making, making CORS and connecting frontend and backend. Right now the immediate issue is [object Object] is printed whenever write anything. No actual AI responds but the terminal is smart enough to show me what I typed so I guess that’s it for today.
Today was a hassle. I just kept experimenting with stuff and learned about a lot of new things in JavaScript. At first I made it so it only answer commands word to word. But then I made the user input case insensitive and then I used includes function. It also has some sarcasm making it feel less like a teacher and more like a study buddy. For testing it, the acceptance data includes acceleration, momentum and hello greeting. It doesn’t have an API integration yet but that is something I will be working on in the near future.
The bot is live at https://aliraza-glitch.github.io/Sylqora.AI/
I just made a User Interface for study companion “Sylqora” using HTML, CSS and I also wrote the function for sending messages in Java Script. Though the CSS part was way too frustrating but it is solved now
