I Built an AI-Powered 'Sarcastic Code Reviewer' (And how you can too!)

<header>

  <div class="logo">🤖 Sarcastic AI Code Reviewer</div>

</header>



<main>

  <h2>Submit Your Code for a "Gentle" Review</h2>

  <p>Paste your HTML below and let our AI senior developer roast your markup choices.</p>



  <section class="editor-section">

    <textarea id="codeInput" placeholder="Paste your HTML here... (e.g., <div><div><div class='nav'>Item</div></div></div>)"></textarea>

    <button id="roastBtn">Analyze My Code</button>

  </section>



  <section class="review-section">

    <h3>The Verdict:</h3>

    <div id="aiResponse" class="response-box">Waiting for code to destroy...</div>

  </section>

</main>

body {

  background-color: #0d1117;

  /* your CSS styles... */

}

  font-family: 'Courier New', Courier, monospace;

  margin: 0;

  padding: 20px;

  display: flex;

  flex-direction: column;

  align-items: center;

}



main {

  width: 100%;

  max-width: 800px;

  background-color: #161b22;

  padding: 30px;

  border-radius: 8px;

  border: 1px solid #30363d;

}



textarea {

  width: 100%;

  height: 180px;

  background-color: #010409;

  color: #39ff14; /* Neon Green */

  border: 1px solid #30363d;

  padding: 15px;

  font-family: 'Courier New', monospace;

  resize: vertical;

}



button {

  width: 100%;

  background-color: #238636;

  color: white;

  border: none;

  padding: 15px;

  font-family: 'Courier New', monospace;

  font-weight: bold;

  cursor: pointer;

  border-radius: 6px;

}



button:hover {

  background-color: #2ea043;

}



.response-box {

  background-color: #010409;

  border-left: 4px solid #ff7b72; /* Sassy red warning border */

  padding: 20px;

  border-radius: 4px;

}

const codeInput = document.getElementById('codeInput');

const roastBtn = document.getElementById('roastBtn');

const aiResponse = document.getElementById('aiResponse');



const API_URL = "[https://api-inference.huggingface.co/models/Qwen/Qwen2.5-Coder-7B-Instruct](https://api-inference.huggingface.co/models/Qwen/Qwen2.5-Coder-7B-Instruct)";



roastBtn.addEventListener('click', async () => {

  const codeToRoast = codeInput.value.trim();



  if (!codeToRoast) {

    aiResponse.innerText = "🤖 [ERROR] You submitted... absolutely nothing. Is your keyboard broken, or is your brain still compiling?";

    return;

  }



  roastBtn.disabled = true;

  roastBtn.innerText = "Consulting the angry senior developer...";

  aiResponse.innerText = "Analyzing your digital sins...";



  // Defining the AI's personality

  const systemPrompt = `You are a sassy, coffee-deprived Senior Frontend Web Developer who despises bad HTML. 

If they submit 'Div Soup' (nested divs), mock them hilariously. 

If they use beautiful Semantic HTML, praise them with dry, heavy sarcasm. 

Keep your review short (under 4 sentences), punchy, and use emojis.`;



  const userMessage = `Here is my HTML code. Please review it:\n\n\`\`\`html\n${codeToRoast}\n\`\`\``;



  try {

    const response = await fetch(API_URL, {

      method: "POST",

      headers: { "Content-Type": "application/json" },

      body: JSON.stringify({

        inputs: `<|im_start|>system\n${systemPrompt}<|im_end|>\n<|im_start|>user\n${userMessage}<|im_end|>\n<|im_start|>assistant\n`,

        parameters: { max_new_tokens: 180, temperature: 0.8 }

      })

    });



    const data = await response.json();



    if (data && data[0] && data[0].generated_text) {

      aiResponse.innerText = data[0].generated_text.replace(/<\|im_end\|>/g, "").trim();

    } else {

      throw new Error();

    }

  } catch (error) {

    aiResponse.innerText = "🤖 [SYSTEM ERROR] The AI was so overwhelmed by your code that its API crashed. Try again!";

  } finally {

    roastBtn.disabled = false;

    roastBtn.innerText = "Analyze My Code";

  }

});