@aliraza

OK so I improved the main chattin page. It looked plain before but now mwah. I added a subtle purple glow behing the welcome text and also fixed some scaling problems. The structure of entire CSS file was changed to :root since it is more convinient and easy to handle. I made the send button glow rather than stay rigid purple. Also the sidebar was fixed too.I also added mobile responsiveness. Check it out at https://sylqora-b80j2x291-aliraza-glitch.vercel.app/

Fixed the mobile responsiveness, The about section cards were leaking out making them look messy and get started button was weird overall page composition was trash and not good at all so I fixed it for mobile users. Try it out at https://sylqora-6eww0xam9-aliraza-glitch.vercel.app/

I prettied up the landing page. Sylqora is now getting it’s finishing touches. Just aesthetic really! I converted the landing page from previous flat version of it to a more sleek, modern and professional version using advanced CSS concepts like :root etc. The landing page is fully purple themed and I also changed size of texts at different places and gave a glow behind main heading. The nav bar is transparent glass type and the get started button is also much much better. But it still looks ugly on phone so I will fix that tomorrow I mean I am writing this at midnight. The overall landing page is so cool but who am I to brag check it out for yourselves on desktop at https://sylqora-evmi55cgw-aliraza-glitch.vercel.app/

I enabled streaming in the request of Sylqora so now the messages are streamed instead of a block just appearing on the screen. which means that it now generates responses in real time. I changed the front end and backend to handle streaming. I also added an Abort Controller which means that user can cancel their requests. Try Sylqora yourself at https://sylqora-78fvmrxhz-aliraza-glitch.vercel.app/

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