<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Suyash Srivastava</title>
    <description>The latest articles on DEV Community by Suyash Srivastava (@suyashsrivastavadev).</description>
    <link>https://dev.to/suyashsrivastavadev</link>
    <image>
      <url>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%2F1639443%2Fa3505bdf-e2b5-4afb-bc6d-1af987cb9b34.jpeg</url>
      <title>DEV Community: Suyash Srivastava</title>
      <link>https://dev.to/suyashsrivastavadev</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/suyashsrivastavadev"/>
    <language>en</language>
    <item>
      <title>OpenGuard: Self-Hosted Static Code Analysis (SCA) with Local AI Auto-Fixes (Gemma 4)</title>
      <dc:creator>Suyash Srivastava</dc:creator>
      <pubDate>Wed, 20 May 2026 19:38:55 +0000</pubDate>
      <link>https://dev.to/suyashsrivastavadev/openguard-ai-288m</link>
      <guid>https://dev.to/suyashsrivastavadev/openguard-ai-288m</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/google-gemma-2026-05-06"&gt;Gemma 4 Challenge: Build with Gemma 4&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;OpenGuard&lt;/strong&gt; is a developer-centric, self-hosted static code analysis (SCA) platform designed to act as an open-source alternative to tools like SonarQube. Built with &lt;strong&gt;OpenGrep&lt;/strong&gt; (a Semgrep fork), &lt;strong&gt;FastAPI&lt;/strong&gt;, &lt;strong&gt;PostgreSQL&lt;/strong&gt;, and &lt;strong&gt;React&lt;/strong&gt;, it enables developers to scan codebases, compute real-time project security health scores, track issues across historical scans, and manage remediation efforts via a native Jira-style Kanban board. &lt;/p&gt;

&lt;p&gt;To bridge the gap between finding a vulnerability and fixing it, OpenGuard features an &lt;strong&gt;AI-driven remediation pipeline&lt;/strong&gt;. With a single click on any code vulnerability, OpenGuard packages the entire target file, localizes the error coordinates, and calls a local &lt;strong&gt;Gemma 4&lt;/strong&gt; instance to generate high-fidelity, contextual explanations and beautified drop-in code fixes.&lt;/p&gt;

&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;p&gt;Our platform features a highly responsive, premium dashboard engineered with an editorial design aesthetic. The UI utilizes a warm parchment background, bold ink-black typography, and serif-led headings for a state-of-the-art experience:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Interactive Project Dashboard&lt;/strong&gt;: A clean visual split of issues by severity level (Critical, High, Medium, Low) featuring semantic color-coding. The dashboard includes a dynamic, natively animated SVG Security Health Gauge and an interactive historical trend chart with hover-activated data tooltips.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Kanban Board&lt;/strong&gt;: A Jira-like ticket board allowing developers to transition issues between &lt;em&gt;Backlog&lt;/em&gt;, &lt;em&gt;Todo&lt;/em&gt;, &lt;em&gt;In Progress&lt;/em&gt;, and &lt;em&gt;Done&lt;/em&gt;. Each issue card features visual tags showing its historical persistence, severity badges, and details.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;AI Fix Interface&lt;/strong&gt;: An interactive code viewer inside the ticket details that displays the native explanation alongside a pre-formatted, syntax-highlighted code block containing the recommended fix.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;End-User Packaging&lt;/strong&gt;: The entire infrastructure is packaged into a seamless, single-command Docker Compose environment with an easy-to-install Python CLI (&lt;code&gt;openguard scan&lt;/code&gt;) for scanning local repositories.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://youtu.be/i0CUZcxYty4?si=lJJSpj3mKlDkedHb" rel="noopener noreferrer"&gt;OpenGuard Real Demo&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;  &lt;iframe src="https://www.youtube.com/embed/i0CUZcxYty4"&gt;
  &lt;/iframe&gt;
