@aliraza

I am excited to announce that Sylqora can now read text files uploaded to it and answer questions related to it. The attach file button is a paperclip but there are limitation such as the content should be plain text and not a scanned image or OCR. Pdf with text only can be read and well processed by Sylqora. File chip showing file’s name and the ability to cancel the upload is also included. I am planning on connecting ability to read files in modes such as quiz mode and explain mode so it doesn’t just sit there. It is also possible that I add the feature to read OCR and scanned image. I will also make the input bar sticky so it doesn’t get lost while scrolling. Check Sylqora out at https://sylqora-cod6nfhx5-aliraza-glitch.vercel.app/

Improved the UI and UX so much and its 100 times better. The annoying sidebar is now closable like a drawer. The Bot message bubble is gone and now it only shows clean text on screen which looks neat and aesthetic. I also learned about SVG and implemented it which took most of my time. The SVG is just too complex but I got the hang of it. The sidebar open and close icons are SVG. I also improved the way it renders equations. I also coded it to keep response length reasonable and short. The 3 modes work very fine. I also added responsiveness for phones and now Mobile phone users can also use Sylqora without a crashing interface. Try it yourself at https://sylqora-2g4j7b8o9-aliraza-glitch.vercel.app/

Ok so I just finished making Flashcard mode. Once the user clicks on the flashcard mode on the suggestions menu, Sylqora asks in input place name of the topic and once topic name is entered, the flashcards are generated. The proportions of the flashcard mimick the actual card. The Reveal Answer button is also present to check whether you remember or forgot. The Next Card button generates Next flash card not same as previous one. While a card is being generated, a neat Loading Card message is shown on a screen. It’s literally a banger get amongst it! https://sylqora-rcf3kmb64-aliraza-glitch.vercel.app/

So I refined the Quiz mode even more. Explain Mode was also upgraded. The topic heading of Explain Mode. And termination of Explain mode once another chat is opened. Explained paragraph is also well formatted since I enhanced markdown even more like It is so neat and professional. I also increased max tokens and restricted the LaTex notation making the ## and – appear in responses. Explain Mode is finished. I am now making flashcards mode. Try it on https://sylqora-e1txs56h0-aliraza-glitch.vercel.app/

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

I added a high score system that stores the highscore in a local storage and also displays it side by side of the game and on the Game Over screen. I also changed the colors of text on Game Over screen