{"id":318,"date":"2024-05-31T16:06:06","date_gmt":"2024-05-31T12:36:06","guid":{"rendered":"https:\/\/haghiri75.com\/en\/?p=318"},"modified":"2024-05-31T16:06:06","modified_gmt":"2024-05-31T12:36:06","slug":"frontbricks-my-llm-based-weekend-project-which-is-inspired-by-vercels-v0","status":"publish","type":"post","link":"https:\/\/haghiri75.com\/en\/frontbricks-my-llm-based-weekend-project-which-is-inspired-by-vercels-v0\/","title":{"rendered":"FrontBricks, my LLM-based weekend project which is inspired by Vercel&#8217;s V0"},"content":{"rendered":"<p>Since 2022, there is a hype of\u00a0<em>generative artificial intelligence\u00a0<\/em>and it resulted in a bunch of cool projects. Although a lot of us may remember that Github&#8217;s copilot was much older. Those days, I wrote an article about how <a href=\"https:\/\/haghiri75.com\/en\/i-was-to-cheap-to-pay-10-a-month-for-copilot-so-i-made-my-own\/\">I was too cheap to pay $10 a month for copilot<\/a>, so I made my own!<\/p>\n<p>That was somehow the beginning of my interest in AI field. I spent around four years in this field and like most of us, I tried to utilize different tools and products. In this article, I&#8217;m talking about <a href=\"https:\/\/frontbricks.co\">FrontBricks<\/a> which is my newest product and how it started as a weekend project!<\/p>\n<p><a href=\"http:\/\/haghiri75.com\/en\/wp-content\/uploads\/frontbricks.png\"><img data-attachment-id=\"319\" data-permalink=\"https:\/\/haghiri75.com\/en\/frontbricks-my-llm-based-weekend-project-which-is-inspired-by-vercels-v0\/frontbricks\/\" data-orig-file=\"https:\/\/haghiri75.com\/en\/wp-content\/uploads\/frontbricks.png\" data-orig-size=\"1080,608\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"frontbricks\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/haghiri75.com\/en\/wp-content\/uploads\/frontbricks-300x169.png\" data-large-file=\"https:\/\/haghiri75.com\/en\/wp-content\/uploads\/frontbricks-1024x576.png\" decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-319\" src=\"http:\/\/haghiri75.com\/en\/wp-content\/uploads\/frontbricks.png\" alt=\"\" width=\"1080\" height=\"608\" srcset=\"https:\/\/haghiri75.com\/en\/wp-content\/uploads\/frontbricks.png 1080w, https:\/\/haghiri75.com\/en\/wp-content\/uploads\/frontbricks-300x169.png 300w, https:\/\/haghiri75.com\/en\/wp-content\/uploads\/frontbricks-1024x576.png 1024w, https:\/\/haghiri75.com\/en\/wp-content\/uploads\/frontbricks-768x432.png 768w\" sizes=\"(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/a><\/p>\n<h2>A little bit of history<\/h2>\n<p>In 2023, I launched <a href=\"https:\/\/mann-e.com\">Mann-E<\/a> which is an AI image generator based on its own models (and more information is provided in the website). A few months ago, I also launched <a href=\"https:\/\/haghiri75.com\/en\/maral-is-here-7-billion-parameters-bilingual-model-with-support-of-persian\/\">Maral<\/a>, which is a 7 billion parameter LLM specialized for the Persian language (the language I speak).<\/p>\n<p>Also, around a month ago, I did some tests with brand new LLMs such as LLaMa 3, in order to make <a href=\"https:\/\/search.mann-e.com\">Mann-E Search<\/a> which can be somehow an alternative to Perplexity but with a little difference (it doesn&#8217;t provide a chat interface).<\/p>\n<p>I guess this can clarify how I am drowned in AI space and how much I love generative AI! Now we can talk about FrontBricks!<\/p>\n<p><a href=\"http:\/\/haghiri75.com\/en\/wp-content\/uploads\/frontbricks2.png\"><img data-attachment-id=\"322\" data-permalink=\"https:\/\/haghiri75.com\/en\/frontbricks-my-llm-based-weekend-project-which-is-inspired-by-vercels-v0\/frontbricks2\/\" data-orig-file=\"https:\/\/haghiri75.com\/en\/wp-content\/uploads\/frontbricks2.png\" data-orig-size=\"1080,608\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"frontbricks2\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/haghiri75.com\/en\/wp-content\/uploads\/frontbricks2-300x169.png\" data-large-file=\"https:\/\/haghiri75.com\/en\/wp-content\/uploads\/frontbricks2-1024x576.png\" decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-322\" src=\"http:\/\/haghiri75.com\/en\/wp-content\/uploads\/frontbricks2.png\" alt=\"\" width=\"1080\" height=\"608\" srcset=\"https:\/\/haghiri75.com\/en\/wp-content\/uploads\/frontbricks2.png 1080w, https:\/\/haghiri75.com\/en\/wp-content\/uploads\/frontbricks2-300x169.png 300w, https:\/\/haghiri75.com\/en\/wp-content\/uploads\/frontbricks2-1024x576.png 1024w, https:\/\/haghiri75.com\/en\/wp-content\/uploads\/frontbricks2-768x432.png 768w\" sizes=\"(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/a><\/p>\n<h2>What is <a href=\"https:\/\/frontbricks.com\">FrontBricks<\/a>?<\/h2>\n<p>You may be familiar with <a href=\"https:\/\/v0.dev\">Vercel&#8217;s V0<\/a> which is a generative AI tool helping people generate frontend components. I liked their idea, and I joined their waitlist and a couple days later, I got access to the platform.<\/p>\n<p>It was a cool experience, and some sparks formed in my head. I found out that pretty much all LLMs are really good at the task of code generation, and we can utilize one to generate the code and use another one in order to find out if the code is valid or not.<\/p>\n<p>This was my whole idea so I sat at my desk and started to code a basic tool to send my prompts to OpenAI&#8217;s API in order to generate and then another one to do the validation using LLaMa 3 70B and GPT-4 as well (I used OpenAI again).<\/p>\n<p>I also found another bottleneck, which was JSX code generation. I did a little bit of research and I found that is not really a big deal and using the power of Regex and text manipulation, it&#8217;s easily possible to turn pure HTML to JSX!<\/p>\n<p>I wrote pretty much everything, so I just switched to my work environment, created a simple rails app and then connected it to my backend module. Now, I have a platform which can be an alternative to Vercel&#8217;s V0!<\/p>\n<p>Today, I am just announcing frontbricks, but I have to say before this post around 211 people gave me their email addresses to put them in the list of\u00a0<em>early adopters\u00a0<\/em>and I gave them access to the platform earlier this week!<\/p>\n<p>My birthday (May 30th) was in this week, so I guess it can also be a bit of surprise for my friends and the community.<\/p>\n<h2>How can I access FrontBricks?<\/h2>\n<p>Well, it is easy. You just need to go to frontbricks.com and create an account (<a href=\"https:\/\/frontbricks.com\/users\/sign_up\">sign up link<\/a>). Then you just need to confirm your email and boom, you have\u00a0<span style=\"text-decoration: underline;\">unlimited<\/span> access to FrontBricks, completely free of charge!<\/p>\n<p>You can generate a component, then improve it and every time you felt you need a new component, you easily can choose to create a new code snippet. It is as easy as drinking a cup of tea.<\/p>\n<p><a href=\"http:\/\/haghiri75.com\/en\/wp-content\/uploads\/frontbricks3.png\"><img data-attachment-id=\"326\" data-permalink=\"https:\/\/haghiri75.com\/en\/frontbricks-my-llm-based-weekend-project-which-is-inspired-by-vercels-v0\/frontbricks3\/\" data-orig-file=\"https:\/\/haghiri75.com\/en\/wp-content\/uploads\/frontbricks3.png\" data-orig-size=\"1080,608\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"frontbricks3\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/haghiri75.com\/en\/wp-content\/uploads\/frontbricks3-300x169.png\" data-large-file=\"https:\/\/haghiri75.com\/en\/wp-content\/uploads\/frontbricks3-1024x576.png\" decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-326\" src=\"http:\/\/haghiri75.com\/en\/wp-content\/uploads\/frontbricks3.png\" alt=\"\" width=\"1080\" height=\"608\" srcset=\"https:\/\/haghiri75.com\/en\/wp-content\/uploads\/frontbricks3.png 1080w, https:\/\/haghiri75.com\/en\/wp-content\/uploads\/frontbricks3-300x169.png 300w, https:\/\/haghiri75.com\/en\/wp-content\/uploads\/frontbricks3-1024x576.png 1024w, https:\/\/haghiri75.com\/en\/wp-content\/uploads\/frontbricks3-768x432.png 768w\" sizes=\"(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/a><\/p>\n<h2>Future Plans<\/h2>\n<p>Since this project isn&#8217;t monetized yet, the very first thing coming to my mind is a way to monetize it (you still can donate in crypto <a href=\"https:\/\/mann-e.com\/donations\">through this link<\/a>). A good business model can help this project be much better.<\/p>\n<p>I also am thinking of releasing an open source model based on the data provided on FrontBricks, because one of the reasons I coded this project is just that I couldn&#8217;t find a model specialized for front-end generation!<\/p>\n<p>These are my concerns for now. If you have any other ideas, I&#8217;m open to here.<\/p>\n<h2>Conclusion<\/h2>\n<p>I have a haystack of ideas in my mind, and if I find enough time, I implement them. Mann-E and FrontBricks are just two of projects I just made and to be honest, Mann-E with around 6000 users and more than 50,000 generated images, is somehow one my most successful projects.<\/p>\n<p>FrontBricks has potential, but I guess I can&#8217;t keep it up alone. I&#8217;m open to technical and business ideas as well. So if you have any ideas in mind, feel free to send me a message, my email is haghiri75@gmail.com \ud83d\ude01<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Since 2022, there is a hype of\u00a0generative artificial intelligence\u00a0and it resulted in a bunch of cool projects. Although a lot of us may remember that Github&#8217;s copilot was much older. Those days, I wrote an article about how I was too cheap to pay $10 a month for copilot, so I made my own! That &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/haghiri75.com\/en\/frontbricks-my-llm-based-weekend-project-which-is-inspired-by-vercels-v0\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;FrontBricks, my LLM-based weekend project which is inspired by Vercel&#8217;s V0&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_newsletter_tier_id":0,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[2,4],"tags":[36,23,37,39,38,11,13,22,6,45,46,24,25,49,50],"jetpack_publicize_connections":[],"aioseo_notices":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8BkKn-58","jetpack-related-posts":[{"id":202,"url":"https:\/\/haghiri75.com\/en\/severus-does-the-magic\/","url_meta":{"origin":318,"position":0},"title":"Severus does the magic","author":"prp-e","date":"September 11, 2022","format":false,"excerpt":"It is not too long after I told you that I was too cheap to pay $10 a month for github copilot and I came up with the idea for Severus, my own AI pair programmer. It was something that went boom. My blog usually doesn't have more than 20\u2026","rel":"","context":"In &quot;Computer Architecture &amp; Programming&quot;","block_context":{"text":"Computer Architecture &amp; Programming","link":"https:\/\/haghiri75.com\/en\/category\/computer\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/haghiri75.com\/en\/wp-content\/uploads\/warforged_wizard_by_captdiablo_de2mwm8-pre-1024x724.jpg?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/haghiri75.com\/en\/wp-content\/uploads\/warforged_wizard_by_captdiablo_de2mwm8-pre-1024x724.jpg?resize=350%2C200 1x, https:\/\/i0.wp.com\/haghiri75.com\/en\/wp-content\/uploads\/warforged_wizard_by_captdiablo_de2mwm8-pre-1024x724.jpg?resize=525%2C300 1.5x"},"classes":[]},{"id":192,"url":"https:\/\/haghiri75.com\/en\/i-was-to-cheap-to-pay-10-a-month-for-copilot-so-i-made-my-own\/","url_meta":{"origin":318,"position":1},"title":"I was too cheap to pay $10 a month for copilot, so I made my own","author":"prp-e","date":"September 4, 2022","format":false,"excerpt":"In mid 2021, there was a revolution in coding. As a lazy programmer who always needed a fast and smart assistant, I was really happy to have Github Copilot in my arsenal of coding tools. So I was one of the early adapters of the whole idea of AI pair\u2026","rel":"","context":"In &quot;Computer Architecture &amp; Programming&quot;","block_context":{"text":"Computer Architecture &amp; Programming","link":"https:\/\/haghiri75.com\/en\/category\/computer\/"},"img":{"alt_text":"My own copilot!","src":"https:\/\/i0.wp.com\/haghiri75.com\/en\/wp-content\/uploads\/Screen-Shot-2022-09-03-at-10.46.46-PM.png?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/haghiri75.com\/en\/wp-content\/uploads\/Screen-Shot-2022-09-03-at-10.46.46-PM.png?resize=350%2C200 1x, https:\/\/i0.wp.com\/haghiri75.com\/en\/wp-content\/uploads\/Screen-Shot-2022-09-03-at-10.46.46-PM.png?resize=525%2C300 1.5x"},"classes":[]},{"id":335,"url":"https:\/\/haghiri75.com\/en\/privacy-focused-ai-is-all-we-need\/","url_meta":{"origin":318,"position":2},"title":"Privacy-focused AI is all we need","author":"prp-e","date":"November 1, 2024","format":false,"excerpt":"I remember in 2020 and 2021, due to Elon Musk's interest in crypto and also\u00a0The Metaverse Hype\u00a0people, specially the ones who had no idea about crypto or blockchain, started investing in the crypto markets. Although it seemed a little bit of a failure, people made profit out of it. It\u2026","rel":"","context":"In &quot;Projects&quot;","block_context":{"text":"Projects","link":"https:\/\/haghiri75.com\/en\/category\/projects\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":391,"url":"https:\/\/haghiri75.com\/en\/lets-build-metaverse-with-ai-building-asset-generator\/","url_meta":{"origin":318,"position":3},"title":"Let&#8217;s build Metaverse with AI: Building asset generator","author":"prp-e","date":"November 27, 2024","format":false,"excerpt":"Look at this: How do you think this apple has been made? Excellent question. After the previous post, I said we should put LLMs out of the picture for now. Also we needed to talk about 3D, because it is important in whole metaverse space, right? Today I just did\u2026","rel":"","context":"In &quot;Projects&quot;","block_context":{"text":"Projects","link":"https:\/\/haghiri75.com\/en\/category\/projects\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/mann-e-images.storage.c2.liara.space\/120c3554-8326-4625-a129-50e80bb215da_part_0003.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/mann-e-images.storage.c2.liara.space\/120c3554-8326-4625-a129-50e80bb215da_part_0003.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/mann-e-images.storage.c2.liara.space\/120c3554-8326-4625-a129-50e80bb215da_part_0003.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/mann-e-images.storage.c2.liara.space\/120c3554-8326-4625-a129-50e80bb215da_part_0003.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":411,"url":"https:\/\/haghiri75.com\/en\/maralgpt-mythos-9b-just-released-and-this-is-why-im-proud-of-my-project\/","url_meta":{"origin":318,"position":4},"title":"MaralGPT &#8220;Mythos&#8221; 9B just released, and this is why I&#8217;m proud of my project.","author":"prp-e","date":"June 29, 2026","format":false,"excerpt":"The other day I was watching a youtube video about models such as Fable and the host of podcast mentioned people from China, Russia or Iran may distil these models and make their own versions and called it\u00a0dangerous. Honestly, what I found out - as an Iranian individual - is\u2026","rel":"","context":"In &quot;Computer Architecture &amp; Programming&quot;","block_context":{"text":"Computer Architecture &amp; Programming","link":"https:\/\/haghiri75.com\/en\/category\/computer\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/huggingface.co\/MaralGPT\/MaralGPT-Mythos-9B-2606\/resolve\/main\/maral-mythos-logo.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/huggingface.co\/MaralGPT\/MaralGPT-Mythos-9B-2606\/resolve\/main\/maral-mythos-logo.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/huggingface.co\/MaralGPT\/MaralGPT-Mythos-9B-2606\/resolve\/main\/maral-mythos-logo.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/huggingface.co\/MaralGPT\/MaralGPT-Mythos-9B-2606\/resolve\/main\/maral-mythos-logo.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":399,"url":"https:\/\/haghiri75.com\/en\/you-only-need-python-to-make-ai-agents\/","url_meta":{"origin":318,"position":5},"title":"You only need Python to make AI agents.","author":"prp-e","date":"December 31, 2024","format":false,"excerpt":"In 2022, ChatGPT released and LLMs becoming the hot topic of pretty much every technology related press, event, YouTube video, etc. It was like finding the secret ingredient to a potion which can make you immortal. But Meta didn't let OpenAI becoming the one and only. They also started the\u2026","rel":"","context":"In &quot;Projects&quot;","block_context":{"text":"Projects","link":"https:\/\/haghiri75.com\/en\/category\/projects\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/mann-e-images.storage.c2.liara.space\/319996af-289a-4617-8d0c-6580e4793747.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/mann-e-images.storage.c2.liara.space\/319996af-289a-4617-8d0c-6580e4793747.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/mann-e-images.storage.c2.liara.space\/319996af-289a-4617-8d0c-6580e4793747.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/mann-e-images.storage.c2.liara.space\/319996af-289a-4617-8d0c-6580e4793747.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/mann-e-images.storage.c2.liara.space\/319996af-289a-4617-8d0c-6580e4793747.png?resize=1050%2C600&ssl=1 3x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/haghiri75.com\/en\/wp-json\/wp\/v2\/posts\/318"}],"collection":[{"href":"https:\/\/haghiri75.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/haghiri75.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/haghiri75.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/haghiri75.com\/en\/wp-json\/wp\/v2\/comments?post=318"}],"version-history":[{"count":8,"href":"https:\/\/haghiri75.com\/en\/wp-json\/wp\/v2\/posts\/318\/revisions"}],"predecessor-version":[{"id":329,"href":"https:\/\/haghiri75.com\/en\/wp-json\/wp\/v2\/posts\/318\/revisions\/329"}],"wp:attachment":[{"href":"https:\/\/haghiri75.com\/en\/wp-json\/wp\/v2\/media?parent=318"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/haghiri75.com\/en\/wp-json\/wp\/v2\/categories?post=318"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/haghiri75.com\/en\/wp-json\/wp\/v2\/tags?post=318"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}