&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Application Dashboard&lt;br&gt;
&lt;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%2F3qjbkzjqbi02xcd57mvg.png" class="article-body-image-wrapper"&gt;&lt;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%2F3qjbkzjqbi02xcd57mvg.png" alt="Application Dashboard" width="800" height="458"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Workspace&lt;br&gt;
&lt;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%2F75r8nmvqpxcfk8diqsi2.png" class="article-body-image-wrapper"&gt;&lt;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%2F75r8nmvqpxcfk8diqsi2.png" alt="Workspace" width="799" height="323"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Project overview&lt;br&gt;
&lt;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%2Fo0zml47jsczgdcxsl6dr.png" class="article-body-image-wrapper"&gt;&lt;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%2Fo0zml47jsczgdcxsl6dr.png" alt="Project overview" width="800" height="359"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;List of issues in the scan.&lt;br&gt;
&lt;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%2Fx1ibgy9evgzbb4ubwmta.png" class="article-body-image-wrapper"&gt;&lt;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%2Fx1ibgy9evgzbb4ubwmta.png" alt="List of issues" width="800" height="432"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;AI suggest explanation &amp;amp; fix&lt;br&gt;
&lt;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%2Ftog2gqohw7bp9uruxgvy.png" class="article-body-image-wrapper"&gt;&lt;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%2Ftog2gqohw7bp9uruxgvy.png" alt="AI suggest explanation &amp;amp; fix" width="799" height="440"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Code
&lt;/h2&gt;

&lt;p&gt;The complete source code for OpenGuard is open-source and available on GitHub:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://github.com/suyash-srivastava-dev/open-analyzer" rel="noopener noreferrer"&gt;GitHub Repository - suyash-srivastava-dev/open-analyzer&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  How I Used Gemma 4
&lt;/h2&gt;

&lt;p&gt;OpenGuard leverages the local inference capabilities of &lt;strong&gt;Gemma 4&lt;/strong&gt; (&lt;code&gt;gemma4:e4b&lt;/code&gt;) served via Ollama. &lt;/p&gt;

&lt;h3&gt;
  
  
  Why Gemma 4?
&lt;/h3&gt;

&lt;p&gt;Vulnerabilities are rarely self-contained; they require systemic understanding of the surrounding code. We chose the &lt;strong&gt;Gemma 4 9B parameter model&lt;/strong&gt; because of its excellent performance in coding tasks and its ability to process large instruction sets locally. &lt;/p&gt;

