Ship
Changes requested
My project is completed:)
Hey everyone! I’ve finally added some more stuff, like headphones, plants, a globe, and a camera. I’ve only done a little bit of work so far, but I think I’ll try to finish this project today. I’m so excited to show you guys! 
But I literally didn’t post devlog, but new project will definitely have devlogs.
I have changed the UI, and some elements are hidden, because when we upload video then it appears. And now I’m going to write the logic(Javascript), i’m too fast because I have already made it, so basic things don’t take much time, but now i’m going to work on logic, and i also have to add some more features, so i think it usually takes 3-4 hours, and then the projects will get completed.
HTML is completed, now I have to style it, and have to make the logic. Because our project is completely base on logic, so the javascript will be too long. Nd i also suffer sometimes with making logic, and let see what happen:D
Hey Everyone, I’m going to continue my ThirdView project again but this time, its name will be Thirdview Max, because it is the updated version, so. Now, you can also see the old version at github, which is at another repo. But Thirdview Max have more and extra feature then Thirdview, now it can give accurate result, but in past I said that it also have feature, by which you can just paste link, nd find the part. But because, i have to fetch the video in .mp4 first, which is difficult part, I tried, but i failed. That’s why I decided to skip this feature. and the main things, the Ui is going to completely change.
#Devlog:6 of #Ship:2
I have made these files, but now my logic has hit a limitation because YouTube doesn’t allow frame extraction. To solve this, we are using a public API which helps a lot with YouTube search. I use yt-dlp to resolve the YouTube URL, specifically using an Invidious public API. I know it might get shut down sometimes by YouTube, but what can we do? I will use my own yt-dlp backend to get a CORS-friendly video stream. By doing this, we can access the YouTube video as a .mp4 file, which allows us to extract frames. Let’s see if it works perfectly or not. However, my own backend will work for only 7 days because it is an open-source project.
#Devlog:5 of #Ship:2
I have made my UI, and now I have to write the logic. The best part is that I have messed up my style.css file. I want to improve it more, but I got confused with my colors. I gave names to the colors, but in the end, I could not understand my own color pattern or what I had decided to use each color for. By the way, I think the UI looks good. Now, let’s talk about the UI features:
- I have made the header sticky and also added a blur effect to it.
- Instead of taking YouTube’s color palette, I used a popular palette from coolors.co because I liked it at first sight. You can see the UI below.
#Devlog:4 of #Ship:2
I have made the HTML, and now I’m working on the CSS. I am making the UI look good. By the way, I think I have done only 30-40% of the CSS, and I think I’ll try to complete it today. Then, I’ll start focusing on the logic, like JavaScript, because it is our main stuff. I’d take inspiration from YouTube, like using YouTube’s color palette, and the structure is like the old one.
#Devlog:3 of #Ship:2
I have just put my real hosted website into maintenance mode. Normally, if I push code to GitHub, Vercel automatically hosts the new version. If someone visits suddenly during that time, they might think the website has a code error. That’s why I created a vercel.json file a week ago and now pushed it to GitHub. Now, I can continuously make changes for a while without any tension related to the main website, because it always shows that it is in maintenance.
#Devlog:2 of #Ship:2
I have implemented two things:
1.Now you can paste the link of a YouTube video and it will help you find the timestamp. Although I have just created the HTML, this time I didn’t have an idea of how I will grab the frames. By the way, I think I’ll try to download the video in low quality, and then grab the frames. If anyone has any ideas, just let me know, or I’ll try to serch and understand an easier way.
2. I have implemented a new model (Audio Model). In the Shipwright review video, I saw that the reviewer typed “MrBeast saying ‘Red Light,’” and my website at that time was only able to search through visuals. But now it can walk through the vocal parts. It converts the video’s audio into text, and then it will match the query. But here’s an error: we can’t check the query’s exact result matching percentage, and it may create some problems.
By the way, when you search, it has two options like @visual and @vocal. So when you select one, it only runs that one model. But if you have added say or said, then it also runs both things simultaneously. If you only put one thing, then it runs one model only, so it saves memory and works fast. But let’s suppose you didn’t select either one; then for accurate results, it runs both models.
#Devlog:1 of #Ship:2
Hi guys, when I shipped my first project, 2-3 people said that I used AI. I really did use it, but in different ways, and now I am also feeling ashamed of myself. Why? Because that was my first project, and my manner of writing code is not good, I even dn’t like what I write myself. That’s why I used AI by giving it my own code and tellng it to make it professional, understandable, and much more. That was my mistake, but now after searching a lot, I understand it didn’t matter. So now I am going to write this project again with some more features, and mainly the UI, which looked very cheap (and I know people were also saying it is AI—by the way, I took color decisions from AI). But now, instead of asking any AI out of fear of making mistakes, that fear has gone, and I am going to design everything by myself. However, my JavaScript is a little bit weak, so I am gong to use AI for learning purposes, but now I will upload the raw code that I write. By the way, the new feature will contain a YouTube video link.
Another new feature, I copied it from Github, because I have used it many time.
I built the Thirdview project, but after shipping it, I received requests to make the design more appealing. I didn’t love the original look either, so I am redesigning the UI and adding more color. By the way, I am also working on a new feature—see if you can guess what it is!
Ship
Guys, I was suffering from a problem. When my friends and I watch any movies or something else, mostly anime, then we surely find a scene where me and my boys melt. And when we meet physically, we have to tell each other about that. And this is the most time-consuming part. My one friend who doesn’t even know the episode, then how can we think he will remember the timestamp? That’s why, by the way, I’m also like my friend. That’s why I built this app.
It means you just have to upload the videos and then tell about the scene, like, “the main character, who wears yellow clothes, is beating the man,” and you will get the timestamp without any problem. Now, my friends and I don’t have to waste more than 30 minutes for just a 10- to 15-second clip in a one-hour episode. Maybe we can get the correct timestamp in just two or three minutes.
Hold a minute. If you are lucky, then you might get the correct timestamp randomly. But I know our and your luck are not that great.
And it’s just HTML, CSS, and JavaScript.
By the way, let me tell you how it is working. For this, you can read the README.md. For the trial, you can visit thirdview.vercel.app.
By the way, for most people, it is just extra storage. But for me, this is my first project, such a great project I made.
Bye-bye. Just visit the repo.
Oh, and it completely works locally, means in the browser, but it’s not connected to the cloud. That’s why it may be slow.
I have just host my project on Vercel, and I will ship this project today after making a show video.
My first project is almost ready to ship! I can’t wait to show you guys. It’s just HTML, CSS, and JavaScript, but it solves a really annoying problem in our friend group. I’ll try to publish it tomorrow. Bye for now!
