The latest articles on Forem by Sean Velasco (@seanvelasco). https://forem.com/seanvelasco https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F721775%2Fb32a9e66-0278-42d3-958b-858aafcce17d.jpeg https://forem.com/seanvelasco en Sean Velasco Mon, 13 May 2024 02:11:36 +0000 https://forem.com/seanvelasco/memegraph-search-and-explore-memes-533c https://forem.com/seanvelasco/memegraph-search-and-explore-memes-533c <p><em>This is a submission for the <a href="https://dev.to/challenges/netlify">Netlify Dynamic Site Challenge</a>: Visual Feast.</em></p> <h2> What I Built </h2> <p>Memegraph is a search engine and recommendation engine for memes using OpenAI CLIP.</p> <p>Search memes via keywords, explore memes with the same template, and discover memes that are visually similar.</p> <h2> Demo </h2> <p>Please check it out here - <a href="https://memegraph.netlify.app" rel="noopener noreferrer">memegraph.netlify.app</a>!</p> <p>Source available here - <a href="https://github.com/seanvelasco/memegraph" rel="noopener noreferrer">github.com/seanvelasco/memegraph</a>!</p> <h4> Don't know the name of a meme? Just describe the meme! </h4> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsczkb2uwcfhox9rn7rlz.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsczkb2uwcfhox9rn7rlz.png" alt="Guy Thinking In Bed meme" width="800" height="389"></a></p> <h4> Discover memes about your favorite topics </h4> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fiitsst385tuokjwr7ekd.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fiitsst385tuokjwr7ekd.png" alt="The Office memes" width="800" height="451"></a></p> <h4> Look up that obscure meme you saw </h4> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9hkir8tzn7bdfwel3u9f.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9hkir8tzn7bdfwel3u9f.png" alt="Memes about Spongebob and Myers-Briggs Type Indicator (MBTI)" width="800" height="455"></a></p> <h4> Discover memes that are visually similar </h4> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F93rs54z43dd4zyeibpu0.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F93rs54z43dd4zyeibpu0.png" alt="Boardroom meme" width="800" height="455"></a></p> <h4> New way to browse memes </h4> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6g0hkgu0hevum8lhqxqr.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6g0hkgu0hevum8lhqxqr.png" alt="Memegraph home" width="800" height="455"></a></p> <h2> Platform Primitives </h2> <p>This uses Netlify Image CDN to deliver and transform memes efficiently to enhance user experience. </p> <p>Because memes stay the same throughout its lifetime, the cache policy is to cache the memes by default, for the longest amount of time possible. The challenge is, memes are retrieved at random on the homepage, so some memes are cached and some are not.</p> <p>All the memes are stored in another Blob storage provider, however I plan to migrate them to Netlify Blobs (just need to figure out how to upload in bulk or in batches efficiently). </p> netlifychallenge devchallenge webdev javascript Sean Velasco Mon, 15 Apr 2024 05:26:52 +0000 https://forem.com/seanvelasco/slater-virtual-language-learning-companion-4flp https://forem.com/seanvelasco/slater-virtual-language-learning-companion-4flp <p><em>This is a submission for the <a href="https://dev.to/devteam/join-us-for-the-cloudflare-ai-challenge-3000-in-prizes-5f99">Cloudflare AI Challenge</a>.</em></p> <h2> What I Built </h2> <p>A simple virtual foreign language learning companion specialized in holding conversations, helping with translations, and improving diction.</p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvmk8ps3uaaux9aivih9j.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvmk8ps3uaaux9aivih9j.png" alt="Image description" width="800" height="850"></a></p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqeq722w45gxrg3edli5w.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqeq722w45gxrg3edli5w.png" alt="Image description" width="800" height="476"></a></p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdwz904lk0ltz5r68yxdu.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdwz904lk0ltz5r68yxdu.png" alt="Image description" width="800" height="544"></a></p> <h2> Demo </h2> <p>Please check out the demo at <a href="https://slater.sean.app">slater.sean.app</a>.</p> <h2> My Code </h2> <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--A9-wwsHG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"> <a href="https://github.com/seanvelasco"> seanvelasco </a> / <a href="https://github.com/seanvelasco/slater"> slater </a> </h2> <h3> Cloudflare AI challenge submission: Slater - your virtual foreign language friend </h3> </div> <div class="ltag-github-body"> <div id="readme" class="md"> <div class="markdown-heading"> <h1 class="heading-element">Slater - your virtual foreign language friend</h1> </div> <p>Conversational, context-aware, and multi-modal chatbot specialized in carrying basic conversations in foreign languages.</p> <p><a href="https://dev.to/seanvelasco" rel="nofollow">Submission</a> to the <a href="https://dev.to/devteam/join-us-for-the-cloudflare-ai-challenge-3000-in-prizes-5f99" rel="nofollow">Cloudflare AI Challenge</a>.</p> <p>Please check out the <a href="https://slater.sean.app" rel="nofollow">demo</a>.</p> <div class="markdown-heading"> <h2 class="heading-element">Problem and pain points</h2> </div> <p>I want to learn Mandarin, but I don't have a Mandarin-speaking friend to practice with. I'm also not confident enough with my foreign language skills to speak with a Mandarin-speaking person online.</p> <p>Duolingo doesn't teach me how to write or speak the things I want to express. For example, I want to say <em>This is my favorite coffee shop</em>. I know how to construct the sentence, but I don't know the Mandarin word for <em>favorite</em>. So, I end up saying - <em>Zhe tiao wo de <strong>favorite</strong> kafei guan</em>.</p> <p>Google Translate lacks certain language nuances. It also doesn't keep track of the things I looked up.</p> <p>Keeping notes of the words…</p> </div> </div> <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/seanvelasco/slater">View on GitHub</a></div> </div> <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--A9-wwsHG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"> <a href="https://github.com/seanvelasco"> seanvelasco </a> / <a href="https://github.com/seanvelasco/slater-worker"> slater-worker </a> </h2> <h3> Cloudflare Workers that power Slater </h3> </div> </div> <h2> Journey </h2> <h3> Pain points and motivation </h3> <p>I want to learn Mandarin, but I don't have a Mandarin-speaking friend to practice with. I'm also not confident enough with my foreign language skills to speak with a Mandarin-speaking person online.</p> <p>Duolingo doesn't teach me how to write or speak the things I want to express. For example, I want to say <em>This is my favorite coffee shop</em>. I know how to construct the sentence, but I don't know the Mandarin word for <em>favorite</em>. So, I end up saying - <em>Zhe tiao wo de <strong>favorite</strong> kafei guan</em>.</p> <p>Google Translate lacks certain language nuances. It also doesn't keep track of the things I looked up.</p> <p>Keeping notes of the words I learn takes effort - I have to write down the English word, hanzi, pinyin, and how it is used in a sentence.</p> <p>Therefore, I wanted to create an experience where I can converse freely in a foreign language without fear of judgement, where I can quickly translate (and save as "learned") words, and where I can practice my diction (Chinese pronunciations are really hard).</p> <p>This is my first time developing an LLM app. I learned a lot in a span of two days (I learned of this challenge a little bit late). The next steps would be, developing this further for personal use, and to extend the use-cases for other languages.</p> <p><strong>Multiple Models and/or Triple Task Types</strong></p> <p>Slater has three modes: conversation mode, translation mode, and speaking/diction mode.</p> <ul> <li><p>Meta LLama 2 for general conversations, but instructed to limit and focus its scope to language learning.</p></li> <li><p>Meta Meta M2M-100 for text translations between English and Mandarin Chinese.</p></li> <li><p>OpenAI Whisper for speech-to-text. However, currently figuring out how to make it work with Mandarin Chinese.</p></li> </ul> cloudflarechallenge devchallenge ai