| <!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: - const port = 3000; + 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"; |
| |
| |
| 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 { |
| |
| 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> |
|
|
