index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Developer Git Commit Agent</title>
    <style>
        body { font-family: monospace; background-color: #121212; color: #ffffff; padding: 40px; margin: 0; }
        .container { max-width: 800px; margin: 0 auto; }
        h1 { border-bottom: 1px solid #333; padding-bottom: 10px; color: #00ff66; }
        textarea { width: 100%; height: 200px; background-color: #1e1e1e; color: #00ff66; border: 1px solid #333; padding: 10px; font-family: monospace; box-sizing: border-box; resize: vertical; }
        button { background-color: #00ff66; color: #121212; border: none; padding: 12px 20px; font-weight: bold; cursor: pointer; margin-top: 15px; width: 100%; font-family: monospace; }
        button:hover { background-color: #00cc55; }
        .output-box { margin-top: 30px; background-color: #1e1e1e; border-left: 4px solid #00ff66; padding: 15px; white-space: pre-wrap; display: none; }
        .loading { color: #ffaa00; margin-top: 15px; display: none; }
    </style>
</head>
<body>

<div class="container">
    <h1>🤖 Developer Git Commit Agent</h1>
    <p>Paste your code adjustments or Git diff block below to generate a standardized commit message using the free serverless API.</p>
    
    <textarea id="gitDiff" placeholder="Example:&#10;- const port = 3000;&#10;+ const port = process.env.PORT || 5000;"></textarea>
    
    <button onclick="generateCommit()">Generate Commit Message</button>
    
    <div id="loadingStatus" class="loading">⚙️ Processing diff via Serverless Inference API (this can take a moment if the model is waking up)...</div>
    <div id="outputBox" class="output-box"></div>
</div>
<script>
async function generateCommit() {
    const MODEL_ID = "nivethitha1703/developer-git-commit-agent";
    
    // Safely reads the public variable without hardcoding the token string in text
    const HF_TOKEN = window.huggingface?.variables?.HF_TOKEN || ""; 
    
    const diffText = document.getElementById("gitDiff").value;
    const outputBox = document.getElementById("outputBox");
    const loadingStatus = document.getElementById("loadingStatus");
    
    if (!diffText.trim()) {
        alert("Please paste a git diff first!");
        return;
    }
    
    outputBox.style.display = "none";
    loadingStatus.style.display = "block";
    
    const prompt = `<|im_start|>system\nYou are an expert software engineer agent. Write a concise, professional Git commit message based on the provided code diff.<|im_end|>\n<|im_start|>user\nCode Diff:\n${diffText}<|im_end|>\n<|im_start|>assistant\n`;
    
    try {
        const response = await fetch(`https://huggingface.co{MODEL_ID}`, {
            method: "POST",
            headers: {
                "Authorization": HF_TOKEN ? `Bearer ${HF_TOKEN}` : "", 
                "Content-Type": "application/json"
            },
            body: JSON.stringify({
                inputs: prompt,
                parameters: { max_new_tokens: 60, temperature: 0.4 }
            })
        });
        
        const data = await response.json();
        loadingStatus.style.display = "none";
        
        if (data.error && data.error.includes("loading")) {
            outputBox.innerText = "⏳ Model is currently loading on Hugging Face servers. Retrying automatically in 10 seconds...";
            outputBox.style.display = "block";
            setTimeout(generateCommit, 10000);
            return;
        }
        
        if (data.error) {
            outputBox.innerText = "API Error: " + data.error;
        } else {
            // Support both array and object response structures from the inference API
            let result = Array.isArray(data) ? data[0].generated_text : data.generated_text;
            result = result.replace(prompt, "").trim();
            outputBox.innerText = result;
        }
        outputBox.style.display = "block";
        
    } catch (error) {
        loadingStatus.style.display = "none";
        outputBox.innerText = "Fetch Error: " + error.message;
        outputBox.style.display = "block";
    }
}
</script>


</body>
</html>