&lt;h3&gt;
  
  
  Implementation Details:
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Large Context Processing (128K Tokens)&lt;/strong&gt;: In order to provide accurate fixes without hallucinating, we supply Gemma 4 with the &lt;strong&gt;entire source file&lt;/strong&gt; (up to a 128K context limit) rather than just the isolated line of code. This allows the model to understand local variables, imports, and architectural patterns.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Structured JSON Output&lt;/strong&gt;: To build a reliable API, we configured the Ollama request with the format constraint &lt;code&gt;json&lt;/code&gt; and structured the prompt to guarantee responses matching:
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="w"&gt;   &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
     &lt;/span&gt;&lt;span class="nl"&gt;"explanation"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"Brief context on why this is a vulnerability."&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
     &lt;/span&gt;&lt;span class="nl"&gt;"code_fix"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"The fully corrected file or function block."&lt;/span&gt;&lt;span class="w"&gt;
   &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This ensures that the frontend can parse the response natively and present the suggested fix in a beautiful, copyable code block without raw markdown delimiters (&lt;code&gt;&lt;/code&gt;`&lt;code&gt;&lt;/code&gt;) bleeding into the UI.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Optimized Development Loop&lt;/strong&gt;: The AI responses are cached in the PostgreSQL database so that recurring views are instant, with a &lt;code&gt;--force&lt;/code&gt; flag implemented to let developers request a fresh generation when needed.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Gemma 4 provides the speed of local developer workflows with the intelligence of a security expert, making local static analysis interactive and highly actionable.&lt;/p&gt;




&lt;h3&gt;
  
  
  Reach Out
&lt;/h3&gt;

&lt;p&gt;Built by &lt;strong&gt;Suyash Srivastava&lt;/strong&gt;. If you have any feedback, questions, or are interested in collaborating on OpenGuard or similar AI-driven developer tooling, I'd love to hear from you!&lt;/p&gt;

&lt;p&gt;📧 Contact me at: &lt;a href="mailto:suyashmtech+openanlyzer@gmail.com"&gt;suyashmtech+openanlyzer@gmail.com&lt;/a&gt;&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>gemmachallenge</category>
      <category>gemma</category>
    </item>
    <item>
      <title>Learn Django through Inventory management system</title>
      <dc:creator>Suyash Srivastava</dc:creator>
      <pubDate>Wed, 08 Jan 2025 21:33:43 +0000</pubDate>
      <link>https://dev.to/suyashsrivastavadev/learn-django-through-inventory-management-system-14no</link>
      <guid>https://dev.to/suyashsrivastavadev/learn-django-through-inventory-management-system-14no</guid>
      <description>&lt;h2&gt;
  
  
  About project
&lt;/h2&gt;

&lt;p&gt;Youtube : &lt;a href="https://youtu.be/cMA1q_wHJv4" rel="noopener noreferrer"&gt;Project Overview&lt;/a&gt;&lt;br&gt;
Github : &lt;a href="https://github.com/suyash-srivastava-dev/Inventory-Management" rel="noopener noreferrer"&gt;https://github.com/suyash-srivastava-dev/Inventory-Management&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This project aims covers application with Database, models, Views, templates with CRUD functionality.&lt;/p&gt;

&lt;p&gt;I have implemented an inventory management system using Django to efficiently manage products, stock levels, suppliers and sales. It supports crud operations for product and suppliers, facilitate stock management and enable tracking of sales order.&lt;/p&gt;

&lt;p&gt;I have used django as a backend and for front-end it involves HTML CSS JavaScript with the django template that is jinja. For the database I have used mysql or sqlite. You can below settings for postgres &amp;amp; mysql.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="c1"&gt;# Postgres
&lt;/span&gt;&lt;span class="n"&gt;DATABASES&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;default&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;ENGINE&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;django.db.backends.postgresql&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; 
        &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;NAME&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;your_database_name&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; 
        &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;USER&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;your_db_user&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; 
        &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;PASSWORD&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;your_db_password&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; 
        &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;HOST&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;localhost&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; 
        &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;PORT&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;5432&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; 
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c1"&gt;# MySQL
&lt;/span&gt;&lt;span class="n"&gt;DATABASES&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;default&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;ENGINE&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;django.db.backends.mysql&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; 
        &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;NAME&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;your_database_name&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; 
        &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;USER&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;your_db_user&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; 
        &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;PASSWORD&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;your_db_password&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; 
        &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;HOST&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;localhost&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; 
        &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;PORT&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="s"&gt;3306&lt;/span&gt;&lt;span class="sh"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; 
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Database model parameters
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;product which consists of name description category price stock quantity and supplier&lt;/li&gt;
&lt;li&gt;supplier table which contains name email phone number and address&lt;/li&gt;
&lt;li&gt;sales order that contains product quantity total price sales data and status&lt;/li&gt;
&lt;li&gt;stock movement that contains product quantity movement type movement date and notes&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Models : &lt;a href="https://github.com/suyash-srivastava-dev/Inventory-Management/blob/3f9afb0f69547a8efee5d7f8f99dc7f8a493c735/inventory_management/models.py" rel="noopener noreferrer"&gt;inventory_management/models.py&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Tasks
&lt;/h2&gt;

&lt;p&gt;The application is allows you to add product ,list product, add supplier, list supplier, add stock movements ,create sales order, cancel sales order ,complete sales order, list sales order and stock level check.&lt;/p&gt;

&lt;h2&gt;
  
  
  Run project
&lt;/h2&gt;

&lt;p&gt;&lt;em&gt;Note: Recommended to use virtual environment for the application.&lt;/em&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  From Project
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;Install dependecy : &lt;code&gt;pip install -r requirements.txt&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Run the django application : &lt;code&gt;python manage.py runserver&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;check project on &lt;code&gt;http://localhost:8000/&lt;/code&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  From Docker
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;Build the application image : &lt;code&gt;docker-compose build&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Create container out of the image: &lt;code&gt;docker-compose up -d&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;check project on &lt;code&gt;http://localhost:8000/&lt;/code&gt;
&lt;/li&gt;
&lt;/ol&gt;

</description>
      <category>django</category>
      <category>sql</category>
      <category>webdev</category>
      <category>docker</category>
    </item>
    <item>
      <title>Image Annotation for AI Model training using Pinata</title>
      <dc:creator>Suyash Srivastava</dc:creator>
      <pubDate>Sun, 13 Oct 2024 12:51:09 +0000</pubDate>
      <link>https://dev.to/suyashsrivastavadev/image-annotation-for-ai-model-training-using-pinata-571n</link>
      <guid>https://dev.to/suyashsrivastavadev/image-annotation-for-ai-model-training-using-pinata-571n</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/pinata"&gt;The Pinata Challenge &lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;I have built an image annotation application using :&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;FastAPI : Backend&lt;/li&gt;
&lt;li&gt;Angular: Frontend&lt;/li&gt;
&lt;li&gt;Pinata : Blob/File Storage&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This application would help in doing the annotations of the image dataset. Then these annotations could be exported and be used for AI model training.&lt;/p&gt;

&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/ZICO88vXu6Y"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.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%2Fwyf8ltwo2ur4hxwd6c50.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.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%2Fwyf8ltwo2ur4hxwd6c50.png" alt="Image description" width="800" height="564"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.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%2Fbbcsvzi72woaoi2fthav.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.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%2Fbbcsvzi72woaoi2fthav.png" alt="Image description" width="800" height="419"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  My Code
&lt;/h2&gt;

&lt;h2&gt;
  
  
  Flow Diagram
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media.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%2F4phtzti3a9a8o4441s4p.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.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%2F4phtzti3a9a8o4441s4p.png" alt="Image description" width="583" height="502"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Pinata setup
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Create an account with Pinata, and fetch the keys.&lt;/li&gt;
&lt;li&gt;Install and setup .env files
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm i pinata
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;PINATA_API_KEY&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;""&lt;/span&gt;
&lt;span class="nx"&gt;PINATA_API_SECRET&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;""&lt;/span&gt;
&lt;span class="nx"&gt;PINATA_GATEWAY&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;*.mypinata.cloud&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
&lt;span class="nx"&gt;PINATA_JWT&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;""&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;PinataSDK&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;pinata&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;pinata&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;PinataSDK&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;pinataJwt&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;PINATA_JWT&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;pinataGateway&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;example-gateway.mypinata.cloud&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Create methods for Upload &amp;amp; Retrieve Files&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Upload File&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;file&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;File&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;hello&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Testing.txt&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;type&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;text/plain&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;upload&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;pinata&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;upload&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;file&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;file&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;upload&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Retrieve Files&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;url&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;pinata&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;gateways&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;createSignedURL&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
        &lt;span class="na"&gt;cid&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;bafkreib4pqtikzdjlj4zigobmd63lig7u6oxlug24snlr6atjlmlza45dq&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;expires&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;1800&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="p"&gt;})&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;url&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Backend &amp;amp; Frontend Code Repo
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;backend Fastapi : &lt;a href="https://github.com/suyash-srivastava-dev/annotation-editor-backend" rel="noopener noreferrer"&gt;https://github.com/suyash-srivastava-dev/annotation-editor-backend&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;frontend Angular : &lt;a href="https://github.com/suyash-srivastava-dev/annotation-editor" rel="noopener noreferrer"&gt;https://github.com/suyash-srivastava-dev/annotation-editor&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  More Details
&lt;/h2&gt;

&lt;p&gt;Pinata group was created for each project in the application.&lt;br&gt;
Pinata was used for saving the image dataset, with &amp;amp; without annotations. Also the annotation files are saved as JSON on Pinata. Access to the images &amp;amp; Json file is through the signed SDK.&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>pinatachallenge</category>
      <category>webdev</category>
      <category>api</category>
    </item>
    <item>
      <title>Very Own bookmarks</title>
      <dc:creator>Suyash Srivastava</dc:creator>
      <pubDate>Mon, 24 Jun 2024 06:43:30 +0000</pubDate>
      <link>https://dev.to/suyashsrivastavadev/very-own-bookmarks-f4c</link>
      <guid>https://dev.to/suyashsrivastavadev/very-own-bookmarks-f4c</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for &lt;a href="https://dev.to/challenges/twilio"&gt;Twilio Challenge v24.06.12&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;Use Case: When scrolling through news articles, blog posts or youtube video. I often send WhatsApp messages to myself with important links I want to bookmark. However, finding the right link later can be challenging, as I have to sift through several sent links before locating the one I need. To solve this problem, I created an application.&lt;/p&gt;

&lt;p&gt;This application accepts the links I share and provides a brief description of each one. This feature helps me quickly find the desired link when using the search option in WhatsApp.&lt;/p&gt;

&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/JFXHCvpv4Fc"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;&lt;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%2Fy7tf2ykrezw47qa0opzw.png" class="article-body-image-wrapper"&gt;&lt;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%2Fy7tf2ykrezw47qa0opzw.png" alt="Image description" width="800" height="712"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Twilio and AI
&lt;/h2&gt;

&lt;p&gt;I have taken into consideration the type of data that I share, that is generally either an article from web or a youtube video.&lt;/p&gt;

&lt;p&gt;So the flow is as below.&lt;/p&gt;

&lt;p&gt;&lt;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%2Fi4qnr9vecrg0155rxuel.png" class="article-body-image-wrapper"&gt;&lt;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%2Fi4qnr9vecrg0155rxuel.png" alt="Image description" width="800" height="219"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Additional Prize Categories
&lt;/h2&gt;

&lt;p&gt;Impactful Innovators: Though it's a simple application but it solves a major problem of finding right content that was bookmarked by the user.&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>twiliochallenge</category>
      <category>ai</category>
      <category>twilio</category>
    </item>
  </channel>
</rss>
