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

#webdev #ai #javascript #html

Remember my last article on defeating the dreaded "Div Soup" and writing beautiful Semantic HTML?

Well, I decided that simply telling people to write cleaner code wasn't enough. I needed reinforcements. So, I built an AI assistant.

But not just any helpful, polite AI. I built a sassy, coffee-deprived Senior Frontend Developer whose sole purpose in life is to roast bad markup. If you paste nested <div> tags, it will destroy your confidence. If you write beautiful semantic HTML, it will praise you with heavy, dry sarcasm.

And the best part? We are going to build this together in under 10 minutes using raw HTML, CSS, and a free open-source AI model! No backend server or paid API keys required.

🛠️ The Interactive Playground

Before we dive into the code, you can test the live app right here on my CodePen! Try pasting some nested <div> tags to see what happens:

👉 https://codepen.io/editor/CoderDecoding/pen/019f6062-dd6e-7285-a249-9bb077792671

🏗️ Step 1: The Clean Layout (HTML)

First, we need a clean, semantic structure for our terminal interface. We'll use a <header> for our title, a <main> area for the tool, and <section> tags to split our text editor from the AI's feedback.

<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>

text

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";
  }
});